@statelyai/flow-react 0.9.2 → 0.9.4

package/dist/esm/index.js

@@ -551,7 +551,7 @@ function stringArraysEqual(a, b) {
 }
 function nodePaintEntriesEqual(a, b) {
 	if (a.length !== b.length) return false;
-	for (let index = 0; index < a.length; index++) if (a[index]?.id !== b[index]?.id || a[index]?.orderIndex !== b[index]?.orderIndex) return false;
+	for (let index = 0; index < a.length; index++) if (a[index]?.id !== b[index]?.id || a[index]?.zIndex !== b[index]?.zIndex) return false;
 	return true;
 }
 function classNames$1(...values) {
@@ -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,16 @@ 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 paintZIndices = instance.internals.engine.getPaintZIndices().nodes;
 		return context.graph.nodes.flatMap((node) => {
-			const orderIndex = paintOrder.get(node.id);
-			return orderIndex === void 0 ? [] : [{
+			const zIndex = paintZIndices.get(node.id);
+			return zIndex === void 0 ? [] : [{
 				id: node.id,
-				orderIndex
+				zIndex
 			}];
 		});
-	}, { isEqual: nodePaintEntriesEqual });
+	}, nodePaintEntriesEqual);
 	const observer = useMeasurementObserver();
 	return /* @__PURE__ */ jsx("div", {
 		"aria-label": "nodes",
@@ -1405,13 +1430,13 @@ function NodeLayer(props) {
 			transformOrigin: "0 0",
 			pointerEvents: "none"
 		},
-		children: nodePaintEntries.map(({ id, orderIndex }) => {
+		children: nodePaintEntries.map(({ id, zIndex }) => {
 			if (renderableIds && !renderableIds.nodeIds.has(id)) return null;
 			return /* @__PURE__ */ jsx(NodeView, {
 				flow: instance,
 				geometryObserver: props.geometryObserver,
 				id,
-				orderIndex,
+				zIndex,
 				observer,
 				projections: props.projections,
 				renderNode: props.renderNode
@@ -1419,8 +1444,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 +1494,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,9 +1566,9 @@ 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,
+				zIndex: props.zIndex,
 				opacity: attrs.opacity
 			},
 			children: props.renderNode ? /* @__PURE__ */ jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/flow-react",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "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.1",
+    "@statelyai/flow-dom": "3.4.4"
   },
   "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"
   }