Merge branch 'main' into feat/resize-node

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',