FlowEditor 流程编排编辑器

基于 Vue Flow 构建，支持节点拖拽、连线、缩放、平移等操作的流程编辑器组件。

基础用法

Press enter or space to select a node. You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.

Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.

<template>
  <div style="height: 500px;">
    <x-flow-editor
      :nodes="nodes"
      :edges="edges"
      :show-minimap="true"
      :show-controls="true"
      :show-background="true"
      :editable="true"
      @nodes-change="handleNodesChange"
      @edges-change="handleEdgesChange"
      @node-click="handleNodeClick"
      @connect="handleConnect"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { FlowEditor } from '@xto/flow'

const nodes = ref([
  { id: '1', position: { x: 100, y: 100 }, data: { label: '开始节点' } },
  { id: '2', position: { x: 300, y: 100 }, data: { label: '处理节点' } },
  { id: '3', position: { x: 500, y: 100 }, data: { label: '结束节点' } }
])

const edges = ref([
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e2-3', source: '2', target: '3' }
])

const handleNodesChange = (nodes) => {
  console.log('节点变化:', nodes)
}

const handleEdgesChange = (edges) => {
  console.log('连线变化:', edges)
}

const handleNodeClick = (node, event) => {
  console.log('点击节点:', node)
}

const handleConnect = (connection) => {
  console.log('新建连线:', connection)
}
</script>

背景类型

支持点状、线条、交叉三种背景类型。

<template>
  <!-- 点状背景 -->
  <x-flow-editor :background-type="'dots'" :background-color="'#f5f5f5'" />

  <!-- 线条背景 -->
  <x-flow-editor :background-type="'lines'" />

  <!-- 交叉背景 -->
  <x-flow-editor :background-type="'cross'" />
</template>

连线类型

支持多种连线样式。

<template>
  <!-- 贝塞尔曲线 -->
  <x-flow-editor :edge-type="'bezier'" />

  <!-- 直线 -->
  <x-flow-editor :edge-type="'straight'" />

  <!-- 步进线 -->
  <x-flow-editor :edge-type="'step'" />

  <!-- 平滑步进线 -->
  <x-flow-editor :edge-type="'smoothstep'" />

  <!-- 动画连线 -->
  <x-flow-editor :edge-type="'smoothstep'" :edge-animated="true" />
</template>

缩放控制

<template>
  <x-flow-editor
    :zoomable="true"
    :pannable="true"
    :min-zoom="0.1"
    :max-zoom="4"
  />
</template>

禁用编辑

Press enter or space to select a node. You can then use the arrow keys to move the node around. You can then use the arrow keys to move the node around, press delete to remove it and press escape to cancel.

Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel.

<template>
  <!-- 只读模式 -->
  <x-flow-editor :editable="false" :selectable="false" :connectable="false" :draggable="false" />
</template>

隐藏辅助组件

<template>
  <!-- 隐藏迷你地图 -->
  <x-flow-editor :show-minimap="false" />

  <!-- 隐藏控制面板 -->
  <x-flow-editor :show-controls="false" />

  <!-- 隐藏背景 -->
  <x-flow-editor :show-background="false" />
</template>

自定义节点类型

<template>
  <x-flow-editor :nodes="nodes" :node-types="customNodeTypes" />
</template>

<script setup>
import { markRaw } from 'vue'
import CustomNode from './CustomNode.vue'

const customNodeTypes = {
  custom: markRaw(CustomNode)
}

const nodes = [
  { id: '1', type: 'custom', position: { x: 100, y: 100 }, data: { label: '自定义节点' } }
]
</script>

方法调用

<template>
  <button @click="handleFitView">自适应视图</button>
  <button @click="handleZoomIn">放大</button>
  <button @click="handleZoomOut">缩小</button>
  
  <x-flow-editor ref="flowEditorRef" :nodes="nodes" />
</template>

<script setup>
import { ref } from 'vue'

const flowEditorRef = ref()

// 自适应视图
const handleFitView = () => {
  flowEditorRef.value?.fitView()
}

// 放大到指定比例
const handleZoomIn = () => {
  flowEditorRef.value?.zoomTo(1.5)
}

// 缩小
const handleZoomOut = () => {
  flowEditorRef.value?.zoomTo(0.5)
}

// 添加节点
const addNode = () => {
  flowEditorRef.value?.addNodes([
    { id: 'new-node', position: { x: 200, y: 200 }, data: { label: '新节点' } }
  ])
}

// 删除节点
const removeNode = (nodeId) => {
  flowEditorRef.value?.removeNodes([{ id: nodeId }])
}
</script>

API

Props

属性	说明	类型	默认值
nodes	初始节点数据	Node[]	[]
edges	初始连线数据	Edge[]	[]
showMinimap	是否显示迷你地图	boolean	true
showControls	是否显示控制面板	boolean	true
showBackground	是否显示背景网格	boolean	true
backgroundType	背景类型	'dots' | 'lines' | 'cross'	'dots'
backgroundColor	背景颜色	string	'#f5f5f5'
editable	是否可编辑	boolean	true
selectable	是否可选择节点	boolean	true
connectable	是否可连接节点	boolean	true
draggable	是否可拖拽节点	boolean	true
zoomable	是否可缩放	boolean	true
pannable	是否可平移	boolean	true
minZoom	最小缩放比例	number	0.1
maxZoom	最大缩放比例	number	4
nodeTypes	自定义节点类型映射	Record<string, Component>	{}
edgeType	连线类型	'default' | 'straight' | 'step' | 'smoothstep' | 'bezier'	'smoothstep'
edgeAnimated	是否显示连线动画	boolean	false

Events

事件名	说明
nodes-change	节点变化时触发
edges-change	连线变化时触发
node-click	点击节点时触发
node-dblclick	双击节点时触发
node-drag	拖拽节点时触发
node-drag-stop	拖拽节点结束时触发
edge-click	点击连线时触发
connect	新建连线时触发
pane-click	点击画布时触发
pane-ready	画布就绪时触发
edge-delete	删除连线时触发
connection-validate	连线验证时触发

Methods

方法名	说明
addNodes	添加节点
addEdges	添加连线
removeNodes	删除节点
removeEdges	删除连线
getNodes	获取所有节点
getEdges	获取所有连线
fitView	自适应视图
zoomTo	缩放到指定比例
setViewport	设置视图位置
project	像素坐标转流程坐标