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

package/src/hooks/useUndoRedo.ts

@@ -0,0 +1,138 @@
+/**
+ * Hook for managing undo/redo history in the graph editor
+ *
+ * Tracks position changes, dimension changes, edge operations, and node deletions
+ * Supports batch operations (e.g., moving multiple selected nodes = single undo)
+ */
+
+import { useRef, useState, useCallback } from 'react';
+import type { NodeState, EdgeState } from '@principal-ai/principal-view-core';
+
+const MAX_HISTORY_SIZE = 50;
+
+/**
+ * Individual history entry types
+ */
+export type HistoryEntry =
+  | {
+      type: 'position';
+      nodeId: string;
+      before: { x: number; y: number };
+      after: { x: number; y: number };
+    }
+  | {
+      type: 'dimension';
+      nodeId: string;
+      before: { width: number; height: number };
+      after: { width: number; height: number };
+    }
+  | {
+      type: 'nodeDelete';
+      nodeId: string;
+      nodeData: NodeState;
+    }
+  | {
+      type: 'edgeCreate';
+      edge: EdgeState & { sourceHandle?: string; targetHandle?: string };
+    }
+  | {
+      type: 'edgeDelete';
+      edge: EdgeState & { sourceHandle?: string; targetHandle?: string };
+    };
+
+/**
+ * A batch of history entries that should be undone/redone together
+ */
+export type HistoryBatch = HistoryEntry[];
+
+export interface UseUndoRedoReturn {
+  /** Whether there are entries to undo */
+  canUndo: boolean;
+  /** Whether there are entries to redo */
+  canRedo: boolean;
+  /** Undo the last batch of changes, returns the entries to reverse */
+  undo: () => HistoryBatch | null;
+  /** Redo the last undone batch, returns the entries to re-apply */
+  redo: () => HistoryBatch | null;
+  /** Push a new batch of entries to the undo stack (clears redo stack) */
+  pushHistory: (entries: HistoryBatch) => void;
+  /** Clear all history (both undo and redo stacks) */
+  clearHistory: () => void;
+}
+
+/**
+ * Hook for managing undo/redo history
+ *
+ * Uses refs for stacks to avoid re-renders on every push,
+ * with state for canUndo/canRedo to trigger UI updates
+ */
+export function useUndoRedo(): UseUndoRedoReturn {
+  // Use refs for stacks to avoid re-renders on every push
+  const undoStackRef = useRef<HistoryBatch[]>([]);
+  const redoStackRef = useRef<HistoryBatch[]>([]);
+
+  // State for UI updates (canUndo/canRedo)
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+
+  const updateCanStates = useCallback(() => {
+    setCanUndo(undoStackRef.current.length > 0);
+    setCanRedo(redoStackRef.current.length > 0);
+  }, []);
+
+  const pushHistory = useCallback(
+    (entries: HistoryBatch) => {
+      if (entries.length === 0) return;
+
+      undoStackRef.current.push(entries);
+
+      // Limit stack size
+      if (undoStackRef.current.length > MAX_HISTORY_SIZE) {
+        undoStackRef.current.shift();
+      }
+
+      // Clear redo stack when new changes are made
+      redoStackRef.current = [];
+
+      updateCanStates();
+    },
+    [updateCanStates]
+  );
+
+  const undo = useCallback((): HistoryBatch | null => {
+    const batch = undoStackRef.current.pop();
+    if (!batch) return null;
+
+    // Push to redo stack
+    redoStackRef.current.push(batch);
+
+    updateCanStates();
+    return batch;
+  }, [updateCanStates]);
+
+  const redo = useCallback((): HistoryBatch | null => {
+    const batch = redoStackRef.current.pop();
+    if (!batch) return null;
+
+    // Push back to undo stack
+    undoStackRef.current.push(batch);
+
+    updateCanStates();
+    return batch;
+  }, [updateCanStates]);
+
+  const clearHistory = useCallback(() => {
+    undoStackRef.current = [];
+    redoStackRef.current = [];
+    updateCanStates();
+  }, [updateCanStates]);
+
+  return {
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    pushHistory,
+    clearHistory,
+  };
+}

package/src/nodes/CustomNode.tsx

@@ -1,11 +1,12 @@
-import React, { useState, useRef } from 'react';
-import { Handle, Position, NodeResizer } from '@xyflow/react';
+import React, { useState, useRef, useCallback } from 'react';
+import { Handle, Position, NodeResizer, useNodeId } from '@xyflow/react';
 import type { NodeProps, Node } from '@xyflow/react';
 import type { NodeTypeDefinition } from '@principal-ai/principal-view-core';
 import { useTheme } from '@principal-ade/industry-theme';
 import { resolveIcon } from '../utils/iconResolver';
 import { NodeTooltip } from '../components/NodeTooltip';
 import type { OtelInfo } from '../components/NodeTooltip';
+import { useGraphEdit } from '../contexts/GraphEditContext';
 
 /**
  * Converts a hex color to a lighter/tinted version (opaque, not transparent)
@@ -63,6 +64,8 @@ export interface CustomNodeData extends Record<string, unknown> {
  */
 export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, selected, dragging }) => {
   const { theme } = useTheme();
+  const { onNodeResizeEnd } = useGraphEdit();
+  const nodeId = useNodeId();
   const [isHovered, setIsHovered] = useState(false);
   const nodeRef = useRef<HTMLDivElement>(null);
   const nodeProps = data;
@@ -86,6 +89,19 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
   // Inactive nodes (scenario filtering) are dimmed to 0.1
   const nodeOpacity = isHidden ? 0.4 : isActive ? 1 : 0.1;
 
+  // Handle resize end - notify parent to track the dimension change
+  const handleResizeEnd = useCallback(
+    (_event: unknown, params: { width: number; height: number }) => {
+      if (nodeId && onNodeResizeEnd && params.width && params.height) {
+        onNodeResizeEnd(nodeId, {
+          width: Math.round(params.width),
+          height: Math.round(params.height),
+        });
+      }
+    },
+    [nodeId, onNodeResizeEnd]
+  );
+
   // DEBUG: Log ALL node data to understand structure
   console.log('[CustomNode] Node data:', {
     name: nodeProps.name,
@@ -406,6 +422,21 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
   // Show event name if it differs from display name
   const showEventName = eventName && eventName !== displayName;
 
+  // Helper to render text with word break opportunities after dots
+  const renderWithDotBreaks = (text: string) => {
+    const parts = text.split('.');
+    return parts.map((part, i) => (
+      <span key={i}>
+        {part}
+        {i < parts.length - 1 && (
+          <>
+            .<wbr />
+          </>
+        )}
+      </span>
+    ));
+  };
+
   // Helper component for rendering name with optional event name
   const renderNameWithEvent = (centered: boolean = true) => (
     <div style={{ textAlign: centered ? 'center' : 'left', wordBreak: 'break-word' }}>
@@ -419,7 +450,7 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
             fontFamily: theme.fonts.monospace,
           }}
         >
-          {eventName}
+          {renderWithDotBreaks(eventName)}
         </div>
       )}
     </div>
@@ -673,6 +704,7 @@ export const CustomNode: React.FC<NodeProps<Node<CustomNodeData>>> = ({ data, se
           minWidth={minWidth}
           minHeight={minHeight}
           keepAspectRatio={keepAspectRatio}
+          onResizeEnd={handleResizeEnd}
           handleStyle={{
             width: 8,
             height: 8,