@pdfme/ui 2.2.0 → 3.0.0-beta.2

package/src/components/Designer/Sidebar/ListView/index.tsx

@@ -1,9 +1,9 @@
 import React, { useContext, useState } from 'react';
+import type { SidebarProps } from '../../../../types';
 import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../../constants';
 import { I18nContext } from '../../../../contexts';
 import Divider from '../../../Divider';
 import SelectableSortableContainer from './SelectableSortableContainer';
-import { SidebarProps } from '../index';
 
 const ListView = (
   props: Pick<
@@ -38,7 +38,6 @@ const ListView = (
         </span>
       </div>
       <Divider />
-
       {isBulkUpdateFieldNamesMode ? (
         <div>
           <textarea
@@ -68,7 +67,6 @@ const ListView = (
           onEdit={onEdit}
         />
       )}
-
       <div
         style={{
           display: 'flex',
@@ -112,7 +110,6 @@ const ListView = (
           </u>
         )}
       </div>
-      <Divider />
     </div>
   );
 };

package/src/components/Designer/Sidebar/index.tsx

@@ -1,55 +1,17 @@
-import React, { useState, useContext } from 'react';
-import { SchemaForUI, Size } from '@pdfme/common';
-import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
-import { I18nContext, FontContext } from '../../../contexts';
+import React, { useContext } from 'react';
+import type { SidebarProps } from '../../../types';
+import { SIDEBAR_WIDTH } from '../../../constants';
+import { I18nContext } from '../../../contexts';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import ListView from './ListView/index';
 import DetailView from './DetailView/index';
-import { getFallbackFontName } from '@pdfme/common';
-
-export type SidebarProps = {
-  height: number;
-  hoveringSchemaId: string | null;
-  onChangeHoveringSchemaId: (id: string | null) => void;
-  size: Size;
-  pageSize: Size;
-  activeElements: HTMLElement[];
-  schemas: SchemaForUI[];
-  onSortEnd: (sortedSchemas: SchemaForUI[]) => void;
-  onEdit: (id: string) => void;
-  onEditEnd: () => void;
-  changeSchemas: (
-    objs: {
-      key: string; value: undefined | string | number | {
-        min: number;
-        max: number;
-      }; schemaId: string
-    }[]
-  ) => void;
-  addSchema: () => void;
-};
 
 const Sidebar = (props: SidebarProps) => {
-  const { height, size, activeElements, schemas, addSchema } = props;
+  const { sidebarOpen, setSidebarOpen, activeElements, schemas, addSchema } = props;
 
   const i18n = useContext(I18nContext);
-  const fonts = useContext(FontContext);
-  const fallbackFont = getFallbackFontName(fonts);
-  const [open, setOpen] = useState(true);
-
-  const getActiveSchemas = () => {
-    const ids = activeElements.map((ae) => ae.id);
-    const activeSchema = schemas.find((s) => ids.includes(s.id));
-
-    if (activeSchema?.type === 'text') {
-      if (!activeSchema.fontName) {
-        activeSchema.fontName = fallbackFont;
-      }
-    }
-
-    return schemas.filter((s) => ids.includes(s.id));
-  };
-
+  const getActiveSchemas = () =>
+    schemas.filter((s) => activeElements.map((ae) => ae.id).includes(s.id));
   const getLastActiveSchema = () => {
     const activeSchemas = getActiveSchemas();
     return activeSchemas[activeSchemas.length - 1];
@@ -61,16 +23,18 @@ const Sidebar = (props: SidebarProps) => {
         position: 'absolute',
         right: 0,
         zIndex: 1,
-        height: height ? height : '100%',
-        width: open ? SIDEBAR_WIDTH : 0,
+        height: '100%',
+        width: sidebarOpen ? SIDEBAR_WIDTH : 0,
+        fontSize: '1rem',
       }}
     >
-      <div style={{ position: 'sticky', top: 0, zIndex: 1, fontSize: '1rem' }}>
+      <div>
         <button
+          type="button"
           style={{
             position: 'absolute',
-            top: '1.75rem',
-            right: '0.5rem',
+            top: '1.15rem',
+            right: '1rem',
             zIndex: 100,
             border: 'none',
             borderRadius: 2,
@@ -80,9 +44,9 @@ const Sidebar = (props: SidebarProps) => {
             width: 30,
             height: 30,
           }}
-          onClick={() => setOpen(!open)}
+          onClick={() => setSidebarOpen(!sidebarOpen)}
         >
-          {open ? (
+          {sidebarOpen ? (
             <ArrowRightIcon width={15} height={15} />
           ) : (
             <ArrowLeftIcon width={15} height={15} />
@@ -91,20 +55,20 @@ const Sidebar = (props: SidebarProps) => {
         <div
           style={{
             width: SIDEBAR_WIDTH,
-            height: size.height - RULER_HEIGHT - RULER_HEIGHT / 2,
-            display: open ? 'block' : 'none',
-            top: RULER_HEIGHT / 2,
+            height: '100%',
+            display: sidebarOpen ? 'block' : 'none',
+            top: 0,
             right: 0,
             position: 'absolute',
-            background: '#ffffffed',
+            background: '#fffffffa',
             color: '#333',
             border: '1px solid #eee',
-            padding: '0.5rem',
+            padding: '0.7rem 1rem',
             overflowY: 'auto',
             fontFamily: "'Open Sans', sans-serif",
             fontWeight: 400,
             textAlign: 'left',
-            boxSizing: 'content-box',
+            boxSizing: 'border-box',
           }}
         >
           {getActiveSchemas().length === 0 ? (
@@ -114,8 +78,6 @@ const Sidebar = (props: SidebarProps) => {
           )}
           <div
             style={{
-              display: 'flex',
-              justifyContent: 'space-around',
               position: 'absolute',
               width: '100%',
               left: 0,
@@ -123,13 +85,17 @@ const Sidebar = (props: SidebarProps) => {
               paddingTop: '1rem',
             }}
           >
+            <div style={{ marginBottom: '1rem', borderBottom: '1px solid #e5e5e5' }} />
             <button
+              type="button"
               style={{
                 padding: '0.5rem',
                 background: '#18a0fb',
                 border: 'none',
                 borderRadius: 2,
                 cursor: 'pointer',
+                margin: '0 auto',
+                display: 'block',
               }}
               onClick={addSchema}
             >

package/src/components/Designer/index.tsx

@@ -1,9 +1,9 @@
 import React, { useRef, useState, useEffect, useContext, useCallback } from 'react';
-import { DesignerReactProps, Template, SchemaForUI, SchemaType } from '@pdfme/common';
+import { ZOOM, Template, SchemaForUI, ChangeSchemas, DesignerProps, Size } from '@pdfme/common';
 import Sidebar from './Sidebar/index';
-import Main from './Main/index';
-import { ZOOM, RULER_HEIGHT } from '../../constants';
-import { I18nContext } from '../../contexts';
+import Canvas from './Canvas/index';
+import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../constants';
+import { I18nContext, PropPanelRegistry } from '../../contexts';
 import {
   uuid,
   set,
@@ -12,16 +12,13 @@ import {
   destroyShortCuts,
   templateSchemas2SchemasList,
   fmtTemplate,
-  getInitialSchema,
-  getSampleByType,
-  getKeepRatioHeightByWidth,
   getUniqSchemaKey,
   moveCommandToChangeSchemasArg,
   getPagesScrollTopByIndex,
 } from '../../helper';
 import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
 import Root from '../Root';
-import Error from '../Error';
+import ErrorScreen from '../ErrorScreen';
 import CtlBar from '../CtlBar/index';
 
 const TemplateEditor = ({
@@ -29,7 +26,10 @@ const TemplateEditor = ({
   size,
   onSaveTemplate,
   onChangeTemplate,
-}: DesignerReactProps & { onChangeTemplate: (t: Template) => void }) => {
+}: Omit<DesignerProps, 'domContainer'> & {
+  onSaveTemplate: (t: Template) => void;
+  size: Size;
+} & { onChangeTemplate: (t: Template) => void }) => {
   const copiedSchemas = useRef<SchemaForUI[] | null>(null);
   const past = useRef<SchemaForUI[][]>([]);
   const future = useRef<SchemaForUI[][]>([]);
@@ -37,12 +37,14 @@ const TemplateEditor = ({
   const paperRefs = useRef<HTMLDivElement[]>([]);
 
   const i18n = useContext(I18nContext);
+  const propPanelRegistry = useContext(PropPanelRegistry);
 
   const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
   const [schemasList, setSchemasList] = useState<SchemaForUI[][]>([[]] as SchemaForUI[][]);
   const [pageCursor, setPageCursor] = useState(0);
   const [zoomLevel, setZoomLevel] = useState(1);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
 
   const { backgrounds, pageSizes, scale, error } = useUIPreProcessor({ template, size, zoomLevel });
 
@@ -89,20 +91,23 @@ const TemplateEditor = ({
     [schemasList, pageCursor, commitSchemas]
   );
 
-  const changeSchemas = useCallback(
-    (objs: { key: string; value: undefined | string | number | { min: number, max: number }; schemaId: string }[]) => {
+  const changeSchemas: ChangeSchemas = useCallback(
+    (objs) => {
       const newSchemas = objs.reduce((acc, { key, value, schemaId }) => {
-        const tgt = acc.find((s) => s.id === schemaId)!;
+        const tgt = acc.find((s) => s.id === schemaId)! as SchemaForUI;
         // Assign to reference
         set(tgt, key, value);
+
         if (key === 'type') {
-          const type = String(value) as SchemaType;
-          // set default value, text or barcode
-          set(tgt, 'data', getSampleByType(type));
-          // For barcodes, adjust the height to get the correct ratio.
-          if (type !== 'text' && type !== 'image') {
-            set(tgt, 'height', getKeepRatioHeightByWidth(type, tgt.width));
-          }
+          const keysToKeep = ['id', 'key', 'type', 'position'];
+          Object.keys(tgt).forEach((key) => {
+            if (!keysToKeep.includes(key)) {
+              delete tgt[key as keyof typeof tgt];
+            }
+          });
+          const propPanel = propPanelRegistry[value as string];
+          set(tgt, 'data', propPanel?.defaultValue || '');
+          Object.assign(tgt, propPanel?.defaultSchema || {});
         }
 
         return acc;
@@ -204,12 +209,24 @@ const TemplateEditor = ({
   }, [initEvents, destroyEvents]);
 
   const addSchema = () => {
-    const s = getInitialSchema();
+    const propPanel = Object.values(propPanelRegistry)[0];
+
+    if (!propPanel) {
+      throw new Error(`[@pdfme/ui] addSchema failed: propPanel is empty.
+Check this document: https://pdfme.com/docs/custom-schemas`);
+    }
+
+    const s = {
+      id: uuid(),
+      key: `${i18n('field')}${schemasList[pageCursor].length + 1}`,
+      data: propPanel.defaultValue || '',
+      ...propPanel.defaultSchema,
+    } as SchemaForUI;
+
     const paper = paperRefs.current[pageCursor];
     const rectTop = paper ? paper.getBoundingClientRect().top : 0;
     s.position.y = rectTop > 0 ? 0 : pageSizes[pageCursor].height / 2;
-    s.data = 'text';
-    s.key = `${i18n('field')}${schemasList[pageCursor].length + 1}`;
+
     commitSchemas(schemasList[pageCursor].concat(s));
     setTimeout(() => onEdit([document.getElementById(s.id)!]));
   };
@@ -222,14 +239,19 @@ const TemplateEditor = ({
     setHoveringSchemaId(id);
   };
 
+  const sizeExcSidebar = {
+    width: sidebarOpen ? size.width - SIDEBAR_WIDTH : size.width,
+    height: size.height,
+  };
+
   if (error) {
-    return <Error size={size} error={error} />;
+    return <ErrorScreen size={size} error={error} />;
   }
 
   return (
     <Root size={size} scale={scale}>
       <CtlBar
-        size={size}
+        size={sizeExcSidebar}
         pageCursor={pageCursor}
         pageNum={schemasList.length}
         setPageCursor={(p) => {
@@ -239,12 +261,7 @@ const TemplateEditor = ({
           onEditEnd();
         }}
         zoomLevel={zoomLevel}
-        setZoomLevel={(zoom) => {
-          if (mainRef.current) {
-            mainRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, pageCursor, scale);
-          }
-          setZoomLevel(zoom);
-        }}
+        setZoomLevel={setZoomLevel}
       />
       <Sidebar
         hoveringSchemaId={hoveringSchemaId}
@@ -262,8 +279,11 @@ const TemplateEditor = ({
         }}
         onEditEnd={onEditEnd}
         addSchema={addSchema}
+        deselectSchema={onEditEnd}
+        sidebarOpen={sidebarOpen}
+        setSidebarOpen={setSidebarOpen}
       />
-      <Main
+      <Canvas
         ref={mainRef}
         paperRefs={paperRefs}
         hoveringSchemaId={hoveringSchemaId}
@@ -271,13 +291,14 @@ const TemplateEditor = ({
         height={size.height - RULER_HEIGHT * ZOOM}
         pageCursor={pageCursor}
         scale={scale}
-        size={size}
+        size={sizeExcSidebar}
         pageSizes={pageSizes}
         backgrounds={backgrounds}
         activeElements={activeElements}
         schemasList={schemasList}
         changeSchemas={changeSchemas}
         removeSchemas={removeSchemas}
+        sidebarOpen={sidebarOpen}
         onEdit={onEdit}
       />
     </Root>

package/src/components/{Error.tsx → ErrorScreen.tsx}

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { Size } from '@pdfme/common';
 import { I18nContext } from '../contexts';
 
-const Error = ({ size, error }: { size: Size; error: Error }) => {
+const ErrorScreen = ({ size, error }: { size: Size; error: Error }) => {
   const i18n = useContext(I18nContext);
 
   return (
@@ -28,4 +28,4 @@ const Error = ({ size, error }: { size: Size; error: Error }) => {
   );
 };
 
-export default Error;
+export default ErrorScreen;

package/src/components/Paper.tsx

@@ -1,7 +1,7 @@
 import React, { MutableRefObject, ReactNode, useContext } from 'react';
-import { SchemaForUI, Size, getFallbackFontName } from '@pdfme/common';
+import { ZOOM, SchemaForUI, Size, getFallbackFontName } from '@pdfme/common';
 import { FontContext } from '../contexts';
-import { ZOOM, RULER_HEIGHT } from '../constants';
+import { RULER_HEIGHT, PAGE_GAP } from '../constants';
 
 const Paper = (props: {
   paperRefs: MutableRefObject<HTMLDivElement[]>;
@@ -12,10 +12,21 @@ const Paper = (props: {
   backgrounds: string[];
   renderPaper?: (arg: { index: number; paperSize: Size }) => ReactNode;
   renderSchema: (arg: { index: number; schema: SchemaForUI }) => ReactNode;
+  hasRulers?: boolean;
 }) => {
-  const { paperRefs, scale, size, schemasList, pageSizes, backgrounds, renderPaper, renderSchema } =
-    props;
+  const {
+    paperRefs,
+    scale,
+    size,
+    schemasList,
+    pageSizes,
+    backgrounds,
+    renderPaper,
+    renderSchema,
+    hasRulers,
+  } = props;
   const font = useContext(FontContext);
+  const rulerHeight = hasRulers ? RULER_HEIGHT : 0;
 
   if (pageSizes.length !== backgrounds.length || pageSizes.length !== schemasList.length) {
     return null;
@@ -25,14 +36,30 @@ const Paper = (props: {
     <div
       style={{
         transform: `scale(${scale})`,
-        transformOrigin: 'center top',
-        ...size,
+        transformOrigin: 'top left',
+        // NOTE: These values do not impact the UI unless they exceed the Paper sizes.
+        // We set them to the scale value to ensure the container is redrawn when you zoom in/out.
+        height: scale,
+        width: scale,
       }}
     >
       {backgrounds.map((background, paperIndex) => {
         const pageSize = pageSizes[paperIndex];
         const paperSize = { width: pageSize.width * ZOOM, height: pageSize.height * ZOOM };
 
+        // We want to center the content within the available viewport, but transform: scale()
+        // must be done from the top-left or CSS crops off left-hand content as you zoom in.
+        // However, we want to display the content centrally, so we apply a left indent for
+        // when the content does not exceed its container
+        const leftCenteringIndent =
+          paperSize.width * scale + rulerHeight < size.width
+            ? `${(size.width / scale - paperSize.width) / 2}px`
+            : `${rulerHeight}px`;
+
+        // Rulers are drawn above/before the top of each page, so we place the start of the page below them
+        const pageTop =
+          paperIndex > 0 ? `${(rulerHeight + PAGE_GAP) * (paperIndex + 1)}px` : `${rulerHeight}px`;
+
         return (
           <div
             id={`@pdfme/ui-paper${paperIndex}`}
@@ -54,9 +81,8 @@ const Paper = (props: {
             }}
             style={{
               fontFamily: `'${getFallbackFontName(font)}'`,
-              top: `${RULER_HEIGHT}px`,
-              left: paperSize.width > size.width ? `${(size.width - paperSize.width) / 2}px` : 0,
-              margin: '0 auto',
+              top: pageTop,
+              left: leftCenteringIndent,
               position: 'relative',
               backgroundImage: `url(${background})`,
               backgroundSize: `${paperSize.width}px ${paperSize.height}px`,

package/src/components/Preview.tsx

@@ -1,17 +1,24 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
-import { PreviewReactProps, SchemaForUI } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../constants';
+import type { SchemaForUI, PreviewProps, Size } from '@pdfme/common';
 import UnitPager from './UnitPager';
 import Root from './Root';
-import Error from './Error';
+import ErrorScreen from './ErrorScreen';
 import CtlBar from './CtlBar/index';
 import Paper from './Paper';
-import SchemaUI from './Schemas/SchemaUI';
+import Renderer from './Renderer';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
 import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
 
-const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) => {
-  const rootRef = useRef<HTMLDivElement>(null);
+const Preview = ({
+  template,
+  inputs,
+  size,
+  onChangeInput,
+}: Omit<PreviewProps, 'domContainer'> & {
+  onChangeInput?: (args: { index: number; value: string; key: string }) => void;
+  size: Size;
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
 
   const [unitCursor, setUnitCursor] = useState(0);
@@ -37,7 +44,7 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
   }, [init]);
 
   useScrollPageCursor({
-    ref: rootRef,
+    ref: containerRef,
     pageSizes,
     scale,
     pageCursor,
@@ -47,68 +54,59 @@ const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) =
   const handleChangeInput = ({ key, value }: { key: string; value: string }) =>
     onChangeInput && onChangeInput({ index: unitCursor, key, value });
 
-  const editable = Boolean(onChangeInput);
+  const isForm = Boolean(onChangeInput);
+
   const input = inputs[unitCursor];
 
   if (error) {
-    return <Error size={size} error={error} />;
+    return <ErrorScreen size={size} error={error} />;
   }
 
-  const pageSizesHeightSum = pageSizes.reduce(
-    (acc, cur) => acc + (cur.height * ZOOM + RULER_HEIGHT * scale) * scale,
-    0
-  );
-
   return (
-    <Root ref={rootRef} size={size} scale={scale}>
+    <Root size={size} scale={scale}>
       <CtlBar
-        size={{ height: Math.max(size.height, pageSizesHeightSum), width: size.width }}
+        size={size}
         pageCursor={pageCursor}
         pageNum={schemasList.length}
         setPageCursor={(p) => {
-          if (!rootRef.current) return;
-          rootRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
+          if (!containerRef.current) return;
+          containerRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
           setPageCursor(p);
         }}
         zoomLevel={zoomLevel}
-        setZoomLevel={(zoom) => {
-          if (rootRef.current) {
-            rootRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, pageCursor, scale);
-          }
-          setZoomLevel(zoom);
-        }}
+        setZoomLevel={setZoomLevel}
       />
       <UnitPager
-        size={{ height: Math.max(size.height, pageSizesHeightSum), width: size.width }}
+        size={size}
         unitCursor={unitCursor}
         unitNum={inputs.length}
         setUnitCursor={setUnitCursor}
       />
-
-      <Paper
-        paperRefs={paperRefs}
-        scale={scale}
-        size={size}
-        schemasList={schemasList}
-        pageSizes={pageSizes}
-        backgrounds={backgrounds}
-        renderSchema={({ schema, index }) => {
-          const { key } = schema;
-          const data = (input && input[key]) || '';
-          return (
-            <SchemaUI
-              key={schema.id}
-              schema={Object.assign(schema, { data })}
-              editable={editable}
-              placeholder={template.sampledata?.[0]?.[key] ?? ''}
-              tabIndex={index + 100}
-              onStopEditing={() => { }}
-              onChange={(value) => handleChangeInput({ key, value })}
-              outline={editable ? '1px dashed #4af' : 'transparent'}
-            />
-          );
-        }}
-      />
+      <div ref={containerRef} style={{ ...size, position: 'relative', overflow: 'auto' }}>
+        <Paper
+          paperRefs={paperRefs}
+          scale={scale}
+          size={size}
+          schemasList={schemasList}
+          pageSizes={pageSizes}
+          backgrounds={backgrounds}
+          renderSchema={({ schema, index }) => {
+            const { key } = schema;
+            const data = (input && input[key]) || '';
+            return (
+              <Renderer
+                key={schema.id}
+                schema={Object.assign(schema, { data })}
+                mode={isForm ? 'form' : 'viewer'}
+                placeholder={template.sampledata?.[0]?.[key] ?? ''}
+                tabIndex={index + 100}
+                onChange={(value) => handleChangeInput({ key, value })}
+                outline={isForm ? '1px dashed #4af' : 'transparent'}
+              />
+            );
+          }}
+        />
+      </div>
     </Root>
   );
 };