gridstack 10.0.0 → 10.1.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 10.0.0
+ * GridStack 10.1.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -48,6 +48,8 @@ class GridStack {
      * let grid = document.querySelector('.grid-stack').gridstack;
      */
     static init(options = {}, elOrString = '.grid-stack') {
+        if (typeof document === 'undefined')
+            return null; // temp workaround SSR
         let el = GridStack.getGridElement(elOrString);
         if (!el) {
             if (typeof elOrString === 'string') {
@@ -75,6 +77,8 @@ class GridStack {
      */
     static initAll(options = {}, selector = '.grid-stack') {
         let grids = [];
+        if (typeof document === 'undefined')
+            return grids; // temp workaround SSR
         GridStack.getGridElements(selector).forEach(el => {
             if (!el.gridstack) {
                 el.gridstack = new GridStack(el, Utils.cloneDeep(options));
@@ -155,6 +159,9 @@ class GridStack {
         this._gsEventHandler = {};
         /** @internal extra row added when dragging at the bottom of the grid */
         this._extraDragRow = 0;
+        /** @internal meant to store the scale of the active grid */
+        this.dragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 };
+        el.gridstack = this;
         this.el = el; // exposed HTML element to the user
         opts = opts || {}; // handles null/undefined/0
         if (!el.classList.contains('grid-stack')) {
@@ -179,7 +186,7 @@ class GridStack {
         const oldOpts = opts;
         if (oldOpts.oneColumnModeDomSort) {
             delete oldOpts.oneColumnModeDomSort;
-            console.log('Error: Gridstack oneColumnModeDomSort no longer supported. Check GridStackOptions.columnOpts instead.');
+            console.log('warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.');
         }
         if (oldOpts.oneColumnSize || oldOpts.disableOneColumnMode === false) {
             const oneSize = oldOpts.oneColumnSize || 768;
@@ -231,6 +238,7 @@ class GridStack {
         this._initMargin(); // part of settings defaults...
         // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
         this.checkDynamicColumn();
+        this.el.classList.add('gs-' + this.opts.column);
         if (this.opts.rtl === 'auto') {
             this.opts.rtl = (el.style.direction === 'rtl');
         }
@@ -290,6 +298,8 @@ class GridStack {
                 this._updateStyles(false, maxH); // false = don't recreate, just append if need be
             }
         });
+        // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
+        this._updateStyles(false, 0);
         if (this.opts.auto) {
             this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...
             this.getGridItems().forEach(el => this._prepareElement(el));
@@ -302,9 +312,8 @@ class GridStack {
             if (children.length)
                 this.load(children); // don't load empty
         }
+        // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB
         this.setAnimation(this.opts.animate);
-        this._updateStyles();
-        this.el.classList.add('gs-' + this.opts.column);
         // dynamic grids require pausing during drag to detect over to nest vs push
         if (this.opts.subGridDynamic && !DDManager.pauseDrag)
             DDManager.pauseDrag = true;
@@ -387,6 +396,7 @@ class GridStack {
      * @param el gridItem element to convert
      * @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults
      * @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item)
+     * @param saveContent if true (default) the html inside .grid-stack-content will be saved to child widget
      * @returns newly created grid
      */
     makeSubGrid(el, ops, nodeToAdd, saveContent = true) {
@@ -404,7 +414,7 @@ class GridStack {
             grid = grid.parentGridItem?.grid;
         }
         //... and set the create options
-        ops = Utils.cloneDeep({ ...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts) });
+        ops = Utils.cloneDeep({ ...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts || {}) });
         node.subGridOpts = ops;
         // if column special case it set, remember that flag and set default
         let autoColumn;
@@ -592,6 +602,10 @@ class GridStack {
             GridStack.addRemoveCB = addRemove;
         let removed = [];
         this.batchUpdate();
+        // if we are blank (loading into empty like startup) temp remove animation
+        const noAnim = !this.engine.nodes.length;
+        if (noAnim)
+            this.setAnimation(false);
         // see if any items are missing from new layout and need to be removed first
         if (addRemove) {
             let copyNodes = [...this.engine.nodes]; // don't loop through array you modify
@@ -617,21 +631,19 @@ class GridStack {
             } // remove if found from list
             return true;
         });
-        let widthChanged = false;
         items.forEach(w => {
             let item = Utils.find(updateNodes, w.id);
             if (item) {
-                // if item sizes to content, re-use the exiting height so it's a better guess at the final size 9same if width doesn't change)
+                // if item sizes to content, re-use the exiting height so it's a better guess at the final size (same if width doesn't change)
                 if (Utils.shouldSizeToContent(item))
                     w.h = item.h;
                 // check if missing coord, in which case find next empty slot with new (or old if missing) sizes
-                this.engine.nodeBoundFix(w); // before widthChanged is checked below...
+                this.engine.nodeBoundFix(w);
                 if (w.autoPosition || w.x === undefined || w.y === undefined) {
                     w.w = w.w || item.w;
                     w.h = w.h || item.h;
                     this.engine.findEmptyPosition(w);
                 }
-                widthChanged = widthChanged || (w.w !== undefined && w.w !== item.w);
                 // add back to current list BUT force a collision check if it 'appears' we didn't change to make sure we don't overlap others now
                 this.engine.nodes.push(item);
                 if (Utils.samePos(item, w)) {
@@ -651,12 +663,14 @@ class GridStack {
             }
         });
         this.engine.removedNodes = removed;
-        this.doContentResize(widthChanged, true); // we only need to wait for animation if we changed any widths
         this.batchUpdate(false);
         // after commit, clear that flag
         delete this._ignoreLayoutsNodeChange;
         delete this._insertNotAppend;
         prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;
+        // delay adding animation back
+        if (noAnim && this.opts.animate)
+            setTimeout(() => this.setAnimation(this.opts.animate));
         return this;
     }
     /**
@@ -681,11 +695,25 @@ class GridStack {
             (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {
             return this.opts.cellHeight;
         }
+        // do rem/em/cm/mm to px conversion
+        if (this.opts.cellHeightUnit === 'rem') {
+            return this.opts.cellHeight * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        }
+        if (this.opts.cellHeightUnit === 'em') {
+            return this.opts.cellHeight * parseFloat(getComputedStyle(this.el).fontSize);
+        }
+        if (this.opts.cellHeightUnit === 'cm') {
+            // 1cm = 96px/2.54. See https://www.w3.org/TR/css-values-3/#absolute-lengths
+            return this.opts.cellHeight * (96 / 2.54);
+        }
+        if (this.opts.cellHeightUnit === 'mm') {
+            return this.opts.cellHeight * (96 / 2.54) / 10;
+        }
         // else get first cell height
         let el = this.el.querySelector('.' + this.opts.itemClass);
         if (el) {
-            let height = Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore
-            return Math.round(el.offsetHeight / height);
+            let h = Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore
+            return Math.round(el.offsetHeight / h);
         }
         // else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)
         let rows = parseInt(this.el.getAttribute('gs-current-row'));
@@ -728,7 +756,7 @@ class GridStack {
         }
         this.opts.cellHeightUnit = data.unit;
         this.opts.cellHeight = data.h;
-        this.doContentResize(false, true); // no anim wait, but use attributes since we only change row height
+        this.resizeToContentCheck();
         if (update) {
             this._updateStyles(true); // true = force re-create for current # of rows
         }
@@ -804,10 +832,10 @@ class GridStack {
         // update the items now, checking if we have a custom children layout
         /*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
         if (newChildren) this.load(newChildren);
-        else*/ this.engine.columnChanged(oldColumn, column, undefined, layout);
+        else*/ this.engine.columnChanged(oldColumn, column, layout);
         if (this._isAutoCellHeight)
             this.cellHeight();
-        this.doContentResize();
+        this.resizeToContentCheck(true); // wait for width resizing
         // and trigger our event last...
         this._ignoreLayoutsNodeChange = true; // skip layout update
         this._triggerChangeEvent();
@@ -929,7 +957,6 @@ class GridStack {
         this._prepareElement(el, true, options);
         const node = el.gridstackNode;
         this._updateContainerHeight();
-        this.doContentResize(false, false, node);
         // see if there is a sub-grid to create
         if (node.subGridOpts) {
             this.makeSubGrid(el, node.subGridOpts, undefined, false); // node.subGrid will be used as option in method, no need to pass
@@ -944,22 +971,6 @@ class GridStack {
         delete this._ignoreLayoutsNodeChange;
         return el;
     }
-    /**
-     * Event handler that extracts our CustomEvent data out automatically for receiving custom
-     * notifications (see doc for supported events)
-     * @param name of the event (see possible values) or list of names space separated
-     * @param callback function called with event and optional second/third param
-     * (see README documentation for each signature).
-     *
-     * @example
-     * grid.on('added', function(e, items) { log('added ', items)} );
-     * or
-     * grid.on('added removed change', function(e, items) { log(e.type, items)} );
-     *
-     * Note: in some cases it is the same as calling native handler and parsing the event.
-     * grid.el.addEventListener('added', function(event) { log('added ', event.detail)} );
-     *
-     */
     on(name, callback) {
         // check for array of names being passed instead
         if (name.indexOf(' ') !== -1) {
@@ -985,13 +996,13 @@ class GridStack {
             this._gsEventHandler[name] = callback;
         }
         else {
-            console.log('GridStack.on(' + name + ') event not supported');
+            console.error('GridStack.on(' + name + ') event not supported');
         }
         return this;
     }
     /**
-     * unsubscribe from the 'on' event below
-     * @param name of the event (see possible values)
+     * unsubscribe from the 'on' event GridStackEvent
+     * @param name of the event (see possible values) or list of names space separated
      */
     off(name) {
         // check for array of names being passed instead
@@ -1011,7 +1022,7 @@ class GridStack {
     }
     /** remove all event handlers */
     offAll() {
-        Object.keys(this._gsEventHandler).forEach(key => this.off(key));
+        Object.keys(this._gsEventHandler).forEach((key) => this.off(key));
         return this;
     }
     /**
@@ -1075,6 +1086,8 @@ class GridStack {
         }
         return this;
     }
+    /** @internal */
+    hasAnimationCSS() { return this.el.classList.contains('grid-stack-animate'); }
     /**
      * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
      * Also toggle the grid-stack-static class.
@@ -1160,8 +1173,11 @@ class GridStack {
             }
             Utils.sanitizeMinMax(n);
             // finally move the widget and update attr
-            if (m)
+            if (m) {
+                const widthChanged = (m.w !== undefined && m.w !== n.w);
                 this.moveNode(n, m);
+                this.resizeToContentCheck(widthChanged, n); // wait for animation if we changed width
+            }
             if (m || changed) {
                 this._writeAttr(el, n);
             }
@@ -1182,26 +1198,25 @@ class GridStack {
     /**
      * Updates widget height to match the content height to avoid v-scrollbar or dead space.
      * Note: this assumes only 1 child under resizeToContentParent='.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted.
-     * useAttrSize set to true if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights
+     * @param el grid item element
+     * @param useNodeH set to true if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights
      */
-    resizeToContent(el, useAttrSize = false) {
+    resizeToContent(el) {
         if (!el)
             return;
         el.classList.remove('size-to-content-max');
         if (!el.clientHeight)
             return; // 0 when hidden, skip
-        let n = el.gridstackNode;
+        const n = el.gridstackNode;
         if (!n)
             return;
         const grid = n.grid;
-        if (!grid)
-            return;
-        if (el.parentElement !== grid.el)
+        if (!grid || el.parentElement !== grid.el)
             return; // skip if we are not inside a grid
-        const cell = grid.getCellHeight();
+        const cell = grid.getCellHeight(true);
         if (!cell)
             return;
-        let height = useAttrSize && n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
+        let height = n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth
         let item;
         if (n.resizeToContentParent)
             item = el.querySelector(n.resizeToContentParent);
@@ -1210,17 +1225,17 @@ class GridStack {
         if (!item)
             return;
         const padding = el.clientHeight - item.clientHeight; // full - available height to our child (minus border, padding...)
-        const itemH = useAttrSize && n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)
+        const itemH = n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)
         let wantedH;
         if (n.subGrid) {
             // sub-grid - use their actual row count * their cell height
-            wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight();
+            wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);
         }
         else {
             // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
             const child = item.firstElementChild;
             if (!child) {
-                console.log(`Error: resizeToContent() '${GridStack.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
+                console.error(`Error: GridStack.resizeToContent() widget id:${n.id} '${GridStack.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
                 return;
             }
             wantedH = child.getBoundingClientRect().height || itemH;
@@ -1246,11 +1261,11 @@ class GridStack {
         }
     }
     /** call the user resize (so they can do extra work) else our build in version */
-    resizeToContentCheck(el, useAttr = false) {
+    resizeToContentCBCheck(el) {
         if (GridStack.resizeToContentCB)
-            GridStack.resizeToContentCB(el, useAttr);
+            GridStack.resizeToContentCB(el);
         else
-            this.resizeToContent(el, useAttr);
+            this.resizeToContent(el);
     }
     /**
      * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).
@@ -1343,7 +1358,8 @@ class GridStack {
     /** @internal called to delete the current dynamic style sheet used for our layout */
     _removeStylesheet() {
         if (this._styles) {
-            Utils.removeStylesheet(this._styleSheetClass);
+            const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
+            Utils.removeStylesheet(this._styleSheetClass, styleLocation);
             delete this._styles;
         }
         return this;
@@ -1354,7 +1370,7 @@ class GridStack {
         if (forceUpdate) {
             this._removeStylesheet();
         }
-        if (!maxH)
+        if (maxH === undefined)
             maxH = this.getRow();
         this._updateContainerHeight();
         // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??
@@ -1367,7 +1383,7 @@ class GridStack {
         // create one as needed
         if (!this._styles) {
             // insert style to parent (instead of 'head' by default) to support WebComponent
-            let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
+            const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode;
             this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation, {
                 nonce: this.opts.nonce,
             });
@@ -1386,6 +1402,8 @@ class GridStack {
             Utils.addCSSRule(this._styles, content, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);
             Utils.addCSSRule(this._styles, placeholder, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);
             // resize handles offset (to match margin)
+            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-n`, `top: ${top};`);
+            Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-s`, `bottom: ${bottom}`);
             Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-ne`, `right: ${right}`);
             Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-e`, `right: ${right}`);
             Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-se`, `right: ${right}; bottom: ${bottom}`);
@@ -1434,25 +1452,24 @@ class GridStack {
         }
         // if we're a nested grid inside an sizeToContent item, tell it to resize itself too
         if (parent && !parent.grid.engine.batchMode && Utils.shouldSizeToContent(parent)) {
-            parent.grid.resizeToContentCheck(parent.el);
+            parent.grid.resizeToContentCBCheck(parent.el);
         }
         return this;
     }
     /** @internal */
     _prepareElement(el, triggerAddEvent = false, node) {
-        el.classList.add(this.opts.itemClass);
         node = node || this._readAttr(el);
         el.gridstackNode = node;
         node.el = el;
         node.grid = this;
-        let copy = { ...node };
         node = this.engine.addNode(node, triggerAddEvent);
-        // write node attr back in case there was collision or we have to fix bad values during addNode()
-        if (!Utils.same(node, copy)) {
-            this._writeAttr(el, node);
-        }
-        if (Utils.shouldSizeToContent(node))
-            el.classList.add('size-to-content');
+        // write the dom sizes and class
+        this._writeAttr(el, node);
+        el.classList.add(gridDefaults.itemClass, this.opts.itemClass);
+        const sizeToContent = Utils.shouldSizeToContent(node);
+        sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content');
+        if (sizeToContent)
+            this.resizeToContentCheck(false, node);
         this._prepareDragDropByNode(node);
         return this;
     }
@@ -1579,34 +1596,35 @@ class GridStack {
                 n.subGrid.onResize();
         });
         if (!this._skipInitialResize)
-            this.doContentResize(columnChanged); // wait for anim of column changed (DOM reflow before we can size correctly)
+            this.resizeToContentCheck(columnChanged); // wait for anim of column changed (DOM reflow before we can size correctly)
         delete this._skipInitialResize;
         this.batchUpdate(false);
         return this;
     }
-    doContentResize(delay = true, useAttr = false, n = undefined) {
+    /** resizes content for given node (or all) if shouldSizeToContent() is true */
+    resizeToContentCheck(delay = false, n = undefined) {
+        if (!this.engine)
+            return; // we've been deleted in between!
         // update any gridItem height with sizeToContent, but wait for DOM $animation_speed to settle if we changed column count
         // TODO: is there a way to know what the final (post animation) size of the content will be so we can animate the column width and height together rather than sequentially ?
-        setTimeout(() => {
-            if (!this.engine)
-                return; // we've been deleted in between!
-            if (n) {
+        if (delay && this.hasAnimationCSS())
+            return setTimeout(() => this.resizeToContentCheck(false, n), 300 + 10);
+        if (n) {
+            if (Utils.shouldSizeToContent(n))
+                this.resizeToContentCBCheck(n.el);
+        }
+        else if (this.engine.nodes.some(n => Utils.shouldSizeToContent(n))) {
+            const nodes = [...this.engine.nodes]; // in case order changes while resizing one
+            this.batchUpdate();
+            nodes.forEach(n => {
                 if (Utils.shouldSizeToContent(n))
-                    this.resizeToContentCheck(n.el, useAttr);
-            }
-            else if (this.engine.nodes.some(n => Utils.shouldSizeToContent(n))) {
-                const nodes = [...this.engine.nodes]; // in case order changes while resizing one
-                this.batchUpdate();
-                nodes.forEach(n => {
-                    if (Utils.shouldSizeToContent(n))
-                        this.resizeToContentCheck(n.el, useAttr);
-                });
-                this.batchUpdate(false);
-            }
-            // call this regardless of shouldSizeToContent because widget might need to stretch to take available space after a resize
-            if (this._gsEventHandler['resizecontent'])
-                this._gsEventHandler['resizecontent'](null, n ? [n] : this.engine.nodes);
-        }, delay ? 300 + 10 : 0);
+                    this.resizeToContentCBCheck(n.el);
+            });
+            this.batchUpdate(false);
+        }
+        // call this regardless of shouldSizeToContent because widget might need to stretch to take available space after a resize
+        if (this._gsEventHandler['resizecontent'])
+            this._gsEventHandler['resizecontent'](null, n ? [n] : this.engine.nodes);
     }
     /** add or remove the grid element size event handler */
     _updateResizeEvent(forceRemove = false) {
@@ -1737,7 +1755,7 @@ class GridStack {
         if (this.opts.staticGrid)
             return this; // can't move a static grid!
         GridStack.getElements(els).forEach(el => {
-            let n = el.gridstackNode;
+            const n = el.gridstackNode;
             if (!n)
                 return;
             val ? delete n.noMove : n.noMove = true;
@@ -1850,11 +1868,27 @@ class GridStack {
             if (!node)
                 return;
             helper = helper || el;
+            // if the element is being dragged from outside, scale it down to match the grid's scale
+            // and slightly adjust its position relative to the mouse
+            if (!node.grid?.el) {
+                // this scales the helper down
+                helper.style.transform = `scale(${1 / this.dragTransform.xScale},${1 / this.dragTransform.yScale})`;
+                // this makes it so that the helper is well positioned relative to the mouse after scaling
+                const helperRect = helper.getBoundingClientRect();
+                helper.style.left = helperRect.x + (this.dragTransform.xScale - 1) * (event.clientX - helperRect.x) / this.dragTransform.xScale + 'px';
+                helper.style.top = helperRect.y + (this.dragTransform.yScale - 1) * (event.clientY - helperRect.y) / this.dragTransform.yScale + 'px';
+                helper.style.transformOrigin = `0px 0px`;
+            }
             let parent = this.el.getBoundingClientRect();
             let { top, left } = helper.getBoundingClientRect();
             left -= parent.left;
             top -= parent.top;
-            let ui = { position: { top, left } };
+            let ui = {
+                position: {
+                    top: top * this.dragTransform.xScale,
+                    left: left * this.dragTransform.yScale
+                }
+            };
             if (node._temporaryRemoved) {
                 node.x = Math.max(0, Math.round(left / cellWidth));
                 node.y = Math.max(0, Math.round(top / cellHeight));
@@ -1993,8 +2027,12 @@ class GridStack {
             // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead
             if (node?.grid === this && !node._isExternal)
                 return false;
-            let wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
+            const wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419
             this.placeholder.remove();
+            // disable animation when replacing a placeholder (already positioned) with actual content
+            const noAnim = wasAdded && this.opts.animate;
+            if (noAnim)
+                this.setAnimation(false);
             // notify previous grid of removal
             // console.log('drop delete _gridstackNodeOrig') // TEST
             let origNode = el._gridstackNodeOrig;
@@ -2039,15 +2077,13 @@ class GridStack {
             // @ts-ignore
             Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578
             Utils.removePositioningStyles(el); // @ts-ignore
-            this._writeAttr(el, node);
-            el.classList.add(gridDefaults.itemClass, this.opts.itemClass);
             this.el.appendChild(el); // @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)
+            this._prepareElement(el, true, node);
             if (subGrid) {
                 subGrid.parentGridItem = node;
                 if (!subGrid.opts.styleInHead)
                     subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved
             }
-            this._prepareDragDropByNode(node);
             this._updateContainerHeight();
             this.engine.addedNodes.push(node); // @ts-ignore
             this._triggerAddEvent(); // @ts-ignore
@@ -2056,6 +2092,9 @@ class GridStack {
             if (this._gsEventHandler['dropped']) {
                 this._gsEventHandler['dropped']({ ...event, type: 'dropped' }, origNode && origNode.grid ? origNode : undefined, node);
             }
+            // delay adding animation back
+            if (noAnim)
+                setTimeout(() => this.setAnimation(this.opts.animate));
             return false; // prevent parent from receiving msg (which may be grid as well)
         });
         return this;
@@ -2123,6 +2162,7 @@ class GridStack {
                 delete node._moving;
                 delete node._event;
                 delete node._lastTried;
+                const widthChanged = node.w !== node._orig.w;
                 // if the item has moved to another grid, we're done here
                 let target = event.target;
                 if (!target.gridstackNode || target.gridstackNode.grid !== this)
@@ -2160,7 +2200,7 @@ class GridStack {
                 if (event.type === 'resizestop') {
                     if (Number.isInteger(node.sizeToContent))
                         node.sizeToContent = node.h; // new soft limit
-                    this.doContentResize(false, true, node); // no amin wait as will use the actual sized coordinate attr
+                    this.resizeToContentCheck(widthChanged, node); // wait for width animation if changed
                 }
             };
             dd.draggable(el, {
@@ -2187,6 +2227,26 @@ class GridStack {
         this._writePosAttr(this.placeholder, node);
         this.el.appendChild(this.placeholder);
         // console.log('_onStartMoving placeholder') // TEST
+        // if the element is inside a grid, it has already been scaled
+        // we can use that as a scale reference
+        if (node.grid?.el) {
+            this.dragTransform = Utils.getValuesFromTransformedElement(el);
+        }
+        // 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');
+            this.dragTransform = Utils.getValuesFromTransformedElement(gridEl);
+        }
+        // Fallback
+        else {
+            this.dragTransform = {
+                xScale: 1,
+                xOffset: 0,
+                yScale: 1,
+                yOffset: 0,
+            };
+        }
         node.el = this.placeholder;
         node._lastUiPosition = ui.position;
         node._prevYPix = ui.position.top;
@@ -2303,6 +2363,9 @@ class GridStack {
         let node = el.gridstackNode;
         if (!node)
             return;
+        helper = helper || el;
+        // restore the scale of the helper on leave
+        helper.style.transform = 'scale(1)';
         dd.off(el, 'drag'); // no need to track while being outside
         // this gets called when cursor leaves and shape is outside, so only do this once
         if (node._temporaryRemoved)
@@ -2337,6 +2400,6 @@ GridStack.resizeToContentParent = '.grid-stack-item-content';
 GridStack.Utils = Utils;
 /** scoping so users can call new GridStack.Engine(12) for example */
 GridStack.Engine = GridStackEngine;
-GridStack.GDRev = '10.0.0';
+GridStack.GDRev = '10.1.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map