【技术博客】基于JsPlumb和JQuery-UI的流程图的保存和再生成
开发组在开发过程中,都不可避免地遇到了一些困难或问题,但都最终想出办法克服了。我们认为这样的经验是有必要记录下来的,因此就有了【技术博客】。
基于JsPlumb和JQuery-UI的流程图的保存和再生成
这篇技术博客基于软件工程课程的VisualPytorch之上,代码在一定程度上参考了https://www.cnblogs.com/sggx/p/3836432.html这篇博客。
VisualPytorch项目链接如下:VisualPytorch
前言-为什么要保存流程图
对于这样一个类流程图或者模型图,用户会有保存、查看以及再编辑的需求,仅仅提供让用户拖拽连线的功能、让用户每次都从头搭建是会严重影响用户体验的,因此需要能够保存模型图。
这篇博客主要用于提供思路,而非提供整套的解决方案,具体解决方案因人而异。
如何保存流程图
保存流程图是两方面的问题:
(1)选定合适的保存格式
(2)确保保存的信息足够来还原完整的图
在保存时,我采用的是将整个图分为两个数组保存入数据库中。图主要由模块(开始、reshape层)和连线两部分组成,因此我选择将模块保存为一个json,而连线保存为数组。
保存模块采用的主要方法
$("#canvas").find(".node").each(function (index, element) {var id = $(element).attr('id');nets[id] = {"name": $(element).attr('name'),"attribute": eval('(' + window.localStorage.getItem(id) + ')'),"left": $(element).css('left'),"top": $(element).css('top')}});
在画布中遍历所有的模块类,nets对象的标签为模块的id,而内容为需要保存的属性。需要注意的是,left与top属性必须保存,其相当于x,y坐标,用于还原时定位div的位置。
保存连线采用的主要方法
for (var i = 0; i < conn_list.length; i++) {var source_id = conn_list[i]["sourceId"];var target_id = conn_list[i]["targetId"];var conn = {"source": {"id": source_id,"anchor_position": conn_list[i]["endpoints"][0]["anchor"]["type"]},"target": {"id": target_id,"anchor_position": conn_list[i]["endpoints"][1]["anchor"]["type"]}};nets_conn.push(conn);}
连线保存需要注意两个地方,首先是conn_list的获得,即如何得到目前的所有连线,这里我调用了JsPlumb中现有的接口
conn_list = jsPlumb.getAllConnections()
另一个地方时anchor_position。这里涉及到了JsPlumb的部分,在连线的时候,只有有anchor的地方才可以连线,为了复原整个图,我们需要记录下anchor的位置。
如何复原流程图
如何将保存的数据从数据库中取出不应该是本博客的内容,不多赘述。先贴上完整代码
var structure = eval('(' + net_work["structure"] + ')');var nets = structure['nets'];var nets_conn = structure['nets_conn'];var static_val = structure['static'];var drop_function = $("#canvas").droppable('option', 'drop');var event;jQuery.each(nets, function (id, val) {jsPlumb.ready(function () {var ui = {'offset': {'left': parseInt(val['left'].split('px')) + $("#canvas").offset().left,'top': parseInt(val['top'].split('px')) + $("#canvas").offset().top},'draggable': [{"id": val['name'],"innerHTML": $("#" + val['name'])[0].innerHTML}],'id': id};drop_function(event, ui);});window.localStorage.setItem(id, JSON.stringify(val['attribute']));});jQuery.each(nets_conn, function (id, val) {jsPlumb.ready(function () {jsPlumb.connect({"source": val['source']['id'],"target": val['target']['id'],"anchors": [val['source']['anchor_position'], val['target']['anchor_position']],"endpoint": ["Dot", {radius: 5}],"paintStyle": {stroke: "#fc2f49",strokeWidth: 3,},"maxConnections": -1,"connector": ["Flowchart", {stub: [40, 60],gap: 5,cornerRadius: 5,alwaysRespectStubs: true}],"overlays": [["Arrow", {width: 10, length: 10, location: 1}]],"connectionsDetachable": true,})});});
代码看着很多,原理非常简单,就是把用户画图的操作再用js脚本做一遍。
放置模块
首先第一点,用户在拖拽div进入画布时,画布为droppable状态,会触发JQuery-UI 的drop事件。
$("#canvas").droppable({scope: "ss",drop: function (event, ui) {.......}
})
第一段代码中的
var drop_function = $("#canvas").droppable('option', 'drop')
drop_function函数就对应了drop事件触发后执行的代码块。
如此一来便很容易理解,只要让每个被保存的模块去触发drop事件即可,参数ui用保存的属性来自己构造,详情参照代码。
重新连线
重新连线部分,直接调用JsPlumb的连线方法
jsPlumb.connect()
即可。
注意我们的anchor要选择之前保存的anchor。
转载于:https://www.cnblogs.com/1606-huluwa/p/10872754.html
【技术博客】基于JsPlumb和JQuery-UI的流程图的保存和再生成相关推荐
- Redis Primer(1)基于JedisPool的Redis hset并发性能测试 - @钟超 · 技术博客专栏 - 博客频道 - CSDN.NET...
Redis Primer(1)基于JedisPool的Redis hset并发性能测试 - @钟超 · 技术博客专栏 - 博客频道 - CSDN.NET Redis Primer(1)基于JedisP ...
- java web论文_(定稿)毕业论文基于JavaWeb技术博客项目的设计论文(完整版)最新版...
<[毕业论文]基于Java Web技术博客项目的设计论文.doc>由会员分享,可免费在线阅读全文,更多与<(定稿)毕业论文基于Java Web技术博客项目的设计论文(完整版)> ...
- [Hello My Blog]基于腾讯云的WordPress个人技术博客搭建
下午花了两个多小时的时间搭建了自己的第一个博客,本来想直接转载一份别人的教程作为第一篇文章试试水,但是自己的在搭建的过程中也遇到了一些问题,所以决定自己写一篇做一个简单的分享顺便避免小白白再踩坑吧.博 ...
- Netflix 官方技术博客:个性化分发与推荐,走在前列的 Netflix 是怎么做的?
来源:36氪 概要:对于个性化分发与推荐,Netflix都是一个走在前面的公司.其首页的个性化推荐策略不断被后来者所模仿. 对于个性化分发与推荐,Netflix都是一个走在前面的公司.其首页的个性化推 ...
- 【转】【技术博客】Spark性能优化指南——高级篇
http://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651745207&idx=1&sn=3d70d59cede236e ...
- 前端开发桌面软件、技术博客整理等
整理桌面 渐渐的发现,很多东西存储在本地,永远不如放在云端,很多需要记录的东西,换台电脑,原来的东西可能找不到了,整理的过程是繁琐的,但是结果却是很方便. 记录来盈嘉互联后电脑安装的软件 马克飞象.t ...
- iOS学习资源汇总(开源项目、第三方库、技术博客等等)
iOS学习资源汇总(开源项目.第三方库.技术博客等等) 字数3919 阅读10309 评论29 喜欢297 前言 Github众所周知,全球最大的同性社区交友网站,在这里你可以获取任何你想要的,只要你 ...
- [技术博客]使用CDN加快网站访问速度
[技术博客]使用CDN加快网站访问速度 2s : most users are willing to wait 10s : the limit for keeping the user's atten ...
- 如何写一篇好的技术博客
在工作过程中,发现对很多东西都一知半解,不是很透澈,到头来很容易模糊,如果有一篇好的技术博客予以总结,一来即使忘记了,回国头来再看,仍然能 够从自己的思路中恢复:二来总结一下,还会发现一些潜在问题:三 ...
最新文章
- mysql中两根竖线什么意思_SQL如何查询表字段值以竖线分割的数据
- JavaScript中的nodeName nodeType nodeValue区别
- 英语 用on还是/at/还是in
- 【抽象代数】类方程和有限群
- spark mlib行索引矩阵
- A blog from Sensory
- 苹果mac屏幕截图工具:Snagit
- PCBlayout设计
- Spiral Matrix(Medium)
- 几款用于电能质量测量的芯片
- Xilinx FPGA的Device DNA获取方法
- 如何出售自己的代码并且不让人看到自己的源码?
- mysql 1006_MySQL: 1006 - Can't create database '***' (errno: 13) 错误 解决方法
- 基于RV1126 Video分析-----链接 isp 与mipi csi 的media模块
- ueditor 前后端分离+图片上传
- 多模态生物特征识别文章略读
- Intriguing properties of neural networks手动翻译
- vsCode html文件格式化
- 推荐阿里巴巴 15 个前端开源项目
- [ Azure - IAM ] Azure 中的基于角色的访问控制 (RBAC) 与基于属性的访问控制 (ABAC)