nodeCanvas/nodeProperties.js

Go to the documentation of this file.

 
define( [
                'require',
                'remoto!stdlib:js/panes/pane.js',
                'remoto!stdlib:js/panes/panes/form.js',
                'remoto!stdlib:js/paneManager/paneManager.js',
                'remoto!stdlib:js/include/objectRegistry.js',
                'remoto!stdlib:js/widgets/widgets/colorWidget.js',
                'remoto!stdlib:js/panes/panes/nodeCanvas/node.js',
                'include/modal/modal',
                'remoto!stdlib:js/include/preferences.js',
                'remoto!stdlib:js/include/utils.js',
                'remoto!stdlib:js/panes/panes/paneLoader.svg',
                'remoto!stdlib:js/panes/panes/nodeCanvas/nodeProperties.css',
                'jquery/ui/jquery.ui.sortable',
        ],
        function(require,pane,form,paneManager,objectRegistry,colorWidget,node,modal,preferences,utils,spinner)
        {
                'use strict';
 
                nodeProperties.prototype = new pane;
                function nodeProperties(layout)
                {
                        pane.call(this, layout);
 
                        if (!layout) return;
 
                        this._type = "nodeProperties";
                        //this._maxItems = layout.maxItems || 10;
                        this._context = layout.metadata ? (layout.metadata.context || {}) : {};
                        this._nodeMenu = layout.nodeMenu || "";
                        this._enabledFilter = layout.enabledFilter || null;
                        //this._widgets = {};                           //for the header
 
                        //this._saveFields = { maxItems:"_maxItems", nodeMenu:"_nodeMenu" };
                        this._saveFields = { nodeMenu:"_nodeMenu", enabledFilter:"_enabledFilter" };
 
                        this._context.preferencesBase = preferences.fetch("preferencesBase");
                        //console.log("node properties",layout);
 
                        this._forms = {};                               //the forms/nodes we've subscribed to
 
                        this._objectLoader = null;
                        this._selection = {};
 
                        this.createHTML();                              //FIXME: it seems like all panes should createHTML in their constructor!
                }
 
                nodeProperties.prototype.createHTML = function()
                {
                        if (this._html) return this._html;
 
                        pane.prototype.createHTML.call(this);
 
                        this._content.addClass("nodeProperties");
 
                        return this._html;
                }
 
                /*
                nodeProperties.prototype.createHeader = function()
                {
                        if (this._header) return this._header;
 
                        pane.prototype.createHeader.call(this);
 
                        var b;
                        var THIS = this;
                        var h = this._header;
 
                        //h.append("header!");
 
                        b = $("<button style='margin-right:3px;'>").text("Clear").appendTo(h);
 
                        b = this._widgets["mi"] = $("<input title='Max Items' type='number' name='mi' value='10' step='1' min='1' max='10'/>").appendTo(h);
                        b.bind("change", function(e) {
                                var v = $(this).val();
                                THIS._maxItems = v;
                                paneManager.saveLayout();
                        } );
                        b.val( this._maxItems );
 
                        return this._header;
                }
                */
 
                nodeProperties.prototype.applySubscription = function(data,metadata)
                {
                        //console.log("nodeProperties apply subscription",arguments);
                        //console.log( this._forms );
 
                        //var base = this._path;
 
                        if ("context" in metadata)
                        {       this._context = metadata.context;
                                //this._context = utils.resolveContextValues(metadata.context,this._context);
                        }
 
                        if (!this._objectLoader)
                                this._objectLoader = new objectRegistry.objectLoader(this._nodeMenu || "");
 
                        var FF = Object.keys(this._forms);
 
                        var __p;
                        for (var p in data)
                        {
                                //console.log(p);
                                __p = this._path+"/"+p;
                                //console.warn("SUB: "+__p);
 
                                if (!(__p in this._forms))
                                {
                                        this._forms[__p] = new nodePropertiesLoader( __p, this );
                                }
                                else
                                {       //console.error("path "+__p+" already exists.");
                                        FF = FF.filter(function(e) { return e !== __p });
                                }
                        }
 
                        //FIXME: remove items that were removed while disconnected
                        if (FF.length)
                        {
                                //console.error("Should remove items during subscribe",FF,this._forms);
                                var DD = {};
                                FF.map( function(key) { DD[key] = null; } );
                                this.applyDiff(DD);
                        }
 
                        //this._subscribed = true;
                }
 
                nodeProperties.prototype.applyDiff = function(diff,user)
                {
                        //console.log("nodeProperties apply diff",diff,this,objectRegistry);
 
                        //hide all the showing forms
                        this._content.children(".nodePropertiesForm").hide();
 
                        var d,__p,f;
                        for (var p in diff)
                        {
                                d = diff[p];
                                //console.log( d );
 
                                __p = p.substr(0,this._path.length) === this._path ? p : this._path+"/"+p;
 
                                if (__p in this._forms)
                                {
                                        if (d === null)
                                        {
                                                //console.log("delete form: "+p+" / "+__p);
                                                //console.log(this._forms);
 
                                                f = this._forms[__p];
                                                f.destroy();
                                                objectRegistry.unregisterObject(__p,f,true);    //have to manually do this because normally the pane manager would handle it
                                                delete this._forms[__p];
                                                delete this._selection[__p];
                                        }
                                        else if (typeof d != "boolean")//if ("_nodeClass" in d)                         //we assume it's a fully formed object, not a diff indicating a node to create or destroy
                                        {
                                                //console.log("show: "+p);
 
                                                //show only the selected forms
                                                if ("_wrapper" in this._forms[__p])
                                                {       this._forms[__p]._wrapper.wrapper.show();
                                                        this._selection[__p] = this._forms[__p];
                                                }
                                        }
                                        else if (d === false)
                                        {
                                                delete this._selection[__p];
                                        }
                                }
                                else if ( d instanceof node )
                                {
                                        console.log("was node!",__p,d);
 
                                        //this._forms[__p] = new nodePropertiesLoader( __p, this, d._attributes, d._icon );
                                        this._forms[__p] = new nodePropertiesLoader( __p, this );
                                }
                                else if ( d !== null && d !== false )// if (!(__p in this._forms))                      //does it need to be created?
                                {
                                        //console.error("Creating: "+__p);
                                        //console.error("For: "+p);
                                        //console.error("Path: "+this._path);
                                        //console.log("new node properties loader",d);
 
                                        //create or delete forms here...
                                        this._forms[__p] = new nodePropertiesLoader( __p, this, d.diff );//, d.diff.icon );
                                }
                        }
 
                        for (var s in this._selection)
                        {
                                this._selection[s]._wrapper.wrapper.show();
                        }
                }
 
                nodeProperties.prototype.applySettings = function(settings)
                {
                        /*
                        if (!("maxItems" in settings))
                                settings.maxItems = 10
 
                        if (settings.maxItems && this._widgets["mi"])
                        {       this._widgets["mi"].val(settings.maxItems);
                                this._maxItems = settings.maxItems;
                        }
                        else
                        {       console.error("No maxItems in settings, or widgets['mi'] hasn't been created!");
                                console.log(settings);
                                console.log(this._widgets);
                                console.log(this._header);
                        }
                        */
                }
 
                nodeProperties.prototype.destroy = function()
                {
                        pane.prototype.destroy.call(this);
 
                        //FIXME: destroy forms here first?
                        this._forms = null;
                        this._widgets = null;
 
                        this._objectLoader = null;
                        this._selection = null;
                }
 
                nodeProperties.prototype.addForm = function(path,form)
                {
                        this._forms[path] = form;
 
                        var html = form.createHTML();
 
                        var f = $( "<div class='nodePropertiesForm'>" ).appendTo( this._content );
                        var h = $( "<div class='nodePropertiesFormHeader'>").appendTo(f);
                        var c = $( "<div class='nodePropertiesFormContent'>").appendTo(f);
 
                        var hi = $("<img class='nodePropertiesFormHeaderIcon'/>").attr("src",spinner).appendTo(h);
 
                        var ht = $("<div class='nodePropertiesFormHeaderTitle'>").appendTo(h);
                        ht.text("Loading '"+form._path+"'");
 
                        var b = $( "<div class='nodePropertiesFormHeaderButtons'>").appendTo(h);
                        var bh = $("<div class='nodePropertiesFormHeaderButton' title='Help Text'>?</div>").appendTo(b);
                        var bm = $("<div class='nodePropertiesFormHeaderButton' title='Collapse / Expand'>&boxH;</div>").appendTo(b);
                        var bc = $("<div class='nodePropertiesFormHeaderButton' title='Close'>&#x2715;</div>").appendTo(b);
 
                        form._formJq.appendTo(c);
 
                        //console.log("ADD FORM:",form);
 
                        //var ccv = form._attributes.node;//.value;//.color.value;
                        //console.log(ccv);
                        var cch = {
                                value: "FF0000",
                                options: {
                                        hideLabel: true,
                                        class: "nodePropertiesFormHeaderColor",
                                },
                                change: function(variable,value,widget)
                                {
                                        //console.log("color change!",arguments);
                                        //console.log(form);
 
                                        //var od = form._diffing;
                                        //console.log("OD diffing: "+od);
 
                                        var a = form._attributes;
                                        if (a && a.node && a.node.value && a.node.value.color)
                                                a.node.immediateValue = { color:{value:value} };
                                                //a.node.value = { color:{value:value} };
                                        //else
                                        //      console.log("missing attr");
                                }
                        }
 
                        var ch = new colorWidget( cch );
                        var wch = ch.createWidget();
                        var cvw = ch.visibleWidget;
                        cvw.prependTo(b);
                        cvw.attr("title","Node Background Color");
                        //cvw.bind("mousedown touchstart", function(e)
                        cvw.bind("pointerdown", function(e)
                        {
                                cvw.focus();
                                return false;
                        } );
                        ch.activate();
 
                        //bh.bind("mousedown touchstart",false);
                        bh.bind("pointerdown",false);
                        bh.bind("click", function()
                        {
                                modal.alert( form._help, null, "Help" );
                        } );
 
                        bh.hover( function()                                            //put in hover because the help won't be known until the form is fully loaded
                        {
                                //bh.attr("title", form._help);
                                bh.attr("title", form._help.replace(/<br>/i,"\n") );
                        } );
                        //bh.attr("title", form._help.replace(/<br>/i,"\n") );
 
                        function toggler()
                        {
                                c.toggle();
                                if ( c.is(":visible") )         bm.html("&boxH;");
                                else                            bm.html("&plus;");
                        }
 
                        h.bind("dblclick", toggler );
                        h.bind("mousedown", function() { h.addClass("nodePropertiesFormHeaderActive"); } );
                        h.bind("mouseup", function() { h.removeClass("nodePropertiesFormHeaderActive"); } );
 
                        //bm.bind("mousedown touchstart",false);
                        bm.bind("pointerdown",false);
                        bm.bind("click", toggler );
 
                        //bc.bind("mousedown touchstart",false);
                        bc.bind("pointerdown",false);
                        bc.bind("click", function()
                        {
                                f.toggle();
                        } );
 
                        form._wrapper = {
                                wrapper:        f,
                                header:         h,
                                content:        c,
                                icon:           hi,
                                title:          ht,
                                buttons:        b,
                                color:          ch,
                                help:           bh,
                                minimize:       bm,
                                close:          bc,
                        }
 
                        //console.log(html);
 
                        this.makeSortable();
                }
 
                nodeProperties.prototype.makeSortable = function()
                {
                        this._content.sortable( {
                                handle:         '.nodePropertiesFormHeader',
                                axis:           'y',
                                containment:    'parent',
                                cursor:         'move',
                                items:          '.nodePropertiesForm',
                                opacity:        0.7,
                        } );
                }
 
//  nodePropertiesLoader
 
                function nodePropertiesLoader(path,_nodeProperties,diff,icon)
                {
                        //console.log("New nodePropertiesLoader: "+path);
                        //console.log(diff);
 
                        path = utils.cleanPath(path);
 
                        this._path = path;
                        this._nodeProperties = _nodeProperties;
                        this._icon = icon || null;
 
                        this._diffList = [];
 
                        objectRegistry.registerObject( path, this );
 
                        if (diff)
                                return this.applyDiff(diff);                    //returning different object than the 'new' call would indicate!!!
                }
 
                nodePropertiesLoader.prototype = {
 
                        applySubscription: function(data,metadata)
                        {
                                //console.log("form loader apply subscription",arguments,this);
                                //console.trace("form loader apply subscription",this._path);
 
                                //if (this._subscribed)
                                //      return;
 
                                if ("icon" in metadata)         //as a failover
                                {
                                        //this._form._wrapper.icon.attr( "src", metadata.icon );
                                        this._icon = metadata.icon;
                                }
 
                                //FIXME: add loader spinner
                                //...
 
                                //load definition data...
                                var base = data.base;
                                return this._nodeProperties._objectLoader.fetchDefinition( base, {}, this.createForm.bind(this,data) );
 
                                //this.applyDiff(data);
 
                                //this._subscribed = true;
                        },
 
                        applyDiff:      function(diff,user)
                                        {
                                                //console.log("form loader apply diff (queued)",arguments);
 
                                                this._diffList.push( diff );
                                        },
 
                        applyRequestSuccess: function(command,id,data,metadata)
                                        {
                                                //console.log("nodePropertiesLoader applyRequestSuccess",arguments);
                                        },
 
                        createForm:     function( diff, definition )
                                        {
                                                //console.log("CREATE NODE FORM!",arguments);
 
                                                if ( this._nodeProperties._forms[this._path] instanceof form  )
                                                {       //console.log("already created "+this._path,this._nodeProperties._forms);
                                                        return this._nodeProperties._forms[this._path];
                                                }
 
                                                var spec = this._nodeProperties._objectLoader.applyValues( diff, definition );
                                                //console.log("CREATE FORM SPEC",spec);
 
                                                spec = utils.resolveContextValues(spec,this._nodeProperties._context);
 
                                                if (spec.icon)
                                                        this._icon = spec.icon;
 
                                                //console.log("new form: "+this._path);
                                                var f = new form( { path:this._path, parent:this._nodeProperties, enabledFilter:this._nodeProperties._enabledFilter } );
                                                this._nodeProperties.addForm( this._path, f );
 
                                                //hide the newly created form
                                                //f._html.children(".nodePropertiesForm").hide();
                                                f._wrapper.wrapper.hide();
 
                                                if (this._icon)
                                                {       var ii = this._icon;
                                                        if (ii.startsWith("data:image/svg+xml;utf8,"))
                                                        {
                                                                ii = $(ii.replace("data:image/svg+xml;utf8,",""));
                                                                //ii.addClass("paneMenuIcon");
                                                                ii.addClass("nodePropertiesFormHeaderIcon");
                                                                f._wrapper.icon.replaceWith(ii);
                                                                f._wrapper.icon = ii;
                                                        }
                                                        else if (ii.startsWith("data:image/"))
                                                        {
                                                                f._wrapper.icon.attr( "src", this._icon );
                                                                //ii = $("<img>").attr("src",ii).addClass("paneMenuIcon");
                                                        }
                                                }
 
                                                //monkey patch for now... just to get it working.
 
                                        /*      var oAS = f.applySubscription;
                                                f.applySubscription = function(data,metadata)
                                                {
                                                        console.log("monkey subscribe");
 
                                                        return oAS.call(this,data);
                                                };
                                        */
 
                                                var oAD = f.applyDiff;
                                                var nF = false;
                                                f.applyDiff = function(diff,user)
                                                {
                                                        if (diff === null)
                                                        {
                                                                console.log("node properties loader diff was null. returning.");
                                                                return;
                                                        }
 
                                                        if ("help" in diff)
                                                                f._help = diff.help;
 
                                                        if ("attributes" in diff)
                                                        {
                                                                var r = oAD.call(this,diff.attributes,user);
                                                                //return r;
 
                                                                f._diffing = true;
 
                                                                if ("name" in diff.attributes)
                                                                {
                                                                        f._wrapper.title.text( f._attributes.name.value );
                                                                        if (!nF)
                                                                        {
                                                                                nF = true;
                                                                                var oc = f._attributes.name._change;
                                                                                f._attributes.name._change = function(variable,value,widget)
                                                                                {
                                                                                        //console.log("name change.");
                                                                                        f._wrapper.title.text( value );
                                                                                        //oc.call(f,variable,value,widget);
                                                                                        oc.call(f._attributes.name,variable,value,widget);
                                                                                }
                                                                        }
                                                                }
 
                                                                if (    "node" in diff.attributes &&
                                                                        "value" in diff.attributes.node &&
                                                                        "color" in diff.attributes.node.value
                                                                )
                                                                {
                                                                //      console.log("update color!",diff);
                                                                        f._wrapper.color.value = diff.attributes.node.value.color.value || diff.attributes.node.value.color;
                                                                //      f._wrapper.color.immediateValue = diff.attributes.node.value.color.value;
                                                                }
 
                                                                f._diffing = false;
 
                                                                return r;
                                                        }
                                                        //else
                                                        //      return oAD.call(this,diff,user);
                                                };
 
                                        /*
                                                var oCF = f.changeField;
                                                f.changeField = function(variable, value, field)
                                                {
                                                        var v = {};
                                                        v[variable] = value;
 
                                                        //return oCF.call(this, "attributes", v, field);
                                                        return oCF.call(this, "attributes."+variable, value, field);
                                                };
                                        */
 
                                                var oPU = f.postUpdate;
                                                f.postUpdate = function(u)
                                                {
                                                        u = { attributes: u };
 
                                                        //console.log(u);
 
                                                        //this should already be in the form postUpdate code!
                                                        //objectRegistry.applyDiff( this._path, u, null, this );        //propagate to any other instance of this form or node
                                                        objectRegistry.applyDiff( this._path, u, null, f );     //propagate to any other instance of this form or node
 
                                                        return oPU.call(this, u);
                                                };
 
                                                //must be after monkey patch
                                                f.applyDiff(spec);
 
                                                while (this._diffList.length)
                                                {
                                                        var d = this._diffList.shift();
                                                        f.applyDiff(d);
                                                }
 
                                                objectRegistry.registerObject( this._path, f, true );
                                                f._subscribed = true;
 
                                                this.destroy();
 
                                                return f;
                                        },
 
                        destroy:        function()
                                        {
                                                this._diffList = [];
 
                                                objectRegistry.unregisterObject( this._path, this, true, true );
                                        },
                };
 
                return nodeProperties;
        }
);