[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) <bvr@odoo.com>

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;
 

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);
             },