flowFrame 流程公共模块服务

zc私有流程模块包。

如何使用

安装

  yarn add @zcllc/flowFrame

或

  npm i @zcllc/flowFrame

dependencies

  "antd": "^5.19.1"
  "react": "^18.3.1"

在React中使用

// 基础用法
import FlowGraph, { flowModules, GraphConstructOptions } from '@zcllc/flowframe';
const graphRef = useRef<FlowGraph | null>(null)

const options: GraphConstructOptions = {
  container: HTMLElement, 
  customNodes: {
    cusNode: flowNode
  }
}
graphRef.current = new FlowGraph(options);

graphRef.current.addNode()

构造函数参数 GraphConstructOptions

• container：HTML元素
• customNodes：ReactNode, 将在画布上被渲染为节点

import flowNode from './flowNode.tsx'
import otherNode from './otherNode.tsx'
//...
customNodes: {
  cusNode: flowNode,
  node2: otherNode
}
//...

• graphStyle：修改画布的默认样式

type graphStyle = {
  background: string; // 画布背景颜色
  gridColor: string; // 网格线颜色
  edgeColor: string; // 节点连接线颜色
  portBorderColor: string; // 连接桩边框颜色
  portFillColor: string; // 连接桩填充颜色
  edgeStrokeSelected?: string; // 连接线选中颜色
  edgeStrokeDefault?: string; // 连接线默认填充颜色
}

• validateEdge(): 节点连接时触发. 可以自定义连线的验证状态. 返回true/false

validateEdge: (graph: Graph, edge: Edge) => {
  const sourcePort = (edge.source as Edge.TerminalCellLooseData).port
  const targetPort = (edge.target as Edge.TerminalCellLooseData).port
  // 禁止进入节点作为起始点进行连接
  return sourcePort !== 'in' && target.Port !== 'bottom'
}

• onElementSelected()?: (type: 'node' | 'edge', cell: Cell) => void: 元素被选择时触发, 返回元素类型及元素对象

• onElementUnselected?: (type: 'node' | 'edge', cell: Cell) => void: 元素反选时触发, 返回元素类型及元素对象

• onContextMenu?: (type: 'node' | 'edge', e: MouseEvent, cell: Cell) => void: 元素右键事件. 返回元素类型, 事件对象, 元素对象

• onCellDoubleClick?: (type: 'node', e: MouseEvent, nodeData: NodeData) => void | ((type: 'edge', e: MouseEvent) => void): 元素双击事件. 返回节点类型, 事件对象, 节点数据

• onCellRemoved?: (type: 'node', nodeData: NodeData) => void | ((type: 'edge', edge: Edge) => void): 元素移除事件. 返回元素类型, 元素数据

• onEdgeConnected?: (edge: Edge, source: { port: string, data: NodeData }, target: { port: string, data: NodeData }) => void 连接线连接事件. 返回连接线元素对象, 源元素数据, 目标元素数据

创建节点

import type { Ports, NodeData } from '@zcllc/flowframe'

const presetData: NodeData = {
  id: string // 节点id
  icon: string // 节点图标 base64字符串 or url
  moduleKey: string // 对应模块的key
  label: string // 节点文本
  isStart: boolean // 是否为起始节点
  dataLoaded: boolean // 节点数据是否已加载
  output: unknown // 节点输出数据
  componentData?: unknown // 节点组件数据
  transferToNextData?: unknown // 节点传递给下一个节点的数据
  transferFromPrevData?: unknown // 节点从前一个节点传递过来的数据
  error?: string // 节点是否出错
}

// 连接桩支持预设值为 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'

graph.createNode({
  componentKey: 'cusNode',
  nodeData: presetData,
  portset: ['top', 'bottom'],
  position: { x: 100, y: 100 },
  size: { width: 100, height: 30 }
})

删除节点

  graph.removeCell(selectedCell)

获取画布数据

  graph.getGraphJSON()

从json字符串还原画布

  graph.renderFromJSON('{}')

设置节点数据

  const nodeData: NodeData
  graph.setNodeData('nodeid', nodeData)

获取全部节点数据

  const allNodeData: NodeData[] = graph.getAllNodesData()

检查流程状态

  const {allConnected, allNodesLoaded, correctStart} = graph.checkFlow()

使用表单模块

import FlowGraph, { FlowModules } from '@zcllc/flowframe';

return (
  <>
    <FlowModules.Copytable props></FlowModules.Copytable>
  </>
)

import { useMemo, useState } from 'react'
import FlowGraph, { FlowModules, Modules } from '@zcllc/flowframe';

const [moduleName] = useState<Modules>()
const componentInstance = useMemo(() => {
  if (!moduleName) { return null }
  switch (moduleName) {
    case 'copyTable':
      return <FlowModules.Copytable />
    case 'startup':
      return <FlowModules.Startup />
    default:
      return null
  }

  return (
    <div>
      {componentInstance}
    </div>
  )
}, [moduleName])

如需详细类型定义，请查阅 index.d.ts 文件。