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

package/src/hooks/useWasdPan.ts

@@ -0,0 +1,188 @@
+import { useCallback, useEffect, useRef } from 'react';
+import type { ReactFlowInstance } from 'reactflow';
+
+export type UseWasdPanOptions = {
+  getReactFlowInstance: () => ReactFlowInstance | undefined;
+  speed?: number;
+  speedWithShift?: number;
+  dtCapSeconds?: number;
+  enabled?: boolean;
+};
+
+const isEventFromEditable = (event: KeyboardEvent) => {
+  const target = event.target as HTMLElement | null;
+  const tag = target?.tagName?.toLowerCase();
+  //Just a patch to avoid pan when focus is in input/textarea or contenteditable element
+  return tag !== 'div';
+};
+
+export const useWasdPan = ({
+  getReactFlowInstance,
+  speed = 650,
+  speedWithShift = 1400,
+  dtCapSeconds = 0.05,
+  enabled = true
+}: UseWasdPanOptions) => {
+  const wasdRef = useRef({
+    w: false,
+    a: false,
+    s: false,
+    d: false,
+    shift: false
+  });
+  const rafRef = useRef<number | null>(null);
+  const lastFrameRef = useRef<number | null>(null);
+
+  const cancelPanLoop = useCallback(() => {
+    if (rafRef.current != null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    lastFrameRef.current = null;
+  }, []);
+
+  const startPanLoop = useCallback(() => {
+    if (rafRef.current != null) return;
+
+    const tick = (now: number) => {
+      const last = lastFrameRef.current;
+      lastFrameRef.current = now;
+      const dtMs = last == null ? 0 : now - last;
+      const dt = Math.min(dtCapSeconds, dtMs / 1000);
+
+      const state = wasdRef.current;
+      const any = state.w || state.a || state.s || state.d;
+      const reactFlowInstance = getReactFlowInstance();
+
+      if (!enabled || !any) {
+        cancelPanLoop();
+        return;
+      }
+
+      // The reactflow ref can be temporarily unavailable during re-mounts.
+      // If we cancel here while the user is still holding a key, we might never
+      // restart because we ignore keydown repeats.
+      if (!reactFlowInstance) {
+        rafRef.current = requestAnimationFrame(tick);
+        return;
+      }
+
+      const appliedSpeed = state.shift ? speedWithShift : speed;
+      const step = appliedSpeed * dt;
+
+      let dx = 0;
+      let dy = 0;
+      if (state.a) dx += step;
+      if (state.d) dx -= step;
+      if (state.w) dy += step;
+      if (state.s) dy -= step;
+
+      if (dx !== 0 || dy !== 0) {
+        const viewport = reactFlowInstance.getViewport();
+        reactFlowInstance.setViewport({
+          ...viewport,
+          x: viewport.x + dx,
+          y: viewport.y + dy
+        });
+      }
+
+      rafRef.current = requestAnimationFrame(tick);
+    };
+
+    rafRef.current = requestAnimationFrame(tick);
+  }, [
+    cancelPanLoop,
+    dtCapSeconds,
+    enabled,
+    getReactFlowInstance,
+    speed,
+    speedWithShift
+  ]);
+
+  useEffect(() => {
+    if (!enabled) {
+      wasdRef.current = {
+        w: false,
+        a: false,
+        s: false,
+        d: false,
+        shift: false
+      };
+      cancelPanLoop();
+      return;
+    }
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (isEventFromEditable(event)) return;
+      if (event.ctrlKey || event.metaKey || event.altKey) return;
+
+      const key = event.key?.toLowerCase();
+      if (
+        key !== 'w' &&
+        key !== 'a' &&
+        key !== 's' &&
+        key !== 'd' &&
+        key !== 'shift'
+      ) {
+        return;
+      }
+
+      if (key === 'shift') {
+        wasdRef.current.shift = true;
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (key === 'w') wasdRef.current.w = true;
+      if (key === 'a') wasdRef.current.a = true;
+      if (key === 's') wasdRef.current.s = true;
+      if (key === 'd') wasdRef.current.d = true;
+
+      startPanLoop();
+    };
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      const key = event.key?.toLowerCase();
+      if (key === 'shift') {
+        wasdRef.current.shift = false;
+        return;
+      }
+
+      if (key === 'w') wasdRef.current.w = false;
+      if (key === 'a') wasdRef.current.a = false;
+      if (key === 's') wasdRef.current.s = false;
+      if (key === 'd') wasdRef.current.d = false;
+
+      const state = wasdRef.current;
+      if (!(state.w || state.a || state.s || state.d)) {
+        cancelPanLoop();
+      }
+    };
+
+    const onBlur = () => {
+      wasdRef.current = {
+        w: false,
+        a: false,
+        s: false,
+        d: false,
+        shift: false
+      };
+      cancelPanLoop();
+    };
+
+    window.addEventListener('keydown', onKeyDown, { capture: true });
+    window.addEventListener('keyup', onKeyUp, { capture: true });
+    window.addEventListener('blur', onBlur);
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown, {
+        capture: true
+      });
+      window.removeEventListener('keyup', onKeyUp, { capture: true });
+      window.removeEventListener('blur', onBlur);
+      cancelPanLoop();
+    };
+  }, [cancelPanLoop, enabled, startPanLoop]);
+};

package/src/index.css

@@ -0,0 +1,146 @@
+@import "reactflow/dist/style.css";
+@import 'rc-menu/assets/index.css';
+@import "rc-dock/dist/rc-dock-dark.css";
+
+@import "./css/vscode.css";
+@import "./css/vars.css";
+@import "./css/rc-dock.css";
+@import "./css/rc-menu.css";
+@import "./css/prosemirror.css";
+
+*{
+    box-sizing: border-box;
+}
+
+.reactflow {
+    background: #262626;
+    color: var(--colors-fg);
+    position: static !important;
+}
+
+
+.react-flow__node {
+    display: flex;
+
+    &.filtered {
+        opacity: 0.25 !important;
+    }
+}
+
+.react-flow__edge-default {
+    fill: none;
+}
+
+.react-flow__handle>* {
+    /* Don't allow blocking of the handle */
+    user-select: none;
+    pointer-events: none;
+    flex: 1;
+}
+
+.react-flow__handle {
+    display: flex;
+    align-items: center;
+    font-size: 8px;
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+}
+
+.react-flow__handle-left {
+
+    left: -12px;
+}
+
+.react-flow__handle-right {
+
+    right: -12px;
+}
+
+.dock-content-holder {
+    color: var(--colors-fg);
+}
+
+.rc-menu-sub .rc-menu-item {
+    padding: 0.1em !important;
+}
+
+.rc-menu-item {
+    color: var(--colors-fg);
+    padding: 0 1em !important;
+}
+
+
+.rc-menu-horizontal {
+    padding: 0.2em;
+    display: flex;
+    gap: 0.4em;
+}
+
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 2rem;
+    position: relative;
+    padding: 0 0.5rem;
+}
+
+
+.dock-tab {
+    display: flex;
+    align-items: center;
+}
+
+.dock-top .dock-bar {
+    border-bottom: none;
+}
+
+.dock-panel.dock-style-main .dock-bar {
+    border-bottom-color: var(--color-neutral-stroke-subtle);
+}
+
+.dock-content-holder {
+    scrollbar-color: var(--color-neutral-canvas-subtle-bg) transparent;
+    scrollbar-width: thin;
+    border-bottom: var(--component-border-width-md) solid var(--color-neutral-stroke-subtle);
+}
+
+.dock-top .dock-ink-bar {
+    background: var(--colors-bgCanvas);
+    z-index: 0;
+    height: 100%;
+    border-radius: var(--component-radii-sm);
+}
+
+
+/* Dark scrollbars for all elements */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #4a4a4a #262626;
+}
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+    background: #262626;
+    border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+    background: #4a4a4a;
+    border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background: #5a5a5a;
+}
+
+*::-webkit-scrollbar-corner {
+    background: #262626;
+}

package/src/index.ts

@@ -1,27 +1,20 @@
-export * from './components/modals/ClearModal.js';
-export * from './components/modals/HelpModal.js';
-export * from './components/modals/LoadModal.js';
-export * from './components/modals/Modal.js';
-export * from './components/modals/SaveModal.js';
-export * from './components/Controls.js';
-
-export * from './components/AutoSizeInput.js';
-export * from './components/Controls.js';
-export * from './components/InputSocket.js';
-export * from './components/Node.js';
+import './index.css';
+
+export * from './components/sockets/input/index.js';
+export * from './components/nodes/behave/Node.js';
 export * from './components/Flow.js';
-export * from './components/NodeContainer.js';
-export * from './components/NodePicker.js';
-export * from './components/OutputSocket.js';
+export * from './components/FloatingToolbar/index.js';
+export * from './components/nodes/behave/NodeContainer.js';
+export * from './components/contextMenus/NodePicker.js';
+export * from './components/contextMenus/NodePicker.js';
+export * from './components/sockets/output/index.js';
+export * from './components/menubar/menuItem';
 
+//================== Reusable hooks =================//
 export * from './hooks/useChangeNodeData.js';
 export * from './hooks/useOnPressKey.js';
 export * from './hooks/useFlowHandlers.js';
-export * from './hooks/useGraphRunner.js';
 export * from './hooks/useBehaveGraphFlow.js';
-export * from './hooks/useNodeSpecJson.js';
-export * from './hooks/useCustomNodeTypes.js';
-export * from './hooks/useMergeMap.js';
 
 export * from './transformers/behaveToFlow.js';
 export * from './transformers/flowToBehave.js';
@@ -35,3 +28,28 @@ export * from './util/hasPositionMetaData.js';
 export * from './util/isHandleConnected.js';
 export * from './util/isValidConnection.js';
 export * from './util/sleep.js';
+export * from './util/serializeVariables.js';
+export * from './util/downloadJson';
+
+// New metadata types and utilities (v2.0)
+export * from './types/NodeMetadata.js';
+export * from './util/extractNodeMetadata.js';
+
+export * from './system/index.js';
+export * from './components/layoutController/index.js';
+
+export * from './store/controls';
+export * from './store/specific';
+export * from './store/socketGenerator';
+export * from './store/documentation';
+export * from './store/toolbar';
+
+export * from './annotations/index';
+
+export * from './types/graph';
+
+//================== Plugins =================//
+export * from './system/plugin';
+export * from './plugin/docs/index.js';
+export * from './plugin/graphrunner/index.js';
+export * from './plugin/graphrunner-local/index.js';

package/src/layout/dagre.tsx

@@ -0,0 +1,119 @@
+import { Position } from 'reactflow';
+import type { Edge, Node } from 'reactflow';
+import dagre from 'dagre';
+import type { System } from '@/system';
+import { pinned } from '@/annotations';
+
+// the layout direction (T = top, R = right, B = bottom, L = left, TB = top to bottom, ...)
+export type Direction = 'TB' | 'LR' | 'RL' | 'BT';
+
+export type Options = {
+  direction: Direction;
+};
+
+const getDimensions = (node: Node) => {
+  return {
+    width: node.style?.width ?? node.width ?? 300,
+    height: node.style?.height ?? node.height ?? 200
+  };
+};
+
+const dagreGraph = new dagre.graphlib!.Graph();
+dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+const positionMap: Record<string, Position> = {
+  T: Position.Top,
+  L: Position.Left,
+  R: Position.Right,
+  B: Position.Bottom
+};
+
+export function applyDagreLayout(
+  system: System,
+  options: Options | undefined = { direction: 'LR' }
+) {
+  const { direction } = options;
+  const { nodes, setNodes } = system.nodeStore.getState();
+  const { edges } = system.edgeStore.getState();
+
+  if (!nodes.length) {
+    return;
+  }
+
+  dagreGraph.setGraph({ rankdir: direction });
+
+  // Add nodes to layout: exclude pinned nodes and child nodes inside groups
+  // Include both regular nodes and group nodes
+  const layoutNodes = nodes.filter((node) => {
+    if ('data' in node) {
+      const isPinned = node.data.annotations?.[pinned];
+      const isInGroup = !!node.parentId;
+      return !isPinned && !isInGroup;
+    }
+    return false;
+  });
+
+  layoutNodes.forEach((node: Node) => {
+    dagreGraph.setNode(node.id, getDimensions(node));
+  });
+
+  // Create a map for quick parent lookup
+  const nodeParentMap = new Map<string, string>();
+  nodes.forEach((node) => {
+    if (node.parentId) {
+      nodeParentMap.set(node.id, node.parentId);
+    }
+  });
+
+  // Function to get the top-level node or group for layout
+  const getLayoutNode = (nodeId: string): string => {
+    const parentId = nodeParentMap.get(nodeId);
+    return parentId ?? nodeId;
+  };
+
+  // Track unique edges at the layout level to avoid duplicates
+  const layoutEdges = new Set<string>();
+
+  edges.forEach((edge: Edge) => {
+    const layoutSource = getLayoutNode(edge.source);
+    const layoutTarget = getLayoutNode(edge.target);
+
+    // Skip self-loops (edges within the same group)
+    if (layoutSource === layoutTarget) {
+      return;
+    }
+
+    const edgeKey = `${layoutSource}->${layoutTarget}`;
+    if (!layoutEdges.has(edgeKey)) {
+      layoutEdges.add(edgeKey);
+      dagreGraph.setEdge(layoutSource, layoutTarget);
+    }
+  });
+
+  dagre.layout(dagreGraph);
+
+  setNodes((nodes) => {
+    const layoutedNodes = nodes.map((node) => {
+      // Skip pinned nodes - keep their current position
+      const isPinned = 'data' in node && node.data.annotations?.[pinned];
+      if (isPinned) {
+        return node;
+      }
+
+      // Skip nodes inside groups - they maintain relative positions
+      if (node.parentId) {
+        return node;
+      }
+
+      const { x, y } = dagreGraph.node(node.id);
+
+      return {
+        ...node,
+        sourcePosition: positionMap[direction[1]!],
+        targetPosition: positionMap[direction[0]!],
+        position: { x, y }
+      };
+    });
+    return layoutedNodes;
+  });
+}