From 6a78c09724b77917030bb10cf484a6e9ed9e1f05 Mon Sep 17 00:00:00 2001 From: Michal Tomaszewski Date: Fri, 17 Nov 2017 07:48:54 -0800 Subject: [PATCH 1/2] Fix block component drag position issue --- src/utils/Sorter.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 8df3ffad6..98bcb0172 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -143,7 +143,6 @@ module.exports = Backbone.View.extend({ }, /** - * //TODO Refactor, use canvas.getMouseRelativePos to get mouse's X and Y * Update the position of the helper * @param {Event} e */ @@ -154,18 +153,26 @@ module.exports = Backbone.View.extend({ return; } - var win = doc.defaultView || doc.parentWindow; var addTop = 0; var addLeft = 0; - var frame = win.frameElement; + var window = doc.defaultView || doc.parentWindow; + var frame = window.frameElement; + var dragHelperStyle = this.dragHelper.style; + + // If frame is present that means mouse has moved over the editor's canvas, + // which is rendered inside the iframe and the mouse move event comes from + // the iframe, not the parent window. Mouse position relative to the frame's + // parent window needs to account for the frame's position relative to the + // parent window. if(frame) { - var frameRect = frame.getBoundingClientRect(); // maybe to cache ?!? - addTop = frameRect.top || 0; - addLeft = frameRect.left || 0; - } - var hStyle = this.dragHelper.style; - hStyle.left = (e.pageX - win.pageXOffset + addLeft) + 'px'; - hStyle.top = (e.pageY - win.pageYOffset + addTop) + 'px'; + // TODO: Cache ?!? + var frameRect = frame.getBoundingClientRect(); + var ownerDocBodyRect = frame.ownerDocument.body.getBoundingClientRect(); + addTop = frameRect.top - ownerDocBodyRect.top; + addLeft = frameRect.left - ownerDocBodyRect.left; + } + dragHelperStyle.top = (e.pageY + addTop) + 'px'; + dragHelperStyle.left = (e.pageX + addLeft) + 'px'; }, From f3cdf351b76a5a6b3f6f35c5d265392e76a0882b Mon Sep 17 00:00:00 2001 From: Michal Tomaszewski Date: Tue, 21 Nov 2017 08:45:38 -0800 Subject: [PATCH 2/2] Block component drag helper position - account for scroll in the editor canvas --- src/utils/Sorter.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 98bcb0172..b6608dcca 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -168,8 +168,8 @@ module.exports = Backbone.View.extend({ // TODO: Cache ?!? var frameRect = frame.getBoundingClientRect(); var ownerDocBodyRect = frame.ownerDocument.body.getBoundingClientRect(); - addTop = frameRect.top - ownerDocBodyRect.top; - addLeft = frameRect.left - ownerDocBodyRect.left; + addTop = frameRect.top - ownerDocBodyRect.top - doc.body.scrollTop; + addLeft = frameRect.left - ownerDocBodyRect.left - doc.body.scrollLeft; } dragHelperStyle.top = (e.pageY + addTop) + 'px'; dragHelperStyle.left = (e.pageX + addLeft) + 'px';