@pdfme/ui 5.2.0 → 5.2.1

package/dist/types/constants.d.ts

@@ -3,5 +3,6 @@ export declare const DESTROYED_ERR_MSG = "[@pdfme/ui] this instance is already d
 export declare const SELECTABLE_CLASSNAME = "selectable";
 export declare const RULER_HEIGHT = 30;
 export declare const PAGE_GAP = 10;
+export declare const LEFT_SIDEBAR_WIDTH = 45;
 export declare const RIGHT_SIDEBAR_WIDTH = 400;
 export declare const BACKGROUND_COLOR = "rgb(74, 74, 74)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/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<any>, 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',

package/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}
       >
-        <CtlBar
-          size={sizeExcSidebar}
-          pageCursor={pageCursor}
-          pageNum={schemasList.length}
-          setPageCursor={(p) => {
-            if (!canvasRef.current) return;
-            canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
-            setPageCursor(p);
-            onEditEnd();
-          }}
-          zoomLevel={zoomLevel}
-          setZoomLevel={setZoomLevel}
-          {...pageManipulation}
-        />
         <LeftSidebar
           height={canvasRef.current ? canvasRef.current.clientHeight : 0}
           scale={scale}
           basePdf={template.basePdf}
         />
 
-        <RightSidebar
-          hoveringSchemaId={hoveringSchemaId}
-          onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-          height={canvasRef.current ? canvasRef.current.clientHeight : 0}
-          size={size}
-          pageSize={pageSizes[pageCursor] ?? []}
-          activeElements={activeElements}
-          schemasList={schemasList}
-          schemas={schemasList[pageCursor] ?? []}
-          changeSchemas={changeSchemas}
-          onSortEnd={onSortEnd}
-          onEdit={id => {
-            const editingElem = document.getElementById(id);
-            editingElem && onEdit([editingElem]);
-          }}
-          onEditEnd={onEditEnd}
-          deselectSchema={onEditEnd}
-          sidebarOpen={sidebarOpen}
-          setSidebarOpen={setSidebarOpen}
-        />
-
-        <Canvas
-          ref={canvasRef}
-          paperRefs={paperRefs}
-          basePdf={template.basePdf}
-          hoveringSchemaId={hoveringSchemaId}
-          onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-          height={size.height - RULER_HEIGHT * ZOOM}
-          pageCursor={pageCursor}
-          scale={scale}
-          size={sizeExcSidebar}
-          pageSizes={pageSizes}
-          backgrounds={backgrounds}
-          activeElements={activeElements}
-          schemasList={schemasList}
-          changeSchemas={changeSchemas}
-          removeSchemas={removeSchemas}
-          sidebarOpen={sidebarOpen}
-          onEdit={onEdit}
-        />
+        <div style={{ position: 'absolute', width: canvasWidth, marginLeft: LEFT_SIDEBAR_WIDTH }}>
+          <CtlBar
+            size={sizeExcSidebars}
+            pageCursor={pageCursor}
+            pageNum={schemasList.length}
+            setPageCursor={(p) => {
+              if (!canvasRef.current) return;
+              canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+              setPageCursor(p);
+              onEditEnd();
+            }}
+            zoomLevel={zoomLevel}
+            setZoomLevel={setZoomLevel}
+            {...pageManipulation}
+          />
+
+          <RightSidebar
+            hoveringSchemaId={hoveringSchemaId}
+            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+            height={canvasRef.current ? canvasRef.current.clientHeight : 0}
+            size={size}
+            pageSize={pageSizes[pageCursor] ?? []}
+            activeElements={activeElements}
+            schemasList={schemasList}
+            schemas={schemasList[pageCursor] ?? []}
+            changeSchemas={changeSchemas}
+            onSortEnd={onSortEnd}
+            onEdit={id => {
+              const editingElem = document.getElementById(id);
+              editingElem && onEdit([editingElem]);
+            }}
+            onEditEnd={onEditEnd}
+            deselectSchema={onEditEnd}
+            sidebarOpen={sidebarOpen}
+            setSidebarOpen={setSidebarOpen}
+          />
+
+          <Canvas
+            ref={canvasRef}
+            paperRefs={paperRefs}
+            basePdf={template.basePdf}
+            hoveringSchemaId={hoveringSchemaId}
+            onChangeHoveringSchemaId={onChangeHoveringSchemaId}
+            height={size.height - RULER_HEIGHT * ZOOM}
+            pageCursor={pageCursor}
+            scale={scale}
+            size={sizeExcSidebars}
+            pageSizes={pageSizes}
+            backgrounds={backgrounds}
+            activeElements={activeElements}
+            schemasList={schemasList}
+            changeSchemas={changeSchemas}
+            removeSchemas={removeSchemas}
+            sidebarOpen={sidebarOpen}
+            onEdit={onEdit}
+          />
+        </div>
       </DndContext>
     </Root>
   );

package/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)';