Adjust the sorter with the scale

src/canvas/index.js

@@ -290,6 +290,16 @@ module.exports = () => {
       return CanvasView.getElementPos(el, opts);
     },
 
+    /**
+     * Returns element's offsets like margins and paddings
+     * @param {HTMLElement} el
+     * @return {Object}
+     * @private
+     */
+    getElementOffsets(el) {
+      return CanvasView.getElementOffsets(el);
+    },
+
     /**
      * This method comes handy when you need to attach something like toolbars
      * to elements inside the canvas, dealing with all relative position,
@@ -380,22 +390,17 @@ module.exports = () => {
 
     /**
      * X and Y mouse position relative to the canvas
-     * @param {Event} e
+     * @param {Event} ev
      * @return {Object}
      * @private
      */
-    getMouseRelativeCanvas(e, options) {
-      var opts = options || {};
-      var frame = this.getFrameEl();
-      var body = this.getBody();
-      var addTop = frame.offsetTop || 0;
-      var addLeft = frame.offsetLeft || 0;
-      var yOffset = body.scrollTop || 0;
-      var xOffset = body.scrollLeft || 0;
+    getMouseRelativeCanvas(ev) {
+      const zoom = this.em.getZoomDecimal();
+      const { top, left } = CanvasView.getPosition();
 
       return {
-        y: e.clientY + addTop + yOffset,
-        x: e.clientX + addLeft + xOffset
+        y: ev.clientY * zoom + top,
+        x: ev.clientX * zoom + left
       };
     },
 

src/canvas/view/CanvasView.js

@@ -308,6 +308,31 @@ module.exports = Backbone.View.extend({
     return { top, left, height, width };
   },
 
+  /**
+   * Returns element's offsets like margins and paddings
+   * @param {HTMLElement} el
+   * @return {Object}
+   * @private
+   */
+  getElementOffsets(el) {
+    const result = {};
+    const styles = window.getComputedStyle(el);
+    [
+      'marginTop',
+      'marginRight',
+      'marginBottom',
+      'marginLeft',
+      'paddingTop',
+      'paddingRight',
+      'paddingBottom',
+      'paddingLeft'
+    ].forEach(offset => {
+      result[offset] = parseFloat(styles[offset]) * this.getZoom();
+    });
+
+    return result;
+  },
+
   /**
    * Returns position data of the canvas element
    * @return {Object} obj Position object
@@ -320,6 +345,7 @@ module.exports = Backbone.View.extend({
     const zoom = this.getZoom();
     const fo = this.getFrameOffset();
     const co = this.getCanvasOffset();
+
     return {
       top: fo.top + bEl.scrollTop * zoom - co.top,
       left: fo.left + bEl.scrollLeft * zoom - co.left

src/commands/view/SelectPosition.js

@@ -22,7 +22,8 @@ module.exports = {
         wmargin: 1,
         nested: 1,
         em: this.editorModel,
-        canvasRelative: 1
+        canvasRelative: 1,
+        scale: () => this.em.getZoomDecimal()
       });
     trg && this.sorter.startSort(trg);
   },
@@ -63,8 +64,8 @@ module.exports = {
         this.cDim.length === 0
           ? $(this.outsideElem)
           : !this.posIsLastEl && this.cDim[this.posIndex]
-            ? $(this.cDim[this.posIndex][5]).parent()
-            : $(this.outsideElem);
+          ? $(this.cDim[this.posIndex][5]).parent()
+          : $(this.outsideElem);
       this.posTargetModel = this.posTargetEl.data('model');
       this.posTargetCollection = this.posTargetEl.data('model-comp');
     }

src/utils/Sorter.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import { isString, isFunction, isArray } from 'underscore';
+import { isString, isFunction, isArray, result } from 'underscore';
 import { on, off, matches, getElement } from 'utils/mixins';
 const $ = Backbone.$;
 
@@ -50,6 +50,7 @@ module.exports = Backbone.View.extend({
     this.dragHelper = null;
     this.canvasRelative = o.canvasRelative || 0;
     this.selectOnEnd = !o.avoidSelectOnEnd;
+    this.scale = o.scale;
 
     if (this.em && this.em.on) {
       this.em.on('change:canvasOffset', this.udpateOffset);
@@ -57,6 +58,10 @@ module.exports = Backbone.View.extend({
     }
   },
 
+  getScale() {
+    return result(this, scale) || 1;
+  },
+
   getContainerEl() {
     if (!this.el) {
       var el = this.opt.container;
@@ -702,19 +707,17 @@ module.exports = Backbone.View.extend({
    * @return {Array<number>}
    */
   getDim(el) {
+    const { em, canvasRelative } = this;
     var top, left, height, width;
 
-    if (this.canvasRelative && this.em) {
-      var pos = this.em.get('Canvas').getElementPos(el);
-      var styles = window.getComputedStyle(el);
-      var marginTop = parseFloat(styles['marginTop']);
-      var marginBottom = parseFloat(styles['marginBottom']);
-      var marginRight = parseFloat(styles['marginRight']);
-      var marginLeft = parseFloat(styles['marginLeft']);
-      top = pos.top - marginTop;
-      left = pos.left - marginLeft;
-      height = pos.height + marginTop + marginBottom;
-      width = pos.width + marginLeft + marginRight;
+    if (canvasRelative && em) {
+      const canvas = em.get('Canvas');
+      const pos = canvas.getElementPos(el);
+      const elOffsets = canvas.getElementOffsets(el);
+      top = pos.top - elOffsets.marginTop;
+      left = pos.left - elOffsets.marginLeft;
+      height = pos.height + elOffsets.marginTop + elOffsets.marginBottom;
+      width = pos.width + elOffsets.marginLeft + elOffsets.marginRight;
     } else {
       var o = this.offset(el);
       top = this.relative