@pdfme/ui 3.4.3 → 4.0.0

package/src/components/Designer/index.tsx

@@ -7,25 +7,39 @@ 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 {
-  fmtTemplate,
+  schemasList2template,
   uuid,
-  set,
   cloneDeep,
-  templateSchemas2SchemasList,
+  template2SchemasList,
   getPagesScrollTopByIndex,
+  changeSchemas as _changeSchemas,
 } from '../../helper';
 import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks';
 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,
@@ -33,15 +47,16 @@ const TemplateEditor = ({
   onChangeTemplate,
   onPageCursorChange,
 }: Omit<DesignerProps, 'domContainer'> & {
-  onSaveTemplate: (t: Template) => void;
   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);
@@ -55,7 +70,8 @@ const TemplateEditor = ({
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [prevTemplate, setPrevTemplate] = useState<Template | null>(null);
 
-  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
+  const { backgrounds, pageSizes, scale, error, refresh } =
+    useUIPreProcessor({ template, size, zoomLevel });
 
   const onEdit = (targets: HTMLElement[]) => {
     setActiveElements(targets);
@@ -68,7 +84,7 @@ const TemplateEditor = ({
   };
 
   useScrollPageCursor({
-    ref: mainRef,
+    ref: canvasRef,
     pageSizes,
     scale,
     pageCursor,
@@ -86,7 +102,7 @@ const TemplateEditor = ({
       const _schemasList = cloneDeep(schemasList);
       _schemasList[pageCursor] = newSchemas;
       setSchemasList(_schemasList);
-      onChangeTemplate(fmtTemplate(template, _schemasList));
+      onChangeTemplate(schemasList2template(_schemasList, template.basePdf));
     },
     [template, schemasList, pageCursor, onChangeTemplate]
   );
@@ -101,32 +117,16 @@ const TemplateEditor = ({
 
   const changeSchemas: ChangeSchemas = useCallback(
     (objs) => {
-      const newSchemas = objs.reduce((acc, { key, value, schemaId }) => {
-        const tgt = acc.find((s) => s.id === schemaId)! as SchemaForUI;
-        // Assign to reference
-        set(tgt, key, value);
-
-        if (key === 'type') {
-          const keysToKeep = ['id', 'key', 'type', 'position'];
-          Object.keys(tgt).forEach((key) => {
-            if (!keysToKeep.includes(key)) {
-              delete tgt[key as keyof typeof tgt];
-            }
-          });
-          const propPanel = Object.values(pluginsRegistry).find(
-            (plugin) => plugin?.propPanel.defaultSchema.type === value
-          )?.propPanel;
-          set(tgt, 'data', propPanel?.defaultValue || '');
-          Object.assign(tgt, propPanel?.defaultSchema || {});
-        } else if (key === 'data' && tgt.readOnly) {
-          set(tgt, 'readOnlyValue', value);
-        }
-
-        return acc;
-      }, cloneDeep(schemasList[pageCursor]));
-      commitSchemas(newSchemas);
+      _changeSchemas({
+        objs,
+        schemas: schemasList[pageCursor],
+        basePdf: template.basePdf,
+        pluginsRegistry,
+        pageSize: pageSizes[pageCursor],
+        commitSchemas,
+      });
     },
-    [commitSchemas, pageCursor, schemasList]
+    [commitSchemas, pageCursor, schemasList, pluginsRegistry, pageSizes, template.basePdf]
   );
 
   useInitEvents({
@@ -147,33 +147,36 @@ const TemplateEditor = ({
   });
 
   const updateTemplate = useCallback(async (newTemplate: Template) => {
-    const sl = await templateSchemas2SchemasList(newTemplate);
+    const sl = await template2SchemasList(newTemplate);
     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}`,
-      data: propPanel.defaultValue || '',
-      ...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;
-    s.position.y = rectTop > 0 ? 0 : pageSizes[pageCursor].height / 2;
+    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)!]));
@@ -187,73 +190,135 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     setHoveringSchemaId(id);
   };
 
+  const updatePage = async (sl: SchemaForUI[][], newPageCursor: number) => {
+    setPageCursor(newPageCursor);
+    const newTemplate = schemasList2template(sl, template.basePdf);
+    onChangeTemplate(newTemplate);
+    await updateTemplate(newTemplate);
+    void refresh(newTemplate);
+    setTimeout(
+      () =>
+        canvasRef.current &&
+        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)), 0)
+    );
+  };
+
+  const handleRemovePage = () => {
+    if (pageCursor === 0) return;
+    if (!window.confirm(i18n('removePageConfirm'))) return;
+
+    const _schemasList = cloneDeep(schemasList);
+    _schemasList.splice(pageCursor, 1);
+    void updatePage(_schemasList, pageCursor - 1);
+  };
+
+  const handleAddPageAfter = () => {
+    const _schemasList = cloneDeep(schemasList);
+    _schemasList.splice(pageCursor + 1, 0, []);
+    void updatePage(_schemasList, pageCursor + 1);
+  };
+
   if (prevTemplate !== template) {
     setPrevTemplate(template);
     void updateTemplate(template);
   }
 
   const sizeExcSidebar = {
-    width: sidebarOpen ? size.width - SIDEBAR_WIDTH : size.width,
+    width: sidebarOpen ? size.width - RIGHT_SIDEBAR_WIDTH : size.width,
     height: size.height,
   };
 
   if (error) {
     return <ErrorScreen size={size} error={error} />;
   }
+  const pageManipulation = isBlankPdf(template.basePdf)
+    ? { addPageAfter: handleAddPageAfter, removePage: handleRemovePage }
+    : {};
 
   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}
-      />
-      <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}
-        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/Paper.tsx

@@ -67,8 +67,7 @@ const Paper = (props: {
 
         return (
           <div
-            id={`@pdfme/ui-paper${paperIndex}`}
-            key={paperIndex + JSON.stringify(paperSize)}
+            key={String(paperIndex) + JSON.stringify(paperSize)}
             ref={(e) => {
               if (e) {
                 paperRefs.current[paperIndex] = e;

package/src/components/Preview.tsx

@@ -1,5 +1,6 @@
-import React, { useCallback, useRef, useState, useEffect } from 'react';
-import type { SchemaForUI, PreviewProps, Size } from '@pdfme/common';
+import React, { useRef, useState, useEffect, useContext } from 'react';
+import { Template, SchemaForUI, PreviewProps, Size, getDynamicTemplate } from '@pdfme/common';
+import { modifyTemplateForTable, getDynamicHeightForTable } from '@pdfme/schemas';
 import UnitPager from './UnitPager';
 import Root from './Root';
 import ErrorScreen from './ErrorScreen';
@@ -7,9 +8,12 @@ import CtlBar from './CtlBar';
 import Paper from './Paper';
 import Renderer from './Renderer';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
-import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
+import { FontContext } from '../contexts';
+import { template2SchemasList, getPagesScrollTopByIndex } from '../helper';
 import { theme } from 'antd';
 
+const _cache = new Map();
+
 const Preview = ({
   template,
   inputs,
@@ -21,6 +25,8 @@ const Preview = ({
 }) => {
   const { token } = theme.useToken();
 
+  const font = useContext(FontContext);
+
   const containerRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
 
@@ -29,38 +35,55 @@ const Preview = ({
   const [zoomLevel, setZoomLevel] = useState(1);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
 
-  const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
+  const { backgrounds, pageSizes, scale, error, refresh } =
+    useUIPreProcessor({ template, size, zoomLevel });
+
+  const isForm = Boolean(onChangeInput);
+
+  const input = inputs[unitCursor];
 
-  const init = useCallback(async () => {
-    const sl = await templateSchemas2SchemasList(template);
-    setSchemasList(sl);
-  }, [template]);
+  const init = (template: Template) => {
+    const options = { font };
+    getDynamicTemplate({
+      template,
+      input,
+      options,
+      _cache,
+      modifyTemplate: (arg) => {
+        return modifyTemplateForTable(arg);
+      },
+      getDynamicHeight: (value, args) => {
+        if (args.schema.type !== 'table') return Promise.resolve(args.schema.height);
+        return getDynamicHeightForTable(value, args);
+      },
+    })
+      .then(async (dynamicTemplate) => {
+        const sl = await template2SchemasList(dynamicTemplate);
+        setSchemasList(sl);
+        await refresh(dynamicTemplate);
+      })
+      .catch((err) => console.error(`[@pdfme/ui] `, err));
+  };
 
   useEffect(() => {
     if (unitCursor > inputs.length - 1) {
       setUnitCursor(inputs.length - 1);
     }
-  }, [inputs]);
 
-  useEffect(() => {
-    init();
-  }, [init]);
+    init(template);
+  }, [template, inputs, size]);
 
   useScrollPageCursor({
     ref: containerRef,
     pageSizes,
     scale,
     pageCursor,
-    onChangePageCursor: (p) => setPageCursor(p),
+    onChangePageCursor: setPageCursor,
   });
 
   const handleChangeInput = ({ key, value }: { key: string; value: string }) =>
     onChangeInput && onChangeInput({ index: unitCursor, key, value });
 
-  const isForm = Boolean(onChangeInput);
-
-  const input = inputs[unitCursor];
-
   if (error) {
     return <ErrorScreen size={size} error={error} />;
   }
@@ -94,16 +117,43 @@ const Preview = ({
           pageSizes={pageSizes}
           backgrounds={backgrounds}
           renderSchema={({ schema, index }) => {
-            const { key } = schema;
-            const data = (input && input[key]) || '';
+            const { key, readOnly } = schema;
+            const content = readOnly ? String(schema.content) || '' : String(input && input[key] || '');
             return (
               <Renderer
                 key={schema.id}
-                schema={Object.assign(schema, { data })}
+                schema={schema}
+                basePdf={template.basePdf}
+                value={content}
                 mode={isForm ? 'form' : 'viewer'}
-                placeholder={template.sampledata?.[0]?.[key] ?? ''}
+                placeholder={schema.content}
                 tabIndex={index + 100}
-                onChange={(value) => handleChangeInput({ key, value })}
+                onChange={(arg) => {
+                  const args = Array.isArray(arg) ? arg : [arg];
+                  let isNeedInit = false;
+                  args.forEach(({ key: _key, value }) => {
+                    if (_key === 'content') {
+                      const newValue = value as string;
+                      const oldValue = (input?.[key] as string) || '';
+                      if (newValue === oldValue) return;
+                      handleChangeInput({ key, value: newValue });
+                      // TODO Set to true only if the execution of getDynamicTemplate, such as for a table, is required.
+                      isNeedInit = true;
+                    } else {
+                      const targetSchema = schemasList[pageCursor].find(
+                        (s) => s.id === schema.id
+                      ) as SchemaForUI;
+                      if (!targetSchema) return;
+
+                      // @ts-ignore
+                      targetSchema[_key] = value as string;
+                    }
+                  });
+                  if (isNeedInit) {
+                    init(template);
+                  }
+                  setSchemasList([...schemasList])
+                }}
                 outline={
                   isForm && !schema.readOnly ? `1px dashed ${token.colorPrimary}` : 'transparent'
                 }

package/src/components/Renderer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useContext, ReactNode, useRef } from 'react';
-import { Dict, ZOOM, UIRenderProps, SchemaForUI, Schema } from '@pdfme/common';
+import { Dict, ZOOM, UIRenderProps, SchemaForUI, BasePdf, Schema } from '@pdfme/common';
 import { theme as antdTheme } from 'antd';
 import { SELECTABLE_CLASSNAME } from '../constants';
 import { PluginsRegistry, OptionsContext, I18nContext } from '../contexts';
@@ -7,10 +7,11 @@ import * as pdfJs from 'pdfjs-dist/legacy/build/pdf.js';
 
 type RendererProps = Omit<
   UIRenderProps<Schema>,
-  'value' | 'schema' | 'onChange' | 'rootElement' | 'options' | 'theme' | 'i18n' | 'pdfJs' | '_cache'
+  'schema' | 'rootElement' | 'options' | 'theme' | 'i18n' | 'pdfJs' | '_cache'
 > & {
+  basePdf: BasePdf;
   schema: SchemaForUI;
-  onChange: (value: string) => void;
+  value: string;
   outline: string;
   onChangeHoveringSchemaId?: (id: string | null) => void;
   scale: number;
@@ -50,7 +51,8 @@ const Renderer = (props: RendererProps) => {
   const i18n = useContext(I18nContext) as (key: keyof Dict | string) => string;
   const { token: theme } = antdTheme.useToken();
 
-  const { schema, mode, onChange, stopEditing, tabIndex, placeholder, scale } = props;
+  const { schema, basePdf, value, mode, onChange, stopEditing, tabIndex, placeholder, scale } =
+    props;
 
   const ref = useRef<HTMLDivElement>(null);
   const _cache = useRef<Map<any, any>>(new Map());
@@ -69,16 +71,15 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
 
       ref.current.innerHTML = '';
 
-      const editable = mode === 'form' || mode === 'designer';
-
-      render({
+      void render({
         key: schema.key,
-        value: schema.readOnly ? schema.readOnlyValue || '' : schema.data,
+        value,
         schema,
+        basePdf,
         rootElement: ref.current,
         mode,
-        onChange: editable ? onChange : undefined,
-        stopEditing: editable ? stopEditing : undefined,
+        onChange,
+        stopEditing: stopEditing,
         tabIndex,
         placeholder,
         options,
@@ -93,7 +94,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         ref.current.innerHTML = '';
       }
     };
-  }, [JSON.stringify(schema), JSON.stringify(options), mode, scale]);
+  }, [value, JSON.stringify(schema), JSON.stringify(options), mode, scale]);
 
   return (
     <Wrapper {...props}>

package/src/constants.ts

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