From 55e20b9795947bc41fc6687fa5a0c66cad5c08e5 Mon Sep 17 00:00:00 2001 From: Vitalii Demchuk Date: Wed, 15 Jun 2022 13:15:17 +0300 Subject: [PATCH 1/6] fix: nested grids --- src/gridstack-dd.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index 9f08fcdff..3e562e927 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -5,8 +5,8 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import { GridStackDDI } from './gridstack-ddi'; -import { GridItemHTMLElement, GridStackNode, GridStackElement, DDUIData, DDDragInOpt, GridStackPosition } from './types'; -import { GridStack, MousePosition } from './gridstack'; +import { GridItemHTMLElement, GridStackNode, GridStackElement, DDUIData, DDDragInOpt, GridStackPosition, GridStackOptions } from './types'; +import { GridStack, GridStackWidget, MousePosition } from './gridstack'; import { Utils } from './utils'; /** Drag&Drop drop options */ @@ -132,7 +132,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack { if (node?.grid === this) return true; if (!this.opts.acceptWidgets) return false; // prevent deeper nesting until rest of 992 can be fixed - if (node?.subGrid) return false; + // if (node?.subGrid) return false; // check for accept method or class matching let canAccept = true; if (typeof this.opts.acceptWidgets === 'function') { @@ -267,6 +267,18 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack { GridStackDD.get().remove(el); } if (!wasAdded) return false; + + if (node.subGrid) { + const subgrid = node.subGrid as GridStack; + const grid = node.grid as GridStack; + const item:GridStackWidget = { + ...node._orig, + content: node.content, + subGrid: subgrid.save(true, true) as GridStackOptions + } + return grid.load([item]); + } + el.gridstackNode = node; node.el = el; // @ts-ignore From b54600064f438b8f8c557259fd69d06795a9c639 Mon Sep 17 00:00:00 2001 From: Vitalii Demchuk Date: Wed, 15 Jun 2022 21:08:04 +0300 Subject: [PATCH 2/6] del: unused comment --- src/gridstack-dd.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index 3e562e927..94351beab 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -131,8 +131,6 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack { // set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving if (node?.grid === this) return true; if (!this.opts.acceptWidgets) return false; - // prevent deeper nesting until rest of 992 can be fixed - // if (node?.subGrid) return false; // check for accept method or class matching let canAccept = true; if (typeof this.opts.acceptWidgets === 'function') { From fca00132d6a29f39e8060de47da0d03d5ff7171c Mon Sep 17 00:00:00 2001 From: Vitalii Demchuk Date: Thu, 16 Jun 2022 10:10:50 +0300 Subject: [PATCH 3/6] fix: get original position --- src/gridstack-dd.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index 94351beab..b90570c6d 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -270,7 +270,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack { const subgrid = node.subGrid as GridStack; const grid = node.grid as GridStack; const item:GridStackWidget = { - ...node._orig, + ...this._readAttr(this.placeholder), content: node.content, subGrid: subgrid.save(true, true) as GridStackOptions } From 852b70cd3751c7448c110f6849d1ded35b9d545b Mon Sep 17 00:00:00 2001 From: Vitalii Demchuk Date: Mon, 27 Jun 2022 15:57:03 +0300 Subject: [PATCH 4/6] fix: drop event for subgrid --- demo/nested.html | 9 +++++++-- src/gridstack-dd.ts | 25 +++++++++++++------------ 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/demo/nested.html b/demo/nested.html index 086366e25..28b1a40e5 100644 --- a/demo/nested.html +++ b/demo/nested.html @@ -12,6 +12,8 @@ /* make nested grids have slightly darker bg */ .grid-stack.grid-stack-nested { background: #e4e4c1; + border: 2px dashed rgba(0, 0, 0, 0.4); + box-sizing: border-box; } /* make nested grid take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */ .grid-stack > .grid-stack-item.grid-stack-nested > .grid-stack-item-content { @@ -26,6 +28,9 @@ min-height: 100%; min-width: 100%; } + .grid-stack-item > .grid-stack-item-content { + inset: 5px !important; + } @@ -69,8 +74,8 @@

Nested grids demo

id: 'main', children: [ {y:0, content: 'regular item'}, - {x:1, w:4, h:4, subGrid: {children: sub1, dragOut: true, class: 'sub1', ...subOptions}}, - {x:5, w:3, h:4, subGrid: {children: sub2, class: 'sub2', ...subOptions}}, + {x:1, w:4, h:8, subGrid: {children: sub1, dragOut: true, class: 'sub1', ...subOptions}}, + {x:5, w:3, h:3, subGrid: {children: sub2, class: 'sub2', ...subOptions}}, ] }; diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index b90570c6d..5edb9bdfd 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -273,20 +273,21 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack { ...this._readAttr(this.placeholder), content: node.content, subGrid: subgrid.save(true, true) as GridStackOptions - } - return grid.load([item]); + }; + grid.load([item]); + } else { + el.gridstackNode = node; + node.el = el; + // placeholder values as moving VERY fast can throw things off #1578 + Utils.copyPos(node, this._readAttr(this.placeholder)); + Utils.removePositioningStyles(el); + this._writeAttr(el, node); + this.el.appendChild(el); + this._updateContainerHeight(); + this.engine.addedNodes.push(node); + this._triggerAddEvent(); } - el.gridstackNode = node; - node.el = el; - // @ts-ignore - Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578 - Utils.removePositioningStyles(el);// @ts-ignore - this._writeAttr(el, node); - this.el.appendChild(el);// @ts-ignore - this._updateContainerHeight(); - this.engine.addedNodes.push(node);// @ts-ignore - this._triggerAddEvent();// @ts-ignore this._triggerChangeEvent(); this.engine.endUpdate(); From 152694db6f23db3f412fa45d3c8e4183917ef68b Mon Sep 17 00:00:00 2001 From: Vitalii Demchuk Date: Fri, 1 Jul 2022 13:45:37 +0300 Subject: [PATCH 5/6] fix: subgrid styles on drop element --- src/gridstack-dd.ts | 35 +++++++++++++++-------------------- 1 file changed, 15 insertions(+), 20 deletions(-) diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index 5edb9bdfd..84226c646 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -266,28 +266,23 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack { } if (!wasAdded) return false; - if (node.subGrid) { - const subgrid = node.subGrid as GridStack; - const grid = node.grid as GridStack; - const item:GridStackWidget = { - ...this._readAttr(this.placeholder), - content: node.content, - subGrid: subgrid.save(true, true) as GridStackOptions - }; - grid.load([item]); - } else { - el.gridstackNode = node; - node.el = el; - // placeholder values as moving VERY fast can throw things off #1578 - Utils.copyPos(node, this._readAttr(this.placeholder)); - Utils.removePositioningStyles(el); - this._writeAttr(el, node); - this.el.appendChild(el); - this._updateContainerHeight(); - this.engine.addedNodes.push(node); - this._triggerAddEvent(); + el.gridstackNode = node; + node.el = el; + // placeholder values as moving VERY fast can throw things off #1578 + Utils.copyPos(node, this._readAttr(this.placeholder)); + Utils.removePositioningStyles(el); + this._writeAttr(el, node); + this.el.appendChild(el); + this._updateContainerHeight(); + + const subgrid = node.subGrid as GridStack; + if (subgrid) { + subgrid._updateStyles(true, subgrid.getRow()); } + this.engine.addedNodes.push(node); + + this._triggerAddEvent(); this._triggerChangeEvent(); this.engine.endUpdate(); From 3a629d1cf0c01a42cc68cd31beaa66a7d2b05833 Mon Sep 17 00:00:00 2001 From: Vitalii Demchuk Date: Fri, 1 Jul 2022 17:39:37 +0300 Subject: [PATCH 6/6] add: subgrid style comment --- src/gridstack-dd.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index 84226c646..0e5828717 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -275,6 +275,7 @@ GridStack.prototype._setupAcceptWidget = function(this: GridStack): GridStack { this.el.appendChild(el); this._updateContainerHeight(); + // if dropping a subgrid, make sure to update its style #1943 const subgrid = node.subGrid as GridStack; if (subgrid) { subgrid._updateStyles(true, subgrid.getRow());