@statelyai/flow-react 0.11.0 → 0.12.0

package/dist/esm/index.d.ts

@@ -239,6 +239,14 @@ type StatelyFlowBaseProps<TNodeData = unknown, TEdgeData = unknown> = {
    * margin). Recommended for large graphs.
    */
   onlyRenderVisible?: boolean;
+  /**
+   * The zoom that zoom-dependent work follows, when it should lag the live
+   * zoom. While the live zoom differs (a zoom gesture), each frame only
+   * changes the viewport transform: `--flow-zoom` and `--flow-inverse-zoom`
+   * keep this zoom's values and `onlyRenderVisible` keeps its last cull.
+   * Both catch up when this prop changes. Omit to follow the live zoom.
+   */
+  settledZoom?: number;
   /**
    * Override the input modes driving gestures. Updates apply to new gestures
    * without cancelling the current one. Defaults to
@@ -351,7 +359,10 @@ type MiniMapProps = {
   padding?: number;
   className?: string;
   style?: CSSProperties;
-  /** Render one node marker; defaults to a plain `<rect>`. */
+  /**
+   * Render one node marker; defaults to a plain `<rect>`. Pass a stable
+   * function so viewport changes skip re-rendering the markers.
+   */
   renderNode?: (node: FlowNode, rect: Rect) => ReactNode;
 };
 /**

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { a as FlowInstanceProvider, i as LinesBackground, n as CrossBackground, o as useFlowInstance, r as DotsBackground, s as useOptionalFlowInstance, t as Background } from "./backgrounds2.js";
-import { applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, clientToCanvas, computeRenderableIds, createEntityGeometryObserver, createFlowView, createMeasurementObserver, nodePositionStyle, observeAppearanceBounds, renderableIdsEqual, resolveFlowColorMode, viewportStyle } from "@statelyai/flow-dom";
+import { applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, clientToCanvas, computeSettledRenderableIds, createEntityGeometryObserver, createFlowView, createMeasurementObserver, nodePositionStyle, observeAppearanceBounds, renderableIdsEqual, resolveFlowColorMode, viewportStyle, writeZoomVariables } from "@statelyai/flow-dom";
 import { CONNECTION_PREVIEW_EDGE_ID, appearanceMeasurementId, areNodesMeasured, createConnectionPreviewGraph, createEntityChangeNotifier, createFlow, createFlowInputRuntime, defaultModesForContext, getAnchorTransform, getAutoPanDelta, getMinimapProjection, getMinimapViewportCenter, getProjectedEdgeAttrs, getProjectedNodeAttrs, getToolbarPlacement, getVisibleBounds, markerToSVG, pathToSVG, profileModesForContext, profilePoliciesForContext, viewportCenteredOn } from "@statelyai/flow";
 import { Fragment, createContext, forwardRef, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -646,15 +646,30 @@ function useDragStableFlowSelector(selector, isEqual) {
 		return value;
 	}, { isEqual });
 }
-function useRenderableIds(instance, enabled) {
-	return useDragStableFlowSelector((context) => computeRenderableIds(instance.internals.engine, context, enabled), renderableIdsEqual);
+function useRenderableIds(instance, enabled, settledZoom) {
+	const lastCull = useRef(null);
+	return useDragStableFlowSelector((context) => {
+		lastCull.current = computeSettledRenderableIds(instance.internals.engine, context, enabled, settledZoom, lastCull.current);
+		return lastCull.current.value;
+	}, renderableIdsEqual);
 }
-function useViewportTransform(ref, instance) {
+function useViewportTransform(ref, instance, settledZoom) {
+	const settledZoomRef = useRef(settledZoom);
+	settledZoomRef.current = settledZoom;
 	useLayoutEffect(() => {
 		const el = ref.current;
 		if (!el) return;
-		return attachViewportTransform(instance.internals.store, el);
+		return attachViewportTransform(instance.internals.store, el, { getVariableZoom: () => settledZoomRef.current });
 	}, [ref, instance]);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		writeZoomVariables(el, settledZoom ?? instance.getContext().viewport.zoom);
+	}, [
+		ref,
+		instance,
+		settledZoom
+	]);
 }
 function StatelyFlow(props) {
 	if (props.flow) return /* @__PURE__ */ jsx(StatelyFlowView, {
@@ -703,7 +718,7 @@ function StatelyFlowView(props) {
 	useLayoutEffect(() => props.flow.subscribe((context) => context.focusedEntityId, (nextId, previousId) => {
 		if (containerRef.current) blurClearedEntityFocus(containerRef.current, previousId, nextId);
 	}), [props.flow]);
-	useViewportTransform(viewportRef, props.flow);
+	useViewportTransform(viewportRef, props.flow, props.settledZoom);
 	useFlowBaseStyles();
 	const projections = useActiveProjections(props.flow, props.projections);
 	const { className: rootClassName, style: rootStyle, tabIndex: rootTabIndex, ...rootProps } = props.rootProps ?? {};
@@ -776,14 +791,16 @@ function StatelyFlowView(props) {
 										geometryObserver,
 										renderEdge: props.renderEdge,
 										projections,
-										onlyRenderVisible: props.onlyRenderVisible
+										onlyRenderVisible: props.onlyRenderVisible,
+										settledZoom: props.settledZoom
 									}),
 									/* @__PURE__ */ jsx(NodeLayer, {
 										geometryObserver,
 										appearanceRenderers: props.appearanceRenderers,
 										renderNode: props.renderNode,
 										projections,
-										onlyRenderVisible: props.onlyRenderVisible
+										onlyRenderVisible: props.onlyRenderVisible,
+										settledZoom: props.settledZoom
 									}),
 									/* @__PURE__ */ jsx(ConnectionPreviewEdge, {
 										flow: props.flow,
@@ -796,7 +813,8 @@ function StatelyFlowView(props) {
 										appearanceRenderers: props.appearanceRenderers,
 										renderEdgeLabel: props.renderEdgeLabel,
 										projections,
-										onlyRenderVisible: props.onlyRenderVisible
+										onlyRenderVisible: props.onlyRenderVisible,
+										settledZoom: props.settledZoom
 									}),
 									props.showSelectionBounds ? /* @__PURE__ */ jsx(SelectionBoundsLayer, { geometryObserver }) : null,
 									/* @__PURE__ */ jsx(SelectionBoxLayer, {}),
@@ -1025,7 +1043,7 @@ function SelectionBoundsLayer(props) {
 function EdgeLayer(props) {
 	const instance = useFlowInstance();
 	const markerPrefix = `stately-flow-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
-	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible);
+	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible, props.settledZoom);
 	const edgeIds = useDragStableFlowSelector((_context) => getOrderedEntities(instance).edges.map((edge) => edge.id), stringArraysEqual);
 	const renderEdge = props.renderEdge;
 	return /* @__PURE__ */ jsxs("svg", {
@@ -1070,7 +1088,7 @@ const EdgeView = memo(function EdgeView(props) {
 		if (!(a.configRevision === b.configRevision && a.selected === b.selected && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights)) return false;
 		if (a.geometryActive !== b.geometryActive) return b.geometryActive ? edgeRenderContentEqual(a.edge, b.edge) : false;
 		if (a.geometryActive) return edgeRenderContentEqual(a.edge, b.edge);
-		return a.graph === b.graph && a.edge === b.edge && a.pathData === b.pathData;
+		return (a.graph === b.graph || !props.projections?.length) && a.edge === b.edge && a.pathData === b.pathData;
 	} });
 	useLayoutEffect(() => {
 		const element = ref.current;
@@ -1094,8 +1112,7 @@ const EdgeView = memo(function EdgeView(props) {
 	const focusProps = {
 		role: "group",
 		"aria-roledescription": "flow edge",
-		"aria-label": props.flow.internals.engine.getAriaLabel(props.id),
-		"aria-selected": selected,
+		"aria-label": props.flow.internals.engine.getAriaLabel(props.id) + (selected ? ", selected" : ""),
 		tabIndex: focusable ? 0 : void 0,
 		onFocus: (event) => {
 			if (descendantOwnsFlowFocus(event)) return;
@@ -1327,7 +1344,7 @@ function EdgeEndpointHandles(props) {
 }
 function EdgeLabelLayer(props) {
 	const instance = useFlowInstance();
-	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible);
+	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible, props.settledZoom);
 	const renderEdgeLabel = props.renderEdgeLabel;
 	const graphEdgeIds = useFlowSelector((context) => context.graph.edges.map((edge) => edge.id), { isEqual: stringArraysEqual });
 	const durableLabelIds = useFlowSelector((context) => context.graph.edges.filter((edge) => edge.label).map((edge) => edge.id), { isEqual: stringArraysEqual });
@@ -1377,7 +1394,7 @@ const EdgeLabelItem = memo(function EdgeLabelItem(props) {
 		if (!(a.configRevision === b.configRevision && a.selected === b.selected && a.dragging === b.dragging && a.hovered === b.hovered && a.highlights === b.highlights)) return false;
 		if (a.geometryActive !== b.geometryActive) return b.geometryActive ? edgeRenderContentEqual(a.edge, b.edge) : false;
 		if (a.geometryActive) return edgeRenderContentEqual(a.edge, b.edge);
-		return a.graph === b.graph && a.edge === b.edge && a.pathData === b.pathData;
+		return (a.graph === b.graph || !props.projections?.length) && a.edge === b.edge && a.pathData === b.pathData;
 	} });
 	if (!edge || !pathData) return null;
 	const attrs = getProjectedEdgeAttrs({
@@ -1505,7 +1522,7 @@ function projectedEdgeLabelBounds(pathData, label) {
 }
 function NodeLayer(props) {
 	const instance = useFlowInstance();
-	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible);
+	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible, props.settledZoom);
 	const nodePaintEntries = useDragStableFlowSelector((context) => {
 		const paintZIndices = instance.internals.engine.getPaintZIndices().nodes;
 		return context.graph.nodes.flatMap((node) => {
@@ -1597,7 +1614,7 @@ const NodeView = memo(function NodeView(props) {
 		if (!(a.configRevision === b.configRevision && a.hidden === b.hidden && a.selected === b.selected && a.dragging === b.dragging && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights)) return false;
 		if (a.geometryActive !== b.geometryActive) return b.geometryActive ? nodeRenderContentEqual(a.node, b.node) : false;
 		if (a.geometryActive) return nodeRenderContentEqual(a.node, b.node);
-		return a.graph === b.graph && a.node === b.node && rectsShallowEqual(a.bounds, b.bounds);
+		return (a.graph === b.graph || !props.projections?.length && !b.node?.group) && a.node === b.node && rectsShallowEqual(a.bounds, b.bounds);
 	} });
 	const appearance = node ? props.flow.internals.engine.resolveAppearance(node) : void 0;
 	useAppearanceMeasurement(ref, props.id, appearance, props.observer);
@@ -1614,7 +1631,8 @@ const NodeView = memo(function NodeView(props) {
 		props.id,
 		props.observer,
 		props.flow,
-		hidden
+		hidden,
+		node?.group?.type
 	]);
 	useLayoutEffect(() => {
 		const element = ref.current;
@@ -1656,7 +1674,6 @@ const NodeView = memo(function NodeView(props) {
 			className: classNames$1("stately-flow__node", attrs.className),
 			role: "group",
 			"aria-roledescription": "flow node",
-			"aria-selected": selected,
 			"aria-label": props.flow.internals.engine.getAriaLabel(props.id) + (selected ? ", selected" : ""),
 			tabIndex: focusable ? 0 : void 0,
 			onFocus: (event) => {
@@ -1982,6 +1999,20 @@ function projectionTransform(from, to) {
 	});
 	return `translate(${toOrigin.x - fromOrigin.x * scale} ${toOrigin.y - fromOrigin.y * scale}) scale(${scale})`;
 }
+const MiniMapNodes = memo(function MiniMapNodes(props) {
+	return props.nodes.map((node, index) => {
+		const rect = props.rects[index];
+		return /* @__PURE__ */ jsx(Fragment, { children: props.renderNode?.(node, rect) ?? /* @__PURE__ */ jsx("rect", {
+			"data-flow-minimap-node": node.id,
+			x: rect.x,
+			y: rect.y,
+			width: Math.max(rect.width, 1),
+			height: Math.max(rect.height, 1),
+			rx: 1,
+			fill: "#94a3b8"
+		}) }, node.id);
+	});
+});
 /**
 * Overview map. Projection and navigation math live in core; this adapter owns
 * only React rendering and the browser pointer session.
@@ -2167,17 +2198,10 @@ function MiniMap(props) {
 		},
 		children: [/* @__PURE__ */ jsx("g", {
 			ref: markerGroupRef,
-			children: nodes.map((node, index) => {
-				const rect = projectedNodes[index];
-				return /* @__PURE__ */ jsx(Fragment, { children: props.renderNode?.(node, rect) ?? /* @__PURE__ */ jsx("rect", {
-					"data-flow-minimap-node": node.id,
-					x: rect.x,
-					y: rect.y,
-					width: Math.max(rect.width, 1),
-					height: Math.max(rect.height, 1),
-					rx: 1,
-					fill: "#94a3b8"
-				}) }, node.id);
+			children: /* @__PURE__ */ jsx(MiniMapNodes, {
+				nodes,
+				rects: projectedNodes,
+				renderNode: props.renderNode
 			})
 		}), /* @__PURE__ */ jsx("rect", {
 			ref: viewportRectRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/flow-react",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Thin React adapter for @statelyai/flow with core and DOM re-exports.",
   "type": "module",
   "sideEffects": false,
@@ -34,8 +34,8 @@
   "license": "MIT",
   "dependencies": {
     "use-sync-external-store": "^1.6.0",
-    "@statelyai/flow": "0.13.0",
-    "@statelyai/flow-dom": "3.5.2"
+    "@statelyai/flow": "0.13.2",
+    "@statelyai/flow-dom": "3.6.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",