gridstack 10.0.1 → 10.1.1

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 10.0.1
+ * GridStack 10.1.1
  * 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));
@@ -147,16 +151,19 @@ class GridStack {
     }
     /**
      * Construct a grid item from the given element and options
-     * @param el
-     * @param opts
+     * @param el the HTML element tied to this grid after it's been initialized
+     * @param opts grid options - public for classes to access, but use methods to modify!
      */
     constructor(el, opts = {}) {
+        this.el = el;
+        this.opts = opts;
         /** @internal */
         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')) {
             this.el.classList.add('grid-stack');
@@ -180,7 +187,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;
@@ -227,16 +234,15 @@ class GridStack {
         if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
             defaults.animate = Utils.toBool(el.getAttribute('gs-animate'));
         }
-        this.opts = Utils.defaults(opts, defaults);
-        opts = null; // make sure we use this.opts instead
+        opts = Utils.defaults(opts, defaults);
         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');
+        this.el.classList.add('gs-' + opts.column);
+        if (opts.rtl === 'auto') {
+            opts.rtl = (el.style.direction === 'rtl');
         }
-        if (this.opts.rtl) {
+        if (opts.rtl) {
             this.el.classList.add('grid-stack-rtl');
         }
         // check if we're been nested, and if so update our style and keep pointer around (used during save)
@@ -248,31 +254,31 @@ class GridStack {
             this.el.classList.add('grid-stack-nested');
             parentGridItem.el.classList.add('grid-stack-sub-grid');
         }
-        this._isAutoCellHeight = (this.opts.cellHeight === 'auto');
-        if (this._isAutoCellHeight || this.opts.cellHeight === 'initial') {
+        this._isAutoCellHeight = (opts.cellHeight === 'auto');
+        if (this._isAutoCellHeight || opts.cellHeight === 'initial') {
             // make the cell content square initially (will use resize/column event to keep it square)
             this.cellHeight(undefined, false);
         }
         else {
             // append unit if any are set
-            if (typeof this.opts.cellHeight == 'number' && this.opts.cellHeightUnit && this.opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {
-                this.opts.cellHeight = this.opts.cellHeight + this.opts.cellHeightUnit;
-                delete this.opts.cellHeightUnit;
+            if (typeof opts.cellHeight == 'number' && opts.cellHeightUnit && opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {
+                opts.cellHeight = opts.cellHeight + opts.cellHeightUnit;
+                delete opts.cellHeightUnit;
             }
-            this.cellHeight(this.opts.cellHeight, false);
+            this.cellHeight(opts.cellHeight, false);
         }
         // see if we need to adjust auto-hide
-        if (this.opts.alwaysShowResizeHandle === 'mobile') {
-            this.opts.alwaysShowResizeHandle = isTouch;
+        if (opts.alwaysShowResizeHandle === 'mobile') {
+            opts.alwaysShowResizeHandle = isTouch;
         }
         this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;
         this.el.classList.add(this._styleSheetClass);
         this._setStaticClass();
-        let engineClass = this.opts.engineClass || GridStack.engineClass || GridStackEngine;
+        let engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine;
         this.engine = new engineClass({
             column: this.getColumn(),
-            float: this.opts.float,
-            maxRow: this.opts.maxRow,
+            float: opts.float,
+            maxRow: opts.maxRow,
             onChange: (cbNodes) => {
                 let maxH = 0;
                 this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h); });
@@ -294,25 +300,25 @@ class GridStack {
         });
         // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly
         this._updateStyles(false, 0);
-        if (this.opts.auto) {
+        if (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));
             this.batchUpdate(false);
         }
         // load any passed in children as well, which overrides any DOM layout done above
-        if (this.opts.children) {
-            let children = this.opts.children;
-            delete this.opts.children;
+        if (opts.children) {
+            let children = opts.children;
+            delete opts.children;
             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.setAnimation(opts.animate);
         // dynamic grids require pausing during drag to detect over to nest vs push
-        if (this.opts.subGridDynamic && !DDManager.pauseDrag)
+        if (opts.subGridDynamic && !DDManager.pauseDrag)
             DDManager.pauseDrag = true;
-        if (this.opts.draggable?.pause !== undefined)
-            DDManager.pauseDrag = this.opts.draggable.pause;
+        if (opts.draggable?.pause !== undefined)
+            DDManager.pauseDrag = opts.draggable.pause;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
         this._updateResizeEvent();
@@ -390,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) {
@@ -407,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;
@@ -688,13 +695,20 @@ class GridStack {
             (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {
             return this.opts.cellHeight;
         }
-        // do rem/em to px conversion
+        // 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) {
@@ -818,7 +832,7 @@ 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.resizeToContentCheck(true); // wait for width resizing
@@ -957,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) {
@@ -998,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
@@ -1024,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;
     }
     /**
@@ -1237,7 +1235,7 @@ class GridStack {
             // 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;
@@ -1404,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}`);
@@ -1868,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));
@@ -2211,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;
@@ -2327,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)
@@ -2361,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.1';
+GridStack.GDRev = '10.1.1';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map