@graph-render/react 1.0.1 → 1.1.0

package/src/hooks/useGraphModel.ts

@@ -115,7 +115,10 @@ const buildFallbackEdges = (
           ...edge,
           type: edge.type ?? EdgeType.Directed,
           points: [
-            { x: right - Math.min(sourceWidth * 0.25, 18), y: top + Math.min(sourceHeight * 0.35, 18) },
+            {
+              x: right - Math.min(sourceWidth * 0.25, 18),
+              y: top + Math.min(sourceHeight * 0.35, 18),
+            },
             { x: right + 28, y: top - 20 },
             { x: right + 36, y: top + sourceHeight / 2 },
             { x: right - Math.min(sourceWidth * 0.25, 18), y: top + sourceHeight * 0.8 },
@@ -175,7 +178,13 @@ interface UseGraphModelOptions {
    * - `'routing'`         — the default `routeEdges` threw
    * - `'routing-override'`— a `routeEdgesOverride` threw (default was used as fallback)
    */
-  onError?: (error: Error, context: { graph: NxGraphInput; phase: 'layout' | 'layout-override' | 'routing' | 'routing-override' }) => void;
+  onError?: (
+    error: Error,
+    context: {
+      graph: NxGraphInput;
+      phase: 'layout' | 'layout-override' | 'routing' | 'routing-override';
+    }
+  ) => void;
 }
 
 export interface GraphModelResult {
@@ -211,10 +220,15 @@ export const useGraphModel = ({
   >({});
 
   const { nodes: sourceNodes, edges: sourceEdges } = useMemo(
-    () => fromTypedNxGraph(graph, config.defaultEdgeType),
-    [config.defaultEdgeType, graph]
+    () =>
+      fromTypedNxGraph(graph, config.defaultEdgeType, {
+        inputValidationMode: config.inputValidationMode,
+      }),
+    [config.defaultEdgeType, config.inputValidationMode, graph]
   );
 
+  const allowDegradedGraph = config.failureBehavior === 'degrade';
+
   const nodesWithMeasuredSize = useMemo(
     () =>
       sourceNodes.map((node) => ({
@@ -307,65 +321,70 @@ export const useGraphModel = ({
     [config.nodeSizing]
   );
 
-  const positionedNodes: PositionedNode[] = useMemo(
-    () => {
-      if (!layoutNodesOverride) {
-        try {
-          const laidOutNodes = layoutNodes(layoutOptions);
-          validatePositionedNodes(laidOutNodes, visibleNodes, 'layout');
-          return laidOutNodes;
-        } catch (error) {
-          onError?.(toError(error), {
-            graph,
-            phase: 'layout',
-          });
-
-          try {
-            const fallbackNodes = buildFallbackLayout(layoutOptions);
-            validatePositionedNodes(fallbackNodes, visibleNodes, 'layout');
-            return fallbackNodes;
-          } catch (fallbackError) {
-            const normalizedFallbackError = toError(fallbackError);
-            onError?.(normalizedFallbackError, {
-              graph,
-              phase: 'layout',
-            });
-            throw normalizedFallbackError;
-          }
-        }
-      }
-
+  const positionedNodes: PositionedNode[] = useMemo(() => {
+    if (!layoutNodesOverride) {
       try {
-        const overrideNodes = layoutNodesOverride(layoutOptions);
-        validatePositionedNodes(overrideNodes, visibleNodes, 'layout override');
-        return overrideNodes;
+        const laidOutNodes = layoutNodes(layoutOptions);
+        validatePositionedNodes(laidOutNodes, visibleNodes, 'layout');
+        return laidOutNodes;
       } catch (error) {
         onError?.(toError(error), {
           graph,
-          phase: 'layout-override',
+          phase: 'layout',
         });
 
+        if (!allowDegradedGraph) {
+          throw toError(error);
+        }
+
         try {
-          const fallbackNodes = layoutNodes(layoutOptions);
+          const fallbackNodes = buildFallbackLayout(layoutOptions);
           validatePositionedNodes(fallbackNodes, visibleNodes, 'layout');
           return fallbackNodes;
         } catch (fallbackError) {
-          onError?.(toError(fallbackError), { graph, phase: 'layout' });
-
-          try {
-            const finalFallbackNodes = buildFallbackLayout(layoutOptions);
-            validatePositionedNodes(finalFallbackNodes, visibleNodes, 'layout');
-            return finalFallbackNodes;
-          } catch (finalFallbackError) {
-            const normalizedFinalFallbackError = toError(finalFallbackError);
-            onError?.(normalizedFinalFallbackError, { graph, phase: 'layout' });
-            throw normalizedFinalFallbackError;
-          }
+          const normalizedFallbackError = toError(fallbackError);
+          onError?.(normalizedFallbackError, {
+            graph,
+            phase: 'layout',
+          });
+          throw normalizedFallbackError;
         }
       }
-    },
-    [graph, layoutNodesOverride, layoutOptions, onError, visibleNodes]
-  );
+    }
+
+    try {
+      const overrideNodes = layoutNodesOverride(layoutOptions);
+      validatePositionedNodes(overrideNodes, visibleNodes, 'layout override');
+      return overrideNodes;
+    } catch (error) {
+      onError?.(toError(error), {
+        graph,
+        phase: 'layout-override',
+      });
+
+      if (!allowDegradedGraph) {
+        throw toError(error);
+      }
+
+      try {
+        const fallbackNodes = layoutNodes(layoutOptions);
+        validatePositionedNodes(fallbackNodes, visibleNodes, 'layout');
+        return fallbackNodes;
+      } catch (fallbackError) {
+        onError?.(toError(fallbackError), { graph, phase: 'layout' });
+
+        try {
+          const finalFallbackNodes = buildFallbackLayout(layoutOptions);
+          validatePositionedNodes(finalFallbackNodes, visibleNodes, 'layout');
+          return finalFallbackNodes;
+        } catch (finalFallbackError) {
+          const normalizedFinalFallbackError = toError(finalFallbackError);
+          onError?.(normalizedFinalFallbackError, { graph, phase: 'layout' });
+          throw normalizedFinalFallbackError;
+        }
+      }
+    }
+  }, [graph, layoutNodesOverride, layoutOptions, onError, visibleNodes]);
 
   const edgeRoutingOptions = useMemo(
     () => ({
@@ -380,57 +399,62 @@ export const useGraphModel = ({
     [config]
   );
 
-  const positionedEdges: PositionedEdge[] = useMemo(
-    () => {
-      const nodeIds = new Set(positionedNodes.map((node) => node.id));
-
-      if (!routeEdgesOverride) {
-        try {
-          const routedEdges = routeEdges(positionedNodes, visibleEdges, edgeRoutingOptions);
-          validatePositionedEdges(routedEdges, nodeIds, 'routing');
-          return routedEdges;
-        } catch (error) {
-          onError?.(toError(error), {
-            graph,
-            phase: 'routing',
-          });
-          const fallbackEdges = buildFallbackEdges(positionedNodes, visibleEdges);
-          validatePositionedEdges(fallbackEdges, nodeIds, 'routing');
-          return fallbackEdges;
-        }
-      }
+  const positionedEdges: PositionedEdge[] = useMemo(() => {
+    const nodeIds = new Set(positionedNodes.map((node) => node.id));
 
+    if (!routeEdgesOverride) {
       try {
-        const overrideEdges = routeEdgesOverride(positionedNodes, visibleEdges, edgeRoutingOptions);
-        validatePositionedEdges(overrideEdges, nodeIds, 'routing override');
-        return overrideEdges;
+        const routedEdges = routeEdges(positionedNodes, visibleEdges, edgeRoutingOptions);
+        validatePositionedEdges(routedEdges, nodeIds, 'routing');
+        return routedEdges;
       } catch (error) {
         onError?.(toError(error), {
           graph,
-          phase: 'routing-override',
+          phase: 'routing',
         });
-
-        try {
-          const fallbackEdges = routeEdges(positionedNodes, visibleEdges, edgeRoutingOptions);
-          validatePositionedEdges(fallbackEdges, nodeIds, 'routing');
-          return fallbackEdges;
-        } catch (fallbackError) {
-          onError?.(toError(fallbackError), { graph, phase: 'routing' });
-          const finalFallbackEdges = buildFallbackEdges(positionedNodes, visibleEdges);
-          validatePositionedEdges(finalFallbackEdges, nodeIds, 'routing');
-          return finalFallbackEdges;
+        if (!allowDegradedGraph) {
+          throw toError(error);
         }
+        const fallbackEdges = buildFallbackEdges(positionedNodes, visibleEdges);
+        validatePositionedEdges(fallbackEdges, nodeIds, 'routing');
+        return fallbackEdges;
       }
-    },
-    [
-      edgeRoutingOptions,
-      graph,
-      onError,
-      positionedNodes,
-      routeEdgesOverride,
-      visibleEdges,
-    ]
-  );
+    }
+
+    try {
+      const overrideEdges = routeEdgesOverride(positionedNodes, visibleEdges, edgeRoutingOptions);
+      validatePositionedEdges(overrideEdges, nodeIds, 'routing override');
+      return overrideEdges;
+    } catch (error) {
+      onError?.(toError(error), {
+        graph,
+        phase: 'routing-override',
+      });
+
+      if (!allowDegradedGraph) {
+        throw toError(error);
+      }
+
+      try {
+        const fallbackEdges = routeEdges(positionedNodes, visibleEdges, edgeRoutingOptions);
+        validatePositionedEdges(fallbackEdges, nodeIds, 'routing');
+        return fallbackEdges;
+      } catch (fallbackError) {
+        onError?.(toError(fallbackError), { graph, phase: 'routing' });
+        const finalFallbackEdges = buildFallbackEdges(positionedNodes, visibleEdges);
+        validatePositionedEdges(finalFallbackEdges, nodeIds, 'routing');
+        return finalFallbackEdges;
+      }
+    }
+  }, [
+    edgeRoutingOptions,
+    graph,
+    onError,
+    allowDegradedGraph,
+    positionedNodes,
+    routeEdgesOverride,
+    visibleEdges,
+  ]);
 
   return {
     childNodeIdsByParent,

package/src/hooks/useGraphSearchState.ts

@@ -100,23 +100,21 @@ export const useGraphSearchState = <
       return { nodeIds: [], edgeIds: [] };
     }
 
-    return (
-      (() => {
-        try {
-          return (
-            highlightStrategy?.({
-              nodes,
-              edges,
-              query: searchQuery,
-              matchedNodeIds: searchMatchedNodeIds,
-              matchedEdgeIds: searchMatchedEdgeIds,
-            }) ?? { nodeIds: [], edgeIds: [] }
-          );
-        } catch {
-          return { nodeIds: [], edgeIds: [] };
-        }
-      })()
-    );
+    return (() => {
+      try {
+        return (
+          highlightStrategy?.({
+            nodes,
+            edges,
+            query: searchQuery,
+            matchedNodeIds: searchMatchedNodeIds,
+            matchedEdgeIds: searchMatchedEdgeIds,
+          }) ?? { nodeIds: [], edgeIds: [] }
+        );
+      } catch {
+        return { nodeIds: [], edgeIds: [] };
+      }
+    })();
   }, [edges, highlightStrategy, nodes, searchMatchedEdgeIds, searchMatchedNodeIds, searchQuery]);
 
   const effectiveHighlightedNodeSet = useMemo(

package/src/hooks/useGraphViewState.ts

@@ -0,0 +1,151 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  GraphSelection,
+  GraphViewport,
+  GraphProps,
+  GraphHandle,
+  NxGraphInput,
+  PositionedNode,
+  PositionedEdge,
+  NodeData,
+  EdgeData,
+} from '@graph-render/types';
+import { clampZoom } from '../utils/viewport';
+
+const DEFAULT_VIEWPORT: GraphViewport = { x: 0, y: 0, zoom: 1 };
+
+const normalizeViewport = (
+  viewport: GraphViewport,
+  minZoom: number,
+  maxZoom: number
+): GraphViewport => ({
+  x: Number.isFinite(viewport.x) ? viewport.x : 0,
+  y: Number.isFinite(viewport.y) ? viewport.y : 0,
+  zoom: clampZoom(Number.isFinite(viewport.zoom) ? viewport.zoom : 1, minZoom, maxZoom),
+});
+
+interface UseGraphViewStateOptions {
+  controlledViewport: GraphViewport | undefined;
+  defaultViewport: Partial<GraphViewport> | undefined;
+  safeMinZoom: number;
+  safeMaxZoom: number;
+  onViewportChange: ((viewport: GraphViewport) => void) | undefined;
+  selectedNodeIds: string[] | undefined;
+  selectedEdgeIds: string[] | undefined;
+  defaultSelectedNodeIds: string[] | undefined;
+  defaultSelectedEdgeIds: string[] | undefined;
+  onSelectionChange: ((selection: GraphSelection) => void) | undefined;
+  controlledFocusedNodeId: string | null | undefined;
+  defaultFocusedNodeId: string | null;
+  onFocusedNodeChange: ((nodeId: string | null) => void) | undefined;
+}
+
+interface UseGraphViewStateResult {
+  viewport: GraphViewport;
+  viewportRef: React.MutableRefObject<GraphViewport>;
+  selection: GraphSelection;
+  selectionRef: React.MutableRefObject<GraphSelection>;
+  focusedNodeId: string | null;
+  updateViewport: GraphHandle['setViewport'];
+  updateSelection: (next: GraphSelection | ((current: GraphSelection) => GraphSelection)) => void;
+  updateFocusedNode: (nodeId: string | null) => void;
+}
+
+export const useGraphViewState = ({
+  controlledViewport,
+  defaultViewport,
+  safeMinZoom,
+  safeMaxZoom,
+  onViewportChange,
+  selectedNodeIds,
+  selectedEdgeIds,
+  defaultSelectedNodeIds,
+  defaultSelectedEdgeIds,
+  onSelectionChange,
+  controlledFocusedNodeId,
+  defaultFocusedNodeId,
+  onFocusedNodeChange,
+}: UseGraphViewStateOptions): UseGraphViewStateResult => {
+  const [internalViewport, setInternalViewport] = useState<GraphViewport>(() =>
+    normalizeViewport({ ...DEFAULT_VIEWPORT, ...(defaultViewport ?? {}) }, safeMinZoom, safeMaxZoom)
+  );
+  const [internalSelection, setInternalSelection] = useState<GraphSelection>({
+    nodeIds: defaultSelectedNodeIds ?? [],
+    edgeIds: defaultSelectedEdgeIds ?? [],
+  });
+  const [internalFocusedNodeId, setInternalFocusedNodeId] = useState<string | null>(
+    defaultFocusedNodeId
+  );
+
+  const viewport = useMemo(
+    () => normalizeViewport(controlledViewport ?? internalViewport, safeMinZoom, safeMaxZoom),
+    [controlledViewport, internalViewport, safeMaxZoom, safeMinZoom]
+  );
+  const viewportRef = useRef(viewport);
+  viewportRef.current = viewport;
+  const onViewportChangeRef = useRef(onViewportChange);
+  onViewportChangeRef.current = onViewportChange;
+
+  const selection = useMemo<GraphSelection>(
+    () => ({
+      nodeIds: selectedNodeIds ?? internalSelection.nodeIds,
+      edgeIds: selectedEdgeIds ?? internalSelection.edgeIds,
+    }),
+    [selectedNodeIds, selectedEdgeIds, internalSelection]
+  );
+  const selectionRef = useRef(selection);
+  selectionRef.current = selection;
+
+  const focusedNodeId =
+    controlledFocusedNodeId !== undefined ? controlledFocusedNodeId : internalFocusedNodeId;
+
+  const updateViewport = useCallback<GraphHandle['setViewport']>(
+    (next) => {
+      const current = viewportRef.current;
+      const resolved = typeof next === 'function' ? next(current) : next;
+      const normalized = normalizeViewport({ ...current, ...resolved }, safeMinZoom, safeMaxZoom);
+
+      if (!controlledViewport) {
+        setInternalViewport(normalized);
+      }
+      onViewportChangeRef.current?.(normalized);
+    },
+    [controlledViewport, safeMaxZoom, safeMinZoom]
+  );
+
+  const updateSelection = useCallback(
+    (next: GraphSelection | ((current: GraphSelection) => GraphSelection)) => {
+      const current = selectionRef.current;
+      const resolved = typeof next === 'function' ? next(current) : next;
+      if (selectedNodeIds == null || selectedEdgeIds == null) {
+        setInternalSelection((previous) => ({
+          nodeIds: selectedNodeIds == null ? resolved.nodeIds : previous.nodeIds,
+          edgeIds: selectedEdgeIds == null ? resolved.edgeIds : previous.edgeIds,
+        }));
+      }
+      onSelectionChange?.(resolved);
+    },
+    [onSelectionChange, selectedEdgeIds, selectedNodeIds]
+  );
+
+  const updateFocusedNode = useCallback(
+    (nodeId: string | null) => {
+      if (controlledFocusedNodeId === undefined) {
+        setInternalFocusedNodeId(nodeId);
+      }
+      onFocusedNodeChange?.(nodeId);
+    },
+    [controlledFocusedNodeId, onFocusedNodeChange]
+  );
+
+  return {
+    viewport,
+    viewportRef,
+    selection,
+    selectionRef,
+    focusedNodeId,
+    updateViewport,
+    updateSelection,
+    updateFocusedNode,
+  };
+};

package/src/utils/columns.ts

@@ -16,7 +16,9 @@ export const groupPositionedNodesByColumn = <TNode extends PositionedNode = Posi
   nodes: TNode[],
   tolerance: number = DEFAULT_COLUMN_TOLERANCE
 ): NodeColumn<TNode>[] => {
-  const sortedNodes = [...nodes].sort((left, right) => getNodeCenterX(left) - getNodeCenterX(right));
+  const sortedNodes = [...nodes].sort(
+    (left, right) => getNodeCenterX(left) - getNodeCenterX(right)
+  );
   const columns: Array<{ centerX: number; avgWidth: number; nodes: TNode[] }> = [];
 
   sortedNodes.forEach((node) => {
@@ -48,4 +50,4 @@ export const groupPositionedNodesByColumn = <TNode extends PositionedNode = Posi
     centerX: column.centerX,
     nodes: [...column.nodes].sort((left, right) => left.position.y - right.position.y),
   }));
-};
+};

package/tsconfig.json

@@ -8,5 +8,9 @@
   },
   "include": ["src"],
   "exclude": ["dist", "node_modules"],
-  "references": [{ "path": "./tsconfig.node.json" }, { "path": "../types" }, { "path": "../core-graph-render" }]
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "../types" },
+    { "path": "../core-graph-render" }
+  ]
 }