@principal-ai/principal-view-react 0.13.22 → 0.13.23

package/dist/components/GraphRenderer.d.ts

@@ -64,6 +64,14 @@ export interface GraphRendererHandle {
     resetEditState: () => void;
     /** Check if there are unsaved changes */
     hasUnsavedChanges: () => boolean;
+    /** Whether there are changes that can be undone */
+    canUndo: () => boolean;
+    /** Whether there are changes that can be redone */
+    canRedo: () => boolean;
+    /** Undo the last change */
+    undo: () => void;
+    /** Redo the last undone change */
+    redo: () => void;
 }
 /** Base props shared by all render modes */
 interface GraphRendererBaseProps {

package/dist/components/GraphRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GraphRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GraphRenderer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"GraphRenderer.d.ts","sourceRoot":"","sources":["../../src/components/GraphRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/components/GraphRenderer.js

@@ -8,6 +8,7 @@ import { CustomNode } from '../nodes/CustomNode';
 import { CustomEdge } from '../edges/CustomEdge';
 import { convertToXYFlowNodes, convertToXYFlowEdges, } from '../utils/graphConverter';
 import { GraphEditProvider } from '../contexts/GraphEditContext';
+import { useUndoRedo } from '../hooks/useUndoRedo';
 /**
  * Context for providing a portal target for tooltips.
  * This allows tooltips to be rendered within the graph container
@@ -85,7 +86,7 @@ const CenterIndicator = ({ color }) => {
 /**
  * Inner component that uses ReactFlow hooks
  */
-const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = 'lines', backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, }) => {
+const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges, violations = [], configName: _configName, showMinimap = false, showControls = true, showBackground = true, backgroundVariant = 'lines', backgroundGap, showCenterIndicator = false, showTooltips = true, fitViewDuration = 200, highlightedNodeId, activeNodeIds, events = [], onEventProcessed, editable = false, onPendingChangesChange, onEditStateChange, editStateRef, resetVisualStateRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, }) => {
     const { fitView, fitBounds, getNodes } = useReactFlow();
     const updateNodeInternals = useUpdateNodeInternals();
     const { theme } = useTheme();
@@ -201,6 +202,8 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             onPendingChangesChange?.(false);
             // Clear animation state to prevent stale animations from affecting new edges
             setAnimationState({ nodeAnimations: {}, edgeAnimations: {} });
+            // Clear undo/redo history when props change
+            clearHistory();
         }
     }, [propNodes, propEdges, editStateRef, onEditStateChange, onPendingChangesChange]);
     // When draggableNodeIds is provided, positions are managed externally
@@ -219,6 +222,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // and receives state_changed event updates. localEdges only used in edit mode.
     const nodes = localNodes;
     const edges = editable ? localEdges : propEdges;
+    // Ref to track current xyflow nodes for undo/redo (set later via useEffect)
+    const xyflowNodesRef = useRef([]);
+    // Ref to capture node positions at drag start (for accurate undo "before" values)
+    const dragStartPositionsRef = useRef(new Map());
     // Helper to check if there are pending changes
     const checkHasChanges = useCallback((state) => {
         return (state.positionChanges.size > 0 ||
@@ -249,12 +256,26 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const handleNodeResizeEnd = useCallback((nodeId, dimensions) => {
         if (!editable)
             return;
+        // Capture before dimensions for undo
+        const currentNode = xyflowNodesRef.current.find((n) => n.id === nodeId);
+        const beforeDimensions = currentNode
+            ? { width: currentNode.width ?? 0, height: currentNode.height ?? 0 }
+            : { width: 0, height: 0 };
+        // Push to history
+        pushHistory([
+            {
+                type: 'dimension',
+                nodeId,
+                before: beforeDimensions,
+                after: dimensions,
+            },
+        ]);
         updateEditState((prev) => {
             const newDimensions = new Map(prev.dimensionChanges);
             newDimensions.set(nodeId, dimensions);
             return { ...prev, dimensionChanges: newDimensions };
         });
-    }, [editable, updateEditState]);
+    }, [editable, updateEditState, pushHistory]);
     // Memoize the context value to prevent unnecessary re-renders
     const graphEditContextValue = useMemo(() => ({
         onNodeResizeEnd: handleNodeResizeEnd,
@@ -506,6 +527,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // Create edge helper
     const createEdge = useCallback((from, to, type, sourceHandle, targetHandle) => {
         const edgeId = `${from}-${to}-${type}-${Date.now()}`;
+        const now = Date.now();
         // Add to local state with handle information
         const newEdge = {
             id: edgeId,
@@ -513,12 +535,19 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             from,
             to,
             data: {},
-            createdAt: Date.now(),
-            updatedAt: Date.now(),
+            createdAt: now,
+            updatedAt: now,
             sourceHandle,
             targetHandle,
         };
         setLocalEdges((prev) => [...prev, newEdge]);
+        // Push to history for undo
+        pushHistory([
+            {
+                type: 'edgeCreate',
+                edge: newEdge,
+            },
+        ]);
         // Track the change
         updateEditState((prev) => ({
             ...prev,
@@ -527,7 +556,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 { id: edgeId, from, to, type, sourceHandle, targetHandle },
             ],
         }));
-    }, [updateEditState]);
+    }, [updateEditState, pushHistory]);
     // Handle new connection from drag
     const handleConnect = useCallback((connection) => {
         if (!editable || !connection.source || !connection.target)
@@ -852,6 +881,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, [edges]);
     // Local xyflow nodes state for dragging
     const [xyflowLocalNodes, setXyflowLocalNodes] = useState(xyflowNodesBase);
+    // Keep xyflowNodesRef in sync for undo/redo access to current node state
+    useEffect(() => {
+        xyflowNodesRef.current = xyflowLocalNodes;
+    }, [xyflowLocalNodes]);
     // Sync when base node IDs change
     const prevBaseNodesKeyRef = useRef(baseNodesKey);
     useEffect(() => {
@@ -930,6 +963,165 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             onNodeDragStopProp(node.id, node.position);
         }
     }, [onNodeDragStopProp]);
+    // ============================================
+    // UNDO/REDO APPLY FUNCTIONS
+    // ============================================
+    // Apply undo - reverse the effects of history entries
+    const applyUndo = useCallback(() => {
+        const batch = undoFromStack();
+        if (!batch)
+            return;
+        // Process entries in reverse order for undo
+        for (const entry of batch.slice().reverse()) {
+            switch (entry.type) {
+                case 'position':
+                    // Restore previous position
+                    setXyflowLocalNodes((nodes) => nodes.map((n) => n.id === entry.nodeId
+                        ? { ...n, position: entry.before }
+                        : n));
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newPositions = new Map(prev.positionChanges);
+                        newPositions.set(entry.nodeId, entry.before);
+                        return { ...prev, positionChanges: newPositions };
+                    });
+                    break;
+                case 'dimension':
+                    // Restore previous dimensions
+                    setXyflowLocalNodes((nodes) => nodes.map((n) => n.id === entry.nodeId
+                        ? { ...n, width: entry.before.width, height: entry.before.height }
+                        : n));
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newDimensions = new Map(prev.dimensionChanges);
+                        newDimensions.set(entry.nodeId, entry.before);
+                        return { ...prev, dimensionChanges: newDimensions };
+                    });
+                    break;
+                case 'edgeCreate':
+                    // Remove the created edge
+                    setLocalEdges((edges) => edges.filter((e) => e.id !== entry.edge.id));
+                    // Update edit state
+                    updateEditState((prev) => ({
+                        ...prev,
+                        createdEdges: prev.createdEdges.filter((e) => e.id !== entry.edge.id),
+                    }));
+                    break;
+                case 'edgeDelete':
+                    // Restore the deleted edge
+                    setLocalEdges((edges) => [...edges, entry.edge]);
+                    // Update edit state
+                    updateEditState((prev) => ({
+                        ...prev,
+                        deletedEdges: prev.deletedEdges.filter((e) => e.id !== entry.edge.id),
+                    }));
+                    break;
+            }
+        }
+    }, [undoFromStack, updateEditState]);
+    // Apply redo - re-apply the effects of history entries
+    const applyRedo = useCallback(() => {
+        const batch = redoFromStack();
+        if (!batch)
+            return;
+        // Process entries in original order for redo
+        for (const entry of batch) {
+            switch (entry.type) {
+                case 'position':
+                    // Apply new position
+                    setXyflowLocalNodes((nodes) => nodes.map((n) => n.id === entry.nodeId
+                        ? { ...n, position: entry.after }
+                        : n));
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newPositions = new Map(prev.positionChanges);
+                        newPositions.set(entry.nodeId, entry.after);
+                        return { ...prev, positionChanges: newPositions };
+                    });
+                    break;
+                case 'dimension':
+                    // Apply new dimensions
+                    setXyflowLocalNodes((nodes) => nodes.map((n) => n.id === entry.nodeId
+                        ? { ...n, width: entry.after.width, height: entry.after.height }
+                        : n));
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newDimensions = new Map(prev.dimensionChanges);
+                        newDimensions.set(entry.nodeId, entry.after);
+                        return { ...prev, dimensionChanges: newDimensions };
+                    });
+                    break;
+                case 'edgeCreate':
+                    // Re-create the edge
+                    setLocalEdges((edges) => [...edges, entry.edge]);
+                    // Update edit state
+                    updateEditState((prev) => ({
+                        ...prev,
+                        createdEdges: [
+                            ...prev.createdEdges,
+                            {
+                                id: entry.edge.id,
+                                from: entry.edge.from,
+                                to: entry.edge.to,
+                                type: entry.edge.type,
+                                sourceHandle: entry.edge.sourceHandle,
+                                targetHandle: entry.edge.targetHandle,
+                            },
+                        ],
+                    }));
+                    break;
+                case 'edgeDelete':
+                    // Re-delete the edge
+                    setLocalEdges((edges) => edges.filter((e) => e.id !== entry.edge.id));
+                    // Update edit state
+                    updateEditState((prev) => ({
+                        ...prev,
+                        deletedEdges: [
+                            ...prev.deletedEdges,
+                            {
+                                id: entry.edge.id,
+                                from: entry.edge.from,
+                                to: entry.edge.to,
+                                type: entry.edge.type,
+                            },
+                        ],
+                    }));
+                    break;
+            }
+        }
+    }, [redoFromStack, updateEditState]);
+    // Keyboard shortcuts for undo/redo
+    useEffect(() => {
+        if (!editable)
+            return;
+        const handleKeyDown = (e) => {
+            // Cmd+Z (Mac) or Ctrl+Z (Windows/Linux) for undo
+            if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+                e.preventDefault();
+                if (e.shiftKey) {
+                    // Cmd+Shift+Z for redo
+                    applyRedo();
+                }
+                else {
+                    applyUndo();
+                }
+            }
+            // Ctrl+Y for redo (Windows)
+            if (e.ctrlKey && e.key === 'y') {
+                e.preventDefault();
+                applyRedo();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [editable, applyUndo, applyRedo]);
+    // Set undo/redo functions in ref for outer component access
+    useEffect(() => {
+        undoRedoFunctionsRef.current = {
+            applyUndo,
+            applyRedo,
+        };
+    }, [applyUndo, applyRedo, undoRedoFunctionsRef]);
     // Handle node changes (drag and resize events)
     const handleNodesChange = useCallback((changes) => {
         const hasDraggableNodes = draggableNodeIds && draggableNodeIds.size > 0;
@@ -994,8 +1186,26 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 }));
             });
         }
-        // Track position changes on drag end
+        // Capture positions at drag START for accurate undo "before" values
+        const dragStartChanges = changes.filter((change) => change.type === 'position' &&
+            'id' in change &&
+            'dragging' in change &&
+            change.dragging === true);
+        // For each node that just started dragging, capture its current position
+        for (const change of dragStartChanges) {
+            if (!dragStartPositionsRef.current.has(change.id)) {
+                const currentNode = xyflowNodesRef.current.find((n) => n.id === change.id);
+                if (currentNode) {
+                    dragStartPositionsRef.current.set(change.id, {
+                        x: currentNode.position.x,
+                        y: currentNode.position.y,
+                    });
+                }
+            }
+        }
+        // Track position changes on drag END
         const positionChanges = changes.filter((change) => change.type === 'position' &&
+            'id' in change &&
             'position' in change &&
             change.position !== undefined &&
             'dragging' in change &&
@@ -1003,6 +1213,23 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
         // Note: Dimension changes are tracked via onResizeEnd callback in GraphEditContext,
         // not through onNodesChange (which only fires with resizing=true during drag).
         if (positionChanges.length > 0) {
+            // Use positions captured at drag start for accurate undo
+            const historyEntries = [];
+            for (const change of positionChanges) {
+                const beforePos = dragStartPositionsRef.current.get(change.id) ?? { x: 0, y: 0 };
+                historyEntries.push({
+                    type: 'position',
+                    nodeId: change.id,
+                    before: beforePos,
+                    after: {
+                        x: Math.round(change.position.x),
+                        y: Math.round(change.position.y),
+                    },
+                });
+                // Clear the drag start position for this node
+                dragStartPositionsRef.current.delete(change.id);
+            }
+            pushHistory(historyEntries);
             updateEditState((prev) => {
                 const newPositions = new Map(prev.positionChanges);
                 for (const change of positionChanges) {
@@ -1014,7 +1241,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 return { ...prev, positionChanges: newPositions };
             });
         }
-    }, [editable, updateEditState, selectedNodeIds, draggableNodeIds]);
+    }, [editable, updateEditState, selectedNodeIds, draggableNodeIds, pushHistory]);
     const xyflowEdgesBase = useMemo(() => {
         const converted = convertToXYFlowEdges(edges, configuration, violations);
         // Filter out edges connected to inactive or hidden nodes
@@ -1378,6 +1605,10 @@ export const GraphRenderer = forwardRef((props, ref) => {
     const editStateRef = useRef(createEmptyEditState());
     // Ref to hold the reset visual state function - will be set after xyflowLocalNodes is defined
     const resetVisualStateRef = useRef(null);
+    // Undo/redo management
+    const { canUndo: canUndoState, canRedo: canRedoState, undo: undoFromStack, redo: redoFromStack, pushHistory, clearHistory, } = useUndoRedo();
+    // Ref to hold undo/redo apply functions - will be set by inner component
+    const undoRedoFunctionsRef = useRef(null);
     // Expose imperative handle - must be before any conditional returns
     useImperativeHandle(ref, () => ({
         getPendingChanges: () => {
@@ -1416,6 +1647,8 @@ export const GraphRenderer = forwardRef((props, ref) => {
             editStateRef.current = createEmptyEditState();
             // Also reset visual state (node positions/dimensions) if available
             resetVisualStateRef.current?.();
+            // Clear undo/redo history
+            clearHistory();
         },
         hasUnsavedChanges: () => {
             const state = editStateRef.current;
@@ -1426,7 +1659,11 @@ export const GraphRenderer = forwardRef((props, ref) => {
                 state.createdEdges.length > 0 ||
                 state.deletedEdges.length > 0);
         },
-    }), []);
+        canUndo: () => canUndoState,
+        canRedo: () => canRedoState,
+        undo: () => undoRedoFunctionsRef.current?.applyUndo(),
+        redo: () => undoRedoFunctionsRef.current?.applyRedo(),
+    }), [canUndoState, canRedoState, clearHistory]);
     // Validate we have required data
     if (!canvasData) {
         return (_jsx("div", { className: className, style: {
@@ -1442,7 +1679,7 @@ export const GraphRenderer = forwardRef((props, ref) => {
     const { configuration, nodes, edges } = canvasData;
     // Extract only the props that inner component needs
     const { violations, configName, showMinimap, showControls, showBackground, backgroundVariant, backgroundGap, showCenterIndicator, showTooltips, fitViewDuration, highlightedNodeId, activeNodeIds, events, onEventProcessed, editable, onPendingChangesChange, onNodeClick, fitViewToNodeIds, fitViewPadding, draggableNodeIds, onNodeDragStop, onCopy, } = props;
-    return (_jsx("div", { ref: containerRef, className: className, style: { width, height, position: 'relative' }, children: _jsx(TooltipPortalContext.Provider, { value: portalTarget, children: _jsx(ReactFlowProvider, { children: _jsx(GraphRendererInner, { configuration: configuration, nodes: nodes, edges: edges, violations: violations, configName: configName, showMinimap: showMinimap, showControls: showControls, showBackground: showBackground, backgroundVariant: backgroundVariant, backgroundGap: backgroundGap, showCenterIndicator: showCenterIndicator, showTooltips: showTooltips, fitViewDuration: fitViewDuration, highlightedNodeId: highlightedNodeId, activeNodeIds: activeNodeIds, events: events, onEventProcessed: onEventProcessed, editable: editable, onPendingChangesChange: onPendingChangesChange, editStateRef: editStateRef, resetVisualStateRef: resetVisualStateRef, onNodeClick: onNodeClick, fitViewToNodeIds: fitViewToNodeIds, fitViewPadding: fitViewPadding, draggableNodeIds: draggableNodeIds, onNodeDragStop: onNodeDragStop, onCopy: onCopy }) }) }) }));
+    return (_jsx("div", { ref: containerRef, className: className, style: { width, height, position: 'relative' }, children: _jsx(TooltipPortalContext.Provider, { value: portalTarget, children: _jsx(ReactFlowProvider, { children: _jsx(GraphRendererInner, { configuration: configuration, nodes: nodes, edges: edges, violations: violations, configName: configName, showMinimap: showMinimap, showControls: showControls, showBackground: showBackground, backgroundVariant: backgroundVariant, backgroundGap: backgroundGap, showCenterIndicator: showCenterIndicator, showTooltips: showTooltips, fitViewDuration: fitViewDuration, highlightedNodeId: highlightedNodeId, activeNodeIds: activeNodeIds, events: events, onEventProcessed: onEventProcessed, editable: editable, onPendingChangesChange: onPendingChangesChange, editStateRef: editStateRef, resetVisualStateRef: resetVisualStateRef, undoRedoFunctionsRef: undoRedoFunctionsRef, pushHistory: pushHistory, clearHistory: clearHistory, undoFromStack: undoFromStack, redoFromStack: redoFromStack, onNodeClick: onNodeClick, fitViewToNodeIds: fitViewToNodeIds, fitViewPadding: fitViewPadding, draggableNodeIds: draggableNodeIds, onNodeDragStop: onNodeDragStop, onCopy: onCopy }) }) }) }));
 });
 GraphRenderer.displayName = 'GraphRenderer';
 //# sourceMappingURL=GraphRenderer.js.map