@principal-ai/principal-view-react 0.15.1 → 0.15.3

package/dist/components/GraphRenderer.d.ts

@@ -18,12 +18,19 @@ export interface NodeDimensionChange {
         height: number;
     };
 }
+/** Text change event for tracking inline text edits */
+export interface NodeTextChange {
+    nodeId: string;
+    text: string;
+}
 /** All pending changes that can be saved */
 export interface PendingChanges {
     /** Node position changes */
     positionChanges: NodePositionChange[];
     /** Node dimension changes (from resizing) */
     dimensionChanges: NodeDimensionChange[];
+    /** Text changes for text and group nodes */
+    textChanges: NodeTextChange[];
     /** Node updates (type, data changes) */
     nodeUpdates: Array<{
         nodeId: string;

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

@@ -24,6 +24,7 @@ const edgeTypes = { custom: CustomEdge };
 const createEmptyEditState = () => ({
     positionChanges: new Map(),
     dimensionChanges: new Map(),
+    textChanges: new Map(),
     nodeUpdates: new Map(),
     deletedNodeIds: new Set(),
     createdEdges: [],
@@ -84,12 +85,14 @@ 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, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, initialViewport, elkLayout, scenarioEdges, showSequenceLabels = true, }) => {
+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, resetTextChangesVersionRef, undoRedoFunctionsRef, pushHistory, clearHistory, undoFromStack, redoFromStack, onNodeClick: onNodeClickProp, fitViewToNodeIds, fitViewPadding = 0.2, draggableNodeIds, onNodeDragStop: onNodeDragStopProp, onCopy, initialViewport, elkLayout, scenarioEdges, showSequenceLabels = true, }) => {
     const { fitView, fitBounds, getNodes } = useReactFlow();
     const updateNodeInternals = useUpdateNodeInternals();
     const { theme } = useTheme();
     // Track shift key state for tooltip control
     const [shiftKeyPressed, setShiftKeyPressed] = useState(false);
+    // Track text changes version to force re-renders when text is edited
+    const [textChangesVersion, setTextChangesVersion] = useState(0);
     // Track if we're currently processing a node hide operation
     const hidingNodeRef = useRef(false);
     // Setup keyboard event listeners for shift key
@@ -218,7 +221,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     }, [propNodes, draggableNodeIds]);
     // Always use localNodes for rendering - it syncs with props when structure changes
     // and receives state_changed event updates. localEdges only used in edit mode.
-    const nodes = localNodes;
+    // Filter out deleted nodes in edit mode
+    const nodes = editable
+        ? localNodes.filter((node) => !editStateRef.current.deletedNodeIds.has(node.id))
+        : localNodes;
     const edges = editable ? localEdges : propEdges;
     // Ref to track current xyflow nodes for undo/redo (set later via useEffect)
     const xyflowNodesRef = useRef([]);
@@ -228,6 +234,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     const checkHasChanges = useCallback((state) => {
         return (state.positionChanges.size > 0 ||
             state.dimensionChanges.size > 0 ||
+            state.textChanges.size > 0 ||
             state.nodeUpdates.size > 0 ||
             state.deletedNodeIds.size > 0 ||
             state.createdEdges.length > 0 ||
@@ -243,6 +250,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             console.log('[GraphRenderer] Edit state updated:', {
                 positionChanges: newState.positionChanges.size,
                 dimensionChanges: newState.dimensionChanges.size,
+                textChanges: newState.textChanges.size,
                 nodeUpdates: newState.nodeUpdates.size,
                 hasChanges,
             });
@@ -274,6 +282,61 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             return { ...prev, dimensionChanges: newDimensions };
         });
     }, [editable, updateEditState, pushHistory]);
+    // Handler for node text change - called from CustomNode via context
+    const handleNodeTextChange = useCallback((nodeId, text) => {
+        if (!editable)
+            return;
+        // Capture before text for undo
+        // For text nodes, the text is in the canvas node's 'text' field
+        // For group nodes, it's in the 'label' field
+        // We need to look at the original canvas to get the before value
+        const beforeText = editStateRef.current.textChanges.get(nodeId) ?? '';
+        // Push to history
+        pushHistory([
+            {
+                type: 'text',
+                nodeId,
+                before: beforeText,
+                after: text,
+            },
+        ]);
+        updateEditState((prev) => {
+            const newTextChanges = new Map(prev.textChanges);
+            newTextChanges.set(nodeId, text);
+            return { ...prev, textChanges: newTextChanges };
+        });
+        // Force re-render by incrementing version
+        setTextChangesVersion((v) => v + 1);
+    }, [editable, updateEditState, pushHistory]);
+    // Handler for deleting selected nodes (Delete/Backspace key)
+    const handleDeleteSelectedNodes = useCallback(() => {
+        if (!editable || selectedNodeIds.size === 0)
+            return;
+        const nodesToDelete = Array.from(selectedNodeIds);
+        const historyEntries = [];
+        // Build history entries for each deleted node
+        for (const nodeId of nodesToDelete) {
+            const node = localNodes.find((n) => n.id === nodeId);
+            if (!node)
+                continue;
+            historyEntries.push({
+                type: 'nodeDelete',
+                nodeId,
+                nodeData: node,
+            });
+        }
+        // Push all deletions as a single batch
+        if (historyEntries.length > 0) {
+            pushHistory(historyEntries);
+            updateEditState((prev) => {
+                const newDeletedNodeIds = new Set(prev.deletedNodeIds);
+                nodesToDelete.forEach((id) => newDeletedNodeIds.add(id));
+                return { ...prev, deletedNodeIds: newDeletedNodeIds };
+            });
+            // Clear selection after deletion
+            setSelectedNodeIds(new Set());
+        }
+    }, [editable, selectedNodeIds, localNodes, pushHistory, updateEditState]);
     // Handle toggling node hidden state (Cmd/Ctrl+click)
     // This is exposed via context so CustomNode can call it on mousedown
     // (mousedown works in edit mode where click is intercepted by drag handling)
@@ -340,9 +403,10 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
     // Memoize the context value to prevent unnecessary re-renders
     const graphEditContextValue = useMemo(() => ({
         onNodeResizeEnd: handleNodeResizeEnd,
+        onNodeTextChange: handleNodeTextChange,
         onToggleNodeHidden: handleToggleNodeHidden,
         onHideUnconnectedNodes: handleHideUnconnectedNodes,
-    }), [handleNodeResizeEnd, handleToggleNodeHidden, handleHideUnconnectedNodes]);
+    }), [handleNodeResizeEnd, handleNodeTextChange, handleToggleNodeHidden, handleHideUnconnectedNodes]);
     // ============================================
     // ALIGNMENT GUIDES
     // ============================================
@@ -887,6 +951,8 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             const animation = animationState.nodeAnimations[node.id];
             // Apply any pending position changes
             const pendingPosition = editStateRef.current.positionChanges.get(node.id);
+            // Apply any pending text changes
+            const pendingText = editStateRef.current.textChanges.get(node.id);
             // Allow specific nodes to be draggable even when not in edit mode
             const isDraggable = editable || draggableNodeIds?.has(node.id);
             // When draggableNodeIds is provided, we need to explicitly control each node's draggability
@@ -908,6 +974,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 data: {
                     ...node.data,
                     editable,
+                    pendingText,
                     tooltipsEnabled: showTooltips,
                     shiftKeyPressed,
                     isHighlighted: highlightedNodeId === node.id,
@@ -922,7 +989,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 },
             };
         });
-    }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds, draggableNodeIds]);
+    }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds, draggableNodeIds, textChangesVersion]);
     const baseNodesKey = useMemo(() => {
         return nodes
             .map((n) => n.id)
@@ -977,6 +1044,22 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             data: { ...n.data, isHidden: hiddenNodeIds.has(n.id) },
         })));
     }, [editable, hiddenNodeIds]);
+    // Sync pending text changes to local nodes when textChangesVersion changes (edit mode only)
+    const prevTextChangesVersionRef = useRef(textChangesVersion);
+    useEffect(() => {
+        if (!editable)
+            return;
+        if (prevTextChangesVersionRef.current === textChangesVersion)
+            return;
+        prevTextChangesVersionRef.current = textChangesVersion;
+        setXyflowLocalNodes((nodes) => nodes.map((n) => {
+            const pendingText = editStateRef.current.textChanges.get(n.id);
+            return {
+                ...n,
+                data: { ...n.data, pendingText },
+            };
+        }));
+    }, [editable, textChangesVersion]);
     // Also sync when entering edit mode or when base nodes change content
     const prevEditableRef = useRef(editable);
     useEffect(() => {
@@ -1068,6 +1151,25 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                         return { ...prev, dimensionChanges: newDimensions };
                     });
                     break;
+                case 'text':
+                    // Restore previous text
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newTextChanges = new Map(prev.textChanges);
+                        newTextChanges.set(entry.nodeId, entry.before);
+                        return { ...prev, textChanges: newTextChanges };
+                    });
+                    // Force re-render
+                    setTextChangesVersion((v) => v + 1);
+                    break;
+                case 'nodeDelete':
+                    // Restore the deleted node
+                    updateEditState((prev) => {
+                        const newDeletedNodeIds = new Set(prev.deletedNodeIds);
+                        newDeletedNodeIds.delete(entry.nodeId);
+                        return { ...prev, deletedNodeIds: newDeletedNodeIds };
+                    });
+                    break;
                 case 'edgeCreate':
                     // Remove the created edge
                     setLocalEdges((edges) => edges.filter((e) => e.id !== entry.edge.id));
@@ -1121,6 +1223,25 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                         return { ...prev, dimensionChanges: newDimensions };
                     });
                     break;
+                case 'text':
+                    // Apply new text
+                    // Update edit state
+                    updateEditState((prev) => {
+                        const newTextChanges = new Map(prev.textChanges);
+                        newTextChanges.set(entry.nodeId, entry.after);
+                        return { ...prev, textChanges: newTextChanges };
+                    });
+                    // Force re-render
+                    setTextChangesVersion((v) => v + 1);
+                    break;
+                case 'nodeDelete':
+                    // Re-delete the node
+                    updateEditState((prev) => {
+                        const newDeletedNodeIds = new Set(prev.deletedNodeIds);
+                        newDeletedNodeIds.add(entry.nodeId);
+                        return { ...prev, deletedNodeIds: newDeletedNodeIds };
+                    });
+                    break;
                 case 'edgeCreate':
                     // Re-create the edge
                     setLocalEdges((edges) => [...edges, entry.edge]);
@@ -1160,7 +1281,7 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             }
         }
     }, [redoFromStack, updateEditState]);
-    // Keyboard shortcuts for undo/redo
+    // Keyboard shortcuts for undo/redo and delete
     useEffect(() => {
         if (!editable)
             return;
@@ -1181,10 +1302,20 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
                 e.preventDefault();
                 applyRedo();
             }
+            // Delete or Backspace to delete selected nodes
+            if (e.key === 'Delete' || e.key === 'Backspace') {
+                // Only delete if not editing text (check if active element is an input/textarea)
+                const activeElement = document.activeElement;
+                const isEditingText = activeElement?.tagName === 'INPUT' || activeElement?.tagName === 'TEXTAREA';
+                if (!isEditingText) {
+                    e.preventDefault();
+                    handleDeleteSelectedNodes();
+                }
+            }
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [editable, applyUndo, applyRedo]);
+    }, [editable, applyUndo, applyRedo, handleDeleteSelectedNodes]);
     // Set undo/redo functions in ref for outer component access
     useEffect(() => {
         undoRedoFunctionsRef.current = {
@@ -1443,6 +1574,12 @@ const GraphRendererInner = ({ configuration, nodes: propNodes, edges: propEdges,
             onPendingChangesChange?.(false);
         };
     }, [xyflowNodesBase, xyflowEdgesWithElk, onPendingChangesChange]);
+    // Set the reset text changes version function for use by resetEditState
+    useEffect(() => {
+        resetTextChangesVersionRef.current = () => {
+            setTextChangesVersion(0);
+        };
+    }, []);
     // Use local edges in edit mode, base edges otherwise
     const xyflowEdges = editable ? xyflowLocalEdges : xyflowEdgesWithElk;
     // Handle edge changes (selection, reconnection, etc.)
@@ -1775,6 +1912,8 @@ 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);
+    // Ref to hold the reset text changes version function - will be set by inner component
+    const resetTextChangesVersionRef = 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
@@ -1792,6 +1931,10 @@ export const GraphRenderer = forwardRef((props, ref) => {
                     nodeId,
                     dimensions,
                 })),
+                textChanges: Array.from(state.textChanges.entries()).map(([nodeId, text]) => ({
+                    nodeId,
+                    text,
+                })),
                 nodeUpdates: Array.from(state.nodeUpdates.entries()).map(([nodeId, updates]) => ({
                     nodeId,
                     updates,
@@ -1807,6 +1950,7 @@ export const GraphRenderer = forwardRef((props, ref) => {
                 deletedEdges: state.deletedEdges.map((e) => ({ from: e.from, to: e.to, type: e.type })),
                 hasChanges: state.positionChanges.size > 0 ||
                     state.dimensionChanges.size > 0 ||
+                    state.textChanges.size > 0 ||
                     state.nodeUpdates.size > 0 ||
                     state.deletedNodeIds.size > 0 ||
                     state.createdEdges.length > 0 ||
@@ -1815,6 +1959,8 @@ export const GraphRenderer = forwardRef((props, ref) => {
         },
         resetEditState: () => {
             editStateRef.current = createEmptyEditState();
+            // Reset text changes version to trigger re-render
+            resetTextChangesVersionRef.current?.();
             // Also reset visual state (node positions/dimensions) if available
             resetVisualStateRef.current?.();
             // Clear undo/redo history
@@ -1824,6 +1970,7 @@ export const GraphRenderer = forwardRef((props, ref) => {
             const state = editStateRef.current;
             return (state.positionChanges.size > 0 ||
                 state.dimensionChanges.size > 0 ||
+                state.textChanges.size > 0 ||
                 state.nodeUpdates.size > 0 ||
                 state.deletedNodeIds.size > 0 ||
                 state.createdEdges.length > 0 ||
@@ -1855,7 +2002,7 @@ export const GraphRenderer = forwardRef((props, ref) => {
     if (isWaitingForViewport) {
         return (_jsx("div", { ref: containerRef, className: className, style: { width, height, position: 'relative' } }));
     }
-    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, initialViewport: initialViewport, elkLayout: elkLayout, scenarioEdges: scenarioEdges, showSequenceLabels: showSequenceLabels }) }) }) }));
+    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, resetTextChangesVersionRef: resetTextChangesVersionRef, undoRedoFunctionsRef: undoRedoFunctionsRef, pushHistory: pushHistory, clearHistory: clearHistory, undoFromStack: undoFromStack, redoFromStack: redoFromStack, onNodeClick: onNodeClick, fitViewToNodeIds: fitViewToNodeIds, fitViewPadding: fitViewPadding, draggableNodeIds: draggableNodeIds, onNodeDragStop: onNodeDragStop, onCopy: onCopy, initialViewport: initialViewport, elkLayout: elkLayout, scenarioEdges: scenarioEdges, showSequenceLabels: showSequenceLabels }) }) }) }));
 });
 GraphRenderer.displayName = 'GraphRenderer';
 //# sourceMappingURL=GraphRenderer.js.map