fix(drag): always put element under the mouse when dragging an element (#2263)

VincentMolinie · Vincent Molinié · web-flow · commit b559a6f33c98 · 2023-09-30T10:07:32.000-07:00
* fix(drag): place the element dragged always below the mouse

* fix: review fixes

* fix: fix data transfer demo

* fix: review fixes

* fix: fix position according to first transform parent

* review fixes

* review fixes

* review fixes

* fix: fix the refacto

---------

Co-authored-by: Vincent Molinié &lt;vincent.m@forestadmin.com&gt;
diff --git a/demo/index.html b/demo/index.html
@@ -25,6 +25,7 @@ <h1>Demos</h1>
     <li><a href="responsive.html">Responsive</a></li>
     <li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
     <li><a href="serialization.html">Serialization</a></li>
+    <li><a href="scale.html">Scale</a></li>
     <li><a href="sizeToContent.html">Size To Content</a></li>
     <li><a href="static.html">Static</a></li>
     <li><a href="title_drag.html">Title drag</a></li>
diff --git a/demo/scale.html b/demo/scale.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Transform (Scale) Parent demo</title>
+
+  <link rel="stylesheet" href="demo.css"/>
+  <script src="../dist/gridstack-all.js"></script>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>Transform Parent demo</h1>
+    <p>example where the grid parent has a scale (0.5, 0.5)</p>
+    <div>
+      <a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
+      <a class="btn btn-primary" onClick="zoomIn()" href="#">Zoom in</a>
+      <a class="btn btn-primary" onClick="zoomOut()" href="#">Zoom out</a>
+    </div>
+    <br><br>
+    <div style="transform: scale(var(--global-scale), var(--global-scale)); transform-origin: 0 0;">
+      <div class="grid-stack"></div>
+    </div>
+  </div>
+  <script src="events.js"></script>
+  <script type="text/javascript">
+    let scale = 0.5;
+
+    let grid = GridStack.init({float: true});
+    addEvents(grid);
+
+    let items = [
+      {x: 0, y: 0, w: 2, h: 2},
+      {x: 2, y: 0, w: 1},
+      {x: 3, y: 0, h: 1},
+      {x: 0, y: 2, w: 2},
+    ];
+    let count = 0;
+
+    getNode = function() {
+      let n = items[count] || {
+        x: Math.round(12 * Math.random()),
+        y: Math.round(5 * Math.random()),
+        w: Math.round(1 + 3 * Math.random()),
+        h: Math.round(1 + 3 * Math.random())
+      };
+      n.content = n.content || String(count);
+      count++;
+      return n;
+    };
+
+    addNewWidget = function() {
+      let w = grid.addWidget(getNode());
+    };
+
+    const updateScaleCssVariable = () => {
+      document.body.style.setProperty('--global-scale', `${scale}`);
+    }
+
+    zoomIn = function() {
+      const scaleStep = scale < 1 ? 0.05 : 0.1;
+      scale += scaleStep;
+      updateScaleCssVariable();
+    }
+
+    zoomOut = function() {
+      const scaleStep = scale < 1 ? 0.05 : 0.1;
+      scale -= scaleStep;
+      updateScaleCssVariable();
+    }
+
+    updateScaleCssVariable();
+
+
+    addNewWidget();
+    addNewWidget();
+    addNewWidget();
+  </script>
+</body>
+</html>
diff --git a/demo/web2.html b/demo/web2.html
@@ -15,7 +15,7 @@
 
   <!-- support for IE -->
   <script src="../dist/es5/gridstack-poly.js"></script>
-  <script src="../dist/es5/gridstack.js"></script>
+  <script src="../dist/es5/gridstack-all.js"></script>
 
   <style type="text/css">
     .grid-stack-item-removing {
@@ -89,4 +89,4 @@ <h1>Advanced Demo</h1>
   </script>
 </body>
 
-</html>
+</html>
diff --git a/src/dd-draggable.ts b/src/dd-draggable.ts
@@ -24,15 +24,6 @@ export interface DDDraggableOpt {
   drag?: (event: Event, ui: DDUIData) => void;
 }
 
-interface DragOffset {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-  offsetLeft: number;
-  offsetTop: number;
-}
-
 type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
 
 // make sure we are not clicking on known object that handles mouseDown
@@ -48,8 +39,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   protected mouseDownEvent: MouseEvent;
   /** @internal */
-  protected dragOffset: DragOffset;
-  /** @internal */
   protected dragElementOriginStyle: Array<string>;
   /** @internal */
   protected dragEl: HTMLElement;
@@ -63,6 +52,7 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   protected static originStyleProp = ['transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];
   /** @internal pause before we call the actual drag hit collision code */
   protected dragTimeout: number;
+  protected origRelativeMouse: { x: number; y: number; };
 
   constructor(el: HTMLElement, option: DDDraggableOpt = {}) {
     super();
@@ -205,9 +195,10 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
       } else {
         delete DDManager.dropElement;
       }
+      const rect = this.el.getBoundingClientRect();
+      this.origRelativeMouse = { x: s.clientX - rect.left, y: s.clientY - rect.top };
       this.helper = this._createHelper(e);
       this._setupHelperContainmentStyle();
-      this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
       const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstart' });
 
       this._setupHelperStyle(e);
@@ -285,8 +276,9 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     const style = this.helper.style;
     style.pointerEvents = 'none'; // needed for over items to get enter/leave
     // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (done in CSS as well)
-    style.width = this.dragOffset.width + 'px';
-    style.height = this.dragOffset.height + 'px';
+    style.width = this.el.offsetWidth + 'px';
+    style.height = this.el.offsetHeight + 'px';
+
     style.willChange = 'left, top';
     style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
     this._dragFollow(e); // now position it
@@ -322,15 +314,19 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal updates the top/left position to follow the mouse */
   protected _dragFollow(e: DragEvent): void {
-    let containmentRect = { left: 0, top: 0 };
-    // if (this.helper.style.position === 'absolute') { // we use 'fixed'
-    //   const { left, top } = this.helperContainment.getBoundingClientRect();
-    //   containmentRect = { left, top };
-    // }
     const style = this.helper.style;
-    const offset = this.dragOffset;
-    style.left = e.clientX + offset.offsetLeft - containmentRect.left + 'px';
-    style.top = e.clientY + offset.offsetTop - containmentRect.top + 'px';
+    const { scaleX, scaleY } = Utils.getScaleForElement(this.helper);
+    const transformParent = Utils.getContainerForPositionFixedElement(this.helper);
+    const transformParentRect = transformParent.getBoundingClientRect();
+    // when an element is scaled, the helper is positioned relative to the first transformed parent, so we need to remove the extra offset
+    const offsetX = transformParentRect.left;
+    const offsetY = transformParentRect.top;
+
+    // Position the element under the mouse
+    const x = (e.clientX - offsetX - (this.origRelativeMouse?.x || 0)) / scaleX;
+    const y = (e.clientY - offsetY - (this.origRelativeMouse?.y || 0)) / scaleY;
+    style.left = `${x}px`;
+    style.top = `${y}px`;
   }
 
   /** @internal */
@@ -345,51 +341,23 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     return this;
   }
 
-  /** @internal */
-  protected _getDragOffset(event: DragEvent, el: HTMLElement, parent: HTMLElement): DragOffset {
-
-    // in case ancestor has transform/perspective css properties that change the viewpoint
-    let xformOffsetX = 0;
-    let xformOffsetY = 0;
-    if (parent) {
-      const testEl = document.createElement('div');
-      Utils.addElStyles(testEl, {
-        opacity: '0',
-        position: 'fixed',
-        top: 0 + 'px',
-        left: 0 + 'px',
-        width: '1px',
-        height: '1px',
-        zIndex: '-999999',
-      });
-      parent.appendChild(testEl);
-      const testElPosition = testEl.getBoundingClientRect();
-      parent.removeChild(testEl);
-      xformOffsetX = testElPosition.left;
-      xformOffsetY = testElPosition.top;
-      // TODO: scale ?
-    }
-
-    const targetOffset = el.getBoundingClientRect();
-    return {
-      left: targetOffset.left,
-      top: targetOffset.top,
-      offsetLeft: - event.clientX + targetOffset.left - xformOffsetX,
-      offsetTop: - event.clientY + targetOffset.top - xformOffsetY,
-      width: targetOffset.width,
-      height: targetOffset.height
-    };
-  }
-
   /** @internal TODO: set to public as called by DDDroppable! */
   public ui(): DDUIData {
     const containmentEl = this.el.parentElement;
+    const scrollElement = Utils.getScrollElement(this.el.parentElement);
     const containmentRect = containmentEl.getBoundingClientRect();
     const offset = this.helper.getBoundingClientRect();
+    const { scaleX, scaleY } = Utils.getScaleForElement(this.helper);
+
+    // When an element is inside a scrolled element, the boundingClientRect will return the position of the element minus the scroll.
+    const parentPositionIncludingScroll = containmentEl === scrollElement
+      ? { top: containmentRect.top + scrollElement.scrollTop, left: containmentRect.left + scrollElement.scrollLeft }
+      : { top: containmentRect.top, left: containmentRect.left };
+
     return {
-      position: { //Current CSS position of the helper as { top, left } object
-        top: offset.top - containmentRect.top,
-        left: offset.left - containmentRect.left
+      position: { // Current CSS position of the helper as { top, left } object
+        top: (offset.top - parentPositionIncludingScroll.top) / scaleY,
+        left: (offset.left - parentPositionIncludingScroll.left) / scaleX,
       }
       /* not used by GridStack for now...
       helper: [this.helper], //The object arr representing the helper that's being dragged.
diff --git a/src/dd-resizable.ts b/src/dd-resizable.ts
@@ -237,11 +237,14 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal */
   protected _getChange(event: MouseEvent, dir: string): Rect {
     const oEvent = this.startEvent;
+    const containerElement = Utils.getPositionContainerElement(this.el.parentElement);
+    const containerRect = containerElement.getBoundingClientRect();
+
     const newRect = { // Note: originalRect is a complex object, not a simple Rect, so copy out.
       width: this.originalRect.width,
       height: this.originalRect.height + this.scrolled,
-      left: this.originalRect.left,
-      top: this.originalRect.top - this.scrolled
+      left: this.originalRect.left - containerRect.left,
+      top: this.originalRect.top - this.scrolled - containerRect.top
     };
 
     const offsetX = event.clientX - oEvent.clientX;
@@ -277,28 +280,25 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal constrain the size to the set min/max values */
   protected _constrainSize(oWidth: number, oHeight: number): Size {
-    const maxWidth = this.option.maxWidth || Number.MAX_SAFE_INTEGER;
-    const minWidth = this.option.minWidth || oWidth;
-    const maxHeight = this.option.maxHeight || Number.MAX_SAFE_INTEGER;
-    const minHeight = this.option.minHeight || oHeight;
+    const { scaleX, scaleY } = Utils.getScaleForElement(this.el);
+    const o = this.option;
+    const maxWidth = o.maxWidth ? o.maxWidth * scaleX : Number.MAX_SAFE_INTEGER;
+    const minWidth = o.minWidth ? o.minWidth * scaleX : oWidth;
+    const maxHeight = o.maxHeight ? o.maxHeight * scaleY : Number.MAX_SAFE_INTEGER;
+    const minHeight = o.minHeight ? o.minHeight * scaleY : oHeight;
     const width = Math.min(maxWidth, Math.max(minWidth, oWidth));
     const height = Math.min(maxHeight, Math.max(minHeight, oHeight));
     return { width, height };
   }
 
   /** @internal */
   protected _applyChange(): DDResizable {
-    let containmentRect = { left: 0, top: 0, width: 0, height: 0 };
-    if (this.el.style.position === 'absolute') {
-      const containmentEl = this.el.parentElement;
-      const { left, top } = containmentEl.getBoundingClientRect();
-      containmentRect = { left, top, width: 0, height: 0 };
-    }
     if (!this.temporalRect) return this;
-    Object.keys(this.temporalRect).forEach(key => {
-      const value = this.temporalRect[key];
-      this.el.style[key] = value - containmentRect[key] + 'px';
-    });
+    const { scaleX, scaleY } = Utils.getScaleForElement(this.el);
+    this.el.style.width = `${Math.round(this.temporalRect.width / scaleX)}px`;
+    this.el.style.height = `${Math.round(this.temporalRect.height / scaleY)}px`;
+    this.el.style.top = `${Math.round(this.temporalRect.top / scaleY)}px`;
+    this.el.style.left = `${Math.round(this.temporalRect.left / scaleX)}px`;
     return this;
   }
 
@@ -311,23 +311,22 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
 
   /** @internal */
   protected _ui = (): DDUIData => {
-    const containmentEl = this.el.parentElement;
-    const containmentRect = containmentEl.getBoundingClientRect();
+    const { scaleX, scaleY } = Utils.getScaleForElement(this.el);
     const newRect = { // Note: originalRect is a complex object, not a simple Rect, so copy out.
       width: this.originalRect.width,
-      height: this.originalRect.height + this.scrolled,
+      height: (this.originalRect.height + this.scrolled),
       left: this.originalRect.left,
-      top: this.originalRect.top - this.scrolled
+      top: (this.originalRect.top - this.scrolled)
     };
     const rect = this.temporalRect || newRect;
     return {
       position: {
-        left: rect.left - containmentRect.left,
-        top: rect.top - containmentRect.top
+        left: rect.left / scaleX,
+        top: rect.top / scaleY,
       },
       size: {
-        width: rect.width,
-        height: rect.height
+        width: rect.width / scaleX,
+        height: rect.height / scaleY,
       }
       /* Gridstack ONLY needs position set above... keep around in case.
       element: [this.el], // The object representing the element to be resized
diff --git a/src/gridstack.ts b/src/gridstack.ts
@@ -1944,9 +1944,10 @@ export class GridStack {
 
       helper = helper || el;
       let parent = this.el.getBoundingClientRect();
+      const { scaleX, scaleY } = Utils.getScaleForElement(helper);
       let {top, left} = helper.getBoundingClientRect();
-      left -= parent.left;
-      top -= parent.top;
+      left = (left - parent.left) / scaleX;
+      top = (top - parent.top) / scaleY;
       let ui: DDUIData = {position: {top, left}};
 
       if (node._temporaryRemoved) {
diff --git a/src/utils.ts b/src/utils.ts
