I've made a fix against version 0.5.0, attached in the bottom.

background

First of all, excuse me that I can't describe the issue in English well. So I illustrate it.

Well, I've defined some FormContainers like:

|              +-------------+
|              | HTML Reader |
|              +------+------+
|                     | <- outputs `text'
|                     |
|                     |
|         ------------+-----------+
|         |                       |
|         |                       |
|         | <- inputs `text'      | <- inputs `text' or `feed'
| +-------+--------+          +---+---+
| | Replace String |          | XPath |
| +-------+--------+          +---+---+

And terminal definition is: (very simplified)

modules: [
 { "name": "HTML Reader",
   "terminals": [ { "name": "out",
                    "ddConfig": { "type": "textOutput" } } ]
 },
 { "name": "Replace String",
   "terminals": [ { "name": "in",
                    "ddConfig": { "type": "textInput", "allowedTypes": [ "textOutput" ] } } ]
 },
 { "name": "XPath",
   "terminals": [ { "name": "in",
                    "ddConfig": { "type": "feedInput", "allowedTypes": [ "textOutput", "feedOutput" ] } } ]
 }
]

The current implementation doesn't allow to connect like as the graph above.
To allow, I needed to modify the code Terminal.js as below:

--- js/Terminal.js:392
/**
 * @method isValidWireTerminal
 */
isValidWireTerminal: function(DDterminal) {

   if( !DDterminal.isWireItTerminal ) {
      return false;
   }

   // Check the allowSelfWiring
   if(this.terminal.container) {
      if(this.terminal.container.options.preventSelfWiring) {
         if(DDterminal.terminal.container == this.terminal.container) {
            return false;
         }
      }
   }

   // If this terminal has the type property:
   if(this.termConfig.type) {
      if(this.termConfig.type == DDterminal.termConfig.type) {
         return true;
      }
      if(this.termConfig.allowedTypes) {
         if(0 <= WireIt.indexOf(DDterminal.termConfig.type, this.termConfig.allowedTypes)) {
            return true;
         }
      }
   }
   // The other terminal may have type property too:
   if(DDterminal.termConfig.type) {
      if(DDterminal.termConfig.allowedTypes) {
         if(0 <= WireIt.indexOf(this.termConfig.type, DDterminal.termConfig.allowedTypes)) {
            return true;
         }
      }
   }

   return false;
}

When drawing a wire, it seems that you don't need to create the path twice (once for the border, the second for the inner content). You can just build the path, and then draw it, change the brush and draw it again as mush as you want :

// Build the path
ctxt.beginPath();
ctxt.moveTo([...]);
ctxt.bezierCurveTo([...]);

// Draw the border
ctxt.lineCap = this.options.bordercap;
ctxt.strokeStyle = this.options.bordercolor;
ctxt.lineWidth = this.options.width+this.options.borderwidth*2;
ctxt.stroke();

// Draw the inner curve
ctxt.lineCap = this.options.cap;
ctxt.strokeStyle = this.options.color;
ctxt.lineWidth = this.options.width;
ctxt.stroke();

if terminal not visible, give the offset of the first parent DOM element visible ?

Great to work with multiple languages at a time, especially if those "languages" are just libraries supporting the host language, or some user-written convenience functions they wish to run in your environment.

The jsBox example already includes Composability on wirings.

It uses the "input"/"output" modules to generate a new form container from a wiring.

We'd like to make it part of the library.

See jsTalk email...

The module category property is not saved.

There are two places where this needs to be handled in WiringEditor:
addModule:
containerConfig.category = module.category;

Also, in FormContainer.getConfig() the category needs to be set, same as xtype is.

I just got the 0.6.0a download. There's a problem with the InOutContainer not showing the terminals for the inputs and outputs. And if I try to add terminals in the options, i get an error while dragging the module (terminalList[i].redrawAllWires is not a function), because the terminalList is expected to contain Terminal objects but contains terminals configs instead.

I am working on an app that uses jsBox as basis. We do have different types of modules and it would be very helpful if the left hand side could:
a) Allow custom CSS - perhaps composed from a new property on the module passed into addModuleToList()
b) Sort/group modules by type

EDIT: For the custom class I ended up doing something like this in addModuleToList():
var div = WireIt.cn('div', {className: "WiringEditor-module WiringEditor-module-"+module.container.xtype.replace(/WireIt./, '')});

cheers, mano

In WireIt.TerminalProxy.onDrag there's the following code:

do {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
    obj = obj.offsetParent ;
} while ( obj = obj.offsetParent );

The code is walking up the DOM tree to compute the absolute position of the layer in order to properly position the floating wire (right?).
However at each iterator the code goes up twice, once in the body of loop and once in the condition. Depending on the actual layout of the page obj might become null inside the body triggering the exception when obj.offsetParent is evaluated again in the condition.
Removing the assignment from the body fixes the issue (obviously) but might break something else; is there any particular reason to do two steps at each iteration?

edit: to clarify - yes, I'm hitting the bug with two nested Yahoo Layouts.

Fix is: YAHOO.util.Connect.setDefaultPostHeader('application/json');

I am in the process of upgrading my app to the edge branch and there are a couple things come up:
a) I don't need the composite editors default modules and the only way to get rid seems to subclass, override buildModulesList() and set modules = []
This is a bit of a pain - due to the way things get called in the constructors.
NOTE: We are using a custom load script to load modules remotely
b) Corresponding to (a), I would like to get rid of the Main module category. However, the category specific id is only on the content block of the accordion code, so there is no way to create a CSS rule to hide it.

Generally I do have problems with the way defaults are set in the actual code, not the demo scripts. Also, the Main category accordion. Perhaps there should be an easier way to set/disable defaults?
Another thing is that for 'Main' the css id is 'module-category-main' and the title 'Main' whereas for dynamically created categories both is lower case.
I guess there is a fundamental issue using content for csss ids. What about translations - there would have to be CSS rules for each language...

Otherwise things are looking a lot rosier, IMHO.

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

});
****************************************************/

As per the example on wikipedia http://en.wikipedia.org/wiki/Flip-flop_(electronics) I could not get the flip flop gate to work in the WireIt demo. Would be ace if this could work (as with this sort of circuit available this application would have a much better chance of being used in academic circles).

Thanks!
-Neil.

The current addModuleToList only updates the display but not the internal data structures (moduleByName).
That means it is possible to load modules dynamically and even use them. However, loading saved wirings will not work as the lookup of the modules used fails.
it should be ensured that display and internal data are in sync.

There is a bug when the wireit div is offset on the page. The wire endpoint when dragging is offset by the amount of the offset in the div. I have an example html file and a patch.

Actually, the inputex.InPlaceEdit is hardwired as the wire label editor, so it's not easy to customize its behavior except by monkey patching it, which is evil. It would be better to implement the Wire.renderLabel function like this, so it would just be a matter of overloading the Wire.createLabelEditor function to change it:

     renderLabel: function() {
        this.labelEl = WireIt.cn('div',{className:"WireIt-Wire-Label"}, this.labelStyle );
        
        if(this.labelEditor) {
            this.labelField = this.createLabelEditor(); 
            this.labelField.setValue(this.label);
        }
        else {
            this.labelEl.innerHTML = this.label;
        }
        
        this.element.parentNode.appendChild(this.labelEl);
        
    },
    createLabelEditor: function() {
        return new inputex.InPlaceEdit({parentEl: this.labelEl, editorField: this.labelEditor, animColors:{from:"#FFFF99" , to:"#DDDDFF"} });
    }

I'd advise changing Terminal.js:251 to something like:

} while ( YAHOO.util.Dom.hasClass(obj, "yui-layout-doc") );

or some other more elegant way to check the outermost element of the editor. Otherwise if you nest the editor in some other structure this position calculation is wrong.

If you drop a module into the diagram editing area in the WiringEditor
and then drag it to the right or bottom, the editing area will
automatically resize and scroll bars will appear. However, if you
instead drag the module to the left or the top you can get to where
the module is no longer visible but the editing area does not resize.
This can easily lead to a situation where you can have modules off
screen to the left or top and have no way to scroll to make them
visible.

Is there a way to make it so that the editing area will resize when
dragging to the left or top? Alternately, is there a way to prevent
the module from being dragged past the left and top boundaries of the
editing area?

When the Ajax adapter does a PUT to save the diagram, the content-type seems to be whatever the browser defaults to. Safari uses "application/xml" and Firefox uses "text/plain".

The setDefaultPostHeader('application/json') seems to be ignored, probably because we're doing a PUT and not a POST. In any case, application/json is wrong, since the data being PUT is clearly URL-encoded.

I have a patch against master, which I've tested:
http://github.com/dlitz/wireit/commit/63f494d776b5feb0c931e6add0dbdcc43e6db0f6

The Ajax adapter in edge doesn't seem to work, but here's a patch that sets the content-type anyway:
http://github.com/dlitz/wireit/commit/0df089f09a684e0832be5b9d23e41b05b634aed5

I found out that, when you have a layer with some containers and you resize the browser window, the X,Y constraints are not set correctly, so you can't drag your container to the (new) top left corner of the layer. I'm investigating the issue, I think the problem is related to the Container.makeDraggable function.

To properly detect whether things have changed I would like to detect events on inputEx fields.
I've had a look and it looks like the inputEx.Field or inputEx.BaseField class might be the right place.
However, I am not sure where/how to extend modify those to get custom code executed on those events

right now the onDelete method to delete a layer does both the confirm and the actual action.
There is no good way to track the user action when extending the editor to add custom delete code.
Either the actual delete action should be moved to a separate function that can be overridden, or a return code could be added to indicate delete/cancel.

I've extended the alert function with a second parameter named type.
The type parameter is then used to derive a CSS class name to indicate different types of alerts. If not set it will default to 'default'. Others I use are: 'success', 'info' and error.
It would be nice if the base function would add the parameter and calls in core code set the type (even if it is ignored), because right now all core alerts are displayed with the same type (default).

It would be great if in loadPipe() there could be a check if this.loadPanel exists. I'd like to implement some custom auto loading and having to create the load panel to avoid breaking loadPipe is a bit cumbersome.

Background: Our code is based on the jsBox example and in the jsBox.init function we load modules dynamically via JSON rather than having them hardcoded in the modules list in jsBox.
However, this raises some other issues, in particular race conditions, because the auto load can't run before the dynamic modules are loaded. If not, loadPipe won't be able to find the auto loaded wiring modules in the module list.
One other idea is to extract the current auto load code from onLoadSuccess into a separate autoLoad method to allow to override it.

ta, mano

It see that when the wireit lib is included it sets the global YAHOO.util.DDM.mode to YAHOO.util.DDM.INTERSECT. Because we intensively use drag 'n drop in our application this seriously affects performance (intersect mode is slower than point). I wasn't able to do that anymore if i disable the intersect mode so it seems that this is needed to detect when a wire is over a terminal.

Is it an idea to only change YAHOO.util.DDM.mode on startDrag / endDrag in WireIt.Terminal? Then the intersect mode is only active when dragging a wire. This fixed the issue for us but it might be nice to have this included in master.

It does not return any error if a function is not available server-side (php config, see the forum)

Hi All,

When you use the browser zoom in Chrome, and then try to drag a container, an offset is introduced between the cursor and the box. I know I'm not explaining this well, but if you zoom in and click-and-drag, you'll see what I mean.

Thanks,

Dan

When modules are added to the editor layer the container gets a class added in the form of:
"WiringEditor-module-"+module.name

This causes isses because:
a) The name is also used for display purposes - some of the names I use contain whitespace, so the class name is not usable
b) It would be great if the category could be used instead or in addition, for example:
"WiringEditor-module-"+module.category
This will allow to select individual modules if required (and the name doesn't include whitespace) or groups for custom styling

in the WiringEditor

Hi ,
How can i add the the label wire functionality to the wire it editor 5.0 , basically what i am looking for is that what ever wire i draw in the edito should have a label functionality where the user can add label to the wire .

It seems that new modules features crash the API Page.
When i click on Container.js on the left, it display the wrong file.

Hi, I found out that if you don't completely drag the module from the ModuleList into the editor, if either element in the pos argument is negative, you could end up with a module that is undraggable.

At least that happens with the FormContainer when the title area is off limits. I made a simple patch to WiringEditor.addModule() adding a simple boundary check.

Greetings.

diff --git a/plugins/editor/js/WiringEditor.js b/plugins/editor/js/WiringEditor.js
index 3ddf29f..2b1c9f7 100644
--- a/plugins/editor/js/WiringEditor.js
+++ b/plugins/editor/js/WiringEditor.js
@@ -193,6 +193,8 @@ lang.extend(WireIt.WiringEditor, WireIt.BaseEditor, {
         */
        addModule: function(module, pos) {
            try {
+              if (pos[0] < 0) pos[0] = 0;
+              if (pos[1] < 0) pos[1] = 0;
               var containerConfig = module.container;
               containerConfig.position = pos;
               containerConfig.title = module.name;

I've tried adding a regexp property to a propertiesFields field. However, it seems there is no validation done when saving a wiring

the this.afterFirstRun property is set to true before loadPipe is called.
doing that only after that (in onLoadSuccess()) would allow loadPipe() to figure out whether the load is an auto load or not. Even better if that would signalled as second parameter?

Adding a DOCTYPE stops the layer from rendering properly - it ends up at the top of the screen. To see this problem, add any DOCTYPE to the "Spring model layout" example, which currently has this at the top of the document:

If you replace that with, for example:

The problem appears.

J.

See http://groups.google.fr/group/wireit/browse_thread/thread/1718f621ea3b364a?hl=en

Me again ;)

The wires we are creating in our application often result in rather large diagrams with some scrolling. It would be very helpful if dragging a wire would autoscroll if the mouse leaves the wire div - just like 'normal' applications do.
I guess fixing issue #27 would help as well...

Ta, mano

Hi ,
I need to know if its possible to add a input field to the image container .

First wireit is greatness! but wondered support for manhatten or step connection lines instead of bezier curves or straight lines. See draw2d's library for example...
http://www.draw2d.org/draw2d/examples_short?page=1

After I set parent container (not body) for my WireItEditor it started firing "Uncaught TypeError: Cannot read property 'offsetParent' of null" in Chrome JavaScript Console. It happens during the dragging wire from one terminal to another. I guess that it entails not drawing wire while dragging but it's shown when two terminals are connected.

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.