feat: enhance drag event handling with structured event properties and cleanup unused code

packages/core/src/commands/config/config.ts

@@ -61,21 +61,13 @@ const config: () => CommandsConfig = () => ({
     'core:component-drag': {
       run: (options: CommandOptions) => ({
         ...options,
-        addStyle: () => {
-          return {
-            showPercentages: true,
-          };
-          // target.addStyle({ opacity: 0.5 });
-          // // TODO: is this the best way to do this?
-          // const lineElement = em.view?.el.querySelector('.gjs-guide-info__line') as HTMLElement | null;
-          // if (lineElement) lineElement.style.backgroundColor = 'green';
-          // const contentElement = em.view?.el.querySelector('.gjs-guide-info__content') as HTMLElement | null;
-          // if (contentElement) contentElement.style.color = 'green';
-          // return {
-          //   guideInfoLine: { backgroundColor: 'green' },
-          //   guideInfoContent: { color: 'green' },
-          // };
+        customElements: {
+          guideIndicator: false,
         },
+        // addStyle: ({ componentView, matchedEl }) => {
+        //   // TODO: test if you can conver to percentage
+        //   // componentView.setStyle({ opacity: 0.5 });
+        // },
       }),
     },
   },

packages/core/src/commands/index.ts

@@ -388,6 +388,7 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
       const id = command.id as string;
       const editor = em.Editor;
 
+      // TODO: add test
       if (!this.isActive(id) || options.force || !config.strict) {
         const defaultOptionsRunFn = config.defaultOptions?.[id]?.run;
         isFunction(defaultOptionsRunFn) && (options = defaultOptionsRunFn(options));

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

@@ -4,7 +4,6 @@ import type { CommandObject } from './CommandAbstract';
 import type Editor from '../../editor';
 import type Component from '../../dom_components/model/Component';
 import type EditorModel from '../../editor/model/Editor';
-import { CanvasSpotBuiltInTypes } from '../../canvas/model/CanvasSpot';
 
 type Rect = { left: number; width: number; top: number; height: number };
 type OrigRect = { left: number; width: number; top: number; height: number; rect: Rect };
@@ -35,6 +34,17 @@ type Opts = {
   addStyle?: () => Record<string, unknown>;
 };
 
+// TODO: should we export this type? and if so, we should create 1 type for every event?
+export type DragEventProps = {
+  coords?: { x: number; y: number };
+  matchedEl?: Component;
+  lastMatchedEl?: Component;
+  elGuideInfo?: HTMLElement;
+  elGuideInfoCnt?: HTMLElement;
+  size?: number;
+  sizePercent?: number;
+};
+
 const evName = 'dmode';
 
 export default {
@@ -73,6 +83,7 @@ export default {
     this.guidesContainer = this.getGuidesContainer();
     this.guidesTarget = this.getGuidesTarget();
     this.guidesStatic = this.getGuidesStatic();
+    this.lastMatchedEl = null;
     let drg = this.dragger;
 
     if (!drg) {
@@ -380,20 +391,13 @@ export default {
       });
     }
 
-    this.editor.trigger(`${evName}:drag:start`, {
-      coords: { x: 0, y: 0 }, // TODO: pass the real coords
-      targetEl: event.target,
-    });
+    const dragStartProps: DragEventProps = { matchedEl: target };
 
-    this.em.Canvas.addSpot({
-      type: CanvasSpotBuiltInTypes.Drag,
-      component: target,
-      componentView: target.view,
-    });
+    this.editor.trigger(`${evName}:drag:start`, dragStartProps);
   },
 
   onDrag(mouseEvent: MouseEvent, _dragger: Dragger) {
-    const { guidesTarget, opts } = this;
+    const { guidesTarget, lastMatchedEl, opts } = this;
     let guideNearElements = [];
 
     this.updateGuides(guidesTarget);
@@ -404,37 +408,37 @@ export default {
     const { x, y } = mouseEvent;
     const guideNearElement = guideNearElements[0] ?? {};
     const { size, sizePercent, matched, elGuideInfo, elGuideInfoCnt } = guideNearElement;
-    const matchedEl = matched?.origin;
-    // TODO: revisit event props
-    this.editor.trigger(`${evName}:drag:move`, {
+    let matchedEl = undefined;
+
+    if (matched?.origin) {
+      matchedEl = matched.origin;
+      if (matchedEl !== lastMatchedEl) this.lastMatchedEl = matchedEl;
+    }
+
+    const dragMoveProps: DragEventProps = {
       coords: { x, y },
       matchedEl,
+      lastMatchedEl,
       elGuideInfo,
       elGuideInfoCnt,
       size,
       sizePercent,
-    });
+    };
 
-    // TODO: add the spot to the canvas to show the origin?
-    // if (matchedEl) {
-    //  this.em.Canvas.addSpot({
-    //    type: CanvasSpotBuiltInTypes.Drag,
-    //  });
-    // }
+    this.editor.trigger(`${evName}:drag:move`, dragMoveProps);
   },
 
   onEnd(ev: Event, _dragger: Dragger, opt = {}) {
-    const { editor, opts, id } = this;
+    const { editor, opts, id, lastMatchedEl } = this;
     opts?.onEnd?.(ev, opt, { event: ev, ...opt, ...this._getDragData() });
     editor.stopCommand(id);
     this.hideGuidesInfo();
 
     this.em.trigger(`${evName}:end`, this.getEventOpts());
-    this.em.trigger(`${evName}:drag:end`, undefined);
-    this.em.Canvas.removeSpots({
-      type: CanvasSpotBuiltInTypes.Drag,
-      component: this.target,
-    });
+
+    const dragEndProps: DragEventProps = { lastMatchedEl };
+
+    this.em.trigger(`${evName}:drag:end`, dragEndProps);
   },
 
   hideGuidesInfo() {