@kiberon-labs/behave-graph-flow 2.0.0 → 3.0.0

package/src/components/contextMenus/node.tsx

@@ -1,155 +1,15 @@
-import { useReactFlow } from 'reactflow';
 import type { CSSProperties } from 'react';
-import { useCallback } from 'react';
-import clsx from 'classnames';
-import {
-  VscodeContextMenu,
-  VscodeContextMenuItem,
-  VscodeDivider
-} from '@vscode-elements/react-elements';
-import { useSystem } from '@/system';
-import { hidden, pinned } from '@/annotations';
+import { DynamicContextMenu } from './DynamicContextMenu';
 
 export interface INodeContextMenuProps extends CSSProperties {
   nodeID: string;
 }
 
-export const NodeContextMenu = ({ nodeID, ...rest }: INodeContextMenuProps) => {
-  const reactFlowInstance = useReactFlow();
-  const sys = useSystem();
-
-  // Get the current node to check if it's hidden
-  const currentNode = sys.nodeStore
-    .getState()
-    .nodes.find((n) => n.id === nodeID);
-  const isHidden =
-    currentNode && 'data' in currentNode
-      ? (currentNode.data.annotations?.[hidden] ?? false)
-      : false;
-  const isPinned =
-    currentNode && 'data' in currentNode
-      ? (currentNode.data.annotations?.[pinned] ?? false)
-      : false;
-
-  const focus = useCallback(() => {
-    const nodeSearch = sys.nodeStore.getState().nodes;
-    const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
-    const nodes = nodeID
-      ? nodeSearch.filter((x) => x.id === nodeID)
-      : nodeSearch.filter((x) => x.selected);
-    if (nodes) {
-      const focalCenter = nodes.reduce(
-        (acc, node) => {
-          return {
-            x: acc.x + node.position.x + (node.width || 0) / 2,
-            y: acc.y + node.position.y + (node.height || 0) / 2
-          };
-        },
-        { x: 0, y: 0 }
-      );
-
-      reactFlowInstance?.setCenter(focalCenter.x, focalCenter.y, {
-        duration: 200,
-        zoom: 1
-      });
-    }
-  }, [nodeID]);
-
-  const onResetTrace = useCallback(() => {
-    reactFlowInstance.setNodes((nodes) =>
-      nodes.map((x) => {
-        //Remove filtering
-        return {
-          ...x,
-          className: clsx(x.className, {
-            filtered: false
-          })
-        };
-      })
-    );
-  }, [reactFlowInstance]);
-
-  const onSelect = useCallback(
-    (e: any) => {
-      switch (e.detail.value) {
-        case 'traceUpstream':
-          sys.actionStore.getState().actions.traceUpstream(nodeID);
-          break;
-        case 'traceDownstream':
-          sys.actionStore.getState().actions.traceDownstream(nodeID);
-          break;
-        case 'resetTrace':
-          sys.actionStore.getState().actions.resetTrace();
-          break;
-
-        case 'focus':
-          focus();
-          break;
-
-        case 'pin':
-          sys.actionStore.getState().actions.toggleNodePinned(nodeID);
-          break;
-        case 'hide':
-          sys.actionStore.getState().actions.toggleNodeHidden(nodeID);
-          break;
-      }
-    },
-    [focus, nodeID, sys]
-  );
-
-  return (
-    <VscodeContextMenu
-      show
-      onVscContextMenuSelect={onSelect}
-      style={{ zIndex: 2000, position: 'absolute', ...rest }}
-      data={[
-        {
-          label: 'Focus',
-          keybinding: 'Ctrl+Shift+F',
-          value: 'focus'
-        },
-        {
-          separator: true
-        },
-        {
-          label: 'Trace Upstream',
-          keybinding: 'Ctrl+Shift+R',
-          value: 'traceUpstream'
-        },
-        {
-          label: 'Trace Downstream',
-          keybinding: 'Ctrl+Shift+T',
-          value: 'traceDownstream'
-        },
-        {
-          separator: true
-        },
-        {
-          label: 'Reset Trace',
-          keybinding: 'Ctrl+Shift+G',
-          value: 'resetTrace'
-        },
-
-        {
-          separator: true
-        },
-        {
-          label: isPinned ? 'Unpin' : 'Pin',
-          value: 'pin'
-        },
-        {
-          label: isHidden ? 'Show' : 'Hide',
-          value: 'hide'
-        }
-      ]}
-    >
-      <VscodeContextMenuItem onClick={focus}>Focus</VscodeContextMenuItem>
-      <VscodeDivider />
-
-      <VscodeContextMenuItem onClick={onResetTrace}>
-        Reset Trace
-      </VscodeContextMenuItem>
-      <VscodeDivider />
-    </VscodeContextMenu>
-  );
-};
+/**
+ * Node context menu. Items come from the editor's contextMenu registry (target
+ * 'node') and dispatch through the command registry , see store/contextMenu.ts
+ * and store/commands.ts to add or override entries.
+ */
+export const NodeContextMenu = ({ nodeID, ...rest }: INodeContextMenuProps) => (
+  <DynamicContextMenu target="node" context={{ nodeId: nodeID }} style={rest} />
+);

package/src/components/contextMenus/selection.tsx

@@ -1,77 +1,11 @@
 import type { CSSProperties } from 'react';
-import { useCallback } from 'react';
-import {
-  VscodeContextMenu,
-  VscodeContextMenuItem,
-  VscodeDivider
-} from '@vscode-elements/react-elements';
-import { useSystem } from '@/system';
+import { DynamicContextMenu } from './DynamicContextMenu';
 
 export interface ISelectionContextMenuProps extends CSSProperties {}
 
+/** Selection context menu , items from the contextMenu registry ('selection'). */
 export const SelectionContextMenu = ({
   ...rest
-}: ISelectionContextMenuProps) => {
-  const sys = useSystem();
-
-  const onCopy = useCallback(() => {
-    sys.actionStore.getState().actions.copySelectionToClipboard();
-  }, [sys]);
-
-  const onPaste = useCallback(async () => {
-    await sys.actionStore.getState().actions.pasteFromClipboard();
-  }, [sys]);
-
-  const onGroup = useCallback(() => {
-    sys.actionStore.getState().actions.groupNodes();
-  }, [sys]);
-
-  const onSelect = useCallback(
-    (e: any) => {
-      switch (e.detail.value) {
-        case 'copy':
-          onCopy();
-          break;
-        case 'paste':
-          void onPaste();
-          break;
-        case 'group':
-          onGroup();
-          break;
-      }
-    },
-    [onCopy, onGroup, onPaste]
-  );
-
-  return (
-    <VscodeContextMenu
-      show
-      onVscContextMenuSelect={onSelect}
-      style={{ zIndex: 2000, position: 'absolute', ...rest }}
-      data={[
-        {
-          label: 'Copy',
-          keybinding: 'Ctrl+C',
-          value: 'copy'
-        },
-        {
-          label: 'Paste',
-          keybinding: 'Ctrl+V',
-          value: 'paste'
-        },
-        {
-          separator: true
-        },
-        {
-          label: 'Group',
-          value: 'group'
-        }
-      ]}
-    >
-      <VscodeContextMenuItem onClick={onCopy}>Copy</VscodeContextMenuItem>
-      <VscodeContextMenuItem onClick={onPaste}>Paste</VscodeContextMenuItem>
-      <VscodeDivider />
-      <VscodeContextMenuItem onClick={onGroup}>Group</VscodeContextMenuItem>
-    </VscodeContextMenu>
-  );
-};
+}: ISelectionContextMenuProps) => (
+  <DynamicContextMenu target="selection" context={{}} style={rest} />
+);

package/src/components/controls/any/AnyControlImpl.tsx

@@ -0,0 +1,14 @@
+import type { ControlProps } from '@/store/controls';
+import { JsonEditor } from 'json-edit-react';
+
+/**
+ * The actual `any`-typed value editor. Split into its own module so the heavy
+ * `json-edit-react` dependency (~50 kB) is loaded lazily by [`AnyControl`](./index.tsx)
+ * only when an `any` control is first rendered, instead of sitting in the
+ * editor's first-paint bundle.
+ */
+export const AnyControlImpl = (props: ControlProps) => {
+  return (
+    <JsonEditor data={props.value} setData={(data) => props.onChange(data)} />
+  );
+};

package/src/components/controls/any/index.tsx

@@ -1,8 +1,19 @@
+import { lazy, Suspense } from 'react';
 import type { ControlProps } from '@/store/controls';
-import { JsonEditor } from 'json-edit-react';
+
+// `json-edit-react` is a sizeable dependency and this is the *default* control
+// (used whenever a socket has no specific control), so eager-importing it puts
+// it on the editor's first-paint critical path. Load it lazily instead: the
+// node still renders immediately, and the JSON editor swaps in once its chunk
+// arrives.
+const LazyAnyControl = lazy(() =>
+  import('./AnyControlImpl').then((m) => ({ default: m.AnyControlImpl }))
+);
 
 export const AnyControl = (props: ControlProps) => {
   return (
-    <JsonEditor data={props.value} setData={(data) => props.onChange(data)} />
+    <Suspense fallback={null}>
+      <LazyAnyControl {...props} />
+    </Suspense>
   );
 };

package/src/components/edges/index.tsx

@@ -17,6 +17,74 @@ interface ControlPoint {
   y: number;
 }
 
+/** The reactflow path builder that backs a given edge type when there are no
+ * control points. Unknown types fall back to the better-bezier builder. */
+function edgeFnForType(edgeType: string) {
+  switch (edgeType) {
+    case EDGE_TYPE.simpleBezier:
+      return getSimpleBezierPath;
+    case EDGE_TYPE.smoothStep:
+      return getSmoothStepPath;
+    case EDGE_TYPE.straight:
+      return getStraightPath;
+    case EDGE_TYPE.bezier:
+    default:
+      return getBetterBezierPath;
+  }
+}
+
+/** Straight polyline through every point. */
+function straightPathThrough(points: ControlPoint[]): string {
+  return points
+    .map((p, i) => (i === 0 ? `M ${p.x},${p.y}` : `L ${p.x},${p.y}`))
+    .join(' ');
+}
+
+/** Orthogonal "smooth step" path that jogs at the midpoint of each segment. */
+function smoothStepPathThrough(points: ControlPoint[]): string {
+  let path = `M ${points[0]?.x},${points[0]?.y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const current = points[i];
+    const next = points[i + 1];
+    if (!current || !next) continue;
+    const midX = (current.x + next.x) / 2;
+    path += ` L ${midX},${current.y} L ${midX},${next.y}`;
+  }
+  path += ` L ${points[points.length - 1]?.x},${points[points.length - 1]?.y}`;
+  return path;
+}
+
+/** Curved path through every point, degrading to line/quadratic for 2/3 points. */
+function bezierPathThrough(points: ControlPoint[]): string {
+  if (points.length === 2) {
+    return `M ${points[0]?.x},${points[0]?.y} L ${points[1]?.x},${points[1]?.y}`;
+  }
+  if (points.length === 3) {
+    return `M ${points[0]?.x},${points[0]?.y} Q ${points[1]?.x},${points[1]?.y} ${points[2]?.x},${points[2]?.y}`;
+  }
+
+  // For multiple control points, chain quadratic segments and finish with a line.
+  let path = `M ${points[0]?.x},${points[0]?.y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p1 = points[i + 1];
+    if (!p1) continue;
+
+    if (i === points.length - 2) {
+      path += ` L ${p1.x},${p1.y}`;
+      continue;
+    }
+
+    path += ` Q ${p1.x},${p1.y}`;
+    const p2 = points[i + 2];
+    if (p2) {
+      const midX = (p1.x + p2.x) / 2;
+      const midY = (p1.y + p2.y) / 2;
+      path += ` ${midX},${midY}`;
+    }
+  }
+  return path;
+}
+
 // Generate path for different edge types with control points
 function generatePathWithControlPoints(
   sourceX: number,
@@ -29,26 +97,8 @@ function generatePathWithControlPoints(
   _targetPosition?: Position
 ): string {
   if (controlPoints.length === 0) {
-    // No control points, use default edge type
-    let edgeFn;
-    switch (edgeType) {
-      case EDGE_TYPE.bezier:
-        edgeFn = getBetterBezierPath;
-        break;
-      case EDGE_TYPE.simpleBezier:
-        edgeFn = getSimpleBezierPath;
-        break;
-      case EDGE_TYPE.smoothStep:
-        edgeFn = getSmoothStepPath;
-        break;
-      case EDGE_TYPE.straight:
-        edgeFn = getStraightPath;
-        break;
-      default:
-        edgeFn = getBetterBezierPath;
-    }
-
-    const [path] = edgeFn({
+    // No control points, use the default builder for the edge type.
+    const [path] = edgeFnForType(edgeType)({
       sourceX,
       sourceY,
       sourcePosition: _sourcePosition,
@@ -67,56 +117,12 @@ function generatePathWithControlPoints(
   ];
 
   if (edgeType === EDGE_TYPE.straight) {
-    // Straight lines through all points
-    const pathParts = allPoints.map((p, i) =>
-      i === 0 ? `M ${p.x},${p.y}` : `L ${p.x},${p.y}`
-    );
-    return pathParts.join(' ');
-  } else if (edgeType === EDGE_TYPE.smoothStep) {
-    // Smooth step style through control points
-    let path = `M ${allPoints[0]?.x},${allPoints[0]?.y}`;
-    for (let i = 0; i < allPoints.length - 1; i++) {
-      const current = allPoints[i];
-      const next = allPoints[i + 1];
-      if (!current || !next) continue;
-      const midX = (current.x + next.x) / 2;
-      // Create smooth step
-      path += ` L ${midX},${current.y} L ${midX},${next.y}`;
-    }
-    path += ` L ${allPoints[allPoints.length - 1]?.x},${allPoints[allPoints.length - 1]?.y}`;
-    return path;
-  } else {
-    // Bezier curve through all points
-    if (allPoints.length === 2) {
-      return `M ${allPoints[0]?.x},${allPoints[0]?.y} L ${allPoints[1]?.x},${allPoints[1]?.y}`;
-    } else if (allPoints.length === 3) {
-      return `M ${allPoints[0]?.x},${allPoints[0]?.y} Q ${allPoints[1]?.x},${allPoints[1]?.y} ${allPoints[2]?.x},${allPoints[2]?.y}`;
-    } else {
-      // For multiple control points, use cubic bezier segments
-      let path = `M ${allPoints[0]?.x},${allPoints[0]?.y}`;
-      for (let i = 0; i < allPoints.length - 1; i++) {
-        const p1 = allPoints[i + 1];
-        if (!p1) continue;
-
-        if (i === allPoints.length - 2) {
-          // Last segment
-          path += ` L ${p1.x},${p1.y}`;
-        } else {
-          // Smooth curve using quadratic bezier
-          path += ` Q ${p1.x},${p1.y}`;
-          if (i < allPoints.length - 2) {
-            const p2 = allPoints[i + 2];
-            if (p2) {
-              const midX = (p1.x + p2.x) / 2;
-              const midY = (p1.y + p2.y) / 2;
-              path += ` ${midX},${midY}`;
-            }
-          }
-        }
-      }
-      return path;
-    }
+    return straightPathThrough(allPoints);
+  }
+  if (edgeType === EDGE_TYPE.smoothStep) {
+    return smoothStepPathThrough(allPoints);
   }
+  return bezierPathThrough(allPoints);
 }
 
 type CustomEdgeProps = EdgeProps & {

package/src/components/layoutController/index.module.css

@@ -1,5 +1,8 @@
 .panelExtra {
     display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 4px;
 }
 
 .root {

package/src/components/layoutController/index.tsx

@@ -6,7 +6,12 @@ import { Reduce, Maximize, Xmark } from 'iconoir-react';
 import { useSystem } from '@/system/provider.js';
 import { MenuBar } from '../menubar';
 import { useStore } from 'zustand';
-import { findGraphPanel } from './utils';
+import {
+  findGraphPanel,
+  collectGraphSessionIds,
+  isGraphTabId,
+  sessionIdFromTabId
+} from './utils';
 
 import styles from './index.module.css';
 import { NotificationProvider } from '../notifications';
@@ -97,7 +102,25 @@ export const LayoutController = (props: {}) => {
     if (graphContainer?.activeId) {
       //Get the active Id to find the currently selected graph
       setCurrentPanel(graphContainer.activeId!);
+
+      // Keep the editor's active graph in sync with the focused graph tab so
+      // panels bound via useActiveGraph() rebind to it.
+      if (isGraphTabId(graphContainer.activeId)) {
+        system.activeGraph
+          .getState()
+          .setActiveGraph(sessionIdFromTabId(graphContainer.activeId));
+      }
+    }
+
+    // Dispose sessions whose tabs were closed in this layout change.
+    const before = collectGraphSessionIds(layout);
+    const after = collectGraphSessionIds(newLayout);
+    for (const id of before) {
+      if (!after.has(id)) {
+        system.disposeSession(id);
+      }
     }
+
     setLayout(newLayout);
   };
 

package/src/components/layoutController/utils.ts

@@ -1,8 +1,51 @@
 import type { BoxBase, LayoutBase, PanelBase, TabData } from 'rc-dock';
 
-export function recurseFindGraphPanel(
-  base: BoxBase | PanelBase
-): PanelBase | null {
+/**
+ * Tab-id convention for graph tabs. The default graph uses the bare id `graph`
+ * (session id `graph`); every other graph uses `graph:<sessionId>`. These three
+ * helpers are the single source of truth for the convention.
+ */
+const GRAPH_TAB_PREFIX = 'graph:';
+export const DEFAULT_GRAPH_ID = 'graph';
+
+export function isGraphTabId(id: string | undefined): id is string {
+  return !!id && (id === DEFAULT_GRAPH_ID || id.startsWith(GRAPH_TAB_PREFIX));
+}
+
+export function sessionIdFromTabId(tabId: string): string {
+  return tabId === DEFAULT_GRAPH_ID
+    ? DEFAULT_GRAPH_ID
+    : tabId.slice(GRAPH_TAB_PREFIX.length);
+}
+
+export function tabIdForSession(sessionId: string): string {
+  return sessionId === DEFAULT_GRAPH_ID
+    ? DEFAULT_GRAPH_ID
+    : `${GRAPH_TAB_PREFIX}${sessionId}`;
+}
+
+/** Collect the session ids of every graph tab present in a layout. */
+export function collectGraphSessionIds(layout: LayoutBase): Set<string> {
+  const ids = new Set<string>();
+  const visit = (base?: BoxBase | PanelBase) => {
+    if (!base) return;
+    const panel = base as PanelBase;
+    if (panel.tabs) {
+      for (const tab of panel.tabs) {
+        if (isGraphTabId(tab.id)) ids.add(sessionIdFromTabId(tab.id!));
+      }
+    }
+    const box = base as BoxBase;
+    if (box.children) box.children.forEach(visit);
+  };
+  visit(layout.dockbox);
+  visit(layout.floatbox);
+  visit(layout.maxbox);
+  visit(layout.windowbox);
+  return ids;
+}
+
+function recurseFindGraphPanel(base: BoxBase | PanelBase): PanelBase | null {
   if (base.id === 'graphs') {
     return base as PanelBase;
   }