Teleport Node

In complex diagramming applications, you often need to show floating toolbars, menus, or modal dialogs anchored to specific nodes. However, because the Flow engine uses intensive CSS transforms (pan/zoom) and overflow: hidden on its viewport, rendering large overlays directly inside a node's HTML will cause visual clipping and coordinate distortion.

The most elegant solution is to leverage Vue 3's built-in <Teleport> component. This allows you to logic-bind a dialog to a node while physically rendering it outside the transformed canvas area.

Teleport Modal Demo

Click the "Configure Node" button inside the node below. Its internal state will trigger a <Teleport> to the root container, ensuring the modal is centered correctly and remains crisp regardless of canvas scale.

Clickable Anchor

Context-Free Modal Overlay

Why use Teleport?

1. Coordinate Escape: The Flow content layer uses transform: translate3d. In most browsers, this creates a new containing block for all absolute/fixed children. By teleporting, you "bubble up" to a parent container that isn't transformed, keeping your UI standard.
2. Clipping Prevention: The engine uses overflow: hidden on its viewport. Any child element that exceeds the node's bounds will be clipped. Teleport circumvents this entirely.
3. Z-Index Consistency: It ensures your modals always appear above all nodes and edges—regardless of the node's internal stacking order or rendering priority.