-
+
-
-
-
+
+
-
-
-
+
-
+
+
+
-
+
+
-
+
+
+
+
+
+ Field List
+
+
+
-
+
+
+
-
- -
+
-
+ + +++ ++ +
+
-
+ + +++ ++ +
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- b
-
-
- b
-
+
+ b
+
+
+ b
+
+
-
+
diff --git a/packages/ui/src/components/Designer/LeftSidebar.tsx b/packages/ui/src/components/Designer/LeftSidebar.tsx
index e8408253..e1fa090a 100644
--- a/packages/ui/src/components/Designer/LeftSidebar.tsx
+++ b/packages/ui/src/components/Designer/LeftSidebar.tsx
@@ -8,9 +8,11 @@ import { theme, Button } from 'antd';
import { useDraggable } from '@dnd-kit/core';
import { CSS } from "@dnd-kit/utilities";
import Renderer from '../Renderer';
+import { LEFT_SIDEBAR_WIDTH } from '../../constants';
import { PluginsRegistry } from '../../contexts';
import PluginIcon from "./PluginIcon";
+
const Draggable = (props: { plugin: Plugin, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
const { scale, basePdf, plugin } = props;
const { token } = theme.useToken();
@@ -67,7 +69,7 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
position: 'absolute',
zIndex: 1,
height,
- width: 45,
+ width: LEFT_SIDEBAR_WIDTH,
background: token.colorBgLayout,
textAlign: 'center',
overflow: isDragging ? 'visible' : 'auto',
diff --git a/packages/ui/src/components/Designer/index.tsx b/packages/ui/src/components/Designer/index.tsx
index 4a5c24c1..62975e35 100644
--- a/packages/ui/src/components/Designer/index.tsx
+++ b/packages/ui/src/components/Designer/index.tsx
@@ -15,7 +15,7 @@ import { DndContext } from '@dnd-kit/core';
import RightSidebar from './RightSidebar/index';
import LeftSidebar from './LeftSidebar';
import Canvas from './Canvas/index';
-import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../constants';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH, LEFT_SIDEBAR_WIDTH } from '../../constants';
import { I18nContext, OptionsContext, PluginsRegistry } from '../../contexts';
import {
schemasList2template,
@@ -235,8 +235,9 @@ const TemplateEditor = ({
void updateTemplate(template);
}
- const sizeExcSidebar = {
- width: sidebarOpen ? size.width - RIGHT_SIDEBAR_WIDTH : size.width,
+ const canvasWidth = size.width - LEFT_SIDEBAR_WIDTH;
+ const sizeExcSidebars = {
+ width: sidebarOpen ? canvasWidth - RIGHT_SIDEBAR_WIDTH : canvasWidth,
height: size.height,
};
@@ -271,66 +272,69 @@ const TemplateEditor = ({
}}
onDragStart={onEditEnd}
>
- {
- if (!canvasRef.current) return;
- canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
- setPageCursor(p);
- onEditEnd();
- }}
- zoomLevel={zoomLevel}
- setZoomLevel={setZoomLevel}
- {...pageManipulation}
- />
{
- const editingElem = document.getElementById(id);
- editingElem && onEdit([editingElem]);
- }}
- onEditEnd={onEditEnd}
- deselectSchema={onEditEnd}
- sidebarOpen={sidebarOpen}
- setSidebarOpen={setSidebarOpen}
- />
+
- 
+
+
+
+ {
+ if (!canvasRef.current) return;
+ canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+ setPageCursor(p);
+ onEditEnd();
+ }}
+ zoomLevel={zoomLevel}
+ setZoomLevel={setZoomLevel}
+ {...pageManipulation}
+ />
-
+ {
+ const editingElem = document.getElementById(id);
+ editingElem && onEdit([editingElem]);
+ }}
+ onEditEnd={onEditEnd}
+ deselectSchema={onEditEnd}
+ sidebarOpen={sidebarOpen}
+ setSidebarOpen={setSidebarOpen}
+ />
+
+
+
);
diff --git a/packages/ui/src/constants.ts b/packages/ui/src/constants.ts
index dc58bb85..eed492d3 100644
--- a/packages/ui/src/constants.ts
+++ b/packages/ui/src/constants.ts
@@ -8,6 +8,8 @@ export const RULER_HEIGHT = 30;
export const PAGE_GAP = 10;
+export const LEFT_SIDEBAR_WIDTH = 45;
+
export const RIGHT_SIDEBAR_WIDTH = 400;
export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';