From b392d85b629f69bd17f0ad797bbac72be04fee61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Tue, 26 Mar 2024 14:44:35 +0100 Subject: [PATCH] [FIX] web_editor: fix dragging a column from the bottom in a grid Since commit [1], we can now drag and drop an image column by dragging it directly, and not only by the move handle. Commit [2] allowed the image to be dragged from anywhere and not only from the top middle. However, since commit [2], it is really difficult to drag a column downwards in a grid, if the drag started from the bottom move handle or near the bottom of the column if it contains an image, because we easily get out of the dropzone. Indeed, since the positioning of the column now takes into account the mouse position on the column where the drag started, the mouse cursor is therefore located under the column (or almost under in the second case). This is why it gets out of the dropzone before a new row could be added. For the second case, new rows can be added, but only if the drag is slow enough, which is not convenient. This commit bounds the vertical position of the mouse when dragging, in order for it to always be considered inside the column, so it cannot escape the dropzone anymore. A safety margin of one grid row is considered, to not escape when dragging rapidly. Steps to reproduce: - Drop enough snippets to have a scrollbar or select the "Sidebar" header template. - Drop a "Text-Image" snippet - at the top of the page if the header was changed at the previous step, or - at a place where the top of the snippet can be hidden with a scroll. - Toggle it to grid mode. - Start dragging any column with the bottom move handle or drag the image column by clicking near the bottom of the column. - Go over the grid dropzone if the move handle is used. - Drag towards the bottom of the grid. => The mouse easily gets out of the dropzone, making it impossible to add new rows and drag further down the grid. [1]: https://github.com/odoo/odoo/commit/cff6f79b5f38239be8a498ff03549ad9a5deebae [2]: https://github.com/odoo/odoo/commit/514d3dbad4d20db375cba634b6af68a4fb0cafe9 task-3601336 closes odoo/odoo#144427 Signed-off-by: Benjamin Vray (bvr) --- addons/web_editor/static/src/js/common/grid_layout_utils.js | 2 +- addons/web_editor/static/src/js/editor/snippets.editor.js | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/addons/web_editor/static/src/js/common/grid_layout_utils.js b/addons/web_editor/static/src/js/common/grid_layout_utils.js index 317895caaa1..09ac7abc260 100644 --- a/addons/web_editor/static/src/js/common/grid_layout_utils.js +++ b/addons/web_editor/static/src/js/common/grid_layout_utils.js @@ -2,7 +2,7 @@ import { renderToElement } from "@web/core/utils/render"; import {descendants, preserveCursor} from "@web_editor/js/editor/odoo-editor/src/utils/utils"; -const rowSize = 50; // 50px. +export const rowSize = 50; // 50px. // Maximum number of rows that can be added when dragging a grid item. export const additionalRowLimit = 10; 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 8f6df38a486..0600429acd0 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -865,7 +865,11 @@ var SnippetEditor = Widget.extend({ onDragStart: (args) => { this.dragStarted = true; const targetRect = this.$target[0].getBoundingClientRect(); - this.mousePositionYOnElement = args.y - targetRect.y; + // Bound the Y mouse position to the element height minus one + // grid row, to be able to drag from the bottom in a grid. + const gridRowSize = gridUtils.rowSize; + const boundedYMousePosition = Math.min(args.y, targetRect.bottom - gridRowSize); + this.mousePositionYOnElement = boundedYMousePosition - targetRect.y; this.mousePositionXOnElement = args.x - targetRect.x; this._onDragAndDropStart(args); },