@pdfme/ui 4.2.2 → 4.2.3-dev.4

package/dist/types/class.d.ts

@@ -21,7 +21,6 @@ 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;
@@ -40,7 +39,6 @@ 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;
@@ -59,7 +57,6 @@ 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/RightSidebar/DetailView/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { SchemaForUI } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
-declare const DetailView: (props: Pick<SidebarProps, 'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
+type DetailViewProps = Pick<SidebarProps, 'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'> & {
     activeSchema: SchemaForUI;
-}) => React.JSX.Element;
-export default DetailView;
+};
+declare const _default: React.MemoExoticComponent<(props: DetailViewProps) => React.JSX.Element>;
+export default _default;

package/dist/types/helper.d.ts

@@ -36,7 +36,6 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "4.2.2",
+  "version": "4.2.3-dev.4",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/components/Designer/LeftSidebar.tsx

@@ -8,7 +8,7 @@ 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';
+import { PluginsRegistry, OptionsContext } from '../../contexts';
 
 const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
   const { scale, basePdf, plugin } = props;
@@ -44,6 +44,7 @@ const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf
 const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number, basePdf: BasePdf }) => {
   const { token } = theme.useToken();
   const pluginsRegistry = useContext(PluginsRegistry);
+  const options = useContext(OptionsContext);
 
   const [isDragging, setIsDragging] = useState(false);
 
@@ -76,6 +77,8 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
   >
     {Object.entries(pluginsRegistry).map(([label, plugin]) => {
       if (!plugin?.propPanel.defaultSchema) return null;
+      const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
+
       return <Draggable
         key={label}
         scale={scale}
@@ -87,8 +90,8 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
             setIsDragging(true);
           }}
           style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}>
-          {plugin.propPanel.defaultSchema.icon ?
-            <div dangerouslySetInnerHTML={{ __html: plugin.propPanel.defaultSchema.icon }} />
+          {icon ?
+            <div dangerouslySetInnerHTML={{ __html: icon }} />
             :
             <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</div>
           }

package/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -1,5 +1,5 @@
 import FormRender, { useForm } from 'form-render';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import type { ChangeSchemaItem, Dict, SchemaForUI, PropPanelWidgetProps, PropPanelSchema } from '@pdfme/common';
 import type { SidebarProps } from '../../../../types';
 import { MenuOutlined } from '@ant-design/icons';
@@ -13,79 +13,57 @@ import { InternalNamePath, ValidateErrorEntity } from "rc-field-form/es/interfac
 
 const { Text } = Typography;
 
-const DetailView = (
-  props: Pick<
-    SidebarProps,
-    'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
-  > & {
-    activeSchema: SchemaForUI;
-  }
-) => {
+type DetailViewProps = Pick<SidebarProps,
+  'size' | 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements' | 'deselectSchema'
+> & {
+  activeSchema: SchemaForUI;
+};
+
+const DetailView = (props: DetailViewProps) => {
   const { token } = theme.useToken();
 
-  const { size, changeSchemas, deselectSchema, activeSchema, activeElements } = props;
+  const { size, changeSchemas, deselectSchema, activeSchema } = props;
   const form = useForm();
 
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
 
-  const [widgets, setWidgets] = useState<{
-    [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
-  }>({});
-
-  useEffect(() => {
-    const newWidgets: typeof widgets = {
-      AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
-      Divider: () => (
-        <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
-      ),
-      ButtonGroup: (p) => <ButtonGroupWidget {...p} {...props} options={options} />,
-    };
-    for (const plugin of Object.values(pluginsRegistry)) {
-      const widgets = plugin?.propPanel.widgets || {};
-      Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
-        newWidgets[widgetKey] = (p) => (
-          <WidgetRenderer
-            {...p}
-            {...props}
-            options={options}
-            theme={token}
-            i18n={i18n as (key: keyof Dict | string) => string}
-            widget={widgetValue}
-          />
-        );
-      });
-    }
-    setWidgets(newWidgets);
-  }, [activeSchema, activeElements, pluginsRegistry, JSON.stringify(options)]);
-
   useEffect(() => {
     const values: any = { ...activeSchema };
-
     // [position] Change the nested position object into a flat, as a three-column layout is difficult to implement
     values.x = values.position.x;
     values.y = values.position.y;
     delete values.position;
+    form.setValues(values);
 
-    if (values.key !== (form.getValues() || {}).key) {
-      form.resetFields();
-    }
+  }, [activeSchema, form]);
 
-    form.setValues(values);
-  }, [form, activeSchema]);
 
-  const handleWatch = (newSchema: any) => {
+  const handleWatch = (formSchema: any) => {
+    const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
+      if (typeof formValue === 'object') {
+        return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
+      }
+      return formValue !== schemaValue;
+    }
+
     let changes: ChangeSchemaItem[] = [];
-    for (let key in newSchema) {
+    for (let key in formSchema) {
       if (['id', 'content'].includes(key)) continue;
 
-      // [position] Return the flattened position to its original form.
-      if (key === 'x') key = 'position.x';
-      if (key === 'y') key = 'position.y';
+      let value = formSchema[key];
+      let changed = false;
 
-      if (newSchema[key] !== (activeSchema as any)[key]) {
-        let value = newSchema[key];
+      if (['x', 'y'].includes(key)) {
+        // [position] Return the flattened position to its original form.
+        changed = value !== (activeSchema as any)['position'][key];
+        key = 'position.' + key;
+      } else {
+        changed = formAndSchemaValuesDiffer(value, (activeSchema as any)[key]);
+      }
+
+      if (changed) {
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
         if (value === null && ['rotate', 'opacity'].includes(key)) value = undefined;
 
@@ -98,11 +76,11 @@ const DetailView = (
       form.validateFields()
         .then(() => changeSchemas(changes))
         .catch((reason: ValidateErrorEntity) => {
-          if (reason.errorFields.length)  {
+          if (reason.errorFields.length) {
             changes = changes.filter((change: ChangeSchemaItem) => !reason.errorFields.find((field: {
-                name: InternalNamePath;
-                errors: string[];
-              }) => field.name.includes(change.key)
+              name: InternalNamePath;
+              errors: string[];
+            }) => field.name.includes(change.key)
             ));
           }
           if (changes.length) {
@@ -203,6 +181,31 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
     };
   }
 
+  const allWidgets: {
+    [key: string]: (props: PropPanelWidgetProps) => React.JSX.Element;
+  } = {
+    AlignWidget: (p) => <AlignWidget {...p} {...props} options={options} />,
+    Divider: () => (
+      <Divider style={{ marginTop: token.marginXS, marginBottom: token.marginXS }} />
+    ),
+    ButtonGroup: (p) => <ButtonGroupWidget {...p} {...props} options={options} />,
+  };
+  for (const plugin of Object.values(pluginsRegistry)) {
+    const widgets = plugin?.propPanel.widgets || {};
+    Object.entries(widgets).forEach(([widgetKey, widgetValue]) => {
+      allWidgets[widgetKey] = (p) => (
+        <WidgetRenderer
+          {...p}
+          {...props}
+          options={options}
+          theme={token}
+          i18n={i18n as (key: keyof Dict | string) => string}
+          widget={widgetValue}
+        />
+      );
+    });
+  }
+
   return (
     <div>
       <div style={{ height: 40, display: 'flex', alignItems: 'center' }}>
@@ -232,7 +235,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         <FormRender
           form={form}
           schema={propPanelSchema}
-          widgets={widgets}
+          widgets={allWidgets}
           watch={{ '#': handleWatch }}
           locale="en-US"
         />
@@ -241,4 +244,8 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   );
 };
 
-export default DetailView;
+const propsAreUnchanged = (prevProps: DetailViewProps, nextProps: DetailViewProps) => {
+  return JSON.stringify(prevProps.activeSchema) == JSON.stringify(nextProps.activeSchema)
+};
+
+export default React.memo(DetailView, propsAreUnchanged);

package/src/components/Designer/index.tsx

@@ -19,6 +19,7 @@ import { I18nContext, PluginsRegistry } from '../../contexts';
 import {
   schemasList2template,
   uuid,
+  round,
   cloneDeep,
   template2SchemasList,
   getPagesScrollTopByIndex,
@@ -51,7 +52,7 @@ const TemplateEditor = ({
   onSaveTemplate: (t: Template) => void;
   onChangeTemplate: (t: Template) => void;
 } & {
-  onChangeTemplate: (t: Template) => void 
+  onChangeTemplate: (t: Template) => void
   onPageCursorChange: (newPageCursor: number) => void
 }) => {
   const past = useRef<SchemaForUI[][]>([]);
@@ -253,7 +254,7 @@ const TemplateEditor = ({
           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)) }
+          const position = { x: round(px2mm(Math.max(0, moveX)), 2), y: round(px2mm(Math.max(0, moveY)), 2) }
 
           addSchema({ ...(active.data.current as Schema), position });
         }}

package/src/helper.ts

@@ -454,10 +454,15 @@ const handleTypeChange = (
       delete schema[key as keyof typeof schema];
     }
   });
+  // Apply attributes from new defaultSchema
   const propPanel = Object.values(pluginsRegistry).find(
     (plugin) => plugin?.propPanel.defaultSchema.type === value
   )?.propPanel;
-  Object.assign(schema, propPanel?.defaultSchema || {});
+  Object.keys(propPanel?.defaultSchema || {}).forEach((key) => {
+    if (!schema.hasOwnProperty(key)) {
+      (schema as any)[key] = propPanel?.defaultSchema[key];
+    }
+  });
 };
 
 export const changeSchemas = (args: {
@@ -484,4 +489,4 @@ export const changeSchemas = (args: {
     return acc;
   }, cloneDeep(schemas));
   commitSchemas(newSchemas);
-};
+};