关于自己写的流程设计随笔记录(mxGraph)

最新推荐文章于 2024-06-20 20:47:30 发布
最新推荐文章于 2024-06-20 20:47:30 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： mxGraph 文章标签： mxGraph 流程设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Little_Pig_Bug/article/details/81296597
版权
本文记录了使用mxGraph库进行流程设计的过程，包括创建流程入口、节点双击事件、获取和保存流程信息、弹框显示节点详情、插入和删除节点的操作。在实现过程中，特别提到按delete键删除节点可能遇到的问题及其解决方案。
摘要由CSDN通过智能技术生成

 1.流程创建入口；

   a.在创建入口之前，定义当前被选中节点信息currentEditor和当前流程图信息currentGraph(后面保存和编辑会用到)；

   b.定义容器container, 上侧工具栏容器outline,上侧工具栏的逻辑效果 toolbar,左边工具栏拖动 sidebar, 当前节点信息status；

   c.封装左侧图标的拖到函数，在拖动时，创建节点的第一个节点，var parent = graph.getDefaultParent(),然后获取数据graph.getModel()，最终在画布上展示    model.beginUpdate()，设置当前添加节点的样式graph.setSelectionCell(v1);

    

   2.给每个节点增加双击事件

    

   3.获取当前流程信息  

   currentEditor.writeGraphModel();

 4.双击打开当前节点信息弹框，获取当前节点信息，比如：

   parent.currentEditCells[0].name

5.保存当前节点中信息,比

最低0.47元/天 解锁文章
Little_Pig_Bug
关注
专栏目录
如何以XML导出mxGraph流程图？
前端-尔嵘
11-13 1775
如何以xml格式导出我的绘画内容， 单击导出按钮后，我已回到本地主机：8090，返回到演示 如何出口？该文档找不到确切的 于是尝试了： var encoder = new mxCodec(); var node = encoder.encode(graph.getModel()); mxUtils.popup(mxUtils.getPrettyXml(node), true); ...
关于自己写的流程设计随笔记录
weixin_34080951的博客
03-06 163
1.流程创建入口； a.在创建入口之前，定义当前被选中节点信息currentEditor和当前流程图信息currentGraph(后面保存和编辑会用到)； b.定义容器container, 上侧工具栏容器outline,上侧工具栏的逻辑效果 toolbar,左边工具栏拖动sidebar, 当前节点信息status； c.封装左侧图标的拖到函数，在拖动时，创建节点的第...
MxGraph - Delete删除事件监听失效
qq_42099419的博客
03-01 994
问题 添加 -> 选中 -> 删除失败 -> 点击画布 -> 选中 -> 删除成功 对于新拖入的块点击键盘的Delete删除失效，但是mxgrah已经添加了keyboard的事件监听，这是因为新增的时候（）未点击到画布失焦，此时mxgraph没有监听到对于的键盘事件 解决 在click事件那边添加上如下代码 graph.addListener(mxEvent.CLICK, function(sender, evt) { graph.container.s
vue中使用mxgraph插件流程图（第2弹）
weixin_44523852的博客
06-17 2185
mxgraph项目实战中遇到的问题 mxgraph是一款比较复杂的插件，毕竟都是英文的官方文档，在所难免会遇到一些问题，下面跟大家分享一下我的问题及解决方法： 1. 新建节点必须配合try…finally方法 insertVertexHandler(id, x, y) { //获取元素 const element = getOptionsElement(this.asideOptions, id); //获取图片 const src = element.icon; //获取标题 c
mxgraph删除所有的元素cells
热门推荐
NRapid&JRapid
07-09 1万+
一段代码，很简单 就可以删除mxgraph布局里面的所有元素啦 graph.removeCells(graph.getChildVertices(graph.getDefaultParent()));
MXgraph学习记录
我的博客
08-18 533
mxgrah vertex edge。 mxgrah已经停止维护了，新项目要做流程图换G6较好。
基于mxGraph来做的一款web的绘制流程图的javascript库工具mxGraph_gpx.zip
12-06
mxGraph是一款强大的JavaScript库，专为在Web上创建和编辑图形和流程图而设计。它提供了丰富的功能，允许用户通过简单易用的API构建复杂的图形界面。基于mxGraph的工具通常用于业务流程建模、软件设计、网络架构可视...
mxgraph.zip
06-29
mxGraph是一款强大的JavaScript库，专用于创建交互式图形应用程序，如流程图、拓扑图和其他可视化图表。在本文中，我们将深入探讨mxgraph.js的核心功能、Node API的使用以及如何结合XML文件进行数据解析和图形展示。...
mxGraph中文文档.md
07-07
mxgraph.js中文文档是一个官方的api，翻译来源于sunflower(github: https://github.com/SunInfoFE)，提供给更多的开发者参考和共享源码资源！
mxgraph如何实现拓扑图中节点闪烁或节点边框闪烁
06-25
mxgraph如何实现拓扑图中节点闪烁或节点边框闪烁的功能，模拟某些节点出现故障时候图元闪烁。
Mxgraph 使用教程（4）：详解mxgraph示例demo - Hello World
qq_43955202的博客
08-07 3317
提示：接下来所有演示均以vue为主 1.在vue中实现一个hello -world <template> <div> <div id="graphContainer" ></div> </div> </template> <script> import mxgraph from "./mxgraph"; const { mxGraph, mxClient, .
MxGraph - 解决通过mxgraph外部添加进mxgraph的mxCell不能立马被删除的问题
Jim Suen
10-10 1733
连着两个项目使用mxGraph来集成画流程图的功能，被这个东西折腾的够呛。 突然又遇到mxGraph相关的问题，搞了一上午没解决掉，突然找到解决方法，记录一下过程。 背景 项目中集成了mxGraph，可以把项目中的一些代表步骤的 activity 通过 拖拽 或者 点击 的方法添加进mxGraph的画布中（项目中的activity => mxGraph中的mxCell）。 如下图：左边是项...
Mxgraph 使用教程（2）：mxgraph常用方法介绍
qq_43955202的博客
08-07 7212
1.mxgraph常用包（这个js类库被分成了8个包。） 1. 最上层的mxClient类包括或者动态导入了其他的包。当前的版本存储在maxClient.VERSION中。 2. mxEditor包提供了图表编辑器相关的类实现。入口函数式mxEditor。 3.view和model包实现了图表组件。他引用的mxGraphModel包含了mxCells和缓存了mxGraphView中的cells的状态。 4.mxCellRender基于mxStylesheet中的定义来渲染cells的外观。mxUndoMa
Mxgraph 使用教程（1）：介绍mxgraph
qq_43955202的博客
08-07 1万+
1.mxgraph邂逅(×) 折磨（√） 楼主暑假实习，项目组需要开发一款标注系统，mentor要求使用nuxt+mxgraph来实现标注系统，所以就开始学习mxgraph，然而百度一下，我就蒙蔽了，这个框架国内确实很少用，并且查询了许多人的摆弄可，感觉都是一些基本的教学，自己摸索了很久，大概花了一个多月把项目搞定了，现在将自己的遇到的问题以及解放方法分享给大家。 2.mxgraphs介绍 官方文档： mxGraph是一系列以不同技术开发的工具库，旨在提供显示交互式的 图表和图形的应用程序的功能。 请
Chrome浏览器devtools使用系列一：Elements
最新发布
zzyp1927314的博客
06-20 727
本文讲解的版本信息如下，如果使用的版本和讲解的版本差距过大，可能会有不同的地方。
mxgraph
JJ_nan的博客
09-30 2615
1.首先，什么是mxcell：根据mxgraph的js部分的API，我们得知，mxCell就是在图中那些顶点和边的组合，也就是流程图中的图标和连线之类的。这些mxcell需要画在一个面板中，这个面板叫做mxgraph： Java代码 收藏代码 container = document.getElementById(‘lala’); var model = new mxGraphModel();
mxGraph节点图形设置
徐志摩的博客
10-16 7977
不积跬步，无以至千里.... ------节点样式设置 1、如何设节点颜色？ 通过属性fillColor（填充色）、gradientColor（渐变色），设为一样的颜色就是节点颜色了。 2、如何设置透明颜色？ 在配置文件中none可设为默认颜色，transparent可设透明颜色 3、节点不可改变大小 0否，1是 4、节点与连线紧密连接，无空隙
mxGraph绘图拆分重叠的节点连接线（仅组节点有效）
C_ccccccc的博客
06-16 1031
mxGraph绘图拆分重叠的节点连接线（仅组节点有效）
vue mxgraph 流程图实例
06-07
好的，这里给您提供一个简单的 Vue + mxGraph 实现流程图编辑的示例： 1. 安装 mxgraph-vue ``` npm install mxgraph-vue ``` 2. 在 Vue 组件中引入 mxgraph-vue ```vue <template> <div> <mxgraph ref="graph" v-bind:config="config" v-bind:editor-config="editorConfig"></mxgraph> </div> </template> <script> import mxgraph from 'mxgraph-vue'; export default { components: { mxgraph }, data() { return { config: { // 配置 mxGraph 的一些属性 // 可以参考 mxgraph-vue 的文档：https://github.com/jgraph/mxgraph-vue }, editorConfig: { // 配置 mxGraph 编辑器的一些属性 // 可以参考 mxgraph-vue 的文档：https://github.com/jgraph/mxgraph-vue } } }, mounted() { // 初始化 mxGraph this.$refs.graph.init(() => { // 在这里可以进行一些初始化操作 }); } } </script> ``` 3. 实现流程图的编辑功能 ```vue <template> <div> <mxgraph ref="graph" v-bind:config="config" v-bind:editor-config="editorConfig"></mxgraph> </div> </template> <script> import mxgraph from 'mxgraph-vue'; export default { components: { mxgraph }, data() { return { config: { // 配置 mxGraph 的一些属性 // 可以参考 mxgraph-vue 的文档：https://github.com/jgraph/mxgraph-vue }, editorConfig: { // 配置 mxGraph 编辑器的一些属性 // 可以参考 mxgraph-vue 的文档：https://github.com/jgraph/mxgraph-vue graphModel: { // 设置默认的节点和边的样式 defaultVertexStyle: { shape: 'rectangle', fontSize: 14, fontColor: '#000000', fillColor: '#ffffff', strokeColor: '#000000', strokeWidth: 1, rounded: true, }, defaultEdgeStyle: { shape: 'connector', fontSize: 12, fontColor: '#000000', strokeColor: '#000000', strokeWidth: 1, rounded: true, } } } } }, mounted() { // 初始化 mxGraph this.$refs.graph.init(() => { // 创建节点 const node1 = this.$refs.graph.addNode('节点1', 100, 100, 100, 50); const node2 = this.$refs.graph.addNode('节点2', 300, 100, 100, 50); const node3 = this.$refs.graph.addNode('节点3', 500, 100, 100, 50); // 创建边 this.$refs.graph.addEdge('边1', node1, node2); this.$refs.graph.addEdge('边2', node2, node3); }); } } </script> ``` 以上示例代码仅供参考，您可以根据自己的需求进行修改和扩展。希望能对您有所帮助！
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值