@flowuent-org/diagramming-core 1.3.10 → 1.4.1

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

@@ -1,134 +1,134 @@
-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;
-  dragStartPositions: Record<string, { x: number; y: number }> | 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;
-  onReconnect: (oldEdge: Edge, newConnection: 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[];
-}
+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;
+  dragStartPositions: Record<string, { x: number; y: number }> | 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;
+  onReconnect: (oldEdge: Edge, newConnection: 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

@@ -1,39 +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',
-      });
-    }
-  };
+// 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

@@ -1,45 +1,45 @@
-// 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,
-      };
-
-      // Store initial positions for ALL selected nodes (for multi-node dragging)
-      // Get selected nodes from state.nodes (they should have selected property set by ReactFlow)
-      const selectedNodes = state.nodes.filter(n => (n as any).selected);
-      let dragStartPositions: Record<string, { x: number; y: number }> | null = null;
-      
-      if (selectedNodes.length > 1) {
-        // Multiple nodes are selected - store all their initial positions
-        dragStartPositions = {};
-        selectedNodes.forEach(selectedNode => {
-          dragStartPositions![selectedNode.id] = {
-            x: selectedNode.position.x,
-            y: selectedNode.position.y,
-          };
-        });
-      }
-
-      return {
-        ...state,
-        dragStartPosition: changeForUndo,
-        dragStartPositions: dragStartPositions || null,
-      };
-    });
-  };
+// 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,
+      };
+
+      // Store initial positions for ALL selected nodes (for multi-node dragging)
+      // Get selected nodes from state.nodes (they should have selected property set by ReactFlow)
+      const selectedNodes = state.nodes.filter(n => (n as any).selected);
+      let dragStartPositions: Record<string, { x: number; y: number }> | null = null;
+      
+      if (selectedNodes.length > 1) {
+        // Multiple nodes are selected - store all their initial positions
+        dragStartPositions = {};
+        selectedNodes.forEach(selectedNode => {
+          dragStartPositions![selectedNode.id] = {
+            x: selectedNode.position.x,
+            y: selectedNode.position.y,
+          };
+        });
+      }
+
+      return {
+        ...state,
+        dragStartPosition: changeForUndo,
+        dragStartPositions: dragStartPositions || null,
+      };
+    });
+  };