initial implementation of move block to window (#77)

frontend/app/app.tsx

@@ -3,11 +3,11 @@
 
 import { Workspace } from "@/app/workspace/workspace";
 import { getLayoutStateAtomForTab, globalLayoutTransformsMap } from "@/faraday/lib/layoutAtom";
-import type { LayoutTreeState } from "@/faraday/lib/model";
 import { ContextMenuModel } from "@/store/contextmenu";
 import { WOS, atoms, globalStore, setBlockFocus } from "@/store/global";
 import * as services from "@/store/services";
 import * as keyutil from "@/util/keyutil";
+import * as layoututil from "@/util/layoututil";
 import * as util from "@/util/util";
 import * as jotai from "jotai";
 import * as React from "react";
@@ -95,18 +95,6 @@ function switchTab(offset: number) {
     services.ObjectService.SetActiveTab(newActiveTabId);
 }
 
-function findLeafIdFromBlockId(layoutTree: LayoutTreeState<TabLayoutData>, blockId: string): string {
-    if (layoutTree?.leafs == null) {
-        return null;
-    }
-    for (let leaf of layoutTree.leafs) {
-        if (leaf.data.blockId == blockId) {
-            return leaf.id;
-        }
-    }
-    return null;
-}
-
 var transformRegexp = /translate\(\s*([0-9.]+)px\s*,\s*([0-9.]+)px\)/;
 
 function parseFloatFromCSS(s: string | number): number {
@@ -174,7 +162,7 @@ function switchBlock(tabId: string, offsetX: number, offsetY: number) {
     }
     const layoutTreeState = globalStore.get(getLayoutStateAtomForTab(tabId, tabAtom));
     const curBlockId = globalStore.get(atoms.waveWindow).activeblockid;
-    const curBlockLeafId = findLeafIdFromBlockId(layoutTreeState, curBlockId);
+    const curBlockLeafId = layoututil.findLeafIdFromBlockId(layoutTreeState, curBlockId);
     if (curBlockLeafId == null) {
         return;
     }

frontend/app/block/block.tsx

@@ -8,7 +8,8 @@ import { TerminalView } from "@/app/view/term/term";
 import { ErrorBoundary } from "@/element/errorboundary";
 import { CenteredDiv } from "@/element/quickelems";
 import { ContextMenuModel } from "@/store/contextmenu";
-import { atoms, setBlockFocus, useBlockAtom } from "@/store/global";
+import { atoms, globalStore, setBlockFocus, useBlockAtom } from "@/store/global";
+import * as services from "@/store/services";
 import * as WOS from "@/store/wos";
 import * as util from "@/util/util";
 import clsx from "clsx";
@@ -144,7 +145,12 @@ function handleHeaderContextMenu(e: React.MouseEvent<HTMLDivElement>, blockData:
     menu.push({
         label: "Move to New Window",
         click: () => {
-            alert("Not Implemented");
+            let currentTabId = globalStore.get(atoms.activeTabId);
+            try {
+                services.WindowService.MoveBlockToNewWindow(currentTabId, blockData.oid);
+            } catch (e) {
+                console.error("error moving block to new window", e);
+            }
         },
     });
     menu.push({ type: "separator" });
@@ -173,7 +179,12 @@ const FramelessBlockHeader = ({ blockId, onClose, dragHandleRef }: FramelessBloc
     const settingsConfig = jotai.useAtomValue(atoms.settingsConfigAtom);
 
     return (
-        <div key="header" className="block-header" ref={dragHandleRef}>
+        <div
+            key="header"
+            className="block-header"
+            ref={dragHandleRef}
+            onContextMenu={(e) => handleHeaderContextMenu(e, blockData, onClose)}
+        >
             <div className="block-header-text text-fixed">{getBlockHeaderText(null, blockData, settingsConfig)}</div>
             {onClose && (
                 <div className="close-button" onClick={onClose}>

frontend/app/store/global.ts

@@ -5,6 +5,7 @@ import { LayoutTreeAction, LayoutTreeActionType, LayoutTreeInsertNodeAction, new
 import { getLayoutStateAtomForTab } from "@/faraday/lib/layoutAtom";
 import { layoutTreeStateReducer } from "@/faraday/lib/layoutState";
 
+import * as layoututil from "@/util/layoututil";
 import { produce } from "immer";
 import * as jotai from "jotai";
 import * as rxjs from "rxjs";
@@ -217,7 +218,8 @@ function handleWSEventMessage(msg: WSEventType) {
         return;
     }
     if (msg.eventtype == "layoutaction") {
-        const layoutAction: WSLayoutAction = msg.data;
+        console.log("got wslayoutaction", msg);
+        const layoutAction: WSLayoutActionData = msg.data;
         if (layoutAction.actiontype == LayoutTreeActionType.InsertNode) {
             const insertNodeAction: LayoutTreeInsertNodeAction<TabLayoutData> = {
                 type: LayoutTreeActionType.InsertNode,
@@ -226,6 +228,18 @@ function handleWSEventMessage(msg: WSEventType) {
                 }),
             };
             runLayoutAction(layoutAction.tabid, insertNodeAction);
+        } else if (layoutAction.actiontype == LayoutTreeActionType.DeleteNode) {
+            const layoutStateAtom = getLayoutStateAtomForTab(
+                layoutAction.tabid,
+                WOS.getWaveObjectAtom<Tab>(WOS.makeORef("tab", layoutAction.tabid))
+            );
+            const curState = globalStore.get(layoutStateAtom);
+            const leafId = layoututil.findLeafIdFromBlockId(curState, layoutAction.blockid);
+            const deleteNodeAction = {
+                type: LayoutTreeActionType.DeleteNode,
+                nodeId: leafId,
+            };
+            runLayoutAction(layoutAction.tabid, deleteNodeAction);
         } else {
             console.log("unsupported layout action", layoutAction);
         }

frontend/app/store/services.ts

@@ -138,6 +138,12 @@ class WindowServiceType {
         return WOS.callBackendService("window", "CloseWindow", Array.from(arguments))
     }
 
+    // move block to new window
+    // @returns object updates
+    MoveBlockToNewWindow(currentTabId: string, blockId: string): Promise<void> {
+        return WOS.callBackendService("window", "MoveBlockToNewWindow", Array.from(arguments))
+    }
+
     // @returns object updates
     SetWindowPosAndSize(arg2: string, arg3: Point, arg4: WinSize): Promise<void> {
         return WOS.callBackendService("window", "SetWindowPosAndSize", Array.from(arguments))

frontend/util/layoututil.ts

@@ -0,0 +1,18 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { LayoutTreeState } from "@/faraday/index";
+
+function findLeafIdFromBlockId(layoutTree: LayoutTreeState<TabLayoutData>, blockId: string): string {
+    if (layoutTree?.leafs == null) {
+        return null;
+    }
+    for (let leaf of layoutTree.leafs) {
+        if (leaf.data.blockId == blockId) {
+            return leaf.id;
+        }
+    }
+    return null;
+}
+
+export { findLeafIdFromBlockId };

frontend/wave.ts

@@ -20,7 +20,6 @@ console.log("clientid", clientId, "windowid", windowId);
 keyutil.setKeyUtilPlatform(getApi().getPlatform());
 
 loadFonts();
-initWS();
 (window as any).globalWS = globalWS;
 (window as any).WOS = WOS;
 (window as any).globalStore = globalStore;
@@ -33,6 +32,9 @@ document.addEventListener("DOMContentLoaded", async () => {
     const client = await WOS.loadAndPinWaveObject<Client>(WOS.makeORef("client", clientId));
     const waveWindow = await WOS.loadAndPinWaveObject<WaveWindow>(WOS.makeORef("window", windowId));
     await WOS.loadAndPinWaveObject<Workspace>(WOS.makeORef("workspace", waveWindow.workspaceid));
+    const initialTab = await WOS.loadAndPinWaveObject<Tab>(WOS.makeORef("tab", waveWindow.activetabid));
+    WOS.loadAndPinWaveObject<LayoutNode>(WOS.makeORef("layout", initialTab.layoutNode));
+    initWS();
     globalStore.set(atoms.settingsConfigAtom, await services.FileService.GetSettingsConfig());
     services.ObjectService.SetActiveTab(waveWindow.activetabid); // no need to wait
     const reactElem = React.createElement(App, null, null);