Trying to get drop between grids working, but in a mess

finos · May 1, 2024 · 7a41a0b · 7a41a0b
1 parent 6822c33
commit 7a41a0b
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 319 deletions.
diff --git a/packages/sail2/src/client/frame/styles.module.css b/packages/sail2/src/client/frame/styles.module.css
@@ -23,7 +23,6 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    z-index: 100;
 }
 
 .main {
@@ -35,5 +34,4 @@
     border-radius: .5rem;
     box-shadow: -4px 4px 3px #00000030;
     overflow-y: scroll;
-    z-index: 10;
 }
diff --git a/packages/sail2/src/client/grid/grid.tsx b/packages/sail2/src/client/grid/grid.tsx
@@ -2,7 +2,7 @@ import {Component} from "react"
 import {AppPanel, ClientState} from "../state/client"
 import * as styles from "./styles.module.css"
 import "gridstack/dist/gridstack.css"
-import {GridsState} from "../state/grid"
+import {GridsState, gridIdforTab} from "../state/grid"
 import {GridStackNode} from "gridstack"
 
 export const Grids = ({cs, gs}: {cs: ClientState; gs: GridsState}) => {
@@ -16,18 +16,11 @@ export const Grids = ({cs, gs}: {cs: ClientState; gs: GridsState}) => {
   )
 }
 
-export function gridIdforTab(tabId: string): string {
-  return "_gs_" + tabId
-}
-
 type SimpleGridProps = {items: AppPanel[]; active: boolean; background: string; tabId: string; cs: ClientState; gs: GridsState}
 
 class SimpleGrid extends Component<SimpleGridProps> {
-  private gridId: string = ""
-
   constructor(props: SimpleGridProps) {
     super(props)
-    this.gridId = gridIdforTab(props.tabId)
   }
 
   getPanel(g: GridStackNode): AppPanel {
@@ -40,40 +33,41 @@ class SimpleGrid extends Component<SimpleGridProps> {
     this.props.cs.removePanel(p.id)
   }
 
-  updatePosition(g: GridStackNode) {
+  updatePanel(g: GridStackNode, tab: string) {
     const panel = this.getPanel(g)
     panel.x = g.x
     panel.y = g.y
     panel.w = g.w
     panel.h = g.h
+    panel.tabId = tab
     this.props.cs.updatePanel(panel)
   }
 
   componentDidMount() {
     console.log("CDM")
 
     this.props.gs.ensureGrid(
-      this.gridId,
-      (w) => this.updatePosition(w),
+      (w, id) => this.updatePanel(w, id),
       (ap) => <Content panel={ap} close={() => this.removePanel(ap)} />,
       (w) => this.removePanel(w),
-      styles.grid
+      styles.grid,
+      this.props.tabId
     )
 
-    this.props.gs.ensurePanelsInGrid(this.gridId, this.props.items)
+    this.props.gs.ensurePanelsInGrid(this.props.tabId, this.props.items)
   }
 
   componentDidUpdate(): void {
     console.log("CDU")
-    this.props.gs.ensurePanelsInGrid(this.gridId, this.props.items)
+    this.props.gs.ensurePanelsInGrid(this.props.tabId, this.props.items)
   }
 
   render() {
     console.log("render")
 
     return (
       <div
-        id={this.gridId}
+        id={gridIdforTab(this.props.tabId)}
         className="grid-stack"
         style={{
           display: this.props.active ? "block" : "none",

diff --git a/packages/sail2/src/client/grid/styles.module.css b/packages/sail2/src/client/grid/styles.module.css
@@ -8,10 +8,6 @@
     background-color: #FFFFFF22;
 }
 
-.grid>.grid-stack-item {
-    z-index: 300;
-}
-
 /** Grid Content */
 
 .content {

diff --git a/packages/sail2/src/client/state/grid.ts b/packages/sail2/src/client/state/grid.ts
@@ -1,21 +1,28 @@
-import { GridStack, GridStackNode, GridStackWidget } from "gridstack"
+import { GridItemHTMLElement, GridStack, GridStackNode, GridStackWidget } from "gridstack"
 import { AppPanel } from "./client"
 import { ReactElement } from "react"
-import { gridIdforTab } from "../grid/grid"
 import { Root, createRoot } from "react-dom/client"
 
 export interface GridsState {
 
     removePanel(ap: AppPanel): void
 
-    ensurePanelsInGrid(id: string, items: AppPanel[]): void
+    ensurePanelsInGrid(tabId: string, items: AppPanel[]): void
 
     ensureGrid(
-        id: string,
-        update: (gn: GridStackNode) => void,
+        update: (gn: GridStackNode, tab: string) => void,
         render: (ap: AppPanel) => ReactElement,
         remove: (gn: GridStackNode) => void,
-        cssClass: string): void
+        cssClass: string,
+        tabId: string): void
+}
+
+// keep track of dropping into other tabs
+var newTabState: HTMLElement | null = null;
+
+
+export function gridIdforTab(tabId: string): string {
+    return "_gs_" + tabId
 }
 
 class GridstackGridsState implements GridsState {
@@ -26,7 +33,7 @@ class GridstackGridsState implements GridsState {
 
     findEmptyArea(ap: AppPanel, grid: GridStack) {
         for (let y = 0; y < 10; y++) {
-            for (let x = 0; x < 12 - (ap.w ?? 1); x++) {
+            for (let x = 0; x <= 12 - (ap.w ?? 1); x++) {
                 if (grid.isAreaEmpty(x, y, ap.w ?? 1, ap.h ?? 1)) {
                     ap.x = x;
                     ap.y = y;
@@ -42,15 +49,22 @@ class GridstackGridsState implements GridsState {
     removePanel(ap: AppPanel) {
         const gridId = gridIdforTab(ap.tabId)
         const grid = this.gridstacks[gridId]
-        const el = document.getElementById(ap.id)
         const root = this.reactRoots['content_' + ap.id]
-        root.unmount()
-        grid.removeWidget(el!!)
+        if (root) {
+            root.unmount()
+            delete this.reactRoots['content_' + ap.id]
+        }
+        const el = document.getElementById(ap.id)
+        if (el) {
+            grid.removeWidget(el!!)
+        }
     }
 
-    ensurePanelsInGrid(gridId: string, items: AppPanel[]): void {
+    ensurePanelsInGrid(tabid: string, items: AppPanel[]): void {
+        const gridId = gridIdforTab(tabid)
         const grid = this.gridstacks[gridId]
         items.forEach(p => {
+            this.findEmptyArea(p, grid)
             const el = document.getElementById(p.id)
             if (!el) {
                 const contentId = 'content_' + p.id
@@ -77,12 +91,14 @@ class GridstackGridsState implements GridsState {
         })
     }
 
-    ensureGrid(id: string, update: (ap: GridStackNode) => void, render: (ap: AppPanel) => ReactElement, remove: (gn: GridStackNode) => void, cssClass: string): void {
+    ensureGrid(update: (ap: GridStackNode, tab: string) => void, render: (ap: AppPanel) => ReactElement, remove: (gn: GridStackNode) => void, cssClass: string, tabId: string): void {
+        const id = gridIdforTab(tabId)
         if (!this.gridstacks[id]) {
             const grid = GridStack.init(
                 {
                     removable: "#trash",
                     acceptWidgets: true,
+                    margin: '1'
                 },
                 id
             )
@@ -93,33 +109,53 @@ class GridstackGridsState implements GridsState {
 
             gridEl.classList.add(cssClass)
 
-            grid.on("dragstop", (_event, element) => {
-                const node = element.gridstackNode
-                if (node) {
-                    console.log(`you just dragged node #${node!!.id} to ${node!!.x},${node!!.y} – good job!`)
-                    update(node)
-                }
-            })
-
+            // allow resizing
             grid.on("resizestop", (_event, element) => {
                 const node = element.gridstackNode
                 if (node) {
-                    console.log(`you just resized node #${node!!.id} to ${node!!.w},${node!!.h} – good job!`)
-                    update(node)
+                    update(node, tabId)
                 }
             })
 
+            // allow removal
             grid.on("removed", (_event, items) => {
                 items.forEach((i) => remove(i))
             })
-        }
-    }
-
 
+            // allow dragging onto new tabs
+            const tab = document.getElementById(tabId)!!
+            GridStack.getDD().droppable(tab, {
+                accept: (el: GridItemHTMLElement) => {
+                    console.log("yeah boi")
+                    return true;
+                }
+            })
+                .on(tab, 'dropover', (_event, _el) => { newTabState = tab })
+                .on(tab, 'dropout', (_event, _el) => { newTabState = null });
 
+            // allow dragging on the grid, and also consider new tabs.
+            grid.on("dragstop", (_event, element) => {
+                console.log("dragstop ");
+                const node = element.gridstackNode
+                if (node) {
+                    console.log(`you just dragged node #${node!!.id} to ${node!!.x},${node!!.y} – good job!`)
+                    if (newTabState) {
+                        const newTabId = newTabState.getAttribute("id")!!
+                        const newHome = this.gridstacks[gridIdforTab(newTabId)]
+                        const existingContent = this.reactRoots[]
+                        grid.removeWidget(node, false)
+                        update(node, newTabId)
+                        newHome.addWidget(element)
+                        newTabState = null
+                    } else {
+                        update(node, tabId)
+                    }
+                }
+            })
+        }
+    }
 }
 
-
 const theState = new GridstackGridsState()
 
 export function getGridState(): GridsState {

diff --git a/packages/sail2/src/client/tabs/styles.module.css b/packages/sail2/src/client/tabs/styles.module.css
@@ -1,7 +1,6 @@
 .tabs {
     display: flex;
     flex-direction: column;
-    z-index: 10;
 }
 
 .tab {
@@ -19,12 +18,10 @@
 }
 
 .inactiveTab {
-    z-index: 1;
     background: linear-gradient(90deg, rgba(0, 0, 0, .1) 90%, rgba(0, 0, 0, .7) 100%);
 }
 
 .activeTab {
-    z-index: 10;
     background: linear-gradient(165deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 20%);
 }
 

diff --git a/packages/sail2/src/client/tabs/tabs.tsx b/packages/sail2/src/client/tabs/tabs.tsx
@@ -5,6 +5,7 @@ import * as styles from "./styles.module.css"
 const Tab = ({td, active, onClick}: {td: TabDetail; active: boolean; onClick: () => void}) => {
   return (
     <div
+      id={td.id}
       onClick={onClick}
       className={`${styles.tab} ${active ? styles.activeTab : styles.inactiveTab}`}
       style={{