vue-node-registry API 文档

@logicflow/vue-node-registry API 文档

简介

@logicflow/vue-node-registry 是一个用于在 LogicFlow 中渲染 Vue 组件的工具包。它提供了一套完整的 API 来注册和管理自定义 Vue 节点。

API 列表

1. register

功能: 注册自定义 Vue 节点到 LogicFlow 实例中

使用方法:

import { register } from '@logicflow/vue-node-registry'

register(
  {
    type: 'custom-vue-node',
    component: YourVueComponent,
    model: YourCustomNodeModel, // 可选
    view: CustomNodeView, // 可选
    effect: ['properties'], // 可选
  },
  lf
)

参数说明:

• config: VueNodeConfig 类型
  • type: string (必需) - 节点类型标识符
  • component: any (必需) - Vue 组件
  • model: any (可选) - 自定义节点数据模型
  • view: any (可选) - 自定义节点视图类
  • effect: (keyof LogicFlow.PropertiesType)[] (可选) - 需要监听的属性列表

注意事项:

• type 参数是必需的，不能为空
• 如果未提供 model，将使用默认的 VueNodeModel
• 如果未提供 view，将使用默认的 VueNodeView
• 如果未提供 effect，将不会监听任何属性变化

导出位置: src/registry.ts

2. getTeleport

功能: 获取用于渲染 Vue 组件的 Teleport 容器组件

使用方法:

import { getTeleport } from '@logicflow/vue-node-registry'

const TeleportContainer = getTeleport()

参数说明:

• 无参数

返回值:

• Vue 组件，需要传入 flowId 属性

注意事项:

• 仅在 Vue 3 环境下可用
• 必须提供 flowId 属性
• 用于管理多个流程图实例的组件渲染

导出位置: src/teleport.ts

3. connect

功能: 将 Vue 组件连接到指定的 DOM 容器

使用方法:

import { connect } from '@logicflow/vue-node-registry'

connect(id, component, container, node, graph)

参数说明:

• id: string - 连接的唯一标识符
• component: any - Vue 组件
• container: HTMLDivElement - 目标 DOM 容器
• node: BaseNodeModel - 节点数据模型
• graph: GraphModel - 图数据模型

注意事项:

• 仅在 active 状态为 true 时生效
• 组件会被 markRaw 处理以避免不必要的响应式

导出位置: src/teleport.ts

4. disconnect

功能: 断开指定 ID 的组件连接

使用方法:

import { disconnect } from '@logicflow/vue-node-registry'

disconnect(id)

参数说明:

• id: string - 要断开的连接 ID

注意事项:

• 仅在 active 状态为 true 时生效

导出位置: src/teleport.ts

5. isActive

功能: 检查 Teleport 系统是否处于活动状态

使用方法:

import { isActive } from '@logicflow/vue-node-registry'

const active = isActive()

参数说明:

• 无参数

返回值:

• boolean - 当前是否处于活动状态

导出位置: src/teleport.ts

使用示例

import LogicFlow from '@logicflow/core'
import { register, getTeleport } from '@logicflow/vue-node-registry'
import YourVueComponent from './YourVueComponent.vue'

// 创建 LogicFlow 实例
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  grid: true,
})

// 注册自定义节点
register({
  type: 'custom-vue-node',
  component: YourVueComponent,
}, lf)

// 获取 Teleport 容器
const TeleportContainer = getTeleport()

// 在模板中使用
<template>
  <div>
    <div id="container"></div>
    <TeleportContainer :flow-id="flowId" />
  </div>
</template>

注意事项

1. 该包仅支持 Vue 3
2. 使用 Teleport 功能时必须提供 flowId
3. 自定义节点组件需要正确处理节点的属性和事件
4. 在多个流程图实例中使用时，需要注意 flowId 的唯一性

3. CustomNodeView

功能: 自定义节点视图类，用于控制节点的渲染和生命周期

使用场景:

1. 需要自定义节点渲染逻辑
2. 需要控制节点的生命周期
3. 需要自定义节点的事件处理
4. 需要自定义节点的样式和行为

使用方法:

import { HtmlNode } from '@logicflow/core'

class CustomNodeView extends HtmlNode {
  // 自定义渲染逻辑
  setHtml(rootEl: SVGForeignObjectElement) {
    const el = document.createElement('div')
    el.className = 'custom-node-content'
    this.root = el
    rootEl.appendChild(el)
    this.renderVueComponent()
  }

  // 自定义更新逻辑
  confirmUpdate(rootEl: SVGForeignObjectElement) {
    // 在这里实现自定义的更新逻辑
    super.confirmUpdate(rootEl)
  }

  // 自定义组件卸载逻辑
  componentWillUnmount() {
    super.componentWillUnmount()
    this.unmount()
  }
}

主要方法说明:

1. setHtml: 设置节点的 HTML 内容

   • 参数: rootEl - SVGForeignObjectElement 类型
   • 作用: 创建和设置节点的 DOM 结构

2. confirmUpdate: 确认节点更新

   • 参数: rootEl - SVGForeignObjectElement 类型
   • 作用: 处理节点更新时的逻辑

3. componentWillUnmount: 组件卸载前处理

   • 作用: 清理节点资源，移除事件监听等

4. renderVueComponent: 渲染 Vue 组件

   • 作用: 将 Vue 组件渲染到节点中

使用示例:

// 注册自定义节点
register(
  {
    type: 'custom-node',
    component: YourComponent,
    view: CustomNodeView,
    model: CustomNodeModel,
  },
  lf
)

注意事项:

1. CustomNodeView 继承自 HtmlNode，可以使用 HtmlNode 的所有功能
2. 需要正确实现生命周期方法，避免内存泄漏
3. 在自定义渲染逻辑时，注意保持与 LogicFlow 的兼容性
4. 建议在 confirmUpdate 中实现增量更新，提高性能

最佳实践:

1. 基础节点视图

class BasicNodeView extends HtmlNode {
  setHtml(rootEl: SVGForeignObjectElement) {
    const el = document.createElement('div')
    el.className = 'basic-node'
    this.root = el
    rootEl.appendChild(el)
    this.renderVueComponent()
  }
}

2. 带交互的节点视图

class InteractiveNodeView extends HtmlNode {
  setHtml(rootEl: SVGForeignObjectElement) {
    const el = document.createElement('div')
    el.className = 'interactive-node'
    this.root = el
    rootEl.appendChild(el)

    // 添加交互事件
    el.addEventListener('click', this.handleClick.bind(this))
    el.addEventListener('mouseenter', this.handleMouseEnter.bind(this))

    this.renderVueComponent()
  }

  handleClick() {
    // 处理点击事件
    this.props.model.setSelected(true)
  }

  handleMouseEnter() {
    // 处理鼠标进入事件
    this.props.model.setHovered(true)
  }

  componentWillUnmount() {
    // 清理事件监听
    const el = this.getComponentContainer()
    if (el) {
      el.removeEventListener('click', this.handleClick)
      el.removeEventListener('mouseenter', this.handleMouseEnter)
    }
    super.componentWillUnmount()
  }
}

3. 动态更新节点视图

class DynamicNodeView extends HtmlNode {
  confirmUpdate(rootEl: SVGForeignObjectElement) {
    // 只在数据变化时更新
    if (this.props.model.isChanged) {
      this.renderVueComponent()
      this.props.model.isChanged = false
    }
    super.confirmUpdate(rootEl)
  }
}