fix: update types for ComponentDrag to improve type safety and consistency

packages/core/src/commands/index.ts

@@ -40,9 +40,10 @@ import CommandAbstract, { Command, CommandOptions, CommandObject, CommandFunctio
 import defConfig, { CommandsConfig } from './config/config';
 import { Module } from '../abstract';
 import Component, { eventDrag } from '../dom_components/model/Component';
-import Editor from '../editor/model/Editor';
+import type Editor from '../editor/model/Editor';
-import { ObjectAny } from '../common';
+import type { ObjectAny } from '../common';
 import CommandsEvents from './types';
+import type { ComponentDragEventProps } from './view/ComponentDrag';
 
 export type CommandEvent = 'run' | 'stop' | `run:${string}` | `stop:${string}` | `abort:${string}`;
 
@@ -450,4 +451,9 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
     this.commands = {};
     this.active = {};
   }
+
+  // Dummy property to ensure ComponentDragEventProps type is included in the build
+  dummyComponentDragEventProps() {
+    return undefined as ComponentDragEventProps | undefined;
+  }
 }

packages/core/src/commands/view/ComponentDrag.ts

@@ -125,7 +125,7 @@ export default {
   },
 
   getGuidesStatic() {
-    let result: Guide[] = [];
+    let result: ComponentGuide[] = [];
     const el = this.target.getEl();
     const parentNode = el?.parentElement;
     if (!parentNode) return [];
@@ -151,7 +151,7 @@ export default {
       lastEl = origin;
       lastPos = pos;
       each(this.getGuidePosUpdate(item, pos), (val, key) => {
-        (item as Record<string, unknown>)[key] = val;
+        (item as unknown as Record<string, unknown>)[key] = val;
       });
       item.originRect = pos;
     });
@@ -249,7 +249,7 @@ export default {
         guideEl: guide,
         guide,
       };
-    }) as Guide[];
+    }) as ComponentGuide[];
 
     guides.forEach((guidePoint) => this.guides?.push(guidePoint));
 
@@ -545,7 +545,7 @@ export default {
           return null;
         }
       })
-      .filter(Boolean) as GuideMatched[];
+      .filter(Boolean) as ComponentGuideMatched[];
   },
 
   toggleDrag(enable) {
@@ -568,11 +568,11 @@ export default {
 interface ComponentDragProps {
   editor: Editor;
   em?: EditorModel;
-  guides?: Guide[];
+  guides?: ComponentGuide[];
   guidesContainer?: HTMLElement;
   guidesEl?: HTMLElement;
-  guidesStatic?: Guide[];
+  guidesStatic?: ComponentGuide[];
-  guidesTarget?: Guide[];
+  guidesTarget?: ComponentGuide[];
   isTran?: boolean;
   opts: ComponentDragOpts;
   target: Component;
@@ -586,13 +586,13 @@ interface ComponentDragProps {
   stop: () => void;
   setupGuides: () => void;
   getGuidesContainer: () => HTMLElement;
-  getGuidesStatic: () => Guide[];
+  getGuidesStatic: () => ComponentGuide[];
-  getGuidesTarget: () => Guide[];
+  getGuidesTarget: () => ComponentGuide[];
-  updateGuides: (guides?: Guide[]) => void;
+  updateGuides: (guides?: ComponentGuide[]) => void;
-  getGuidePosUpdate: (item: Guide, rect: ComponentOrigRect) => { x?: number; y?: number };
+  getGuidePosUpdate: (item: ComponentGuide, rect: ComponentOrigRect) => { x?: number; y?: number };
   renderGuide: (item: { active?: boolean; guide?: HTMLElement; x?: number; y?: number }) => HTMLElement;
   getElementPos: (el: HTMLElement) => ComponentOrigRect;
-  getElementGuides: (el: HTMLElement) => Guide[];
+  getElementGuides: (el: HTMLElement) => ComponentGuide[];
   getTranslate: (transform: string, axis?: string) => number;
   setTranslate: (transform: string, axis: string, value: string) => string;
   getPosition: DraggerOptions['getPosition'];
@@ -602,13 +602,13 @@ interface ComponentDragProps {
   onDrag: DraggerOptions['onDrag'];
   onEnd: DraggerOptions['onEnd'];
   hideGuidesInfo: () => void;
-  renderGuideInfo: (guides?: Guide[]) => void;
+  renderGuideInfo: (guides?: ComponentGuide[]) => void;
-  renderSingleGuideInfo: (guideMatched: GuideMatched) => void;
+  renderSingleGuideInfo: (guideMatched: ComponentGuideMatched) => void;
-  getGuidesMatched: (guides?: Guide[]) => GuideMatched[];
+  getGuidesMatched: (guides?: ComponentGuide[]) => ComponentGuideMatched[];
   toggleDrag: (enable?: boolean) => void;
 }
 
-type ComponentDragOpts = {
+interface ComponentDragOpts {
   target: Component;
   center?: number;
   debug?: boolean;
@@ -621,12 +621,12 @@ type ComponentDragOpts = {
   onStart?: (data: any) => Editor;
   onDrag?: (data: any) => Editor;
   onEnd?: (ev: Event, opt: any, data: any) => void;
-};
+}
 
 /**
  * Represents the properties of the drag events.
  */
-export type ComponentDragEventProps = {
+export interface ComponentDragEventProps {
   /**
    * The mode of the drag (absolute or translate).
    */
@@ -644,22 +644,22 @@ export type ComponentDragEventProps = {
    * The guides of the component being dragged.
    * @deprecated Use `guidesMatched` instead.
    */
-  guidesTarget: Guide[];
+  guidesTarget: ComponentGuide[];
   /**
    * All the guides except the ones of the component being dragged.
    * @deprecated Use `guidesMatched` instead.
    */
-  guidesStatic: Guide[];
+  guidesStatic: ComponentGuide[];
   /**
    * The guides that are being matched.
    */
-  guidesMatched: GuideMatched[];
+  guidesMatched: ComponentGuideMatched[];
-};
+}
 
 /**
  * Represents a guide used during component dragging.
  */
-type Guide = {
+interface ComponentGuide {
   /**
    * The type of the guide (e.g., 't', 'b', 'l', 'r', 'x', 'y').
    */
@@ -712,24 +712,24 @@ type Guide = {
    * @todo The `active` property is not set in the code, but the value is changing.
    */
   active?: boolean;
-};
+}
 
 /**
  * Represents a matched guide during component dragging.
  */
-type GuideMatched = {
+interface ComponentGuideMatched {
   /**
    * The static guides used for matching.
    */
-  guidesStatic: Guide[];
+  guidesStatic: ComponentGuide[];
   /**
    * The origin component guide.
    */
-  guide: Guide;
+  guide: ComponentGuide;
   /**
    * The matched component guide.
    */
-  matched: Guide;
+  matched: ComponentGuide;
   /**
    * The primary position of the guide (either x or y depending on the axis).
    */
@@ -754,7 +754,7 @@ type GuideMatched = {
    * The container element for the guide info (text content of the line).
    */
   elGuideInfoCnt: HTMLElement;
-};
+}
 
 type ComponentRect = { left: number; width: number; top: number; height: number };
 type ComponentOrigRect = ComponentRect & { rect: ComponentRect };