Updated fdc3, improved resizing

Author: robmoffat

package-lock.json

@@ -18,8 +18,8 @@
     "vite": "^5.0.2"
   },
   "dependencies": {
-    "@kite9/fdc3": "2.2.0-beta.19",
-    "@kite9/fdc3-web-impl": "2.2.0-beta.19",
+    "@kite9/fdc3": "2.2.0-beta.23",
+    "@kite9/fdc3-web-impl": "2.2.0-beta.23",
     "@types/react-dom": "^18.2.25",
     "@types/uuid": "^9.0.8",
     "@types/ws": "^8.5.10",

package.json

@@ -83,14 +83,26 @@ export class GridsStateImpl implements GridsState {
         })
     }
 
+    setResizing(resizing: boolean, element: HTMLElement) {
+        if (resizing) {
+            element.parentElement?.classList.add(styles.resizing)
+        } else {
+            element.parentElement?.classList.remove(styles.resizing)
+        }
+    }
+
     createGridstack(e: Element): GridStack {
         //const gridId = gridIdforTab(tabId)
         const grid = GridStack.init(
             {
                 removable: "#" + TRASH_DROP,
                 acceptWidgets: true,
                 margin: '1',
-                cellHeight: '70px'
+                cellHeight: '70px',
+                resizable: {
+                    handles: 'e, se, s, sw, w'
+
+                }
             },
             e as GridStackElement
         )
@@ -106,11 +118,11 @@ export class GridsStateImpl implements GridsState {
                 }
             }
 
-            element.classList.remove(styles.resizing)
+            this.setResizing(false, element)
         })
 
         grid.on("resizestart", (_event, element) => {
-            element.classList.add(styles.resizing)
+            this.setResizing(true, element)
         })
 
         grid.on("removed", (event, items) => {
@@ -140,6 +152,12 @@ export class GridsStateImpl implements GridsState {
                     this.cs.updatePanel(panel)
                 }
             }
+
+            this.setResizing(false, element)
+        })
+
+        grid.on("dragstart", (_event, element) => {
+            this.setResizing(true, element)
         })
 
         return grid
@@ -173,6 +191,11 @@ export class GridsStateImpl implements GridsState {
     }
 
     createWidget(grid: GridStack, p: AppPanel, content: boolean): GridItemHTMLElement {
+        // check the panel size
+        if (p.x == -1 || p.y == -1) {
+            this.findEmptyArea(p, grid)
+        }
+
         // add to the grid
         const opts: GridStackWidget = {
             h: p.h,
@@ -198,7 +221,6 @@ export class GridsStateImpl implements GridsState {
         const root = createRoot(div)
         const content = this.render(p, contentIdforTab(p.panelId))
         root.render(content)
-        //ReactDOM.render(content, div)
     }
 
     findChild(e: DocumentFragment | HTMLElement | Element, id: string): HTMLElement | null {

src/client/grid/gridstate.ts

@@ -60,7 +60,7 @@ class ServerStateImpl implements ServerState {
             this.socket?.emit(DA_HELLO, props)
 
             this.socket?.on(SAIL_APP_OPEN, async (data: SailAppOpenArgs, callback) => {
-                // (`SAIL_APP_OPEN: ${JSON.stringify(data)}`)
+                console.log(`SAIL_APP_OPEN: ${JSON.stringify(data)}`)
                 const instanceId = await getAppState().open(data.appDRecord)
                 callback(instanceId)
             })

src/client/state/ServerState.ts

@@ -144,9 +144,9 @@ abstract class AbstractClientState implements ClientState {
             const url = (detail.details as any).url
 
             const ap = {
-                x: 1,
-                y: 1,
-                w: 3,
+                x: -1,
+                y: -1,
+                w: 6,
                 h: 4,
                 title: detail.title,
                 tabId: this.activeTabId,

src/client/state/clientState.ts

@@ -12,7 +12,7 @@ export class SailFDC3Server extends DefaultFDC3Server {
     readonly serverContext: SailServerContext
 
     constructor(sc: SailServerContext, helloArgs: DesktopAgentHelloArgs) {
-        super(sc, sc.directory, helloArgs.channels)
+        super(sc, sc.directory, helloArgs.channels, true, 60000, 20000)
         sc.directory.replace(helloArgs.directories)
         this.serverContext = sc
     }

src/server/da/SailFDC3Server.ts

@@ -67,6 +67,13 @@ export class SailServerContext implements ServerContext<SailData> {
         this.instances.find(ca => (ca.instanceId == app.instanceId))!!.state = OPEN
     }
 
+    async setAppDisconnected(app: AppIdentifier): Promise<void> {
+        const idx = this.instances.findIndex(ca => (ca.instanceId == app.instanceId))
+        if (idx != -1) {
+            this.instances.splice(idx, 1)
+        }
+    }
+
     async getConnectedApps(): Promise<AppIdentifier[]> {
         return this.instances
             .filter(ca => ca.state == OPEN)

src/server/da/SailServerContext.ts

@@ -111,7 +111,7 @@ export function initSocketService(httpServer: any, sessions: Map<string, SailFDC
 
         socket.on(FDC3_APP_EVENT, function (data, from): void {
             // message from app to da
-            console.log(JSON.stringify(data))
+            console.log(JSON.stringify(data) + " from " + from)
 
             if (fdc3ServerInstance != undefined) {
                 try {

src/server/da/initSocketService.ts

@@ -58,3 +58,4 @@ export type SailAppOpenArgs = {
  */
 export const FDC3_APP_EVENT = 'fdc3-app-event'
 export const FDC3_DA_EVENT = 'fdc3-da-event'
+