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

package/src/components/Flow.tsx

@@ -1,37 +1,112 @@
-import type { GraphJSON, IRegistry } from '@kiberon-labs/behave-graph';
-import React from 'react';
-import { Background, BackgroundVariant, ReactFlow } from 'reactflow';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import {
+  Background,
+  BackgroundVariant,
+  type Edge as ReactFlowEdge,
+  MiniMap,
+  ReactFlow,
+  type Node as ReactFlowNode,
+  type ReactFlowInstance
+} from 'reactflow';
 
 import { useBehaveGraphFlow } from '../hooks/useBehaveGraphFlow.js';
 import { useFlowHandlers } from '../hooks/useFlowHandlers.js';
-import { useGraphRunner } from '../hooks/useGraphRunner.js';
-import { useNodeSpecJson } from '../hooks/useNodeSpecJson.js';
-import CustomControls from './Controls.js';
-import { type Examples } from './modals/LoadModal.js';
-import { NodePicker } from './NodePicker.js';
-
-type FlowProps = {
-  initialGraph: GraphJSON;
-  registry: IRegistry;
-  examples: Examples;
+import { useWasdPan } from '../hooks/useWasdPan.js';
+import { useSystem } from '@/system/provider.js';
+import { useStore } from 'zustand';
+import {
+  NodeContextMenu,
+  type INodeContextMenuProps
+} from './contextMenus/node.js';
+import {
+  EdgeContextMenu,
+  type IEdgeContextMenuProps
+} from './contextMenus/edge.js';
+import {
+  SelectionContextMenu,
+  type ISelectionContextMenuProps
+} from './contextMenus/selection.js';
+import { registerDefaultSocketGenerators } from '@/generators/registerDefaultGenerators';
+import { FloatingToolbar } from './FloatingToolbar';
+import { layerId } from '@/annotations';
+
+const REACTFLOW_NODE = 'react-flow__node';
+
+const getAnnotatedLayerId = (node: ReactFlowNode): string | undefined => {
+  if (!node.data || typeof node.data !== 'object') return undefined;
+  const record = node.data as { annotations?: Record<string, unknown> };
+  const value = record.annotations?.[layerId];
+  return typeof value === 'string' ? value : undefined;
 };
 
-export const Flow: React.FC<FlowProps> = ({
-  initialGraph: graph,
-  registry,
-  examples
-}) => {
-  const specJson = useNodeSpecJson(registry);
+const isNodeVisibleInLayers = (
+  node: ReactFlowNode,
+  params: {
+    layers: Record<string, { visible: boolean }>;
+    nodeLayers: Record<string, string>;
+    defaultLayerId: string;
+  }
+): boolean => {
+  const mappedLayerId =
+    params.nodeLayers[node.id] ??
+    getAnnotatedLayerId(node) ??
+    params.defaultLayerId;
+  const layer =
+    params.layers[mappedLayerId] ?? params.layers[params.defaultLayerId];
+  return layer?.visible !== false;
+};
 
-  const {
-    nodes,
-    edges,
-    onNodesChange,
-    onEdgesChange,
-    graphJson,
-    setGraphJson,
-    nodeTypes
-  } = useBehaveGraphFlow({
+export const Flow: React.FC = () => {
+  const system = useSystem();
+  const getGraphJson = useStore(system.flowStore, (x) => x.getGraph);
+  const specJson = useStore(system.specStore, (x) => x.specs);
+  const showGrid = useStore(system.systemSettings, (x) => x.showGrid);
+  const showMinimap = useStore(system.systemSettings, (x) => x.showMinimap);
+  const snapToGrid = useStore(system.systemSettings, (x) => x.snapGrid);
+  const gridSize = useStore(system.systemSettings, (x) => x.gridSize);
+  const edgeTypes = useStore(system.flowStore, (x) => x.edgeTypes);
+  const nodeTypes = useStore(system.flowStore, (x) => x.nodeTypes);
+  const layers = useStore(system.layerStore, (x) => x.layers);
+  const nodeLayers = useStore(system.layerStore, (x) => x.nodeLayers);
+  const defaultLayerId = useStore(system.layerStore, (x) => x.defaultLayerId);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const setRef = useStore(system.refStore, (x) => x.setRef);
+
+  const getReactFlowInstance = useCallback(
+    () => system.refStore.getState().getRef('reactflow'),
+    [system.refStore]
+  );
+
+  useWasdPan({ getReactFlowInstance });
+
+  // Set reactflow ref
+  const setReactflowRef = React.useCallback(
+    (reactFlowInstance: ReactFlowInstance) => {
+      if (reactFlowInstance) {
+        setRef('reactflow', reactFlowInstance);
+      }
+    },
+    [setRef]
+  );
+
+  const graph = useMemo(() => getGraphJson(), []);
+
+  useEffect(() => {
+    const cleanupGenerators = registerDefaultSocketGenerators(system);
+
+    return () => {
+      cleanupGenerators();
+    };
+  }, [system]);
+
+  const { nodes, edges, onNodesChange, onEdgesChange } = useBehaveGraphFlow({
     initialGraphJson: graph,
     specJson
   });
@@ -41,11 +116,7 @@ export const Flow: React.FC<FlowProps> = ({
     handleStartConnect,
     handleStopConnect,
     handlePaneClick,
-    handlePaneContextMenu,
-    nodePickerVisibility,
-    handleAddNode,
-    closeNodePicker,
-    nodePickFilters
+    handlePaneContextMenu
   } = useFlowHandlers({
     nodes,
     onEdgesChange,
@@ -53,49 +124,179 @@ export const Flow: React.FC<FlowProps> = ({
     specJSON: specJson
   });
 
-  const { togglePlay, playing } = useGraphRunner({
-    graphJson,
-    registry
-  });
+  const [menu, setMenu] = useState<INodeContextMenuProps | null>(null);
+  const [edgeMenu, setEdgeMenu] = useState<IEdgeContextMenuProps | null>(null);
+  const [selectionMenu, setSelectionMenu] =
+    useState<ISelectionContextMenuProps | null>(null);
+  const onNodeContextMenu = useCallback(
+    (event: React.MouseEvent<Element, MouseEvent>) => {
+      // Prevent native context menu from showing
+      event.preventDefault();
+      setEdgeMenu(null);
+      setSelectionMenu(null);
+      const offset = ref.current?.getBoundingClientRect();
+      //Keep ascending till we find the .react-flow__node
+      let target = event.target as HTMLElement | null;
+      let nodeID = null;
+      while (target && !target.classList.contains(REACTFLOW_NODE)) {
+        target = target.parentElement;
+      }
+      if (target) {
+        nodeID = target.getAttribute('data-id');
+      }
+      setMenu({
+        //We should be safe here as reactflow only triggers this on nodes
+        nodeID: nodeID!,
+        top: event.clientY - (offset?.top ?? 0),
+        left: event.clientX - (offset?.left ?? 0)
+      });
+    },
+    [setMenu, setEdgeMenu]
+  );
+
+  const onEdgeContextMenu = useCallback(
+    (event: React.MouseEvent, edge: any) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setMenu(null);
+      setSelectionMenu(null);
+      const offset = ref.current?.getBoundingClientRect();
+      setEdgeMenu({
+        edgeID: edge.id,
+        sourceID: edge.source,
+        targetID: edge.target,
+        top: event.clientY - (offset?.top ?? 0),
+        left: event.clientX - (offset?.left ?? 0)
+      });
+    },
+    [setEdgeMenu, setMenu]
+  );
+
+  const onSelectionContextMenu = useCallback(
+    (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setMenu(null);
+      setEdgeMenu(null);
+      const offset = ref.current?.getBoundingClientRect();
+      setSelectionMenu({
+        top: event.clientY - (offset?.top ?? 0),
+        left: event.clientX - (offset?.left ?? 0)
+      });
+    },
+    [setMenu, setEdgeMenu, setSelectionMenu]
+  );
+
+  const snapGrid = useMemo(() => {
+    return [gridSize, gridSize] as [number, number];
+  }, [gridSize]);
+
+  const onPaneClick = useCallback(() => {
+    setMenu(null);
+    setEdgeMenu(null);
+    setSelectionMenu(null);
+    handlePaneClick();
+  }, [setMenu, setEdgeMenu, setSelectionMenu, handlePaneClick]);
+
+  const renderedNodes = useMemo(() => {
+    return nodes.map((node) => {
+      const mappedLayerId =
+        nodeLayers[node.id] ?? getAnnotatedLayerId(node) ?? defaultLayerId;
+      const layer = layers[mappedLayerId] ?? layers[defaultLayerId];
+      if (!layer) return node;
+
+      return {
+        ...node,
+        hidden: !layer.visible,
+        style: {
+          ...(node.style ?? {}),
+          opacity: layer.opacity
+        }
+      };
+    });
+  }, [defaultLayerId, layers, nodeLayers, nodes]);
+
+  const renderedEdges = useMemo(() => {
+    const nodesById = new Map<string, ReactFlowNode>();
+    nodes.forEach((node) => {
+      nodesById.set(node.id, node);
+    });
+
+    return edges.map((edge: ReactFlowEdge) => {
+      const sourceNode = nodesById.get(edge.source);
+      const targetNode = nodesById.get(edge.target);
+
+      // If either endpoint is missing just leave the edge as-is
+      if (!sourceNode || !targetNode) return edge;
+
+      const sourceVisible = isNodeVisibleInLayers(sourceNode, {
+        layers,
+        nodeLayers,
+        defaultLayerId
+      });
+      const targetVisible = isNodeVisibleInLayers(targetNode, {
+        layers,
+        nodeLayers,
+        defaultLayerId
+      });
+
+      const shouldHide = !sourceVisible || !targetVisible;
+
+      // Return as hidden when an endpoint node is in a hidden layer.
+      // Using `hidden` rather than filtering so ReactFlow still tracks the
+      // connection and handles continue to render as connected.
+      if (shouldHide === edge.hidden) return edge;
+      return { ...edge, hidden: shouldHide };
+    });
+  }, [defaultLayerId, edges, layers, nodeLayers, nodes]);
 
   return (
-    <ReactFlow
-      nodeTypes={nodeTypes}
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onConnect={onConnect}
-      // @ts-ignore
-      onConnectStart={handleStartConnect}
-      // @ts-ignore
-      onConnectEnd={handleStopConnect}
-      fitView
-      fitViewOptions={{ maxZoom: 1 }}
-      onPaneClick={handlePaneClick}
-      onPaneContextMenu={handlePaneContextMenu}
-    >
-      <CustomControls
-        playing={playing}
-        togglePlay={togglePlay}
-        setBehaviorGraph={setGraphJson}
-        examples={examples}
-        specJson={specJson}
-      />
-      <Background
-        variant={BackgroundVariant.Lines}
-        color="#2a2b2d"
-        style={{ backgroundColor: '#1E1F22' }}
-      />
-      {nodePickerVisibility && (
-        <NodePicker
-          position={nodePickerVisibility}
-          filters={nodePickFilters}
-          onPickNode={handleAddNode}
-          onClose={closeNodePicker}
-          specJSON={specJson}
-        />
-      )}
-    </ReactFlow>
+    <>
+      <ReactFlow
+        style={{ flex: 1 }}
+        ref={ref}
+        onInit={setReactflowRef}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        elevateEdgesOnSelect={true}
+        nodes={renderedNodes}
+        edges={renderedEdges}
+        onSelectionContextMenu={onSelectionContextMenu}
+        onNodeContextMenu={onNodeContextMenu}
+        // @ts-ignore
+        onEdgeContextMenu={onEdgeContextMenu}
+        maxZoom={Infinity}
+        minZoom={-Infinity}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        // @ts-ignore
+        onConnectStart={handleStartConnect}
+        // @ts-ignore
+        onConnectEnd={handleStopConnect}
+        snapToGrid={snapToGrid}
+        snapGrid={snapGrid}
+        fitView
+        //TODO. Reconsier this prop for performance
+        onlyRenderVisibleElements={true}
+        onPaneClick={onPaneClick}
+        onPaneContextMenu={handlePaneContextMenu}
+        proOptions={{ hideAttribution: true }}
+      >
+        {showGrid && (
+          <Background
+            variant={BackgroundVariant.Lines}
+            gap={90}
+            color="#373737"
+            style={{ backgroundColor: 'var(--colors-bgCanvas)' }}
+          />
+        )}
+        {showMinimap && <MiniMap />}
+        {menu && <NodeContextMenu {...menu} />}
+        {edgeMenu && <EdgeContextMenu {...edgeMenu} />}
+        {selectionMenu && <SelectionContextMenu {...selectionMenu} />}
+        <FloatingToolbar />
+      </ReactFlow>
+    </>
   );
 };

package/src/components/contextMenus/NodePicker.module.css

@@ -0,0 +1,274 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--colors-fg);
+  background: var(--colors-bgCanvas);
+  overflow: hidden;
+}
+
+.grid {
+  display: flex;
+  overflow: auto;
+  flex: 1
+}
+
+.sidebar {
+  border-right: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+  background: var(--colors-bgPanel);
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+}
+
+
+.sidebarList {
+  overflow: auto;
+  padding: 0.25rem;
+}
+
+.sidebarItem {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  user-select: none;
+  font-size: 0.8em;
+}
+
+.sidebarItem:hover {
+  background: var(--vscode-button-hoverBackground, #026ec1);
+}
+
+.sidebarItemActive {
+  background: var(--vscode-button-secondaryBackground, #313131);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+
+.main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+}
+
+.search {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+}
+
+.viewToggles {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.content {
+  padding: 0.25rem 0.5rem;
+  flex: 1;
+  overflow-y: scroll;
+}
+
+.groupTitle {
+  padding: 0.25rem 0.25rem;
+  font-weight: 600;
+  opacity: 0.9;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.nodeRow {
+  display: grid;
+  grid-template-columns: 28px 1fr auto;
+  gap: 0.25rem;
+  align-items: center;
+  padding: 0.15rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+
+.gridView {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 0.5rem;
+}
+
+.nodeRow:hover {
+  background: var(--vscode-button-hoverBackground, #026ec1);
+}
+
+.infoButton {
+  opacity: 0;
+  transition: opacity 0.2s;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  background: transparent;
+  border: none;
+  color: var(--colors-fg);
+}
+
+.infoButton:hover {
+  background: var(--vscode-button-secondaryBackground, #313131);
+  opacity: 1 !important;
+}
+
+.nodeRow:hover .infoButton {
+  opacity: 0.7;
+}
+
+.infoButton svg {
+  width: 16px;
+  height: 16px;
+}
+
+.thumb {
+  width: 28px;
+  height: 28px;
+  border-radius: 0.25rem;
+  border: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+  background: var(--colors-bgCanvas);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.icon {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.nodeText {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.nodeTitle {
+  font-size: 0.9rem;
+  line-height: 1.2rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gridView .nodeTitle {
+  font-size: 0.75rem;
+}
+
+.nodeSub {
+  font-size: 0.75rem;
+  opacity: 0.75;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.tag {
+  font-size: 0.65rem;
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.25rem;
+  background: var(--vscode-badge-background, #4d4d4d);
+  color: var(--vscode-badge-foreground, #ffffff);
+  opacity: 0.85;
+}
+
+.card {
+  border-radius: 0.25rem;
+  cursor: pointer;
+  overflow: hidden;
+  background: var(--colors-bgCanvas);
+}
+
+.card:hover {
+  background: var(--vscode-button-hoverBackground, #026ec1);
+}
+
+.cardInner {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: 0.15rem;
+  padding: 0.5rem;
+  align-items: center;
+}
+
+.gridView .cardInner {
+  grid-template-columns: 1fr;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.cardThumb {
+  width: 56px;
+  height: 56px;
+  border-radius: 0.25rem;
+  border: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cardThumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.footer {
+  padding: 0.35rem 0.5rem;
+  border-top: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+  font-size: 0.75rem;
+  opacity: 0.8;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.empty {
+  padding: 1rem;
+  opacity: 0.8;
+}