gridstack 10.0.1 → 10.1.1

package/dist/es5/gridstack.js

@@ -36,7 +36,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridStack = void 0;
 /*!
- * GridStack 10.0.1
+ * GridStack 10.1.1
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -73,19 +73,22 @@ __exportStar(require("./dd-gridstack"), exports);
 var GridStack = exports.GridStack = /** @class */ (function () {
     /**
      * 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!
      */
     function GridStack(el, opts) {
         if (opts === void 0) { opts = {}; }
         var _this = this;
         var _a, _b, _c, _d;
+        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');
@@ -109,7 +112,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var 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) {
             var oneSize = oldOpts.oneColumnSize || 768;
@@ -149,16 +152,15 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead
             defaults.animate = utils_1.Utils.toBool(el.getAttribute('gs-animate'));
         }
-        this.opts = utils_1.Utils.defaults(opts, defaults);
-        opts = null; // make sure we use this.opts instead
+        opts = utils_1.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)
@@ -170,31 +172,31 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             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 !== types_1.gridDefaults.cellHeightUnit) {
-                this.opts.cellHeight = this.opts.cellHeight + this.opts.cellHeightUnit;
-                delete this.opts.cellHeightUnit;
+            if (typeof opts.cellHeight == 'number' && opts.cellHeightUnit && opts.cellHeightUnit !== types_1.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 = dd_touch_1.isTouch;
+        if (opts.alwaysShowResizeHandle === 'mobile') {
+            opts.alwaysShowResizeHandle = dd_touch_1.isTouch;
         }
         this._styleSheetClass = 'gs-id-' + gridstack_engine_1.GridStackEngine._idSeq++;
         this.el.classList.add(this._styleSheetClass);
         this._setStaticClass();
-        var engineClass = this.opts.engineClass || GridStack.engineClass || gridstack_engine_1.GridStackEngine;
+        var engineClass = opts.engineClass || GridStack.engineClass || gridstack_engine_1.GridStackEngine;
         this.engine = new engineClass({
             column: this.getColumn(),
-            float: this.opts.float,
-            maxRow: this.opts.maxRow,
+            float: opts.float,
+            maxRow: opts.maxRow,
             onChange: function (cbNodes) {
                 var maxH = 0;
                 _this.engine.nodes.forEach(function (n) { maxH = Math.max(maxH, n.y + n.h); });
@@ -216,25 +218,25 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         });
         // 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(function (el) { return _this._prepareElement(el); });
             this.batchUpdate(false);
         }
         // load any passed in children as well, which overrides any DOM layout done above
-        if (this.opts.children) {
-            var children = this.opts.children;
-            delete this.opts.children;
+        if (opts.children) {
+            var 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 && !dd_manager_1.DDManager.pauseDrag)
+        if (opts.subGridDynamic && !dd_manager_1.DDManager.pauseDrag)
             dd_manager_1.DDManager.pauseDrag = true;
-        if (((_d = this.opts.draggable) === null || _d === void 0 ? void 0 : _d.pause) !== undefined)
-            dd_manager_1.DDManager.pauseDrag = this.opts.draggable.pause;
+        if (((_d = opts.draggable) === null || _d === void 0 ? void 0 : _d.pause) !== undefined)
+            dd_manager_1.DDManager.pauseDrag = opts.draggable.pause;
         this._setupRemoveDrop();
         this._setupAcceptWidget();
         this._updateResizeEvent();
@@ -255,6 +257,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.init = function (options, elOrString) {
         if (options === void 0) { options = {}; }
         if (elOrString === void 0) { elOrString = '.grid-stack'; }
+        if (typeof document === 'undefined')
+            return null; // temp workaround SSR
         var el = GridStack.getGridElement(elOrString);
         if (!el) {
             if (typeof elOrString === 'string') {
@@ -284,6 +288,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         if (options === void 0) { options = {}; }
         if (selector === void 0) { selector = '.grid-stack'; }
         var grids = [];
+        if (typeof document === 'undefined')
+            return grids; // temp workaround SSR
         GridStack.getGridElements(selector).forEach(function (el) {
             if (!el.gridstack) {
                 el.gridstack = new GridStack(el, utils_1.Utils.cloneDeep(options));
@@ -432,6 +438,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
      * @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
      */
     GridStack.prototype.makeSubGrid = function (el, ops, nodeToAdd, saveContent) {
@@ -451,7 +458,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             grid = (_c = grid.parentGridItem) === null || _c === void 0 ? void 0 : _c.grid;
         }
         //... and set the create options
-        ops = utils_1.Utils.cloneDeep(__assign(__assign(__assign({}, (subGridTemplate || {})), { children: undefined }), (ops || node.subGridOpts)));
+        ops = utils_1.Utils.cloneDeep(__assign(__assign(__assign({}, (subGridTemplate || {})), { children: undefined }), (ops || node.subGridOpts || {})));
         node.subGridOpts = ops;
         // if column special case it set, remember that flag and set default
         var autoColumn;
@@ -743,13 +750,20 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             (!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
         var el = this.el.querySelector('.' + this.opts.itemClass);
         if (el) {
@@ -880,7 +894,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         // 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
@@ -1022,22 +1036,6 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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)} );
-     *
-     */
     GridStack.prototype.on = function (name, callback) {
         var _this = this;
         // check for array of names being passed instead
@@ -1064,13 +1062,13 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             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
      */
     GridStack.prototype.off = function (name) {
         var _this = this;
@@ -1315,7 +1313,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use <div> container!
             var child = item.firstElementChild;
             if (!child) {
-                console.log("Error: resizeToContent() '".concat(GridStack.resizeToContentParent, "'.firstElementChild is null, make sure to have a div like container. Skipping sizing."));
+                console.error("Error: GridStack.resizeToContent() widget id:".concat(n.id, " '").concat(GridStack.resizeToContentParent, "'.firstElementChild is null, make sure to have a div like container. Skipping sizing."));
                 return;
             }
             wantedH = child.getBoundingClientRect().height || itemH;
@@ -1485,6 +1483,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
             utils_1.Utils.addCSSRule(this._styles, content, "top: ".concat(top_1, "; right: ").concat(right, "; bottom: ").concat(bottom, "; left: ").concat(left, ";"));
             utils_1.Utils.addCSSRule(this._styles, placeholder, "top: ".concat(top_1, "; right: ").concat(right, "; bottom: ").concat(bottom, "; left: ").concat(left, ";"));
             // resize handles offset (to match margin)
+            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-n"), "top: ".concat(top_1, ";"));
+            utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-s"), "bottom: ".concat(bottom));
             utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-ne"), "right: ".concat(right));
             utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-e"), "right: ".concat(right));
             utils_1.Utils.addCSSRule(this._styles, "".concat(prefix, " > .ui-resizable-se"), "right: ".concat(right, "; bottom: ").concat(bottom));
@@ -1971,15 +1971,32 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var cellHeight, cellWidth;
         var onDrag = function (event, el, helper) {
             var _a;
+            var _b;
             var node = el.gridstackNode;
             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 (!((_b = node.grid) === null || _b === void 0 ? void 0 : _b.el)) {
+                // this scales the helper down
+                helper.style.transform = "scale(".concat(1 / _this.dragTransform.xScale, ",").concat(1 / _this.dragTransform.yScale, ")");
+                // this makes it so that the helper is well positioned relative to the mouse after scaling
+                var 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";
+            }
             var parent = _this.el.getBoundingClientRect();
             var top = (_a = helper.getBoundingClientRect(), _a.top), left = _a.left;
             left -= parent.left;
             top -= parent.top;
-            var ui = { position: { top: top, left: left } };
+            var 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));
@@ -2315,12 +2332,33 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     };
     /** @internal handles actual drag/resize start */
     GridStack.prototype._onStartMoving = function (el, event, ui, node, cellWidth, cellHeight) {
+        var _a;
         this.engine.cleanNodes()
             .beginUpdate(node);
         // @ts-ignore
         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 ((_a = node.grid) === null || _a === void 0 ? void 0 : _a.el) {
+            this.dragTransform = utils_1.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')) {
+            var gridEl = this.placeholder.closest('.grid-stack');
+            this.dragTransform = utils_1.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;
@@ -2437,6 +2475,9 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         var 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)
@@ -2470,7 +2511,7 @@ var GridStack = exports.GridStack = /** @class */ (function () {
     GridStack.Utils = utils_1.Utils;
     /** scoping so users can call new GridStack.Engine(12) for example */
     GridStack.Engine = gridstack_engine_1.GridStackEngine;
-    GridStack.GDRev = '10.0.1';
+    GridStack.GDRev = '10.1.1';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map