feat: enhance ComponentDrag with customizable style options and improved drag handling

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

@@ -1,8 +1,10 @@
+import type Component from '../../dom_components/model/Component';
+import type EditorModel from '../../editor/model/Editor';
 import type { CommandObject, CommandOptions } from '../view/CommandAbstract';
 
 interface CommandConfigDefaultOptions {
-  run: (options: CommandOptions) => CommandOptions;
+  run?: (options: CommandOptions) => CommandOptions;
-  stop: (options: CommandOptions) => CommandOptions;
+  stop?: (options: CommandOptions) => CommandOptions;
 }
 
 export interface CommandsConfig {
@@ -35,11 +37,15 @@ export interface CommandsConfig {
    *  'core:component-drag': {
    *    run: (options: Record<string, unknown>) => ({
    *      ...options,
-   *      addStyle: () => {},
+   *      addStyle: ({ target }: { target: Component }) => {
+   *        target.addStyle({ opacity: 0.5 });
+   *      },
    *     }),
    *    stop: (options: Record<string, unknown>) => ({
    *      ...options,
-   *      addStyle: () => {},
+   *      addStyle: ({ target }: { target: Component }) => {
+   *        target.addStyle({ opacity: 1 });
+   *      },
    *    }),
    *  }
    * }
@@ -55,11 +61,15 @@ const config: () => CommandsConfig = () => ({
     'core:component-drag': {
       run: (options: CommandOptions) => ({
         ...options,
-        addStyle: () => {},
+        addStyle: ({ target, em }: { target: Component; em: EditorModel }) => {
-      }),
+          target.addStyle({ opacity: 0.5 });
-      stop: (options: CommandOptions) => ({
+
-        ...options,
+          // TODO: is this the best way to do this?
-        addStyle: () => {},
+          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';
+        },
       }),
     },
   },

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

@@ -32,7 +32,7 @@ type Opts = {
   onStart?: (data: any) => Editor;
   onDrag?: (data: any) => Editor;
   onEnd?: (ev: Event, opt: any, data: any) => void;
-  addStyle?: () => void;
+  addStyle?: ({ target, em }: { target: Component; em: EditorModel }) => void;
 };
 
 const evName = 'dmode';
@@ -74,6 +74,7 @@ export default {
     this.guidesTarget = this.getGuidesTarget();
     this.guidesStatic = this.getGuidesStatic();
     let drg = this.dragger;
+    this.opts?.addStyle?.({ target: this.target, em: this.em });
 
     if (!drg) {
       drg = new Dragger(config);
@@ -326,8 +327,7 @@ export default {
       styleUp = style;
     }
 
-    // TODO: check this
+    target.addStyle(styleUp, { avoidStore: !end });
-    this.opts?.addStyle?.() ?? target.addStyle(styleUp, { avoidStore: !end });
     em?.Styles.__emitCmpStyleUpdate(styleUp, { components: em.getSelected() });
   },
 
@@ -414,9 +414,9 @@ export default {
     opts?.onEnd?.(ev, opt, { event: ev, ...opt, ...this._getDragData() });
     editor.stopCommand(id);
     this.hideGuidesInfo();
-    this.em.trigger(`${evName}:end`, this.getEventOpts());
 
-    this.editor.trigger(`${evName}:drag:end`, undefined);
+    this.em.trigger(`${evName}:end`, this.getEventOpts());
+    this.em.trigger(`${evName}:drag:end`, undefined);
     this.em.Canvas.removeSpots({
       type: CanvasSpotBuiltInTypes.Drag,
       component: this.target,