Merge branch 'main' into feat/resize-node

examples/vite-app/cypress/e2e/minimap.cy.ts

@@ -35,17 +35,20 @@ describe('Minimap Testing', () => {
   });
 
   it('changes node position', () => {
-    const xPosBeforeDrag = Cypress.$('.react-flow__minimap-node:first').attr('x');
-    const yPosBeforeDrag = Cypress.$('.react-flow__minimap-node:first').attr('y');
+    const minimapNode = Cypress.$('.react-flow__minimap-node:first');
+
+    const xPosBeforeDrag = Number(minimapNode.attr('x'));
+    const yPosBeforeDrag = Number(minimapNode.attr('y'));
 
     cy.drag('.react-flow__node:first', { x: 500, y: 25 })
       .wait(100)
       .then(() => {
-        const xPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr('x');
-        const yPosAfterDrag = Cypress.$('.react-flow__minimap-node:first').attr('y');
+        const xPosAfterDrag = Number(minimapNode.attr('x'));
+        const yPosAfterDrag = Number(minimapNode.attr('y'));
 
-        expect(xPosBeforeDrag).to.not.equal(xPosAfterDrag);
-        expect(yPosBeforeDrag).to.not.equal(yPosAfterDrag);
+        expect(xPosAfterDrag).not.to.equal(xPosBeforeDrag);
+        expect(yPosAfterDrag).not.to.equal(yPosBeforeDrag);
+        expect(xPosAfterDrag - xPosBeforeDrag).to.be.greaterThan(yPosAfterDrag - yPosBeforeDrag);
       });
   });
 

examples/vite-app/src/examples/NodeToolbar/SelectedNodesToolbar.tsx

@@ -0,0 +1,17 @@
+import { NodeToolbar, ReactFlowState, useStore } from 'reactflow';
+
+const selectedNodesSelector = (state: ReactFlowState) =>
+  Array.from(state.nodeInternals.values())
+    .filter((node) => node.selected)
+    .map((node) => node.id);
+
+export default function SelectedNodesToolbar() {
+  const selectedNodeIds = useStore(selectedNodesSelector);
+  const isVisible = selectedNodeIds.length > 1;
+
+  return (
+    <NodeToolbar nodeId={selectedNodeIds} isVisible={isVisible}>
+      <button>Selection action</button>
+    </NodeToolbar>
+  );
+}

examples/vite-app/src/examples/NodeToolbar/index.tsx

@@ -11,6 +11,7 @@ import ReactFlow, {
 } from 'reactflow';
 
 import CustomNode from './CustomNode';
+import SelectedNodesToolbar from './SelectedNodesToolbar';
 
 const nodeTypes: NodeTypes = {
   custom: CustomNode,
@@ -79,6 +80,7 @@ export default function NodeToolbarExample() {
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />
       <Controls />
+      <SelectedNodesToolbar />
     </ReactFlow>
   );
 }

examples/vite-app/src/examples/Subflow/index.tsx

@@ -11,6 +11,7 @@ import ReactFlow, {
   Controls,
   MiniMap,
   Background,
+  NodeOrigin,
 } from 'reactflow';
 
 import DebugNode from './DebugNode';
@@ -90,7 +91,7 @@ const initialNodes: Node[] = [
   {
     id: '5a',
     data: { label: 'Node 5a' },
-    position: { x: 25, y: 50 },
+    position: { x: 0, y: 0 },
     className: 'light',
     parentNode: '5',
     extent: 'parent',