backdrop.js

Go to the documentation of this file.

 
define( [
                'remoto!stdlib:js/panes/panes/nodeCanvas/node.js',
                'remoto!stdlib:js/include/utils.js',
                'remoto!stdlib:js/include/color.js',
                'remoto!stdlib:js/panes/panes/nodeCanvas/backdrop.css',
        ],
        function(node,utils,color)
        {
                'use strict';
 
                var svgns = "http://www.w3.org/2000/svg";
 
                backdrop.prototype = new node();
 
                var resizeSize = 5;
 
                function backdrop(_path,_cnv,_attrs,_inputs,_outputs,_base,_icon)
                {
                        this._nodeClass = this._nodeClass || backdrop;
 
                        this._notesWrapper = null;
                        this._notes = null;
                        this._header = null;
                        this._layer = "backdrop";
 
                        this._resizers = {
                                TL: null,
                                TR: null,
                                BL: null,
                                BR: null
                        };
 
                        node.call( this, _path, _cnv, _attrs, null, null, _base || "backdrop.rnd", _icon );
                }
 
                backdrop.prototype.createSVG = function()
                {
                        if (this._root) return;
 
                        //var p = this._canvas._root;
                        var p = this._canvas._layers[this._layer];
                        var g = this._root = $( document.createElementNS(svgns,"g") ).appendTo(p).attr( { class:"node" } );
                        g.attr( { id: "node-backdrop" } );
 
                        g.hide();
 
                        g.attr( {
                                "vector-effect":"non-scaling-stroke",
                                //filter:"url(#dropShadow)",
                        } );
 
                        var b = this._background = $( document.createElementNS(svgns,"rect") ).appendTo(g);
 
                        b.attr( {
                        //      rx:2,
                        //      ry:2,
                                fill:"#"+this.color,
                                "vector-effect":"non-scaling-stroke",
                                //filter:"url(#dropShadow)",
                                "class":"nodeBackground node-backdrop",
                                //"mask":"url(#nodeGradientMask)",
                                "pointer-events": "none",
                        } );
 
                        var h = this._header = $( document.createElementNS(svgns,"rect") ).appendTo(g);
 
                        h.attr( {
                                fill:"#"+this.color,
                                "vector-effect":"non-scaling-stroke",
                                "class":"nodeHeader",
                        } );
 
                        var l = this._label = $( document.createElementNS(svgns,"text") ).appendTo(g);
 
                        l.text( this.name );
 
                        l.attr( {
                                "class":"nodeLabel",
                                "text-anchor":"middle",
                                x:0,
                                y:11,
                                "font-size": 10,
                        } );
 
                        var nw = this._notesWrapper = $( document.createElementNS(svgns,"foreignObject") ).appendTo(g);
 
                        nw.attr( {
                                x:3,
                                y:15,
                                width:100,
                                height:100,
                        } );
                        nw.css( { "pointer-events": "none" } );
 
                        var n = this._notes = $( "<div class='backdropText'>" ).appendTo(nw);
                        var t = this._attributes.notes.value;
                        n.text( t );
 
                        var rc;
                        var rk = Object.keys(this._resizers);
 
                        for (var rr=0,i=0; i<rk.length; rr+=90,i++)
                        {
                                rc = this._resizers[rk[i]] = $( document.createElementNS(svgns,"path") ).appendTo(g);
                                rc.attr( {
                                        x: 0,
                                        y: 0,
                                        transform: "rotate("+rr+")",
                                        d: "M0 "+resizeSize+"v-"+resizeSize+"h"+resizeSize,
                                        "class": "resizeHandle",
                                } );
 
                                rc.bind("mousedown", this.resizeCorner.bind(this,rk[i]));
                        }
 
                        this.color = this.color;
 
                        g.data("node",this);
 
                        //this.initHandlers();
                }
 
                backdrop.prototype.applyDiff = function(diff,user)
                {
                        node.prototype.applyDiff.call(this,diff,user);
 
                        this._diffing = true;
 
                        if ("attributes" in diff)
                        {
                                var d = diff["attributes"];
 
                                if ("box" in d)
                                        this.resize();
                        }
 
                        this._diffing = false;
                }
 
                backdrop.prototype.resize = function()
                {
                        this._root.show();
 
                        var b = this._background;
 
                        //console.log(this._attributes);
 
                        var w = this._attributes.box.value.w.value;
                        var h = this._attributes.box.value.h.value;
 
                        var a = {
                                x:0,
                                y:0,
                                width:w,
                                height:h,
                        };
                        b.attr(a);
                        this._boundingBox = a;
 
                        var rr = this._resizers;
                        rr.TL.attr( { transform: "translate(0,     0)     rotate(0)   " } );
                        rr.TR.attr( { transform: "translate("+w+", 0)     rotate(90)  " } );
                        rr.BR.attr( { transform: "translate("+w+", "+h+") rotate(180) " } );
                        rr.BL.attr( { transform: "translate(0,     "+h+") rotate(270) " } );
 
                        var wr = this._notesWrapper;
                        var a2 = {
                                x:3,
                                y:15,
                                width:Math.max(w-6,0),
                                height:Math.max(h-18,0),
                        };
                        wr.attr(a2);
 
                        var hd = this._header;
                        var ha = {
                                x:0,
                                y:0,
                                width: w,
                                height: 14,
                        }
                        hd.attr(ha);
 
                        this._label.attr( { x:w/2 } );
 
                        var ns = this._attributes.font.value.size.value;
                        var nc = this._attributes.font.value.color.value;
                        var ff = this._attributes.fontface.value;
                        this._notes.css( {
                                "font-family": ff,
                                "font-size": ns+"px",
                                "line-height": (ns+4)+"px",
                                "color": "#"+nc,
                        } );
                }
 
                backdrop.prototype.resizeCorner = function(which,evt)
                {
                        //console.log("resize corner",arguments);
                        //return false;
 
                        //FIXME make sure undo is in here
 
                        var THIS = this;
                        var pos = this.position();
                        var body = $("body");
                        var doc = $(document);
                        var x=0,y=0,moved = false;
                        var mw = this._attributes.box.value.w.value;
                        var mh = this._attributes.box.value.h.value;
                        var mx,my;
                        var b = { w:{value:mw}, h:{value:mh} };
 
                        var v = which[0] === "T";       //top or bottom?
                        var h = which[1] === "L";       //left or right?
 
                        var click = {
                                cx:evt.clientX,
                                cy:evt.clientY,
                        };
 
                        function mm(e)
                        {
                                if (!moved)
                                {       moved = true;
                                        THIS.startMove();
                                        body.css("cursor","pointer");
                                }
 
                                x = e.clientX - click.cx;
                                y = e.clientY - click.cy;
 
                                x /= THIS._canvas._zoom;
                                y /= THIS._canvas._zoom;
 
                                //console.log(x,y,e,click);
 
                                if (v)
                                {
                                        my = y;
                                        b.h.value = mh-y;
                                }
                                else
                                {       my = 0;
                                        b.h.value = mh+y;
                                }
 
                                if (b.h.value < 0)
                                {
                                        my = b.h.value;
                                        b.h.value = Math.abs(b.h.value);
                                }
 
                                if (h)
                                {
                                        mx = x;
                                        b.w.value = mw-x;
                                }
                                else
                                {       mx = 0;
                                        b.w.value = mw+x;
                                }
 
                                if (b.w.value < 0)
                                {
                                        mx = b.w.value;
                                        b.w.value = Math.abs(b.w.value);
                                }
 
                                //console.log(mx,my,b.w,b.h);
                                THIS.moveBy(mx,my);
                                THIS._attributes.box.immediateValue = b;
 
                                THIS.resize();
 
                                return false;
                        }
                        doc.bind("mousemove", mm);
 
                        function mu(e)
                        {
                                doc.unbind("mouseup",mu);
                                doc.unbind("mousemove",mm);
                                body.css("cursor","");
 
                                THIS.stopMove();
                        }
                        doc.bind("mouseup", mu);
 
                        return false;
                }
 
                backdrop.prototype.encompassedNodes = function()
                {
                        var c = this._canvas;
                        var b = this._background[0].getBBox();
                        b.x = c._x + this.x*c._zoom;
                        b.y = c._y + this.y*c._zoom;
                        b.width *= c._zoom;
                        b.height *= c._zoom;
                        //console.log(b);
 
                        var rr = this._canvas._root[0].ownerSVGElement;
                        //var c = rr.getIntersectionList(b,null);
                        var c = rr.getEnclosureList(b,null);
                        var n,l = {};
 
                        for (var i=0;i<c.length;i++)
                        {
                                //if (c[i] != b[0])                                     //ignore the selection box itself
                                if (c[i].classList.contains("nodeBackground"))          //only capture the node backgrounds, not cables, plugs or selection box
                                {
                                        n = $( c[i].parentNode ).data("node");
                                        l[n.id] = n;
                                }
                        }
 
                        return l;
                }
 
                backdrop.prototype.isEmpty = function()
                {
                        var l = this.encompassedNodes();
 
                        return (Object.keys(l).length === 0);
                }
 
 
                backdrop.prototype.__defineSetter__("color", function(c)
                {
                        this._attributes.node.value.color.value = c;
                        this._background.attr( {
                                fill:"#"+c,
                                stroke:"#"+c,
                        } );
 
                        this._header.attr( {
                                fill:"#"+c,
                        } );
 
                        var rc,rk = Object.keys(this._resizers);
                        for (var i=0; i<rk.length; i++)
                        {
                                rc = this._resizers[rk[i]];
                                rc.attr( {
                                        stroke: "#"+c
                                } );
                        }
 
                        var l = color.fromHTML(c).luminance;
 
                        if (this._label)
                                this._label.css( {
                                        fill: (l > .6) ? "#000000" : "#FFFFFF",
                                } );
                } );
 
                backdrop.prototype.__defineGetter__("color", function()
                {
                        return this._attributes.node.value.color.value;
                } );
 
                backdrop.prototype.__defineSetter__("notes", function(n)
                {
                        this._attributes.notes.value = n;
 
                        this._notes.text(n);
                } );
 
                backdrop.prototype.__defineGetter__("notes", function()
                {
                        return this._attributes.notes.value;
                } );
 
                backdrop.prototype.__defineSetter__("font", function(f)
                {
                        //console.log("set font:",f);
 
                        this._attributes.font.value = f;
 
                        this.resize();
                } );
 
                backdrop.prototype.__defineGetter__("font", function()
                {
                        return this._attributes.font.value;
                } );
 
                backdrop.prototype.__defineSetter__("fontface", function(f)
                {
                        //console.log("set font:",f);
 
                        this._attributes.fontface.value = f;
 
                        this.resize();
                } );
 
                backdrop.prototype.__defineGetter__("fontface", function()
                {
                        return this._attributes.fontface.value;
                } );
 
                backdrop.prototype.__defineSetter__("selected", function(s)
                {
                        if (s === this._selected)
                                return;
 
                        this._selected = s;
 
                        if (s)
                                this._root.attr( {"class":"node node-selected"} );
                        else
                                this._root.attr( {"class":"node"} );
 
                        var l = this.encompassedNodes();
                        l[this.id] = this;
 
                        for (var n in l)
                                l[n].selected = s;
 
                        return this._selected;
                } );
 
                backdrop.prototype.__defineGetter__("selected", function()
                {
                        return this._selected;
                } );
 
 
                return backdrop;
        }
);