@flowuent-org/diagramming-core 1.0.5

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

@@ -0,0 +1,375 @@
+// 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 { 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: '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),
+          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);

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

@@ -0,0 +1,132 @@
+import {
+  Connection,
+  Edge,
+  EdgeChange,
+  EdgeReplaceChange,
+  NodeChange,
+  NodeReplaceChange,
+  Node,
+} from '@xyflow/react';
+import { ICardNode, ICardNodeData } from '../types/card-node';
+import DiagramTypes from '../types/diagram-types';
+// import { CardNodeContextType } from './CardDataProvider';
+import { FunctionSignature } from '../types/FunctionSignature';
+import { Option } from '../atoms/ContentAssist';
+import React from 'react';
+import { AvailableVariable } from '../types/available-variables';
+
+export type NodesAndEdges = { nodes: ICardNode[]; edges: Edge[] };
+export type ComplexChange = { type: 'complex'; nodesAndEdges: NodesAndEdges };
+export type Change = (
+  | (NodeChange & { t: 'node-change' })
+  | (EdgeChange & { t: 'edge-change' })
+  | (ComplexChange & { t: 'complex-change' })
+) & { message?: string; differences?: Record<string, { oldValue: unknown; newValue: unknown }> };
+
+export type UndoRedoChange = Change;
+
+// Specific type for drag start position that includes position property
+export type DragStartPosition = {
+  t: 'node-change';
+  type: 'position';
+  id: string;
+  message: string;
+  position: { x: number; y: number };
+  positionAbsolute: { x: number; y: number };
+};
+
+export type OnChangeEventHandler = ((change: Change) => void) | undefined;
+export type EdgeShapeTypes = 'curly' | 'step';
+export type LayoutDirection = 'DOWN' | 'RIGHT';
+
+export type NodeSettingKey = 'isAdding' | 'isEditingTitle';
+
+export interface NodeSettings {
+  isAdding: boolean;
+  isEditingTitle: boolean;
+}
+
+export type WorkflowNodeContentType = (
+  data: ICardNodeData,
+  setNodeData: (data: ICardNodeData) => void,
+) => React.ReactNode;
+
+export type RenderAddNodeViewType = (
+  addNode: (type: string) => void,
+  open: boolean,
+  setOpen: (open: boolean) => void,
+) => React.ReactNode;
+export type GetDefaultNodeDataType = (type: string) => Partial<ICardNodeData>;
+
+export interface DiagramState {
+  availableFunctions?: FunctionSignature[];
+  availableVariables?: AvailableVariable[];
+  id: number;
+  contentHeights: Array<{ id: string; height: number }>;
+  nodes: ICardNode[];
+  defaultNodes: ICardNode[];
+  dragStartPosition: DragStartPosition | null;
+  edges: Edge[];
+  defaultEdges: Edge[];
+  history: HistoryEvent[];
+  historyIndex: number;
+  workflowNodeContent?: WorkflowNodeContentType;
+  renderAddNodeView?: RenderAddNodeViewType;
+  getDefaultNodeData?: GetDefaultNodeDataType;
+  diagramType: DiagramTypes;
+  edgeShapeType: EdgeShapeTypes;
+  layoutDirection: LayoutDirection;
+  pannable: boolean;
+  selectedNode: string | null;
+  selectedEdge: string | null;
+  conditionBuilderStates?: ConditionBuilderState;
+  // Host-app integration
+  onNodeSelect?: (payload: { nodeId: string; type?: string; data?: any }) => void;
+  enableNodeJsonPopover?: boolean;
+}
+
+export interface DiagramActions {
+  setStore: (store: DiagramState) => void;
+  onNodesChange: (changes: NodeChange[]) => void;
+  onEdgesChange: (changes: EdgeChange[]) => void;
+  onConnect: (connection: Connection) => void;
+  setNodes: (nodes: ICardNode[]) => void;
+  setEdges: (edges: Edge[]) => void;
+  setContentHeight: (id: string, height: number) => void;
+  undo: () => void;
+  redo: () => void;
+  applyComplexChange: (nodes: ICardNode[], edges: Edge[], title?: string) => void;
+  setDiagramType: (diagramType: DiagramTypes) => void;
+  setEdgeShapeType: (edgeShapeType: EdgeShapeTypes) => void;
+  setLayoutDirection: (layoutDirection: LayoutDirection) => void;
+  setPannable: (value: boolean) => void;
+  setSelectedNode: (value: string | null) => void;
+  setSelectedEdge: (value: string | null) => void;
+  onNodeDragEnd: (event: React.MouseEvent, node: Node) => void; // Updated type
+  onNodeDragStart: (event: React.MouseEvent, node: Node) => void; // Updated type
+  flushUndoStack: () => void; // New method
+  goToHistoryIndex: (index: number) => void;
+  onChange: OnChangeEventHandler;
+  reset: () => void;
+  addFunction: (func: FunctionSignature) => void;
+  editFunction: (func: FunctionSignature) => void;
+  deleteFunction: (id: string) => void;
+  addVariable: (variable: AvailableVariable) => void;
+  editVariable: (id: string, updates: Partial<AvailableVariable>) => void;
+  deleteVariable: (id: string) => void;
+}
+
+export type DiagramStore = DiagramState & DiagramActions;
+export type HistoryEvent = {
+  forward: UndoRedoChange;
+  backward: UndoRedoChange;
+  title: string;
+};
+
+export type ResetChange = NodeReplaceChange | EdgeReplaceChange;
+export type FlowElement = ICardNode | Edge;
+
+export interface ConditionBuilderState {
+  states: Option[];
+  envVar: Option[];
+}

package/packages/diagrams/src/lib/contexts/onConnect.ts

@@ -0,0 +1,39 @@
+// onConnect.ts
+import { Connection, Edge } from '@xyflow/react';
+import { ICardNode } from '../types/card-node';
+import { DiagramStore, OnChangeEventHandler } from './diagramStoreTypes';
+
+export const onConnect =
+  (
+    set: (fn: (state: DiagramStore) => DiagramStore) => void,
+    onChange?: OnChangeEventHandler,
+  ) =>
+  (connection: Connection) => {
+    if (!connection.source || !connection.target) return;
+
+    const newEdge: Edge = {
+      id: `${connection.source}-${connection.target}`,
+      source: connection.source,
+      target: connection.target,
+      sourceHandle: connection.sourceHandle || null,
+      targetHandle: connection.targetHandle || null,
+      type: 'smoothstep',
+      data: {
+        label: '',
+      },
+    };
+
+    set((state) => {
+      const updatedEdges = [...state.edges, newEdge];
+      return { ...state, edges: updatedEdges };
+    });
+
+    if (onChange) {
+      onChange({
+        t: 'edge-change',
+        type: 'add',
+        item: newEdge,
+        message: 'Edge connected',
+      });
+    }
+  };

package/packages/diagrams/src/lib/contexts/onDragStart.ts

@@ -0,0 +1,28 @@
+// diagramHandlers/onNodeDragStart.ts
+
+import { ICardNode } from '../types/card-node';
+import { DragStartPosition } from './diagramStoreTypes';
+import { DiagramStore } from './diagramStoreTypes';
+import React from 'react';
+import { Node } from '@xyflow/react';
+
+export const onNodeDragStart =
+  (set: (fn: (state: DiagramStore) => DiagramStore) => void) =>
+  (_: React.MouseEvent, node: Node) => {
+    const cardNode = node as ICardNode;
+    set((state: DiagramStore) => {
+      const changeForUndo: DragStartPosition = {
+        t: 'node-change',
+        type: 'position',
+        id: cardNode.id,
+        message: 'Drag started',
+        position: cardNode.position,
+        positionAbsolute: cardNode.position,
+      };
+
+      return {
+        ...state,
+        dragStartPosition: changeForUndo,
+      };
+    });
+  };

package/packages/diagrams/src/lib/contexts/onNodeDragEnd.ts

@@ -0,0 +1,85 @@
+// onNodeDragEnd.ts
+import { ICardNode } from '../types/card-node';
+import {
+  DiagramStore,
+  HistoryEvent,
+  OnChangeEventHandler,
+} from './diagramStoreTypes';
+import addToHistory from '../utils/addToHistory';
+import React from 'react';
+import { Node } from '@xyflow/react';
+
+export const onNodeDragEnd =
+  (
+    set: (fn: (state: DiagramStore) => DiagramStore) => void,
+    onChange?: OnChangeEventHandler,
+  ) =>
+  (_: React.MouseEvent, node: Node) => {
+    const cardNode = node as ICardNode;
+    set((state: DiagramStore) => {
+      const dragStartPosition = state.dragStartPosition;
+
+      // If there's no drag start position, just return the state unchanged
+      if (!dragStartPosition) {
+        return state;
+      }
+
+      // Check if the node has moved
+      if (
+        dragStartPosition.position.x !== cardNode.position.x ||
+        dragStartPosition.position.y !== cardNode.position.y
+      ) {
+        const updatedNodes = state.nodes.map((n) =>
+          n.id === cardNode.id
+            ? { ...n, data: { ...n.data, isPinned: true } }
+            : n,
+        );
+
+        // Create the HistoryEvent entry with forward and backward changes
+        const historyEvent: HistoryEvent = {
+          title: `Node '${cardNode.id}' moved from (${dragStartPosition.position.x.toFixed(1)}, ${dragStartPosition.position.y.toFixed(1)}) to (${cardNode.position.x.toFixed(1)}, ${cardNode.position.y.toFixed(1)})`,
+
+          // Backward change for undo
+          backward: {
+            t: 'node-change',
+            type: 'position',
+            id: cardNode.id,
+            message: `Revert: Node '${cardNode.id}' position back to (${dragStartPosition.position.x.toFixed(1)}, ${dragStartPosition.position.y.toFixed(1)})`,
+            position: dragStartPosition.position,
+            positionAbsolute: dragStartPosition.position,
+          },
+
+          // Forward change for redo
+          forward: {
+            t: 'node-change',
+            type: 'position',
+            id: cardNode.id,
+            message: `Redo: Node '${cardNode.id}' moved to (${cardNode.position.x}, ${cardNode.position.y})`,
+            position: cardNode.position,
+            positionAbsolute: cardNode.position,
+          },
+        };
+
+        // Trigger onChange callback if provided
+        if (onChange) {
+          onChange({
+            t: 'node-change',
+            type: 'position',
+            id: cardNode.id,
+            position: cardNode.position,
+            positionAbsolute: cardNode.position,
+            message: historyEvent.title,
+          });
+        }
+
+        return {
+          ...addToHistory(state, [historyEvent]),
+          dragStartPosition: null, // Clear the drag start position
+          nodes: updatedNodes,
+        };
+      }
+
+      // If no movement occurred, just reset dragStartPosition without updating history
+      return { ...state, dragStartPosition: null };
+    });
+  };