公司研发的管理系统有工做流图形化设计和查看功能,这个功能的开发历史比较久远。在那个暗无天日的年月里,IE几乎一统江湖,因此瓜熟蒂落地采用了当时红极一时的VML技术。javascript
后来的事情你们都知道了,IE开始走下坡路,VML这个技术如今早已灭绝,致使原来的工做流图形化功能彻底不能使用,因此须要采用新技术来重写工做流图形化功能。java
多方对比以后,决定采用zrender库来实现(关于zrender库的介绍,请看http://ecomfe.github.io/zrender/),花了一天的时间,终于作出了一个大体的效果模型,以下图所示:git
流程图由两类部件组成:活动部件和链接弧部件,每一类部件包含多个性状不一样的部件。github
以活动部件为例,圆形的是开始活动,平行四边形是自动活动,长方形是人工活动,等等。canvas
在代码实现上,定义了Unit(部件基类),全部的部件都继承自这个基类。经过Graph类来管理整个流程图,包括全部部件、上下文菜单等等都由Graph来统一管理和调度,代码以下:app
var Libra = {}; Libra.Workflow = {}; Libra.Workflow.Graph = function(type, options){ var graph = this, activities = {}, transitions = {}; var zrenderInstance, contextMenuContainer; this.type = type; this.addActivity = function(activity){ activity.graph = graph; activities[activity.id] = {object:activity}; }; this.getActivity = function(id){ return activities[id].object; }; this.addTransition = function(transition){ transition.graph = graph; transitions[transition.id] = {object:transition}; }; function modElements(shapes){ shapes.each(function(shape){ zrenderInstance.modElement(shape); }); return shapes; } // 当前正在拖放的节点 var dragingActivity = null; // 活动节点拖放开始 this.onActivityDragStart = function(activity){ dragingActivity = activity; }; // 活动节点拖放结束 this.onActivityDragEnd = function(){ if(dragingActivity) refreshActivityTransitions(dragingActivity); dragingActivity = null; }; // 拖动过程处理 function zrenderInstanceOnMouseMove(){ if(dragingActivity != null) refreshActivityTransitions(dragingActivity); } // 刷新活动相关的全部链接弧 function refreshActivityTransitions(activity){ var activityId = activity.id; for(var key in transitions){ var transition = transitions[key].object; if(transition.from === activityId || transition.to == activityId){ zrenderInstance.refreshShapes(modElements(transition.refresh(graph))); } } } // 当前选中的部件 var selectedUnit = null; this.onUnitSelect = function(unit){ if(selectedUnit) zrenderInstance.refreshShapes(modElements(selectedUnit.unselect(graph))); zrenderInstance.refreshShapes(modElements(unit.select(graph))); selectedUnit = unit; }; // 记录当前鼠标在哪一个部件上,能够用来生成上下文相关菜单 var currentUnit = null; this.onUnitMouseOver = function(unit){ currentUnit = unit; }; this.onUnitMouseOut = function(unit){ if(currentUnit === unit) currentUnit = null; }; // 上下文菜单事件响应 function onContextMenu(event){ Event.stop(event); if(currentUnit) currentUnit.showContextMenu(event, contextMenuContainer, graph); } this.addShape = function(shape){ zrenderInstance.addShape(shape); }; // 初始化 this.init = function(){ var canvasElement = options.canvas.element; canvasElement.empty(); canvasElement.setStyle({height: document.viewport.getHeight() + 'px'}); zrenderInstance = graph.type.zrender.init(document.getElementById(canvasElement.identify())); for(var key in activities){ activities[key].object.addTo(graph); } for(var key in transitions){ transitions[key].object.addTo(graph); } // 建立上下文菜单容器 contextMenuContainer = new Element('div', {'class': 'context-menu'}); contextMenuContainer.hide(); document.body.appendChild(contextMenuContainer); Event.observe(contextMenuContainer, 'mouseout', function(event){ // 关闭时,应判断鼠标是否已经移出菜单容器 if(!Position.within(contextMenuContainer, event.clientX, event.clientY)){ contextMenuContainer.hide(); } }); // 侦听拖动过程 zrenderInstance.on('mousemove', zrenderInstanceOnMouseMove); // 上下文菜单 Event.observe(document, 'contextmenu', onContextMenu); }; // 呈现或刷新呈现 this.render = function(){ var canvasElement = options.canvas.element; canvasElement.setStyle({height: document.viewport.getHeight() + 'px'}); zrenderInstance.render(); }; }; /* * 部件(包括活动和链接弧) */ Libra.Workflow.Unit = Class.create({ id: null, title: null, graph: null, // 当前是否被选中 selected: false, // 上下文菜单项集合 contextMenuItems: [], initialize: function(options){ var _this = this; _this.id = options.id; _this.title = options.title; }, createShapeOptions: function(){ var _this = this; return { hoverable : true, clickable : true, onclick: function(params){ // 选中并高亮 _this.graph.onUnitSelect(_this); }, onmouseover: function(params){ _this.graph.onUnitMouseOver(_this); }, onmouseout: function(params){ _this.graph.onUnitMouseOut(_this); } }; }, addTo: function(graph){}, // 刷新显示 refresh: function(graph){ return []; }, // 选中 select: function(graph){ this.selected = true; return this.refresh(graph); }, // 取消选中 unselect: function(graph){ this.selected = false; return this.refresh(graph); }, // 显示上下文菜单 showContextMenu: function(event, container, graph){ container.hide(); container.innerHTML = ''; var ul = new Element('ul'); container.appendChild(ul); this.buildContextMenuItems(ul, graph); // 加偏移,让鼠标位于菜单内 var offset = -5; var rightEdge = document.body.clientWidth - event.clientX; var bottomEdge = document.body.clientHeight - event.clientY; if (rightEdge < container.offsetWidth) container.style.left = document.body.scrollLeft + event.clientX - container.offsetWidth + offset; else container.style.left = document.body.scrollLeft + event.clientX + offset; if (bottomEdge < container.offsetHeight) container.style.top = document.body.scrollTop + event.clientY - container.offsetHeight + offset; else container.style.top = document.body.scrollTop + event.clientY + offset; container.show(); }, // 建立上下文菜单项 buildContextMenuItems: function(container, graph){ var unit = this; unit.contextMenuItems.each(function(item){ item.addTo(container); }); } });
zrender默认已经支持了对图形的拖动,因此活动部件的拖动只须要设置dragable属性为真便可。不过虽然活动部件能够拖动,但活动部件上的链接线不会跟着一块儿动,这须要侦听拖动开始事件、拖动结束事件以及拖动过程当中的鼠标移动事件,来实现链接线的实时重绘。在Graph中侦听鼠标移动事件,就是为了实现链接线等相关图形的实时重绘。ide
每一个部件都规划了八个链接点,默认状况下,链接弧不固定与某个链接点,而是根据活动部件的位置关系,自动找出最近的链接点,因此在拖动活动部件的时候,能够看到链接弧在活动部件上的链接点在不断变化。测试
上面只是以最简化的方式实现了工做流图形化设计的基本功能,完善的图形化设计应包含曲线、链接点的拖放等等,以下图所示:ui
上面是公司产品中的工做流图形化设计功能,功能相对于上面的范例要完善许多,但基本原理不变,无非就是细节处理更多一些。this
特别是在画曲线的地方花了不少时间,中学的平面几何知识几乎都忘记了,因此作起来花了很多功夫,这部分准备之后专门写篇文章来详谈。
本文的结尾会给出前期建模测试阶段的完整代码下载,是前期代码,不是最终代码,缘由你懂的,见谅。