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

package/src/css/rc-menu.css

@@ -0,0 +1,100 @@
+.rc-menu {
+    color: var(--colors-fg);
+    border: none;
+    font-size: var(--fontSizes-small);
+    box-shadow: var(--shadows-focus);
+    font:var(--vscode-editor-font-family) !important;
+}
+
+
+
+.rc-menu-item-active,
+.rc-menu-submenu-active>.rc-menu-submenu-title {
+    background: var(--colors-bgEmphasis);
+    cursor: default;
+}
+
+
+
+.rc-menu-horizontal {
+    margin: 0;
+    background-color: var(--colors-bgCanvas);
+    color: var(--colors-fg);
+    border-radius: 0;
+    border-bottom: 1px solid var(--colors-borderSubtle);
+    box-shadow: none;
+
+}
+
+.rc-menu-horizontal>.rc-menu-item,
+.rc-menu-horizontal>.rc-menu-submenu>.rc-menu-submenu-title {
+    padding: 0em 0.5em;
+    font-size: 0.8em;
+}
+
+.rc-menu-item-selected {
+    background-color: unset;
+    transform: translateZ(0);
+}
+
+.rc-menu-submenu-selected {
+    background-color: unset;
+}
+
+.rc-menu-horizontal>.rc-menu-item:hover,
+.rc-menu-horizontal>.rc-menu-submenu>.rc-menu-submenu-title:hover {
+    background: var(--colors-bgEmphasis);
+    border-radius: 2px;
+    border-bottom: none;
+}
+
+
+.rc-menu-horizontal>.rc-menu-submenu-active,
+.rc-menu-horizontal>.rc-menu-item-active {
+    color: white;
+    border-radius: 2px;
+    background: var(--colors-bgSubtle);
+    border-bottom: none;
+}
+
+
+
+
+.rc-menu-submenu>.rc-menu {
+    background-color: var(--colors-bgCanvas);
+    border: 1px solid var(--colors-borderSubtle);
+    font-size: 0.8em;
+}
+
+
+.rc-menu-vertical>.rc-menu-item,
+.rc-menu-vertical-left>.rc-menu-item,
+.rc-menu-vertical-right>.rc-menu-item,
+.rc-menu-inline>.rc-menu-item,
+.rc-menu-vertical>.rc-menu-submenu>.rc-menu-submenu-title,
+.rc-menu-vertical-left>.rc-menu-submenu>.rc-menu-submenu-title,
+.rc-menu-vertical-right>.rc-menu-submenu>.rc-menu-submenu-title,
+.rc-menu-inline>.rc-menu-submenu>.rc-menu-submenu-title {
+    cursor: pointer;
+    padding: var(--sizes-2) var(--sizes-4);
+}
+
+.rc-menu-item-divider {
+    background-color:var(--colors-borderDefault);
+}
+
+.rc-menu-item:hover .inner-menu-item {
+    background-color: var(--vscode-button-background, #0078d4)
+}
+
+.rc-menu-submenu-popup {
+    z-index: 1000;
+}
+
+.dock-style-headless .dock-nav-list  {
+display: none;
+}
+
+.dock-style-headless .drag-initiator{
+    height:0.5em;
+}

package/src/css/vars.css

@@ -0,0 +1,14 @@
+:root {
+    --colors-bgCanvas: #1f1f1f;
+    --colors-bgDefault: #181818;
+    --colors-bgEmphasis: #444444;
+    --colors-bgSubtle: #373737;
+    --colors-bgSurface: #292929;
+    --colors-borderDefault: #636363;
+    --colors-borderMuted: #2e2e2e;
+    --colors-borderSubtle: #454545;
+    --colors-fg: #fff;
+    --colors-fgSubtle: #8a8a8a;
+    --colors-inputBg: red;
+    --colors-inputBorderRest: red;
+}

package/src/css/vscode.css

@@ -0,0 +1,13 @@
+:root {
+    --vscode-button-border: #313131;
+    --vscode-foreground: #cccccc;
+    --vscode-editorWidget-background: #202020;
+    --vscode-editorWidget-foreground: #cccccc;
+    --vscode-editorWidget-border: #454545;
+    --vscode-editor-background: #1f1f1f;
+    --vscode-editor-foreground: #cccccc;
+    --vscode-editorGroupHeader-tabsBackground: #181818;
+    --vscode-sideBarSectionHeader-background: #181818;
+    --vscode-sideBarSectionHeader-foreground: #cccccc;
+    --vscode-sideBarSectionHeader-border: #2b2b2b;
+}

package/src/entry.css

@@ -0,0 +1,4 @@
+@import "reactflow/dist/style.css";
+@import 'rc-menu/assets/index.css';
+@import "rc-dock/dist/rc-dock-dark.css";
+@import "./index.css";

package/src/generators/CustomEventOnTriggeredGenerator.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect } from 'react';
+import { useStore } from 'zustand';
+import { useSystem } from '@/system/provider';
+import type { SocketGeneratorRenderProps } from '@/store/socketGenerator';
+import type { Socket } from '@/types';
+import type { IBehaveNode } from '@/types/nodes.js';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph/Graphs/IO/NodeSpecJSON';
+
+const NAME = 'customEvent/onTriggered.socketGenerator';
+
+export function getCustomEventOnTriggeredGenerator() {
+  return {
+    name: NAME,
+    check: (spec: NodeSpecJSON) => spec?.type === 'customEvent/onTriggered',
+    render: CustomEventOnTriggeredGenerator
+  };
+}
+
+const CustomEventOnTriggeredGenerator: React.FC<SocketGeneratorRenderProps> = ({
+  node
+}) => {
+  const system = useSystem();
+  const customEvents = useStore(system.eventsStore, (s) => s.customEvents);
+
+  const customEventId = node.data.configuration?.customEventId;
+
+  useEffect(() => {
+    // Find the selected custom event
+    const event = customEvents[customEventId];
+
+    if (!event) {
+      // No event selected or event not found - clear parameter outputs
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n) => {
+          if (n.id !== node.id) return n;
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              dynamicPorts: {
+                ...n.data?.dynamicPorts,
+                outputs: []
+              }
+            }
+          };
+        })
+      );
+      return;
+    }
+
+    // Generate output sockets based on event parameters (not including flow)
+    const outputs: Socket[] = [];
+
+    // Add output for each parameter
+    if (event.parameters && Array.isArray(event.parameters)) {
+      event.parameters.forEach((param: any) => {
+        outputs.push({
+          name: param.name || 'param',
+          key: param.name || 'param',
+          valueType: param.valueTypeName || 'string'
+        });
+      });
+    }
+
+    // Update node ports
+    system.nodeStore.getState().setNodes((prev) =>
+      prev.map((n) => {
+        if (n.id !== node.id) return n;
+        return {
+          ...n,
+          data: {
+            ...n.data,
+            dynamicPorts: {
+              ...n.data?.dynamicPorts,
+              outputs
+            }
+          }
+        } as IBehaveNode;
+      })
+    );
+  }, [customEventId, customEvents, node.id, system.nodeStore]);
+
+  // This generator doesn't render any UI
+  return null;
+};

package/src/generators/SequenceGenerator.tsx

@@ -0,0 +1,104 @@
+import React, { useCallback } from 'react';
+import { VscodeButton } 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/sequence.socketGenerator';
+
+export function getSequenceGenerator() {
+  return {
+    name: NAME,
+    check: (spec: NodeSpecJSON) =>
+      (spec as { type?: string })?.type === 'flow/sequence',
+    render: SequenceGenerator
+  };
+}
+
+const SequenceGenerator: React.FC<SocketGeneratorRenderProps> = ({ node }) => {
+  const system = useSystem();
+
+  const numOutputs = node.data.configuration?.numOutputs ?? 0;
+
+  const updateNumOutputs = useCallback(
+    (newNumOutputs: number) => {
+      if (newNumOutputs < 1) return;
+
+      const outputs: { name: string; key: string; valueType: string }[] = [];
+      for (let i = 1; i <= newNumOutputs; i++) {
+        outputs.push({
+          name: `${i}`,
+          key: `${i}`,
+          valueType: 'flow'
+        });
+      }
+
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n) => {
+          if (n.id !== node.id) return n;
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              configuration: {
+                ...n.data.configuration,
+                numOutputs: newNumOutputs
+              },
+              dynamicPorts: {
+                ...n.data.dynamicPorts,
+                outputs
+              }
+            }
+          };
+        })
+      );
+    },
+    [node.id, system]
+  );
+
+  const addOutput = useCallback(() => {
+    updateNumOutputs(numOutputs + 1);
+  }, [numOutputs, updateNumOutputs]);
+
+  const removeOutput = useCallback(() => {
+    updateNumOutputs(Math.max(1, numOutputs - 1));
+  }, [numOutputs, updateNumOutputs]);
+
+  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 }}>Outputs: {numOutputs}</div>
+      </div>
+
+      <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
+        <VscodeButton onClick={addOutput} title="Add Output" iconOnly>
+          <Plus />
+        </VscodeButton>
+        <VscodeButton
+          onClick={removeOutput}
+          secondary
+          iconOnly
+          title="Remove Output"
+          disabled={numOutputs === 1}
+        >
+          <Minus />
+        </VscodeButton>
+      </div>
+    </div>
+  );
+};

package/src/generators/SwitchOnIntegerGenerator.tsx

@@ -0,0 +1,256 @@
+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/integer.socketGenerator';
+
+export function getSwitchOnIntegerGenerator() {
+  return {
+    name: NAME,
+    check: (spec: NodeSpecJSON) => spec?.type === 'flow/switch/integer',
+    render: SwitchOnIntegerGenerator
+  };
+}
+
+const SwitchOnIntegerGenerator: 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) => {
+          if (n.id !== node.id) return n;
+
+          // Preserve existing case values when changing numCases
+          const existingCases = n.data?.configuration?.cases ?? {};
+          const newCases: Record<string, bigint> = {};
+          for (let i = 1; i <= newNumCases; i++) {
+            const key = `${i}`;
+            newCases[key] = existingCases[key] ?? BigInt(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] || key,
+              key,
+              valueType: 'integer'
+            });
+          }
+
+          // Generate output sockets for each case
+          const outputs = [];
+          for (let i = 1; i <= newNumCases; i++) {
+            const label = n.data.configuration?.caseLabels?.[`${i}`] || `${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) => {
+      const intValue =
+        value === ''
+          ? BigInt(caseIndex)
+          : BigInt(parseInt(value, 10) || caseIndex);
+      system.nodeStore.getState().setNodes((prev) =>
+        prev.map((n: any) => {
+          if (n.id !== node.id) return n;
+
+          const updatedCases = {
+            ...n.data?.configuration?.cases,
+            [`${caseIndex}`]: intValue
+          };
+
+          const updatedLabels = {
+            ...n.data?.configuration?.caseLabels,
+            [`${caseIndex}`]: value || `${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] || key,
+              key,
+              valueType: 'integer'
+            });
+          }
+
+          // Regenerate output sockets with updated labels
+          const outputs = [];
+          for (let i = 1; i <= numCases; i++) {
+            const label = updatedLabels[`${i}`] || `${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
+              type="number"
+              value={
+                caseValues[`${selectedCase}`] !== undefined
+                  ? String(caseValues[`${selectedCase}`])
+                  : ''
+              }
+              onInput={(e: any) =>
+                updateCaseValue(selectedCase, e.target.value)
+              }
+              placeholder={`Integer value for case ${selectedCase}`}
+            />
+          </div>
+        </>
+      )}
+
+      <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
+        <VscodeButton onClick={addCase} title="Add Case" iconOnly>
+          <Plus />
+        </VscodeButton>
+        <VscodeButton
+          onClick={removeCase}
+          secondary
+          iconOnly
+          title="Remove Case"
+          disabled={numCases === 0}
+        >
+          <Minus />
+        </VscodeButton>
+      </div>
+    </div>
+  );
+};