<SvelteFlow />

<SvelteFlow /> 組件是您的 Svelte Flow 應用程式的核心。

<script>
  import { writable } from 'svelte/store';
  import { SvelteFlow } from '@xyflow/svelte';
 
  const nodes = writable([
    { id: 'a', data: { label: 'node a' }, position: { x: 0, y: 0 } },
    { id: 'b', data: { label: 'node b' }, position: { x: 0, y: 100 } }
  ]);
 
  const edges = writable([
    { id: 'e1-2', source: 'a', target: 'b' }
  ]);
</script>
 
<SvelteFlow
  nodes={nodes}
  edges={edges}
  fitView
/>

此組件接收許多不同的屬性，其中大多數是可選的。我們嘗試將它們分類成有意義的群組，以幫助您找到方向。

常用屬性

這些是您在使用 Svelte Flow 時最常用的屬性。

名稱	類型	預設值
#`nodes`	`可寫入<Node[]>` 一個可寫入的 store，包含節點陣列。	`writable([])`
#`edges`	`可寫入<Edge[]>` 一個可寫入的 store，包含邊緣陣列。	`writable([])`
#`nodeTypes`	`Record<string, ComponentType<SvelteComponent<NodeProps>>>` 如果您想在您的流程中使用自訂節點，您需要讓 Svelte Flow 知道它們。在渲染一個新節點時，Svelte Flow 將在這個物件中查找該節點的類型，並渲染相應的組件。
#`edgeTypes`	`Record<string, ComponentType<SvelteComponent<EdgeProps>>>` 與節點類型一樣，此屬性可讓您透過將邊緣類型對應到 Svelte 組件，在您的流程中使用自訂邊緣。
#`colorMode`	`ColorMode` 透過此類型，您可以在內建的淺色和深色主題之間切換。	`"light"`
#`nodeOrigin`	`[number, number]` 在流程中放置節點或查找其 x 和 y 位置時要使用的節點原點。原點為 [0,0] 表示節點的左上角將放置在 x 和 y 位置。	`[0,0]`
#`nodeDragThreshold`	`number` 使用大於零的閾值，您可以延遲節點拖曳事件。如果閾值等於 1，您需要拖曳節點 1 個像素，才會觸發拖曳事件。	`0`
#`style`	`string`
#`class`	`string`

視窗屬性

名稱	類型	預設值
#`initialViewport`	`Viewport` 設定視窗的初始位置和縮放。如果提供預設視窗但已啟用 fitView，則會忽略預設視窗。	`{ x: 0, y: 0, zoom: 1 }`
#`viewport`	`可寫入<Viewport>` 如果您需要更多控制視窗，您可以傳遞一個可寫入的 store。	`undefined`
#`fitView`	`boolean` 當為 true 時，流程將會縮放和平移以適應最初提供的所有節點。	`false`
#`fitViewOptions`	`FitViewOptions` 當您通常在 Svelte Flow 實例上呼叫 fitView 時，您可以提供一個選項物件來自訂其行為。此屬性可讓您對初始 fitView 呼叫執行相同的操作。
#`minZoom`	`number`	`0.5`
#`maxZoom`	`number`	`2`
#`snapGrid`	`[number, number] \| 未定義` 此屬性設定節點將對齊的格線。	`undefined`
#`onlyRenderVisibleElements`	`boolean` 您可以啟用此最佳化，指示 Svelte Flow 僅渲染視窗中可見的節點和邊緣。	`false`
#`translateExtent`	`CoordinateExtent` 預設情況下，視窗會無限延伸。您可以使用此屬性設定邊界。第一對座標是左上邊界，第二對座標是右下邊界。	`[[-∞,-∞], [+∞,+∞]]`
#`preventScrolling`	`boolean` 停用此屬性將允許使用者即使在他們的指標位於流程上方時也能捲動頁面。	`true`
#`attributionPosition`	`PanelPosition` 預設情況下，Svelte Flow 會在流程的右下角渲染一個小的歸屬。如果想要將其他內容放置在那裡，可以使用此屬性來變更其位置。	`"bottom-right"`

邊緣屬性

名稱	類型	預設值
#`defaultMarkerColor`	`string`	`"#b1b1b7"`
#`defaultEdgeOptions`	`DefaultEdgeOptions` 此處設定的任何預設值都將套用至新增至流程的所有新邊緣。如果新的邊緣上存在屬性，則它們將覆寫這些預設值。
#`onedgecreate`	`(連線: Connection) => Edge` 當建立新的邊緣時，會呼叫此處理常式。您可以使用它來修改新建立的邊緣。

事件處理常式

一般事件

名稱	類型
#`oninit`	`() => void` 當流程初始化時，會呼叫此處理常式。
#`onerror`	`(代碼: string, 訊息: string) => void` 有時可能會發生導致 Svelte Flow 發生錯誤的情況。我們不會讓您的應用程式崩潰，而是將訊息記錄到主控台，然後呼叫此處理常式。您可以使用它進行額外的記錄或向使用者顯示訊息。
#`ondelete`	`(參數: { 節點: Node[]; 邊緣: Edge[] }) => void` 當使用者刪除節點或邊緣時，會呼叫此處理常式。
#`onbeforedelete`	`async (參數: { 節點: Node[]; 邊緣: Edge[] }) => boolean` 當使用者刪除節點或邊緣之前會呼叫此處理常式，並提供透過傳回 false 來中止刪除的方法。

節點事件

名稱	類型
#`on:nodeclick`	`(事件: CustomEvent<{事件: MouseEvent \| TouchEvent; 節點: Node }>) => void`
#`on:nodecontextmenu`	`(事件: CustomEvent<{事件: MouseEvent; 節點: Node }>) => void`
#`on:nodemouseenter`	`(事件: CustomEvent<{事件: MouseEvent; 節點: Node }>) => void`
#`on:nodemousemove`	`(事件: CustomEvent<{事件: MouseEvent; 節點: Node }>) => void`
#`on:nodemouseleave`	`(事件: CustomEvent<{事件: MouseEvent; 節點: Node }>) => void`
#`on:nodedragstart`	`(事件: CustomEvent<{事件: MouseEvent; targetNode: Node \| null; 節點: Node[] }>) => void` 此事件用於單個節點和選取範圍。如果您拖曳選取範圍，則 targetNode 為 null
#`on:nodedrag`	`(事件: CustomEvent<{事件: MouseEvent; targetNode: Node \| null; 節點: Node[] }>) => void` 此事件用於單個節點和選取範圍。如果您拖曳選取範圍，則 targetNode 為 null
#`on:nodedragstop`	`(事件: CustomEvent<{事件: MouseEvent; targetNode: Node \| null; 節點: Node[] }>) => void` 此事件用於單個節點和選取範圍。如果您拖曳選取範圍，則 targetNode 為 null

邊緣事件

名稱	類型
#`on:edgeclick`	`(事件: CustomEvent<{事件: MouseEvent; 邊緣: Edge }>) => void`
#`on:edgecontextmenu`	`(事件: CustomEvent<{事件: MouseEvent; 邊緣: Edge }>) => void`

連線事件

名稱	類型
#`onconnectstart`	`(事件: MouseEvent \| TouchEvent, 參數: { nodeId?: string; handleId?: string; handleType?: '來源' \| '目標'; }) => void` 當使用者開始拖曳連線線時，會觸發此事件。
#`onconnect`	`(連線: Connection) => void` 當連線成功完成時，會觸發此事件。
#`onconnectend`	`(事件: MouseEvent \| TouchEvent) => void` 每當使用者放下連線線時，無論是否建立連線都會觸發此事件。

窗格事件

名稱	類型
#`on:paneclick`	`(事件: CustomEvent<{事件: MouseEvent \| TouchEvent }>) => void`
#`on:panecontextmenu`	`(事件: CustomEvent<{事件: MouseEvent }>) => void`

鍵盤屬性

名稱	類型	預設值
#`deleteKey`	`KeyDefinition \| KeyDefinition[] \| null`	`"Backspace"`
#`selectionKey`	`KeyDefinition \| KeyDefinition[] \| null`	`"Shift"`
#`multiSelectionKey`	`KeyDefinition \| KeyDefinition[] \| null`	`"Meta" for MacOs, "Control" for other systems`
#`zoomActivationKey`	`KeyDefinition \| KeyDefinition[] \| null` 如果設定了按鍵，即使 panOnScroll 設定為 false，您也可以在按住該按鍵時縮放視窗。將此屬性設定為 null 可以停用此功能。	`"Meta" for MacOs, "Control" for other systems`
#`panActivationKey`	`KeyDefinition \| KeyDefinition[] \| null` 如果設定了按鍵，即使 panOnScroll 設定為 false，您也可以在按住該按鍵時平移視窗。將此屬性設定為 null 可以停用此功能。	`"Space"`

互動屬性

名稱	類型	預設值
#`nodesDraggable`	`boolean` 控制是否所有節點都應該是可拖曳的。個別節點可以透過設定其 draggable 屬性來覆寫此設定。如果您想在不可拖曳的節點上使用滑鼠處理常式，您需要將 "nopan" class 添加到這些節點。	`true`
#`nodesConnectable`	`boolean` 控制是否所有節點都應該是可連接的。個別節點可以透過設定其 connectable 屬性來覆寫此設定。	`true`
#`elementsSelectable`	`boolean`	`true`
#`autoPanOnConnect`	`boolean`	`true`
#`autoPanOnNodeDrag`	`boolean`	`true`
#`panOnDrag`	`boolean \| (0 \| 1 \| 2 \| 3 \| 4)[]` 啟用此屬性允許使用者透過點擊和拖曳來平移視窗。您也可以將此屬性設定為數字陣列，以限制哪些滑鼠按鈕可以啟動平移。例如，[0,2] 將允許使用滑鼠左鍵和右鍵進行平移。	`true`
#`selectionOnDrag`	`boolean`	`false`
#`selectionMode`	`"部分" \| "完整"` 當設定為「部分」時，當使用者透過點擊和拖曳建立選取框時，即使只有部分在選取框中的節點仍會被選取。	`"full"`
#`panOnScroll`	`boolean`	`false`
#`panOnScrollSpeed`	`number`
#`panOnScrollMode`	`"自由" \| "水平" \| "垂直"` 此屬性用於限制啟用 panOnScroll 時的平移方向。「自由」選項允許在任何方向上平移。	`"free"`
#`zoomOnScroll`	`boolean`	`true`
#`zoomOnPinch`	`boolean`	`true`
#`zoomOnDoubleClick`	`boolean`	`true`
#`connectionMode`	`"寬鬆" \| "嚴格"` 寬鬆的連線模式將允許您將任何類型的控制點相互連接。嚴格模式只允許您將來源控制點連接到目標控制點。	`"strict"`

連線線條屬性

名稱	類型	預設值
#`isValidConnection`	`(連線: Connection) => boolean` 此屬性允許您控制哪些連線是有效的。它會在建立邊緣之前被呼叫。	`() => true`
#`connectionRadius`	`number` 控制點周圍的半徑，您可以在該半徑內放置連線線條以建立新邊緣。	`20`
#`connectionLineType`	`ConnectionLineType` 用於連線線條的邊緣路徑類型。雖然建立的邊緣可以是任何類型，但在建立邊緣之前，Svelte Flow 需要知道要為連線線條呈現哪種路徑類型！	`ConnectionLineType.Bezier`
#`connectionLineStyle`	`string`
#`connectionLineWrapperStyles`	`string`

注意事項

此元件的屬性會匯出為 SvelteFlowProps

API 參考 <SvelteFlowProvider />