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

package/src/store/logs.ts

@@ -0,0 +1,28 @@
+import type { LogSeverity } from '@kiberon-labs/behave-graph';
+import { create } from 'zustand';
+
+interface ILogMessage {
+  message: string;
+}
+
+export interface ILog {
+  data: ILogMessage;
+  time: Date;
+  type: LogSeverity;
+}
+
+export type LogStore = {
+  logs: ILog[];
+  append: (log: ILog) => void;
+  clear: () => void;
+};
+
+export const logStoreFactory = () =>
+  create<LogStore>((set) => ({
+    logs: [],
+    append: (log: ILog) =>
+      set((state) => {
+        return { logs: [...state.logs, log] };
+      }),
+    clear: () => set(() => ({ logs: [] }))
+  }));

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,51 @@
+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) => {
+        // Merge specs by type (additive) so layering multiple profiles/plugins
+        // (core + image + ai + ...) doesn't clobber previously-registered node
+        // types. Later registrations override an existing type. Use updateSpecs
+        // for a full replacement.
+        const byType = new Map(x.specs.map((spec) => [spec.type, spec]));
+        for (const spec of registry.specs) byType.set(spec.type, spec);
+        return {
+          values: { ...x.values, ...registry.values },
+          specs: Array.from(byType.values())
+        };
+      }),
+
+    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 { GraphSession } from '@/system/graphSession';
+import { create } from 'zustand';
+
+export type SelectionStore = {
+  selectedNodeId: string | null;
+  setSelectedNodeId: (nodeId: string | null) => void;
+};
+
+export const selectionStoreFactory = (session: GraphSession) => {
+  const store = create<SelectionStore>((set) => ({
+    selectedNodeId: null,
+    setSelectedNodeId: (selectedNodeId: string | null) =>
+      set(() => ({ selectedNodeId }))
+  }));
+  //Track side effect of selected node in the node store
+  session.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 type GeneratorLocation = 'inline' | 'panel';
+
+/**
+ * Single source of truth for editor settings. Each entry's `default` defines the
+ * value (and its type); `persist: false` excludes it from the saved settings.
+ * The store shape, setters, and the persisted-key list are all derived from this
+ * , adding a setting here is the only edit needed (no setter boilerplate, no
+ * separate persist allow-list to keep in sync).
+ */
+const SETTINGS = {
+  edgeType: { default: EDGE_TYPE.bezier as EdgeType },
+  debugMode: { default: false as boolean },
+  showMenu: { default: true as boolean },
+  showTimings: { default: false as boolean },
+  showMinimap: { default: false as boolean },
+  showGrid: { default: true as boolean },
+  // Transient UI state , not persisted.
+  showSearch: { default: false as boolean, persist: false },
+  /** Delay applying a node value change until the user commits it. */
+  delayedUpdate: { default: false as boolean },
+  /** Show value types inline on nodes. */
+  inlineTypes: { default: false as boolean },
+  /** Show values inline on nodes. */
+  inlineValues: { default: false as boolean },
+  connectOnClick: { default: true as boolean },
+  /**
+   * When connecting sockets of different-but-convertible value types,
+   * automatically insert a conversion node between them.
+   */
+  autoConvert: { default: true as boolean },
+  snapGrid: { default: false as boolean },
+  gridSize: { default: 15 as number },
+  generatorLocation: { default: 'panel' as GeneratorLocation }
+} satisfies Record<string, { default: unknown; persist?: boolean }>;
+
+type SettingsSchema = typeof SETTINGS;
+
+type SettingsState = {
+  [K in keyof SettingsSchema]: SettingsSchema[K]['default'];
+};
+
+type SettingsSetters = {
+  [K in keyof SettingsSchema as `set${Capitalize<K & string>}`]: (
+    value: SettingsSchema[K]['default']
+  ) => void;
+};
+
+/**
+ * Generic accessors so plugin-contributed settings (dynamic keys not in the
+ * static {@link SETTINGS} schema) live in the same store as the typed built-ins.
+ * The auto-generated panel writes every row through {@link SystemSettingsStore.setSetting};
+ * the typed per-key setters above remain for existing typed consumers.
+ */
+type SettingsDynamicAccess = {
+  /** Dynamic plugin-contributed setting values, keyed by descriptor key. */
+  [key: string]: unknown;
+  /** Set any setting by key (used by the schema-driven panel + plugins). */
+  setSetting: (key: string, value: unknown) => void;
+};
+
+export type SystemSettingsStore = SettingsState &
+  SettingsSetters &
+  SettingsDynamicAccess;
+
+const setterName = (key: string): string =>
+  `set${key.charAt(0).toUpperCase()}${key.slice(1)}`;
+
+/** Settings round-tripped to persisted storage (everything except `persist:false`). */
+export const PERSISTED_SETTING_KEYS = (
+  Object.entries(SETTINGS) as [keyof SettingsSchema, { persist?: boolean }][]
+)
+  .filter(([, spec]) => spec.persist !== false)
+  .map(([key]) => key);
+
+export const systemSettingsFactory = () =>
+  create<SystemSettingsStore>((set) => {
+    const initial: Record<string, unknown> = {};
+    for (const [key, spec] of Object.entries(SETTINGS)) {
+      initial[key] = spec.default;
+      initial[setterName(key)] = (value: unknown) =>
+        set({ [key]: value } as Partial<SystemSettingsStore>);
+    }
+    // Generic setter for dynamic (plugin-contributed) keys and for the
+    // schema-driven panel, which writes every row by key.
+    initial.setSetting = (key: string, value: unknown) =>
+      set({ [key]: value } as Partial<SystemSettingsStore>);
+    return initial as SystemSettingsStore;
+  });

package/src/store/settingsSchema.ts

@@ -0,0 +1,210 @@
+import { createStore, type StoreApi } from 'zustand/vanilla';
+import type { FC } from 'react';
+import { EDGE_TYPE } from './settings';
+
+/**
+ * Schema-driven settings.
+ *
+ * The Settings panel is auto-generated from a registry of {@link SettingDescriptor}s
+ * rather than hand-coded JSX. Built-in settings are seeded as {@link DEFAULT_SETTINGS};
+ * plugins contribute their own via `system.registerSetting(...)`, and the panel
+ * renders them the same way — so a plugin can surface settings without forking
+ * the panel.
+ *
+ * Descriptors are intentionally plain data (everything except `render`/`when` is
+ * JSON-serializable), so a future declarative manifest `contributes.configuration`
+ * section can feed this same registry.
+ */
+
+export type SettingEnumOption = { value: string; label: string };
+
+/** Live values bag passed to a descriptor's {@link SettingDescriptorBase.when}. */
+export type SettingsValues = Record<string, unknown>;
+
+/** Props handed to a `type: 'custom'` descriptor's `render` component. */
+export type SettingControlProps = {
+  value: unknown;
+  setValue: (value: unknown) => void;
+  descriptor: SettingDescriptor;
+};
+
+type SettingDescriptorBase = {
+  /**
+   * Unique key. Built-ins are flat (`edgeType`) and match the value-store keys
+   * 1:1; plugin settings should be namespaced (`graphRunner.autoStart`) to avoid
+   * collisions.
+   */
+  key: string;
+  /** Category heading the row is grouped under, e.g. `"Layout"`. */
+  section: string;
+  /** Sort order within the section (falls back to registration order). */
+  order?: number;
+  /** Row label. */
+  title?: string;
+  /** Secondary description text under the label. */
+  description?: string;
+  /** Excluded from persisted settings when `false`. Defaults to `true`. */
+  persist?: boolean;
+  /** Hide the row unless this returns true for the current values. */
+  when?: (values: SettingsValues) => boolean;
+};
+
+export type SettingDescriptor =
+  | (SettingDescriptorBase & { type: 'boolean'; default: boolean })
+  | (SettingDescriptorBase & {
+      type: 'number';
+      default: number;
+      min?: number;
+      max?: number;
+      step?: number;
+    })
+  | (SettingDescriptorBase & {
+      type: 'string';
+      default: string;
+      placeholder?: string;
+    })
+  | (SettingDescriptorBase & {
+      type: 'enum';
+      default: string;
+      options: SettingEnumOption[];
+    })
+  | (SettingDescriptorBase & {
+      type: 'custom';
+      default?: unknown;
+      render: FC<SettingControlProps>;
+    });
+
+export type SettingsSchemaStore = {
+  /** Registered descriptors, in registration order. */
+  settings: SettingDescriptor[];
+  /** Section names in first-seen order, for stable display grouping. */
+  sectionOrder: string[];
+  registerSetting: (descriptor: SettingDescriptor) => void;
+  registerSettings: (descriptors: SettingDescriptor[]) => void;
+};
+
+const toOptions = (values: readonly string[]): SettingEnumOption[] =>
+  values.map((value) => ({ value, label: value }));
+
+/**
+ * Built-in editor settings, mirroring the previously hand-coded panel. Keys
+ * match the value-store keys in {@link file://./settings.ts} exactly, so typed
+ * consumers (`settings.edgeType`, …) are unaffected.
+ */
+export const DEFAULT_SETTINGS: SettingDescriptor[] = [
+  {
+    key: 'edgeType',
+    section: 'Layout',
+    type: 'enum',
+    default: EDGE_TYPE.bezier,
+    options: toOptions(Object.values(EDGE_TYPE)),
+    title: 'Edge Type',
+    description: 'Select the type of edge to use in the graph editor.'
+  },
+  {
+    key: 'inlineTypes',
+    section: 'Accessibility',
+    type: 'boolean',
+    default: false,
+    title: 'Show inline types',
+    description:
+      'Adds additional spans to help differentiate types for colorblind users.'
+  },
+  {
+    key: 'delayedUpdate',
+    section: 'Interaction',
+    type: 'boolean',
+    default: false,
+    title: 'Use delayed interaction',
+    description: 'Forces a user to click save to update port.'
+  },
+  {
+    key: 'connectOnClick',
+    section: 'Interaction',
+    type: 'boolean',
+    default: true,
+    title: 'Click to connect',
+    description: 'Allows you to quick connect nodes by clicking on the 2 port.'
+  },
+  {
+    key: 'autoConvert',
+    section: 'Interaction',
+    type: 'boolean',
+    default: true,
+    title: 'Auto-convert types',
+    description:
+      'When connecting different but convertible types, insert a conversion node automatically.'
+  },
+  {
+    key: 'showMinimap',
+    section: 'Display',
+    type: 'boolean',
+    default: false,
+    title: 'Show Minimap',
+    description: 'Shows the minimap in the graph editing area.'
+  },
+  {
+    key: 'showGrid',
+    section: 'Display',
+    type: 'boolean',
+    default: true,
+    title: 'Show Grid',
+    description: 'Shows the grid in the graph editing area.'
+  },
+  {
+    key: 'snapGrid',
+    section: 'Display',
+    type: 'boolean',
+    default: false,
+    title: 'Snap to Grid',
+    description: 'Snaps nodes to the grid while dragging.'
+  },
+  {
+    key: 'showTimings',
+    section: 'Performance',
+    type: 'boolean',
+    default: false,
+    title: 'Show execution time',
+    description: 'Shows how long it takes for a node to process.'
+  }
+];
+
+export const settingsSchemaStoreFactory = (
+  initial: SettingDescriptor[] = DEFAULT_SETTINGS
+): StoreApi<SettingsSchemaStore> =>
+  createStore<SettingsSchemaStore>((set, get) => {
+    const registerSetting = (descriptor: SettingDescriptor): void => {
+      const { settings, sectionOrder } = get();
+      if (settings.some((existing) => existing.key === descriptor.key)) {
+        console.warn(
+          `Setting "${descriptor.key}" is already registered; ignoring duplicate.`
+        );
+        return;
+      }
+      set({
+        settings: [...settings, descriptor],
+        sectionOrder: sectionOrder.includes(descriptor.section)
+          ? sectionOrder
+          : [...sectionOrder, descriptor.section]
+      });
+    };
+
+    // Seed the built-in descriptors as the starting state.
+    const settings: SettingDescriptor[] = [];
+    const sectionOrder: string[] = [];
+    for (const descriptor of initial) {
+      if (settings.some((existing) => existing.key === descriptor.key))
+        continue;
+      settings.push(descriptor);
+      if (!sectionOrder.includes(descriptor.section)) {
+        sectionOrder.push(descriptor.section);
+      }
+    }
+
+    return {
+      settings,
+      sectionOrder,
+      registerSetting,
+      registerSettings: (descriptors) => descriptors.forEach(registerSetting)
+    };
+  });

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