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

package/src/store/hotKeys.tsx

@@ -0,0 +1,323 @@
+import { applyDagreLayout } from '@/layout/dagre';
+import { applyElkLayout } from '@/layout/elk';
+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>;
+  register(val: {
+    action: string;
+    trigger: string | string[];
+    description?: string;
+    handler?: Handler;
+  }): void;
+  registerDescription(action: string, description: string): void;
+  registerHandler(action: string, handler: Handler): void;
+};
+
+export const hotKeyStoreFactory = (sys: System) =>
+  create<HotkeyStore>((set) => ({
+    keymap: {
+      SELECT_ALL: 'ctrl+a',
+      DUPLICATE: ['command+d', 'ctrl+d'],
+      GROUP: 'ctrl+g',
+      SAVE: 'ctrl+s',
+      FIND: ['ctrl+f', 'command+f'],
+      AUTO_LAYOUT: 'shift+alt+f',
+      COPY: ['command+c', 'ctrl+c'],
+      PASTE: ['command+v', 'ctrl+v'],
+      DELETE: ['delete', 'del', 'backspace'],
+      UNDO: ['command+z', 'ctrl+z'],
+      REDO: ['command+shift+z', 'ctrl+shift+z'],
+      SAVE_VIEWPORT: [
+        'command+1',
+        'command+2',
+        'command+3',
+        'command+4',
+        'command+5',
+        'command+6',
+        'command+7',
+        'command+8',
+        'command+9',
+        'ctrl+1',
+        'ctrl+2',
+        'ctrl+3',
+        'ctrl+4',
+        'ctrl+5',
+        'ctrl+6',
+        'ctrl+7',
+        'ctrl+8',
+        'ctrl+9'
+      ],
+      RECALL_VIEWPORT: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+      ZOOM_IN: ['ctrl+plus', 'command+plus'],
+      ZOOM_OUT: ['command+-', 'ctrl+-'],
+      ZOOM_RESET: 'ctrl+0',
+      TOGGLE_GRID: ['command+shift+g', 'ctrl+shift+g'],
+      TOGGLE_MINIMAP: ['command+shift+m', 'ctrl+shift+m'],
+      TOGGLE_SNAP_GRID: ['command+shift+s', 'ctrl+shift+s'],
+      FIT_VIEW: ['f'],
+      TRACE_DOWNSTREAM: 'ctrl+shift+right',
+      TRACE_UPSTREAM: 'ctrl+shift+left'
+    },
+    descriptions: {
+      TRACE_DOWNSTREAM: 'Trace Downstream',
+      TRACE_UPSTREAM: 'Trace Upstream',
+      AUTO_LAYOUT: 'Auto Layout',
+      COPY: 'Copy',
+      PASTE: 'Paste',
+      DELETE: 'Delete',
+      UNDO: 'Undo',
+      REDO: 'Redo',
+      SELECT_ALL: 'Select All',
+      DUPLICATE: 'Duplicate',
+      GROUP: 'Group',
+      SAVE: 'Save',
+      FIND: 'Find',
+      FIT_VIEW: 'Fit View',
+      ZOOM_IN: 'Zoom In',
+      ZOOM_OUT: 'Zoom Out',
+      ZOOM_RESET: 'Zoom Reset',
+      TOGGLE_GRID: 'Toggle Grid',
+      TOGGLE_MINIMAP: 'Toggle Minimap',
+      TOGGLE_SNAP_GRID: 'Toggle Snap Grid',
+      SAVE_VIEWPORT: 'Save Viewport',
+      RECALL_VIEWPORT: 'Recall Viewport'
+    },
+    handlers: {
+      SAVE: (event) => {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        sys.actionStore.getState().actions.save();
+      },
+
+      GROUP: () => {
+        sys.actionStore.getState().actions.groupNodes();
+      },
+
+      COPY: (event) => {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        sys.actionStore.getState().actions.copySelectionToClipboard();
+      },
+      PASTE: async (event) => {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
+        await sys.actionStore.getState().actions.pasteFromClipboard();
+      },
+      TRACE_UPSTREAM: (event) => {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          const selection = sys.selectionStore.getState().selectedNodeId;
+          if (!selection) {
+            return;
+          }
+          sys.actionStore.getState().actions.traceUpstream(selection);
+        }
+      },
+      TRACE_DOWNSTREAM: (event) => {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          const selection = sys.selectionStore.getState().selectedNodeId;
+          if (!selection) {
+            return;
+          }
+          sys.actionStore.getState().actions.traceDownstream(selection);
+        }
+      },
+      FIT_VIEW: (event) => {
+        if (event) {
+          event.preventDefault();
+          const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
+          reactFlowInstance?.fitView({
+            padding: 0.2,
+            includeHiddenNodes: true
+          });
+        }
+      },
+
+      TOGGLE_SNAP_GRID: (event) => {
+        if (event) {
+          event.preventDefault();
+          const settings = sys.systemSettings.getState();
+          settings.setSnapGrid(!settings.snapGrid);
+        }
+      },
+      TOGGLE_GRID: (event) => {
+        if (event) {
+          event.preventDefault();
+          const settings = sys.systemSettings.getState();
+          settings.setShowGrid(!settings.showGrid);
+        }
+      },
+      SAVE_VIEWPORT: (event) => {
+        if (event) {
+          event?.preventDefault();
+          const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
+          const graph = sys.graph;
+          if (reactFlowInstance) {
+            const currentViewport = reactFlowInstance.getViewport();
+            const key = event.key; // Get pressed key (e.g., '1', '2', etc.)
+            const viewportIndex = parseInt(key) - 1; // Calculate 0-based index
+
+            if (viewportIndex >= 0 && viewportIndex < 9) {
+              graph.setViewport(viewportIndex, currentViewport);
+              sys.notifications.info(`Saved viewport ${viewportIndex + 1}`);
+            }
+          }
+        }
+      },
+      RECALL_VIEWPORT: (event) => {
+        if (event) {
+          event.preventDefault();
+          const key = event.key;
+          const graph = sys.graph;
+          const reactFlowInstance = sys.refStore.getState().getRef('reactflow');
+
+          const viewportIndex = parseInt(key) - 1;
+
+          if (viewportIndex >= 0 && viewportIndex < 9 && reactFlowInstance) {
+            const viewport = graph.viewports[viewportIndex];
+            if (!viewport) {
+              sys.pubsub.publish('missingViewPort', {
+                index: viewportIndex
+              });
+              return;
+            }
+            reactFlowInstance.setViewport(viewport);
+          }
+        }
+      },
+      SELECT_ALL: (event) => {
+        if (event) {
+          event.stopPropagation();
+          event.preventDefault();
+          sys.nodeStore.getState().setNodes((nodes) => {
+            return nodes.map((x) => {
+              return {
+                ...x,
+                selected: true
+              };
+            });
+          });
+        }
+      },
+      ZOOM_IN: (event) => {
+        if (event) {
+          event.stopPropagation();
+          event.preventDefault();
+          sys.refStore
+            .getState()
+            .getRef('reactflow')
+            ?.zoomIn({ duration: 300 });
+        }
+      },
+      ZOOM_OUT: (event) => {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          sys.refStore
+            .getState()
+            .getRef('reactflow')
+            ?.zoomOut({ duration: 300 });
+        }
+      },
+      RESET_ZOOM: (event) => {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+          const reactflow = sys.refStore.getState().getRef('reactflow');
+
+          if (!reactflow) return;
+
+          const existing = reactflow.getViewport();
+          reactflow.setViewport({ ...existing, zoom: 1 });
+        }
+      },
+      AUTO_LAYOUT: (event) => {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+
+          switch (sys.systemSettings.getState().layoutType) {
+            case 'Dagre':
+              applyDagreLayout(sys);
+              break;
+            case 'Elk - Layered':
+              applyElkLayout(sys, 'org.eclipse.elk.layered');
+              break;
+            case 'Elk - Force':
+              applyElkLayout(sys, 'org.eclipse.elk.force');
+              break;
+            case 'Elk - Rect':
+              applyElkLayout(sys, 'org.eclipse.elk.rectpacking');
+              break;
+          }
+        }
+      },
+      UNDO: (event) => {
+        if (event) {
+          event.preventDefault();
+          sys.undoManager.undo();
+        }
+      },
+      REDO: (event) => {
+        if (event) {
+          event.preventDefault();
+          sys.undoManager.redo();
+        }
+      },
+      FIND: (event) => {
+        if (event) {
+          event.preventDefault();
+          sys.tabStore.getState().openTab('find');
+        }
+      }
+    },
+
+    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 } : {})
+        }
+      }));
+    },
+    registerHandler(name, handler) {
+      set((s) => ({
+        handlers: {
+          ...s.handlers,
+          [name]: handler
+        }
+      }));
+    },
+    registerDescription(name, desc) {
+      set((s) => ({
+        descriptions: {
+          ...s.descriptions,
+          [name]: desc
+        }
+      }));
+    }
+  }));

package/src/store/layers.ts

@@ -0,0 +1,259 @@
+import type { System } from '@/system';
+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 = (system: System) => {
+  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
+        };
+      });
+    }
+  }));
+
+  system.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
+        }
+      }))
+  }));

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