Add move to delegate

src/commands/index.ts

@@ -46,7 +46,7 @@ import { isFunction, includes } from 'underscore';
 import CommandAbstract, { Command, CommandOptions, CommandObject, CommandFunction } from './view/CommandAbstract';
 import defaults, { CommandsConfig } from './config/config';
 import { Module } from '../abstract';
-import { eventDrag } from '../dom_components/model/Component';
+import Component, { eventDrag } from '../dom_components/model/Component';
 import Editor from '../editor/model/Editor';
 import { ObjectAny } from '../common';
 
@@ -118,39 +118,36 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
     };
 
     defaultCommands['tlb-move'] = {
-      run(ed, sender, opts = {}) {
+      run(ed, s, opts = {}) {
         let dragger;
         const em = ed.getModel();
-        const event = opts && opts.event;
-        const { target } = opts;
-        const sel = target || ed.getSelected();
-        const selAll = target ? [target] : [...ed.getSelectedAll()];
-        const nativeDrag = event && event.type == 'dragstart';
+        const { event } = opts;
+        const trg = opts.target as Component | undefined;
+        const trgs = trg ? [trg] : [...ed.getSelectedAll()];
+        const targets = trgs.map(trg => trg.delegate?.move?.(trg) || trg).filter(Boolean);
+        const target = targets[0] as Component | undefined;
+        const nativeDrag = event?.type === 'dragstart';
         const defComOptions = { preserveSelected: 1 };
         const modes = ['absolute', 'translate'];
 
-        if (!sel || !sel.get('draggable')) {
+        if (!target?.get('draggable')) {
           return em.logWarning('The element is not draggable');
         }
 
-        const mode = sel.get('dmode') || em.get('dmode');
+        const mode = target.get('dmode') || em.get('dmode');
         const hideTlb = () => em.stopDefault(defComOptions);
         const altMode = includes(modes, mode);
-        selAll.forEach(sel => sel.trigger('disable'));
+        targets.forEach(trg => trg.trigger('disable'));
 
         // Without setTimeout the ghost image disappears
         nativeDrag ? setTimeout(hideTlb, 0) : hideTlb();
 
-        const onStart = (data: any) => {
-          em.trigger(`${eventDrag}:start`, data);
-        };
-        const onDrag = (data: any) => {
-          em.trigger(eventDrag, data);
-        };
+        const onStart = (data: any) => em.trigger(`${eventDrag}:start`, data);
+        const onDrag = (data: any) => em.trigger(eventDrag, data);
         const onEnd = (e: any, opts: any, data: any) => {
-          selAll.forEach(sel => sel.set('status', 'selected'));
-          ed.select(selAll);
-          sel.emitUpdate();
+          targets.forEach(trg => trg.set('status', 'selected'));
+          ed.select(targets);
+          target.emitUpdate();
           em.trigger(`${eventDrag}:end`, data);
 
           // Defer selectComponent in order to prevent canvas "freeze" #2692
@@ -165,7 +162,7 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
           dragger = ed.runCommand('core:component-drag', {
             guidesInfo: 1,
             mode,
-            target: sel,
+            target,
             onStart,
             onDrag,
             onEnd,
@@ -173,7 +170,7 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
           });
         } else {
           if (nativeDrag) {
-            event.dataTransfer.setDragImage(sel.view.el, 0, 0);
+            event.dataTransfer.setDragImage(target.view?.el, 0, 0);
             //sel.set('status', 'freezed');
           }
 
@@ -182,10 +179,10 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
           cmdMove.onDrag = onDrag;
           cmdMove.onEndMoveFromModel = onEnd;
           // @ts-ignore
-          cmdMove.initSorterFromModels(selAll);
+          cmdMove.initSorterFromModels(targets);
         }
 
-        selAll.forEach(sel => sel.set('status', 'freezed-selected'));
+        targets.forEach(sel => sel.set('status', 'freezed-selected'));
       },
     };
 

src/dom_components/model/types.ts

@@ -16,6 +16,7 @@ export type DraggableDroppableFn = (source: Component, target: Component, index?
 
 export interface ComponentDelegateProps {
   remove?: (cmp: Component) => Component | Nullable;
+  move?: (cmp: Component) => Component | Nullable;
 }
 
 export interface ComponentProperties {
@@ -177,6 +178,7 @@ export interface ComponentProperties {
    * Delegate actions to other components.
    */
   delegate?: ComponentDelegateProps;
+
   ///**
   // * Children components. Default: `null`
   // */