自定义节点

Svelte Flow 的一个强大功能是能够添加自定义节点。您可以在自定义节点中渲染您想要的任何内容。您可以定义多个源和目标句柄，并渲染表单输入甚至交互式图表。在本指南中，我们将实现两个带有颜色输入字段的节点，它们更新流程的背景颜色。

创建自定义节点组件

自定义节点只是一个 Svelte 组件。在内部，它会被包装以提供基本功能，例如拖动和选择。从包装组件中，我们传递了诸如位置或数据之类的属性，以及其他属性。

让我们开始实现 ColorPickerNode。我们使用 Handle 组件将我们的自定义节点连接到其他节点，并添加一个类型为“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>

构建流程子流程