From bd50426a6508e5c994597cf23f31a31fb9c5a3f9 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sat, 20 Mar 2021 00:45:02 -0700 Subject: [PATCH] serialization of nested grid fix #1661 * fix error when clearing default options * fix to not save list of children options * nested demo now has save/clear/load to verify all works fine. --- demo/nested.html | 20 +++++++++++++++++--- doc/CHANGES.md | 5 +++++ package.json | 2 +- src/gridstack-dd.ts | 2 +- src/gridstack-ddi.ts | 2 +- src/gridstack-engine.ts | 2 +- src/gridstack.ts | 8 +++++--- src/h5/dd-base-impl.ts | 2 +- src/h5/dd-draggable.ts | 2 +- src/h5/dd-droppable.ts | 2 +- src/h5/dd-element.ts | 2 +- src/h5/dd-manager.ts | 2 +- src/h5/dd-resizable-handle.ts | 2 +- src/h5/dd-resizable.ts | 2 +- src/h5/dd-utils.ts | 2 +- src/h5/gridstack-dd-native.ts | 2 +- src/index-h5.ts | 2 +- src/index-jq.ts | 2 +- src/index-static.ts | 2 +- src/jq/gridstack-dd-jqueryui.ts | 2 +- src/types.ts | 2 +- src/utils.ts | 4 ++-- 22 files changed, 47 insertions(+), 26 deletions(-) diff --git a/demo/nested.html b/demo/nested.html index 67856c370..ff754adc4 100644 --- a/demo/nested.html +++ b/demo/nested.html @@ -24,6 +24,9 @@

Nested grids demo

Note: initial v3 HTML5 release doesn't support 'dragOut:false' constrain so use jq version if you need that.

Add Widget Grid1 Add Widget Grid2 + Save + Clear + Load

@@ -41,17 +44,16 @@

Nested grids demo

minWidth: 300, // min to go 1 column mode margin: 1 }; - let opts = {cellHeight: 70, children: [ + let json = {cellHeight: 70, children: [ {y:0, content: 'regular item'}, {x:1, w:4, h:4, content: 'nested 1 - can drag items out', subGrid: {children: sub1, dragOut: true, class: 'nested1', ...subOptions}}, {x:5, w:4, h:4, content: 'nested 2 - constrained to parent (default)', subGrid: {children: sub2, class: 'nested2', ...subOptions}}, ]}; // create and load it all from JSON above - GridStack.addGrid(document.querySelector('.container-fluid'), opts); + let grid = GridStack.addGrid(document.querySelector('.container-fluid'), json); addNewWidget = function(selector) { - grid = document.querySelector(selector).gridstack; let node = { x: Math.round(12 * Math.random()), y: Math.round(5 * Math.random()), @@ -62,6 +64,18 @@

Nested grids demo

grid.addWidget(node); return false; }; + + save = function() { + json = grid.save(true, true); + } + destroy = function() { + grid.destroy(); + grid = undefined; + } + load = function() { + grid = GridStack.addGrid(document.querySelector('.container-fluid'), json); + } + diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 2c9e5847d..c71d86af0 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -5,6 +5,7 @@ Change log **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* +- [4.0.0-dev](#400-dev) - [4.0.0 (2021-3-19)](#400-2021-3-19) - [3.3.0 (2021-2-2)](#330-2021-2-2) - [3.2.0 (2021-1-25)](#320-2021-1-25) @@ -48,6 +49,10 @@ Change log - [v0.1.0 (2014-11-18)](#v010-2014-11-18) +## 4.0.0-dev + +- fix [#1661](https://github.com/gridstack/gridstack.js/issues/1661) serialization of nested grid + ## 4.0.0 (2021-3-19) - fix [#149](https://github.com/gridstack/gridstack.js/issues/149) [#1094](https://github.com/gridstack/gridstack.js/issues/1094) [#1605](https://github.com/gridstack/gridstack.js/issues/1605) [#1534](https://github.com/gridstack/gridstack.js/issues/1534) re-write of the **collision code - fixing 6 years old most requested request** diff --git a/package.json b/package.json index 1b1927653..1ed0776c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gridstack", - "version": "4.0.0", + "version": "4.0.0-dev", "description": "TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)", "main": "./dist/gridstack.js", "types": "./dist/gridstack.d.ts", diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts index 437866ebe..b72c7998c 100644 --- a/src/gridstack-dd.ts +++ b/src/gridstack-dd.ts @@ -1,4 +1,4 @@ -// gridstack-GridStackDD.get().ts 4.0.0 +// gridstack-GridStackDD.get().ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license /* eslint-disable @typescript-eslint/no-unused-vars */ import { GridStackDDI } from './gridstack-ddi'; diff --git a/src/gridstack-ddi.ts b/src/gridstack-ddi.ts index b42705a69..627f9b549 100644 --- a/src/gridstack-ddi.ts +++ b/src/gridstack-ddi.ts @@ -1,4 +1,4 @@ -// gridstack-ddi.ts 4.0.0 +// gridstack-ddi.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { GridItemHTMLElement } from './types'; diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts index f7fb5d007..37b55a227 100644 --- a/src/gridstack-engine.ts +++ b/src/gridstack-engine.ts @@ -1,4 +1,4 @@ -// gridstack-engine.ts 4.0.0 +// gridstack-engine.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { Utils } from './utils'; import { GridStackNode, ColumnOptions, GridStackPosition, GridStackMoveOpts } from './types'; diff --git a/src/gridstack.ts b/src/gridstack.ts index 78fb345bf..b2c3450d7 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -1,4 +1,4 @@ -// gridstack.ts 4.0.0 +// gridstack.ts 4.0.0-dev /*! * (c) 2021 Alain Dumesny - see root license */ @@ -164,8 +164,10 @@ export class GridStack { // create grid class and load any children let grid = GridStack.init(opt, el); - if (opt.children) { - grid.load(opt.children); + if (grid.opts.children) { + let children = grid.opts.children; + delete grid.opts.children; + grid.load(children); } return grid; } diff --git a/src/h5/dd-base-impl.ts b/src/h5/dd-base-impl.ts index 66a4ae9f1..7d3f4d669 100644 --- a/src/h5/dd-base-impl.ts +++ b/src/h5/dd-base-impl.ts @@ -1,4 +1,4 @@ -// dd-base-impl.ts 4.0.0 +// dd-base-impl.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license export type EventCallback = (event: Event) => boolean|void; export abstract class DDBaseImplement { diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts index 9963b6b0c..931be34bc 100644 --- a/src/h5/dd-draggable.ts +++ b/src/h5/dd-draggable.ts @@ -1,4 +1,4 @@ -// dd-draggable.ts 4.0.0 +// dd-draggable.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { DDManager } from './dd-manager'; import { DDUtils } from './dd-utils'; diff --git a/src/h5/dd-droppable.ts b/src/h5/dd-droppable.ts index ecc03e952..f0ac08e30 100644 --- a/src/h5/dd-droppable.ts +++ b/src/h5/dd-droppable.ts @@ -1,4 +1,4 @@ -// dd-droppable.ts 4.0.0 +// dd-droppable.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { DDDraggable } from './dd-draggable'; import { DDManager } from './dd-manager'; diff --git a/src/h5/dd-element.ts b/src/h5/dd-element.ts index 3bd7c0b1e..e1fbf2cb3 100644 --- a/src/h5/dd-element.ts +++ b/src/h5/dd-element.ts @@ -1,4 +1,4 @@ -// dd-elements.ts 4.0.0 +// dd-elements.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { DDResizable, DDResizableOpt } from './dd-resizable'; import { GridItemHTMLElement } from './../types'; diff --git a/src/h5/dd-manager.ts b/src/h5/dd-manager.ts index c1248b9e6..d030a16b0 100644 --- a/src/h5/dd-manager.ts +++ b/src/h5/dd-manager.ts @@ -1,4 +1,4 @@ -// dd-manager.ts 4.0.0 +// dd-manager.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { DDDraggable } from './dd-draggable'; diff --git a/src/h5/dd-resizable-handle.ts b/src/h5/dd-resizable-handle.ts index 85ec4a252..c61bacc93 100644 --- a/src/h5/dd-resizable-handle.ts +++ b/src/h5/dd-resizable-handle.ts @@ -1,4 +1,4 @@ -// dd-resizable-handle.ts 4.0.0 +// dd-resizable-handle.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license export interface DDResizableHandleOpt { start?: (event) => void; diff --git a/src/h5/dd-resizable.ts b/src/h5/dd-resizable.ts index 75d4c7db2..61a74e25f 100644 --- a/src/h5/dd-resizable.ts +++ b/src/h5/dd-resizable.ts @@ -1,4 +1,4 @@ -// dd-resizable.ts 4.0.0 +// dd-resizable.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { DDResizableHandle } from './dd-resizable-handle'; import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl'; diff --git a/src/h5/dd-utils.ts b/src/h5/dd-utils.ts index e27091d79..a0f50ae65 100644 --- a/src/h5/dd-utils.ts +++ b/src/h5/dd-utils.ts @@ -1,4 +1,4 @@ -// dd-utils.ts 4.0.0 +// dd-utils.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license export class DDUtils { diff --git a/src/h5/gridstack-dd-native.ts b/src/h5/gridstack-dd-native.ts index d2772cc83..99aa975bd 100644 --- a/src/h5/gridstack-dd-native.ts +++ b/src/h5/gridstack-dd-native.ts @@ -1,4 +1,4 @@ -// gridstack-dd-native.ts 4.0.0 +// gridstack-dd-native.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { DDManager } from './dd-manager'; import { DDElement, DDElementHost } from './dd-element'; diff --git a/src/index-h5.ts b/src/index-h5.ts index 28b9adac4..fa15f72e9 100644 --- a/src/index-h5.ts +++ b/src/index-h5.ts @@ -1,4 +1,4 @@ -// index.html5.ts 4.0.0 - everything you need for a Grid that uses HTML5 native drag&drop (work in progress) +// index.html5.ts 4.0.0-dev - everything you need for a Grid that uses HTML5 native drag&drop (work in progress) // (c) 2021 Alain Dumesny - see root license export * from './types'; export * from './utils'; diff --git a/src/index-jq.ts b/src/index-jq.ts index b92d75137..0b75f235d 100644 --- a/src/index-jq.ts +++ b/src/index-jq.ts @@ -1,4 +1,4 @@ -// index.jq.ts 4.0.0 - everything you need for a Grid that uses Jquery-ui drag&drop (original, full feature) +// index.jq.ts 4.0.0-dev - everything you need for a Grid that uses Jquery-ui drag&drop (original, full feature) // (c) 2021 Alain Dumesny - see root license export * from './types'; diff --git a/src/index-static.ts b/src/index-static.ts index 4f9ab11ec..49a538d6a 100644 --- a/src/index-static.ts +++ b/src/index-static.ts @@ -1,4 +1,4 @@ -// index.static.ts 4.0.0 - everything you need for a static Grid (non draggable) +// index.static.ts 4.0.0-dev - everything you need for a static Grid (non draggable) // (c) 2021 Alain Dumesny - see root license export * from './types'; diff --git a/src/jq/gridstack-dd-jqueryui.ts b/src/jq/gridstack-dd-jqueryui.ts index 395711387..a6e92e10d 100644 --- a/src/jq/gridstack-dd-jqueryui.ts +++ b/src/jq/gridstack-dd-jqueryui.ts @@ -1,4 +1,4 @@ -// gridstack-dd-jqueryui.ts 4.0.0 +// gridstack-dd-jqueryui.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { GridStackElement } from '../gridstack'; import { GridStackDD, DDOpts, DDKey, DDDropOpt, DDCallback, DDValue } from '../gridstack-dd'; diff --git a/src/types.ts b/src/types.ts index 9767525ec..4b6680014 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,4 +1,4 @@ -// types.ts 4.0.0 +// types.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { GridStack } from './gridstack'; diff --git a/src/utils.ts b/src/utils.ts index 26a9ef883..fcb112478 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,4 +1,4 @@ -// utils.ts 4.0.0 +// utils.ts 4.0.0-dev // (c) 2021 Alain Dumesny - see root license import { GridStackElement, GridStackNode, GridStackOptions, numberOrString, GridStackPosition } from './types'; @@ -236,7 +236,7 @@ export class Utils { if (typeof a !== 'object' || typeof b !== 'object') return; for (let key in a) { let val = a[key]; - if (val && typeof val === 'object') { + if (val && typeof val === 'object' && b[key] !== undefined) { for (let i in val) { if (val[i] === b[key][i] || i[0] === '_') { delete val[i] } }