Open ericabouaf opened 15 years ago
This would be very useful for representing a core XProc feature: Pipeline inputs can have a "select" statment on them, that filters which part of that pipe you want to to use as the input of your container. I was thinking something like this would be handy for representing that.
Maybe it's more fit into a "Terminal" Label ? I think we need both: to be able to add a label on a Terminal (at both ends of the Wire) or a label in the "middle" of the wire. What do you think ?
Do you need your "select" statement to be editable ?
Editable would be helpful, but static would work for me.
In the XProc language, the XPath "select" statements are in the terminal that connects to the the output of the pipe. As in:
I support this request. We ended up patching Terminal.js...
// new element label on options setOptions: this.options.label = options.label || "";
// create label for terminal (similar to a radio box label, I guess...) render:
//createLabel
if(this.options.label){
var label = WireIt.cn('div');
label.innerHTML=this.options.label;
this.el.appendChild(label);
}
Hi,
LeifW: totally agree for RDF ! Although we would need to be able to connect two nodes with multiple wires (you can have multiple relations between the same subject/object)
DerManoMann: Indeed we need both Wire labels AND Terminal labels. I'll add this in edge branch. (otherwise you could fork the project...)
I made another version in a project using WireIt that used the YUI tooltip (so it can display much more infos thant the browser label...)
tooltips are perhaps an idea. Using the edge branch I managed to get what I want by extending the used Terminal class and overriding the render() method. However, since I also needed to move the place where the terminals are added to the DOM I ended up also overriding the remove() method. All not too bad, however it doesn't feel right to cut&paste two methods just to replace a single line ine each.
All in all I think the edge branch is a lot easier to customize, so good work!
I am not checking the branch that often, so if you could update this thread once the label stuff is checked in that would be great.
Hi again,
I finally added the label options on Wires ! It's using the DOM (not writing on the canvas element). You can customize the style of the div, and, even more awesome, it's editable.
Using the inputEx "in-place-edit" field, you can click on the label and customize the editor using an inputEx field ! (so awesome...) The value is returned as a wire property (just in the Layer for now, I'm adding it to the WiringEditor...) I set up a quick example, where you can click on the "test" label and edit it using a select: http://neyric.github.com/wireit/examples/labels.html
By the way, I just commited a huge change for WireIt on the edge branch: it's now using default options in the prototype of the classes, which means you can override them globally or just in a child class. As it is also supported by YUI doc, the API documentation is also much more usable for those properties : http://neyric.github.com/wireit/api/WireIt.Container.html
I'm almost done for 0.6.0 ;)
Thanks i got it to work with version 0.5.0 , most of the drawing is working fine for me what i need to know now is I have made the following changes ,
Place below is my ImageContainer.js file content
/*** /**
YAHOO.lang.extend(WireIt.ImageContainer, WireIt.Container, {
/* * @method setOptions * @param {Object} options the options object / setOptions: function(options) { WireIt.ImageContainer.superclass.setOptions.call(this, options);
this.options.image = options.image;
this.options.xtype = "WireIt.ImageContainer";
this.options.className = options.className || "WireIt-Container WireIt-ImageContainer";
// Overwrite default value for options:
this.options.resizable = (typeof options.resizable == "undefined") ? false : options.resizable;
this.options.ddHandle = (typeof options.ddHandle == "undefined") ? false : options.ddHandle;
},
/* * @method render / render: function() { WireIt.ImageContainer.superclass.render.call(this); YAHOO.util.Dom.setStyle(this.bodyEl, "background-image", "url("+this.options.image+")"); this.labelField = new inputEx.InPlaceEdit({parentEl: this.bodyEl, editorField: {type: 'string'}, animColors:{from:"#FFFF99" , to:"#DDDDFF"},className:"inputEx-Imglabel" }); this.labelField.setValue(this.label); }
}); ****/
Attach a DOM element to the wire that can contain some informations. Use ful for modeling (adding liaisons informations)
Need a way to add a description to a wire like 1,2,3 for numbering or anything else as a text.