<SvelteFlow />

The <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[]>` 包含节点数组的可写存储。	`writable([])`
#`edges`	`可写<Edge[]>` 包含边数组的可写存储。	`writable([])`
#`nodeTypes`	`记录<字符串, ComponentType<SvelteComponent<NodeProps>>>` 如果您想在流程中使用自定义节点，则需要让 Svelte Flow 了解它们。渲染新节点时，Svelte Flow 会在此对象中查找该节点的类型并渲染相应的组件。
#`edgeTypes`	`记录<字符串, ComponentType<SvelteComponent<EdgeProps>>>` 与节点类型一样，此属性允许您通过将边类型映射到 Svelte 组件来在流程中使用自定义边。
#`colorMode`	`ColorMode` 使用此类型，您可以在内置的浅色和深色主题之间切换。	`"light"`
#`nodeOrigin`	`[数字, 数字]` 在流程中放置节点或查找其 x 和 y 位置时要使用的节点原点。原点为 [0,0] 表示节点的左上角将放置在 x 和 y 位置。	`[0,0]`
#`nodeDragThreshold`	`数字` 使用大于零的阈值可以延迟节点拖动事件。如果阈值为 1，则需要拖动节点 1 像素才会触发拖动事件。	`0`
#`style`	`字符串`
#`class`	`字符串`

视窗属性

名称	类型	默认值
#`initialViewport`	`Viewport` 设置视窗的初始位置和缩放。如果提供了默认视窗，但启用了 fitView，则会忽略默认视窗。	`{ x: 0, y: 0, zoom: 1 }`
#`viewport`	`可写<Viewport>` 如果您需要对视窗有更多控制权，可以传递一个可写存储。	`undefined`
#`fitView`	`布尔值` 为 true 时，流程将被缩放和平移以最初提供的所有节点都适合。	`false`
#`fitViewOptions`	`FitViewOptions` 通常在 Svelte Flow 实例上调用 fitView 时，您可以提供一个选项对象来自定义其行为。此属性允许您对初始 fitView 调用执行相同的操作。
#`minZoom`	`数字`	`0.5`
#`maxZoom`	`数字`	`2`
#`snapGrid`	`[数字, 数字] \| 未定义` 此属性配置节点将捕捉到的网格。	`undefined`
#`onlyRenderVisibleElements`	`布尔值` 您可以启用此优化来指示 Svelte Flow 仅渲染在视窗中可见的节点和边。	`false`
#`translateExtent`	`CoordinateExtent` 默认情况下，视窗无限延伸。您可以使用此属性设置边界。第一对坐标是左上角边界，第二对坐标是右下角边界。	`[[-∞,-∞], [+∞,+∞]]`
#`preventScrolling`	`布尔值` 禁用此属性将允许用户即使将指针放在流程上也能滚动页面。	`true`
#`attributionPosition`	`PanelPosition` 默认情况下，Svelte Flow 会在流程图的右下角渲染一个小的版权声明。如果您想在其他地方放置内容，可以使用此道具更改其位置。	`"bottom-right"`

边缘属性

名称	类型	默认值
#`defaultMarkerColor`	`字符串`	`"#b1b1b7"`
#`defaultEdgeOptions`	`DefaultEdgeOptions` 这里设置的任何默认值都将应用于添加到流程的所有新边缘。如果新边缘上存在属性，则属性会覆盖这些默认值。
#`onedgecreate`	`(连接: Connection) => Edge` 当创建新的边缘时，将调用此处理程序。您可以使用它来修改新创建的边缘。

事件处理程序

通用事件

名称	类型
#`oninit`	`() => void` 当流程初始化时，将调用此处理程序。
#`onerror`	`(代码: 字符串, 消息: 字符串) => void` 偶尔，可能会发生一些导致 Svelte Flow 错误的事情。为了防止您的应用程序崩溃，我们会将一条消息记录到控制台，然后调用此处理程序。您可能将其用于额外的记录或向用户显示消息。
#`ondelete`	`(参数: { 节点: Node[]; 边缘: Edge[] }) => void` 当用户删除节点或边缘时，将调用此处理程序。
#`onbeforedelete`	`异步 (参数: { 节点: Node[]; 边缘: Edge[] }) => 布尔值` 此处理程序在用户删除节点或边缘之前被调用，并提供了一种通过返回 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; 目标节点: Node \| 空; 节点: Node[] }>) => void` 此事件用于单个节点和选择。如果您拖动选择，则 targetNode 为 null
#`on:nodedrag`	`(事件: CustomEvent<{事件: MouseEvent; 目标节点: Node \| 空; 节点: Node[] }>) => void` 此事件用于单个节点和选择。如果您拖动选择，则 targetNode 为 null
#`on:nodedragstop`	`(事件: CustomEvent<{事件: MouseEvent; 目标节点: Node \| 空; 节点: Node[] }>) => void` 此事件用于单个节点和选择。如果您拖动选择，则 targetNode 为 null

边缘事件

名称	类型
#`on:edgeclick`	`(事件: CustomEvent<{事件: MouseEvent; 边缘: Edge }>) => void`
#`on:edgecontextmenu`	`(事件: CustomEvent<{事件: MouseEvent; 边缘: Edge }>) => void`

连接事件

名称	类型
#`onconnectstart`	`(事件: MouseEvent \| TouchEvent, 参数: { 节点ID?: 字符串; 处理程序ID?: 字符串; 处理程序类型?: '来源' \| '目标'; }) => void` 当用户开始拖动连接线时，将触发此事件。
#`onconnect`	`(连接: Connection) => void` 当连接成功完成时，将触发此事件。
#`onconnectend`	`(事件: MouseEvent \| TouchEvent) => void` 无论连接是否创建，只要用户放下连接线，就会触发此事件。

窗格事件

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

键盘属性

名称	类型	默认值
#`deleteKey`	`KeyDefinition \| KeyDefinition[] \| 空`	`"Backspace"`
#`selectionKey`	`KeyDefinition \| KeyDefinition[] \| 空`	`"Shift"`
#`multiSelectionKey`	`KeyDefinition \| KeyDefinition[] \| 空`	`"Meta" for MacOs, "Control" for other systems`
#`zoomActivationKey`	`KeyDefinition \| KeyDefinition[] \| 空` 如果设置了键，即使将 panOnScroll 设置为 false，您也可以在按下该键时缩放视窗。通过将此道具设置为 null，您可以禁用此功能。	`"Meta" for MacOs, "Control" for other systems`
#`panActivationKey`	`KeyDefinition \| KeyDefinition[] \| 空` 如果设置了键，即使将 panOnScroll 设置为 false，您也可以在按下该键时平移视窗。通过将此道具设置为 null，您可以禁用此功能。	`"Space"`

交互属性

名称	类型	默认值
#`nodesDraggable`	`布尔值` 控制所有节点是否可拖动。可以通过设置其可拖动道具来覆盖单个节点的此设置。如果您想在不可拖动的节点上使用鼠标处理程序，则需要将“nopan”类添加到这些节点。	`true`
#`nodesConnectable`	`布尔值` 控制所有节点是否可连接。可以通过设置其 connectable 道具来覆盖单个节点的此设置。	`true`
#`elementsSelectable`	`布尔值`	`true`
#`autoPanOnConnect`	`布尔值`	`true`
#`autoPanOnNodeDrag`	`布尔值`	`true`
#`panOnDrag`	`布尔值 \| (0 \| 1 \| 2 \| 3 \| 4)[]` 启用此道具允许用户通过单击和拖动来平移视窗。您也可以将此道具设置为数字数组以限制哪些鼠标按钮可以激活平移。例如，[0,2] 将允许使用鼠标左键和右键平移。	`true`
#`selectionOnDrag`	`布尔值`	`false`
#`selectionMode`	`"部分" \| "全部"` 当设置为“partial”时，当用户通过单击和拖动节点创建选择框时，即使节点只有一部分在框内，也会被选中。	`"full"`
#`panOnScroll`	`布尔值`	`false`
#`panOnScrollSpeed`	`数字`
#`panOnScrollMode`	`"free" \| "horizontal" \| "vertical"` 此属性用于限制启用 panOnScroll 时平移的方向。“free”选项允许在任何方向进行平移。	`"free"`
#`zoomOnScroll`	`布尔值`	`true`
#`zoomOnPinch`	`布尔值`	`true`
#`zoomOnDoubleClick`	`布尔值`	`true`
#`connectionMode`	`"loose" \| "strict"` 松散的连接模式允许您将任何类型的句柄彼此连接。严格模式只允许您将源句柄连接到目标句柄。	`"strict"`

连接线属性

名称	类型	默认值
#`isValidConnection`	`(连接: Connection) => 布尔值` 此属性允许您控制哪些连接有效。它在创建边之前被调用。	`() => true`
#`connectionRadius`	`数字` 句柄周围的半径，在该半径内您放下连接线以创建新的边。	`20`
#`connectionLineType`	`ConnectionLineType` 用于连接线的边的路径类型。尽管创建的边可以是任何类型，但 Svelte Flow 需要在创建边之前知道连接线渲染的路径类型！	`ConnectionLineType.Bezier`
#`connectionLineStyle`	`字符串`
#`connectionLineWrapperStyles`	`字符串`

备注

此组件的属性作为SvelteFlowProps导出

API 参考 <SvelteFlowProvider />