changed getValuesFromTransformedElement signature

removed createTransformReferenceElement

Author: Mohamed Amdoun

src/dd-draggable.ts

@@ -64,8 +64,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
   /** @internal pause before we call the actual drag hit collision code */
   protected dragTimeout: number;
   /** @internal */
-  protected transformReference: HTMLElement;
-  /** @internal */
   protected dragTransform: DragTransform = {
     xScale: 1,
     yScale: 1,
@@ -81,7 +79,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
     // get the element that is actually supposed to be dragged by
     let handleName = option.handle.substring(1);
     this.dragEl = el.classList.contains(handleName) ? el : el.querySelector(option.handle) || el;
-    this.transformReference = Utils.createTransformReferenceElement();
     // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
     this._mouseDown = this._mouseDown.bind(this);
     this._mouseMove = this._mouseMove.bind(this);
@@ -218,7 +215,6 @@ export class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt
       this.helper = this._createHelper(e);
       this._setupHelperContainmentStyle();
       this.dragTransform = Utils.getValuesFromTransformedElement(
-        this.transformReference,
         this.helperContainment
       );
       this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);

src/dd-resizable.ts

@@ -57,14 +57,11 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
   protected parentOriginStylePosition: string;
   /** @internal */
   protected static _originStyleProp = ['width', 'height', 'position', 'left', 'top', 'opacity', 'zIndex'];
-  /** @internal */
-  protected transformReference: HTMLElement;
 
   constructor(el: HTMLElement, opts: DDResizableOpt = {}) {
     super();
     this.el = el;
     this.option = opts;
-    this.transformReference = Utils.createTransformReferenceElement();
     // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
     this._mouseOver = this._mouseOver.bind(this);
     this._mouseOut = this._mouseOut.bind(this);
@@ -229,7 +226,7 @@ export class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt
     this.parentOriginStylePosition = this.el.parentElement.style.position;
 
     const parent = this.el.parentElement;
-    const transformValues = Utils.getValuesFromTransformedElement(this.transformReference, parent);
+    const transformValues = Utils.getValuesFromTransformedElement(parent);
     this.rectScale = {
       x: transformValues.xScale,
       y: transformValues.yScale

src/gridstack.ts

@@ -2030,9 +2030,6 @@ export class GridStack {
     // vars shared across all methods
     let cellHeight: number, cellWidth: number;
 
-    // creates a reference element for tracking the right position after scaling
-    const transformReference = Utils.createTransformReferenceElement();
-
     let onDrag = (event: DragEvent, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {
       let node = el.gridstackNode;
       if (!node) return;
@@ -2042,13 +2039,13 @@ export class GridStack {
       // if we are dragging an element in and out that is coming from a grid
       // we get the transform values by using the helper attached to the grid
       if (node.grid?.el) {
-        transformValues = Utils.getValuesFromTransformedElement(transformReference, helper)
+        transformValues = Utils.getValuesFromTransformedElement(helper)
       }
       // if the element is being dragged from outside (not from any grid)
       // we use the grid as the transformation reference, since the helper is not subject to transformation
       else if (this._placeholder && this._placeholder.closest('.grid-stack')) {
         const gridEl = this._placeholder.closest('.grid-stack') as HTMLElement;
-        transformValues = Utils.getValuesFromTransformedElement(transformReference, gridEl);
+        transformValues = Utils.getValuesFromTransformedElement(gridEl);
         // if the element is being dragged from outside, scale it down to match the grid's scale
         helper.style.transform = `scale(${1 / transformValues.xScale},${1 / transformValues.yScale})`;
         // this makes it so that the helper is well positioned relative to the mouse after scaling

src/utils.ts

@@ -563,10 +563,9 @@ export class Utils {
 
   /**
    * defines an element that is used to get the offset and scale from grid transforms
-   * has to be hooked to a helper
-   * should be called once
+   * returns the scale and offsets from said element
   */
-  public static createTransformReferenceElement(): HTMLElement {
+  public static getValuesFromTransformedElement(parent: HTMLElement): DragTransform {
     const transformReference = document.createElement('div');
     Utils.addElStyles(transformReference, {
       opacity: '0',
@@ -577,16 +576,10 @@ export class Utils {
       height: '1px',
       zIndex: '-999999',
     });
-    return transformReference;
-  }
-
-  /**
-   * can be used after setting the reference element from createTransformReferenceElement
-  */
-  public static getValuesFromTransformedElement(transformReference: HTMLElement, helper: HTMLElement): DragTransform {
-    helper.appendChild(transformReference);
+    parent.appendChild(transformReference);
     const transformValues = transformReference.getBoundingClientRect();
-    helper.removeChild(transformReference);
+    parent.removeChild(transformReference);
+    transformReference.remove();
     return {
       xScale: 1 / transformValues.width,
       yScale: 1 / transformValues.height,