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

package/src/generators/SwitchOnStringGenerator.tsx

@@ -0,0 +1,263 @@
+import React, { useCallback, useState } from 'react';
+import {
+  VscodeButton,
+  VscodeTextfield,
+  VscodeSingleSelect,
+  VscodeOption
+} from '@vscode-elements/react-elements';
+import { Plus, Minus } from 'iconoir-react';
+
+import { useSystem } from '@/system/provider';
+import type { SocketGeneratorRenderProps } from '@/store/socketGenerator';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph/Graphs/IO/NodeSpecJSON';
+
+const NAME = 'flow/switch/string.socketGenerator';
+
+export function getSwitchOnStringGenerator() {
+  return {
+    name: NAME,
+    check: (spec: NodeSpecJSON) => spec?.type === 'flow/switch/string',
+    render: SwitchOnStringGenerator
+  };
+}
+
+const SwitchOnStringGenerator: React.FC<SocketGeneratorRenderProps> = ({
+  node
+}) => {
+  const system = useSystem();
+
+  const numCases = node.data.configuration?.numCases ?? 0;
+  const caseLabels = node.data.configuration?.caseLabels ?? {};
+  const caseValues = node.data.configuration?.cases ?? {};
+
+  const [selectedCase, setSelectedCase] = useState<number>(1);
+
+  const updateNumCases = useCallback(
+    (newNumCases: number) => {
+      if (newNumCases < 0) return;
+
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n: any) => {
+          if (n.id !== node.id) return n;
+
+          // Preserve existing case values when changing numCases
+          const existingCases = n.data?.configuration?.cases ?? {};
+          const newCases: Record<string, string> = {};
+          for (let i = 1; i <= newNumCases; i++) {
+            const key = `${i}`;
+            newCases[key] = existingCases[key] ?? `case${i}`;
+          }
+
+          // Generate input sockets for each case
+          const inputs = [];
+          for (let i = 1; i <= newNumCases; i++) {
+            const key = `${i}`;
+            inputs.push({
+              name: n.data?.configuration?.caseLabels?.[key] || `Case ${i}`,
+              key,
+              valueType: 'string'
+            });
+          }
+
+          // Generate output sockets for each case
+          const outputs = [];
+          for (let i = 1; i <= newNumCases; i++) {
+            const label =
+              n.data?.configuration?.caseLabels?.[`${i}`] || `Case ${i}`;
+            outputs.push({
+              name: label,
+              key: `${i}`,
+              valueType: 'flow'
+            });
+          }
+          // Add default output
+          outputs.push({
+            name: 'default',
+            key: 'default',
+            valueType: 'flow'
+          });
+
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              configuration: {
+                ...n.data?.configuration,
+                numCases: newNumCases,
+                cases: newCases
+              },
+              dynamicPorts: {
+                ...n.data?.dynamicPorts,
+                inputs,
+                outputs
+              }
+            }
+          };
+        })
+      );
+
+      if (selectedCase > newNumCases && newNumCases > 0) {
+        setSelectedCase(newNumCases);
+      }
+    },
+    [node.id, system, selectedCase]
+  );
+
+  const updateCaseValue = useCallback(
+    (caseIndex: number, value: string) => {
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n: any) => {
+          if (n.id !== node.id) return n;
+
+          const updatedCases = {
+            ...n.data?.configuration?.cases,
+            [`${caseIndex}`]: value
+          };
+
+          const updatedLabels = {
+            ...n.data?.configuration?.caseLabels,
+            [`${caseIndex}`]: value || `Case ${caseIndex}`
+          };
+
+          // Update input sockets
+          const numCases = n.data?.configuration?.numCases ?? 0;
+          const inputs = [];
+          for (let i = 1; i <= numCases; i++) {
+            const key = `${i}`;
+            inputs.push({
+              name: updatedLabels[key] || `Case ${i}`,
+              key,
+              valueType: 'string'
+            });
+          }
+
+          // Regenerate output sockets with updated labels
+          const outputs = [];
+          for (let i = 1; i <= numCases; i++) {
+            const label = updatedLabels[`${i}`] || `Case ${i}`;
+            outputs.push({
+              name: label,
+              key: `${i}`,
+              valueType: 'flow'
+            });
+          }
+          outputs.push({
+            name: 'default',
+            key: 'default',
+            valueType: 'flow'
+          });
+
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              dynamicPorts: {
+                ...n.data?.dynamicPorts,
+                inputs,
+                outputs
+              },
+              configuration: {
+                ...n.data?.configuration,
+                cases: updatedCases,
+                caseLabels: updatedLabels
+              }
+            }
+          };
+        })
+      );
+    },
+    [node.id, system]
+  );
+
+  const addCase = useCallback(() => {
+    const newCount = numCases + 1;
+    updateNumCases(newCount);
+    setSelectedCase(newCount);
+  }, [numCases, updateNumCases]);
+
+  const removeCase = useCallback(() => {
+    updateNumCases(Math.max(0, numCases - 1));
+  }, [numCases, updateNumCases]);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          marginBottom: 4
+        }}
+      >
+        <div style={{ fontSize: 12, opacity: 0.9 }}>Cases: {numCases}</div>
+      </div>
+
+      {numCases > 0 && (
+        <>
+          <div style={{ fontSize: 11, opacity: 0.8, marginBottom: -4 }}>
+            Edit Case
+          </div>
+          <VscodeSingleSelect
+            value={String(selectedCase)}
+            onChange={(e: any) => setSelectedCase(Number(e.target.value))}
+          >
+            {Array.from({ length: numCases }, (_, i) => i + 1).map(
+              (caseIndex) => (
+                <VscodeOption key={caseIndex} value={String(caseIndex)}>
+                  {caseLabels[`${caseIndex}`] || `Case ${caseIndex}`}
+                </VscodeOption>
+              )
+            )}
+          </VscodeSingleSelect>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+            <label style={{ fontSize: 11, opacity: 0.8 }}>Match Value</label>
+            <VscodeTextfield
+              value={caseValues[`${selectedCase}`] ?? ''}
+              onInput={(e: any) =>
+                updateCaseValue(selectedCase, e.target.value)
+              }
+              placeholder={`String value for case ${selectedCase}`}
+            />
+          </div>
+        </>
+      )}
+
+      <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
+        <VscodeButton
+          onClick={addCase}
+          style={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4
+          }}
+        >
+          <Plus width={16} height={16} />
+          Add Case
+        </VscodeButton>
+        <VscodeButton
+          onClick={removeCase}
+          disabled={numCases === 0}
+          style={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4
+          }}
+        >
+          <Minus width={16} height={16} />
+          Remove
+        </VscodeButton>
+      </div>
+    </div>
+  );
+};

package/src/generators/registerDefaultGenerators.ts

@@ -0,0 +1,34 @@
+import type { System } from '@/system/system';
+import { getSwitchOnStringGenerator } from '../generators/SwitchOnStringGenerator';
+import { getSwitchOnIntegerGenerator } from '../generators/SwitchOnIntegerGenerator';
+import { getCustomEventOnTriggeredGenerator } from '../generators/CustomEventOnTriggeredGenerator';
+import { getSequenceGenerator } from '../generators/SequenceGenerator';
+
+export function registerDefaultSocketGenerators(system: System): () => void {
+  const store = system.socketGeneratorStore.getState();
+
+  const switchOnString = getSwitchOnStringGenerator();
+  store.registerGenerator(switchOnString);
+
+  const switchOnInteger = getSwitchOnIntegerGenerator();
+  store.registerGenerator(switchOnInteger);
+
+  const customEventOnTriggered = getCustomEventOnTriggeredGenerator();
+  store.registerGenerator(customEventOnTriggered);
+
+  const sequence = getSequenceGenerator();
+  store.registerGenerator(sequence);
+
+  return () => {
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(switchOnString.name);
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(switchOnInteger.name);
+    system.socketGeneratorStore
+      .getState()
+      .unregisterGenerator(customEventOnTriggered.name);
+    system.socketGeneratorStore.getState().unregisterGenerator(sequence.name);
+  };
+}

package/src/hooks/useBehaveGraphFlow.ts

@@ -1,16 +1,11 @@
 import type { GraphJSON, NodeSpecJSON } from '@kiberon-labs/behave-graph';
 import { useCallback, useEffect, useState } from 'react';
-import { useEdgesState, useNodesState } from 'reactflow';
-
 import { behaveToFlow } from '../transformers/behaveToFlow.js';
 import { flowToBehave } from '../transformers/flowToBehave.js';
 import { autoLayout } from '../util/autoLayout.js';
 import { hasPositionMetaData } from '../util/hasPositionMetaData.js';
-import { useCustomNodeTypes } from './useCustomNodeTypes.js';
-
-export const fetchBehaviorGraphJson = async (url: string) =>
-  // eslint-disable-next-line unicorn/no-await-expression-member
-  (await (await fetch(url)).json()) as GraphJSON;
+import { useSystem } from '@/system/provider.js';
+import { useStore } from 'zustand';
 
 /**
  * Hook that returns the nodes and edges for react-flow, and the graphJson for the behave-graph.
@@ -27,8 +22,19 @@ export const useBehaveGraphFlow = ({
   specJson: NodeSpecJSON[] | undefined;
 }) => {
   const [graphJson, setStoredGraphJson] = useState<GraphJSON | undefined>();
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const sys = useSystem();
+
+  const {
+    nodes,
+    setNodes,
+    applyNodeChanges: onNodesChange
+  } = useStore(sys.nodeStore);
+
+  const {
+    edges,
+    setEdges,
+    applyEdgeChanges: onEdgesChange
+  } = useStore(sys.edgeStore);
 
   const setGraphJson = useCallback(
     (graphJson: GraphJSON) => {
@@ -55,21 +61,16 @@ export const useBehaveGraphFlow = ({
   useEffect(() => {
     if (!specJson) return;
     // when nodes and edges are updated, update the graph json with the flow to behave behavior
-    const graphJson = flowToBehave(nodes, edges, specJson);
+    const graphJson = flowToBehave(sys, nodes, edges, specJson);
     setStoredGraphJson(graphJson);
   }, [nodes, edges, specJson]);
 
-  const nodeTypes = useCustomNodeTypes({
-    specJson
-  });
-
   return {
     nodes,
     edges,
     onEdgesChange,
     onNodesChange,
     setGraphJson,
-    graphJson,
-    nodeTypes
+    graphJson
   };
 };

package/src/hooks/useDetachNodes.ts

@@ -0,0 +1,39 @@
+import { useSystem } from '@/system';
+import { useCallback } from 'react';
+import { useStoreApi } from 'reactflow';
+import { useStore } from 'zustand';
+
+export function useDetachNodes() {
+  const sys = useSystem();
+  const setNodes = useStore(sys.nodeStore, (x) => x.setNodes);
+  const store = useStoreApi();
+
+  const detachNodes = useCallback(
+    (ids: string[], removeParentId?: string) => {
+      const { nodeInternals } = store.getState();
+      const nextNodes = Array.from(nodeInternals.values()).map((n) => {
+        if (ids.includes(n.id) && n.parentId) {
+          const parentNode = nodeInternals.get(n.parentId);
+
+          //Remove parent reference and recalculate in global space
+          return {
+            ...n,
+            position: {
+              x: n.position.x + (parentNode?.positionAbsolute?.x ?? 0),
+              y: n.position.y + (parentNode?.positionAbsolute?.y ?? 0)
+            },
+            extent: undefined,
+            parentId: undefined
+          };
+        }
+        return n;
+      });
+      setNodes(
+        nextNodes.filter((n) => !removeParentId || n.id !== removeParentId)
+      );
+    },
+    [setNodes, store]
+  );
+
+  return detachNodes;
+}

package/src/hooks/useFlowHandlers.ts

@@ -7,6 +7,7 @@ import {
 } from 'react';
 import type {
   Connection,
+  ConnectionStatus,
   Node,
   OnConnectStartParams,
   XYPosition
@@ -16,6 +17,13 @@ import { v4 as uuidv4 } from 'uuid';
 import { calculateNewEdge } from '../util/calculateNewEdge.js';
 import { getNodePickerFilters } from '../util/getPickerFilters.js';
 import { useBehaveGraphFlow } from './useBehaveGraphFlow.js';
+import { useSystem } from '@/system/provider.js';
+import type { ExtendedNodeSpecJSON } from '@/components/contextMenus/NodePicker.js';
+import {
+  addFloatingTab,
+  findTabInLayout,
+  removeTabFromLayout
+} from '@/components/layoutController/utils.js';
 
 type BehaveGraphFlow = ReturnType<typeof useBehaveGraphFlow>;
 
@@ -48,11 +56,11 @@ export const useFlowHandlers = ({
   nodes: Node[];
   specJSON: NodeSpecJSON[] | undefined;
 }) => {
+  const sys = useSystem();
   const [lastConnectStart, setLastConnectStart] =
     useState<OnConnectStartParams>();
   const [nodePickerVisibility, setNodePickerVisibility] =
     useState<XYPosition>();
-
   const onConnect = useCallback(
     (connection: Connection) => {
       if (connection.source === null) return;
@@ -65,6 +73,7 @@ export const useFlowHandlers = ({
         sourceHandle: connection.sourceHandle,
         targetHandle: connection.targetHandle
       };
+      sys.pubsub.publish('edge:added', newEdge);
       onEdgesChange([
         {
           type: 'add',
@@ -78,23 +87,40 @@ export const useFlowHandlers = ({
   const closeNodePicker = useCallback(() => {
     setLastConnectStart(undefined);
     setNodePickerVisibility(undefined);
-  }, []);
+
+    // Close the nodepicker panel from rc-dock
+    const currentLayout = sys.tabStore.getState().layout;
+    const newLayout = removeTabFromLayout(currentLayout, 'nodepicker');
+    sys.tabStore.getState().setLayout(newLayout);
+  }, [sys]);
 
   const handleAddNode = useCallback(
-    (nodeType: string, position: XYPosition) => {
+    (spec: ExtendedNodeSpecJSON, position: XYPosition) => {
       closeNodePicker();
       const newNode = {
         id: uuidv4(),
-        type: nodeType,
+        type: spec.nodeType ?? 'behaveNode',
         position,
-        data: {}
+        data: {
+          configuration: {},
+          type: spec.type,
+          ports: {}
+        }
       };
-      onNodesChange([
-        {
-          type: 'add',
-          item: newNode
+
+      sys.undoManager.execute({
+        name: `Add node (${spec.type})`,
+        execute: () => {
+          sys.nodeStore.getState().addNode(newNode);
+        },
+        undo: () => {
+          sys.nodeStore
+            .getState()
+            .setNodes((existing) =>
+              existing.filter((n) => n.id !== newNode.id)
+            );
         }
-      ]);
+      });
 
       if (lastConnectStart === undefined) return;
 
@@ -109,7 +135,7 @@ export const useFlowHandlers = ({
           type: 'add',
           item: calculateNewEdge(
             originNode,
-            nodeType,
+            spec.type,
             newNode.id,
             lastConnectStart,
             specJSON
@@ -134,30 +160,90 @@ export const useFlowHandlers = ({
     []
   );
 
-  const handleStopConnect = useCallback((e: MouseEvent) => {
-    const element = e.target as HTMLElement;
-    console.log(
-      'here',
-      element.classList,
-      element.classList.contains('react-flow__pane')
-    );
-    if (element.classList.contains('react-flow__pane')) {
-      console.log('setting node picker');
-      setNodePickerVisibility({ x: e.clientX, y: e.clientY });
-    } else {
-      setLastConnectStart(undefined);
-    }
-  }, []);
+  const handleStopConnect = useCallback(
+    (e: MouseEvent, _connectionState: ConnectionStatus) => {
+      const element = e.target as HTMLElement;
+      if (element.classList.contains('react-flow__pane')) {
+        const screenPos = { x: e.clientX, y: e.clientY };
+        setNodePickerVisibility(screenPos);
+
+        // Store screen position for NodePickerPanel to use
+        sys.refStore.getState().setRef('nodePickerPosition', screenPos);
+
+        // Open as floating rc-dock panel
+        const currentLayout = sys.tabStore.getState().layout;
+
+        // Close existing nodepicker if open
+        const existingPanel = findTabInLayout(currentLayout, 'nodepicker');
+        let layoutToUse = currentLayout;
+        if (existingPanel) {
+          layoutToUse = removeTabFromLayout(currentLayout, 'nodepicker');
+        }
+
+        // Create new floating panel with minimal tab data
+        // The actual content will be loaded by tabLoader
+        const tabData = {
+          id: 'nodepicker',
+          group: 'headless'
+        };
+
+        const newLayout = addFloatingTab(layoutToUse, tabData, {
+          left: e.clientX,
+          top: e.clientY,
+          width: 600,
+          height: 500
+        });
+
+        sys.tabStore.getState().setLayout(newLayout);
+      } else {
+        setLastConnectStart(undefined);
+      }
+    },
+    [sys]
+  );
 
   const handlePaneClick = useCallback(
     () => closeNodePicker(),
     [closeNodePicker]
   );
 
-  const handlePaneContextMenu = useCallback((e: ReactMouseEvent) => {
-    e.preventDefault();
-    setNodePickerVisibility({ x: e.clientX, y: e.clientY });
-  }, []);
+  const handlePaneContextMenu = useCallback(
+    (e: ReactMouseEvent) => {
+      e.preventDefault();
+      const screenPos = { x: e.clientX, y: e.clientY };
+      setNodePickerVisibility(screenPos);
+
+      // Store screen position for NodePickerPanel to use
+      sys.refStore.getState().setRef('nodePickerPosition', screenPos);
+
+      // Open as floating rc-dock panel
+      const currentLayout = sys.tabStore.getState().layout;
+
+      // Close existing nodepicker if open
+      const existingPanel = findTabInLayout(currentLayout, 'nodepicker');
+      let layoutToUse = currentLayout;
+      if (existingPanel) {
+        layoutToUse = removeTabFromLayout(currentLayout, 'nodepicker');
+      }
+
+      // Create new floating panel with minimal tab data
+      // The actual content will be loaded by tabLoader
+      const tabData = {
+        id: 'nodepicker',
+        group: 'headless'
+      };
+
+      const newLayout = addFloatingTab(layoutToUse, tabData, {
+        left: e.clientX,
+        top: e.clientY,
+        width: 600,
+        height: 500
+      });
+
+      sys.tabStore.getState().setLayout(newLayout);
+    },
+    [sys]
+  );
 
   const nodePickFilters = useNodePickFilters({
     nodes,