Undo dragger action on esc press

src/commands/view/ComponentDrag.js

@@ -177,7 +177,6 @@ module.exports = {
     const { Canvas } = this.editor;
     const { topScroll, top } = Canvas.getRect();
     const frameTop = Canvas.getCanvasView().getFrameOffset().top;
-    // const elRect = this.getGuidePosUpdate(item, el.getBoundingClientRect());
     const un = 'px';
     const guideSize = item.active ? 2 : 1;
     let numEl = el.children[0];
@@ -197,14 +196,11 @@ module.exports = {
       el.style.height = `${guideSize}${un}`;
       el.style.top = `${item.y}${un}`;
       el.style.left = 0;
-      // numEl.innerHTML = elRect.y;
     } else {
       el.style.width = `${guideSize}${un}`;
       el.style.height = '100%';
       el.style.left = `${item.x}${un}`;
       el.style.top = `${topScroll - frameTop + top}${un}`;
-      // numEl.innerHTML = elRect.x;
-      // numEl.innerHTML = el.style.left;
     }
 
     !item.guide && this.guidesContainer.appendChild(el);
@@ -335,10 +331,10 @@ module.exports = {
       this.renderGuideInfo(guidesTarget.filter(item => item.active));
   },
 
-  onEnd() {
+  onEnd(...args) {
     const { editor, opts, id } = this;
     const { onEnd } = opts;
-    onEnd && onEnd({});
+    onEnd && onEnd(...args);
     editor.stopCommand(id);
     this.hideGuidesInfo();
   },

src/utils/Dragger.js

@@ -1,5 +1,5 @@
 import { bindAll, isFunction, result, isUndefined } from 'underscore';
-import { on, off } from 'utils/mixins';
+import { on, off, isEscKey } from 'utils/mixins';
 
 export default class Dragger {
   /**
@@ -57,7 +57,7 @@ export default class Dragger {
       // Scale result points, can also be a function
       scale: 1
     };
-    bindAll(this, 'drag', 'stop');
+    bindAll(this, 'drag', 'stop', 'cancel');
     this.setOptions(opts);
     this.delta = { x: 0, y: 0 };
     return this;
@@ -80,6 +80,7 @@ export default class Dragger {
     const methods = { on, off };
     methods[method](docs, 'mousemove dragover', this.drag);
     methods[method](docs, 'mouseup dragend touchend', this.stop);
+    methods[method](docs, 'keydown', this.cancel);
   }
 
   /**
@@ -227,13 +228,22 @@ export default class Dragger {
   /**
    * Stop dragging
    */
-  stop(ev) {
+  stop(ev, opts = {}) {
     const { delta } = this;
+    const cancelled = opts.cancel;
+    const x = cancelled ? 0 : delta.x;
+    const y = cancelled ? 0 : delta.y;
     this.toggleDrag();
     this.lockedAxis = null;
-    this.move(delta.x, delta.y, 1);
+    this.move(x, y, 1);
     const { onEnd } = this.opts;
-    isFunction(onEnd) && onEnd(ev, this);
+    isFunction(onEnd) && onEnd(ev, this, { cancelled });
+  }
+
+  cancel(ev) {
+    if (isEscKey(ev)) {
+      this.stop(ev, { cancel: 1 });
+    }
   }
 
   /**

src/utils/Droppable.js

@@ -68,13 +68,24 @@ export default class Droppable {
 
     if (em.inAbsoluteMode()) {
       const wrapper = em.get('DomComponents').getWrapper();
-      const target = wrapper.append(content)[0];
+      const target = wrapper.append({
+        style: { width: '30px', height: '30px', background: 'red' }
+      })[0];
+
       em.get('Commands').run('core:component-drag', {
         guidesInfo: 1,
         center: 1,
         target,
-        onCancel: () => target.remove(),
-        onEnd: ({ cancelled }) => em.setSelected(target),
+        onEnd: (ev, dragger, { cancelled }) => {
+          if (!cancelled) {
+            const comp = wrapper.append(content)[0];
+            const { left, top, position } = target.getStyle();
+            comp.setStyle({ left, top, position });
+            em.setSelected(comp);
+          }
+
+          target.remove();
+        },
         event: ev
       });
     } else {

src/utils/mixins.js

@@ -179,6 +179,7 @@ const getPointerEvent = ev =>
  */
 const getKeyCode = ev => ev.which || ev.keyCode;
 const getKeyChar = ev => String.fromCharCode(getKeyCode(ev));
+const isEscKey = ev => getKeyCode(ev) === 27;
 
 const capitalize = str => str.charAt(0).toUpperCase() + str.substring(1);
 
@@ -194,6 +195,7 @@ export {
   isTextNode,
   getKeyCode,
   getKeyChar,
+  isEscKey,
   getElement,
   shallowDiff,
   normalizeFloat,