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

package/src/store/hotKeys.tsx

@@ -0,0 +1,364 @@
+import type { System } from '@/system';
+import { create } from 'zustand';
+
+type Handler = (e?: KeyboardEvent) => any;
+
+export type HotkeyStore = {
+  keymap: Record<string, string | string[]>;
+  handlers: Record<string, Handler>;
+  descriptions: Record<string, string>;
+  /** Reverse map: command id -> keymap action, so any UI surface that runs a
+   * command can look up its live shortcut without knowing the action name. */
+  commandToAction: Record<string, string>;
+  register(val: {
+    action: string;
+    trigger: string | string[];
+    description?: string;
+    handler?: Handler;
+    /** Command id this binding invokes; enables shortcut hints in menus. */
+    command?: string;
+  }): void;
+  registerDescription(action: string, description: string): void;
+  registerHandler(action: string, handler: Handler): void;
+  /**
+   * Formatted shortcut hint for a command id (e.g. `'Ctrl+Shift+←'`), derived
+   * live from the keymap, or undefined if the command has no bound key.
+   */
+  getCommandKeybinding(commandId: string): string | undefined;
+};
+
+const MODIFIER_LABELS: Record<string, string> = {
+  ctrl: 'Ctrl',
+  control: 'Ctrl',
+  cmd: 'Cmd',
+  command: 'Cmd',
+  meta: 'Cmd',
+  shift: 'Shift',
+  alt: 'Alt',
+  option: 'Alt'
+};
+
+const KEY_LABELS: Record<string, string> = {
+  left: '←',
+  right: '→',
+  up: '↑',
+  down: '↓',
+  plus: '+',
+  minus: '-',
+  esc: 'Esc',
+  escape: 'Esc',
+  del: 'Del',
+  delete: 'Del',
+  backspace: 'Backspace',
+  enter: 'Enter',
+  return: 'Enter',
+  space: 'Space',
+  tab: 'Tab'
+};
+
+const formatKeyPart = (part: string): string => {
+  const lower = part.toLowerCase();
+  if (MODIFIER_LABELS[lower]) return MODIFIER_LABELS[lower];
+  if (KEY_LABELS[lower]) return KEY_LABELS[lower];
+  if (part.length === 1) return part.toUpperCase();
+  return part.charAt(0).toUpperCase() + part.slice(1);
+};
+
+/**
+ * Format a keymap trigger into a human-readable hint, e.g. `'ctrl+shift+left'`
+ * -> `'Ctrl+Shift+←'`. When several triggers are bound (cross-platform), prefer
+ * the `ctrl` variant so menus show one stable shortcut. Returns undefined for an
+ * empty/unset trigger.
+ */
+export const formatTrigger = (
+  trigger: string | string[] | undefined
+): string | undefined => {
+  let chosen: string | undefined;
+  if (Array.isArray(trigger)) {
+    chosen =
+      trigger.find((t) => t.toLowerCase().includes('ctrl')) ?? trigger[0];
+  } else {
+    chosen = trigger;
+  }
+  if (!chosen) return undefined;
+  return chosen
+    .split('+')
+    .map((p) => formatKeyPart(p.trim()))
+    .join('+');
+};
+
+/**
+ * Declarative default hotkey bindings. One table is the single source of truth
+ * for the keymap, descriptions, and handlers (previously three objects that had
+ * to be kept in sync). Most bindings just dispatch a registered command by id;
+ * the few that need key-specific context (the pressed node / number key) use a
+ * custom `handler`.
+ */
+type HotkeyBinding = {
+  action: string;
+  trigger: string | string[];
+  description: string;
+  /** Dispatch this command id (with preventDefault/stopPropagation). */
+  command?: string;
+  /**
+   * For handler-based bindings, the command id this key maps to. Used only to
+   * surface the shortcut hint in menus; does not affect what the key does.
+   */
+  hintCommand?: string;
+  /** Or run custom key-specific logic. */
+  handler?: (sys: System, e?: KeyboardEvent) => void;
+};
+
+const NUMBER_TRIGGERS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+
+const traceFromSelection =
+  (commandId: string) => (sys: System, e?: KeyboardEvent) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    const selection = sys.selectionStore.getState().selectedNodeId;
+    if (selection) sys.runCommand(commandId, { nodeId: selection });
+  };
+
+const defaultBindings: HotkeyBinding[] = [
+  {
+    action: 'SAVE',
+    trigger: 'ctrl+s',
+    description: 'Save',
+    command: 'editor.save'
+  },
+  {
+    action: 'GROUP',
+    trigger: 'ctrl+g',
+    description: 'Group',
+    command: 'selection.group'
+  },
+  {
+    action: 'COPY',
+    trigger: ['command+c', 'ctrl+c'],
+    description: 'Copy',
+    command: 'selection.copy'
+  },
+  {
+    action: 'PASTE',
+    trigger: ['command+v', 'ctrl+v'],
+    description: 'Paste',
+    command: 'selection.paste'
+  },
+  {
+    action: 'SELECT_ALL',
+    trigger: 'ctrl+a',
+    description: 'Select All',
+    command: 'selection.selectAll'
+  },
+  {
+    action: 'UNDO',
+    trigger: ['command+z', 'ctrl+z'],
+    description: 'Undo',
+    command: 'editor.undo'
+  },
+  {
+    action: 'REDO',
+    trigger: ['command+shift+z', 'ctrl+shift+z'],
+    description: 'Redo',
+    command: 'editor.redo'
+  },
+  {
+    action: 'FIND',
+    trigger: ['ctrl+f', 'command+f'],
+    description: 'Find',
+    command: 'editor.find'
+  },
+  {
+    action: 'AUTO_LAYOUT',
+    trigger: 'shift+alt+f',
+    description: 'Auto Layout',
+    command: 'editor.autoLayout'
+  },
+  {
+    action: 'FIT_VIEW',
+    trigger: ['f'],
+    description: 'Fit View',
+    command: 'view.fit'
+  },
+  {
+    action: 'ZOOM_IN',
+    trigger: ['ctrl+plus', 'command+plus'],
+    description: 'Zoom In',
+    command: 'view.zoomIn'
+  },
+  {
+    action: 'ZOOM_OUT',
+    trigger: ['command+-', 'ctrl+-'],
+    description: 'Zoom Out',
+    command: 'view.zoomOut'
+  },
+  {
+    action: 'ZOOM_RESET',
+    trigger: 'ctrl+0',
+    description: 'Zoom Reset',
+    command: 'view.zoomReset'
+  },
+  {
+    action: 'TOGGLE_GRID',
+    trigger: ['command+shift+g', 'ctrl+shift+g'],
+    description: 'Toggle Grid',
+    command: 'view.toggleGrid'
+  },
+  {
+    action: 'TOGGLE_MINIMAP',
+    trigger: ['command+shift+m', 'ctrl+shift+m'],
+    description: 'Toggle Minimap',
+    command: 'view.toggleMinimap'
+  },
+  {
+    action: 'TOGGLE_SNAP_GRID',
+    trigger: ['command+shift+s', 'ctrl+shift+s'],
+    description: 'Toggle Snap Grid',
+    command: 'view.toggleSnapGrid'
+  },
+  // Bound for the keymap UI; behaviour handled elsewhere or not yet implemented.
+  {
+    action: 'DUPLICATE',
+    trigger: ['command+d', 'ctrl+d'],
+    description: 'Duplicate'
+  },
+  // Deletion is handled natively by reactflow; listed here for the keymap UI.
+  {
+    action: 'DELETE',
+    trigger: ['delete', 'del', 'backspace'],
+    description: 'Delete'
+  },
+  // Context-aware handlers.
+  {
+    action: 'TRACE_UPSTREAM',
+    trigger: 'ctrl+shift+left',
+    description: 'Trace Upstream',
+    hintCommand: 'node.traceUpstream',
+    handler: traceFromSelection('node.traceUpstream')
+  },
+  {
+    action: 'TRACE_DOWNSTREAM',
+    trigger: 'ctrl+shift+right',
+    description: 'Trace Downstream',
+    hintCommand: 'node.traceDownstream',
+    handler: traceFromSelection('node.traceDownstream')
+  },
+  {
+    action: 'SAVE_VIEWPORT',
+    trigger: [
+      ...NUMBER_TRIGGERS.map((n) => `command+${n}`),
+      ...NUMBER_TRIGGERS.map((n) => `ctrl+${n}`)
+    ],
+    description: 'Save Viewport',
+    handler: (sys, event) => {
+      event?.preventDefault();
+      const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
+      if (!event || !reactFlowInstance) return;
+      const viewportIndex = parseInt(event.key) - 1;
+      if (viewportIndex >= 0 && viewportIndex < 9) {
+        sys.graph.setViewport(viewportIndex, reactFlowInstance.getViewport());
+        sys.notifications.info(`Saved viewport ${viewportIndex + 1}`);
+      }
+    }
+  },
+  {
+    action: 'RECALL_VIEWPORT',
+    trigger: NUMBER_TRIGGERS,
+    description: 'Recall Viewport',
+    handler: (sys, event) => {
+      event?.preventDefault();
+      const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
+      if (!event || !reactFlowInstance) return;
+      const viewportIndex = parseInt(event.key) - 1;
+      if (viewportIndex < 0 || viewportIndex >= 9) return;
+      const viewport = sys.graph.viewports[viewportIndex];
+      if (!viewport) {
+        return;
+      }
+      reactFlowInstance.setViewport(viewport);
+    }
+  }
+];
+
+const buildDefaults = (sys: System) => {
+  const keymap: Record<string, string | string[]> = {};
+  const descriptions: Record<string, string> = {};
+  const handlers: Record<string, Handler> = {};
+  const commandToAction: Record<string, string> = {};
+
+  for (const binding of defaultBindings) {
+    keymap[binding.action] = binding.trigger;
+    descriptions[binding.action] = binding.description;
+
+    const hintTarget = binding.command ?? binding.hintCommand;
+    if (hintTarget) commandToAction[hintTarget] = binding.action;
+
+    if (binding.command) {
+      const commandId = binding.command;
+      handlers[binding.action] = (event) => {
+        event?.preventDefault();
+        event?.stopPropagation();
+        void sys.runCommand(commandId);
+      };
+    } else if (binding.handler) {
+      const handler = binding.handler;
+      handlers[binding.action] = (event) => handler(sys, event);
+    }
+  }
+
+  return { keymap, descriptions, handlers, commandToAction };
+};
+
+export const hotKeyStoreFactory = (sys: System) => {
+  const { keymap, descriptions, handlers, commandToAction } =
+    buildDefaults(sys);
+
+  return create<HotkeyStore>((set, get) => ({
+    keymap,
+    descriptions,
+    handlers,
+    commandToAction,
+
+    register(val) {
+      set((s) => ({
+        handlers: {
+          ...s.handlers,
+          ...(val.handler ? { [val.action]: val.handler } : {})
+        },
+        keymap: {
+          ...s.keymap,
+          [val.action]: val.trigger
+        },
+        descriptions: {
+          ...s.descriptions,
+          ...(val.description ? { [val.action]: val.description } : {})
+        },
+        commandToAction: {
+          ...s.commandToAction,
+          ...(val.command ? { [val.command]: val.action } : {})
+        }
+      }));
+    },
+    registerHandler(name, handler) {
+      set((s) => ({
+        handlers: {
+          ...s.handlers,
+          [name]: handler
+        }
+      }));
+    },
+    registerDescription(name, desc) {
+      set((s) => ({
+        descriptions: {
+          ...s.descriptions,
+          [name]: desc
+        }
+      }));
+    },
+    getCommandKeybinding(commandId) {
+      const action = get().commandToAction[commandId];
+      if (!action) return undefined;
+      return formatTrigger(get().keymap[action]);
+    }
+  }));
+};

package/src/store/layers.ts

@@ -0,0 +1,259 @@
+import type { GraphSession } from '@/system/graphSession';
+import { create } from 'zustand';
+
+const DEFAULT_LAYER_ID = 'default';
+const DEFAULT_LAYER_NAME = 'Default';
+
+export type Layer = {
+  id: string;
+  name: string;
+  visible: boolean;
+  opacity: number;
+};
+
+export type SerializedLayers = {
+  defaultLayerId: string;
+  layers: Layer[];
+  nodeLayers: Record<string, string>;
+};
+
+export type LayerStore = {
+  defaultLayerId: string;
+  layers: Record<string, Layer>;
+  nodeLayers: Record<string, string>;
+  createLayer: (name: string) => string;
+  renameLayer: (layerId: string, name: string) => void;
+  setLayerVisibility: (layerId: string, visible: boolean) => void;
+  setLayerOpacity: (layerId: string, opacity: number) => void;
+  removeLayer: (layerId: string) => void;
+  setNodeLayer: (nodeId: string, layerId: string) => void;
+  clearNodeLayer: (nodeId: string) => void;
+  getNodeLayer: (nodeId: string) => Layer;
+  serialize: () => SerializedLayers;
+  deserialize: (serialized?: SerializedLayers) => void;
+  pruneNodeAssignments: (nodeIds: string[]) => void;
+};
+
+const clampOpacity = (opacity: number): number => {
+  if (Number.isNaN(opacity)) return 1;
+  return Math.max(0, Math.min(1, opacity));
+};
+
+const createDefaultLayer = (): Layer => ({
+  id: DEFAULT_LAYER_ID,
+  name: DEFAULT_LAYER_NAME,
+  visible: true,
+  opacity: 1
+});
+
+const createLayerId = (): string => {
+  const suffix = Math.random().toString(36).slice(2, 8);
+  return `layer-${Date.now()}-${suffix}`;
+};
+
+export const layerStoreFactory = (session: GraphSession) => {
+  const store = create<LayerStore>((set, get) => ({
+    defaultLayerId: DEFAULT_LAYER_ID,
+    layers: {
+      [DEFAULT_LAYER_ID]: createDefaultLayer()
+    },
+    nodeLayers: {},
+
+    createLayer: (name) => {
+      const normalized = name.trim() || 'Layer';
+      const id = createLayerId();
+      set((state) => ({
+        layers: {
+          ...state.layers,
+          [id]: {
+            id,
+            name: normalized,
+            visible: true,
+            opacity: 1
+          }
+        }
+      }));
+      return id;
+    },
+
+    renameLayer: (layerId, name) => {
+      const normalized = name.trim();
+      if (!normalized) return;
+      set((state) => {
+        const existing = state.layers[layerId];
+        if (!existing) return state;
+        return {
+          layers: {
+            ...state.layers,
+            [layerId]: {
+              ...existing,
+              name: normalized
+            }
+          }
+        };
+      });
+    },
+
+    setLayerVisibility: (layerId, visible) => {
+      set((state) => {
+        const existing = state.layers[layerId];
+        if (!existing) return state;
+        return {
+          layers: {
+            ...state.layers,
+            [layerId]: {
+              ...existing,
+              visible
+            }
+          }
+        };
+      });
+    },
+
+    setLayerOpacity: (layerId, opacity) => {
+      const safeOpacity = clampOpacity(opacity);
+      set((state) => {
+        const existing = state.layers[layerId];
+        if (!existing) return state;
+        return {
+          layers: {
+            ...state.layers,
+            [layerId]: {
+              ...existing,
+              opacity: safeOpacity
+            }
+          }
+        };
+      });
+    },
+
+    removeLayer: (layerId) => {
+      set((state) => {
+        if (layerId === state.defaultLayerId) return state;
+        if (!state.layers[layerId]) return state;
+
+        const nextLayers = { ...state.layers };
+        delete nextLayers[layerId];
+
+        const nextNodeLayers: Record<string, string> = {};
+        Object.entries(state.nodeLayers).forEach(([nodeId, mappedLayerId]) => {
+          nextNodeLayers[nodeId] =
+            mappedLayerId === layerId ? state.defaultLayerId : mappedLayerId;
+        });
+
+        return {
+          layers: nextLayers,
+          nodeLayers: nextNodeLayers
+        };
+      });
+    },
+
+    setNodeLayer: (nodeId, layerId) => {
+      set((state) => {
+        const resolvedLayerId = state.layers[layerId]
+          ? layerId
+          : state.defaultLayerId;
+
+        return {
+          nodeLayers: {
+            ...state.nodeLayers,
+            [nodeId]: resolvedLayerId
+          }
+        };
+      });
+    },
+
+    clearNodeLayer: (nodeId) => {
+      set((state) => {
+        const next = { ...state.nodeLayers };
+        delete next[nodeId];
+        return {
+          nodeLayers: next
+        };
+      });
+    },
+
+    getNodeLayer: (nodeId) => {
+      const state = get();
+      const mappedLayerId = state.nodeLayers[nodeId] ?? state.defaultLayerId;
+      return state.layers[mappedLayerId] ?? state.layers[state.defaultLayerId]!;
+    },
+
+    serialize: () => {
+      const state = get();
+      return {
+        defaultLayerId: state.defaultLayerId,
+        layers: Object.values(state.layers),
+        nodeLayers: { ...state.nodeLayers }
+      };
+    },
+
+    deserialize: (serialized) => {
+      const baseDefaultLayer = createDefaultLayer();
+      if (!serialized) {
+        set({
+          defaultLayerId: DEFAULT_LAYER_ID,
+          layers: { [DEFAULT_LAYER_ID]: baseDefaultLayer },
+          nodeLayers: {}
+        });
+        return;
+      }
+
+      const requestedDefault = serialized.defaultLayerId || DEFAULT_LAYER_ID;
+      const nextLayers: Record<string, Layer> = {
+        [DEFAULT_LAYER_ID]: baseDefaultLayer
+      };
+
+      for (const candidate of serialized.layers ?? []) {
+        if (!candidate?.id) continue;
+        nextLayers[candidate.id] = {
+          id: candidate.id,
+          name: candidate.name?.trim() || candidate.id,
+          visible: candidate.visible !== false,
+          opacity: clampOpacity(candidate.opacity)
+        };
+      }
+
+      const defaultLayerId = nextLayers[requestedDefault]
+        ? requestedDefault
+        : DEFAULT_LAYER_ID;
+
+      const nextNodeLayers: Record<string, string> = {};
+      Object.entries(serialized.nodeLayers ?? {}).forEach(
+        ([nodeId, mapped]) => {
+          nextNodeLayers[nodeId] = nextLayers[mapped] ? mapped : defaultLayerId;
+        }
+      );
+
+      set({
+        defaultLayerId,
+        layers: nextLayers,
+        nodeLayers: nextNodeLayers
+      });
+    },
+
+    pruneNodeAssignments: (nodeIds) => {
+      const valid = new Set(nodeIds);
+      set((state) => {
+        const nextNodeLayers: Record<string, string> = {};
+        Object.entries(state.nodeLayers).forEach(([nodeId, mapped]) => {
+          if (!valid.has(nodeId)) return;
+          nextNodeLayers[nodeId] = state.layers[mapped]
+            ? mapped
+            : state.defaultLayerId;
+        });
+
+        return {
+          nodeLayers: nextNodeLayers
+        };
+      });
+    }
+  }));
+
+  session.nodeStore.subscribe((nodeState) => {
+    const nodeIds = nodeState.nodes.map((node) => node.id);
+    store.getState().pruneNodeAssignments(nodeIds);
+  });
+
+  return store;
+};

package/src/store/legend.tsx

@@ -0,0 +1,76 @@
+import {
+  Cube,
+  Droplet,
+  EaseCurveControlPoints,
+  Hashtag,
+  InputOutput,
+  SelectPoint3d,
+  Text
+} from 'iconoir-react';
+import { create } from 'zustand';
+
+export type LegendStore = {
+  icons: Record<string, React.ComponentType>;
+  defaultIcon: React.ComponentType;
+  valueTypeColors: Record<string, string>;
+  categoryColors: Record<string, string>;
+  setIcon: (key: string, icon: React.ComponentType) => void;
+  setValueTypeColor: (key: string, color: string) => void;
+  setCategoryColor: (key: string, color: string) => void;
+};
+
+export const legendStoreFactory = () =>
+  create<LegendStore>((set) => ({
+    // store the component references (not instantiated elements)
+    defaultIcon: SelectPoint3d,
+    categoryColors: {
+      Event: '#f14445',
+      Logic: '#16a34a',
+      Variable: '#a855f7',
+      Query: '#a855f7',
+      Action: '#0891b2',
+      Flow: '#6c727e',
+      Effect: '#84cc16',
+      Time: '#6c727e',
+      None: '#6c727e'
+    },
+    valueTypeColors: {
+      flow: '#ffffff',
+      number: '#16a34a',
+      float: '#16a34a',
+      integer: '#84cc16',
+      boolean: '#0891b2',
+      string: '#a855f7',
+      object: '#f97316'
+    },
+    icons: {
+      color: Droplet,
+      curve: EaseCurveControlPoints,
+      string: Text,
+      boolean: InputOutput,
+      float: Hashtag,
+      integer: Hashtag,
+      object: Cube
+    },
+    setIcon: (key: string, icon: React.ComponentType) =>
+      set((state) => ({
+        icons: {
+          ...state.icons,
+          [key]: icon
+        }
+      })),
+    setValueTypeColor: (key: string, color: string) =>
+      set((state) => ({
+        valueTypeColors: {
+          ...state.valueTypeColors,
+          [key]: color
+        }
+      })),
+    setCategoryColor: (key: string, color: string) =>
+      set((state) => ({
+        categoryColors: {
+          ...state.categoryColors,
+          [key]: color
+        }
+      }))
+  }));