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

package/src/store/menubar.ts

@@ -0,0 +1,41 @@
+import { defaultMenuDataFactory } from '@/components/menubar';
+import { createStore } from 'zustand';
+
+export type IMenuItem = {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  render: (rest: { [key: string]: any }) => React.ReactNode;
+};
+
+export type ISubMenu = {
+  title: string;
+  name: string;
+  items: (IMenuItem | Seperator)[];
+};
+export type IMenu = {
+  items: ISubMenu[];
+};
+
+export class Seperator {}
+
+export type MenuBarStore = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+  items: ISubMenu[];
+  setItems: (items: ISubMenu[]) => void;
+  setSubMenuItems: (menuName: string, items: (IMenuItem | Seperator)[]) => void;
+};
+
+export const menubarStoreFactory = () =>
+  createStore<MenuBarStore>((set) => ({
+    show: true,
+    setShow: (show) => set({ show }),
+    items: defaultMenuDataFactory().items,
+    setItems: (items) => set({ items }),
+    setSubMenuItems: (menuName, items) =>
+      set((state) => ({
+        items: state.items.map((subMenu) =>
+          subMenu.name === menuName ? { ...subMenu, items } : subMenu
+        )
+      }))
+  }));

package/src/store/refs.ts

@@ -0,0 +1,84 @@
+import type { ReactFlowInstance } from 'reactflow';
+import { create, useStore, type StoreApi } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+import type { XYPosition } from 'reactflow';
+
+export type Refs = {
+  reactflow: ReactFlowInstance;
+  nodePickerPosition?: XYPosition;
+  selectedDocumentationType?: string;
+};
+
+export type RefStore = {
+  refs: Refs;
+  setRef: <T extends keyof Refs>(key: T, ref: Refs[T]) => void;
+  getRef: <T extends keyof Refs>(key: T) => Refs[T] | undefined;
+  removeRef: (key: keyof Refs) => void;
+  hasRef: (key: keyof Refs) => boolean;
+};
+
+export const refStoreFactory = () =>
+  create<RefStore>()(
+    subscribeWithSelector((set, get) => ({
+      refs: {} as Refs,
+
+      setRef: <T extends keyof Refs>(key: T, ref: Refs[T]) => {
+        set((state) => ({
+          refs: {
+            ...state.refs,
+            [key]: ref
+          }
+        }));
+      },
+
+      getRef: <T extends keyof Refs>(key: T) => {
+        return get().refs[key] as Refs[T] | undefined;
+      },
+
+      removeRef: (key: keyof Refs) => {
+        set((state) => {
+          const { [key]: _, ...rest } = state.refs;
+          return { refs: rest as Refs };
+        });
+      },
+
+      hasRef: (key: string) => {
+        return key in get().refs;
+      }
+    }))
+  );
+
+/**
+ * Subscribe to changes of a specific ref
+ * @param store - The ref store
+ * @param key - The key of the ref to watch
+ * @param callback - Callback fired when the ref changes
+ * @returns Unsubscribe function
+ */
+export function subscribeToRef<T extends keyof Refs>(
+  store: StoreApi<RefStore>,
+  key: T,
+  callback: (ref: Refs[T] | undefined) => void
+) {
+  return store.subscribe((state, prevState) => {
+    const current = state.refs[key] as Refs[T] | undefined;
+    const previous = prevState.refs[key] as Refs[T] | undefined;
+    if (current !== previous) {
+      return current;
+    }
+    callback(current);
+  });
+}
+
+/**
+ * Hook to access the current value of a ref from the store
+ * @param store - The ref store
+ * @param key - The key of the ref
+ * @returns The current value of the ref or null
+ */
+export function useRefFromStore<T extends keyof Refs>(
+  store: StoreApi<RefStore>,
+  key: T
+): Refs[T] | undefined {
+  return useStore(store, (state) => state.refs[key] as Refs[T] | undefined);
+}

package/src/store/registry.ts

@@ -0,0 +1,43 @@
+import { create } from 'zustand';
+import type { INodeRegistry, ValueTypeMetadata } from '../types/NodeMetadata';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+
+export type RegistryStore = {
+  readonly values: Record<string, ValueTypeMetadata>;
+  readonly specs: NodeSpecJSON[];
+
+  getRegistry: () => INodeRegistry;
+  updateRegistry: (registry: INodeRegistry) => void;
+  updateValues: (values: Record<string, ValueTypeMetadata>) => void;
+  updateSpecs: (specs: NodeSpecJSON[]) => void;
+};
+
+export const registryStoreFactory = () =>
+  create<RegistryStore>((set, get) => ({
+    values: {},
+    specs: [],
+
+    getRegistry: (): INodeRegistry => {
+      const state = get();
+      return {
+        values: state.values,
+        specs: state.specs
+      };
+    },
+
+    updateRegistry: (registry: INodeRegistry) =>
+      set((x) => ({
+        values: { ...x.values, ...registry.values },
+        specs: [...registry.specs]
+      })),
+
+    updateValues: (values: Record<string, ValueTypeMetadata>) =>
+      set((x) => ({
+        values: { ...x.values, ...values }
+      })),
+
+    updateSpecs: (specs: NodeSpecJSON[]) =>
+      set(() => ({
+        specs
+      }))
+  }));

package/src/store/selection.ts

@@ -0,0 +1,22 @@
+import type { System } from '@/system';
+import { create } from 'zustand';
+
+export type SelectionStore = {
+  selectedNodeId: string | null;
+  setSelectedNodeId: (nodeId: string | null) => void;
+};
+
+export const selectionStoreFactory = (system: System) => {
+  const store = create<SelectionStore>((set) => ({
+    selectedNodeId: null,
+    setSelectedNodeId: (selectedNodeId: string | null) =>
+      set(() => ({ selectedNodeId }))
+  }));
+  //Track side effect of selected node in the node store
+  system.nodeStore.subscribe((state) => {
+    const selectedNode = state.nodes.find((n) => n.selected);
+    store.getState().setSelectedNodeId(selectedNode?.id ?? null);
+  });
+
+  return store;
+};

package/src/store/settings.ts

@@ -0,0 +1,99 @@
+import { create } from 'zustand';
+
+export const EDGE_TYPE = {
+  bezier: 'Bezier',
+  smoothStep: 'Smooth step',
+  straight: 'Straight',
+  simpleBezier: 'Simple Bezier'
+} as const;
+
+export type EdgeType = (typeof EDGE_TYPE)[keyof typeof EDGE_TYPE];
+
+export const LAYOUT_TYPE = {
+  dagre: 'Dagre',
+  elkForce: 'Elk - Force',
+  elkRect: 'Elk - Rect',
+  elkLayered: 'Elk - Layered'
+} as const;
+
+export type LayoutType = (typeof LAYOUT_TYPE)[keyof typeof LAYOUT_TYPE];
+
+export type GeneratorLocation = 'inline' | 'panel';
+
+export type SystemSettingsStore = {
+  debugMode: boolean;
+  showTimings: boolean;
+  showMinimap: boolean;
+  showGrid: boolean;
+  showSearch: boolean;
+  showMenu: boolean;
+  edgeType: EdgeType;
+  layoutType: LayoutType;
+  delayedUpdate: boolean;
+  inlineTypes: boolean;
+  inlineValues: boolean;
+  connectOnClick: boolean;
+  snapGrid: boolean;
+  gridSize: number;
+  generatorLocation: GeneratorLocation;
+  setDebugMode: (debugMode: boolean) => void;
+  setShowTimings: (showTimings: boolean) => void;
+  setShowMinimap: (showMinimap: boolean) => void;
+  setShowGrid: (showGrid: boolean) => void;
+  setShowSearch: (showSearch: boolean) => void;
+  setEdgeType: (edgeType: EdgeType) => void;
+  setLayoutType: (layoutType: LayoutType) => void;
+  setDelayedUpdate: (delayedUpdate: boolean) => void;
+  setInlineTypes: (inlineTypes: boolean) => void;
+  setInlineValues: (inlineValues: boolean) => void;
+  setConnectOnClick: (connectOnClick: boolean) => void;
+  setSnapGrid: (snapGrid: boolean) => void;
+  setGridSize: (gridSize: number) => void;
+  setGeneratorLocation: (generatorLocation: GeneratorLocation) => void;
+};
+
+export const systemSettingsFactory = () =>
+  create<SystemSettingsStore>((set) => ({
+    edgeType: EDGE_TYPE.bezier,
+    layoutType: LAYOUT_TYPE.dagre,
+    debugMode: false,
+    showMenu: true,
+    showTimings: false,
+    showMinimap: false,
+    showGrid: true,
+    showSearch: false,
+    /**
+     * Whether to delay the update of a node when a value is changed
+     */
+    delayedUpdate: false,
+    /**
+     * Whether to show the types inline with the nodes
+     */
+    inlineTypes: false,
+    /**
+     * Whether to show the values inline with the nodes
+     */
+    inlineValues: false,
+    connectOnClick: true,
+    snapGrid: false,
+    gridSize: 15,
+    generatorLocation: 'panel',
+    setShowMenu: (showMenu: boolean) => set(() => ({ showMenu })),
+    setEdgeType: (edgeType: EdgeType) => set(() => ({ edgeType })),
+    setLayoutType: (layoutType: LayoutType) => set(() => ({ layoutType })),
+    setDebugMode: (debugMode: boolean) => set(() => ({ debugMode })),
+    setShowTimings: (showTimings: boolean) => set(() => ({ showTimings })),
+    setShowMinimap: (showMinimap: boolean) => set(() => ({ showMinimap })),
+    setShowGrid: (showGrid: boolean) => set(() => ({ showGrid })),
+    setShowSearch: (showSearch: boolean) => set(() => ({ showSearch })),
+    setDelayedUpdate: (delayedUpdate: boolean) =>
+      set(() => ({ delayedUpdate })),
+    setInlineTypes: (inlineTypes: boolean) => set(() => ({ inlineTypes })),
+    setInlineValues: (inlineValues: boolean) => set(() => ({ inlineValues })),
+    setConnectOnClick: (connectOnClick: boolean) =>
+      set(() => ({ connectOnClick })),
+    setSnapGrid: (snapGrid: boolean) => set(() => ({ snapGrid })),
+    setGridSize: (gridSize: number) => set(() => ({ gridSize })),
+    setGeneratorLocation: (generatorLocation: GeneratorLocation) =>
+      set(() => ({ generatorLocation }))
+  }));

package/src/store/socketGenerator.tsx

@@ -0,0 +1,54 @@
+import type { IBehaveNode } from '@/types/nodes';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import type { ComponentType } from 'react';
+import { create } from 'zustand';
+
+export type SocketGeneratorNode = {
+  id: string;
+  data: IBehaveNode['data'];
+  spec: NodeSpecJSON;
+  selected: boolean;
+};
+
+export type SocketGeneratorRenderProps = {
+  node: SocketGeneratorNode;
+};
+
+export type SocketGenerator = {
+  name: string;
+  check: (spec: NodeSpecJSON) => boolean;
+  render: ComponentType<SocketGeneratorRenderProps>;
+};
+
+export type SocketGeneratorStore = {
+  generators: SocketGenerator[];
+  registerGenerator: (generator: SocketGenerator) => void;
+  unregisterGenerator: (name: string) => void;
+};
+
+export const socketGeneratorStoreFactory = () =>
+  create<SocketGeneratorStore>((set) => ({
+    generators: [],
+
+    registerGenerator: (generator) =>
+      set((state) => {
+        const existingIndex = state.generators.findIndex(
+          (x) => x.name === generator.name
+        );
+
+        if (existingIndex === -1) {
+          return {
+            generators: [...state.generators, generator]
+          };
+        }
+
+        const next = state.generators.slice();
+        next[existingIndex] = generator;
+        return { generators: next };
+      }),
+
+    unregisterGenerator: (name) =>
+      set((state) => ({
+        generators: state.generators.filter((x) => x.name !== name)
+      }))
+  }));

package/src/store/specific.tsx

@@ -0,0 +1,75 @@
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import type { ComponentType } from 'react';
+import { create } from 'zustand';
+import { getCustomEventOnTriggeredSpecific } from '@/specifics/CustomEventOnTriggeredSpecific';
+import { getCustomEventTriggerSpecific } from '@/specifics/CustomEventTriggerSpecific';
+import { getVariableGetSpecific } from '@/specifics/VariableGetSpecific';
+import { getVariableSetSpecific } from '@/specifics/VariableSetSpecific';
+import type { IBehaveNode } from '@/types/nodes';
+
+export type SpecificNode = {
+  id: string;
+  data: IBehaveNode['data'];
+  spec: NodeSpecJSON;
+  selected: boolean;
+};
+
+export type SpecificRenderProps = {
+  node: SpecificNode;
+};
+
+export type Specific = {
+  name: string;
+  check: (spec: NodeSpecJSON) => boolean;
+  render: ComponentType<SpecificRenderProps>;
+};
+
+export type SpecificStore = {
+  specifics: Specific[];
+  titleBarActions: Record<string, React.ReactElement>;
+  registerSpecific: (specific: Specific) => void;
+  unregisterSpecific: (name: string) => void;
+  registryTitleBarAction: (name: string, action: React.ReactElement) => void;
+};
+
+const defaultSpecifics: Specific[] = [
+  getCustomEventOnTriggeredSpecific(),
+  getCustomEventTriggerSpecific(),
+  getVariableGetSpecific(),
+  getVariableSetSpecific()
+];
+
+export const specificStoreFactory = () =>
+  create<SpecificStore>((set) => ({
+    specifics: defaultSpecifics,
+
+    registerSpecific: (specific) =>
+      set((state) => {
+        const existingIndex = state.specifics.findIndex(
+          (x) => x.name === specific.name
+        );
+
+        if (existingIndex === -1) {
+          return {
+            specifics: [...state.specifics, specific]
+          };
+        }
+
+        const next = state.specifics.slice();
+        next[existingIndex] = specific;
+        return { specifics: next };
+      }),
+
+    unregisterSpecific: (name) =>
+      set((state) => ({
+        specifics: state.specifics.filter((x) => x.name !== name)
+      })),
+    titleBarActions: {},
+    registryTitleBarAction: (name: string, action: React.ReactElement) =>
+      set((state) => ({
+        titleBarActions: {
+          ...state.titleBarActions,
+          [name]: action
+        }
+      }))
+  }));

package/src/store/specs.tsx

@@ -0,0 +1,35 @@
+import type { System } from '@/system';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import { create } from 'zustand';
+
+export type SpecsStore = {
+  specs: NodeSpecJSON[];
+  specDict: Record<string, NodeSpecJSON>;
+  setSpecs: (specs: NodeSpecJSON[]) => void;
+};
+
+export const specsStoreFactory = (sys: System) => {
+  const store = create<SpecsStore>((set) => ({
+    specs: [],
+    specDict: {},
+    setSpecs: (specs: NodeSpecJSON[]) =>
+      set(() => ({
+        specs,
+        specDict: specs.reduce(
+          (dict, spec) => {
+            dict[spec.type] = spec;
+            return dict;
+          },
+          {} as Record<string, NodeSpecJSON>
+        )
+      }))
+  }));
+
+  // Subscribe to registry changes to sync specs
+  sys.registry.subscribe((registryState) => {
+    const registry = registryState.getRegistry();
+    store.getState().setSpecs(registry.specs);
+  });
+
+  return store;
+};