參考元件

元件

<Background />

Background 元件可以方便地呈現節點式 UI 中常見的不同背景類型。它有三種變體:線條、點和十字。

閱讀更多

<BaseEdge />

BaseEdge 元件在內部用於所有邊。它可以在自訂邊內部使用,並為您處理不可見的輔助邊和邊標籤。

閱讀更多

<ControlButton />

您可以使用 ControlButton 元件將按鈕新增至控制面板,並將其作為子元件傳遞給 Controls 元件。

閱讀更多

<Controls />

Controls 元件會呈現一個小面板,其中包含用於放大、縮小、調整檢視和鎖定視窗的便利按鈕。

閱讀更多

<EdgeLabelRenderer />

邊是基於 SVG 的。如果您想呈現更複雜的標籤,可以使用 EdgeLabelRenderer 元件來存取基於 div 的渲染器。此元件是一個入口網站,可在邊頂部定位的 div 中呈現標籤。您可以在邊標籤渲染器範例中看到該元件的使用範例。

閱讀更多

<MiniMap />

MiniMap 元件可用於呈現流程的概觀。它將每個節點呈現為 SVG 元素,並視覺化目前視窗相對於流程其餘部分的位置。

閱讀更多

<NodeResizer />

NodeResizer 元件可用於將調整大小功能新增至節點。它會在節點周圍呈現可拖曳的控制項,以在所有方向調整大小。

閱讀更多

<NodeResizeControl />

若要建立您自己的調整大小 UI,可以使用 NodeResizeControl 元件,在其中您可以傳遞子元件(例如圖示)。

閱讀更多

<NodeToolbar />

NodeToolbar 元件可以在自訂節點的一側呈現工具列或工具提示。此工具列不會隨視窗縮放,因此內容始終可見。

閱讀更多

<Panel />

Panel 元件可協助您將內容定位在視窗上方。它在內部由 MiniMap 和 Controls 元件使用。

閱讀更多

<ViewportPortal />

<ViewportPortal 元件可用於將元件新增至與節點和邊呈現的流程相同的視窗。當您想要呈現自己的元件,這些元件遵守與節點和邊相同的座標系統,並且也受到縮放和平移的影響時,這非常有用。

閱讀更多