自訂節點

Svelte Flow 的一個強大功能是能夠添加自訂節點。您可以在自訂節點中呈現您想要的任何內容。您可以定義多個來源和目標控制點，並呈現表單輸入，甚至是互動式圖表。在本指南中，我們將實作兩個具有顏色輸入欄位的節點，這些欄位會更新流程的背景顏色。

建立自訂節點元件

自訂節點只是一個 Svelte 元件。在內部，它會被包裝以提供基本功能，例如拖曳和選取。從包裝器元件中，我們會傳遞屬性，例如位置或資料，除了其他屬性之外。

讓我們開始實作 ColorPickerNode。我們正在使用Handle 元件將我們的自訂節點與其他節點連接，並在節點中添加一個 type=“color” 的輸入欄位

ColorPickerNode.svelte

<script lang="ts">
  import { Handle, Position, type NodeProps } from '@xyflow/svelte';
  import type { Writable } from 'svelte/store';
 
  type $$Props = NodeProps;
 
  export let data: { color: Writable<string> };
 
  const { color } = data;
</script>
 
<div class="colorpicker">
  <Handle type="target" position={Position.Left} />
  <div>
    color: <strong>{$color}</strong>
  </div>
  <input
    class="nodrag"
    type="color"
    on:input={(evt) => data.color.set(evt.target?.value)}
    value={$color}
  />
  <Handle type="source" position={Position.Right} />
</div>

如您所見，我們已將類別名稱 "nodrag" 添加到輸入中。這樣可以防止在輸入欄位內拖曳，在這種情況下，這將允許我們選取節點內的文字。

新增節點類型

您可以透過將新的節點類型添加到nodeTypes 屬性中，將新的節點類型添加到 Svelte Flow。 nodeTypes 屬性是一個物件，其中鍵是節點類型的名稱，值應該是為此節點類型呈現的元件。讓我們將 ColorPickerNode 添加到 nodeTypes 屬性

App.svelte

<script>
  import { SvelteFlow } from '@xyflow/svelte';
  import ColorPickerNode from './ColorPickerNode.svelte';
 
  const nodeTypes = {
    'color-picker': ColorPickerNode
  };
</script>
 
<SvelteFlow {nodeTypes} />

定義 "colorPicker" 節點類型後，您可以透過設定 type 節點選項將其套用到節點

const nodes = writable([
  {
    id: 'node-1',
    // this type needs to match the newly defined node type
    type: 'color-picker',
    position: { x: 0, y: 0 },
    // data is used to store the current color value
    data: { color: writable('#ff4000') },
  },
]);

節點的 data 欄位可用於儲存您喜歡的任何資料。在這種情況下，我們將目前的顏色值儲存在可寫入的儲存空間中。這使得稍後從自訂節點內更新它變得很容易。將所有內容放在一起並添加一些基本樣式後，我們得到一個外觀不錯的自訂節點，其中包含顏色選擇器。

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

唯讀

調整流程背景顏色

現在我們有一個帶有顏色選擇器的自訂節點，我們想要更新流程的背景顏色。為了讓這更有趣一點，我們添加另一個節點，然後使用 CSS color-mix 表示法混合兩種顏色。為此，我們在節點陣列中添加另一個節點，然後訂閱這兩個節點的顏色儲存。每當其中一種顏色變更時，我們就會更新流程的背景顏色

<script lang="ts">
const data: string = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

唯讀

抑制未知的屬性警告

遵循本指南，您可能會想知道為什麼您的瀏覽器控制台會充斥著如下所示的警告

<CustomNode /> was created with unknown prop 'height'

這是因為包裝器元件總是將每個屬性傳遞給自訂節點元件，無論您是否在您的 svelte 元件中實作它們。若要抑制它們，只需將 $$restProps 添加到一行，如下所示

CustomNode.svelte

<script>
    // Your svelte flow code...
 
    $$restProps;
</script>

建立流程子流程