• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

FlowDesigner: FlowDesigner是一款javascript库,使用它可在网页中快速开发出绘制流程 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

FlowDesigner

开源软件地址:

https://gitee.com/youseries/flowdesigner

开源软件介绍:

FlowDesigner简介

FlowDesigner 是一套可以在网页中使用的基础JS绘图库,采用ES6语法编写,支持除IE以外所有浏览器,使用它可以快速绘制出各种类型的由节点和连线构成的流程图。在线DEMO:http://58.246.62.194:16808/flow-designer-demo/

安装

在一个已有的基于npm的js项目当中,执行命令npm install flowdesigner即可将最新版本的flowdesigner安装到本地的JS项目当中。

使用

使用设计器,第一步是需要添加节点,比如下面的代码当中就可以添加一个Start节点,

import {Node} from 'flowdesigner';export default class StartNode extends Node{`    getSvgIcon(){        return 'start.svg';    }}

这里的getSvgIcon方法为Node类中提供的方法,必须要将其覆盖,该方法需要返回一个svg格式图片地址(svg格式图片可以用AI之类图像软件制作)。返回的svg就是这个start节点上显示的图标,之所以返回svg格式图片,是因为svg支持缩放而不失真。在实际使用当中,类似这里的StartNode因为是用户自己实现,所以还应该包含一些用户自定义的方法。有了定义好的节点类之后,接下来,我们还需要实现一个对应的工具类,将节点类和设计器关联起来,其代码如下:

import {Tool} from 'flowdesigner';import StartNode from './StartNode.js';export default class StartTool extends Tool{    getType(){        return "start";    }    getIcon(){        return `<i class="flow flow-start" style="color:#737383"></i>`    }    newNode(){        return new StartNode();    }    getConfigs(){        return {            in:0,            out:1,            single:true        };    }    getPropertiesProducer(){        const _this=this;        return function (){            const g=$(`<div></div>`);            return g;        }    }}

在上面的代码当中,StartTool必须要扩展自Tool类,其中的四个方法都是Tool类中提供的要求子类必须要覆盖的方法。

getType方法返回当前节点类型;getIcon方法用于返回当前节点在工具栏上的图标(这里用到的是字体图标);newNode方法表示在工具栏中点击这个节点工具、再到绘图区点击鼠标时将创建的节点对象,这里就返回一个新的StartNode对象;getConfigs方法用于返回当前节点在图中的配置信息:single为true表示只能有一个,否则可以有多个;in属性表示当前节点进入的连线可以有多少,为0表示不能有进入的连线;out表示出去的连线有多少。

最后的getPropertiesProducer方法用于返回当前节点在绘图区被用户选中后出现的属性内容,这里要求返回一个function,在这个function中返回当前选中节点具体的属性内容。需要注意的是,getPropertiesProducer返回的function中的this会被替换成当前选中的节点对象,而非function自身,这样我们就可以很容易的修改选中对象的属性,下面的getPropertiesProducer代码摘自urule中规则流的ActionTool中,可以看到其修改属性的方法:

getPropertiesProducer(){    const _this=this;    return function (){        const g=$(`<div></div>`);        const actionBeanGroup=$(`<div class="form-group"><label>动作Bean</label></div>`);        const actionBeanText=$(`<input type="text" class="form-control" title="一个实现了com.bstek.urule.model.flow.FlowAction接口并配置到Spring中的Bean的ID">`);        actionBeanGroup.append(actionBeanText);        const self=this;        actionBeanText.change(function(){            self.actionBean=$(this).val();        });        actionBeanText.val(this.actionBean);        g.append(actionBeanGroup);        g.append(_this.getCommonProperties(this));        return g;    }}

定义好Tool类之后,接下来就可以将其添加到设计器,同时渲染输出到页面,如下面的代码所示:

import {FlowDesigner} from 'flowdesigner';import StartTool from './StartTool.js';import EndTool from './EndTool.js';import TaskTool from './TaskTool.js';const designer=new FlowDesigner('container');designer.addTool(new StartTool());designer.addTool(new EndTool());designer.addTool(new TaskTool());designer.buildDesigner();

在上面的代码当中,const designer=new FlowDesigner('container');表示创建一个设计器对象,它需要一个容器ID作用参数,接下来调用它的addTool方法将我们自定义的Tool添加到设计器中,最后调用设计器的buildDesigner方法渲染设计器。

上述这些工作完成之后,我们可以看到如在线DEMO:http://58.246.62.194:16808/flow-designer-demo/ 所示效果。

实际使用中,应该还会向工具栏添加一些其它的辅助按钮,比如保存之类,这些可调用设计器的addButton方法实现,如下面的代码所示:

designer.addButton({    icon:'<i class="rf rf-save"></i>',    tip:'保存',    click:function(){        event.eventEmitter.emit(event.SHOW_LOADING,"数据保存中");        const content=designer.toXML();        if(!content){            event.eventEmitter.emit(event.HIDE_LOADING);            return;        }        let postData={content,file,newVersion:false};        const url=window._server+'/common/saveFile';        ajaxSave(url,postData,function () {            event.eventEmitter.emit(event.HIDE_LOADING);            MsgBox.alert('保存成功');        });    }});

更为复杂的用法,可参考urule-sample中关于规则流的实现,urule-sample地址如下:http://58.246.62.194:16808/urule-sample/

URule规则引擎决策流源码地址:http://git.oschina.net/youseries/urule 这里的决策流就是基于FlowDesigner项目实现。

UFLO中提供的网页版流程设计器也是基于flowdesigner实现:http://git.oschina.net/youseries/uflo


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue-html5-editor: 一个vue的html5富文本编辑器插件发布时间:2022-03-23
下一篇:
layui-form-design: 发布时间:2022-03-23
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap