@statelyai/flow-react 0.9.2 → 0.9.3

package/dist/esm/index.js

@@ -561,8 +561,31 @@ function assignRef(ref, value) {
 	if (typeof ref === "function") ref(value);
 	else if (ref) ref.current = value;
 }
+/**
+* `dragRevision` changes only for transient drag geometry. Topology, paint
+* order, and viewport membership stay stable during that transition, so
+* list-level selectors can retain their prior value while per-entity DOM
+* observers update only the moved cohort.
+*/
+function useDragStableFlowSelector(selector, isEqual) {
+	const cached = useRef(null);
+	return useFlowSelector((context) => {
+		if (cached.current && context.canvasState === "dragging" && cached.current.canvasState === "dragging" && context.dragRevision !== cached.current.dragRevision) {
+			cached.current.canvasState = context.canvasState;
+			cached.current.dragRevision = context.dragRevision;
+			return cached.current.value;
+		}
+		const value = selector(context);
+		cached.current = {
+			canvasState: context.canvasState,
+			dragRevision: context.dragRevision,
+			value
+		};
+		return value;
+	}, { isEqual });
+}
 function useRenderableIds(instance, enabled) {
-	return useFlowSelector((context) => computeRenderableIds(instance.internals.engine, context, enabled), { isEqual: renderableIdsEqual });
+	return useDragStableFlowSelector((context) => computeRenderableIds(instance.internals.engine, context, enabled), renderableIdsEqual);
 }
 function useViewportTransform(ref, instance) {
 	useLayoutEffect(() => {
@@ -934,7 +957,7 @@ function EdgeLayer(props) {
 	const instance = useFlowInstance();
 	const markerPrefix = `stately-flow-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible);
-	const edgeIds = useFlowSelector((_context) => getOrderedEntities(instance).edges.map((edge) => edge.id), { isEqual: stringArraysEqual });
+	const edgeIds = useDragStableFlowSelector((_context) => getOrderedEntities(instance).edges.map((edge) => edge.id), stringArraysEqual);
 	const renderEdge = props.renderEdge;
 	return /* @__PURE__ */ jsxs("svg", {
 		"aria-label": "edges",
@@ -979,7 +1002,8 @@ const EdgeView = memo(function EdgeView(props) {
 		hovered: context.hoveredEntityIds.has(props.id),
 		highlights: props.flow.internals.engine.getHighlights(props.id)
 	}), { isEqual: (a, b) => {
-		if (!(a.selected === b.selected && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights) || a.geometryActive !== b.geometryActive) return false;
+		if (!(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;
 	} });
@@ -1258,7 +1282,8 @@ const EdgeLabelItem = memo(function EdgeLabelItem(props) {
 		hovered: context.hoveredEntityIds.has(props.id),
 		highlights: props.flow.internals.engine.getHighlights(props.id)
 	}), { isEqual: (a, b) => {
-		if (!(a.selected === b.selected && a.dragging === b.dragging && a.hovered === b.hovered && a.highlights === b.highlights) || a.geometryActive !== b.geometryActive) return false;
+		if (!(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;
 	} });
@@ -1383,16 +1408,17 @@ function projectedEdgeLabelBounds(pathData, label) {
 function NodeLayer(props) {
 	const instance = useFlowInstance();
 	const renderableIds = useRenderableIds(instance, props.onlyRenderVisible);
-	const nodePaintEntries = useFlowSelector((context) => {
-		const paintOrder = new Map(getOrderedEntities(instance).nodes.map((node, orderIndex) => [node.id, orderIndex]));
+	const nodePaintEntries = useDragStableFlowSelector((context) => {
+		const paintOrder = new Map(getOrderedEntities(instance, { elevateSelected: false }).nodes.map((node, orderIndex) => [node.id, orderIndex]));
+		const selectedBoost = paintOrder.size;
 		return context.graph.nodes.flatMap((node) => {
 			const orderIndex = paintOrder.get(node.id);
 			return orderIndex === void 0 ? [] : [{
 				id: node.id,
-				orderIndex
+				orderIndex: orderIndex + (context.selection.has(node.id) ? selectedBoost : 0)
 			}];
 		});
-	}, { isEqual: nodePaintEntriesEqual });
+	}, nodePaintEntriesEqual);
 	const observer = useMeasurementObserver();
 	return /* @__PURE__ */ jsx("div", {
 		"aria-label": "nodes",
@@ -1419,8 +1445,8 @@ function NodeLayer(props) {
 		})
 	});
 }
-function getOrderedEntities(flow) {
-	return flow.internals.engine.getVisibleEntities();
+function getOrderedEntities(flow, options = {}) {
+	return flow.internals.engine.getVisibleEntities(options);
 }
 function rectsShallowEqual(a, b) {
 	return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
@@ -1469,7 +1495,8 @@ const NodeView = memo(function NodeView(props) {
 			bounds: context.resizingEntityId === props.id && context.resizeCorners ? props.flow.internals.engine.getResizeBounds() ?? props.flow.internals.engine.visualBounds(props.id) : props.flow.internals.engine.visualBounds(props.id)
 		};
 	}, { isEqual: (a, b) => {
-		if (!(a.hidden === b.hidden && a.selected === b.selected && a.dragging === b.dragging && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights) || a.geometryActive !== b.geometryActive) return false;
+		if (!(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);
 	} });
@@ -1540,7 +1567,7 @@ const NodeView = memo(function NodeView(props) {
 					dragging
 				}),
 				cursor: dragging ? "grabbing" : "grab",
-				pointerEvents: node.group && groupHasInteractiveContent ? "none" : "auto",
+				pointerEvents: node.group?.type === "derived" || node.group && groupHasInteractiveContent ? "none" : "auto",
 				userSelect: "none",
 				zIndex: props.orderIndex,
 				opacity: attrs.opacity

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/flow-react",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "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.8.2",
-    "@statelyai/flow-dom": "3.4.2"
+    "@statelyai/flow": "0.9.0",
+    "@statelyai/flow-dom": "3.4.3"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -83,7 +83,10 @@
     "typecheck": "tsc --noEmit",
     "test:browser": "vitest run --config vitest.browser.config.mjs",
     "test:e2e": "playwright test",
-    "bench:browser": "playwright test --config playwright.performance.config.ts",
+    "bench:browser": "playwright test --config playwright.performance.config.ts && node ../../scripts/report-browser-benchmarks.mjs",
+    "bench:react": "playwright test --config playwright.performance.config.ts --grep StatelyFlow && node ../../scripts/report-browser-benchmarks.mjs",
+    "bench:interaction": "playwright test --config playwright.performance.config.ts --grep 'viewport pan' && node ../../scripts/report-browser-benchmarks.mjs",
+    "bench:comparison": "playwright test --config playwright.performance.config.ts --grep 'StatelyFlow|React Flow' && node ../../scripts/report-browser-benchmarks.mjs",
     "storybook": "storybook dev -p 6008",
     "storybook:build": "storybook build"
   }