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系统设计器，流程图设计，表单设计建模，报表设计，可视化，设计时，运行时，轻量级开放平台。