Industrialize topology editor and add customizable edge styles.

Add tool modes, layouts, and per-edge/default style overrides with a cleaner toolbar and context menus.

Co-authored-by: Cursor <cursoragent@cursor.com>

web/src/pages/topology/toolMode.ts

@@ -0,0 +1,64 @@
+/** Topology editor interaction modes (NMS-style). */
+
+export type ToolMode = "select" | "pan" | "drag" | "connect";
+
+export type ToolModeBehavior = {
+  nodesDraggable: boolean;
+  nodesConnectable: boolean;
+  elementsSelectable: boolean;
+  /** false = no pane pan on drag; true = left-drag pans; array = button indices */
+  panOnDrag: boolean | number[];
+  selectionOnDrag: boolean;
+  panOnScroll: boolean;
+};
+
+export function behaviorForMode(mode: ToolMode): ToolModeBehavior {
+  switch (mode) {
+    case "pan":
+      return {
+        nodesDraggable: false,
+        nodesConnectable: false,
+        elementsSelectable: false,
+        panOnDrag: true,
+        selectionOnDrag: false,
+        panOnScroll: true,
+      };
+    case "drag":
+      return {
+        nodesDraggable: true,
+        nodesConnectable: false,
+        elementsSelectable: true,
+        panOnDrag: [1, 2],
+        selectionOnDrag: false,
+        panOnScroll: true,
+      };
+    case "connect":
+      return {
+        nodesDraggable: false,
+        nodesConnectable: true,
+        elementsSelectable: true,
+        panOnDrag: [1, 2],
+        selectionOnDrag: false,
+        panOnScroll: true,
+      };
+    case "select":
+    default:
+      return {
+        nodesDraggable: true,
+        nodesConnectable: false,
+        elementsSelectable: true,
+        panOnDrag: [1, 2],
+        selectionOnDrag: true,
+        panOnScroll: true,
+      };
+  }
+}
+
+export function toolModeFromKey(key: string): ToolMode | null {
+  const k = key.toLowerCase();
+  if (k === "v") return "select";
+  if (k === "h") return "pan";
+  if (k === "a") return "drag";
+  if (k === "c") return "connect";
+  return null;
+}