[FIX] web_editor: make the drag towards the bottom in grid mode smoother

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.

In grid mode, in order for the column to stay well inside the grid when
dragging, its computed position was originally bound horizontally, to
the left and the right of the row. With commit [2], it is now also bound
vertically, to the top and the bottom of the row.

While it makes sense for the top, because we need to take into account
from where we dragged the image, it should not have been the case for
the bottom, as we need to overflow in order to add new rows. This
resulted in the drag towards the bottom becoming jumpy, because it locks
on the bottom of the grid until a new row is added, when the mouse
pointer is down enough.

This commit removes this bottom bound, in order for the drag towards the
bottom to be smooth again.

Steps to reproduce:
- Drop the "Text-Image" snippet and toggle the grid mode.
- Drag a column towards the bottom in order to add new rows.
=> It is not smooth: it locks on the bottom of the grid.

[1]: https://github.com/odoo/odoo/commit/cff6f79b5f38239be8a498ff03549ad9a5deebae
[2]: https://github.com/odoo/odoo/commit/514d3dbad4d20db375cba634b6af68a4fb0cafe9

task-3601336

Part-of: odoo/odoo#144427
This commit is contained in:
Soukéina Bojabza
2024-04-10 15:14:57 +00:00
parent fdce0f0d41
commit 3a0a52ee99
@@ -1679,9 +1679,9 @@ var SnippetEditor = Widget.extend({
const bottom = top + columnHeight;
let left = x - rowElLeft - this.mousePositionXOnElement;
// Horizontal & vertical overflow.
// Horizontal and top overflow.
left = clamp(left, 0, rowEl.clientWidth - columnWidth);
top = clamp(top, 0, rowEl.clientHeight - columnHeight);
top = top < 0 ? 0 : top;
columnEl.style.top = top + 'px';
columnEl.style.left = left + 'px';