diff --git a/examples/vite-app/src/examples/NodeToolbar/index.tsx b/examples/vite-app/src/examples/NodeToolbar/index.tsx index 13dba39b..424ee202 100644 --- a/examples/vite-app/src/examples/NodeToolbar/index.tsx +++ b/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} > diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/node-toolbar/src/NodeToolbar.tsx index c8085ecf..c413eb30 100644 --- a/packages/node-toolbar/src/NodeToolbar.tsx +++ b/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),