activiti explorer跨模板复制流程节点

简介: 最近的项目是用activiti explorer做流程前端。功能做出来后,经常被用户反馈 ,说流程页面不好用。画一个流程图后,再画一个,都要重头开始,如果导入及导出,用户又嫌麻烦。

最近的项目是用activiti explorer做流程前端。
功能做出来后,经常被用户反馈 ,说流程页面不好用。
画一个流程图后,再画一个,都要重头开始,如果导入及导出,用户又嫌麻烦。
用户希望能同时打开多个流程模板页面,将一个模板当前配的节点,复制到另外一个模板中。
这个可以做到吗?
答案是肯定的!
先找到activiti-explorer的复制粘贴代码
通过跟踪代码,找到代码的复制地方。
oryx.debug.js页面中的editCopy为原生的复制代码,而editPaste为粘贴的相关代码
怎么改?
考虑使用localStorage将复制的内空存在localStorage,而粘贴时,要将代码从localStorage读取出来。
经验证,修改代码如下

 editCopy: function( will_update, useNoOffset ){
        var selection = this.facade.getSelection();
        
        //if the selection is empty, do not remove the previously copied elements
        if(selection.length == 0) return;
        
        this.clipboard.refresh(selection, this.getAllShapesToConsider(selection), this.facade.getCanvas().getStencil().stencilSet().namespace(), useNoOffset);
       
        if( will_update ) this.facade.updateSelection();
        //将复制内容
        localStorage.setItem('flowclipboard', JSON.stringify(this.clipboard));  
       
    },
    
    /**
     * Performs the paste operation.
     */
    editPaste: function(){
         //从  h5中复制内容
         this.clipboard= JSON.parse(localStorage.getItem('flowclipboard'));
         //这个一定要序列化对象才可能,否则getChildShapes报错
         this.clipboard.shapesAsJson= JSON.parse( this.clipboard.shapesAsJson);
        // Create a new canvas with childShapes 
        //and stencilset namespace to be JSON Import conform

其实代码的修改只有三行,一个是将复制的内容转为字符串,存入localStorage,一个是从localStorage读取出来,注意,读取出来时,要转回jSOn对象,在转换过程中,shapesAsJson为一个字符串,需要再转换成JSON对象

 //这个一定要序列化对象才可能,否则getChildShapes报错
         this.clipboard.shapesAsJson= JSON.parse( this.clipboard.shapesAsJson);

至此,功能修改完成,但还有点小问题。 粘贴按钮总是要点了复制才有效,不能在页面初始化时,显示,找到修改代码toolbar.js,修改内容如下:

,
        {
            "type" : "button",
            "title" : "TOOLBAR.ACTION.PASTE",
            "cssClass" : "editor-icon editor-icon-paste",
            "action" : "KISBPM.TOOLBAR.ACTIONS.paste",
            "enabled" : localStorage.getItem('flowclipboard')!=''
        },

至此,代码全部成功!

相关文章
|
数据可视化 JavaScript 前端开发
BPMN 2.0 建模符号图标介绍说明
BPMN 2.0 建模符号图标介绍说明
945 0
|
Python
Python传参数:传值还是传址?
【2月更文挑战第18天】
398 6
|
Java Nacos
对于Nacos 2.x版本,默认是通过gRPC协议进行通信的
对于Nacos 2.x版本,默认是通过gRPC协议进行通信的
1377 7
|
11月前
|
消息中间件 存储 Serverless
【实践】快速学会使用阿里云消息队列RabbitMQ版
云消息队列 RabbitMQ 版是一款基于高可用分布式存储架构实现的 AMQP 0-9-1协议的消息产品。云消息队列 RabbitMQ 版兼容开源 RabbitMQ 客户端,解决开源各种稳定性痛点(例如消息堆积、脑裂等问题),同时具备高并发、分布式、灵活扩缩容等云消息服务优势。
274 2
|
JSON API 数据格式
python 使用 Stable Diffusion API 生成图片示例
本文提供了一个使用Python调用Stable Diffusion API生成图片的示例程序,包括启动API设置、发送POST请求、保存生成的图片和JSON数据,以及如何通过API调用特定模型的说明。
python 使用 Stable Diffusion API 生成图片示例
|
10月前
|
算法
数据结构之朋友关系处理
本文介绍了通过兴趣爱好来建立和分析朋友关系的方法。首先定义了一个用户结构,每个用户具有唯一ID,并通过链表链接其兴趣爱好朋友。文中展示了如何使用深度优先搜索(DFS)和广度优先搜索(BFS)算法来判断两个用户是否通过一系列共同的兴趣或朋友相互认识。通过具体的测试样例,比较了两种搜索算法在寻找用户间关系上的优缺点。DFS在内存使用上更为高效,但可能不是最优解;而BFS虽然能保证找到最短路径,但其空间复杂度较高。最后,提供了两种算法的具体实现代码,以帮助理解这两种方法在实际应用中的操作方式。
137 0
|
搜索推荐 算法 安全
AIGC对未来高校教学的影响
【1月更文挑战第14天】AIGC对未来高校教学的影响
443 3
AIGC对未来高校教学的影响
|
JavaScript 前端开发 大数据
Vue 灰度发布新功能的那些事
Vue 灰度发布新功能的那些事
319 3
|
存储 自然语言处理 小程序
【微信小程序】粤语教学平台-粤言粤语(下)
【微信小程序】粤语教学平台-粤言粤语
493 0