Ant X6 简单流程图运用

官方小demo地址

官方文档

效果图：

Code

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css"><style>.dnd-rect {width: 100px;height: 40px;border: 2px solid #31d0c6;text-align: center;line-height: 40px;margin: 16px;cursor: move;}.el-drawer__body {padding: 20px;}.el-drawer__body {flex: 1;}.demo-drawer__content {display: flex;flex-direction: column;height: 100%;}.el-drawer__body>* {box-sizing: border-box;}.demo-drawer__content form {flex: 1;}.demo-drawer__footer {display: flex;}.demo-drawer__footer button {flex: 1;}</style>
</head><body><div id='app'><div data-type="rect" class="dnd-rect" onmousedown="drag(event)">Rect</div><div id="container"></div><el-drawer title="编辑节点" :before-close="handleCloseNode" :visible.sync="drawerNode" direction="rtl"custom-class="demo-drawer" ref="drawerNode"><div class="demo-drawer__content"><el-form :model="FormNode" label-position="top"><el-form-item label="名称" :label-width="formLabelWidth" required><el-input v-model="FormNode.name" autocomplete="off"></el-input></el-form-item><el-form-item label="描述" :label-width="formLabelWidth"><el-input v-model="FormNode.description" autocomplete="off"></el-input></el-form-item><el-form-item label="权限类型" :label-width="formLabelWidth"><el-select v-model="FormNode.authorityType" placeholder="请选择权限类型"><el-option label="用户" value="1"></el-option><el-option label="角色" value="2"></el-option><el-option label="组织/部门" value="3"></el-option></el-select></el-form-item><el-form-item label="审核人"><el-row :gutter="20"><el-col :span="21"><el-input v-model="FormNode.authorityTarget" disabled placeholder="请选择审核人"></el-input></el-col><el-col :span="2"><el-button icon="el-icon-edit" type="primary" @click="SelectAuthorityTarget"></el-button></el-col></el-row></el-form-item></el-form></div></el-drawer><!-- /------------分割线--------------/ --><el-drawer title="编辑边" :before-close="handleCloseEdge" :visible.sync="drawerEdge" direction="rtl"custom-class="demo-drawer" ref="drawerEdge"><div class="demo-drawer__content"><el-form :model="FormEdge" label-position="top"><el-form-item label="名称" :label-width="formLabelWidth" required><el-input v-model="FormEdge.name" autocomplete="off"></el-input></el-form-item><el-form-item label="描述" :label-width="formLabelWidth"><el-input v-model="FormEdge.description" autocomplete="off"></el-input></el-form-item><el-form-item label="条件类型" :label-width="formLabelWidth"><el-select v-model="FormEdge.conditionType" placeholder="请选择权限类型"><el-option label="同意" value="1"></el-option><el-option label="驳回" value="2"></el-option></el-select></el-form-item><el-form-item label="附加条件" :label-width="formLabelWidth"><el-input v-model="FormEdge.additionCondition" autocomplete="off"></el-input></el-form-item></el-form></div></el-drawer></div><!-- import Antv X6 --><script src="https://unpkg.com/@antv/x6@1.17.2/dist/x6.js"></script><!-- import Vue before Element --><script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script><!-- import JavaScript --><script src="https://unpkg.com/element-ui@2.15.1/lib/index.js"></script><!-- import axios --><script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script><script script>var vm = new Vue({el: '#app',data() {return {drawerNode: false, // 展开编辑节点菜单drawerEdge: false, // 展开编辑边菜单formLabelWidth: '80px',FormNode: {id: '',name: '',description: '',stepType: "1",authorityType: "1",authorityTarget: "",authorityTargetIds: [],},FormEdge: {id: '',name: '',description: "",startStepId: "",endStepId: "",conditionType: "1",additionCondition: "",},};},methods: {SelectAuthorityTarget: function () {switch (this.FormNode.authorityType) {case "1":console.log("111");break;case "2":console.log("222");break;case "3":console.log("333");break;default:break;}},handleCloseNode(done) {done();},handleCloseEdge(done) {done();},}})// 定义节点X6.Graph.registerNode('algo-node', {inherit: 'rect',width: 120,height: 50,ports: {groups: {in: {position: 'top',attrs: {circle: {r: 5,magnet: true,stroke: '#ccc',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},out: {position: 'bottom',attrs: {circle: {r: 5,magnet: true,stroke: '#ccc',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},},},},true,)// 定义边X6.Graph.registerConnector('algo-edge',(source, target) => {const offset = 4const control = 80const v1 = {x: source.x,y: source.y + offset + control}const v2 = {x: target.x,y: target.y - offset - control}return `M ${source.x} ${source.y}L ${source.x} ${source.y + offset}C ${v1.x} ${v1.y} ${v2.x} ${v2.y} ${target.x} ${target.y - offset}L ${target.x} ${target.y}`},true,)// 初始化画布const graph = new X6.Graph({container: document.getElementById('container'),width: 1800,height: 800,history: true,selecting: true,background: {color: '#fffbe6', // 设置画布背景颜色},grid: {size: 10, // 网格大小 10pxvisible: true, // 渲染网格背景},panning: true,mousewheel: true,// resizing: true, // 选中调整大小connecting: {snap: true,allowBlank: false,allowLoop: false,highlight: true,sourceAnchor: 'bottom',targetAnchor: 'center',connectionPoint: 'anchor',connector: 'algo-edge',// 连接线createEdge() {return graph.createEdge({attrs: {line: {stroke: '#808080',strokeWidth: 1,targetMarker: {name: 'block',args: {size: '6',},},},},})},// 验证链接桩磁力// 如果不是in 也就是out分组时 可以进行连接 否则当作拖动节点// 当前out连接桩已连接的数量 当大于定义数时 验证返回错误// validateMagnet({//     cell,//     magnet// }) {//     if (magnet.getAttribute('port-group') !== 'in') {//         let count = 0//         const connectionCount = magnet.getAttribute('connection-count')//         const max = connectionCount ? parseInt(connectionCount, 10) : Number.MAX_SAFE_INTEGER//         const outgoingEdges = graph.getOutgoingEdges(cell)//         if (outgoingEdges) {//             outgoingEdges.forEach((edge) => {//                 const edgeView = graph.findViewByCell(edge)//                 if (edgeView.sourceMagnet === magnet) {//                     count += 1//                 }//             })//         }//         return count < max//     }//     return false// },// 验证连接validateConnection({sourceView,targetView,sourceMagnet,targetMagnet}) {// 只能从输出链接桩创建连接if (!sourceMagnet || sourceMagnet.getAttribute('port-group') === 'in') {return false}// 只能连接到输入链接桩if (!targetMagnet || targetMagnet.getAttribute('port-group') !== 'in') {return false}// 判断目标链接桩是否可连接const portId = targetMagnet.getAttribute('port')const node = targetView.cellconst port = node.getPort(portId)if (port && port.connected) {return false}return true}}});// 拖拽时使用const dnd = new X6.Addon.Dnd({target: graph,scaled: false,animation: true,})// 移入显示连接桩const changePortsVisible = (visible) => {const ports = container.querySelectorAll('.x6-port-body',)for (let i = 0, len = ports.length; i < len; i = i + 1) {ports[i].style.visibility = visible ? 'visible' : 'hidden'}}graph.on('node:mouseenter', () => {changePortsVisible(true)})graph.on('node:mouseleave', () => {changePortsVisible(false)})// 拖入节点function drag(e) {console.log(e);var node = graph.createNode({shape: 'algo-node',x: 120,y: 50,label: 'Hello',attrs: {label: {text: 'Node',fill: '#6a6c8a',},body: {fill: '#fff',stroke: '#31d0c6',strokeWidth: 2,},},data: {tag: "edit-node",},ports: [{group: 'in',},{group: 'out',attrs: {circle: {magnet: true,// connectionCount: 1, // 自定义属性，控制连接桩可连接多少条边}}},],})dnd.start(node, e)}// 节点和边的移入删除按钮graph.on('node:mouseenter', ({node}) => {if (node.data.tag === "edit-node") {node.addTools({name: 'button-remove',args: {x: 0,y: 0,offset: {x: 10,y: 15},},})}})graph.on('node:mouseleave', ({node}) => {if (node.data.tag === "edit-node") {node.removeTools()}})graph.on('edge:mouseenter', ({edge}) => {edge.addTools({name: 'button-remove',args: {x: 0,y: 0,offset: {x: 0,y: 0},},})})graph.on('edge:mouseleave', ({edge}) => {edge.removeTools()})// 监听改变选中节点时 改变对应的样式graph.on('selection:changed', (args = {added,removed,selected,}) => {args.selected.forEach((cell) => {if (cell.isNode()) {cell.attr('body', {fill: '#ffd591',})} else {cell.attr('line/stroke', '#ffa940')}})args.removed.forEach((cell) => {if (cell.isNode()) {cell.attr('body', {fill: '#fff',})} else {cell.attr('line/stroke', '#808080')}})})//监听节点和边的单击graph.on('cell:click', ({e,x,y,cell,view}) => {if (cell.isNode()) {if (cell.data.tag === "edit-node") {vm.drawerEdge = false;vm.drawerNode = !vm.drawerNode;if (vm.drawerNode) {console.log(cell);if (cell.data == null) {cell.data = {id: '',name: '',description: '',stepType: "1",authorityType: "1",authorityTarget: "",authorityTargetIds: [],}}cell.data.id = cell.id;vm.FormNode = cell.data;}}} else {vm.drawerNode = false;vm.drawerEdge = !vm.drawerEdge;if (vm.drawerEdge) {console.log(cell);if (cell.data == null) {cell.data = {id: '',name: '',description: "",startStepId: "",endStepId: "",conditionType: "1",additionCondition: "",}}cell.data.id = cell.id;vm.FormEdge = cell.data;}}})// 初始化 添加节点和边const begin = graph.addNode({shape: 'algo-node',x: -50,y: -260,label: '提交审核',attrs: {body: {fill: '#fff',stroke: '#87C7F4',strokeWidth: 2,},},ports: [{group: 'out',attrs: {circle: {magnet: true,// connectionCount: 1, // 自定义属性，控制连接桩可连接多少条边}}}, ],data: {tag: "",},})const end = graph.addNode({shape: 'algo-node',x: -50,y: 260,label: '审核结束',attrs: {body: {fill: '#fff',stroke: '#87C7F4',strokeWidth: 2,},},ports: [{group: 'in',}, ],data: {tag: "",},})graph.addEdge({source: {cell: begin,port: begin.ports.items[0].id},target: {cell: end,port: end.ports.items[0].id},attrs: {line: {stroke: '#808080',strokeWidth: 1,targetMarker: {name: 'block',args: {size: '6',},},},},})graph.centerContent()</script><!-- g.getNodes() 所有节点 节点中data 中可以存放自定义信息g.getEdges() 所有边 source 起始点id     target 结束点idg.toJson() 转json-->
</body></html>

Ant X6 简单流程图运用相关推荐

ps里面怎么插入流程图_photoshop cs6绘画带箭头简单流程图的操作步骤介绍
原创photoshop cs6绘画带箭头简单流程图的操作步骤介绍编辑:小靖子来源:PC下载网时间:2019-09-16 11:06:30 不少的伙伴们在使用photoshop cs6软件的时候,不 ...
cad中简单流程图制作_Excel vba 简单制作流程图方法介绍
Excel有很好的流程图制作工具菜单,其制作方法也有很多,相对也比较简单. 但是,如果不熟悉制作过程的情况下,还是有一定的难度的. 前言通过代码来简化制作流程,就是说把制作方法都省去,直接把所有工作 ...
vue中使用Antv g6构建简单流程图
vue中使用Antv g6构建简单流程图前端小白第一次使用,项目需要一个流程图,看了一些博客,简单的写了一个,但是还是没实现项目的需求,希望有会的人帮忙指点一下.项目需要实现的是:可以自定义添加节点 ...
flex 画流程图_分享一款简单流程图制作软件，教你快速绘制流程图
分享一款简单流程图制作软件,教你快速绘制流程图 2019-11-20 10:35:40 0点赞 3收藏 1评论流程图的使用相信大家都不陌生,利用流程图图形与连接线组合而成的图形即为流程图,不仅可以让 ...
ps里面怎么插入流程图_photoshop cs6绘画带箭头简单流程图的操作教程
你们知道photoshop cs6怎样绘画带箭头简单流程图吗?怎么样开启这项功能呢?对此感兴趣的用户可以随小编去下文看看photoshop cs6绘画带箭头简单流程图的操作教程 photoshop c ...
Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...
Vue3 项目中使用 AntV X6 绘制流程图
X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建流程图.DAG 图.ER 图等图应用. 参考一些网站的写法,然后自己加上了撤销操作. 节点 ...
使用antv/X6实现流程图（包括线条动画流动，路径标签，悬浮窗口等）快速搭建流程图，DAG图等初始实践记录
文章目录开始使用 Step 1 创建容器 Step 2 准备数据 Step 3 渲染画布取消节点的移动使用不同图形渲染节点画布居中和缩放修改边样式给虚线增加流动效果修改节点和边的属性鼠 ...
cad中简单流程图制作_想要又快又好的画出世界级的流程图，这样牛掰的方法一定要知道...
有不少小伙伴在学校或者工作的时候,都会需要接触到万恶的流程图制作任务,我们看到别人做的流程图的时候总是觉得人家做的好厉害啊,然后自己蠢蠢欲动自己做了一下,结果惨不忍睹. 别担心,今天小编将分享几个超简 ...

Ant X6 简单流程图运用

Ant X6 简单流程图运用相关推荐

最新文章

热门文章