diff --git a/src/commands/view/ComponentDrag.js b/src/commands/view/ComponentDrag.js index 91341bccf..f7384eb3c 100644 --- a/src/commands/view/ComponentDrag.js +++ b/src/commands/view/ComponentDrag.js @@ -420,8 +420,8 @@ module.exports = { const { ppfx, editor } = this; const methodCls = on ? 'add' : 'remove'; const canvas = this.getCanvas(); - const classes = [`${ppfx}is__grabbing`]; - classes.forEach(cls => canvas.classList[methodCls](cls)); + // const classes = [`${ppfx}is__grabbing`]; + // classes.forEach(cls => canvas.classList[methodCls](cls)); editor.Canvas[on ? 'startAutoscroll' : 'stopAutoscroll'](); } }; diff --git a/src/utils/Dragger.js b/src/utils/Dragger.js index 00a6a873b..5878013d3 100644 --- a/src/utils/Dragger.js +++ b/src/utils/Dragger.js @@ -61,7 +61,7 @@ export default class Dragger { // Scale result points, can also be a function scale: 1 }; - bindAll(this, 'drag', 'stop', 'cancel'); + bindAll(this, 'drag', 'stop', 'keyHandle'); this.setOptions(opts); this.delta = { x: 0, y: 0 }; return this; @@ -85,7 +85,7 @@ export default class Dragger { const methods = { on, off }; methods[method](container, 'mousemove dragover', this.drag); methods[method](docs, 'mouseup dragend touchend', this.stop); - methods[method](docs, 'keydown', this.cancel); + methods[method](docs, 'keydown', this.keyHandle); } /** @@ -245,7 +245,7 @@ export default class Dragger { isFunction(onEnd) && onEnd(ev, this, { cancelled }); } - cancel(ev) { + keyHandle(ev) { if (isEscKey(ev)) { this.stop(ev, { cancel: 1 }); } diff --git a/src/utils/Droppable.js b/src/utils/Droppable.js index e2e77063b..6ac325878 100644 --- a/src/utils/Droppable.js +++ b/src/utils/Droppable.js @@ -30,17 +30,10 @@ export default class Droppable { } endDrop(cancel, ev) { - const em = this.em; + const { em, dragStop } = this; this.counter = 0; this.over = 0; - // force out like in BlockView - const { sorter } = this; - - if (sorter) { - cancel && (sorter.moved = 0); - sorter.endMove(); - } - + dragStop && dragStop(cancel); em.runDefault(); em.trigger('canvas:dragend', ev); } @@ -68,11 +61,12 @@ export default class Droppable { const content = em.get('dragContent') || '
'; const container = canvas.getBody(); em.stopDefault(); + let dragStop; if (em.inAbsoluteMode()) { const wrapper = em.get('DomComponents').getWrapper(); const target = wrapper.append({})[0]; - em.get('Commands').run('core:component-drag', { + const dragger = em.get('Commands').run('core:component-drag', { event: ev, guidesInfo: 1, center: 1, @@ -87,8 +81,9 @@ export default class Droppable { target.remove(); } }); + dragStop = cancel => dragger.stop(ev, { cancel }); } else { - this.sorter = new utils.Sorter({ + const sorter = new utils.Sorter({ em, wmargin: 1, nested: 1, @@ -102,10 +97,16 @@ export default class Droppable { onEndMove: model => this.handleDragEnd(model, dt), document: canvas.getFrameEl().contentDocument }); - this.sorter.setDropContent(content); - this.sorter.startSort(); + sorter.setDropContent(content); + sorter.startSort(); + this.sorter = sorter; + dragStop = cancel => { + cancel && (sorter.moved = 0); + sorter.endMove(); + }; } + this.dragStop = dragStop; em.trigger('canvas:dragenter', dt, content); }