Wire labels

[ericabouaf]

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.

[LeifW]

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.

[ericabouaf]

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 ?

[rjurney]

Editable would be helpful, but static would work for me.

[LeifW]

In the XProc language, the XPath "select" statements are in the terminal that connects to the the output of the pipe. As in:

/p:input which describes a couple containers connected to the same input terminal. So maybe for XProc they'd fit best on a terminal, since they apply to everything coming in through that terminal, even on multiple wires connected to it. And yeah, I think they would need to be editble at some point. Also, another great use for a feature like this might be in applying WireIt to RDF. Say, to build a SPARQL query editor or even just a data editor, so regular folk can edit data and build querys without learning all that syntax. RDF is just a graph with labeled edges, so a GUI where you select some objects and select some labeled relations between them might be a nice way to work with it.

[DerManoMann]

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);
  }

[ericabouaf]

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...)

[DerManoMann]

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.

[ericabouaf]

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 ;)

[ellahikamran]

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 ,

1. I have added a input ex inPlace edit to image container so we can label the image .
2. I have added a input ex inPlace edit to the wire module Now on the editor when i click save the system saves the drawing into the database and when i load the drawing the container objects(image and wire ) appear fine but with the labels. What and where i should make the change to have the save and load function save and show my labels

Place below is my ImageContainer.js file content

/*** /**

• Container represented by an image
• @class ImageContainer
• @extends WireIt.Container
• @constructor
• @param {Object} options
• @param {WireIt.Layer} layer */ WireIt.ImageContainer = function(options, layer) { WireIt.ImageContainer.superclass.constructor.call(this, options, layer); };

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); }

}); ****/