组件

🌐 Components

<Background />

Background 组件使在基于节点的用户界面中呈现不同类型的背景变得方便。它有三种变体：线条、点和十字。

BaseEdge 组件在内部用于所有边。它可以在自定义边中使用，并为你处理不可见的辅助边和边标签。

你可以使用 ControlButton 组件向控制面板添加按钮，并将其作为子组件传递给 Controls 组件。

Controls 组件渲染一个小面板，其中包含方便的按钮用于放大、缩小、适应视图和锁定视口。

边缘是基于 SVG 的。如果你想渲染更复杂的标签，可以使用 EdgeLabelRenderer 组件来访问基于 div 的渲染器。该组件是一个门户，会在边缘上方的 div 中渲染标签。你可以在边缘标签渲染器示例中看到该组件的示例用法。

你可以使用 EdgeText 组件作为辅助组件，在自定义边缘中显示文本。

EdgeToolbar 组件可以在自定义边的一侧呈现工具栏或工具提示。该工具栏不会随视口缩放，以避免在缩小视图时内容变得过小。

Handle 组件用于你的自定义节点中以定义连接点。

MiniMap 组件可用于渲染流程的概览。它将每个节点渲染为 SVG 元素，并可视化当前视口相对于流程其余部分的位置。

要创建你自己的调整大小的用户界面，你可以使用 NodeResizeControl 组件，在那里你可以传递子元素（例如图标）。

NodeResizer 组件可以用来为你的节点添加调整大小的功能。它会在节点周围渲染可拖动的控件，以便在所有方向上调整大小。

NodeToolbar 组件可以在自定义节点的一侧渲染工具栏或提示工具。该工具栏不会随视口缩放，因此内容始终可见。

Panel 组件帮助你将内容定位在视口之上。它在内部被 MiniMap 和 Controls 组件使用。

ViewportPortal 组件可以用于在渲染节点和边的流程的同一视口中添加组件。当你想要渲染自己的组件，这些组件遵循与节点和边相同的坐标系，并且也会受到缩放和平移的影响时，这非常有用。