XFLOW记录

2023-11-02 04:37| 来源: 网络整理| 查看: 265

├── XFlow │ ├── index # XFlow 使用文档, 包含 1个快速开始 + 3个解决方案 │ ├── config-graph # 设置画布全局配置项，该配置项决定了画布上的内容如何呈现。比如画布是否需要网格、画布的缩放等级、画布是否支持滚轮缩放等, 再比如画布上需要渲染哪种类型的 React 节点/连线等。 │ ├── xflow-core # XFlow 对于 X6 画布的封装 graphProvider, 提供若干内置命令Command, 提供全局ModelService等 │ ├── xflow-extension # XFlow 内置的若干交互组件, 包括小地图、对齐线、右键菜单等 │ └── xflow-hook # XFlow 内置的 hook 机制, 允许自定义若干默认行为 XFlow DEMO解析

{/* 节点拖拽面板 */} {/* 工具栏 */} {/* 画布组件 */} {/* 缩放工具栏 */} {/* 右键菜单 */} {/* 对齐线 */} {/* 节点拖拽面板 */} {/* 配置式表单 */} {/* 快捷键 */} XFlow 工作台组件

配置项

具体配置

Hook

CommandConfig

ModelServiceConfig

HookConfig

meta

元信息

onLoad

XFlow初始化完成回调

Layout

布局算法

@antv/layout

GraphConfig

画布配置

和X6保持一致

默认/自定义

GraphData

画布数据

核心配置项元信息Meta

XFlow支持在工作台初始化之前传入Meta元信息, 该元信息会被存储在全局的ModelService实例中, 在整个XFlow工作空间可用。

XFlow 内置了常用的 Model 在事件回调和渲染 UI 组件时使用， Model 通过监听画布（X6）的事件来更新内部的值，组件通过订阅 Model 的变化可以实现组件渲染的更新。

画布配置GraphConfig

graphConfig是配置再XFlow下面的XFlowCanvas中的

graphconfig和graphHookConfig区别画布数据GraphData XFlow初始化完成回调onLoad

XFlow初始化完成后会回调onLoad方法, 在onLoad中可以执行各种业务逻辑操作, 比如从服务端获取数据、执行布局算法、渲染画布内容、监听画布相关事件等。

在onLoad回调方法中, 会返回XFlow实例, 我们称之为app。通过app实例, 可以获取画布实例、获取画布配置项、执行各种命令操作等。

会用到很多的方法：app.getGraphInstance()；app.getGraphInstance() 等等

但是它们都是异步函数

const graphInstance = await app.getGraphInstance()

XFlow核心Hook 命令钩子CommandConfig

XFlow提供了执行命令的钩子, 允许用户提前预设好service层的行为, 在触发某个具体命令时, 会自动调用钩子里的service逻辑。

全局状态钩子 ModelServiceConfig HookConfig 事件触发过程目前可调用的MockApi在service.js /** 查图的meta元信息 */ MockApi.queryGraphMeta /** 加载图数据的api */ MockApi.loadGraphData /** 保存图数据的api */ MockApi.saveGraphData /** 部署图数据的api */ MockApi.deployDagService /** 添加节点api */ MockApi.addNode /** 更新节点 name，可能依赖接口判断是否重名，返回空字符串时，不更新 */ MockApi.renameNode /** 删除节点的api */ MockApi.delNode /** 添加边的api */ MockApi.addEdge /** 删除边的api */ MockApi.delEdge 节点拖拽面板设计

position是针对XFlow画布的

onNodeDrop添加点

export const onNodeDrop = async(node, commands, modelService) => { const args = { nodeConfig: { ...node, id: uuidv4() } }; commands.executeCommand(XFlowNodeCommands.ADD_NODE.id, args); }; 新增/更新 node/edge方法

ADD_NODE api中的commands与nodeConfig数据

const app = useXFlowApp(); 输出数据

import { useXFlowApp, XFlowNodeCommands, uuidv4 } from '@antv/xflow'; const demo = () => { const app = useXFlowApp(); //获得app app.executeCommand(XFlowNodeCommands.ADD_NODE.id, { //得到commandService，XFlowNodeCommands.ADD_NODE.id是方法 nodeConfig: { id: uuidv4(), name:'name', label: name, parentId: '1', renderKey: 'source', x: 20 , y: 140, }, }).then((result) => {}); };

对比原生添加的onNodeDrop

export const onNodeDrop = async(node, commands, modelService) => { const args = { nodeConfig: { ...node, id: uuidv4() } }; commands.executeCommand(XFlowNodeCommands.ADD_NODE.id, args); };

commands是app，可以用useXflowAPP直接获取，然后用executeCommand得到commandService

官网解释：Command - XFlow (antv.vision)

MockApi.addEdge中如何做其他事情

cmd来源的commandConfig

args的内容

想要调用钩子，找commandService用executeCommand调取

MockApi.addEdge = async(args) => { console.info('addEdge service running, add edge:', args); const { edgeConfig, commandService } = args; commandService.executeCommand(XFlowNodeCommands.ADD_NODE.id, { nodeConfig: { id: '111', name: 'serchj', label: 'serchj', parentId: '1', renderKey: 'source', x: 20, y: 140, }, }).then((result) => { message.success({ content: '创建工程成功', className: 'custom-class', duration: 3, style: { marginTop: '20vh', }, }); }); // console.log('commandService', commandService.executeCommand(XFlowGraphCommands.LOAD_DATA.id, {})); return Object.assign(Object.assign({}, edgeConfig), { id: uuidv4() }); };

添加边的时候创建出点

command中的命令

commandService.commands [ { key: 'xflow:add-node', value: { id: 'xflow:add-node', label: '添加节点', category: '节点操作', }, }, { key: 'xflow:del-node', value: { id: 'xflow:del-node', label: '删除节点', category: '节点操作', }, }, { key: 'xflow:select-node', value: { id: 'xflow:select-node', label: '选中节点', category: '节点操作', }, }, { key: 'xflow:move-node', value: { id: 'xflow:move-node', label: 'Move Node', category: '节点操作', }, }, { key: 'xflow:update-node', value: { id: 'xflow:update-node', label: '更新节点', category: '节点操作', }, }, { key: 'xflow:center-node', value: { id: 'xflow:center-node', label: '居中节点', category: '节点操作', }, }, { key: 'xflow:front-node', value: { id: 'xflow:front-node', label: '前置节点', category: '节点操作', }, }, { key: 'xflow:back-node', value: { id: 'xflow:back-node', label: '后置节点', category: '节点操作', }, }, { key: 'xflow:highlight-node', value: { id: 'xflow:highlight-node', label: '高亮节点', category: '节点操作', }, }, { key: 'xflow:update-node-port', value: { id: 'xflow:update-node-port', label: '删除连接桩', category: '节点操作', }, }, { key: 'xflow:add-edge', value: { id: 'xflow:add-edge', label: '添加边', category: '边操作', }, }, { key: 'xflow:del-edge', value: { id: 'xflow:del-edge', label: '删除边', category: '边操作', }, }, { key: 'xflow:update-edge', value: { id: 'xflow:update-edge', label: '更新边', category: '边操作', }, }, { key: 'xflow:highlight-edge', value: { id: 'xflow:highlight-edge', label: '高亮边', category: '边操作', }, }, { key: 'xflow:front-edge', value: { id: 'xflow:front-edge', label: '前置变', category: '边操作', }, }, { key: 'xflow:back-edge', value: { id: 'xflow:back-edge', label: '后置边', category: '边操作', }, }, { key: 'xflow:add-group', value: { id: 'xflow:add-group', label: '新建群组', category: '群组操作', }, }, { key: 'xflow:del-group', value: { id: 'xflow:del-group', label: '解散群组', category: '群组操作', }, }, { key: 'xflow:init-group', value: { id: 'xflow:init-group', label: '初始化群组', category: '群组操作', }, }, { key: 'xflow:collapse-group', value: { id: 'xflow:collapse-group', label: '折叠群组', category: '群组操作', }, }, { key: 'xflow:load-meta', value: { id: 'xflow:load-meta', label: '获取元数据', category: '画布操作', }, }, { key: 'xflow:save-graph-data', value: { id: 'xflow:save-graph-data', label: '保存', category: '画布操作', }, }, { key: 'xflow:load-data', value: { id: 'xflow:load-data', label: '获取图数据', category: '画布操作', }, }, { key: 'xflow:history-undo', value: { id: 'xflow:history-undo', label: 'history undo', category: '画布操作', }, }, { key: 'xflow:history-redo', value: { id: 'xflow:history-redo', label: 'history redo', category: '画布操作', }, }, { key: 'xflow:history-reset', value: { id: 'xflow:history-reset', label: 'history reset', category: '画布操作', }, }, { key: 'xflow:history-toggle', value: { id: 'xflow:history-toggle', label: 'history toggle', category: '画布操作', }, }, { key: 'xflow:layout', value: { id: 'xflow:layout', label: '计算布局', category: '画布操作', }, }, { key: 'xflow:graph-render', value: { id: 'xflow:graph-render', label: '渲染画布', category: '画布操作', }, }, { key: 'xflow:graph-resize', value: { id: 'xflow:graph-resize', label: '调整窗口大小', category: '画布操作', }, }, { key: 'xflow:graph-fullscreen', value: { id: 'xflow:graph-fullscreen', label: '全屏', category: '画布操作', }, }, { key: 'xflow:redo-cmd', value: { id: 'xflow:redo-cmd', label: '重做', category: '画布操作', }, }, { key: 'xflow:undo-cmd', value: { id: 'xflow:undo-cmd', label: '撤销', category: '画布操作', }, }, { key: 'xflow:graph-zoom', value: { id: 'xflow:graph-zoom', label: '缩放画布', category: '画布操作', }, }, { key: 'xflow:graph-toggle-multi-select', value: { id: 'xflow:graph-toggle-multi-select', label: '启用框选', category: '画布操作', }, }, { key: 'xflow:graph-copy-selection', value: { id: 'xflow:graph-copy-selection', label: '复制', category: '画布操作', }, }, { key: 'xflow:graph-paste-selection', value: { id: 'xflow:graph-paste-selection', label: '粘贴', category: '画布操作', }, }, { key: 'xflow:add-tool', value: { id: 'xflow:add-tool', label: '添加工具', category: '画布操作', }, }, { key: 'xflow:del-tool', value: { id: 'xflow:del-tool', label: '删除工具', category: '画布操作', }, }, { key: 'xflow:update-model', value: { id: 'xflow:update-model', label: '设置状态值', category: '状态操作', }, }, { key: 'xflow:query-graph-status', value: { id: 'xflow:query-graph-status', label: '查询画布节点状态', }, }, { key: 'xflow:async-cmd', value: { id: 'xflow:async-cmd', label: '异步请求', category: '节点操作', }, }, { key: 'xflow:deploy-service', value: { id: 'xflow:deploy-service', label: '部署服务', category: '节点操作', }, }, { key: 'xflow:rename-node-modal', value: { id: 'xflow:rename-node-modal', label: '打开重命名弹窗', category: '节点操作', }, }, ]; { ADD_NODE: { id: 'xflow:add-node', label: '添加节点', category: '节点操作', }, DEL_NODE: { id: 'xflow:del-node', label: '删除节点', category: '节点操作', }, UPDATE_NODE_PORT: { id: 'xflow:update-node-port', label: '删除连接桩', category: '节点操作', }, UPDATE_NODE: { id: 'xflow:update-node', label: '更新节点', category: '节点操作', }, HIGHLIGHT_NODE: { id: 'xflow:highlight-node', label: '高亮节点', category: '节点操作', }, SELECT_NODE: { id: 'xflow:select-node', label: '选中节点', category: '节点操作', }, MOVE_NODE: { id: 'xflow:move-node', label: 'Move Node', category: '节点操作', }, CENTER_NODE: { id: 'xflow:center-node', label: '居中节点', category: '节点操作', }, FRONT_NODE: { id: 'xflow:front-node', label: '前置节点', category: '节点操作', }, BACK_NODE: { id: 'xflow:back-node', label: '后置节点', category: '节点操作', }, };

从节点拖拽面板拖出节点：

从节点拖出边？？

※如何获取到所有的节点和边的信息

保存时调用service的saveGraphData api

右键删除过程

右键菜单设置

参数配置过程

节点拖拽面板

参数配置格式

{ tabs: [ { name: '参数配置', groups: [ { name: 'groupName', controls: [ { name: 'Tab2-1', label: '项目名', shape: 'Input', disabled: false, required: true, tooltip: '图的业务项目名', extra: '和图的ID对应', placeholder: 'please write something', value: '', defaultValue: '', hidden: false, options: [{ title: '', value: '' }], originData: {}, // 原始数据 }, ], }, ], }, ], }; const nodeSchema = { tabs: [ { name: 'Tab1', groups: [ { name: 'groupName', controls: [ { label: 'GraphEditor', name: 'Tab1-0', /** 使用自定义shape */ shape: ControlShapeEnum.EDITOR, disabled: false, required: true, tooltip: 'hello world', placeholder: 'please write something', value: '', defaultValue: '', hidden: false, options: [{ title: '', value: '' }], originData: {}, // 原始数据 }, { label: 'Tab1-2', name: 'Tab1-2', shape: 'Input', disabled: false, required: true, tooltip: 'hello world', placeholder: 'please write something', value: '', defaultValue: '', hidden: false, options: [{ title: '', value: '' }], originData: {}, // 原始数据 }, { label: 'Tab1-3', name: 'Tab1-3', shape: 'Input', disabled: false, required: true, tooltip: 'hello world', placeholder: 'please write something', value: '', defaultValue: '', hidden: false, options: [{ title: '', value: '' }], originData: {}, // 原始数据 }, { label: 'Tab1-4', name: 'Tab1-4', shape: 'Input', disabled: false, required: true, tooltip: 'hello world', placeholder: 'please write something', value: '', defaultValue: '', hidden: false, options: [{ title: '', value: '' }], originData: {}, // 原始数据 }, ], }, ], }, { name: 'Tab2', groups: [ { name: 'groupName', controls: [ { name: 'Tab2-1', label: 'Tab2-1', shape: 'Input', disabled: false, required: true, tooltip: 'hello world', placeholder: 'please write something', value: '', defaultValue: '', hidden: false, options: [{ title: '', value: '' }], originData: {}, // 原始数据 }, { label: 'Tab2-2', name: 'Tab2-2', shape: 'Input', disabled: false, required: true, tooltip: 'hello world', placeholder: 'please write something', value: '', defaultValue: '', hidden: false, options: [{ title: '', value: '' }], originData: {}, // 原始数据 }, { label: 'Tab2-3', name: 'Tab2-3', shape: 'Input', disabled: false, required: true, tooltip: 'hello world', placeholder: 'please write something', value: '', defaultValue: '', hidden: false, options: [{ title: '', value: '' }], originData: {}, // 原始数据 }, ], }, ], }, ], };

可选的内容

export declare enum ControlShape { INPUT = "input", CHECKBOX = "checkbox", TEXTAREA = "textArea", SELECT = "select", DATETIME = "datetime", FLOAT = "float" }

通过shape可以用整个From对其进行替换，与shape同级的其他controls都会

能否保存参数配置信息于node上？通过controlSchema传入，

node的结构能不能添加东西

流程触发

工具栏

小问题

父组件必须有高度继承！！

各种config巴拉巴拉的输出

args.getGraphConfig().then((res) => { console.log(res) });

args.getX6Graph().then((res) => { console.log(res) });

【本文地址】

公司简介

联系我们