gridstack - npm Package Compare versions

Comparing version 9.3.0 to 9.4.0

angular/package.json

@@ -21,3 +21,3 @@ {
     "@angular/router": "^14.2.0",
-    "gridstack": "^9.2.1",
+    "gridstack": "^9.3.0",
     "rxjs": "~7.5.0",
@@ -24,0 +24,0 @@ "tslib": "^2.3.0",

angular/projects/lib/package.json

 {
   "name": "gridstack-angular",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "peerDependencies": {
@@ -5,0 +5,0 @@ "@angular/common": "^14.2.0",

angular/projects/lib/src/lib/base-widget.ts

 /**
- * gridstack-item.component.ts 9.3.0
+ * gridstack-item.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

angular/projects/lib/src/lib/gridstack-item.component.ts

 /**
- * gridstack-item.component.ts 9.3.0
+ * gridstack-item.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

angular/projects/lib/src/lib/gridstack.component.ts

 /**
- * gridstack.component.ts 9.3.0
+ * gridstack.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

angular/projects/lib/src/lib/gridstack.module.ts

 /**
- * gridstack.component.ts 9.3.0
+ * gridstack.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/angular/lib/gridstack-item.component.d.ts

 /**
- * gridstack-item.component.ts 9.3.0
+ * gridstack-item.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/angular/lib/gridstack.component.d.ts

 /**
- * gridstack.component.ts 9.3.0
+ * gridstack.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/angular/package.json

 {
   "name": "gridstack-angular",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "peerDependencies": {
@@ -5,0 +5,0 @@ "@angular/common": "^14.2.0",

dist/angular/src/base-widget.ts

 /**
- * gridstack-item.component.ts 9.3.0
+ * gridstack-item.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/angular/src/gridstack-item.component.ts

 /**
- * gridstack-item.component.ts 9.3.0
+ * gridstack-item.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/angular/src/gridstack.component.ts

 /**
- * gridstack.component.ts 9.3.0
+ * gridstack.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/angular/src/gridstack.module.ts

 /**
- * gridstack.component.ts 9.3.0
+ * gridstack.component.ts 9.4.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-base-impl.d.ts

 /**
- * dd-base-impl.ts 9.3.0
+ * dd-base-impl.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-base-impl.js

 /**
- * dd-base-impl.ts 9.3.0
+ * dd-base-impl.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-draggable.d.ts

 /**
- * dd-draggable.ts 9.3.0
+ * dd-draggable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -21,6 +21,2 @@ */
     helper: HTMLElement;
-    protected origRelativeMouse: {
-        x: number;
-        y: number;
-    };
     constructor(el: HTMLElement, option?: DDDraggableOpt);
@@ -27,0 +23,0 @@ on(event: DDDragEvent, callback: (event: DragEvent) => void): void;

dist/dd-draggable.js

 /**
- * dd-draggable.ts 9.3.0
+ * dd-draggable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -153,6 +153,5 @@ */
             }
-            const rect = this.el.getBoundingClientRect();
-            this.origRelativeMouse = { x: s.clientX - rect.left, y: s.clientY - rect.top };
             this.helper = this._createHelper(e);
             this._setupHelperContainmentStyle();
+            this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
             const ev = Utils.initEvent(e, { target: this.el, type: 'dragstart' });
@@ -230,4 +229,4 @@ this._setupHelperStyle(e);
         // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (done in CSS as well)
-        style.width = this.el.offsetWidth + 'px';
-        style.height = this.el.offsetHeight + 'px';
+        style.width = this.dragOffset.width + 'px';
+        style.height = this.dragOffset.height + 'px';
         style.willChange = 'left, top';
@@ -266,14 +265,11 @@ style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
     _dragFollow(e) {
+        let containmentRect = { left: 0, top: 0 };
+        // if (this.helper.style.position === 'absolute') { // we use 'fixed'
+        //   const { left, top } = this.helperContainment.getBoundingClientRect();
+        //   containmentRect = { left, top };
+        // }
         const style = this.helper.style;
-        const { scaleX, scaleY } = Utils.getScaleForElement(this.helper);
-        const transformParent = Utils.getContainerForPositionFixedElement(this.helper);
-        const transformParentRect = transformParent.getBoundingClientRect();
-        // when an element is scaled, the helper is positioned relative to the first transformed parent, so we need to remove the extra offset
-        const offsetX = transformParentRect.left;
-        const offsetY = transformParentRect.top;
-        // Position the element under the mouse
-        const x = (e.clientX - offsetX - (this.origRelativeMouse?.x || 0)) / scaleX;
-        const y = (e.clientY - offsetY - (this.origRelativeMouse?.y || 0)) / scaleY;
-        style.left = `${x}px`;
-        style.top = `${y}px`;
+        const offset = this.dragOffset;
+        style.left = e.clientX + offset.offsetLeft - containmentRect.left + 'px';
+        style.top = e.clientY + offset.offsetTop - containmentRect.top + 'px';
     }
@@ -291,17 +287,44 @@ /** @internal */
     }
+    /** @internal */
+    _getDragOffset(event, el, parent) {
+        // in case ancestor has transform/perspective css properties that change the viewpoint
+        let xformOffsetX = 0;
+        let xformOffsetY = 0;
+        if (parent) {
+            const testEl = document.createElement('div');
+            Utils.addElStyles(testEl, {
+                opacity: '0',
+                position: 'fixed',
+                top: 0 + 'px',
+                left: 0 + 'px',
+                width: '1px',
+                height: '1px',
+                zIndex: '-999999',
+            });
+            parent.appendChild(testEl);
+            const testElPosition = testEl.getBoundingClientRect();
+            parent.removeChild(testEl);
+            xformOffsetX = testElPosition.left;
+            xformOffsetY = testElPosition.top;
+            // TODO: scale ?
+        }
+        const targetOffset = el.getBoundingClientRect();
+        return {
+            left: targetOffset.left,
+            top: targetOffset.top,
+            offsetLeft: -event.clientX + targetOffset.left - xformOffsetX,
+            offsetTop: -event.clientY + targetOffset.top - xformOffsetY,
+            width: targetOffset.width,
+            height: targetOffset.height
+        };
+    }
     /** @internal TODO: set to public as called by DDDroppable! */
     ui() {
         const containmentEl = this.el.parentElement;
-        const scrollElement = Utils.getScrollElement(this.el.parentElement);
         const containmentRect = containmentEl.getBoundingClientRect();
         const offset = this.helper.getBoundingClientRect();
-        const { scaleX, scaleY } = Utils.getScaleForElement(this.helper);
-        // When an element is inside a scrolled element, the boundingClientRect will return the position of the element minus the scroll.
-        const parentPositionIncludingScroll = containmentEl === scrollElement
-            ? { top: containmentRect.top + scrollElement.scrollTop, left: containmentRect.left + scrollElement.scrollLeft }
-            : { top: containmentRect.top, left: containmentRect.left };
         return {
             position: {
-                top: (offset.top - parentPositionIncludingScroll.top) / scaleY,
-                left: (offset.left - parentPositionIncludingScroll.left) / scaleX,
+                top: offset.top - containmentRect.top,
+                left: offset.left - containmentRect.left
             }
@@ -308,0 +331,0 @@ /* not used by GridStack for now...

dist/dd-droppable.d.ts

 /**
- * dd-droppable.ts 9.3.0
+ * dd-droppable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-droppable.js

 /**
- * dd-droppable.ts 9.3.0
+ * dd-droppable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-element.d.ts

 /**
- * dd-elements.ts 9.3.0
+ * dd-elements.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-element.js

 /**
- * dd-elements.ts 9.3.0
+ * dd-elements.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-gridstack.d.ts

 /**
- * dd-gridstack.ts 9.3.0
+ * dd-gridstack.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-gridstack.js

 /**
- * dd-gridstack.ts 9.3.0
+ * dd-gridstack.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-manager.d.ts

 /**
- * dd-manager.ts 9.3.0
+ * dd-manager.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-manager.js

 /**
- * dd-manager.ts 9.3.0
+ * dd-manager.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-resizable-handle.d.ts

 /**
- * dd-resizable-handle.ts 9.3.0
+ * dd-resizable-handle.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-resizable-handle.js

 /**
- * dd-resizable-handle.ts 9.3.0
+ * dd-resizable-handle.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-resizable.d.ts

 /**
- * dd-resizable.ts 9.3.0
+ * dd-resizable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-resizable.js

 /**
- * dd-resizable.ts 9.3.0
+ * dd-resizable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -14,8 +14,9 @@ */
         this._ui = () => {
-            const { scaleX, scaleY } = Utils.getScaleForElement(this.el);
+            const containmentEl = this.el.parentElement;
+            const containmentRect = containmentEl.getBoundingClientRect();
             const newRect = {
                 width: this.originalRect.width,
-                height: (this.originalRect.height + this.scrolled),
+                height: this.originalRect.height + this.scrolled,
                 left: this.originalRect.left,
-                top: (this.originalRect.top - this.scrolled)
+                top: this.originalRect.top - this.scrolled
             };
@@ -25,8 +26,8 @@ const rect = this.temporalRect || newRect;
                 position: {
-                    left: rect.left / scaleX,
-                    top: rect.top / scaleY,
+                    left: rect.left - containmentRect.left,
+                    top: rect.top - containmentRect.top
                 },
                 size: {
-                    width: rect.width / scaleX,
-                    height: rect.height / scaleY,
+                    width: rect.width,
+                    height: rect.height
                 }
@@ -219,9 +220,7 @@ /* Gridstack ONLY needs position set above... keep around in case.
         const oEvent = this.startEvent;
-        const containerElement = Utils.getPositionContainerElement(this.el.parentElement);
-        const containerRect = containerElement.getBoundingClientRect();
         const newRect = {
             width: this.originalRect.width,
             height: this.originalRect.height + this.scrolled,
-            left: this.originalRect.left - containerRect.left,
-            top: this.originalRect.top - this.scrolled - containerRect.top
+            left: this.originalRect.left,
+            top: this.originalRect.top - this.scrolled
         };
@@ -261,8 +260,6 @@ const offsetX = event.clientX - oEvent.clientX;
     _constrainSize(oWidth, oHeight) {
-        const { scaleX, scaleY } = Utils.getScaleForElement(this.el);
-        const o = this.option;
-        const maxWidth = o.maxWidth ? o.maxWidth * scaleX : Number.MAX_SAFE_INTEGER;
-        const minWidth = o.minWidth ? o.minWidth * scaleX : oWidth;
-        const maxHeight = o.maxHeight ? o.maxHeight * scaleY : Number.MAX_SAFE_INTEGER;
-        const minHeight = o.minHeight ? o.minHeight * scaleY : oHeight;
+        const maxWidth = this.option.maxWidth || Number.MAX_SAFE_INTEGER;
+        const minWidth = this.option.minWidth || oWidth;
+        const maxHeight = this.option.maxHeight || Number.MAX_SAFE_INTEGER;
+        const minHeight = this.option.minHeight || oHeight;
         const width = Math.min(maxWidth, Math.max(minWidth, oWidth));
@@ -274,9 +271,14 @@ const height = Math.min(maxHeight, Math.max(minHeight, oHeight));
     _applyChange() {
+        let containmentRect = { left: 0, top: 0, width: 0, height: 0 };
+        if (this.el.style.position === 'absolute') {
+            const containmentEl = this.el.parentElement;
+            const { left, top } = containmentEl.getBoundingClientRect();
+            containmentRect = { left, top, width: 0, height: 0 };
+        }
         if (!this.temporalRect)
             return this;
-        const { scaleX, scaleY } = Utils.getScaleForElement(this.el);
-        this.el.style.width = `${Math.round(this.temporalRect.width / scaleX)}px`;
-        this.el.style.height = `${Math.round(this.temporalRect.height / scaleY)}px`;
-        this.el.style.top = `${Math.round(this.temporalRect.top / scaleY)}px`;
-        this.el.style.left = `${Math.round(this.temporalRect.left / scaleX)}px`;
+        Object.keys(this.temporalRect).forEach(key => {
+            const value = this.temporalRect[key];
+            this.el.style[key] = value - containmentRect[key] + 'px';
+        });
         return this;
@@ -283,0 +285,0 @@ }

dist/dd-touch.d.ts

 /**
- * touch.ts 9.3.0
+ * touch.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-touch.js

 /**
- * touch.ts 9.3.0
+ * touch.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-base-impl.d.ts

 /**
- * dd-base-impl.ts 9.3.0
+ * dd-base-impl.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-base-impl.js

 "use strict";
 /**
- * dd-base-impl.ts 9.3.0
+ * dd-base-impl.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-draggable.d.ts

 /**
- * dd-draggable.ts 9.3.0
+ * dd-draggable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -21,6 +21,2 @@ */
     helper: HTMLElement;
-    protected origRelativeMouse: {
-        x: number;
-        y: number;
-    };
     constructor(el: HTMLElement, option?: DDDraggableOpt);
@@ -27,0 +23,0 @@ on(event: DDDragEvent, callback: (event: DragEvent) => void): void;

dist/es5/dd-draggable.js

 "use strict";
 /**
- * dd-draggable.ts 9.3.0
+ * dd-draggable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -178,6 +178,5 @@ */
             }
-            var rect = this.el.getBoundingClientRect();
-            this.origRelativeMouse = { x: s.clientX - rect.left, y: s.clientY - rect.top };
             this.helper = this._createHelper(e);
             this._setupHelperContainmentStyle();
+            this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
             var ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dragstart' });
@@ -258,4 +257,4 @@ this._setupHelperStyle(e);
         // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (done in CSS as well)
-        style.width = this.el.offsetWidth + 'px';
-        style.height = this.el.offsetHeight + 'px';
+        style.width = this.dragOffset.width + 'px';
+        style.height = this.dragOffset.height + 'px';
         style.willChange = 'left, top';
@@ -296,16 +295,11 @@ style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'
     DDDraggable.prototype._dragFollow = function (e) {
-        var _a;
-        var _b, _c;
+        var containmentRect = { left: 0, top: 0 };
+        // if (this.helper.style.position === 'absolute') { // we use 'fixed'
+        //   const { left, top } = this.helperContainment.getBoundingClientRect();
+        //   containmentRect = { left, top };
+        // }
         var style = this.helper.style;
-        var scaleX = (_a = utils_1.Utils.getScaleForElement(this.helper), _a.scaleX), scaleY = _a.scaleY;
-        var transformParent = utils_1.Utils.getContainerForPositionFixedElement(this.helper);
-        var transformParentRect = transformParent.getBoundingClientRect();
-        // when an element is scaled, the helper is positioned relative to the first transformed parent, so we need to remove the extra offset
-        var offsetX = transformParentRect.left;
-        var offsetY = transformParentRect.top;
-        // Position the element under the mouse
-        var x = (e.clientX - offsetX - (((_b = this.origRelativeMouse) === null || _b === void 0 ? void 0 : _b.x) || 0)) / scaleX;
-        var y = (e.clientY - offsetY - (((_c = this.origRelativeMouse) === null || _c === void 0 ? void 0 : _c.y) || 0)) / scaleY;
-        style.left = "".concat(x, "px");
-        style.top = "".concat(y, "px");
+        var offset = this.dragOffset;
+        style.left = e.clientX + offset.offsetLeft - containmentRect.left + 'px';
+        style.top = e.clientY + offset.offsetTop - containmentRect.top + 'px';
     };
@@ -323,18 +317,44 @@ /** @internal */
     };
+    /** @internal */
+    DDDraggable.prototype._getDragOffset = function (event, el, parent) {
+        // in case ancestor has transform/perspective css properties that change the viewpoint
+        var xformOffsetX = 0;
+        var xformOffsetY = 0;
+        if (parent) {
+            var testEl = document.createElement('div');
+            utils_1.Utils.addElStyles(testEl, {
+                opacity: '0',
+                position: 'fixed',
+                top: 0 + 'px',
+                left: 0 + 'px',
+                width: '1px',
+                height: '1px',
+                zIndex: '-999999',
+            });
+            parent.appendChild(testEl);
+            var testElPosition = testEl.getBoundingClientRect();
+            parent.removeChild(testEl);
+            xformOffsetX = testElPosition.left;
+            xformOffsetY = testElPosition.top;
+            // TODO: scale ?
+        }
+        var targetOffset = el.getBoundingClientRect();
+        return {
+            left: targetOffset.left,
+            top: targetOffset.top,
+            offsetLeft: -event.clientX + targetOffset.left - xformOffsetX,
+            offsetTop: -event.clientY + targetOffset.top - xformOffsetY,
+            width: targetOffset.width,
+            height: targetOffset.height
+        };
+    };
     /** @internal TODO: set to public as called by DDDroppable! */
     DDDraggable.prototype.ui = function () {
-        var _a;
         var containmentEl = this.el.parentElement;
-        var scrollElement = utils_1.Utils.getScrollElement(this.el.parentElement);
         var containmentRect = containmentEl.getBoundingClientRect();
         var offset = this.helper.getBoundingClientRect();
-        var scaleX = (_a = utils_1.Utils.getScaleForElement(this.helper), _a.scaleX), scaleY = _a.scaleY;
-        // When an element is inside a scrolled element, the boundingClientRect will return the position of the element minus the scroll.
-        var parentPositionIncludingScroll = containmentEl === scrollElement
-            ? { top: containmentRect.top + scrollElement.scrollTop, left: containmentRect.left + scrollElement.scrollLeft }
-            : { top: containmentRect.top, left: containmentRect.left };
         return {
             position: {
-                top: (offset.top - parentPositionIncludingScroll.top) / scaleY,
-                left: (offset.left - parentPositionIncludingScroll.left) / scaleX,
+                top: offset.top - containmentRect.top,
+                left: offset.left - containmentRect.left
             }
@@ -341,0 +361,0 @@ /* not used by GridStack for now...

dist/es5/dd-droppable.d.ts

 /**
- * dd-droppable.ts 9.3.0
+ * dd-droppable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-droppable.js

 "use strict";
 /**
- * dd-droppable.ts 9.3.0
+ * dd-droppable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-element.d.ts

 /**
- * dd-elements.ts 9.3.0
+ * dd-elements.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-element.js

 "use strict";
 /**
- * dd-elements.ts 9.3.0
+ * dd-elements.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-gridstack.d.ts

 /**
- * dd-gridstack.ts 9.3.0
+ * dd-gridstack.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-gridstack.js

 "use strict";
 /**
- * dd-gridstack.ts 9.3.0
+ * dd-gridstack.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-manager.d.ts

 /**
- * dd-manager.ts 9.3.0
+ * dd-manager.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-manager.js

 "use strict";
 /**
- * dd-manager.ts 9.3.0
+ * dd-manager.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-resizable-handle.d.ts

 /**
- * dd-resizable-handle.ts 9.3.0
+ * dd-resizable-handle.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-resizable-handle.js

 "use strict";
 /**
- * dd-resizable-handle.ts 9.3.0
+ * dd-resizable-handle.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-resizable.d.ts

 /**
- * dd-resizable.ts 9.3.0
+ * dd-resizable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-resizable.js

 "use strict";
 /**
- * dd-resizable.ts 9.3.0
+ * dd-resizable.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -34,9 +34,9 @@ */
         _this._ui = function () {
-            var _a;
-            var scaleX = (_a = utils_1.Utils.getScaleForElement(_this.el), _a.scaleX), scaleY = _a.scaleY;
+            var containmentEl = _this.el.parentElement;
+            var containmentRect = containmentEl.getBoundingClientRect();
             var newRect = {
                 width: _this.originalRect.width,
-                height: (_this.originalRect.height + _this.scrolled),
+                height: _this.originalRect.height + _this.scrolled,
                 left: _this.originalRect.left,
-                top: (_this.originalRect.top - _this.scrolled)
+                top: _this.originalRect.top - _this.scrolled
             };
@@ -46,8 +46,8 @@ var rect = _this.temporalRect || newRect;
                 position: {
-                    left: rect.left / scaleX,
-                    top: rect.top / scaleY,
+                    left: rect.left - containmentRect.left,
+                    top: rect.top - containmentRect.top
                 },
                 size: {
-                    width: rect.width / scaleX,
-                    height: rect.height / scaleY,
+                    width: rect.width,
+                    height: rect.height
                 }
@@ -245,9 +245,7 @@ /* Gridstack ONLY needs position set above... keep around in case.
         var oEvent = this.startEvent;
-        var containerElement = utils_1.Utils.getPositionContainerElement(this.el.parentElement);
-        var containerRect = containerElement.getBoundingClientRect();
         var newRect = {
             width: this.originalRect.width,
             height: this.originalRect.height + this.scrolled,
-            left: this.originalRect.left - containerRect.left,
-            top: this.originalRect.top - this.scrolled - containerRect.top
+            left: this.originalRect.left,
+            top: this.originalRect.top - this.scrolled
         };
@@ -287,9 +285,6 @@ var offsetX = event.clientX - oEvent.clientX;
     DDResizable.prototype._constrainSize = function (oWidth, oHeight) {
-        var _a;
-        var scaleX = (_a = utils_1.Utils.getScaleForElement(this.el), _a.scaleX), scaleY = _a.scaleY;
-        var o = this.option;
-        var maxWidth = o.maxWidth ? o.maxWidth * scaleX : Number.MAX_SAFE_INTEGER;
-        var minWidth = o.minWidth ? o.minWidth * scaleX : oWidth;
-        var maxHeight = o.maxHeight ? o.maxHeight * scaleY : Number.MAX_SAFE_INTEGER;
-        var minHeight = o.minHeight ? o.minHeight * scaleY : oHeight;
+        var maxWidth = this.option.maxWidth || Number.MAX_SAFE_INTEGER;
+        var minWidth = this.option.minWidth || oWidth;
+        var maxHeight = this.option.maxHeight || Number.MAX_SAFE_INTEGER;
+        var minHeight = this.option.minHeight || oHeight;
         var width = Math.min(maxWidth, Math.max(minWidth, oWidth));
@@ -302,9 +297,15 @@ var height = Math.min(maxHeight, Math.max(minHeight, oHeight));
         var _a;
+        var _this = this;
+        var containmentRect = { left: 0, top: 0, width: 0, height: 0 };
+        if (this.el.style.position === 'absolute') {
+            var containmentEl = this.el.parentElement;
+            var left = (_a = containmentEl.getBoundingClientRect(), _a.left), top_1 = _a.top;
+            containmentRect = { left: left, top: top_1, width: 0, height: 0 };
+        }
         if (!this.temporalRect)
             return this;
-        var scaleX = (_a = utils_1.Utils.getScaleForElement(this.el), _a.scaleX), scaleY = _a.scaleY;
-        this.el.style.width = "".concat(Math.round(this.temporalRect.width / scaleX), "px");
-        this.el.style.height = "".concat(Math.round(this.temporalRect.height / scaleY), "px");
-        this.el.style.top = "".concat(Math.round(this.temporalRect.top / scaleY), "px");
-        this.el.style.left = "".concat(Math.round(this.temporalRect.left / scaleX), "px");
+        Object.keys(this.temporalRect).forEach(function (key) {
+            var value = _this.temporalRect[key];
+            _this.el.style[key] = value - containmentRect[key] + 'px';
+        });
         return this;
@@ -311,0 +312,0 @@ };

dist/es5/dd-touch.d.ts

 /**
- * touch.ts 9.3.0
+ * touch.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-touch.js

 "use strict";
 /**
- * touch.ts 9.3.0
+ * touch.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/gridstack-all.js.LICENSE.txt

 /*!
- * GridStack 9.3.0
+ * GridStack 9.4.0
  * https://gridstackjs.com/
@@ -4,0 +4,0 @@ *

dist/es5/gridstack-engine.d.ts

 /**
- * gridstack-engine.ts 9.3.0
+ * gridstack-engine.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/gridstack-engine.js

 "use strict";
 /**
- * gridstack-engine.ts 9.3.0
+ * gridstack-engine.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -721,3 +721,3 @@ */
         var wasUndefinedPack;
-        if (o.pack === undefined) {
+        if (o.pack === undefined && !this.batchMode) {
             wasUndefinedPack = o.pack = true;
@@ -743,3 +743,3 @@ }
         utils_1.Utils.copyPos(o, nn);
-        if (utils_1.Utils.samePos(node, o))
+        if (!o.forceCollide && utils_1.Utils.samePos(node, o))
             return false;
@@ -746,0 +746,0 @@ var prevPos = utils_1.Utils.copyPos({}, node);

dist/es5/gridstack-poly.js

 /**
- * gridstack-poly.ts 9.3.0 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
+ * gridstack-poly.ts 9.4.0 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/gridstack.d.ts

 /*!
- * GridStack 9.3.0
+ * GridStack 9.4.0
  * https://gridstackjs.com/
@@ -167,3 +167,3 @@ *
      */
-    load(layout: GridStackWidget[], addRemove?: boolean | AddRemoveFcn): GridStack;
+    load(items: GridStackWidget[], addRemove?: boolean | AddRemoveFcn): GridStack;
     /**
@@ -170,0 +170,0 @@ * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)

dist/es5/types.d.ts

 /**
- * types.ts 9.3.0
+ * types.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -194,2 +194,4 @@ */
     collide?: GridStackNode;
+    /** for collision check even if we don't move */
+    forceCollide?: boolean;
 }
@@ -196,0 +198,0 @@ export interface GridStackPosition {

dist/es5/types.js

 "use strict";
 /**
- * types.ts 9.3.0
+ * types.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/utils.d.ts

 /**
- * utils.ts 9.3.0
+ * utils.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -43,2 +43,4 @@ */
     static sort(nodes: GridStackNode[], dir?: 1 | -1, column?: number): GridStackNode[];
+    /** find an item by id */
+    static find(nodes: GridStackNode[], id: string): GridStackNode | undefined;
     /**
@@ -78,4 +80,2 @@ * creates a style sheet with style id under given parent
     static removePositioningStyles(el: HTMLElement): void;
-    static getPositionContainerElement(el: HTMLElement): HTMLElement;
-    static getContainerForPositionFixedElement(el: HTMLElement): HTMLElement;
     /** single level clone, returning a new object with same top fields. This will share sub objects and arrays */
@@ -100,6 +100,2 @@ static clone<T>(obj: T): T;
     static simulateMouseEvent(e: MouseEvent, simulatedType: string, target?: EventTarget): void;
-    static getScaleForElement(element: HTMLElement): {
-        scaleX: number;
-        scaleY: number;
-    };
 }

dist/es5/utils.js

 "use strict";
 /**
- * utils.ts 9.3.0
+ * utils.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -170,2 +170,6 @@ */
     };
+    /** find an item by id */
+    Utils.find = function (nodes, id) {
+        return id ? nodes.find(function (n) { return n.id === id; }) : undefined;
+    };
     /**
@@ -314,3 +318,3 @@ * creates a style sheet with style id under given parent
     Utils.samePos = function (a, b) {
-        return a && b && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+        return a && b && a.x === b.x && a.y === b.y && (a.w || 1) === (b.w || 1) && (a.h || 1) === (b.h || 1);
     };
@@ -431,19 +435,2 @@ /** given a node, makes sure it's min/max are valid */
     };
-    Utils.getPositionContainerElement = function (el) {
-        if (!el)
-            return null;
-        var style = getComputedStyle(el);
-        if (style.position === 'relative' || style.position === 'absolute' || style.position === 'fixed') {
-            return el;
-        }
-        else {
-            return Utils.getPositionContainerElement(el.parentElement);
-        }
-    };
-    Utils.getContainerForPositionFixedElement = function (el) {
-        while (el !== document.documentElement && el.parentElement && getComputedStyle(el).transform === 'none') {
-            el = el.parentElement;
-        }
-        return el;
-    };
     /** @internal */
@@ -628,15 +615,2 @@ Utils.updateScrollPosition = function (el, position, distance) {
     };
-    Utils.getScaleForElement = function (element) {
-        // Check if element is visible, otherwise the width/height will be of 0
-        while (element && !element.offsetParent) {
-            element = element.parentElement;
-        }
-        if (!element) {
-            return { scaleX: 1, scaleY: 1 };
-        }
-        var boundingClientRect = element.getBoundingClientRect();
-        var scaleX = boundingClientRect.width / element.offsetWidth;
-        var scaleY = boundingClientRect.height / element.offsetHeight;
-        return { scaleX: scaleX, scaleY: scaleY };
-    };
     return Utils;
@@ -643,0 +617,0 @@ }());

dist/gridstack-all.js.LICENSE.txt

 /*!
- * GridStack 9.3.0
+ * GridStack 9.4.0
  * https://gridstackjs.com/
@@ -4,0 +4,0 @@ *

dist/gridstack-engine.d.ts

 /**
- * gridstack-engine.ts 9.3.0
+ * gridstack-engine.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/gridstack-engine.js

 /**
- * gridstack-engine.ts 9.3.0
+ * gridstack-engine.ts 9.4.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -676,3 +676,3 @@ */
         let wasUndefinedPack;
-        if (o.pack === undefined) {
+        if (o.pack === undefined && !this.batchMode) {
             wasUndefinedPack = o.pack = true;
@@ -698,3 +698,3 @@ }
         Utils.copyPos(o, nn);
-        if (Utils.samePos(node, o))
+        if (!o.forceCollide && Utils.samePos(node, o))
             return false;
@@ -701,0 +701,0 @@ let prevPos = Utils.copyPos({}, node);

dist/gridstack.d.ts

 /*!
- * GridStack 9.3.0
+ * GridStack 9.4.0
  * https://gridstackjs.com/
@@ -167,3 +167,3 @@ *
      */
-    load(layout: GridStackWidget[], addRemove?: boolean | AddRemoveFcn): GridStack;
+    load(items: GridStackWidget[], addRemove?: boolean | AddRemoveFcn): GridStack;
     /**
@@ -170,0 +170,0 @@ * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)

dist/types.d.ts

 /**
- * types.ts 9.3.0
+ * types.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -194,2 +194,4 @@ */
     collide?: GridStackNode;
+    /** for collision check even if we don't move */
+    forceCollide?: boolean;
 }
@@ -196,0 +198,0 @@ export interface GridStackPosition {

dist/types.js

 /**
- * types.ts 9.3.0
+ * types.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/utils.d.ts

 /**
- * utils.ts 9.3.0
+ * utils.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -43,2 +43,4 @@ */
     static sort(nodes: GridStackNode[], dir?: 1 | -1, column?: number): GridStackNode[];
+    /** find an item by id */
+    static find(nodes: GridStackNode[], id: string): GridStackNode | undefined;
     /**
@@ -78,4 +80,2 @@ * creates a style sheet with style id under given parent
     static removePositioningStyles(el: HTMLElement): void;
-    static getPositionContainerElement(el: HTMLElement): HTMLElement;
-    static getContainerForPositionFixedElement(el: HTMLElement): HTMLElement;
     /** single level clone, returning a new object with same top fields. This will share sub objects and arrays */
@@ -100,6 +100,2 @@ static clone<T>(obj: T): T;
     static simulateMouseEvent(e: MouseEvent, simulatedType: string, target?: EventTarget): void;
-    static getScaleForElement(element: HTMLElement): {
-        scaleX: number;
-        scaleY: number;
-    };
 }

dist/utils.js

 /**
- * utils.ts 9.3.0
+ * utils.ts 9.4.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -134,2 +134,6 @@ */
     }
+    /** find an item by id */
+    static find(nodes, id) {
+        return id ? nodes.find(n => n.id === id) : undefined;
+    }
     /**
@@ -272,3 +276,3 @@ * creates a style sheet with style id under given parent
     static samePos(a, b) {
-        return a && b && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+        return a && b && a.x === b.x && a.y === b.y && (a.w || 1) === (b.w || 1) && (a.h || 1) === (b.h || 1);
     }
@@ -384,19 +388,2 @@ /** given a node, makes sure it's min/max are valid */
     }
-    static getPositionContainerElement(el) {
-        if (!el)
-            return null;
-        const style = getComputedStyle(el);
-        if (style.position === 'relative' || style.position === 'absolute' || style.position === 'fixed') {
-            return el;
-        }
-        else {
-            return Utils.getPositionContainerElement(el.parentElement);
-        }
-    }
-    static getContainerForPositionFixedElement(el) {
-        while (el !== document.documentElement && el.parentElement && getComputedStyle(el).transform === 'none') {
-            el = el.parentElement;
-        }
-        return el;
-    }
     /** @internal */
@@ -575,16 +562,3 @@ static updateScrollPosition(el, position, distance) {
     }
-    static getScaleForElement(element) {
-        // Check if element is visible, otherwise the width/height will be of 0
-        while (element && !element.offsetParent) {
-            element = element.parentElement;
-        }
-        if (!element) {
-            return { scaleX: 1, scaleY: 1 };
-        }
-        const boundingClientRect = element.getBoundingClientRect();
-        const scaleX = boundingClientRect.width / element.offsetWidth;
-        const scaleY = boundingClientRect.height / element.offsetHeight;
-        return { scaleX, scaleY };
-    }
 }
 //# sourceMappingURL=utils.js.map

doc/CHANGES.md

@@ -8,2 +8,3 @@ Change log
 
+- [9.4.0 (2023-10-15)](#940-2023-10-15)
 - [9.3.0 (2023-09-30)](#930-2023-09-30)
@@ -105,2 +106,6 @@ - [9.2.2 (2023-09-27)](#922-2023-09-27)
 
+## 9.4.0 (2023-10-15)
+* revert [#1275](https://github.com/gridstack/gridstack.js/issues/1275) div scale support - causing too many issues for now (#2498 #2497 #2491)
+* fix [#2492](https://github.com/gridstack/gridstack.js/issues/2492) calling load() allows overlapping widgets
+
 ## 9.3.0 (2023-09-30)
@@ -107,0 +112,0 @@ * fix [#1275](https://github.com/gridstack/gridstack.js/issues/1275) div scale support - Thank you [VincentMolinie](https://github.com/VincentMolinie) for implementing this

package.json

 {
   "name": "gridstack",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Alain Dumesny <[e-mail]> (https://github.com/adumesny)",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

17872

increased by0.12%

Worsened metrics

Total package byte prevSize

2792043

decreased by-0.1%

No dependency changes