gridstack 10.0.1 → 10.1.0

package/dist/gridstack.js

@@ -1,5 +1,5 @@
 /*!
- * GridStack 10.0.1
+ * 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,8 @@ 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
@@ -180,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;
@@ -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.0';
 export { GridStack };
 //# sourceMappingURL=gridstack.js.map