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

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>
-  );
-};

package/src/components/modals/LoadModal.tsx

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

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

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