gridstack 10.0.1 → 10.1.0

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.0
  * https://gridstackjs.com/
  *
  * Copyright (c) 2021-2022 Alain Dumesny
@@ -84,6 +84,8 @@ var GridStack = exports.GridStack = /** @class */ (function () {
         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
@@ -109,7 +111,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;
@@ -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.0';
     return GridStack;
 }());
 //# sourceMappingURL=gridstack.js.map