@pdfme/ui 3.4.3-dev.2 → 3.4.3-dev.4

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

@@ -11,10 +11,10 @@ import React, {
 } from 'react';
 import { theme, Button } from 'antd';
 import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
-import { ZOOM, SchemaForUI, Size, ChangeSchemas } from '@pdfme/common';
+import { ZOOM, SchemaForUI, Size, ChangeSchemas, BasePdf, isBlankPdf } from '@pdfme/common';
 import { PluginsRegistry } from '../../../contexts';
 import { CloseOutlined } from '@ant-design/icons';
-import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants';
 import { usePrevious } from '../../../hooks';
 import { uuid, round, flatten } from '../../../helper';
 import Paper from '../../Paper';
@@ -23,6 +23,11 @@ import Selecto from './Selecto';
 import Moveable from './Moveable';
 import Guides from './Guides';
 import Mask from './Mask';
+import Padding from './Padding';
+
+
+const mm2px = (mm: number) => mm * 3.7795275591;
+
 
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
@@ -70,6 +75,7 @@ interface GuidesInterface {
 }
 
 interface Props {
+  basePdf: BasePdf;
   height: number;
   hoveringSchemaId: string | null;
   onChangeHoveringSchemaId: (id: string | null) => void;
@@ -89,6 +95,7 @@ interface Props {
 
 const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   const {
+    basePdf,
     pageCursor,
     scale,
     backgrounds,
@@ -106,7 +113,6 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   } = props;
   const { token } = theme.useToken();
   const pluginsRegistry = useContext(PluginsRegistry);
-
   const verticalGuides = useRef<GuidesInterface[]>([]);
   const horizontalGuides = useRef<GuidesInterface[]>([]);
   const moveable = useRef<any>(null);
@@ -142,7 +148,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
 
   useEffect(() => {
     moveable.current?.updateRect();
-    if (prevSchemas === null) {
+    if (!prevSchemas) {
       return;
     }
 
@@ -154,9 +160,37 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     }
   }, [pageCursor, schemasList, prevSchemas]);
 
-  const onDrag = ({ target, left, top }: OnDrag) => {
-    target.style.left = `${left < 0 ? 0 : left}px`;
-    target.style.top = `${top < 0 ? 0 : top}px`;
+  const onDrag = ({ target, top, left }: OnDrag) => {
+    const { width: _width, height: _height } = target.style;
+    const targetWidth = fmt(_width);
+    const targetHeight = fmt(_height);
+    const actualTop = top / ZOOM;
+    const actualLeft = left / ZOOM;
+    const { width: pageWidth, height: pageHeight } = pageSizes[pageCursor];
+    let topPadding = 0;
+    let rightPadding = 0;
+    let bottomPadding = 0;
+    let leftPadding = 0;
+
+    if (isBlankPdf(basePdf)) {
+      const [t, r, b, l] = basePdf.padding;
+      topPadding = t * ZOOM;
+      rightPadding = r;
+      bottomPadding = b;
+      leftPadding = l * ZOOM;
+    }
+
+    if (actualTop + targetHeight > pageHeight - bottomPadding) {
+      target.style.top = `${(pageHeight - targetHeight - bottomPadding) * ZOOM}px`;
+    } else {
+      target.style.top = `${top < topPadding ? topPadding : top}px`;
+    }
+
+    if (actualLeft + targetWidth > pageWidth - rightPadding) {
+      target.style.left = `${(pageWidth - targetWidth - rightPadding) * ZOOM}px`;
+    } else {
+      target.style.left = `${left < leftPadding ? leftPadding : left}px`;
+    }
   };
 
   const onDragEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
@@ -195,24 +229,24 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     changeSchemas(flatten(arg));
   };
 
-  const onResizeEnd = async ({ target }: { target: HTMLElement | SVGElement }) => {
+  const onResizeEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
     const { id, style } = target;
     const { width, height, top, left } = style;
     changeSchemas([
+      { key: 'position.x', value: fmt(left), schemaId: id },
+      { key: 'position.y', value: fmt(top), schemaId: id },
       { key: 'width', value: fmt(width), schemaId: id },
       { key: 'height', value: fmt(height), schemaId: id },
-      { key: 'position.y', value: fmt(top), schemaId: id },
-      { key: 'position.x', value: fmt(left), schemaId: id },
     ]);
 
     const targetSchema = schemasList[pageCursor].find((schema) => schema.id === id);
 
     if (!targetSchema) return;
 
+    targetSchema.position.x = fmt(left);
+    targetSchema.position.y = fmt(top);
     targetSchema.width = fmt(width);
     targetSchema.height = fmt(height);
-    targetSchema.position.y = fmt(top);
-    targetSchema.position.x = fmt(left);
   };
 
   const onResizeEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
@@ -227,13 +261,43 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
 
   const onResize = ({ target, width, height, direction }: OnResize) => {
     if (!target) return;
-    const s = target.style;
-    const newLeft = fmt4Num(s.left) + (fmt4Num(s.width) - width);
-    const newTop = fmt4Num(s.top) + (fmt4Num(s.height) - height);
+    let topPadding = 0;
+    let rightPadding = 0;
+    let bottomPadding = 0;
+    let leftPadding = 0;
+
+    if (isBlankPdf(basePdf)) {
+      const [t, r, b, l] = basePdf.padding;
+      topPadding = t * ZOOM;
+      rightPadding = mm2px(r);
+      bottomPadding = mm2px(b);
+      leftPadding = l * ZOOM;
+    }
+
+    const pageWidth = mm2px(pageSizes[pageCursor].width);
+    const pageHeight = mm2px(pageSizes[pageCursor].height);
+
     const obj: { top?: string; left?: string; width: string; height: string } = {
       width: `${width}px`,
       height: `${height}px`,
     };
+
+    const s = target.style;
+    let newLeft = fmt4Num(s.left) + (fmt4Num(s.width) - width);
+    let newTop = fmt4Num(s.top) + (fmt4Num(s.height) - height);
+    if (newLeft < leftPadding) {
+      newLeft = leftPadding;
+    }
+    if (newTop < topPadding) {
+      newTop = topPadding;
+    }
+    if (newLeft + width > pageWidth - rightPadding) {
+      obj.width = `${pageWidth - rightPadding - newLeft}px`;
+    }
+    if (newTop + height > pageHeight - bottomPadding) {
+      obj.height = `${pageHeight - bottomPadding - newTop}px`;
+    }
+
     const d = direction.toString();
     if (isTopLeftResize(d)) {
       obj.top = `${newTop}px`;
@@ -255,7 +319,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   };
 
   const rotatable = useMemo(() => {
-    const selectedSchemas = schemasList[pageCursor].filter((s) =>
+    const selectedSchemas = (schemasList[pageCursor] || []).filter((s) =>
       activeElements.map((ae) => ae.id).includes(s.id)
     );
     const schemaTypes = selectedSchemas.map((s) => s.type);
@@ -274,7 +338,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
       style={{
         position: 'relative',
         overflow: 'auto',
-        marginRight: sidebarOpen ? SIDEBAR_WIDTH : 0,
+        marginRight: sidebarOpen ? RIGHT_SIDEBAR_WIDTH : 0,
         ...size,
       }}
       ref={ref}
@@ -329,6 +393,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
             {!editing && activeElements.length > 0 && pageCursor === index && (
               <DeleteButton activeElements={activeElements} />
             )}
+            <Padding basePdf={basePdf} />
             <Guides
               paperSize={paperSize}
               horizontalRef={(e) => {
@@ -372,19 +437,21 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           <Renderer
             key={schema.id}
             schema={schema}
+            basePdf={basePdf}
+            value={schema.content || ''}
             onChangeHoveringSchemaId={onChangeHoveringSchemaId}
             mode={
               editing && activeElements.map((ae) => ae.id).includes(schema.id)
                 ? 'designer'
                 : 'viewer'
             }
-            onChange={(value) => {
-              changeSchemas([{ key: 'data', value, schemaId: schema.id }]);
+            onChange={(arg) => {
+              const args = Array.isArray(arg) ? arg : [arg];
+              changeSchemas(args.map(({ key, value }) => ({ key, value, schemaId: schema.id })));
             }}
             stopEditing={() => setEditing(false)}
-            outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${
-              schema.readOnly ? 'transparent' : token.colorPrimary
-            }`}
+            outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${schema.readOnly && hoveringSchemaId !== schema.id ? 'transparent' : token.colorPrimary
+              }`}
             scale={scale}
           />
         )}

package/src/components/Designer/LeftSidebar.tsx

@@ -0,0 +1,81 @@
+import React, { useContext } from 'react';
+import {
+  Schema,
+  Plugin,
+  BasePdf,
+} from '@pdfme/common';
+import { theme, Button } from 'antd';
+import { useDraggable } from '@dnd-kit/core';
+import { CSS } from "@dnd-kit/utilities";
+import Renderer from '../Renderer';
+import { PluginsRegistry } from '../../contexts';
+
+const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
+  const { scale, basePdf, plugin } = props;
+  const { token } = theme.useToken();
+  const defaultSchema = plugin.propPanel.defaultSchema as Schema;
+  const draggable = useDraggable({ id: defaultSchema.type, data: defaultSchema });
+  const { listeners, setNodeRef, attributes, transform, isDragging } = draggable;
+  const style = { transform: CSS.Translate.toString(transform) }
+
+  return (
+    <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
+      {isDragging &&
+        <div style={{ transform: `scale(${scale})` }}>
+          <Renderer
+            key={defaultSchema.type}
+            schema={{ ...defaultSchema, id: defaultSchema.type, key: defaultSchema.type }}
+            basePdf={basePdf}
+            value={defaultSchema.content || ''}
+            onChangeHoveringSchemaId={() => { void 0 }}
+            mode={'viewer'}
+            outline={`1px solid ${token.colorPrimary}`}
+            scale={scale}
+          />
+        </div>
+      }
+      <div style={{ visibility: isDragging ? 'hidden' : 'visible' }}>
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number, basePdf: BasePdf }) => {
+  const { token } = theme.useToken();
+  const pluginsRegistry = useContext(PluginsRegistry);
+
+  return <div
+    style={{
+      left: 0,
+      position: 'absolute',
+      right: 0,
+      zIndex: 1,
+      height,
+      background: token.colorBgLayout,
+      textAlign: 'center',
+      width: 45,
+    }}
+  >
+    {Object.entries(pluginsRegistry).map(([label, plugin]) => {
+      if (!plugin?.propPanel.defaultSchema) return null;
+      return <Draggable
+        key={label}
+        scale={scale}
+        basePdf={basePdf}
+        plugin={plugin}>
+        <Button
+          title={label}
+          style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}>
+          {plugin.propPanel.defaultSchema.icon ?
+            <div dangerouslySetInnerHTML={{ __html: plugin.propPanel.defaultSchema.icon }} />
+            :
+            <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</div>
+          }
+        </Button>
+      </Draggable>
+    })}
+  </div>
+}
+
+export default LeftSidebar

package/src/components/Designer/{Sidebar → RightSidebar}/DetailView/index.tsx

@@ -75,7 +75,7 @@ const DetailView = (
   const handleWatch = (newSchema: any) => {
     const changes = [];
     for (let key in newSchema) {
-      if (['id', 'data'].includes(key)) continue;
+      if (['id', 'content'].includes(key)) continue;
       if (newSchema[key] !== (activeSchema as any)[key]) {
         let value = newSchema[key];
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
@@ -123,15 +123,15 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       key: { title: i18n('fieldName'), type: 'string', required: true, span: 14 },
       '-': { type: 'void', widget: 'Divider' },
       align: { title: i18n('align'), type: 'void', widget: 'AlignWidget' },
-      x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8 },
-      y: { title: 'Y', type: 'number', widget: 'inputNumber', required: true, span: 8 },
+      x: { title: 'X', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
+      y: { title: 'Y', type: 'number', widget: 'inputNumber', required: true, span: 8, min: 0 },
       rotate: {
         title: i18n('rotate'),
         type: 'number',
         widget: 'inputNumber',
         disabled: defaultSchema?.rotate === undefined,
         max: 360,
-        min: 0,
+        props: { min: 0 },
         span: 8,
       },
       width: {
@@ -140,7 +140,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         widget: 'inputNumber',
         required: true,
         span: 8,
-        min: 0,
+        props: { min: 0 },
       },
       height: {
         title: i18n('height'),
@@ -148,18 +148,14 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         widget: 'inputNumber',
         required: true,
         span: 8,
-        min: 0,
+        props: { min: 0 },
       },
       opacity: {
         title: i18n('opacity'),
         type: 'number',
         widget: 'inputNumber',
         disabled: defaultSchema?.opacity === undefined,
-        props: {
-          step: 0.1,
-        },
-        max: 1,
-        min: 0,
+        props: { step: 0.1, min: 0, max: 1 },
         span: 8,
       },
     },
@@ -210,8 +206,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         style={{
           height: getSidebarContentHeight(size.height),
           overflowY: 'auto',
-          overflowX: 'hidden',
-          borderBottom: `1px solid ${token.colorSplit}`,
+          overflowX: 'hidden'
         }}
       >
         <FormRender

package/src/components/Designer/{Sidebar → RightSidebar}/ListView/index.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import type { SidebarProps } from '../../../../types';
-import { SIDEBAR_WIDTH } from '../../../../constants';
+import { RIGHT_SIDEBAR_WIDTH } from '../../../../constants';
 import { I18nContext } from '../../../../contexts';
 import { getSidebarContentHeight } from '../../../../helper';
 import { theme, Input, Typography, Divider, Button } from 'antd';
@@ -76,7 +76,7 @@ const ListView = (
             style={{
               paddingLeft: 30,
               height: height - headHeight,
-              width: SIDEBAR_WIDTH - 35,
+              width: RIGHT_SIDEBAR_WIDTH - 35,
               lineHeight: '2.75rem',
             }}
           />
@@ -89,15 +89,7 @@ const ListView = (
             onEdit={onEdit}
           />
         )}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            height: headHeight,
-            borderBottom: `1px solid ${token.colorSplit}`,
-          }}
-        >
+        <div style={{ paddingTop: '0.5rem', display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
           {isBulkUpdateFieldNamesMode ? (
             <>
               <Button size="small" type="text" onClick={commitBulk}>

package/src/components/Designer/{Sidebar → RightSidebar}/index.tsx

@@ -1,17 +1,15 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { theme, Button } from 'antd';
 import type { SidebarProps } from '../../../types';
-import { SIDEBAR_WIDTH } from '../../../constants';
-import { I18nContext } from '../../../contexts';
+import { RIGHT_SIDEBAR_WIDTH } from '../../../constants';
 import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
 import ListView from './ListView/index';
 import DetailView from './DetailView/index';
 
 const Sidebar = (props: SidebarProps) => {
-  const { sidebarOpen, setSidebarOpen, activeElements, schemas, addSchema } = props;
+  const { sidebarOpen, setSidebarOpen, activeElements, schemas } = props;
 
   const { token } = theme.useToken();
-  const i18n = useContext(I18nContext);
   const getActiveSchemas = () =>
     schemas.filter((s) => activeElements.map((ae) => ae.id).includes(s.id));
   const getLastActiveSchema = () => {
@@ -26,7 +24,7 @@ const Sidebar = (props: SidebarProps) => {
         right: 0,
         zIndex: 1,
         height: '100%',
-        width: sidebarOpen ? SIDEBAR_WIDTH : 0,
+        width: sidebarOpen ? RIGHT_SIDEBAR_WIDTH : 0,
       }}
     >
       <div>
@@ -45,7 +43,7 @@ const Sidebar = (props: SidebarProps) => {
         />
         <div
           style={{
-            width: SIDEBAR_WIDTH,
+            width: RIGHT_SIDEBAR_WIDTH,
             height: '100%',
             display: sidebarOpen ? 'block' : 'none',
             top: 0,
@@ -65,19 +63,6 @@ const Sidebar = (props: SidebarProps) => {
               <DetailView {...props} activeSchema={getLastActiveSchema()} />
             )}
           </div>
-          <div
-            style={{
-              position: 'absolute',
-              bottom: '1.5rem',
-              marginTop: '1rem',
-              left: '50%',
-              transform: 'translateX(-50%)',
-            }}
-          >
-            <Button type="primary" style={{ fontWeight: 600 }} onClick={addSchema}>
-              {i18n('addNewField')}
-            </Button>
-          </div>
         </div>
       </div>
     </div>