@pdfme/ui 4.0.0-alpha.0 → 4.0.0

package/dist/types/Designer.d.ts

@@ -3,11 +3,13 @@ import { BaseUIClass } from './class';
 declare class Designer extends BaseUIClass {
     private onSaveTemplateCallback?;
     private onChangeTemplateCallback?;
+    private pageCursor;
     constructor(props: DesignerProps);
     saveTemplate(): void;
     updateTemplate(template: Template): void;
     onSaveTemplate(cb: (template: Template) => void): void;
     onChangeTemplate(cb: (template: Template) => void): void;
+    getPageCursor(): number;
     protected render(): void;
 }
 export default Designer;

package/dist/types/class.d.ts

@@ -10,7 +10,7 @@ export declare abstract class BaseUIClass {
     private readonly setSize;
     resizeObserver: ResizeObserver;
     constructor(props: UIProps);
-    protected getLang(): "en" | "th" | "pl" | "ja" | "ar" | "it" | "de";
+    protected getLang(): "en" | "th" | "pl" | "ja" | "ar" | "it" | "de" | "es" | "fr";
     protected getFont(): Record<string, {
         data: (string | ArrayBuffer | Uint8Array) & (string | ArrayBuffer | Uint8Array | undefined);
         fallback?: boolean | undefined;
@@ -21,6 +21,7 @@ export declare abstract class BaseUIClass {
     getTemplate(): import("zod").objectOutputType<{
         schemas: import("zod").ZodArray<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodObject<{
             type: import("zod").ZodString;
+            icon: import("zod").ZodOptional<import("zod").ZodString>;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
@@ -39,6 +40,7 @@ export declare abstract class BaseUIClass {
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, "passthrough", import("zod").ZodTypeAny, import("zod").objectOutputType<{
             type: import("zod").ZodString;
+            icon: import("zod").ZodOptional<import("zod").ZodString>;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;
@@ -57,6 +59,7 @@ export declare abstract class BaseUIClass {
             readOnly: import("zod").ZodOptional<import("zod").ZodBoolean>;
         }, import("zod").ZodTypeAny, "passthrough">, import("zod").objectInputType<{
             type: import("zod").ZodString;
+            icon: import("zod").ZodOptional<import("zod").ZodString>;
             content: import("zod").ZodOptional<import("zod").ZodString>;
             position: import("zod").ZodObject<{
                 x: import("zod").ZodNumber;

package/dist/types/components/Designer/LeftSidebar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BasePdf } from '@pdfme/common';
+declare const LeftSidebar: ({ height, scale, basePdf }: {
+    height: number;
+    scale: number;
+    basePdf: BasePdf;
+}) => React.JSX.Element;
+export default LeftSidebar;

package/dist/types/components/Designer/index.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
 import { Template, DesignerProps, Size } from '@pdfme/common';
-declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplate, }: Omit<DesignerProps, "domContainer"> & {
+declare 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;
 }) => React.JSX.Element;
 export default TemplateEditor;

package/dist/types/components/Renderer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { UIRenderProps, SchemaForUI, BasePdf, Schema } from '@pdfme/common';
-type RendererProps = Omit<UIRenderProps<Schema>, 'schema' | 'rootElement' | 'options' | 'theme' | 'i18n' | '_cache'> & {
+type RendererProps = Omit<UIRenderProps<Schema>, 'schema' | 'rootElement' | 'options' | 'theme' | 'i18n' | 'pdfJs' | '_cache'> & {
     basePdf: BasePdf;
     schema: SchemaForUI;
     value: string;

package/dist/types/constants.d.ts

@@ -3,5 +3,5 @@ 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 SIDEBAR_WIDTH = 400;
+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" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "addNewField" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "hexColorPrompt" | "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.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
+export declare const I18nContext: import("react").Context<(key: "type" | "width" | "height" | "rotate" | "opacity" | "cancel" | "field" | "fieldName" | "align" | "edit" | "plsInputName" | "fieldMustUniq" | "notUniq" | "noKeyName" | "fieldsList" | "editField" | "errorOccurred" | "errorBulkUpdateFieldName" | "commitBulkUpdateFieldName" | "bulkUpdateFieldName" | "addPageAfter" | "removePage" | "removePageConfirm" | "hexColorPrompt" | "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.barcodes.barColor" | "schemas.barcodes.includetext" | "schemas.table.alternateBackgroundColor" | "schemas.table.tableStyle" | "schemas.table.headStyle" | "schemas.table.bodyStyle" | "schemas.table.columnStyle", dict?: {
     cancel: string;
     field: string;
     fieldName: string;
@@ -15,7 +15,6 @@ export declare const I18nContext: import("react").Context<(key: "type" | "width"
     notUniq: string;
     noKeyName: string;
     fieldsList: string;
-    addNewField: string;
     editField: string;
     type: string;
     errorOccurred: string;

package/dist/types/helper.d.ts

@@ -36,6 +36,7 @@ export declare const template2SchemasList: (_template: Template) => Promise<{
     key: string;
     opacity?: number | undefined;
     rotate?: number | undefined;
+    icon?: string | undefined;
     content?: string | undefined;
     readOnly?: boolean | undefined;
 }[][]>;

package/dist/types/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "4.0.0-alpha.0",
+  "version": "4.0.0",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/Designer.tsx

@@ -16,6 +16,7 @@ import { cloneDeep } from './helper.js';
 class Designer extends BaseUIClass {
   private onSaveTemplateCallback?: (template: Template) => void;
   private onChangeTemplateCallback?: (template: Template) => void;
+  private pageCursor: number = 0;
 
   constructor(props: DesignerProps) {
     super(props);
@@ -46,6 +47,10 @@ class Designer extends BaseUIClass {
   public onChangeTemplate(cb: (template: Template) => void) {
     this.onChangeTemplateCallback = cb;
   }
+  
+  public getPageCursor() {
+    return this.pageCursor
+  }
 
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
@@ -71,6 +76,9 @@ class Designer extends BaseUIClass {
               this.onChangeTemplateCallback(template);
             }
           }}
+          onPageCursorChange={(newPageCursor: number) => {
+            this.pageCursor = newPageCursor
+          }}
           size={this.size}
         />
       </AppContextProvider>,

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

@@ -14,7 +14,7 @@ import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
 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';
@@ -25,8 +25,10 @@ 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', ''));
 const fmt = (prop: string) => round(fmt4Num(prop) / ZOOM, 2);
@@ -111,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);
@@ -337,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}

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

@@ -206,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>