可拖拽编辑的流程图X6

 先上图

//index.html,有时候可能加载失败,那就再找一个别的cdn 或者npm下载,如果npm下载,
//那么需要全局引入或者局部引入,代码里面写法也会不同,详细的可以看示例<script src="https://cdn.jsdelivr.net/npm/@antv/x6/dist/x6.js"></script>
//chart.vue
<template><div><el-button type="primary" @click="download">导出PNG</el-button><el-button type="primary" @click="downloadJSON">导出JSON</el-button><input type="file" id="select-input" ref="files" style="width: 70px"/>删除某个节点   shift+backspace<div id="container"><div id="stencil"></div><div id="graph-container"></div></div></div>
</template><script>
export default {data(){return{graph: null,}},mounted(){// 为了协助代码演示const graph = new X6.Graph({container: document.getElementById("graph-container"),grid: true,background: {color: '#fffbe6', // 设置画布背景颜色},mousewheel: {enabled: true,zoomAtMousePosition: true,modifiers: "ctrl",minScale: 0.5,maxScale: 3},connecting: {router: {name: "manhattan",args: {padding: 1}},connector: {name: "rounded",args: {radius: 8}},anchor: "center",connectionPoint: "anchor",allowBlank: false,snap: {radius: 20},createEdge() {return new X6.Shape.Edge({attrs: {line: {stroke: "#A2B1C3",strokeWidth: 2,targetMarker: {name: "block",width: 12,height: 8}}},zIndex: 0})},validateConnection({ targetMagnet }) {return !!targetMagnet}},highlighting: {magnetAdsorbed: {name: "stroke",args: {attrs: {fill: "#5F95FF",stroke: "#5F95FF"}}}},resizing: true,rotating: true,selecting: {enabled: true,rubberband: true,showNodeSelectionBox: true},snapline: true,keyboard: true,clipboard: true})this.graph = graph// #region 初始化 stencilconst stencil = new X6.Addon.Stencil({title: "流程图",target: graph,stencilGraphWidth: 200,stencilGraphHeight: 180,collapsable: true,groups: [{title: "基础流程图",name: "group1"},{title: "系统设计图",name: "group2",graphHeight: 250,layoutOptions: {rowHeight: 70}}],layoutOptions: {columns: 2,columnWidth: 80,rowHeight: 55}})document.getElementById("stencil").appendChild(stencil.container)// #region 快捷键与事件// copy cut pastegraph.bindKey(["meta+c", "ctrl+c"], () => {const cells = graph.getSelectedCells()if (cells.length) {graph.copy(cells)}return false})graph.bindKey(["meta+x", "ctrl+x"], () => {const cells = graph.getSelectedCells()if (cells.length) {graph.cut(cells)}return false})graph.bindKey(["meta+v", "ctrl+v"], () => {if (!graph.isClipboardEmpty()) {const cells = graph.paste({ offset: 32 })graph.cleanSelection()graph.select(cells)}return false})//undo redograph.bindKey(["meta+z", "ctrl+z"], () => {if (graph.history.canUndo()) {graph.history.undo()}return false})graph.bindKey(["meta+shift+z", "ctrl+shift+z"], () => {if (graph.history.canRedo()) {graph.history.redo()}return false})// select allgraph.bindKey(["meta+a", "ctrl+a"], () => {const nodes = graph.getNodes()if (nodes) {graph.select(nodes)}})//deletegraph.bindKey("shift+backspace", () => {const cells = graph.getSelectedCells()if (cells.length) {graph.removeCells(cells)}})// zoomgraph.bindKey(["ctrl+1", "meta+1"], () => {const zoom = graph.zoom()if (zoom < 1.5) {graph.zoom(0.1)}})graph.bindKey(["ctrl+2", "meta+2"], () => {const zoom = graph.zoom()if (zoom > 0.5) {graph.zoom(-0.1)}})// 控制连接桩显示/隐藏const showPorts = (ports, show) => {for (let i = 0, len = ports.length; i < len; i = i + 1) {ports[i].style.visibility = show ? "visible" : "hidden"}}graph.on("node:mouseenter", () => {const container = document.getElementById("graph-container")const ports = container.querySelectorAll(".x6-port-body")showPorts(ports, true)})graph.on("node:mouseleave", () => {const container = document.getElementById("graph-container")const ports = container.querySelectorAll(".x6-port-body")showPorts(ports, false)})// #endregion// #region 初始化图形const ports = {groups: {top: {position: "top",attrs: {circle: {r: 4,magnet: true,stroke: "#5F95FF",strokeWidth: 1,fill: "#fff",style: {visibility: "hidden"}}}},right: {position: "right",attrs: {circle: {r: 4,magnet: true,stroke: "#5F95FF",strokeWidth: 1,fill: "#fff",style: {visibility: "hidden"}}}},bottom: {position: "bottom",attrs: {circle: {r: 4,magnet: true,stroke: "#5F95FF",strokeWidth: 1,fill: "#fff",style: {visibility: "hidden"}}}},left: {position: "left",attrs: {circle: {r: 4,magnet: true,stroke: "#5F95FF",strokeWidth: 1,fill: "#fff",style: {visibility: "hidden"}}}}},items: [{group: "top"},{group: "right"},{group: "bottom"},{group: "left"}]}X6.Graph.registerNode("custom-rect",{inherit: "rect",width: 66,height: 36,attrs: {body: {strokeWidth: 1,stroke: "#5F95FF",fill: "#EFF4FF"},text: {fontSize: 12,fill: "#262626"}},ports: { ...ports }},true)X6.Graph.registerNode("custom-polygon",{inherit: "polygon",width: 66,height: 36,attrs: {body: {strokeWidth: 1,stroke: "#5F95FF",fill: "#EFF4FF"},text: {fontSize: 12,fill: "#262626"}},ports: {...ports,items: [{group: "top"},{group: "bottom"}]}},true)X6.Graph.registerNode("custom-circle",{inherit: "circle",width: 45,height: 45,attrs: {body: {strokeWidth: 1,stroke: "#5F95FF",fill: "#EFF4FF"},text: {fontSize: 12,fill: "#262626"}},ports: { ...ports }},true)X6.Graph.registerNode("custom-image",{inherit: "rect",width: 52,height: 52,markup: [{tagName: "rect",selector: "body"},{tagName: "image"},{tagName: "text",selector: "label"}],attrs: {body: {stroke: "#5F95FF",fill: "#5F95FF"},image: {width: 26,height: 26,refX: 13,refY: 16},label: {refX: 3,refY: 2,textAnchor: "left",textVerticalAnchor: "top",fontSize: 12,fill: "#fff"}},ports: { ...ports }},true)const r1 = graph.createNode({shape: "custom-rect",label: "开始",attrs: {body: {rx: 20,ry: 26}}})const r2 = graph.createNode({shape: "custom-rect",label: "过程"})const r3 = graph.createNode({shape: "custom-rect",attrs: {body: {rx: 6,ry: 6}},label: "可选过程"})const r4 = graph.createNode({shape: "custom-polygon",attrs: {body: {refPoints: "0,10 10,0 20,10 10,20"}},label: "决策"})const r5 = graph.createNode({shape: "custom-polygon",attrs: {body: {refPoints: "10,0 40,0 30,20 0,20"}},label: "数据"})const r6 = graph.createNode({shape: "custom-circle",label: "连接"})stencil.load([r1, r2, r3, r4, r5, r6], "group1")const imageShapes = [{label: "Client",image:"https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg"},{label: "Http",image:"https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg"},{label: "Api",image:"https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg"},{label: "Sql",image:"https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg"},{label: "Clound",image:"https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg"},{label: "Mq",image:"https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg"}]const imageNodes = imageShapes.map(item =>graph.createNode({shape: "custom-image",label: item.label,attrs: {image: {"xlink:href": item.image}}}))stencil.load(imageNodes, "group2")//编辑graph.on('cell:dblclick', ({ cell, e }) => {const isNode = cell.isNode()const name = cell.isNode() ? 'node-editor' : 'edge-editor'cell.removeTool(name)cell.addTools({name,args: {event: e,attrs: {backgroundColor: isNode ? '#EFF4FF' : '#FFF',},},})})//直接加在样式上不生效document.getElementById('graph-container').style.width = 'calc(100% - 180px)'document.getElementById('graph-container').style.height = '100%'document.getElementById("select-input").addEventListener("change", (e) =>{let file = e.target.files[0];let fileName = file.name.split('.')if(fileName[fileName.length-1] !== 'txt') {this.$refs.files.value = ''return this.$message({message: '请上传.txt格式文件',type: 'warning'});}if(!window.FileReader) return this.$message({message: 'Not supported by your browser!',type: 'warning'});// 创建FileReader对象(文件对象)const reader = new FileReader();// 读取出错时:reader.onerror = (e)=>{this.$message({message: '读取出错!',type: 'warning'});};// 读取中断时:reader.onabort = (e)=>{this.$message({message: '读取中断!',type: 'warning'});};// 读取成功时:reader.onload = (e)=>{// 输出文件this.$refs.files.value = ''this.graph.fromJSON(JSON.parse(e.target.result))this.$message({message: '读取成功!',type: 'success'});};reader.readAsText(file,"utf-8");}, false);},methods:{download(){this.graph.toPNG((dataUri) => {// 下载X6.DataUri.downloadDataUri(dataUri, '流程图.png')},{width: 600,height: 500,padding: 10,})},downloadJSON(){let d = this.graph.toJSON()let el = document.createElement('a')el.setAttribute('href','data:text.plain;charset=utf-8,'+encodeURIComponent(JSON.stringify(d)))el.setAttribute('download','图表数据.txt')el.style.display = 'none'document.body.appendChild(el)el.click()document.body.removeChild(el)},}
}
</script><style lang="less" scoped>
#container {display: flex;border: 1px solid #dfe3e8;height: 100vh;width: 100%;margin-top: 10px;
}
#stencil {width: 180px;height: 100%;position: relative;border-right: 1px solid #dfe3e8;
}
.x6-widget-stencil  {background-color: #fff;
}
.x6-widget-stencil-title {background-color: #fff;
}
.x6-widget-stencil-group-title {background-color: #fff !important;
}
.x6-widget-transform {margin: -1px 0 0 -1px;padding: 0px;border: 1px solid #239edd;
}
.x6-widget-transform > div {border: 1px solid #239edd;
}
.x6-widget-transform > div:hover {background-color: #3dafe4;
}
.x6-widget-transform-active-handle {background-color: #3dafe4;
}
.x6-widget-transform-resize {border-radius: 0;
}
.x6-widget-selection-inner {border: 1px solid #239edd;
}
.x6-widget-selection-box {opacity: 0;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/61146.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++对C的扩展

文章目录 C对C的扩展::作用域运算符代码示例 namespace 命名空间代码示例命名空间的使用注意无名命名空间和命名空间别名using声明 语法的增强struct的增强 bool 类型三目运算符const 关键字C语言Cconst 替换define 引用引用作用于数组引用作为函数参数引用作为函数返回值例1&a…

c ++ 学习 之函数重载

在C中&#xff0c;函数重载&#xff08;Function Overloading&#xff09;是一种允许你定义多个同名函数&#xff0c;但它们在参数数量、类型或顺序上有所不同。编译器会根据函数调用时提供的参数信息&#xff0c;自动选择调用匹配的重载函数。函数重载可以使代码更具灵活性&am…

白嫖idea

白嫖idea 地址 https://www.jetbrains.com/toolbox-app/

每日一题:leetcode 1267 统计参与通信的服务器

这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请你统计并返回能够与至少一台其他服务…

jmeter性能测试步骤实战教程

1. Jmeter是什么&#xff1f; 2. Jmeter安装 2.1 JDK安装 由于Jmeter是基于java开发&#xff0c;首先需要下载安装JDK &#xff08;目前JMeter只支持到Java 8&#xff0c;尚不支持 Java 9&#xff09; 1. 官网下载地址&#xff1a; http://www.oracle.com/technetwork/java/…

【java安全】FastJson反序列化漏洞浅析

文章目录 【java安全】FastJson反序列化漏洞浅析0x00.前言0x01.FastJson概述0x02.FastJson使用序列化与反序列化 0x03.反序列化漏洞0x04.漏洞触发条件0x05.漏洞攻击方式JdbcRowSetImpl利用链TemplatesImpl利用链**漏洞版本**POC漏洞分析 【java安全】FastJson反序列化漏洞浅析 …

QT基础 关于QT延迟

目录 QT提供延时 1.自定义延时 2.使用QElapsedTimer 3.使用事件循环 4.跨平台延时 QT提供延时 这里提供四种方法&#xff1a; 1、多线程程序使用QThread::sleep()或者QThread::msleep()或QThread::usleep()或QThread::wait()进行延时处理。 Sleep不会释放对象锁&#x…

Ubuntu20.04安装ROS

Ubuntu20.04安装ROS Excerpt ubuntu安装方式有两种&#xff0c;一种是安装ubuntu系统&#xff0c;另一种是在windows下安装虚拟机&#xff0c;在虚拟机里安装ubuntu。下面为双系统安装ubuntu&#xff08;用虚拟机装ubuntu会很卡&#xff0c;bug很多&#xff0c;除非电脑配置极好…

java八股文面试[多线程]——Happens-Before规则

TODO 知识来源&#xff1a; 【23版面试突击】你知道什么是 happens-before 原则吗&#xff1f;_哔哩哔哩_bilibili 【2023年面试】Happens-Before规则是什么_哔哩哔哩_bilibili

八、MySQL(DML)如何修改表中的数据?

1、修改表数据 &#xff08;1&#xff09;基础语法&#xff1a; update 表名 SET 字段名1数值1,字段名2数值2&#xff0c;…… [where 条件]; &#xff08;2&#xff09; 操作实例&#xff1a; 第一步&#xff1a; 先准备一张表 insert into things values (10086,18,0x12…

【前端代码规范】

前端代码规范 vue3版本:【Vue&React】版本TS版本&#xff1a;【TS&JS】版本vite版本&#xff1a;【Webpack&Vite】版本Eslint版本:命名规则:【见名识意】项目命名&#xff1a;目录命名&#xff1a;JS/VUE文件CSS/SCSS文件命名&#xff1a;HTML文件命名&#xff1a;…

本地电脑搭建Plex私人影音云盘教程,内网穿透实现远程访问

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语6 总结 1.前言 用手机或者平板电脑看视频&#xff0c;已经算是生活中稀松平常的场景了&#xff0c;特…

三组学联合→HiC+Meta+Virome

病毒在微生物死亡率、多样性和生物地球化学循环中发挥着重要作用。地下水是全球最大的淡水&#xff0c;也是地球上最贫营养的水生系统之一&#xff0c;但在这个特殊的栖息地中微生物和病毒群落是如何形成的尚未被探索。本次经典文献分享给大家带来&#xff0c;宏基因组宏病毒组…

RTE_Driver驱动框架和Keil下开发需要支持的xxx_DFP软件包分析

1.RTE_Driver驱动框架 RTE_Driver代表"Run-Time Environment Driver"&#xff0c;是Keil MDK&#xff08;Microcontroller Development Kit&#xff09;中的一个概念。Keil MDK是一种用于嵌入式系统开发的集成开发环境&#xff0c;提供了开发、编译、调试等一系列工具…

绿色能源迎来跨越式增长新时代

当今世界&#xff0c;百年未有之大变局加速演进&#xff0c;新一轮科技革命和产业变革深入发展&#xff0c;全球气候治理呈现新局面&#xff0c;新能源和信息技术紧密融合&#xff0c;生产生活方式加快转向低碳化、智能化&#xff0c;能源体系和发展模式正在进入非化石能源主导…

Briefings in Bioinformatics投稿经验分享

期刊名: BRIEFINGS IN BIOINFORMATICS期刊名缩写:BRIEF BIOINFORM期刊ISSN:1467-5463E-ISSN:1477-40542023年影响因子/JCR分区:9.5/Q1latex模板:http://static.primary.prod.gcms.the-infra.com/static/site/journals/document/oup-authoring-template.zip?node=7987de4…

gcd,辗转相减法,线段树,246. 区间最大公约数

246. 区间最大公约数 246. 区间最大公约数 - AcWing题库 给定一个长度为 N 的数列 A&#xff0c;以及 M 条指令&#xff0c;每条指令可能是以下两种之一&#xff1a; C l r d&#xff0c;表示把 A[l],A[l1],… 都加上 d。Q l r&#xff0c;表示询问 A[l],A[l1],… 的最大公约…

java八股文面试[多线程]——线程间通信方式

多个线程在并发执行的时候&#xff0c;他们在CPU中是随机切换执行的&#xff0c;这个时候我们想多个线程一起来完成一件任务&#xff0c;这个时候我们就需要线程之间的通信了&#xff0c;多个线程一起来完成一个任务&#xff0c;线程通信一般有4种方式&#xff1a; 通过 volat…

gitlab提交项目Log in with Access Token错误

目录 报错信息 问题描述 解决方案 报错信息 问题描述 在提交项目到gitlab时&#xff0c;需要添加账户信息 &#xff0c;但是报了这样一个错&#xff0c;原因应该就是路径问题&#xff0c;我在填写server地址的时候&#xff0c;就出现了路径问题&#xff0c;我把多余的几个/…

拥抱储能新时代!科士达闪耀EESA第二届中国国际储能展览会

2023年8月30日&#xff0c;EESA第二届中国国际储能展览会在苏州国际博览中心拉开帷幕&#xff0c;科士达以“零碳光储数能未来”为主题&#xff0c;亮相G3-20展台&#xff0c;多维度展现户用光储、工商业储能、大型储能等解决方案&#xff0c;彰显安全、高效、可靠的产品性能和…