Not using React for gridstack

packages/sail2/src/client/appd/appd.tsx

@@ -99,7 +99,6 @@ export class AppDPanel extends Component<AppPanelProps, AppPanelState> {
               if (this.state.chosen) {
                 const ap = this.props.cs.open(this.state.chosen)
                 if (ap) {
-                  this.props.gs.enqueuePanel(ap)
                   this.props.closeAction()
                 } else {
                   alert("Not a web app")

packages/sail2/src/client/grid/grid.tsx

@@ -34,32 +34,38 @@ class SimpleGrid extends Component<SimpleGridProps> {
     return this.props.items.find((p) => p.id == g.id)!!
   }
 
-  removePanel(p: AppPanel) {
-    //this.props.gs.removePanel(p)
+  removePanel(g: GridStackNode) {
+    const p = this.getPanel(g)
+    this.props.gs.removePanel(p)
     this.props.cs.removePanel(p.id)
   }
 
+  updatePosition(g: GridStackNode) {
+    const panel = this.getPanel(g)
+    panel.x = g.x
+    panel.y = g.y
+    panel.w = g.w
+    panel.h = g.h
+    this.props.cs.updatePanel(panel)
+  }
+
   componentDidMount() {
     console.log("CDM")
 
     this.props.gs.ensureGrid(
       this.gridId,
-      (g) => {
-        const panel = this.getPanel(g)
-        panel.x = g.x
-        panel.y = g.y
-        panel.w = g.w
-        panel.h = g.h
-        this.props.cs.updatePanel(this.getPanel(g))
-      },
-      (g) => this.props.cs.removePanel(this.getPanel(g).id),
+      (w) => this.updatePosition(w),
+      (ap) => <Content panel={ap} close={() => this.removePanel(ap)} />,
+      (w) => this.removePanel(w),
       styles.grid
     )
+
+    this.props.gs.ensurePanelsInGrid(this.gridId, this.props.items)
   }
 
   componentDidUpdate(): void {
     console.log("CDU")
-    this.props.gs.ensurePanelsInGrid()
+    this.props.gs.ensurePanelsInGrid(this.gridId, this.props.items)
   }
 
   render() {
@@ -72,16 +78,7 @@ class SimpleGrid extends Component<SimpleGridProps> {
         style={{
           display: this.props.active ? "block" : "none",
         }}
-      >
-        {this.props.cs
-          .getPanels()
-          .filter((p) => p.tabId == this.props.tabId)
-          .map((i) => (
-            <div key={i.id} className="grid-stack-item" gs-w={i.w} gs-h={i.h} gs-x={i.x} gs-y={i.y} id={i.id} gs-id={i.id}>
-              <Content key={i.id} panel={i} close={() => this.removePanel(i)} />
-            </div>
-          ))}
-      </div>
+      ></div>
     )
   }
 }

packages/sail2/src/client/grid/styles.module.css

@@ -9,7 +9,7 @@
 }
 
 .grid>.grid-stack-item {
-    z-index: 200;
+    z-index: 300;
 }
 
 /** Grid Content */

packages/sail2/src/client/state/grid.ts

@@ -1,25 +1,28 @@
-import { GridStack, GridStackNode, GridStackPosition } from "gridstack"
+import { GridStack, GridStackNode, GridStackWidget } from "gridstack"
 import { AppPanel } from "./client"
+import { ReactElement } from "react"
 import { gridIdforTab } from "../grid/grid"
-import { grids } from "../grid/styles.module.css"
+import { Root, createRoot } from "react-dom/client"
 
 export interface GridsState {
 
-    enqueuePanel(ap: AppPanel): void
+    removePanel(ap: AppPanel): void
 
-    ensurePanelsInGrid(): void
-
-    ensureGrid(id: string, update: (ap: GridStackNode) => void, remove: (ap: GridStackNode) => void, cssClass: string): void
+    ensurePanelsInGrid(id: string, items: AppPanel[]): void
 
+    ensureGrid(
+        id: string,
+        update: (gn: GridStackNode) => void,
+        render: (ap: AppPanel) => ReactElement,
+        remove: (gn: GridStackNode) => void,
+        cssClass: string): void
 }
 
-
-
 class GridstackGridsState implements GridsState {
 
     private readonly gridstacks: { [id: string]: GridStack } = {}
-
-    private panelToAdd: AppPanel | null = null
+    private readonly renderers: { [id: string]: (ap: AppPanel) => ReactElement } = {}
+    private readonly reactRoots: { [id: string]: Root } = {}
 
     findEmptyArea(ap: AppPanel, grid: GridStack) {
         for (let y = 0; y < 10; y++) {
@@ -36,33 +39,45 @@ class GridstackGridsState implements GridsState {
         return
     }
 
-    enqueuePanel(ap: AppPanel) {
-        this.panelToAdd = ap
+    removePanel(ap: AppPanel) {
         const gridId = gridIdforTab(ap.tabId)
         const grid = this.gridstacks[gridId]
-        this.findEmptyArea(ap, grid)
+        const el = document.getElementById(ap.id)
+        const root = this.reactRoots['content_' + ap.id]
+        root.unmount()
+        grid.removeWidget(el!!)
     }
 
-    ensurePanelsInGrid(): void {
-        if (this.panelToAdd) {
-            const p = this.panelToAdd
-            const gridId = gridIdforTab(p.tabId)
-            const grid = this.gridstacks[gridId]
+    ensurePanelsInGrid(gridId: string, items: AppPanel[]): void {
+        const grid = this.gridstacks[gridId]
+        items.forEach(p => {
             const el = document.getElementById(p.id)
-            const widget = grid.makeWidget(el!!)
-            grid.addWidget(widget)
-            this.panelToAdd = null
-        }
-
-        // Object.keys(this.gridstacks).forEach(id => {
-        //     const gridId = gridIdforTab(id)
-        //     const el = document.getElementById()
-        //     const state = gs.getGridItems()
-        //     gs.update()
-        // })
+            if (!el) {
+                const contentId = 'content_' + p.id
+                const opts: GridStackWidget = {
+                    h: p.h,
+                    w: p.w,
+                    x: p.x,
+                    y: p.y,
+                    id: p.id,
+                    content: `<div id="${contentId}" />`
+                }
+                // create the widget
+                const widget = grid.addWidget(opts)
+                widget.setAttribute("id", p.id)
+
+                // add content to it
+                const div = document.getElementById(contentId)!!
+                const renderer = this.renderers[gridId]
+                const content = renderer(p)
+                const root = createRoot(div)
+                this.reactRoots[contentId] = root
+                root.render(content)
+            }
+        })
     }
 
-    ensureGrid(id: string, update: (ap: GridStackNode) => void, remove: (ap: GridStackNode) => void, cssClass: string): void {
+    ensureGrid(id: string, update: (ap: GridStackNode) => void, render: (ap: AppPanel) => ReactElement, remove: (gn: GridStackNode) => void, cssClass: string): void {
         if (!this.gridstacks[id]) {
             const grid = GridStack.init(
                 {
@@ -72,6 +87,7 @@ class GridstackGridsState implements GridsState {
                 id
             )
             this.gridstacks[id] = grid
+            this.renderers[id] = render
 
             const gridEl = document.getElementById(id)!!