From 514d3dbad4d20db375cba634b6af68a4fb0cafe9 Mon Sep 17 00:00:00 2001 From: "Guillaume (gdi)" Date: Wed, 21 Jun 2023 10:52:05 +0200 Subject: [PATCH] [IMP] web_editor: permit drag images and start from anywhere on it Before this commit when the user was dragging an image in the editor, the image was always dragged from the top middle of the image. Now the user can drag the image from anywhere on it. task-3369600 Part-of: odoo/odoo#125151 --- .../web_editor/static/src/js/editor/snippets.editor.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index bf02ed1f42d..598c4459213 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -819,6 +819,8 @@ var SnippetEditor = Widget.extend({ return false; } this.dragStarted = true; + this.mousePositionYOnElement = ev.originalEvent.clientY - ui.offset.top; + this.mousePositionXOnElement = ev.originalEvent.clientX - ui.offset.left; this._onDragAndDropStart(); }, stop: (...args) => { @@ -1634,15 +1636,15 @@ var SnippetEditor = Widget.extend({ const borderWidth = parseFloat(window.getComputedStyle(columnEl).borderWidth); const columnHeight = columnEl.clientHeight + 2 * borderWidth; const columnWidth = columnEl.clientWidth + 2 * borderWidth; - const columnMiddle = columnWidth / 2; // Placing the column where the mouse is. - const top = ev.pageY - rowElTop; + let top = ev.pageY - rowElTop - this.mousePositionYOnElement; const bottom = top + columnHeight; - let left = ev.pageX - rowElLeft - columnMiddle; + let left = ev.pageX - rowElLeft - this.mousePositionXOnElement; - // Horizontal overflow. + // Horizontal & vertical overflow. left = clamp(left, 0, rowEl.clientWidth - columnWidth); + top = clamp(top, 0, rowEl.clientHeight - columnHeight); columnEl.style.top = top + 'px'; columnEl.style.left = left + 'px';