11.删除组件--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）
11.删除组件–从零起步实现基于Html5的WEB设计器Jquery插件（含源码）
本节论述如何进行组件的删除，如下图。
其操作过程肯定是先要选定要删除的组件，并显示出删除按钮，当然取消选择的时候要隐藏按钮，点击删除组件后，除了组件本身被删除，与之相连的连线也要删除，
理清楚这个过程，我们就可以设计一个删除按钮的指示器
function RemoveIndicator(component){ this.component=component; var me=this; var bclose = new paper.PointText({ point: [component.properties.x+component.properties.width+3, component.properties.y-3], content: \'\u00D7\', fillColor: "red", fontWeight:"Bold", fontFamily: "arial", fontSize: 16, justification: \'right\', opacity: 0.75 }); this.group=new paper.Group(); this.group.addChild(bclose); bclose.onMouseEnter = function() { this.set({opacity: 1}); document.body.style.cursor = \'pointer\'; } bclose.onMouseLeave = function() { this.set({opacity: 0.5}); document.body.style.cursor = \'default\'; } this.group.visible=false; bclose.onClick = function(event) { if (event.event.button == 0) { me.component.designer.removeComponent(me.component); } } return this; } RemoveIndicator.prototype = { show: function () { this.group.visible=true; return this; }, hide:function(){ this.group.remove(); return this; } };
注意此处就不需要扩展Component组件了，直接定义它的原型，但是每一个指示器定义了一个this.component表示它归属的组件。它出现的位置是组件右上角，所以坐标从x+width+3,y-3,分别偏移3个像素，
注意上图中高亮的代码，调用设计器视图的removeComponent方法：
VisualDesigner.prototype.removeComponent = function (component) { var me=this; $.each(me.lineManager.getLines(component),function(index,val){ //遍历组件相连的每一条线 val.destroy();//删除线 delete me.lines[val.properties.id] }) component.unselect(); //取消选择，删除组件的连接点，大小调整锚点 component.destroy(); //删除组件 delete me.nodes[component.properties.id] $.each(this.lines, function (idx, item) { if (item.properties.id==component.properties.id) { //如果要删除是连线 item.unselect(); item.destroy(); delete me.lines[item.properties.id] } }) }
同时在Component的select 和unselect分别调用它的show/hide显示和隐藏。
Component.prototype.select = function () { if (!this.designer.lining){ this.group.children[0].selected = true; this.resizer=new Resizer(this).render(); if (this.removeIndicator) this.removeIndicator.show(); else this.removeIndicator=new RemoveIndicator(this).show(); } } Component.prototype.unselect = function () { this.group.children[0].selected = false; if (this.resizer){ this.resizer.destroy(); this.resizer=null; document.body.style.cursor="default" } if (this.removeIndicator){ this.removeIndicator.hide(); this.removeIndicator=null; } }
源代码：sample.1.9.rar
（本文为原创，在引用代码和文字时请注明出处）
关键字：设计器源代码，Web设计器，工作流设计器，jQuery插件，组态设计器，SCADA系统设计器，流程图设计，表单设计建模，报表设计，可视化，设计时，运行时，轻量级开放平台。
版权声明：本文为coolalam原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。