@pdfme/ui 5.3.8 → 5.3.9-dev.1

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

@@ -1,7 +1,65 @@
 import React, { useEffect, forwardRef, Ref } from 'react';
-import Moveable, { OnDrag, OnResize, OnRotate, OnRotateEnd, OnClick } from 'react-moveable';
+import MoveableComponent from 'react-moveable';
 import { theme } from 'antd';
 
+// Define the types locally since they're not exported properly
+interface OnDrag {
+  target: HTMLElement | SVGElement;
+  left: number;
+  top: number;
+  // Add additional properties that might be used in the original library
+  beforeDelta: any;
+  beforeDist: any;
+  beforeTranslate: any;
+  delta: any;
+  dist: any;
+  transform: any;
+  translate: any;
+}
+
+interface OnResize {
+  target: HTMLElement | SVGElement;
+  width: number;
+  height: number;
+  direction: string;
+  // Add additional properties that might be used in the original library
+  offsetWidth: number;
+  offsetHeight: number;
+  dist: any;
+  delta: any;
+  transform: any;
+  translate: any;
+}
+
+interface OnRotate {
+  target: HTMLElement | SVGElement;
+  rotate: number;
+  // Add additional properties that might be used in the original library
+  beforeDist: any;
+  beforeDelta: any;
+  beforeRotate: any;
+  dist: any;
+  delta: any;
+  transform: any;
+}
+
+interface OnRotateEnd {
+  target: HTMLElement | SVGElement;
+}
+
+interface OnClick {
+  inputEvent: MouseEvent;
+  // Add additional properties that might be used in the original library
+  inputTarget: any;
+  isTarget: boolean;
+  containsTarget: boolean;
+  isDouble: boolean;
+  datas: any;
+  targets: any[];
+  clientX: number;
+  clientY: number;
+}
+
 type Props = {
   target: HTMLElement[];
   bounds: { left: number; top: number; bottom: number; right: number };
@@ -28,18 +86,19 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
   useEffect(() => {
     const containerElement = document.querySelector(`.${className}`) as HTMLElement | null;
     const containerElement2 = document.querySelectorAll(
-      `.${className} .moveable-line`
+      `.${className} .moveable-line`,
     ) as NodeListOf<HTMLElement>;
     if (containerElement) {
       containerElement.style.setProperty('--moveable-color', token.colorPrimary);
       Array.from(containerElement2).map((e) =>
-        e.style.setProperty('--moveable-color', token.colorPrimary)
+        e.style.setProperty('--moveable-color', token.colorPrimary),
       );
     }
   }, [props.target]);
 
   return (
-    <Moveable
+    // @ts-ignore
+    <MoveableComponent
       style={{ zIndex: 1 }}
       className={className}
       rootContainer={document ? document.body : undefined}
@@ -59,18 +118,18 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
       keepRatio={props.keepRatio}
       onRotate={props.onRotate}
       onRotateEnd={props.onRotateEnd}
-      onRotateGroup={({ events }) => {
+      onRotateGroup={({ events }: { events: any[] }) => {
         events.forEach(props.onRotate);
       }}
       onRotateGroupEnd={props.onRotateGroupEnd}
       onDrag={props.onDrag}
-      onDragGroup={({ events }) => {
+      onDragGroup={({ events }: { events: any[] }) => {
         events.forEach(props.onDrag);
       }}
       onDragEnd={props.onDragEnd}
       onDragGroupEnd={props.onDragGroupEnd}
       onResize={props.onResize}
-      onResizeGroup={({ events }) => {
+      onResizeGroup={({ events }: { events: any[] }) => {
         events.forEach(props.onResize);
       }}
       onResizeEnd={props.onResizeEnd}

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

@@ -43,12 +43,14 @@ const getPaddingStyle = (i: number, p: number, color: string): CSS.Properties =>
 };
 
 const Padding = ({ basePdf }: { basePdf: BasePdf }) => {
-  return <>
-    {isBlankPdf(basePdf) &&
-      basePdf.padding.map((p, i) => (
-        <div key={String(i)} style={getPaddingStyle(i, p, theme.useToken().token.colorError)} />
-      ))}
-  </>
-}
+  return (
+    <>
+      {isBlankPdf(basePdf) &&
+        basePdf.padding.map((p, i) => (
+          <div key={String(i)} style={getPaddingStyle(i, p, theme.useToken().token.colorError)} />
+        ))}
+    </>
+  );
+};
 
-export default Padding;
+export default Padding;

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

@@ -1,13 +1,28 @@
 import React, { useEffect } from 'react';
-import Selecto, { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
-import { SELECTABLE_CLASSNAME } from '../../../constants';
+import SelectoComponent from 'react-selecto';
+import { SELECTABLE_CLASSNAME } from '../../../constants.js';
 import { theme } from 'antd';
 
+// Define the types locally to match what's expected in Canvas/index.tsx
+interface OnDragStart {
+  inputEvent: MouseEvent;
+  stop: () => void;
+  isTrusted: boolean;
+}
+
+interface OnSelect {
+  selected: Element[];
+  added: Element[];
+  removed: Element[];
+  inputEvent: MouseEvent;
+  rect: DOMRect;
+}
+
 type Props = {
   container: HTMLElement | null;
   continueSelect: boolean;
-  onDragStart: (e: _OnDragStart) => void;
-  onSelect: (e: _OnSelect) => void;
+  onDragStart: (e: OnDragStart) => void;
+  onSelect: (e: OnSelect) => void;
 };
 
 const className = 'pdfme-selecto';
@@ -24,7 +39,7 @@ const _Selecto = (props: Props) => {
   }, [props.container]);
 
   return (
-    <Selecto
+    <SelectoComponent
       className={className}
       selectFromInside={false}
       selectByClick
@@ -34,7 +49,7 @@ const _Selecto = (props: Props) => {
       container={props.container}
       continueSelect={props.continueSelect}
       onDragStart={props.onDragStart}
-      onSelect={props.onSelect}
+      onSelect={(e: any) => props.onSelect(e as OnSelect)}
     />
   );
 };

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

@@ -10,25 +10,84 @@ import React, {
   useCallback,
 } from 'react';
 import { theme, Button } from 'antd';
-import { OnDrag, OnResize, OnClick, OnRotate } from 'react-moveable';
-import { ZOOM, SchemaForUI, Size, ChangeSchemas, BasePdf, isBlankPdf, replacePlaceholders } from '@pdfme/common';
-import { PluginsRegistry } from '../../../contexts';
+import {
+  ZOOM,
+  SchemaForUI,
+  Size,
+  ChangeSchemas,
+  BasePdf,
+  isBlankPdf,
+  replacePlaceholders,
+} from '@pdfme/common';
+import { PluginsRegistry } from '../../../contexts.js';
 import { X } from 'lucide-react';
-import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants';
-import { usePrevious } from '../../../hooks';
-import { uuid, round, flatten } from '../../../helper';
-import Paper from '../../Paper';
-import Renderer from '../../Renderer';
-import Selecto from './Selecto';
-import Moveable from './Moveable';
-import Guides from './Guides';
-import Mask from './Mask';
-import Padding from './Padding';
-import StaticSchema from '../../StaticSchema';
+import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
+import { usePrevious } from '../../../hooks.js';
+import { uuid, round, flatten } from '../../../helper.js';
+import Paper from '../../Paper.js';
+import Renderer from '../../Renderer.js';
+import Selecto from './Selecto.js';
+import Moveable from './Moveable.js';
+import Guides from './Guides.js';
+import Mask from './Mask.js';
+import Padding from './Padding.js';
+import StaticSchema from '../../StaticSchema.js';
+
+// Define the interfaces locally since they're not exported properly
+interface OnDrag {
+  target: HTMLElement | SVGElement;
+  left: number;
+  top: number;
+  // Add additional properties that might be used in the original library
+  beforeDelta: any;
+  beforeDist: any;
+  beforeTranslate: any;
+  delta: any;
+  dist: any;
+  transform: any;
+  translate: any;
+}
 
+interface OnResize {
+  target: HTMLElement | SVGElement;
+  width: number;
+  height: number;
+  direction: string;
+  // Add additional properties that might be used in the original library
+  offsetWidth: number;
+  offsetHeight: number;
+  dist: any;
+  delta: any;
+  transform: any;
+  translate: any;
+}
 
-const mm2px = (mm: number) => mm * 3.7795275591;
+interface OnRotate {
+  target: HTMLElement | SVGElement;
+  rotate: number;
+  // Add additional properties that might be used in the original library
+  beforeDist: any;
+  beforeDelta: any;
+  beforeRotate: any;
+  dist: any;
+  delta: any;
+  transform: any;
+}
+
+interface OnClick {
+  inputEvent: MouseEvent;
+  // Add additional properties that might be used in the original library
+  inputTarget: any;
+  isTarget: boolean;
+  containsTarget: boolean;
+  isDouble: boolean;
+  datas: any;
+  targets: any[];
+  clientX: number;
+  clientY: number;
+}
 
+const mm2px = (mm: number) => mm * 3.7795275591;
 
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
@@ -321,16 +380,16 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
 
   const rotatable = useMemo(() => {
     const selectedSchemas = (schemasList[pageCursor] || []).filter((s) =>
-      activeElements.map((ae) => ae.id).includes(s.id)
+      activeElements.map((ae) => ae.id).includes(s.id),
     );
     const schemaTypes = selectedSchemas.map((s) => s.type);
     const uniqueSchemaTypes = [...new Set(schemaTypes)];
     const defaultSchemas = Object.values(pluginsRegistry).map(
-      (plugin) => plugin?.propPanel.defaultSchema
+      (plugin) => plugin?.propPanel.defaultSchema,
     );
 
     return uniqueSchemaTypes.every(
-      (type) => defaultSchemas.find((ds) => ds.type === type)?.rotate !== undefined
+      (type) => defaultSchemas.find((ds) => ds.type === type)?.rotate !== undefined,
     );
   }, [activeElements, pageCursor, schemasList, pluginsRegistry]);
 
@@ -357,7 +416,9 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           if (paperRefs.current[pageCursor] === inputEvent.target) {
             onEdit([]);
           }
-          if (inputEvent.target?.id === DELETE_BTN_ID) {
+          // Check if the target is an HTMLElement and has an id property
+          const targetElement = inputEvent.target as HTMLElement;
+          if (targetElement && targetElement.id === DELETE_BTN_ID) {
             removeSchemas(activeElements.map((ae) => ae.id));
           }
         }}
@@ -398,7 +459,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
             <StaticSchema
               template={{ schemas: schemasList, basePdf }}
               input={Object.fromEntries(
-                schemasList.flat().map(({ name, content = '' }) => [name, content])
+                schemasList.flat().map(({ name, content = '' }) => [name, content]),
               )}
               scale={scale}
               totalPages={schemasList.length}
@@ -447,17 +508,20 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           const mode =
             editing && activeElements.map((ae) => ae.id).includes(schema.id)
               ? 'designer'
-              : 'viewer'
+              : 'viewer';
 
           const content = schema.content || '';
           let value = content;
 
           if (mode !== 'designer' && schema.readOnly) {
             const variables = {
-              ...schemasList.flat().reduce((acc, currSchema) => {
-                acc[currSchema.name] = currSchema.content || '';
-                return acc;
-              }, {} as Record<string, string>),
+              ...schemasList.flat().reduce(
+                (acc, currSchema) => {
+                  acc[currSchema.name] = currSchema.content || '';
+                  return acc;
+                },
+                {} as Record<string, string>,
+              ),
               totalPages: schemasList.length,
               currentPage: index + 1,
             };
@@ -478,11 +542,14 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
                 changeSchemas(args.map(({ key, value }) => ({ key, value, schemaId: schema.id })));
               }}
               stopEditing={() => setEditing(false)}
-              outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${schema.readOnly && hoveringSchemaId !== schema.id ? 'transparent' : token.colorPrimary
-                }`}
+              outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${
+                schema.readOnly && hoveringSchemaId !== schema.id
+                  ? 'transparent'
+                  : token.colorPrimary
+              }`}
               scale={scale}
             />
-          )
+          );
         }}
       />
     </div>

package/src/components/Designer/LeftSidebar.tsx

@@ -1,49 +1,57 @@
 import React, { useContext, useState, useEffect } from 'react';
-import {
-  Schema,
-  Plugin,
-  BasePdf,
-} from '@pdfme/common';
+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 { LEFT_SIDEBAR_WIDTH } from '../../constants';
-import { PluginsRegistry } from '../../contexts';
-import PluginIcon from "./PluginIcon";
+import { CSS } from '@dnd-kit/utilities';
+import Renderer from '../Renderer.js';
+import { LEFT_SIDEBAR_WIDTH } from '../../constants.js';
+import { PluginsRegistry } from '../../contexts.js';
+import PluginIcon from './PluginIcon.js';
 
-
-const Draggable = (props: { plugin: Plugin<any>, scale: number, basePdf: BasePdf, children: React.ReactNode }) => {
+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) }
+  const style = { transform: CSS.Translate.toString(transform) };
 
   return (
     <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
-      {isDragging &&
+      {isDragging && (
         <div style={{ transform: `scale(${scale})` }}>
           <Renderer
             schema={{ ...defaultSchema, id: defaultSchema.type }}
             basePdf={basePdf}
             value={defaultSchema.content || ''}
-            onChangeHoveringSchemaId={() => { void 0 }}
+            onChangeHoveringSchemaId={() => {
+              void 0;
+            }}
             mode={'viewer'}
             outline={`1px solid ${token.colorPrimary}`}
             scale={scale}
           />
         </div>
-      }
-      <div style={{ visibility: isDragging ? 'hidden' : 'visible' }}>
-        {props.children}
-      </div>
+      )}
+      <div style={{ visibility: isDragging ? 'hidden' : 'visible' }}>{props.children}</div>
     </div>
   );
-}
+};
 
-const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number, basePdf: BasePdf }) => {
+const LeftSidebar = ({
+  height,
+  scale,
+  basePdf,
+}: {
+  height: number;
+  scale: number;
+  basePdf: BasePdf;
+}) => {
   const { token } = theme.useToken();
   const pluginsRegistry = useContext(PluginsRegistry);
   const [isDragging, setIsDragging] = useState(false);
@@ -62,36 +70,36 @@ const LeftSidebar = ({ height, scale, basePdf }: { height: number, scale: number
     };
   }, [isDragging]);
 
-  return <div
-    style={{
-      left: 0,
-      right: 0,
-      position: 'absolute',
-      zIndex: 1,
-      height,
-      width: LEFT_SIDEBAR_WIDTH,
-      background: token.colorBgLayout,
-      textAlign: 'center',
-      overflow: isDragging ? 'visible' : 'auto',
-    }}
-  >
-    {Object.entries(pluginsRegistry).map(([label, plugin]) => {
-      if (!plugin?.propPanel.defaultSchema) return null;
+  return (
+    <div
+      style={{
+        left: 0,
+        right: 0,
+        position: 'absolute',
+        zIndex: 1,
+        height,
+        width: LEFT_SIDEBAR_WIDTH,
+        background: token.colorBgLayout,
+        textAlign: 'center',
+        overflow: isDragging ? 'visible' : 'auto',
+      }}
+    >
+      {Object.entries(pluginsRegistry).map(([label, plugin]) => {
+        if (!plugin?.propPanel.defaultSchema) return null;
 
-      return <Draggable
-        key={label}
-        scale={scale}
-        basePdf={basePdf}
-        plugin={plugin}>
-        <Button
-          onMouseDown={() => setIsDragging(true)}
-          style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
-        >
-          <PluginIcon plugin={plugin} label={label} />
-        </Button>
-      </Draggable>
-    })}
-  </div>
-}
+        return (
+          <Draggable key={label} scale={scale} basePdf={basePdf} plugin={plugin}>
+            <Button
+              onMouseDown={() => setIsDragging(true)}
+              style={{ width: 35, height: 35, marginTop: '0.25rem', padding: '0.25rem' }}
+            >
+              <PluginIcon plugin={plugin} label={label} />
+            </Button>
+          </Draggable>
+        );
+      })}
+    </div>
+  );
+};
 
-export default LeftSidebar
+export default LeftSidebar;

package/src/components/Designer/PluginIcon.tsx

@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
-import { Plugin } from "@pdfme/common";
-import { OptionsContext } from '../../contexts';
+import { Plugin } from '@pdfme/common';
+import { OptionsContext } from '../../contexts.js';
 import { theme } from 'antd';
 
-
 interface PluginIconProps {
   plugin: Plugin<any>;
   label: string;
@@ -11,7 +10,12 @@ interface PluginIconProps {
   styles?: React.CSSProperties;
 }
 
-const getWithModifiedSize = (htmlString: string, label: string, size: number, styles?: React.CSSProperties) => {
+const getWithModifiedSize = (
+  htmlString: string,
+  label: string,
+  size: number,
+  styles?: React.CSSProperties,
+) => {
   const parser = new DOMParser();
   const doc = parser.parseFromString(htmlString, 'text/html');
 
@@ -20,10 +24,10 @@ const getWithModifiedSize = (htmlString: string, label: string, size: number, st
       node.setAttribute('width', size.toString());
       node.setAttribute('height', size.toString());
     }
-    Array.from(node.children).forEach(child => modifyNode(child as HTMLElement));
+    Array.from(node.children).forEach((child) => modifyNode(child as HTMLElement));
   };
 
-  Array.from(doc.body.children).forEach(child => modifyNode(child as HTMLElement));
+  Array.from(doc.body.children).forEach((child) => modifyNode(child as HTMLElement));
 
   return (
     <div style={styles} title={label} dangerouslySetInnerHTML={{ __html: doc.body.innerHTML }} />
@@ -35,16 +39,25 @@ const PluginIcon = (props: PluginIconProps) => {
   const { token } = theme.useToken();
   const options = useContext(OptionsContext);
   const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
-  const iconStyles = { ...styles, color: token.colorText, display: 'flex', justifyContent: 'center' };
+  const iconStyles = {
+    ...styles,
+    color: token.colorText,
+    display: 'flex',
+    justifyContent: 'center',
+  };
 
   if (icon) {
     if (size) {
       return getWithModifiedSize(icon, label, size, iconStyles);
     }
-    return <div style={iconStyles} title={label} dangerouslySetInnerHTML={{ __html: icon }} />
+    return <div style={iconStyles} title={label} dangerouslySetInnerHTML={{ __html: icon }} />;
   }
 
-  return <div style={{ ...styles, overflow: 'hidden', fontSize: 10, }} title={label} >{label}</div>
+  return (
+    <div style={{ ...styles, overflow: 'hidden', fontSize: 10 }} title={label}>
+      {label}
+    </div>
+  );
 };
 
 export default PluginIcon;