Node Toolbar

For many types of applications, having a toolbar or set of controls appear when a node is selected can be quite useful.

Content in the toolbar is not scaled as you zoom your flow in and out: this means it should always be visible.


import type { Align, Node, Position } from '@xyflow/vue';
 
export type NodeWithToolbarData = {
  label: string;
  toolbarPosition?: Position;
  align?: Align;
  forceToolbarVisible?: boolean;
};
 
export type NodeWithToolbarNode = Node<NodeWithToolbarData, 'node-with-toolbar'>;