@kiberon-labs/behave-graph-flow 1.0.0

package/src/components/OutputSocket.tsx

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,36 @@
+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>
+  );
+};

package/src/components/modals/LoadModal.tsx

@@ -0,0 +1,96 @@
+import type { GraphJSON } from '@kiberon-labs/behave-graph';
+import React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useReactFlow } from 'reactflow';
+
+import { Modal } from './Modal.js';
+
+export type Examples = {
+  [key: string]: GraphJSON;
+};
+
+export type LoadModalProps = {
+  open?: boolean;
+  onClose: () => void;
+  setBehaviorGraph: (value: GraphJSON) => void;
+  examples: Examples;
+};
+
+export const LoadModal: React.FC<LoadModalProps> = ({
+  open = false,
+  onClose,
+  setBehaviorGraph,
+  examples
+}) => {
+  const [value, setValue] = useState<string>();
+  const [selected, setSelected] = useState('');
+
+  const instance = useReactFlow();
+
+  useEffect(() => {
+    if (selected) {
+      setValue(JSON.stringify(examples[selected], null, 2));
+    }
+  }, [selected, examples]);
+
+  const handleLoad = useCallback(() => {
+    let graph;
+    if (value !== undefined) {
+      graph = JSON.parse(value) as GraphJSON;
+    } else if (selected !== '') {
+      graph = examples[selected];
+    }
+
+    if (graph === undefined) return;
+
+    setBehaviorGraph(graph);
+
+    // TODO better way to call fit vew after edges render
+    setTimeout(() => {
+      instance.fitView();
+    }, 100);
+
+    handleClose();
+  }, [setBehaviorGraph, value, instance]);
+
+  const handleClose = () => {
+    setValue(undefined);
+    setSelected('');
+    onClose();
+  };
+
+  return (
+    <Modal
+      title="Load Graph"
+      actions={[
+        { label: 'Cancel', onClick: handleClose },
+        { label: 'Load', onClick: handleLoad }
+      ]}
+      open={open}
+      onClose={onClose}
+    >
+      <textarea
+        autoFocus
+        className="border border-gray-300 w-full p-2 h-32 align-top"
+        placeholder="Paste JSON here"
+        value={value}
+        onChange={(e) => setValue(e.currentTarget.value)}
+      ></textarea>
+      <div className="p-4 text-center text-gray-800">or</div>
+      <select
+        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded block w-full p-3"
+        onChange={(e) => setSelected(e.target.value)}
+        value={selected}
+      >
+        <option disabled value="">
+          Select an example
+        </option>
+        {Object.keys(examples).map((key) => (
+          <option key={key} value={key}>
+            {key}
+          </option>
+        ))}
+      </select>
+    </Modal>
+  );
+};

package/src/components/modals/Modal.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+
+import { useOnPressKey } from '../../hooks/useOnPressKey.js';
+
+export type ModalAction = {
+  label: string;
+  onClick: () => void;
+};
+
+export type ModalProps = {
+  open?: boolean;
+  onClose: () => void;
+  title: string;
+  actions: ModalAction[];
+};
+
+export const Modal: React.FC<PropsWithChildren<ModalProps>> = ({
+  open = false,
+  onClose,
+  title,
+  children,
+  actions
+}) => {
+  useOnPressKey('Escape', onClose);
+
+  if (open === false) return null;
+
+  const actionColors = {
+    primary: 'bg-teal-400 hover:bg-teal-500',
+    secondary: 'bg-gray-400 hover:bg-gray-500'
+  };
+
+  return (
+    <>
+      <div
+        className="z-[19] fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
+        onClick={onClose}
+      ></div>
+      <div className="z-20 relative top-20 mx-auto border w-96 shadow-lg bg-white text-sm rounded-md">
+        <div className="p-3 border-b">
+          <h2 className="text-lg text-center font-bold">{title}</h2>
+        </div>
+        <div className="p-3">{children}</div>
+        <div className="flex gap-3 p-3 border-t">
+          {actions.map((action, ix) => (
+            <button
+              key={ix}
+              className={
+                'text-white p-2 w-full cursor-pointer ' +
+                (ix === actions.length - 1
+                  ? actionColors.primary
+                  : actionColors.secondary)
+              }
+              onClick={action.onClick}
+            >
+              {action.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};

package/src/components/modals/SaveModal.tsx

@@ -0,0 +1,60 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import React from 'react';
+import { useMemo, useRef, useState } from 'react';
+import { useEdges, useNodes } from 'reactflow';
+
+import { flowToBehave } from '../../transformers/flowToBehave.js';
+import { Modal } from './Modal.js';
+
+export type SaveModalProps = {
+  open?: boolean;
+  onClose: () => void;
+  specJson: NodeSpecJSON[];
+};
+
+export const SaveModal: React.FC<SaveModalProps> = ({
+  open = false,
+  onClose,
+  specJson
+}) => {
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const [copied, setCopied] = useState(false);
+
+  const edges = useEdges();
+  const nodes = useNodes();
+
+  const flow = useMemo(
+    () => flowToBehave(nodes, edges, specJson),
+    [nodes, edges, specJson]
+  );
+
+  const jsonString = JSON.stringify(flow, null, 2);
+
+  const handleCopy = () => {
+    ref.current?.select();
+    document.execCommand('copy');
+    ref.current?.blur();
+    setCopied(true);
+    setInterval(() => {
+      setCopied(false);
+    }, 1000);
+  };
+
+  return (
+    <Modal
+      title="Save Graph"
+      actions={[
+        { label: 'Cancel', onClick: onClose },
+        { label: copied ? 'Copied' : 'Copy', onClick: handleCopy }
+      ]}
+      open={open}
+      onClose={onClose}
+    >
+      <textarea
+        ref={ref}
+        className="border border-gray-300 w-full p-2 h-32"
+        defaultValue={jsonString}
+      ></textarea>
+    </Modal>
+  );
+};

package/src/hooks/useBehaveGraphFlow.ts

@@ -0,0 +1,75 @@
+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;
+
+/**
+ * Hook that returns the nodes and edges for react-flow, and the graphJson for the behave-graph.
+ * If nodes or edges are changes, the graph json is updated automatically.
+ * The graph json can be set manually, in which case the nodes and edges are updated to match the graph json.
+ * @param param0
+ * @returns
+ */
+export const useBehaveGraphFlow = ({
+  initialGraphJson,
+  specJson
+}: {
+  initialGraphJson: GraphJSON;
+  specJson: NodeSpecJSON[] | undefined;
+}) => {
+  const [graphJson, setStoredGraphJson] = useState<GraphJSON | undefined>();
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const setGraphJson = useCallback(
+    (graphJson: GraphJSON) => {
+      if (!graphJson) return;
+
+      const [nodes, edges] = behaveToFlow(graphJson);
+
+      if (hasPositionMetaData(graphJson) === false) {
+        autoLayout(nodes, edges);
+      }
+
+      setNodes(nodes);
+      setEdges(edges);
+      setStoredGraphJson(graphJson);
+    },
+    [setEdges, setNodes]
+  );
+
+  useEffect(() => {
+    if (!initialGraphJson) return;
+    setGraphJson(initialGraphJson);
+  }, [initialGraphJson, setGraphJson]);
+
+  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);
+    setStoredGraphJson(graphJson);
+  }, [nodes, edges, specJson]);
+
+  const nodeTypes = useCustomNodeTypes({
+    specJson
+  });
+
+  return {
+    nodes,
+    edges,
+    onEdgesChange,
+    onNodesChange,
+    setGraphJson,
+    graphJson,
+    nodeTypes
+  };
+};

package/src/hooks/useChangeNodeData.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+import { useReactFlow } from 'reactflow';
+
+export const useChangeNodeData = (id: string) => {
+  const instance = useReactFlow();
+
+  return useCallback(
+    (key: string, value: any) => {
+      instance.setNodes((nodes) =>
+        nodes.map((n) => {
+          if (n.id !== id) return n;
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              [key]: value
+            }
+          };
+        })
+      );
+    },
+    [instance, id]
+  );
+};

package/src/hooks/useCustomNodeTypes.tsx

@@ -0,0 +1,31 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import React from 'react';
+import { useEffect, useState } from 'react';
+import type { NodeTypes } from 'reactflow';
+
+import { Node } from '../components/Node.js';
+
+const getCustomNodeTypes = (allSpecs: NodeSpecJSON[]) => {
+  return allSpecs.reduce((nodes: NodeTypes, node) => {
+    nodes[node.type] = (props) => (
+      <Node spec={node} allSpecs={allSpecs} {...props} />
+    );
+    return nodes;
+  }, {});
+};
+
+export const useCustomNodeTypes = ({
+  specJson
+}: {
+  specJson: NodeSpecJSON[] | undefined;
+}) => {
+  const [customNodeTypes, setCustomNodeTypes] = useState<NodeTypes>();
+  useEffect(() => {
+    if (!specJson) return;
+    const customNodeTypes = getCustomNodeTypes(specJson);
+
+    setCustomNodeTypes(customNodeTypes);
+  }, [specJson]);
+
+  return customNodeTypes;
+};

package/src/hooks/useFlowHandlers.ts

@@ -0,0 +1,180 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import {
+  type MouseEvent as ReactMouseEvent,
+  useCallback,
+  useEffect,
+  useState
+} from 'react';
+import type {
+  Connection,
+  Node,
+  OnConnectStartParams,
+  XYPosition
+} from 'reactflow';
+import { v4 as uuidv4 } from 'uuid';
+
+import { calculateNewEdge } from '../util/calculateNewEdge.js';
+import { getNodePickerFilters } from '../util/getPickerFilters.js';
+import { useBehaveGraphFlow } from './useBehaveGraphFlow.js';
+
+type BehaveGraphFlow = ReturnType<typeof useBehaveGraphFlow>;
+
+const useNodePickFilters = ({
+  nodes,
+  lastConnectStart,
+  specJSON
+}: {
+  nodes: Node[];
+  lastConnectStart: OnConnectStartParams | undefined;
+  specJSON: NodeSpecJSON[] | undefined;
+}) => {
+  const [nodePickFilters, setNodePickFilters] = useState(
+    getNodePickerFilters(nodes, lastConnectStart, specJSON)
+  );
+
+  useEffect(() => {
+    setNodePickFilters(getNodePickerFilters(nodes, lastConnectStart, specJSON));
+  }, [nodes, lastConnectStart, specJSON]);
+
+  return nodePickFilters;
+};
+
+export const useFlowHandlers = ({
+  onEdgesChange,
+  onNodesChange,
+  nodes,
+  specJSON
+}: Pick<BehaveGraphFlow, 'onEdgesChange' | 'onNodesChange'> & {
+  nodes: Node[];
+  specJSON: NodeSpecJSON[] | undefined;
+}) => {
+  const [lastConnectStart, setLastConnectStart] =
+    useState<OnConnectStartParams>();
+  const [nodePickerVisibility, setNodePickerVisibility] =
+    useState<XYPosition>();
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      if (connection.source === null) return;
+      if (connection.target === null) return;
+
+      const newEdge = {
+        id: uuidv4(),
+        source: connection.source,
+        target: connection.target,
+        sourceHandle: connection.sourceHandle,
+        targetHandle: connection.targetHandle
+      };
+      onEdgesChange([
+        {
+          type: 'add',
+          item: newEdge
+        }
+      ]);
+    },
+    [onEdgesChange]
+  );
+
+  const closeNodePicker = useCallback(() => {
+    setLastConnectStart(undefined);
+    setNodePickerVisibility(undefined);
+  }, []);
+
+  const handleAddNode = useCallback(
+    (nodeType: string, position: XYPosition) => {
+      closeNodePicker();
+      const newNode = {
+        id: uuidv4(),
+        type: nodeType,
+        position,
+        data: {}
+      };
+      onNodesChange([
+        {
+          type: 'add',
+          item: newNode
+        }
+      ]);
+
+      if (lastConnectStart === undefined) return;
+
+      // add an edge if we started on a socket
+      const originNode = nodes.find(
+        (node) => node.id === lastConnectStart.nodeId
+      );
+      if (originNode === undefined) return;
+      if (!specJSON) return;
+      onEdgesChange([
+        {
+          type: 'add',
+          item: calculateNewEdge(
+            originNode,
+            nodeType,
+            newNode.id,
+            lastConnectStart,
+            specJSON
+          )
+        }
+      ]);
+    },
+    [
+      closeNodePicker,
+      lastConnectStart,
+      nodes,
+      onEdgesChange,
+      onNodesChange,
+      specJSON
+    ]
+  );
+
+  const handleStartConnect = useCallback(
+    (e: ReactMouseEvent, params: OnConnectStartParams) => {
+      setLastConnectStart(params);
+    },
+    []
+  );
+
+  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 handlePaneClick = useCallback(
+    () => closeNodePicker(),
+    [closeNodePicker]
+  );
+
+  const handlePaneContextMenu = useCallback((e: ReactMouseEvent) => {
+    e.preventDefault();
+    setNodePickerVisibility({ x: e.clientX, y: e.clientY });
+  }, []);
+
+  const nodePickFilters = useNodePickFilters({
+    nodes,
+    lastConnectStart,
+    specJSON
+  });
+
+  return {
+    onConnect,
+    handleStartConnect,
+    handleStopConnect,
+    handlePaneClick,
+    handlePaneContextMenu,
+    lastConnectStart,
+    nodePickerVisibility,
+    handleAddNode,
+    closeNodePicker,
+    nodePickFilters
+  };
+};