@pdfme/ui 5.2.0 → 5.2.1-dev.2

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/dist/types/contexts.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Plugins, UIOptions } from '@pdfme/common';
-export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "required" | "cancel" | "close" | "field" | "fieldName" | "align" | "edit" | "editable" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle" | "schemas.date.format" | "schemas.select.options" | "schemas.select.optionPlaceholder", dict?: {
+export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "required" | "cancel" | "close" | "field" | "fieldName" | "align" | "edit" | "editable" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "validation.uniqueName" | "validation.hexColor" | "schemas.color" | "schemas.borderWidth" | "schemas.borderColor" | "schemas.backgroundColor" | "schemas.textColor" | "schemas.bgColor" | "schemas.horizontal" | "schemas.vertical" | "schemas.left" | "schemas.center" | "schemas.right" | "schemas.top" | "schemas.middle" | "schemas.bottom" | "schemas.padding" | "schemas.text.fontName" | "schemas.text.size" | "schemas.text.spacing" | "schemas.text.textAlign" | "schemas.text.verticalAlign" | "schemas.text.lineHeight" | "schemas.text.min" | "schemas.text.max" | "schemas.text.fit" | "schemas.text.dynamicFontSize" | "schemas.text.format" | "schemas.mvt.typingInstructions" | "schemas.mvt.sampleField" | "schemas.mvt.variablesSampleData" | "schemas.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle" | "schemas.date.format" | "schemas.select.options" | "schemas.select.optionPlaceholder" | "schemas.radioGroup.groupName", dict?: {
     cancel: string;
     close: string;
     field: string;
@@ -68,6 +68,7 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     'schemas.date.format': string;
     'schemas.select.options': string;
     'schemas.select.optionPlaceholder': string;
+    'schemas.radioGroup.groupName': string;
 } | undefined) => string>;
 export declare const FontContext: import("react").Context<Record<string, {
     data: string | ArrayBuffer | Uint8Array;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.2.0",
+  "version": "5.2.1-dev.2",
   "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)';

package/src/i18n.ts

@@ -71,6 +71,7 @@ const dictEn: { [key in keyof Dict]: string } = {
   'schemas.date.format': 'Date Format',
   'schemas.select.options': 'Options',
   'schemas.select.optionPlaceholder': 'Enter an option',
+  'schemas.radioGroup.groupName': 'Group Name',
 };
 
 const dictZh: { [key in keyof Dict]: string } = {
@@ -141,6 +142,7 @@ const dictZh: { [key in keyof Dict]: string } = {
   'schemas.date.format': '日期格式',
   'schemas.select.options': '选项',
   'schemas.select.optionPlaceholder': '请输入选项',
+  'schemas.radioGroup.groupName': '组名',
 };
 
 const dictJa: { [key in keyof Dict]: string } = {
@@ -211,6 +213,7 @@ const dictJa: { [key in keyof Dict]: string } = {
   'schemas.date.format': '日付形式',
   'schemas.select.options': 'オプション',
   'schemas.select.optionPlaceholder': 'オプションを入力してください',
+  'schemas.radioGroup.groupName': 'グループ名',
 };
 
 const dictKo: { [key in keyof Dict]: string } = {
@@ -281,6 +284,7 @@ const dictKo: { [key in keyof Dict]: string } = {
   'schemas.date.format': '날짜 형식',
   'schemas.select.options': '옵션',
   'schemas.select.optionPlaceholder': '옵션을 입력하세요',
+  'schemas.radioGroup.groupName': '그룹 이름',
 };
 
 const dictAr: { [key in keyof Dict]: string } = {
@@ -352,6 +356,7 @@ const dictAr: { [key in keyof Dict]: string } = {
   'schemas.date.format': 'تنسيق التاريخ',
   'schemas.select.options': 'خيارات',
   'schemas.select.optionPlaceholder': 'أدخل خيارًا',
+  'schemas.radioGroup.groupName': 'اسم المجموعة',
 };
 
 const dictTh: { [key in keyof Dict]: string } = {
@@ -422,6 +427,7 @@ const dictTh: { [key in keyof Dict]: string } = {
   'schemas.date.format': 'รูปแบบวันที่',
   'schemas.select.options': 'ตัวเลือก',
   'schemas.select.optionPlaceholder': 'กรอกตัวเลือก',
+  'schemas.radioGroup.groupName': 'ชื่อกลุ่ม',
 };
 
 const dictIt: { [key in keyof Dict]: string } = {
@@ -495,6 +501,7 @@ const dictIt: { [key in keyof Dict]: string } = {
   'schemas.date.format': 'Formato data',
   'schemas.select.options': 'Opzioni',
   'schemas.select.optionPlaceholder': 'Inserisci un\'opzione',
+  'schemas.radioGroup.groupName': 'Nome del Gruppo',
 };
 
 const dictPl: { [key in keyof Dict]: string } = {
@@ -565,6 +572,7 @@ const dictPl: { [key in keyof Dict]: string } = {
   'schemas.date.format': 'Format daty',
   'schemas.select.options': 'Opcje',
   'schemas.select.optionPlaceholder': 'Wpisz opcję',
+  'schemas.radioGroup.groupName': 'Nazwa grupy',
 };
 
 const dictDe: { [key in keyof Dict]: string } = {
@@ -638,6 +646,7 @@ const dictDe: { [key in keyof Dict]: string } = {
   'schemas.date.format': 'Datumsformat',
   'schemas.select.options': 'Optionen',
   'schemas.select.optionPlaceholder': 'Geben Sie eine Option ein',
+  'schemas.radioGroup.groupName': 'Gruppenname',
 };
 
 const dictEs: { [key in keyof Dict]: string } = {
@@ -710,6 +719,7 @@ const dictEs: { [key in keyof Dict]: string } = {
   'schemas.date.format': 'Formato de fecha',
   'schemas.select.options': 'Opciones',
   'schemas.select.optionPlaceholder': 'Ingrese una opción',
+  'schemas.radioGroup.groupName': 'Nombre del grupo',
 };
 
 const dictFr: { [key in keyof Dict]: string } = {
@@ -783,6 +793,7 @@ const dictFr: { [key in keyof Dict]: string } = {
   'schemas.date.format': 'Format de date',
   'schemas.select.options': 'Options',
   'schemas.select.optionPlaceholder': 'Entrez une option',
+  'schemas.radioGroup.groupName': 'Nom du groupe',
 };
 
 const dictionaries: { [key in Lang]: Dict } = {