From 9a90baa3efd0dcbfa369321f7a9ec0c2dedd18ae Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 18 Nov 2023 15:53:48 +0400 Subject: [PATCH] Refactor items move --- src/commands/index.ts | 41 ++++++++++++++++++++------------- src/navigator/view/ItemView.ts | 14 +++++++---- src/navigator/view/ItemsView.ts | 7 +----- src/utils/Sorter.ts | 4 ---- 4 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/commands/index.ts b/src/commands/index.ts index 1f723c3de..58fbbda5c 100644 --- a/src/commands/index.ts +++ b/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 { CommandAbstract = CommandAbstract; defaultCommands: Record = {}; @@ -127,7 +148,6 @@ export default class CommandsModule extends Module 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 em.trigger(`${eventDrag}:start`, data); - const onDrag = (data: any) => em.trigger(eventDrag, data); - const onEnd = (e: any, opts: any, data: any) => { - 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); - }; + const onStart = getOnComponentDragStart(em); + const onDrag = getOnComponentDrag(em); + const onEnd = getOnComponentDragEnd(em, targets, { altMode }); if (altMode) { // TODO move grabbing func in editor/canvas from the Sorter @@ -182,7 +191,7 @@ export default class CommandsModule extends Module sel.set('status', 'freezed-selected')); + targets.filter(sel => sel.get('selectable')).forEach(sel => sel.set('status', 'freezed-selected')); }, }; diff --git a/src/navigator/view/ItemView.ts b/src/navigator/view/ItemView.ts index 9e6240e17..625b58718 100644 --- a/src/navigator/view/ItemView.ts +++ b/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); - sorter.onMoveClb = (data: any) => em.trigger(eventDrag, data); - sorter.startSort(ev.target); + const toMove = model.delegate?.move?.(model) || model; + sorter.onStart = getOnComponentDragStart(em); + sorter.onMoveClb = getOnComponentDrag(em); + sorter.onEndMove = getOnComponentDragEnd(em, [toMove]); + const itemEl = (toMove as any).viewLayer?.el || ev.target; + sorter.startSort(itemEl); } } diff --git a/src/navigator/view/ItemsView.ts b/src/navigator/view/ItemsView.ts index fdca2cf4a..a2ca13a41 100644 --- a/src/navigator/view/ItemsView.ts +++ b/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, diff --git a/src/utils/Sorter.ts b/src/utils/Sorter.ts index 9b7833c87..8939f0994 100644 --- a/src/utils/Sorter.ts +++ b/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) {