@pdfme/ui 5.3.11-dev.2 → 5.3.11-dev.21

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

@@ -10,6 +10,7 @@ import React, {
   useCallback,
 } from 'react';
 import { theme, Button } from 'antd';
+import MoveableComponent, { OnDrag, OnRotate, OnResize } from 'react-moveable';
 import {
   ZOOM,
   SchemaForUI,
@@ -33,60 +34,6 @@ 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;
-}
-
-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();
@@ -175,7 +122,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   const pluginsRegistry = useContext(PluginsRegistry);
   const verticalGuides = useRef<GuidesInterface[]>([]);
   const horizontalGuides = useRef<GuidesInterface[]>([]);
-  const moveable = useRef<any>(null);
+  const moveable = useRef<MoveableComponent>(null);
 
   const [isPressShiftKey, setIsPressShiftKey] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -373,8 +320,8 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
   const getGuideLines = (guides: GuidesInterface[], index: number) =>
     guides[index] && guides[index].getGuides().map((g) => g * ZOOM);
 
-  const onClickMoveable = (e: OnClick) => {
-    e.inputEvent.stopPropagation();
+  const onClickMoveable = () => {
+    // Just set editing to true without trying to access event properties
     setEditing(true);
   };
 
@@ -384,13 +331,30 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
     );
     const schemaTypes = selectedSchemas.map((s) => s.type);
     const uniqueSchemaTypes = [...new Set(schemaTypes)];
-    const defaultSchemas = Object.values(pluginsRegistry).map(
-      (plugin) => plugin?.propPanel.defaultSchema,
-    );
 
-    return uniqueSchemaTypes.every(
-      (type) => defaultSchemas.find((ds) => ds.type === type)?.rotate !== undefined,
-    );
+    // Create a type-safe array of default schemas
+    const defaultSchemas: Record<string, unknown>[] = [];
+
+    // Safely iterate through plugins registry
+    Object.values(pluginsRegistry).forEach((plugin) => {
+      if (
+        plugin &&
+        typeof plugin === 'object' &&
+        'propPanel' in plugin &&
+        plugin.propPanel &&
+        typeof plugin.propPanel === 'object' &&
+        'defaultSchema' in plugin.propPanel &&
+        plugin.propPanel.defaultSchema
+      ) {
+        defaultSchemas.push(plugin.propPanel.defaultSchema as Record<string, unknown>);
+      }
+    });
+
+    // Check if all schema types have rotate property
+    return uniqueSchemaTypes.every((type) => {
+      const matchingSchema = defaultSchemas.find((ds) => ds && 'type' in ds && ds.type === type);
+      return matchingSchema && 'rotate' in matchingSchema;
+    });
   }, [activeElements, pageCursor, schemasList, pluginsRegistry]);
 
   return (
@@ -407,26 +371,37 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
         container={paperRefs.current[pageCursor]}
         continueSelect={isPressShiftKey}
         onDragStart={(e) => {
-          const { inputEvent } = e;
-          const isMoveableElement = moveable.current?.isMoveableElement(inputEvent.target);
+          // Use type assertion to safely access inputEvent properties
+          const inputEvent = e.inputEvent as MouseEvent | TouchEvent;
+          const target = inputEvent.target as Element | null;
+          const isMoveableElement = moveable.current?.isMoveableElement(target as Element);
+
           if ((inputEvent.type === 'touchstart' && e.isTrusted) || isMoveableElement) {
             e.stop();
           }
 
-          if (paperRefs.current[pageCursor] === inputEvent.target) {
+          if (paperRefs.current[pageCursor] === target) {
             onEdit([]);
           }
+
           // Check if the target is an HTMLElement and has an id property
-          const targetElement = inputEvent.target as HTMLElement;
+          const targetElement = target as HTMLElement | null;
           if (targetElement && targetElement.id === DELETE_BTN_ID) {
             removeSchemas(activeElements.map((ae) => ae.id));
           }
         }}
-        onSelect={({ added, removed, selected, inputEvent }) => {
+        onSelect={(e) => {
+          // Use type assertions to safely access properties
+          const inputEvent = e.inputEvent as MouseEvent | TouchEvent;
+          const added = e.added as HTMLElement[];
+          const removed = e.removed as HTMLElement[];
+          const selected = e.selected as HTMLElement[];
+
           const isClick = inputEvent.type === 'mousedown';
-          let newActiveElements: HTMLElement[] = isClick ? (selected as HTMLElement[]) : [];
+          let newActiveElements: HTMLElement[] = isClick ? selected : [];
+
           if (!isClick && added.length > 0) {
-            newActiveElements = activeElements.concat(added as HTMLElement[]);
+            newActiveElements = activeElements.concat(added);
           }
           if (!isClick && removed.length > 0) {
             newActiveElements = activeElements.filter((ae) => !removed.includes(ae));
@@ -436,8 +411,10 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           if (newActiveElements != activeElements) {
             setEditing(false);
           }
+
           // For MacOS CMD+SHIFT+3/4 screenshots where the keydown event is never received, check mouse too
-          if (!inputEvent.shiftKey) {
+          const mouseEvent = inputEvent as MouseEvent;
+          if (mouseEvent && typeof mouseEvent.shiftKey === 'boolean' && !mouseEvent.shiftKey) {
             setIsPressShiftKey(false);
           }
         }}
@@ -538,7 +515,9 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
               onChangeHoveringSchemaId={onChangeHoveringSchemaId}
               mode={mode}
               onChange={(arg) => {
-                const args = Array.isArray(arg) ? arg : [arg];
+                // Use type assertion to safely handle the argument
+                type ChangeArg = { key: string; value: unknown };
+                const args = Array.isArray(arg) ? (arg as ChangeArg[]) : [arg as ChangeArg];
                 changeSchemas(args.map(({ key, value }) => ({ key, value, schemaId: schema.id })));
               }}
               stopEditing={() => setEditing(false)}

package/src/components/Designer/LeftSidebar.tsx

@@ -9,14 +9,14 @@ import { PluginsRegistry } from '../../contexts.js';
 import PluginIcon from './PluginIcon.js';
 
 const Draggable = (props: {
-  plugin: Plugin<any>;
+  plugin: Plugin<Schema>;
   scale: number;
   basePdf: BasePdf;
   children: React.ReactNode;
 }) => {
   const { scale, basePdf, plugin } = props;
   const { token } = theme.useToken();
-  const defaultSchema = plugin.propPanel.defaultSchema as Schema;
+  const defaultSchema = plugin.propPanel.defaultSchema;
   const draggable = useDraggable({ id: defaultSchema.type, data: defaultSchema });
   const { listeners, setNodeRef, attributes, transform, isDragging } = draggable;
   const style = { transform: CSS.Translate.toString(transform) };

package/src/components/Designer/PluginIcon.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
-import { Plugin } from '@pdfme/common';
+import { Plugin, Schema } from '@pdfme/common';
 import { OptionsContext } from '../../contexts.js';
 import { theme } from 'antd';
 
 interface PluginIconProps {
-  plugin: Plugin<any>;
+  plugin: Plugin<Schema>;
   label: string;
   size?: number;
   styles?: React.CSSProperties;
@@ -38,7 +38,19 @@ const PluginIcon = (props: PluginIconProps) => {
   const { plugin, label, size, styles } = props;
   const { token } = theme.useToken();
   const options = useContext(OptionsContext);
-  const icon = options.icons?.[plugin.propPanel.defaultSchema.type] ?? plugin.icon;
+
+  // Safely access plugin properties with proper type checking
+  const defaultSchemaType =
+    plugin.propPanel &&
+    typeof plugin.propPanel === 'object' &&
+    plugin.propPanel.defaultSchema &&
+    typeof plugin.propPanel.defaultSchema === 'object' &&
+    'type' in plugin.propPanel.defaultSchema &&
+    typeof plugin.propPanel.defaultSchema.type === 'string'
+      ? plugin.propPanel.defaultSchema.type
+      : '';
+
+  const icon = options.icons?.[defaultSchemaType] ?? plugin.icon;
   const iconStyles = {
     ...styles,
     color: token.colorText,

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

@@ -23,28 +23,71 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     const tgtPos = isVertical ? 'x' : 'y';
     const tgtSize = isVertical ? 'width' : 'height';
     const isSingle = ass.length === 1;
-    const root = pageSize[tgtSize];
+    // Access pageSize property safely with proper type assertion
+    const root =
+      pageSize && typeof pageSize === 'object'
+        ? tgtSize === 'width'
+          ? (pageSize as unknown as { width: number }).width
+          : (pageSize as unknown as { height: number }).height
+        : 0;
 
-    const min = isSingle ? 0 : Math.min(...ass.map((as) => as.position[tgtPos]));
-    const max = isSingle ? root : Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+    // Access position properties safely with proper type assertion
+    const min = isSingle
+      ? 0
+      : Math.min(
+          ...ass.map((as) => {
+            // Safely access position property with proper type assertion
+            const position =
+              as.position && typeof as.position === 'object'
+                ? (as.position as unknown as { x: number; y: number })
+                : { x: 0, y: 0 };
+            return tgtPos === 'x' ? position.x : position.y;
+          }),
+        );
+    const max = isSingle
+      ? root
+      : Math.max(
+          ...ass.map((as) => {
+            // Safely access position and size properties with proper type assertion
+            const position =
+              as.position && typeof as.position === 'object'
+                ? (as.position as unknown as { x: number; y: number })
+                : { x: 0, y: 0 };
+            const posValue = tgtPos === 'x' ? position.x : position.y;
+
+            // Safely access width/height with proper type assertion
+            const asWithSize = as as unknown as { width?: number; height?: number };
+            const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+            return posValue + sizeValue;
+          }),
+        );
 
     let basePos = min;
-    let adjust = (_: number) => 0;
+    // Define adjust function with consistent parameter usage
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let adjust = (_size: number): number => 0;
 
     if (['center', 'middle'].includes(type)) {
       basePos = (min + max) / 2;
-      adjust = (num: number) => num / 2;
+      adjust = (size: number): number => size / 2;
     } else if (['right', 'bottom'].includes(type)) {
       basePos = max;
-      adjust = (num: number) => num;
+      adjust = (size: number): number => size;
     }
 
     changeSchemas(
-      ass.map((as) => ({
-        key: `position.${tgtPos}`,
-        value: round(basePos - adjust(as[tgtSize]), 2),
-        schemaId: as.id,
-      })),
+      ass.map((as) => {
+        // Safely access size property with proper type assertion
+        const asWithSize = as as unknown as { width?: number; height?: number; id: string };
+        const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+        return {
+          key: `position.${tgtPos}`,
+          value: round(basePos - adjust(sizeValue), 2),
+          schemaId: asWithSize.id,
+        };
+      }),
     );
   };
 
@@ -55,23 +98,66 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     const isVertical = type === 'vertical';
     const tgtPos = isVertical ? 'y' : 'x';
     const tgtSize = isVertical ? 'height' : 'width';
-    const min = Math.min(...ass.map((as) => as.position[tgtPos]));
-    const max = Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+
+    // Safely access position property with proper type assertion
+    const min = Math.min(
+      ...ass.map((as) => {
+        const position =
+          as.position && typeof as.position === 'object'
+            ? (as.position as unknown as { x: number; y: number })
+            : { x: 0, y: 0 };
+        return tgtPos === 'x' ? position.x : position.y;
+      }),
+    );
+
+    // Safely access position and size properties with proper type assertion
+    const max = Math.max(
+      ...ass.map((as) => {
+        const position =
+          as.position && typeof as.position === 'object'
+            ? (as.position as unknown as { x: number; y: number })
+            : { x: 0, y: 0 };
+        const posValue = tgtPos === 'x' ? position.x : position.y;
+
+        // Safely access width/height with proper type assertion
+        const asWithSize = as as unknown as { width?: number; height?: number };
+        const sizeValue = tgtSize === 'width' ? asWithSize.width || 0 : asWithSize.height || 0;
+
+        return posValue + sizeValue;
+      }),
+    );
 
     if (ass.length < 3) return;
 
     const boxPos = min;
     const boxSize = max - min;
-    const sum = ass.reduce((acc, cur) => acc + cur[tgtSize], 0);
+    // Safely access size property with proper type assertion
+    const sum = ass.reduce((acc, cur) => {
+      const curWithSize = cur as unknown as { width?: number; height?: number };
+      const sizeValue = tgtSize === 'width' ? curWithSize.width || 0 : curWithSize.height || 0;
+      return acc + sizeValue;
+    }, 0);
     const remain = boxSize - sum;
     const unit = remain / (ass.length - 1);
 
     let prev = 0;
     changeSchemas(
       ass.map((as, index) => {
-        prev += index === 0 ? 0 : ass[index - 1][tgtSize] + unit;
+        // Safely access size property of previous element with proper type assertion
+        const prevSize =
+          index === 0
+            ? 0
+            : (() => {
+                const prevAs = ass[index - 1] as unknown as { width?: number; height?: number };
+                return tgtSize === 'width' ? prevAs.width || 0 : prevAs.height || 0;
+              })();
+
+        prev += index === 0 ? 0 : prevSize + unit;
         const value = round(boxPos + prev, 2);
-        return { key: `position.${tgtPos}`, value, schemaId: as.id };
+
+        // Safely access id with proper type assertion
+        const asWithId = as as unknown as { id: string };
+        return { key: `position.${tgtPos}`, value, schemaId: asWithId.id };
       }),
     );
   };

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

@@ -16,10 +16,10 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     const key = btn.key;
     const type = btn.type;
     const ids = activeElements.map((ae) => ae.id);
-    const ass = schemas.filter((s) => ids.includes(s.id)) as SchemaForUI[];
+    const ass = schemas.filter((s) => ids.includes(s.id));
     changeSchemas(
-      ass.map((s: Record<string, any>) => {
-        const oldValue = s[key] ?? false;
+      ass.map((s: SchemaForUI) => {
+        const oldValue = Boolean((s as Record<string, unknown>)[key] ?? false);
         const newValue = type === 'boolean' ? !oldValue : btn.value;
         return { key, value: newValue, schemaId: s.id };
       }),
@@ -31,9 +31,12 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     const type = btn.type;
     let active = false;
     const ids = activeElements.map((ae) => ae.id);
-    const ass = schemas.filter((s) => ids.includes(s.id)) as SchemaForUI[];
-    ass.forEach((s: Record<string, any>) => {
-      active = type === 'boolean' ? (s[key] ?? false) : s[key] === btn.value;
+    const ass = schemas.filter((s) => ids.includes(s.id));
+    ass.forEach((s: SchemaForUI) => {
+      // Cast schema to Record to safely access dynamic properties
+      const schemaRecord = s as Record<string, unknown>;
+      active =
+        type === 'boolean' ? Boolean(schemaRecord[key] ?? false) : schemaRecord[key] === btn.value;
     });
     return active;
   };
@@ -45,13 +48,13 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(
       replaceCurrentColor(svgString, token.colorText),
     )}`;
-    return <img width={17} height={17} src={svgDataUrl} />;
+    return <img width={17} height={17} src={svgDataUrl} alt="" />;
   };
 
   return (
     <Form.Item>
       <Button.Group>
-        {schema.buttons.map((btn: ButtonConfig, index: number) => {
+        {(schema.buttons as ButtonConfig[]).map((btn: ButtonConfig, index: number) => {
           const active = isActive(btn);
           return (
             <Button