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

package/vitest.visual.config.ts

@@ -0,0 +1,55 @@
+import path from 'node:path';
+import { playwright } from '@vitest/browser-playwright';
+import { defineConfig } from 'vitest/config';
+
+/**
+ * Dedicated config for visual (pixel) regression tests.
+ *
+ * These run in a real browser via Vitest browser mode + Playwright and use the
+ * built-in `toMatchScreenshot` assertion to detect rendering regressions.
+ *
+ * Run with `pnpm test:visual` (and `pnpm test:visual:update` to refresh
+ * baselines). It is intentionally separate from the default happy-dom unit-test
+ * config so the heavy browser runner is only spun up when explicitly requested.
+ *
+ * Screenshots are platform-sensitive (fonts/anti-aliasing differ across OSes),
+ * so Vitest stores baselines under per-platform folders. Generate/refresh
+ * baselines on the same platform/CI image that will verify them.
+ */
+export default defineConfig({
+  test: {
+    include: ['tests/visual/**/*.visual.test.{ts,tsx}'],
+    watch: false,
+    browser: {
+      enabled: true,
+      provider: playwright(),
+      headless: true,
+      instances: [{ browser: 'chromium' }],
+      // Deterministic viewport, large enough to contain a panel frame without
+      // introducing page scrollbars that would shift layout.
+      viewport: { width: 900, height: 700 },
+      expect: {
+        toMatchScreenshot: {
+          // Allow a tiny amount of anti-aliasing noise without failing.
+          comparatorName: 'pixelmatch',
+          comparatorOptions: {
+            allowedMismatchedPixelRatio: 0.02
+          }
+        }
+      }
+    }
+  },
+  resolve: {
+    // The browser runner renders through vitest-browser-react, which can pull
+    // its own React/React-DOM copy (a different patch than the app's pinned
+    // 19.2.3). Two React instances means the renderer sets the hook dispatcher
+    // on one copy while the panels call hooks on the other, producing "Invalid
+    // hook call / more than one copy of React" and a null dispatcher. Force a
+    // single instance so the renderer and the components share it.
+    dedupe: ['react', 'react-dom'],
+    alias: {
+      '~': path.resolve(__dirname, './src'),
+      '@': path.resolve(__dirname, './src')
+    }
+  }
+});

package/src/components/AutoSizeInput.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import {
-  type CSSProperties,
-  type HTMLProps,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-
-export type AutoSizeInputProps = HTMLProps<HTMLInputElement> & {
-  minWidth?: number;
-};
-
-const baseStyles: CSSProperties = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  visibility: 'hidden',
-  height: 0,
-  width: 'auto',
-  whiteSpace: 'pre'
-};
-
-export const AutoSizeInput: React.FC<AutoSizeInputProps> = ({
-  minWidth = 30,
-  ...props
-}) => {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const measureRef = useRef<HTMLSpanElement | null>(null);
-  const [styles, setStyles] = useState<CSSProperties>({});
-
-  // grab the font size of the input on ref mount
-  const setRef = useCallback((input: HTMLInputElement | null) => {
-    if (input) {
-      const styles = window.getComputedStyle(input);
-      setStyles({
-        fontSize: styles.getPropertyValue('font-size'),
-        paddingLeft: styles.getPropertyValue('padding-left'),
-        paddingRight: styles.getPropertyValue('padding-right')
-      });
-    }
-    inputRef.current = input;
-  }, []);
-
-  // measure the text on change and update input
-  useEffect(() => {
-    if (measureRef.current === null) return;
-    if (inputRef.current === null) return;
-
-    const padding = props.type === 'number' || props.type === 'float' ? 20 : 0;
-
-    const width = measureRef.current.clientWidth + padding;
-    inputRef.current.style.width = Math.max(minWidth, width) + 'px';
-  }, [props.value, minWidth, styles, props.type]);
-
-  return (
-    <>
-      <input ref={setRef} {...props} />
-      <span ref={measureRef} style={{ ...baseStyles, ...styles }}>
-        {props.value}
-      </span>
-    </>
-  );
-};

package/src/components/Controls.tsx

@@ -1,87 +0,0 @@
-import type { GraphJSON, NodeSpecJSON } from '@kiberon-labs/behave-graph';
-import {
-  faDownload,
-  faPause,
-  faPlay,
-  faQuestion,
-  faTrash,
-  faUpload
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useState } from 'react';
-import React from 'react';
-import { ControlButton, Controls } from 'reactflow';
-
-import { ClearModal } from './modals/ClearModal.js';
-import { HelpModal } from './modals/HelpModal.js';
-import { type Examples, LoadModal } from './modals/LoadModal.js';
-import { SaveModal } from './modals/SaveModal.js';
-
-export type CustomControlsProps = {
-  playing: boolean;
-  togglePlay: () => void;
-  setBehaviorGraph: (value: GraphJSON) => void;
-  examples: Examples;
-  specJson: NodeSpecJSON[] | undefined;
-};
-
-export const CustomControls: React.FC<CustomControlsProps> = ({
-  playing,
-  togglePlay,
-  setBehaviorGraph,
-  examples,
-  specJson
-}: {
-  playing: boolean;
-  togglePlay: () => void;
-  setBehaviorGraph: (value: GraphJSON) => void;
-  examples: Examples;
-  specJson: NodeSpecJSON[] | undefined;
-}) => {
-  const [loadModalOpen, setLoadModalOpen] = useState(false);
-  const [saveModalOpen, setSaveModalOpen] = useState(false);
-  const [helpModalOpen, setHelpModalOpen] = useState(false);
-  const [clearModalOpen, setClearModalOpen] = useState(false);
-
-  return (
-    <>
-      <Controls>
-        <ControlButton title="Help" onClick={() => setHelpModalOpen(true)}>
-          <FontAwesomeIcon icon={faQuestion} />
-        </ControlButton>
-        <ControlButton title="Load" onClick={() => setLoadModalOpen(true)}>
-          <FontAwesomeIcon icon={faUpload} />
-        </ControlButton>
-        <ControlButton title="Save" onClick={() => setSaveModalOpen(true)}>
-          <FontAwesomeIcon icon={faDownload} />
-        </ControlButton>
-        <ControlButton title="Clear" onClick={() => setClearModalOpen(true)}>
-          <FontAwesomeIcon icon={faTrash} />
-        </ControlButton>
-        <ControlButton title="Run" onClick={togglePlay}>
-          <FontAwesomeIcon icon={playing ? faPause : faPlay} />
-        </ControlButton>
-      </Controls>
-      <LoadModal
-        open={loadModalOpen}
-        onClose={() => setLoadModalOpen(false)}
-        setBehaviorGraph={setBehaviorGraph}
-        examples={examples}
-      />
-      {specJson && (
-        <SaveModal
-          open={saveModalOpen}
-          specJson={specJson}
-          onClose={() => setSaveModalOpen(false)}
-        />
-      )}
-      <HelpModal open={helpModalOpen} onClose={() => setHelpModalOpen(false)} />
-      <ClearModal
-        open={clearModalOpen}
-        onClose={() => setClearModalOpen(false)}
-      />
-    </>
-  );
-};
-
-export default CustomControls;

package/src/components/InputSocket.tsx

@@ -1,142 +0,0 @@
-import type {
-  InputSocketSpecJSON,
-  NodeSpecJSON
-} from '@kiberon-labs/behave-graph';
-import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cx from 'classnames';
-import React from 'react';
-import { type Connection, Handle, Position, useReactFlow } from 'reactflow';
-
-import { colors, valueTypeColorMap } from '../util/colors.js';
-import { isValidConnection } from '../util/isValidConnection.js';
-import { AutoSizeInput } from './AutoSizeInput.js';
-
-export type InputSocketProps = {
-  connected: boolean;
-  value: any | undefined;
-  onChange: (key: string, value: any) => void;
-  specJSON: NodeSpecJSON[];
-} & InputSocketSpecJSON;
-
-const InputFieldForValue = ({
-  choices,
-  value,
-  defaultValue,
-  onChange,
-  name,
-  valueType
-}: Pick<
-  InputSocketProps,
-  'choices' | 'value' | 'defaultValue' | 'name' | 'onChange' | 'valueType'
->) => {
-  const showChoices = choices?.length;
-  //Stops 'undefined'
-  const defaultSafeValue =
-    defaultValue !== undefined ? String(defaultValue) : '';
-  const inputVal = value !== undefined ? String(value) : defaultSafeValue;
-
-  if (showChoices)
-    return (
-      <select
-        className="bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
-        value={value ?? defaultValue ?? ''}
-        onChange={(e) => onChange(name, e.currentTarget.value)}
-      >
-        <>
-          {choices.map((choice) => (
-            <option key={choice.text} value={choice.value}>
-              {choice.text}
-            </option>
-          ))}
-        </>
-      </select>
-    );
-
-  return (
-    <>
-      {valueType === 'string' && (
-        <AutoSizeInput
-          type="text"
-          className="bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
-          value={inputVal}
-          onChange={(e) => onChange(name, e.currentTarget.value)}
-        />
-      )}
-      {valueType === 'number' && (
-        <AutoSizeInput
-          type="number"
-          className=" bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
-          value={inputVal}
-          onChange={(e) => onChange(name, e.currentTarget.value)}
-        />
-      )}
-      {valueType === 'float' && (
-        <AutoSizeInput
-          type="number"
-          className=" bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
-          value={inputVal}
-          onChange={(e) => onChange(name, e.currentTarget.value)}
-        />
-      )}
-      {valueType === 'integer' && (
-        <AutoSizeInput
-          type="number"
-          className=" bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
-          value={inputVal}
-          onChange={(e) => onChange(name, e.currentTarget.value)}
-        />
-      )}
-      {valueType === 'boolean' && (
-        <input
-          type="checkbox"
-          className=" bg-gray-600 disabled:bg-gray-700 py-1 px-2 nodrag"
-          value={inputVal}
-          onChange={(e) => onChange(name, e.currentTarget.checked)}
-        />
-      )}
-    </>
-  );
-};
-
-const InputSocket: React.FC<InputSocketProps> = ({
-  connected,
-  specJSON,
-  ...rest
-}) => {
-  const { name, valueType } = rest;
-  const instance = useReactFlow();
-
-  const isFlowSocket = valueType === 'flow';
-
-  let colorName = valueTypeColorMap[valueType];
-  if (colorName === undefined) {
-    colorName = 'red';
-  }
-
-  // @ts-ignore
-  const [backgroundColor, borderColor] = colors[colorName];
-  const showName = isFlowSocket === false || name !== 'flow';
-
-  return (
-    <div className="flex grow items-center justify-start h-7">
-      {isFlowSocket && (
-        <FontAwesomeIcon icon={faCaretRight} color="#ffffff" size="lg" />
-      )}
-      {showName && <div className="capitalize mr-2">{name}</div>}
-
-      {!isFlowSocket && !connected && <InputFieldForValue {...rest} />}
-      <Handle
-        id={name}
-        type="target"
-        position={Position.Left}
-        className={cx(borderColor, connected ? backgroundColor : 'bg-gray-800')}
-        isValidConnection={(connection: Connection) =>
-          isValidConnection(connection, instance, specJSON)
-        }
-      />
-    </div>
-  );
-};
-
-export default InputSocket;

package/src/components/Node.tsx

@@ -1,68 +0,0 @@
-import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
-import React from 'react';
-import { useEdges, type NodeProps as FlowNodeProps } from 'reactflow';
-
-import { useChangeNodeData } from '../hooks/useChangeNodeData.js';
-import { isHandleConnected } from '../util/isHandleConnected.js';
-import InputSocket from './InputSocket.js';
-import NodeContainer from './NodeContainer.js';
-import OutputSocket from './OutputSocket.js';
-
-type NodeProps = FlowNodeProps & {
-  spec: NodeSpecJSON;
-  allSpecs: NodeSpecJSON[];
-};
-
-const getPairs = <T, U>(arr1: T[], arr2: U[]) => {
-  const max = Math.max(arr1.length, arr2.length);
-  const pairs = [];
-  for (let i = 0; i < max; i++) {
-    const pair: [T | undefined, U | undefined] = [arr1[i], arr2[i]];
-    pairs.push(pair);
-  }
-  return pairs;
-};
-
-export const Node: React.FC<NodeProps> = ({
-  id,
-  data,
-  spec,
-  selected,
-  allSpecs
-}: NodeProps) => {
-  const edges = useEdges();
-  const handleChange = useChangeNodeData(id);
-  const pairs = getPairs(spec.inputs, spec.outputs);
-  return (
-    <NodeContainer
-      title={spec.label}
-      category={spec.category}
-      selected={selected}
-    >
-      {pairs.map(([input, output], ix) => (
-        <div
-          key={ix}
-          className="flex flex-row justify-between gap-8 relative px-2"
-          // className={styles.container}
-        >
-          {input && (
-            <InputSocket
-              {...input}
-              specJSON={allSpecs}
-              value={data[input.name] ?? input.defaultValue}
-              onChange={handleChange}
-              connected={isHandleConnected(edges, id, input.name, 'target')}
-            />
-          )}
-          {output && (
-            <OutputSocket
-              {...output}
-              specJSON={allSpecs}
-              connected={isHandleConnected(edges, id, output.name, 'source')}
-            />
-          )}
-        </div>
-      ))}
-    </NodeContainer>
-  );
-};

package/src/components/NodeContainer.tsx

@@ -1,46 +0,0 @@
-import { NodeCategory, type NodeSpecJSON } from '@kiberon-labs/behave-graph';
-import cx from 'classnames';
-import React, { type PropsWithChildren } from 'react';
-
-import { categoryColorMap, colors } from '../util/colors.js';
-
-type NodeProps = {
-  title: string;
-  category?: NodeSpecJSON['category'];
-  selected: boolean;
-};
-
-const NodeContainer: React.FC<PropsWithChildren<NodeProps>> = ({
-  title,
-  category = NodeCategory.None,
-  selected,
-  children
-}) => {
-  let colorName = categoryColorMap[category];
-  if (colorName === undefined) {
-    colorName = 'red';
-  }
-  let [backgroundColor, borderColor, textColor] = colors[colorName];
-  if (selected) {
-    borderColor = 'border-gray-800';
-  }
-  return (
-    <div
-      className={cx(
-        'rounded text-white text-sm bg-gray-800 min-w-[120px]',
-        selected && 'outline outline-1'
-      )}
-    >
-      <div className={`${backgroundColor} ${textColor} px-2 py-1 rounded-t`}>
-        {title}
-      </div>
-      <div
-        className={`flex flex-col gap-2 py-2 border-l border-r border-b ${borderColor} `}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export default NodeContainer;

package/src/components/NodePicker.tsx

@@ -1,77 +0,0 @@
-import { type NodeSpecJSON } from '@kiberon-labs/behave-graph';
-import React, { useState } from 'react';
-import { useReactFlow, type XYPosition } from 'reactflow';
-
-import { useOnPressKey } from '../hooks/useOnPressKey.js';
-
-export type NodePickerFilters = {
-  handleType: 'source' | 'target';
-  valueType: string;
-};
-
-type NodePickerProps = {
-  position: XYPosition;
-  filters?: NodePickerFilters;
-  onPickNode: (type: string, position: XYPosition) => void;
-  onClose: () => void;
-  specJSON: NodeSpecJSON[] | undefined;
-};
-
-export const NodePicker: React.FC<NodePickerProps> = ({
-  position,
-  onPickNode,
-  onClose,
-  filters,
-  specJSON
-}: NodePickerProps) => {
-  const [search, setSearch] = useState('');
-  const instance = useReactFlow();
-
-  useOnPressKey('Escape', onClose);
-
-  if (!specJSON) return null;
-  let filtered = specJSON;
-  if (filters !== undefined) {
-    filtered = filtered?.filter((node) => {
-      const sockets =
-        filters?.handleType === 'source' ? node.outputs : node.inputs;
-      return sockets.some((socket) => socket.valueType === filters?.valueType);
-    });
-  }
-
-  filtered =
-    filtered?.filter((node) => {
-      const term = search.toLowerCase();
-      return node.type.toLowerCase().includes(term);
-    }) || [];
-
-  return (
-    <div
-      className="node-picker absolute z-10 text-sm text-white bg-gray-800 border rounded border-gray-500"
-      style={{ top: position.y, left: position.x }}
-    >
-      <div className="bg-gray-500 p-2">Add Node</div>
-      <div className="p-2">
-        <input
-          type="text"
-          autoFocus
-          placeholder="Type to filter"
-          className=" bg-gray-600 disabled:bg-gray-700 w-full py-1 px-2"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
-      </div>
-      <div className="max-h-48 overflow-y-scroll">
-        {filtered.map(({ type }) => (
-          <div
-            key={type}
-            className="p-2 cursor-pointer border-b border-gray-600"
-            onClick={() => onPickNode(type, instance.project(position))}
-          >
-            {type}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/components/OutputSocket.tsx

@@ -1,58 +0,0 @@
-import type {
-  NodeSpecJSON,
-  OutputSocketSpecJSON
-} from '@kiberon-labs/behave-graph';
-import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import cx from 'classnames';
-import React from 'react';
-import { type Connection, Handle, Position, useReactFlow } from 'reactflow';
-
-import { colors, valueTypeColorMap } from '../util/colors.js';
-import { isValidConnection } from '../util/isValidConnection.js';
-
-export type OutputSocketProps = {
-  connected: boolean;
-  specJSON: NodeSpecJSON[];
-} & OutputSocketSpecJSON;
-
-export default function OutputSocket({
-  specJSON,
-  connected,
-  valueType,
-  name
-}: OutputSocketProps) {
-  const instance = useReactFlow();
-  const isFlowSocket = valueType === 'flow';
-  let colorName = valueTypeColorMap[valueType];
-  if (colorName === undefined) {
-    colorName = 'red';
-  }
-  // @ts-ignore
-  const [backgroundColor, borderColor] = colors[colorName];
-  const showName = isFlowSocket === false || name !== 'flow';
-
-  return (
-    <div className="flex grow items-center justify-end h-7">
-      {showName && <div className="capitalize">{name}</div>}
-      {isFlowSocket && (
-        <FontAwesomeIcon
-          icon={faCaretRight}
-          color="#ffffff"
-          size="lg"
-          className="ml-1"
-        />
-      )}
-
-      <Handle
-        id={name}
-        type="source"
-        position={Position.Right}
-        className={cx(borderColor, connected ? backgroundColor : 'bg-gray-800')}
-        isValidConnection={(connection: Connection) =>
-          isValidConnection(connection, instance, specJSON)
-        }
-      />
-    </div>
-  );
-}

package/src/components/modals/ClearModal.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { useReactFlow } from 'reactflow';
-
-import { Modal } from './Modal.js';
-
-export type ClearModalProps = {
-  open?: boolean;
-  onClose: () => void;
-};
-
-export const ClearModal: React.FC<ClearModalProps> = ({
-  open = false,
-  onClose
-}) => {
-  const instance = useReactFlow();
-
-  const handleClear = () => {
-    instance.setNodes([]);
-    instance.setEdges([]);
-    // TODO better way to call fit vew after edges render
-    setTimeout(() => {
-      instance.fitView();
-    }, 100);
-    onClose();
-  };
-
-  return (
-    <Modal
-      title="Clear Graph"
-      actions={[
-        { label: 'Cancel', onClick: onClose },
-        { label: 'Clear', onClick: handleClear }
-      ]}
-      open={open}
-      onClose={onClose}
-    >
-      <p>Are you sure?</p>
-    </Modal>
-  );
-};

package/src/components/modals/HelpModal.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import { Modal } from './Modal.js';
-
-export type HelpModalProps = {
-  open?: boolean;
-  onClose: () => void;
-};
-
-export const HelpModal: React.FC<HelpModalProps> = ({
-  open = false,
-  onClose
-}) => {
-  return (
-    <Modal
-      title="Help"
-      actions={[{ label: 'Close', onClick: onClose }]}
-      open={open}
-      onClose={onClose}
-    >
-      <p className="mb-2">Right click anywhere to add a new node.</p>
-      <p className="mb-2">
-        Drag a connection into empty space to add a new node and connect it to
-        the source.
-      </p>
-      <p className="mb-2">
-        Click and drag on a socket to connect to another socket of the same
-        type.
-      </p>
-      <p>
-        Left click to select nodes or connections, backspace to delete selected
-        nodes or connections.
-      </p>
-    </Modal>
-  );
-};