fix(node-toolbar): handle nodeOrigin

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

@@ -7,6 +7,7 @@ import ReactFlow, {
   Edge,
   NodeTypes,
   Position,
+  NodeOrigin,
 } from 'reactflow';
 
 import CustomNode from './CustomNode';
@@ -53,6 +54,7 @@ const initialEdges: Edge[] = [
 ];
 
 const defaultEdgeOptions = { zIndex: 0 };
+const nodeOrigin: NodeOrigin = [0.5, 0.5];
 
 export default function NodeToolbarExample() {
   return (
@@ -65,6 +67,7 @@ export default function NodeToolbarExample() {
       fitView
       defaultEdgeOptions={defaultEdgeOptions}
       nodeTypes={nodeTypes}
+      nodeOrigin={nodeOrigin}
     >
       <Background variant={BackgroundVariant.Dots} />
       <MiniMap />

packages/node-toolbar/src/NodeToolbar.tsx

@@ -25,7 +25,7 @@ const nodeEqualityFn = (a: SelectedNode, b: SelectedNode) =>
   a?.selected === b?.selected &&
   a?.[internalsSymbol]?.z === b?.[internalsSymbol]?.z;
 
-const transformSelector = (state: ReactFlowState) => state.transform;
+const transformSelector = (state: ReactFlowState) => ({ transform: state.transform, nodeOrigin: state.nodeOrigin });
 
 function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number): string {
   // position === Position.Top
@@ -68,13 +68,13 @@ function NodeToolbar({
 }: NodeToolbarProps) {
   const nodeSelector = useCallback((state: ReactFlowState): SelectedNode => state.nodeInternals.get(nodeId), [nodeId]);
   const node = useStore(nodeSelector, nodeEqualityFn);
-  const transform = useStore(transformSelector, shallow);
+  const { transform, nodeOrigin } = useStore(transformSelector, shallow);
 
   if (!isActive || !node) {
     return null;
   }
 
-  const nodeRect: Rect = getRectOfNodes([node]);
+  const nodeRect: Rect = getRectOfNodes([node], nodeOrigin);
 
   const wrapperStyle: CSSProperties = {
     transform: getTransform(nodeRect, transform, position, offset),