From 2a69b8831c293bcab45269951e3344724b802457 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 24 Jan 2019 00:31:07 +0100 Subject: [PATCH] Adjust the sorter with the scale --- src/canvas/index.js | 27 ++++++++++++++++----------- src/canvas/view/CanvasView.js | 26 ++++++++++++++++++++++++++ src/commands/view/SelectPosition.js | 7 ++++--- src/utils/Sorter.js | 27 +++++++++++++++------------ 4 files changed, 61 insertions(+), 26 deletions(-) diff --git a/src/canvas/index.js b/src/canvas/index.js index a035c53f9..4fa9f6017 100644 --- a/src/canvas/index.js +++ b/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 }; }, diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index b79ec14fe..1e8f545a8 100644 --- a/src/canvas/view/CanvasView.js +++ b/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 diff --git a/src/commands/view/SelectPosition.js b/src/commands/view/SelectPosition.js index c4b0d31ce..7cd9d6c1c 100644 --- a/src/commands/view/SelectPosition.js +++ b/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'); } diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index d89514d96..9392749cd 100644 --- a/src/utils/Sorter.js +++ b/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} */ 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