@pdfme/ui 4.0.0-alpha.0 → 4.0.0-dev.3

package/src/components/Designer/index.tsx

@@ -7,12 +7,14 @@ import {
   ChangeSchemas,
   DesignerProps,
   Size,
-  Plugin,
   isBlankPdf,
+  px2mm,
 } from '@pdfme/common';
-import Sidebar from './Sidebar/index';
+import { DndContext } from '@dnd-kit/core';
+import RightSidebar from './RightSidebar/index';
+import LeftSidebar from './LeftSidebar';
 import Canvas from './Canvas/index';
-import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../constants';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../constants';
 import { I18nContext, PluginsRegistry } from '../../contexts';
 import {
   schemasList2template,
@@ -27,19 +29,34 @@ import Root from '../Root';
 import ErrorScreen from '../ErrorScreen';
 import CtlBar from '../CtlBar';
 
+/**
+ * When the canvas scales there is a displacement of the starting position of the dragged schema.
+ * It moves left or right from the top-left corner of the drag icon depending on the scale.
+ * This function calculates the adjustment needed to compensate for this displacement.
+ */
+const scaleDragPosAdjustment = (adjustment: number, scale: number): number => {
+  if (scale > 1) return adjustment * (scale - 1);
+  if (scale < 1) return adjustment * -(1 - scale);
+  return 0;
+}
+
 const TemplateEditor = ({
   template,
   size,
   onSaveTemplate,
   onChangeTemplate,
+  onPageCursorChange,
 }: Omit<DesignerProps, 'domContainer'> & {
   size: Size;
   onSaveTemplate: (t: Template) => void;
   onChangeTemplate: (t: Template) => void;
+} & {
+  onChangeTemplate: (t: Template) => void 
+  onPageCursorChange: (newPageCursor: number) => void
 }) => {
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
-  const mainRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
 
   const i18n = useContext(I18nContext);
@@ -67,12 +84,13 @@ const TemplateEditor = ({
   };
 
   useScrollPageCursor({
-    ref: mainRef,
+    ref: canvasRef,
     pageSizes,
     scale,
     pageCursor,
     onChangePageCursor: (p) => {
       setPageCursor(p);
+      onPageCursorChange(p)
       onEditEnd();
     },
   });
@@ -133,32 +151,32 @@ const TemplateEditor = ({
     setSchemasList(sl);
     onEditEnd();
     setPageCursor(0);
-    if (mainRef.current?.scroll) {
-      mainRef.current.scroll({ top: 0, behavior: 'smooth' });
+    if (canvasRef.current?.scroll) {
+      canvasRef.current.scroll({ top: 0, behavior: 'smooth' });
     }
   }, []);
 
-  const addSchema = () => {
-    const propPanel = (Object.values(pluginsRegistry)[0] as Plugin<Schema>)?.propPanel;
+  const addSchema = (defaultSchema: Schema) => {
+    const [paddingTop, paddingRight, paddingBottom, paddingLeft] = isBlankPdf(template.basePdf) ? template.basePdf.padding : [0, 0, 0, 0];
+    const pageSize = pageSizes[pageCursor];
 
-    if (!propPanel) {
-      throw new Error(`[@pdfme/ui] addSchema failed: propPanel is empty.
-Check this document: https://pdfme.com/docs/custom-schemas`);
-    }
+    const ensureMiddleValue = (min: number, value: number, max: number) => Math.min(Math.max(min, value), max)
 
     const s = {
       id: uuid(),
       key: `${i18n('field')}${schemasList[pageCursor].length + 1}`,
-      ...propPanel.defaultSchema,
+      ...defaultSchema,
+      position: {
+        x: ensureMiddleValue(paddingLeft, defaultSchema.position.x, pageSize.width - paddingRight - defaultSchema.width),
+        y: ensureMiddleValue(paddingTop, defaultSchema.position.y, pageSize.height - paddingBottom - defaultSchema.height),
+      },
     } as SchemaForUI;
 
-    const paper = paperRefs.current[pageCursor];
-    const rectTop = paper ? paper.getBoundingClientRect().top : 0;
-    const [paddingTop, , , paddingLeft] = isBlankPdf(template.basePdf)
-      ? template.basePdf.padding
-      : [0, 0, 0, 0];
-    s.position.y = rectTop > 0 ? paddingTop : pageSizes[pageCursor].height / 2;
-    s.position.x = paddingLeft;
+    if (defaultSchema.position.y === 0) {
+      const paper = paperRefs.current[pageCursor];
+      const rectTop = paper ? paper.getBoundingClientRect().top : 0;
+      s.position.y = rectTop > 0 ? paddingTop : pageSizes[pageCursor].height / 2;
+    }
 
     commitSchemas(schemasList[pageCursor].concat(s));
     setTimeout(() => onEdit([document.getElementById(s.id)!]));
@@ -180,8 +198,8 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     void refresh(newTemplate);
     setTimeout(
       () =>
-        mainRef.current &&
-        ((mainRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)), 0)
+        canvasRef.current &&
+        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)), 0)
     );
   };
 
@@ -206,7 +224,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   }
 
   const sizeExcSidebar = {
-    width: sidebarOpen ? size.width - SIDEBAR_WIDTH : size.width,
+    width: sidebarOpen ? size.width - RIGHT_SIDEBAR_WIDTH : size.width,
     height: size.height,
   };
 
@@ -219,59 +237,88 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
 
   return (
     <Root size={size} scale={scale}>
-      <CtlBar
-        size={sizeExcSidebar}
-        pageCursor={pageCursor}
-        pageNum={schemasList.length}
-        setPageCursor={(p) => {
-          if (!mainRef.current) return;
-          mainRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
-          setPageCursor(p);
-          onEditEnd();
-        }}
-        zoomLevel={zoomLevel}
-        setZoomLevel={setZoomLevel}
-        {...pageManipulation}
-      />
-      <Sidebar
-        hoveringSchemaId={hoveringSchemaId}
-        onChangeHoveringSchemaId={onChangeHoveringSchemaId}
-        height={mainRef.current ? mainRef.current.clientHeight : 0}
-        size={size}
-        pageSize={pageSizes[pageCursor] ?? []}
-        activeElements={activeElements}
-        schemas={schemasList[pageCursor] ?? []}
-        changeSchemas={changeSchemas}
-        onSortEnd={onSortEnd}
-        onEdit={(id: string) => {
-          const editingElem = document.getElementById(id);
-          editingElem && onEdit([editingElem]);
+      <DndContext
+        onDragEnd={(event) => {
+          // Triggered after a schema is dragged & dropped from the left sidebar.
+          if (!event.active) return;
+          const active = event.active;
+          const pageRect = paperRefs.current[pageCursor].getBoundingClientRect();
+
+          const dragStartLeft = active.rect.current.initial?.left || 0;
+          const dragStartTop = active.rect.current.initial?.top || 0;
+
+          const canvasLeftOffsetFromPageCorner = pageRect.left - dragStartLeft + scaleDragPosAdjustment(20, scale);
+          const canvasTopOffsetFromPageCorner = pageRect.top - dragStartTop;
+
+          const moveY = (event.delta.y - canvasTopOffsetFromPageCorner) / scale;
+          const moveX = (event.delta.x - canvasLeftOffsetFromPageCorner) / scale;
+
+          const position = { x: px2mm(Math.max(0, moveX)), y: px2mm(Math.max(0, moveY)) }
+
+          addSchema({ ...(active.data.current as Schema), position });
         }}
-        onEditEnd={onEditEnd}
-        addSchema={addSchema}
-        deselectSchema={onEditEnd}
-        sidebarOpen={sidebarOpen}
-        setSidebarOpen={setSidebarOpen}
-      />
-      <Canvas
-        ref={mainRef}
-        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}
-      />
+        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}
+          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}
+        />
+      </DndContext>
     </Root>
   );
 };

package/src/components/Renderer.tsx

@@ -3,10 +3,11 @@ import { Dict, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema } from '@pdfme/
 import { theme as antdTheme } from 'antd';
 import { SELECTABLE_CLASSNAME } from '../constants';
 import { PluginsRegistry, OptionsContext, I18nContext } from '../contexts';
+import * as pdfJs from 'pdfjs-dist/legacy/build/pdf.js';
 
 type RendererProps = Omit<
   UIRenderProps<Schema>,
-  'schema' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'
+  'schema' | 'rootElement' | 'options' | 'theme' | 'i18n' | 'pdfJs' | '_cache'
 > & {
   basePdf: BasePdf;
   schema: SchemaForUI;
@@ -84,6 +85,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         options,
         theme,
         i18n,
+        pdfJs,
         _cache: _cache.current,
       });
     }

package/src/constants.ts

@@ -8,6 +8,6 @@ export const RULER_HEIGHT = 30;
 
 export const PAGE_GAP = 10;
 
-export const SIDEBAR_WIDTH = 400;
+export const RIGHT_SIDEBAR_WIDTH = 400;
 
 export const BACKGROUND_COLOR = 'rgb(74, 74, 74)';

package/src/helper.ts

@@ -417,7 +417,7 @@ export const getPagesScrollTopByIndex = (pageSizes: Size[], index: number, scale
 };
 
 export const getSidebarContentHeight = (sidebarHeight: number) =>
-  sidebarHeight - RULER_HEIGHT - RULER_HEIGHT / 2 - 115;
+  sidebarHeight - RULER_HEIGHT - RULER_HEIGHT / 2 - 30;
 
 const handlePositionSizeChange = (
   schema: SchemaForUI,

package/src/i18n.ts

@@ -16,7 +16,6 @@ const dictEn: { [key in keyof Dict]: string } = {
   notUniq: '(Not unique name)',
   noKeyName: 'No name',
   fieldsList: 'Field List',
-  addNewField: 'Add new field',
   editField: 'Edit Field',
   type: 'Type',
   errorOccurred: 'An error occurred',
@@ -77,7 +76,6 @@ const dictJa: { [key in keyof Dict]: string } = {
   notUniq: '(他の項目名と重複しています)',
   noKeyName: '項目名なし',
   fieldsList: '入力項目一覧',
-  addNewField: '入力項目を追加',
   editField: '入力項目を編集',
   type: 'タイプ',
   errorOccurred: 'エラーが発生しました',
@@ -137,7 +135,6 @@ const dictAr: { [key in keyof Dict]: string } = {
   notUniq: '(غير فريد)',
   noKeyName: 'لا يوجد اسم للحقل',
   fieldsList: 'قائمة الحقول',
-  addNewField: 'إضافة حقل جديد',
   editField: 'تعديل الحقل',
   type: 'النوع',
   errorOccurred: 'حدث خطأ',
@@ -197,7 +194,6 @@ const dictTh: { [key in keyof Dict]: string } = {
   notUniq: '(ชื่อฟิลด์ซ้ำกัน)',
   noKeyName: 'ไม่มีชื่อ',
   fieldsList: 'รายการฟิลด์ทั้งหมด',
-  addNewField: 'เพิ่มฟิลด์ใหม่',
   editField: 'แก้ไขฟิลด์',
   type: 'ประเภท',
   errorOccurred: 'เกิดข้อผิดพลาด',
@@ -257,7 +253,6 @@ const dictIt: { [key in keyof Dict]: string } = {
   notUniq: '(Nome non univoco)',
   noKeyName: 'Nessun nome',
   fieldsList: 'Lista campi',
-  addNewField: 'Aggiungi un campo',
   editField: 'Modifica campo',
   type: 'Tipo',
   errorOccurred: 'Riscontrato errore',
@@ -319,7 +314,6 @@ const dictPl: { [key in keyof Dict]: string } = {
   notUniq: '(Klucz pola nie jest unikalny)',
   noKeyName: 'Brak nazwy klucza pola',
   fieldsList: 'Lista pól',
-  addNewField: 'Dodaj nowe pole',
   editField: 'Edytuj pole',
   type: 'Typ pola',
   errorOccurred: 'Wystąpił błąd',
@@ -379,7 +373,6 @@ const dictDe: { [key in keyof Dict]: string } = {
   notUniq: '(Nicht eindeutiger Name)',
   noKeyName: 'Kein Name',
   fieldsList: 'Feldliste',
-  addNewField: 'Neues Feld hinzufügen',
   editField: 'Feld bearbeiten',
   type: 'Typ',
   errorOccurred: 'Ein Fehler ist aufgetreten',
@@ -426,6 +419,126 @@ const dictDe: { [key in keyof Dict]: string } = {
   'schemas.table.columnStyle': 'Spaltenstil',
 };
 
+const dictEs: { [key in keyof Dict]: string } = {
+  cancel: 'Cancelar',
+  field: 'campo',
+  fieldName: 'Nombre',
+  align: 'Alinear',
+  width: 'Anchura',
+  height: 'Altura',
+  opacity: 'Opacidad',
+  rotate: 'Rotar',
+  edit: 'Editar',
+  plsInputName: 'Introduce el nombre',
+  fieldMustUniq: 'El nombre del campo no es único',
+  notUniq: '(Nombre no único)',
+  noKeyName: 'Sin nombre',
+  fieldsList: 'Lista de campos',
+  editField: 'Editar campo',
+  type: 'Tipo',
+  errorOccurred: 'Ocurrió un error',
+  errorBulkUpdateFieldName:
+    'No se puede confirmar el cambio porque el número de elementos ha cambiado.',
+  commitBulkUpdateFieldName: 'Confirmar cambios',
+  bulkUpdateFieldName: 'Actualizar en bloque el nombre de los campos',
+  addPageAfter: 'Insertar página',
+  removePage: 'Eliminar página actual',
+  removePageConfirm:
+    '¿Estás seguro de que quieres eliminar esta página? Esta acción no se puede deshacer.',
+  hexColorPrompt: 'Introduce un código de color hexadecimal válido.',
+  'schemas.color': 'Color',
+  'schemas.borderWidth': 'Ancho del borde',
+  'schemas.borderColor': 'Color del borde',
+  'schemas.backgroundColor': 'Color de fondo',
+  'schemas.textColor': 'Color del texto',
+  'schemas.bgColor': 'Color del fondo',
+  'schemas.horizontal': 'Horizontal',
+  'schemas.vertical': 'Vertical',
+  'schemas.left': 'Izquierda',
+  'schemas.center': 'Centro',
+  'schemas.right': 'Derecha',
+  'schemas.top': 'Arriba',
+  'schemas.middle': 'Medio',
+  'schemas.bottom': 'Abajo',
+  'schemas.padding': 'Relleno',
+  'schemas.text.fontName': 'Nombre de la fuente',
+  'schemas.text.size': 'Tamaño',
+  'schemas.text.spacing': 'Espaciado',
+  'schemas.text.textAlign': 'Alineación del texto',
+  'schemas.text.verticalAlign': 'Alineación vertical',
+  'schemas.text.lineHeight': 'Altura de línea',
+  'schemas.text.min': 'Mín',
+  'schemas.text.max': 'Máx',
+  'schemas.text.fit': 'Ajustar',
+  'schemas.text.dynamicFontSize': 'Tamaño de fuente dinámico',
+  'schemas.barcodes.barColor': 'Color de la barra',
+  'schemas.barcodes.includetext': 'Incluir texto',
+  'schemas.table.alternateBackgroundColor': 'Color de fondo alternativo',
+  'schemas.table.tableStyle': 'Estilo de tabla',
+  'schemas.table.headStyle': 'Estilo de cabecera',
+  'schemas.table.bodyStyle': 'Estilo de cuerpo',
+  'schemas.table.columnStyle': 'Estilo de columna',
+};
+
+const dictFr: { [key in keyof Dict]: string } = {
+  cancel: 'Annuler',
+  field: 'Champ',
+  fieldName: 'Nom',
+  align: 'Aligner',
+  width: 'Largeur',
+  height: 'Hauteur',
+  opacity: 'Opacité',
+  rotate: 'Rotation',
+  edit: 'Éditer',
+  plsInputName: 'Veuillez saisir le nom',
+  fieldMustUniq:"Le nom du champ n'est pas unique",
+  notUniq: '(Nombre non unique)',
+  noKeyName: 'Pas de nom',
+  fieldsList: 'Liste des champs',
+  editField: 'Éditer le champ',
+  type: 'Type',
+  errorOccurred:' Une erreur est survenue',
+  errorBulkUpdateFieldName: "Impossible de confirmer le changement car le nombre d'éléments a changé.",
+  commitBulkUpdateFieldName: 'Confirmer les changements',
+  bulkUpdateFieldName: 'Modifier les noms de champs en masse',
+  addPageAfter: 'Ajouter une page après',
+  removePage: 'Supprimer la page actuelle',
+  removePageConfirm: 'Êtes-vous sûr de vouloir supprimer cette page ? Cette action est irréversible.',
+  hexColorPrompt: 'Veuillez entrer un code couleur hexadécimal valide.',
+  'schemas.color': 'Couleur',
+  'schemas.borderWidth': 'Largeur de la bordure',
+  'schemas.borderColor': 'Couleur de la bordure',
+  'schemas.backgroundColor': 'Couleur de fond',
+  'schemas.textColor': 'Couleur du texte',
+  'schemas.bgColor': 'Couleur de fond',
+  'schemas.horizontal': 'Horizontal',
+  'schemas.vertical': 'Vertical',
+  'schemas.left': 'Gauche',
+  'schemas.center': 'Centre',
+  'schemas.right': 'Droite',
+  'schemas.top': 'Haut',
+  'schemas.middle': 'Milieu',
+  'schemas.bottom': 'Bas',
+  'schemas.padding': 'Zone de remplissage',
+  'schemas.text.fontName': 'Nom de la police',
+  'schemas.text.size': 'Taille',
+  'schemas.text.spacing': 'Espacement',
+  'schemas.text.textAlign': 'Alignement du texte',
+  'schemas.text.verticalAlign': 'Alignement vertical',
+  'schemas.text.lineHeight': 'Hauteur de ligne',
+  'schemas.text.min': 'Min',
+  'schemas.text.max': 'Max',
+  'schemas.text.fit': 'Ajustement',
+  'schemas.text.dynamicFontSize': 'Taille de police dynamique',
+  'schemas.barcodes.barColor': 'Couleur de la barre',
+  'schemas.barcodes.includetext': 'Inclure le texte',
+  'schemas.table.alternateBackgroundColor': 'Couleur de fond alternative',
+  'schemas.table.tableStyle': 'Style de tableau',
+  'schemas.table.headStyle': "Style d'en-tête",
+  'schemas.table.bodyStyle': 'Style de corps',
+  'schemas.table.columnStyle': 'Style de colonne'
+};
+
 const dictionaries: { [key in Lang]: Dict } = {
   en: dictEn,
   ja: dictJa,
@@ -434,6 +547,8 @@ const dictionaries: { [key in Lang]: Dict } = {
   it: dictIt,
   pl: dictPl,
   de: dictDe,
+  es: dictEs,
+  fr: dictFr,
 };
 
 export const getDict = (lang: Lang): Dict => dictionaries[lang] || dictionaries[DEFAULT_LANG];

package/src/types.ts

@@ -12,7 +12,6 @@ export type SidebarProps = {
   onEdit: (id: string) => void;
   onEditEnd: () => void;
   changeSchemas: ChangeSchemas;
-  addSchema: () => void;
   deselectSchema: () => void;
   sidebarOpen: boolean;
   setSidebarOpen: (sidebarOpen: boolean) => void;