Save subgrid

src/css/widget-theme.scss

@@ -39,6 +39,7 @@
   overflow: hidden !important;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  background: rgba(255, 255, 255, 1);
 }
 
 .grid-stack-item-removing {
@@ -51,8 +52,9 @@
 
 /* make nested grid have slightly darker bg 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-sub-grid > .grid-stack-item-content {
-  // background: rgba(0, 0, 0, 0.1);
-  inset: 0 2px;
+  background: rgba(0, 0, 0, 0.05);
+  //inset: 0 2px;
+  //overflow: hidden !important;
 }
 .grid-stack.grid-stack-nested {
   background: none;

src/js/utils.js

@@ -51,7 +51,6 @@ function plotWidgets(nodes, widgets) {
  * @param {*} widget
  */
 function plot(node, widget) {
-  console.log(node.el)
   const content = node.el.querySelector(".grid-stack-item-content");
   const width = content.offsetWidth;
   const height = content.offsetHeight;
@@ -158,20 +157,17 @@ export function initGrid(widgets, items) {
   }
 
   grid.load(items);
+  grid.setAnimation(false);
   addResizeListener(grid);
 
   plotWidgets(grid.engine.nodes, widgets);
   disableWidgetMoveAndResize();
 
-  //// Add resize listener for subgrid
+  // Add resize listener for subgrid
   grid.engine.nodes.map((e) => {
     if (e.subGrid) {
       e.subGrid.on("resizestop", function (event, el) {
-        console.log("sub grid resize");
-        const items = e.subGrid.getGridItems()
-        console.log("items", items);
-        //plotWidgets(e.subGrid.engine.nodes, widgets);
-  plotWidgets(grid.engine.nodes, widgets);
+        plotWidgets(grid.engine.nodes, widgets);
       });
     }
   });
@@ -230,13 +226,37 @@ export function initGrid(widgets, items) {
    */
   function save() {
     const oldGrid = grid.save();
-    return oldGrid.map((item) => ({
-      x: item.x,
-      y: item.y,
-      w: item.w,
-      h: item.h,
-      widgetId: item.widgetId,
-    }));
+    return oldGrid.map((item) => {
+      if (item.subGrid) {
+        return {
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+          subGrid: {
+            x: item.subGrid.x,
+            y: item.subGrid.y,
+            w: item.subGrid.w,
+            h: item.subGrid.h,
+            children: item.subGrid.children.map((e) => ({
+              x: e.x,
+              y: e.y,
+              w: e.w,
+              h: e.h,
+              widgetId: e.widgetId,
+            })),
+          },
+        };
+      } else {
+        return {
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+          widgetId: item.widgetId,
+        };
+      }
+    });
   }
 
   /**
@@ -247,6 +267,7 @@ export function initGrid(widgets, items) {
     grid.removeAll();
     grid.load(items);
     plotWidgets(grid.engine.nodes, widgets);
+    disableWidgetMoveAndResize();
   }
 
   return {