Add basic grouping.

lynxkite-app/web/src/workspace/Workspace.tsx

@@ -25,9 +25,14 @@ import Atom from "~icons/tabler/atom.jsx";
 // @ts-ignore
 import Backspace from "~icons/tabler/backspace.jsx";
 // @ts-ignore
+import UngroupIcon from "~icons/tabler/library-minus.jsx";
+// @ts-ignore
+import GroupIcon from "~icons/tabler/library-plus.jsx";
+// @ts-ignore
 import Restart from "~icons/tabler/rotate-clockwise.jsx";
 // @ts-ignore
 import Close from "~icons/tabler/x.jsx";
+import Tooltip from "../Tooltip.tsx";
 import type { WorkspaceNode, Workspace as WorkspaceType } from "../apiTypes.ts";
 import favicon from "../assets/favicon.ico";
 import { usePath } from "../common.ts";
@@ -78,7 +83,7 @@ function LynxKiteFlow() {
         if (!state.workspace.nodes) return;
         if (!state.workspace.edges) return;
         for (const n of state.workspace.nodes) {
-          if (n.dragHandle !== ".drag-handle") {
+          if (n.type !== "group" && n.dragHandle !== ".drag-handle") {
             n.dragHandle = ".drag-handle";
           }
         }
@@ -247,16 +252,18 @@ function LynxKiteFlow() {
     },
     [catalog, state, nodeSearchSettings, suppressSearchUntil, closeNodeSearch],
   );
-  function addNode(node: Partial<WorkspaceNode>, state: { workspace: Workspace }, nodes: Node[]) {
-    const title = node.data?.title;
+  function findFreeId(prefix: string) {
     let i = 1;
-    node.id = `${title} ${i}`;
-    const wnodes = state.workspace.nodes!;
-    while (wnodes.find((x) => x.id === node.id)) {
+    let id = `${prefix} ${i}`;
+    const used = new Set(state.workspace.nodes!.map((n) => n.id));
+    while (used.has(id)) {
       i += 1;
-      node.id = `${title} ${i}`;
+      id = `${prefix} ${i}`;
     }
-    wnodes.push(node as WorkspaceNode);
+    return id;
+  }
+  function addNode(node: Partial<WorkspaceNode>) {
+    state.workspace.nodes!.push(node as WorkspaceNode);
     setNodes([...nodes, node as WorkspaceNode]);
   }
   function nodeFromMeta(meta: OpsOp): Partial<WorkspaceNode> {
@@ -278,7 +285,8 @@ function LynxKiteFlow() {
         x: nss.pos.x,
         y: nss.pos.y,
       });
-      addNode(node, state, nodes);
+      node.id = findFreeId(node.data!.title);
+      addNode(node);
       closeNodeSearch();
     },
     [nodeSearchSettings, state, reactFlow, nodes, closeNodeSearch],
@@ -321,6 +329,7 @@ function LynxKiteFlow() {
       setMessage(null);
       const cat = catalog.data![state.workspace.env!];
       const node = nodeFromMeta(cat["Import file"]);
+      node.id = findFreeId(node.data!.title);
       node.position = reactFlow.screenToFlowPosition({
         x: e.clientX,
         y: e.clientY,
@@ -335,7 +344,7 @@ function LynxKiteFlow() {
       } else if (file.name.includes(".xls")) {
         node.data!.params.file_format = "excel";
       }
-      addNode(node, state, nodes);
+      addNode(node);
     } catch (error) {
       setMessage("File upload failed.");
     }
@@ -351,6 +360,92 @@ function LynxKiteFlow() {
     const selectedEdges = edges.filter((e) => e.selected);
     reactFlow.deleteElements({ nodes: selectedNodes, edges: selectedEdges });
   }
+  function groupSelection() {
+    const selectedNodes = nodes.filter((n) => n.selected);
+    const groupNode = {
+      id: findFreeId("Group"),
+      type: "group",
+      position: { x: 0, y: 0 },
+      width: 0,
+      height: 0,
+      data: { title: "Group", params: {} },
+    };
+    let top = Number.POSITIVE_INFINITY;
+    let left = Number.POSITIVE_INFINITY;
+    let bottom = Number.NEGATIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    for (const node of selectedNodes) {
+      if (node.position.y < top) top = node.position.y;
+      if (node.position.x < left) left = node.position.x;
+      if (node.position.y + node.height! > bottom) bottom = node.position.y + node.height!;
+      if (node.position.x + node.width! > right) right = node.position.x + node.width!;
+    }
+    groupNode.position = {
+      x: left,
+      y: top,
+    };
+    groupNode.width = right - left;
+    groupNode.height = bottom - top;
+    setNodes([
+      groupNode as WorkspaceNode,
+      ...nodes.map((n) =>
+        n.selected
+          ? {
+              ...n,
+              position: { x: n.position.x - left, y: n.position.y - top },
+              parentId: groupNode.id,
+              selected: false,
+            }
+          : n,
+      ),
+    ]);
+    getYjsDoc(state).transact(() => {
+      state.workspace.nodes!.unshift(groupNode as WorkspaceNode);
+      const selectedNodeIds = new Set(selectedNodes.map((n) => n.id));
+      for (const node of state.workspace.nodes!) {
+        if (selectedNodeIds.has(node.id)) {
+          node.position.x -= left;
+          node.position.y -= top;
+          node.parentId = groupNode.id;
+          node.selected = false;
+        }
+      }
+    });
+  }
+  function ungroupSelection() {
+    const groups = Object.fromEntries(
+      nodes.filter((n) => n.selected && n.type === "group").map((n) => [n.id, n]),
+    );
+    setNodes(
+      nodes
+        .filter((n) => !groups[n.id])
+        .map((n) => {
+          const g = groups[n.parentId!];
+          if (!g) return n;
+          return {
+            ...n,
+            position: { x: n.position.x + g.position.x, y: n.position.y + g.position.y },
+            parentId: undefined,
+          };
+        }),
+    );
+    getYjsDoc(state).transact(() => {
+      const wnodes = state.workspace.nodes!;
+      for (const groupId in groups) {
+        const groupIdx = wnodes.findIndex((n) => n.id === groupId);
+        wnodes.splice(groupIdx, 1);
+      }
+      for (const node of state.workspace.nodes!) {
+        const g = groups[node.parentId as string];
+        if (!g) continue;
+        node.position.x += g.position.x;
+        node.position.y += g.position.y;
+        node.parentId = undefined;
+      }
+    });
+  }
+  const areMultipleNodesSelected = nodes.filter((n) => n.selected).length > 1;
+  const isAnyGroupSelected = nodes.some((n) => n.selected && n.type === "group");
   return (
     <div className="workspace">
       <div className="top-bar bg-neutral">
@@ -367,18 +462,35 @@ function LynxKiteFlow() {
           }}
         />
         <div className="tools text-secondary">
-          <button className="btn btn-link">
-            <Atom />
-          </button>
-          <button className="btn btn-link" onClick={deleteSelection}>
-            <Backspace />
-          </button>
-          <button className="btn btn-link" onClick={executeWorkspace}>
-            <Restart />
-          </button>
-          <Link className="btn btn-link" to={`/dir/${parentDir}`} aria-label="close">
-            <Close />
-          </Link>
+          {areMultipleNodesSelected && (
+            <Tooltip doc="Group selected nodes">
+              <button className="btn btn-link" onClick={groupSelection}>
+                <GroupIcon />
+              </button>
+            </Tooltip>
+          )}
+          {isAnyGroupSelected && (
+            <Tooltip doc="Ungroup selected nodes">
+              <button className="btn btn-link" onClick={ungroupSelection}>
+                <UngroupIcon />
+              </button>
+            </Tooltip>
+          )}
+          <Tooltip doc="Delete selected nodes and edges">
+            <button className="btn btn-link" onClick={deleteSelection}>
+              <Backspace />
+            </button>
+          </Tooltip>
+          <Tooltip doc="Re-run the workspace">
+            <button className="btn btn-link" onClick={executeWorkspace}>
+              <Restart />
+            </button>
+          </Tooltip>
+          <Tooltip doc="Close workspace">
+            <Link className="btn btn-link" to={`/dir/${parentDir}`} aria-label="close">
+              <Close />
+            </Link>
+          </Tooltip>
         </div>
       </div>
       <div style={{ height: "100%", width: "100vw" }} onDragOver={onDragOver} onDrop={onDrop}>