diff --git a/src/commands/index.ts b/src/commands/index.ts index 7db7adfdc..1f723c3de 100644 --- a/src/commands/index.ts +++ b/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 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 sel.set('status', 'freezed-selected')); + targets.forEach(sel => sel.set('status', 'freezed-selected')); }, }; diff --git a/src/dom_components/model/types.ts b/src/dom_components/model/types.ts index 195c7dd20..89bb4a7fb 100644 --- a/src/dom_components/model/types.ts +++ b/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` // */