Refactor items move

src/commands/index.ts

@@ -79,6 +79,27 @@ const commandsDef = [
   ['component-drag', 'ComponentDrag'],
 ];
 
+const defComOptions = { preserveSelected: 1 };
+
+export const getOnComponentDragStart = (em: Editor) => (data: any) => em.trigger(`${eventDrag}:start`, data);
+
+export const getOnComponentDrag = (em: Editor) => (data: any) => em.trigger(eventDrag, data);
+
+export const getOnComponentDragEnd =
+  (em: Editor, targets: Component[], opts: { altMode?: boolean } = {}) =>
+  (a: any, b: any, data: any) => {
+    targets.forEach(trg => trg.set('status', trg.get('selectable') ? 'selected' : ''));
+    em.setSelected(targets);
+    targets[0].emitUpdate();
+    em.trigger(`${eventDrag}:end`, data);
+
+    // Defer selectComponent in order to prevent canvas "freeze" #2692
+    setTimeout(() => em.runDefault(defComOptions));
+
+    // Dirty patch to prevent parent selection on drop
+    (opts.altMode || data.cancelled) && em.set('_cmpDrag', 1);
+  };
+
 export default class CommandsModule extends Module<CommandsConfig & { pStylePrefix?: string }> {
   CommandAbstract = CommandAbstract;
   defaultCommands: Record<string, Command> = {};
@@ -127,7 +148,6 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
         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 (!target?.get('draggable')) {
@@ -142,20 +162,9 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
         // Without setTimeout the ghost image disappears
         nativeDrag ? setTimeout(hideTlb, 0) : hideTlb();
 
-        const onStart = (data: any) => em.trigger(`${eventDrag}:start`, data);
+        const onStart = getOnComponentDragStart(em);
-        const onDrag = (data: any) => em.trigger(eventDrag, data);
+        const onDrag = getOnComponentDrag(em);
-        const onEnd = (e: any, opts: any, data: any) => {
+        const onEnd = getOnComponentDragEnd(em, targets, { altMode });
-          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
-          setTimeout(() => em.runDefault(defComOptions));
-
-          // Dirty patch to prevent parent selection on drop
-          (altMode || data.cancelled) && em.set('_cmpDrag', 1);
-        };
 
         if (altMode) {
           // TODO move grabbing func in editor/canvas from the Sorter
@@ -182,7 +191,7 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
           cmdMove.initSorterFromModels(targets);
         }
 
-        targets.forEach(sel => sel.set('status', 'freezed-selected'));
+        targets.filter(sel => sel.get('selectable')).forEach(sel => sel.set('status', 'freezed-selected'));
       },
     };
 

src/navigator/view/ItemView.ts

@@ -1,12 +1,13 @@
 import { bindAll, isString } from 'underscore';
 import { View, ViewOptions } from '../../common';
-import Component, { eventDrag } from '../../dom_components/model/Component';
+import Component from '../../dom_components/model/Component';
 import ComponentView from '../../dom_components/view/ComponentView';
 import EditorModel from '../../editor/model/Editor';
 import { isEnterKey, isEscKey } from '../../utils/dom';
 import { getModel } from '../../utils/mixins';
 import LayerManager from '../index';
 import ItemsView from './ItemsView';
+import { getOnComponentDrag, getOnComponentDragEnd, getOnComponentDragStart } from '../../commands';
 
 export type ItemViewProps = ViewOptions & {
   ItemView: ItemView;
@@ -317,14 +318,17 @@ export default class ItemView extends View {
    * */
   startSort(ev: MouseEvent) {
     ev.stopPropagation();
-    const { em, sorter } = this;
+    const { em, sorter, model } = this;
     // Right or middel click
     if (ev.button && ev.button !== 0) return;
 
     if (sorter) {
-      sorter.onStart = (data: any) => em.trigger(`${eventDrag}:start`, data);
+      const toMove = model.delegate?.move?.(model) || model;
-      sorter.onMoveClb = (data: any) => em.trigger(eventDrag, data);
+      sorter.onStart = getOnComponentDragStart(em);
-      sorter.startSort(ev.target);
+      sorter.onMoveClb = getOnComponentDrag(em);
+      sorter.onEndMove = getOnComponentDragEnd(em, [toMove]);
+      const itemEl = (toMove as any).viewLayer?.el || ev.target;
+      sorter.startSort(itemEl);
     }
   }
 

src/navigator/view/ItemsView.ts

@@ -1,5 +1,5 @@
 import { View } from '../../common';
-import Component, { eventDrag } from '../../dom_components/model/Component';
+import Component from '../../dom_components/model/Component';
 import EditorModel from '../../editor/model/Editor';
 import ItemView from './ItemView';
 
@@ -33,11 +33,6 @@ export default class ItemsView extends View {
         containerSel: `.${this.className}`,
         itemSel: `.${pfx}layer`,
         ignoreViewChildren: 1,
-        onEndMove(created: any, sorter: any, data: any) {
-          const srcModel = sorter.getSourceModel();
-          em.setSelected(srcModel, { forceChange: 1 });
-          em.trigger(`${eventDrag}:end`, data);
-        },
         avoidSelectOnEnd: 1,
         nested: 1,
         ppfx,

src/utils/Sorter.ts

@@ -1160,10 +1160,6 @@ export default class Sorter extends View {
 
     if (src) {
       srcModel = this.getSourceModel();
-      if (this.selectOnEnd && srcModel && srcModel.set) {
-        srcModel.set('status', '');
-        srcModel.set('status', 'selected');
-      }
     }
 
     if (this.moved && target) {