@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/contexts/DiagramProvider.tsx

@@ -1,392 +1,393 @@
-// store.ts
-import React, { createContext, useContext, useMemo, useRef } from 'react';
-import { createStore, useStore as useZustandStore } from 'zustand';
-import { combine, devtools } from 'zustand/middleware';
-import { Connection, Edge, Node, NodeChange, EdgeChange } from '@xyflow/react';
-import DiagramTypes from '../types/diagram-types';
-import { ICardNode } from '../types/card-node';
-import { setPannable } from './setPannable';
-import { setSelectedNode } from './setSelectedNode';
-import { onConnect } from './onConnect';
-import { onReconnect } from './onReconnect';
-import { setNodes } from './setNodes';
-import { setEdges } from './setEdges';
-import { setContentHeight } from './setContentHeight';
-import { setDiagramType } from './setDiagramType';
-import { setEdgeShapeType } from './setEdgeShapeType';
-import { setLayoutDirection } from './setLayoutDirection';
-import { setSelectedEdge } from './setSelectedEdge';
-import { onEdgesChange, onNodesChange } from './onNodesChange';
-import { onNodeDragEnd } from './onNodeDragEnd';
-import {
-  ConditionBuilderState,
-  DiagramActions,
-  DiagramState,
-  DiagramStore,
-  HistoryEvent,
-  RenderAddNodeViewType,
-  WorkflowNodeContentType,
-} from './diagramStoreTypes';
-import { onNodeDragStart } from './onDragStart';
-import { goToHistoryIndex } from './undo';
-import addToHistory from '../utils/addToHistory';
-import { DiagrammingPageProps } from '../templates/Diagramming';
-import { FunctionSignature, FunctionParameter } from '../types/FunctionSignature';
-import { ICardNodeData } from '../types/card-node';
-import { AvailableVariable } from '../types/available-variables';
-
-const createDiagramStore = ({
-  workflowNodeContent,
-  diagramType,
-  defaultNodes,
-  defaultEdges,
-  getDefaultNodeData,
-  availableFunctions,
-  availableVariables,
-  id,
-  renderAddNodeView,
-  onChange,
-  conditionBuilderStates,
-  onNodeSelect,
-  enableNodeJsonPopover,
-}: Omit<DiagrammingPageProps, 'children'>) =>
-  createStore<DiagramStore>()(
-    devtools(
-      combine<DiagramState, DiagramActions>(
-        {
-          id,
-          contentHeights: [] as Array<{ id: string; height: number }>,
-          nodes: defaultNodes,
-          defaultNodes: defaultNodes,
-          defaultEdges: defaultEdges,
-          edges: defaultEdges,
-          availableFunctions,
-          availableVariables,
-          workflowNodeContent,
-          renderAddNodeView,
-          history: [],
-          historyIndex: -1,
-          diagramType,
-          edgeShapeType: 'curly',
-          layoutDirection: diagramType === 'automation' ? 'RIGHT' : 'DOWN',
-          pannable: true,
-          selectedNode: null,
-          selectedEdge: null,
-          getDefaultNodeData,
-          dragStartPosition: null,
-          conditionBuilderStates: conditionBuilderStates,
-        },
-        (set, get) => ({
-          setStore: set,
-          onNodesChange: onNodesChange(set, get as () => DiagramStore, onChange),
-          onEdgesChange: onEdgesChange(set, get as () => DiagramStore, onChange),
-          undo: () => goToHistoryIndex(set, get as () => DiagramStore, get().historyIndex - 1),
-          redo: () => goToHistoryIndex(set, get as () => DiagramStore, get().historyIndex + 1),
-          applyComplexChange: (nodes: ICardNode[], edges: Edge[], title?: string) => {
-            set((state: DiagramStore) => {
-              const event: HistoryEvent = {
-                title: title || 'Batch change',
-                forward: { t: 'complex-change', type: 'complex', nodesAndEdges: { nodes, edges } },
-                backward: { t: 'complex-change', type: 'complex', nodesAndEdges: { nodes: state.nodes, edges: state.edges } },
-              };
-              return {
-                ...addToHistory(state, [event]),
-                nodes,
-                edges,
-              } as DiagramStore;
-            });
-          },
-          goToHistoryIndex: (index: number) =>
-            goToHistoryIndex(set, get as () => DiagramStore, index),
-          onConnect: (connection: Connection) =>
-            onConnect(set, onChange)(connection),
-          onReconnect: (oldEdge: Edge, newConnection: Connection) => {
-            onReconnect(set, onChange)(oldEdge, newConnection);
-          },
-          setNodes: (nodes: ICardNode[]) => {
-            setNodes(set)(nodes);
-          },
-          setEdges: (edges: Edge[]) => setEdges(set)(edges),
-          setContentHeight: (id: string, height: number) =>
-            setContentHeight(set)(id, height),
-          setDiagramType: (diagramType: DiagramTypes) =>
-            setDiagramType(set)(diagramType),
-          setEdgeShapeType: (edgeShapeType: 'curly' | 'step') =>
-            setEdgeShapeType(set)(edgeShapeType),
-          setLayoutDirection: (layoutDirection: 'DOWN' | 'RIGHT') =>
-            setLayoutDirection(set)(layoutDirection),
-          setPannable: (value: boolean) => setPannable(set)(value),
-          setSelectedNode: (value: string | null) => {
-            setSelectedNode(set)(value);
-            // Notify host application if provided
-            if (onNodeSelect && value) {
-              const node = (get().nodes || []).find((n) => n.id === value);
-              try {
-                onNodeSelect({ nodeId: value, type: node?.type as any, data: node?.data });
-              } catch {
-                // ignore external callback errors
-              }
-            }
-          },
-          setSelectedEdge: (value: string | null) =>
-            setSelectedEdge(set)(value),
-          flushUndoStack: () => set({ history: [] }),
-          onNodeDragEnd: (event: React.MouseEvent, node: Node) =>
-            onNodeDragEnd(set, onChange)(event, node),
-          onNodeDragStart: (event: React.MouseEvent, node: Node) =>
-            onNodeDragStart(set)(event, node),
-          onChange: onChange,
-          onNodeSelect,
-          enableNodeJsonPopover: typeof enableNodeJsonPopover === 'boolean' ? enableNodeJsonPopover : true,
-          reset: () => {
-            set((state: DiagramStore) => {
-              const event: HistoryEvent = {
-                title: 'Clear diagram',
-                forward: {
-                  t: 'complex-change',
-                  type: 'complex',
-                  nodesAndEdges: { nodes: [], edges: [] },
-                },
-                backward: {
-                  t: 'complex-change',
-                  type: 'complex',
-                  nodesAndEdges: { nodes: state.nodes, edges: state.edges },
-                },
-              };
-              return {
-                ...addToHistory(state, [event]),
-                nodes: [],
-                edges: [],
-              } as DiagramStore;
-            });
-          },
-          addFunction: (func: FunctionSignature) => {
-            set((state) => ({
-              availableFunctions: [...(state.availableFunctions || []), func],
-            }));
-          },
-          editFunction: (func: FunctionSignature) => {
-            set((state) => ({
-              availableFunctions: (state.availableFunctions || []).map(f => f.id === func.id ? func : f),
-            }));
-          },
-          deleteFunction: (id: string) => {
-            set((state) => ({
-              availableFunctions: (state.availableFunctions || []).filter(f => f.id !== id),
-            }));
-          },
-          addVariable: (variable: AvailableVariable) => {
-            set((state) => ({
-              availableVariables: [...(state.availableVariables || []), variable],
-            }));
-          },
-          editVariable: (id: string, updates: Partial<AvailableVariable>) => {
-            set((state) => ({
-              availableVariables: (state.availableVariables || []).map(v =>
-                v.id === id ? { ...v, ...updates } : v
-              ),
-            }));
-          },
-          deleteVariable: (id: string) => {
-            set((state) => ({
-              availableVariables: (state.availableVariables || []).filter(v => v.id !== id),
-            }));
-          },
-        }),
-      ),
-    ),
-  );
-
-export const DiagramStoreContext = createContext<ReturnType<
-  typeof createDiagramStore
-> | null>(null);
-
-export function DiagramStoreProvider(
-  props: React.PropsWithChildren<DiagrammingPageProps>,
-) {
-  const store = useRef(createDiagramStore(props));
-
-  return (
-    <DiagramStoreContext.Provider value={store.current}>
-      {props.children}
-    </DiagramStoreContext.Provider>
-  );
-}
-
-export function useDiagramStoreContext() {
-  const store = useContext(DiagramStoreContext);
-  if (!store) throw new Error('DiagramStore context provider not initialized');
-  return store;
-}
-
-
-export function useDiagram<T>(
-  selector?: (state: DiagramStore) => T,
-): T {
-  const store = useDiagramStoreContext();
-
-  // Use Zustand's useStore with the selector and optional equality function
-  return useZustandStore(
-    store,
-    selector!
-  );
-}
-
-export const useDiagramId = (): number =>
-  useDiagram((state: DiagramStore) => state.id);
-
-// Selectors
-export const useDiagramNodes = (): ICardNode[] =>
-  useDiagram((state: DiagramStore) => state.nodes);
-
-export const useDiagramEdges = (): Edge[] =>
-  useDiagram((state) => state.edges);
-
-export const useSelectedNode = (): string | null =>
-  useDiagram((state) => state.selectedNode);
-
-export const useSelectedEdge = (): string | null =>
-  useDiagram((state) => state.selectedEdge);
-
-export const useDiagramType = (): DiagramTypes =>
-  useDiagram((state) => state.diagramType);
-
-export const useEdgeShapeType = (): 'curly' | 'step' =>
-  useDiagram((state) => state.edgeShapeType);
-
-export const useLayoutDirection = (): 'DOWN' | 'RIGHT' =>
-  useDiagram((state) => state.layoutDirection);
-
-export const usePannable = (): boolean =>
-  useDiagram((state) => state.pannable);
-
-export const useContentHeights = (): Array<{ id: string; height: number }> =>
-  useDiagram((state) => state.contentHeights);
-
-export const useHistory = (): HistoryEvent[] =>
-  useDiagram((state) => state.history);
-
-export const useHistoryIndex = (): number =>
-  useDiagram((state) => state.historyIndex);
-
-export const useAvailableFunctions = (): FunctionSignature[] | undefined =>
-  useDiagram((state) => state.availableFunctions);
-
-export const useAvailableVariables = (): AvailableVariable[] | undefined =>
-  useDiagram((state) => state.availableVariables);
-
-export const useAddVariable = () => useDiagram((state) => state.addVariable);
-export const useEditVariable = () => useDiagram((state) => state.editVariable);
-export const useDeleteVariable = () => useDiagram((state) => state.deleteVariable);
-
-export const useWorkflowNodeContent = (): WorkflowNodeContentType | undefined =>
-  useDiagram((state) => state.workflowNodeContent);
-
-export const useRenderAddNodeView = (): RenderAddNodeViewType | undefined =>
-  useDiagram((state) => state.renderAddNodeView);
-
-export const useGetDefaultNodeData = (): ((type: string) => Partial<ICardNodeData>) | undefined =>
-  useDiagram((state) => state.getDefaultNodeData);
-
-export const useDragStartPosition = (): { x: number; y: number } | null =>
-  useDiagram((state) => {
-    if (state.dragStartPosition && state.dragStartPosition.position) {
-      return state.dragStartPosition.position;
-    }
-    return null;
-  });
-// Add these setter selectors to your existing selectors
-
-// Setter for nodes
-export const useSetNodes = (): ((nodes: ICardNode[]) => void) =>
-  useDiagram((state) => state.setNodes);
-
-// Setter for edges
-export const useSetEdges = (): ((edges: Edge[]) => void) =>
-  useDiagram((state) => state.setEdges);
-
-// Setter for selected node
-export const useSetSelectedNode = (): ((value: string | null) => void) =>
-  useDiagram((state) => state.setSelectedNode);
-
-// Setter for selected edge
-export const useSetSelectedEdge = (): ((value: string | null) => void) =>
-  useDiagram((state) => state.setSelectedEdge);
-
-// Setter for pannable
-export const useSetPannable = (): ((value: boolean) => void) =>
-  useDiagram((state) => state.setPannable);
-
-// Setter for diagram type
-export const useSetDiagramType = (): ((diagramType: DiagramTypes) => void) =>
-  useDiagram((state) => state.setDiagramType);
-
-// Setter for edge shape type
-export const useSetEdgeShapeType = (): ((edgeShapeType: 'curly' | 'step') => void) =>
-  useDiagram((state) => state.setEdgeShapeType);
-
-// Setter for layout direction
-export const useSetLayoutDirection = (): ((layoutDirection: 'DOWN' | 'RIGHT') => void) =>
-  useDiagram((state) => state.setLayoutDirection);
-
-// Setter for content height
-export const useSetContentHeight = (): ((id: string, height: number) => void) =>
-  useDiagram((state) => state.setContentHeight);
-
-// Setter for history index
-export const useSetHistoryIndex = (): ((index: number) => void) =>
-  useDiagram((state) => state.goToHistoryIndex);
-
-// Setter for undo stack
-export const useFlushUndoStack = (): (() => void) =>
-  useDiagram((state) => state.flushUndoStack);
-
-// Setter for resetting the store
-export const useResetStore = (): (() => void) =>
-  useDiagram((state) => state.reset);
-
-// Setter for onConnect
-export const useOnConnect = (): ((connection: Connection) => void) =>
-  useDiagram((state) => state.onConnect);
-
-// Setter for onNodesChange
-export const useOnNodesChange = (): ((changes: NodeChange[]) => void) =>
-  useDiagram((state) => state.onNodesChange);
-
-// Setter for onEdgesChange
-export const useOnEdgesChange = (): ((changes: EdgeChange[]) => void) =>
-  useDiagram((state) => state.onEdgesChange);
-
-// Setter for onNodeDragStart
-export const useOnNodeDragStart = (): ((event: React.MouseEvent, node: Node) => void) =>
-  useDiagram((state) => state.onNodeDragStart);
-
-// Setter for onNodeDragEnd
-export const useOnNodeDragEnd = (): ((event: React.MouseEvent, node: Node) => void) =>
-  useDiagram((state) => state.onNodeDragEnd);
-
-export const useConditionBuilderStates = (): ConditionBuilderState =>
-  useDiagram((state) => state.conditionBuilderStates) || { states: [], envVar: [] };
-
-// Add this hook for easy access
-export const useAddFunction = (): ((func: FunctionSignature) => void) =>
-  useDiagram((state) => state.addFunction);
-
-export const useEditFunction = (): ((func: FunctionSignature) => void) =>
-  useDiagram((state) => state.editFunction);
-
-export const useDeleteFunction = (): ((id: string) => void) =>
-  useDiagram((state) => state.deleteFunction);
-
-// Undo/Redo hooks
-export const useUndo = (): (() => void) =>
-  useDiagram((state) => state.undo);
-
-export const useRedo = (): (() => void) =>
-  useDiagram((state) => state.redo);
-
-export const useCanUndo = (): boolean =>
-  useDiagram((state) => state.historyIndex >= 0);
-
-export const useCanRedo = (): boolean =>
+// store.ts
+import React, { createContext, useContext, useMemo, useRef } from 'react';
+import { createStore, useStore as useZustandStore } from 'zustand';
+import { combine, devtools } from 'zustand/middleware';
+import { Connection, Edge, Node, NodeChange, EdgeChange } from '@xyflow/react';
+import DiagramTypes from '../types/diagram-types';
+import { ICardNode } from '../types/card-node';
+import { setPannable } from './setPannable';
+import { setSelectedNode } from './setSelectedNode';
+import { onConnect } from './onConnect';
+import { onReconnect } from './onReconnect';
+import { setNodes } from './setNodes';
+import { setEdges } from './setEdges';
+import { setContentHeight } from './setContentHeight';
+import { setDiagramType } from './setDiagramType';
+import { setEdgeShapeType } from './setEdgeShapeType';
+import { setLayoutDirection } from './setLayoutDirection';
+import { setSelectedEdge } from './setSelectedEdge';
+import { onEdgesChange, onNodesChange } from './onNodesChange';
+import { onNodeDragEnd } from './onNodeDragEnd';
+import {
+  ConditionBuilderState,
+  DiagramActions,
+  DiagramState,
+  DiagramStore,
+  HistoryEvent,
+  RenderAddNodeViewType,
+  WorkflowNodeContentType,
+} from './diagramStoreTypes';
+import { onNodeDragStart } from './onDragStart';
+import { goToHistoryIndex } from './undo';
+import addToHistory from '../utils/addToHistory';
+import { DiagrammingPageProps } from '../templates/Diagramming';
+import { FunctionSignature, FunctionParameter } from '../types/FunctionSignature';
+import { ICardNodeData } from '../types/card-node';
+import { AvailableVariable } from '../types/available-variables';
+
+const createDiagramStore = ({
+  workflowNodeContent,
+  diagramType,
+  defaultNodes,
+  defaultEdges,
+  getDefaultNodeData,
+  availableFunctions,
+  availableVariables,
+  id,
+  renderAddNodeView,
+  onChange,
+  conditionBuilderStates,
+  onNodeSelect,
+  enableNodeJsonPopover,
+}: Omit<DiagrammingPageProps, 'children'>) =>
+  createStore<DiagramStore>()(
+    devtools(
+      combine<DiagramState, DiagramActions>(
+        {
+          id,
+          contentHeights: [] as Array<{ id: string; height: number }>,
+          nodes: defaultNodes,
+          defaultNodes: defaultNodes,
+          defaultEdges: defaultEdges,
+          edges: defaultEdges,
+          availableFunctions,
+          availableVariables,
+          workflowNodeContent,
+          renderAddNodeView,
+          history: [],
+          historyIndex: -1,
+          diagramType,
+          edgeShapeType: 'curly',
+          layoutDirection: diagramType === 'automation' ? 'RIGHT' : 'DOWN',
+          pannable: true,
+          selectedNode: null,
+          selectedEdge: null,
+          getDefaultNodeData,
+          dragStartPosition: null,
+          dragStartPositions: null,
+          conditionBuilderStates: conditionBuilderStates,
+        },
+        (set, get) => ({
+          setStore: set,
+          onNodesChange: onNodesChange(set, get as () => DiagramStore, onChange),
+          onEdgesChange: onEdgesChange(set, get as () => DiagramStore, onChange),
+          undo: () => goToHistoryIndex(set, get as () => DiagramStore, get().historyIndex - 1),
+          redo: () => goToHistoryIndex(set, get as () => DiagramStore, get().historyIndex + 1),
+          applyComplexChange: (nodes: ICardNode[], edges: Edge[], title?: string) => {
+            set((state: DiagramStore) => {
+              const event: HistoryEvent = {
+                title: title || 'Batch change',
+                forward: { t: 'complex-change', type: 'complex', nodesAndEdges: { nodes, edges } },
+                backward: { t: 'complex-change', type: 'complex', nodesAndEdges: { nodes: state.nodes, edges: state.edges } },
+              };
+              return {
+                ...addToHistory(state, [event]),
+                nodes,
+                edges,
+              } as DiagramStore;
+            });
+          },
+          goToHistoryIndex: (index: number) =>
+            goToHistoryIndex(set, get as () => DiagramStore, index),
+          onConnect: (connection: Connection) =>
+            onConnect(set, onChange)(connection),
+          onReconnect: (oldEdge: Edge, newConnection: Connection) => {
+            onReconnect(set, onChange)(oldEdge, newConnection);
+          },
+          setNodes: (nodes: ICardNode[]) => {
+            setNodes(set)(nodes);
+          },
+          setEdges: (edges: Edge[]) => setEdges(set)(edges),
+          setContentHeight: (id: string, height: number) =>
+            setContentHeight(set)(id, height),
+          setDiagramType: (diagramType: DiagramTypes) =>
+            setDiagramType(set)(diagramType),
+          setEdgeShapeType: (edgeShapeType: 'curly' | 'step') =>
+            setEdgeShapeType(set)(edgeShapeType),
+          setLayoutDirection: (layoutDirection: 'DOWN' | 'RIGHT') =>
+            setLayoutDirection(set)(layoutDirection),
+          setPannable: (value: boolean) => setPannable(set)(value),
+          setSelectedNode: (value: string | null) => {
+            setSelectedNode(set)(value);
+            // Notify host application if provided
+            if (onNodeSelect && value) {
+              const node = (get().nodes || []).find((n) => n.id === value);
+              try {
+                onNodeSelect({ nodeId: value, type: node?.type as any, data: node?.data });
+              } catch {
+                // ignore external callback errors
+              }
+            }
+          },
+          setSelectedEdge: (value: string | null) =>
+            setSelectedEdge(set)(value),
+          flushUndoStack: () => set({ history: [] }),
+          onNodeDragEnd: (event: React.MouseEvent, node: Node) =>
+            onNodeDragEnd(set, onChange)(event, node),
+          onNodeDragStart: (event: React.MouseEvent, node: Node) =>
+            onNodeDragStart(set)(event, node),
+          onChange: onChange,
+          onNodeSelect,
+          enableNodeJsonPopover: typeof enableNodeJsonPopover === 'boolean' ? enableNodeJsonPopover : true,
+          reset: () => {
+            set((state: DiagramStore) => {
+              const event: HistoryEvent = {
+                title: 'Clear diagram',
+                forward: {
+                  t: 'complex-change',
+                  type: 'complex',
+                  nodesAndEdges: { nodes: [], edges: [] },
+                },
+                backward: {
+                  t: 'complex-change',
+                  type: 'complex',
+                  nodesAndEdges: { nodes: state.nodes, edges: state.edges },
+                },
+              };
+              return {
+                ...addToHistory(state, [event]),
+                nodes: [],
+                edges: [],
+              } as DiagramStore;
+            });
+          },
+          addFunction: (func: FunctionSignature) => {
+            set((state) => ({
+              availableFunctions: [...(state.availableFunctions || []), func],
+            }));
+          },
+          editFunction: (func: FunctionSignature) => {
+            set((state) => ({
+              availableFunctions: (state.availableFunctions || []).map(f => f.id === func.id ? func : f),
+            }));
+          },
+          deleteFunction: (id: string) => {
+            set((state) => ({
+              availableFunctions: (state.availableFunctions || []).filter(f => f.id !== id),
+            }));
+          },
+          addVariable: (variable: AvailableVariable) => {
+            set((state) => ({
+              availableVariables: [...(state.availableVariables || []), variable],
+            }));
+          },
+          editVariable: (id: string, updates: Partial<AvailableVariable>) => {
+            set((state) => ({
+              availableVariables: (state.availableVariables || []).map(v =>
+                v.id === id ? { ...v, ...updates } : v
+              ),
+            }));
+          },
+          deleteVariable: (id: string) => {
+            set((state) => ({
+              availableVariables: (state.availableVariables || []).filter(v => v.id !== id),
+            }));
+          },
+        }),
+      ),
+    ),
+  );
+
+export const DiagramStoreContext = createContext<ReturnType<
+  typeof createDiagramStore
+> | null>(null);
+
+export function DiagramStoreProvider(
+  props: React.PropsWithChildren<DiagrammingPageProps>,
+) {
+  const store = useRef(createDiagramStore(props));
+
+  return (
+    <DiagramStoreContext.Provider value={store.current}>
+      {props.children}
+    </DiagramStoreContext.Provider>
+  );
+}
+
+export function useDiagramStoreContext() {
+  const store = useContext(DiagramStoreContext);
+  if (!store) throw new Error('DiagramStore context provider not initialized');
+  return store;
+}
+
+
+export function useDiagram<T>(
+  selector?: (state: DiagramStore) => T,
+): T {
+  const store = useDiagramStoreContext();
+
+  // Use Zustand's useStore with the selector and optional equality function
+  return useZustandStore(
+    store,
+    selector!
+  );
+}
+
+export const useDiagramId = (): number =>
+  useDiagram((state: DiagramStore) => state.id);
+
+// Selectors
+export const useDiagramNodes = (): ICardNode[] =>
+  useDiagram((state: DiagramStore) => state.nodes);
+
+export const useDiagramEdges = (): Edge[] =>
+  useDiagram((state) => state.edges);
+
+export const useSelectedNode = (): string | null =>
+  useDiagram((state) => state.selectedNode);
+
+export const useSelectedEdge = (): string | null =>
+  useDiagram((state) => state.selectedEdge);
+
+export const useDiagramType = (): DiagramTypes =>
+  useDiagram((state) => state.diagramType);
+
+export const useEdgeShapeType = (): 'curly' | 'step' =>
+  useDiagram((state) => state.edgeShapeType);
+
+export const useLayoutDirection = (): 'DOWN' | 'RIGHT' =>
+  useDiagram((state) => state.layoutDirection);
+
+export const usePannable = (): boolean =>
+  useDiagram((state) => state.pannable);
+
+export const useContentHeights = (): Array<{ id: string; height: number }> =>
+  useDiagram((state) => state.contentHeights);
+
+export const useHistory = (): HistoryEvent[] =>
+  useDiagram((state) => state.history);
+
+export const useHistoryIndex = (): number =>
+  useDiagram((state) => state.historyIndex);
+
+export const useAvailableFunctions = (): FunctionSignature[] | undefined =>
+  useDiagram((state) => state.availableFunctions);
+
+export const useAvailableVariables = (): AvailableVariable[] | undefined =>
+  useDiagram((state) => state.availableVariables);
+
+export const useAddVariable = () => useDiagram((state) => state.addVariable);
+export const useEditVariable = () => useDiagram((state) => state.editVariable);
+export const useDeleteVariable = () => useDiagram((state) => state.deleteVariable);
+
+export const useWorkflowNodeContent = (): WorkflowNodeContentType | undefined =>
+  useDiagram((state) => state.workflowNodeContent);
+
+export const useRenderAddNodeView = (): RenderAddNodeViewType | undefined =>
+  useDiagram((state) => state.renderAddNodeView);
+
+export const useGetDefaultNodeData = (): ((type: string) => Partial<ICardNodeData>) | undefined =>
+  useDiagram((state) => state.getDefaultNodeData);
+
+export const useDragStartPosition = (): { x: number; y: number } | null =>
+  useDiagram((state) => {
+    if (state.dragStartPosition && state.dragStartPosition.position) {
+      return state.dragStartPosition.position;
+    }
+    return null;
+  });
+// Add these setter selectors to your existing selectors
+
+// Setter for nodes
+export const useSetNodes = (): ((nodes: ICardNode[]) => void) =>
+  useDiagram((state) => state.setNodes);
+
+// Setter for edges
+export const useSetEdges = (): ((edges: Edge[]) => void) =>
+  useDiagram((state) => state.setEdges);
+
+// Setter for selected node
+export const useSetSelectedNode = (): ((value: string | null) => void) =>
+  useDiagram((state) => state.setSelectedNode);
+
+// Setter for selected edge
+export const useSetSelectedEdge = (): ((value: string | null) => void) =>
+  useDiagram((state) => state.setSelectedEdge);
+
+// Setter for pannable
+export const useSetPannable = (): ((value: boolean) => void) =>
+  useDiagram((state) => state.setPannable);
+
+// Setter for diagram type
+export const useSetDiagramType = (): ((diagramType: DiagramTypes) => void) =>
+  useDiagram((state) => state.setDiagramType);
+
+// Setter for edge shape type
+export const useSetEdgeShapeType = (): ((edgeShapeType: 'curly' | 'step') => void) =>
+  useDiagram((state) => state.setEdgeShapeType);
+
+// Setter for layout direction
+export const useSetLayoutDirection = (): ((layoutDirection: 'DOWN' | 'RIGHT') => void) =>
+  useDiagram((state) => state.setLayoutDirection);
+
+// Setter for content height
+export const useSetContentHeight = (): ((id: string, height: number) => void) =>
+  useDiagram((state) => state.setContentHeight);
+
+// Setter for history index
+export const useSetHistoryIndex = (): ((index: number) => void) =>
+  useDiagram((state) => state.goToHistoryIndex);
+
+// Setter for undo stack
+export const useFlushUndoStack = (): (() => void) =>
+  useDiagram((state) => state.flushUndoStack);
+
+// Setter for resetting the store
+export const useResetStore = (): (() => void) =>
+  useDiagram((state) => state.reset);
+
+// Setter for onConnect
+export const useOnConnect = (): ((connection: Connection) => void) =>
+  useDiagram((state) => state.onConnect);
+
+// Setter for onNodesChange
+export const useOnNodesChange = (): ((changes: NodeChange[]) => void) =>
+  useDiagram((state) => state.onNodesChange);
+
+// Setter for onEdgesChange
+export const useOnEdgesChange = (): ((changes: EdgeChange[]) => void) =>
+  useDiagram((state) => state.onEdgesChange);
+
+// Setter for onNodeDragStart
+export const useOnNodeDragStart = (): ((event: React.MouseEvent, node: Node) => void) =>
+  useDiagram((state) => state.onNodeDragStart);
+
+// Setter for onNodeDragEnd
+export const useOnNodeDragEnd = (): ((event: React.MouseEvent, node: Node) => void) =>
+  useDiagram((state) => state.onNodeDragEnd);
+
+export const useConditionBuilderStates = (): ConditionBuilderState =>
+  useDiagram((state) => state.conditionBuilderStates) || { states: [], envVar: [] };
+
+// Add this hook for easy access
+export const useAddFunction = (): ((func: FunctionSignature) => void) =>
+  useDiagram((state) => state.addFunction);
+
+export const useEditFunction = (): ((func: FunctionSignature) => void) =>
+  useDiagram((state) => state.editFunction);
+
+export const useDeleteFunction = (): ((id: string) => void) =>
+  useDiagram((state) => state.deleteFunction);
+
+// Undo/Redo hooks
+export const useUndo = (): (() => void) =>
+  useDiagram((state) => state.undo);
+
+export const useRedo = (): (() => void) =>
+  useDiagram((state) => state.redo);
+
+export const useCanUndo = (): boolean =>
+  useDiagram((state) => state.historyIndex >= 0);
+
+export const useCanRedo = (): boolean =>
   useDiagram((state) => state.historyIndex < state.history.length - 1);