Short about or just click here for the editor

First off let me just say this is still very experimental and at the moment the code is quite a mess. I thought I'd put this here more to get people's feedback on the interface and/or if they liked the idea itself.

About

I have been using wireit to try and make a visual editor for FeedsHub. Feedshub lets you connect up generic "plugins" together in a feed in order to process data in an arbitrarily configurable way. For example an email message comes in at one end and depending on whether the sender was Bob or Jim the email is then forwarded onto someone else.

One thing I noticed when making large graphs (or diagrams) in the WireIt editor is that once you get above about 10 containers with a couple of wires per container you start to lose track of what is going on.

So I thought to help manage all the clutter you would need some kind of collapsing/grouping mechanism.

It isn't as simple as shrinking down multiple containers to 1, you also have to consider which fields/terminals will be visible on the shrunk container. For instance if I shrink some containers and one of them has a wire leading to a container that hasn't been shrinked where does the wire now go to?

So you have remappings from the internal container fields/terminals to fields/terminals that appear on the shrinked containter.

But what if you shrink two of the same type of container then you would have for instance two terminals called result. To fix this name conflicts are automatically resolved.

However the whole idea of using WireIt for Feedshub is to make the graph actually translate to functional workflows. You might group a couple of "plugins" together and expose only the field that decides that if the message came from Bob you send it on. The plugins individually are generic so this field could be called Regexp (as in Regular expression) but from outside your group you might want to call it "Recipient Filter". So I added the ability to set manual overrides for the mapping from group containers to their shrunk form

Instructions!

For the moment at least I have only tested this with form and input output containers (so use the Formcontainer and the InOutTest) so stick to those since it seems the results are a bit unpredictable with the others.

Also there are still a couple of bugs todo with ungrouping and deleting containers.

1. Making a group

First drag n drop some containers into the editor. Then select the ones you want in your group by clicking the G in the top right corner of the container. The ones you have selected should be highlighted in green.
Select groups picture

Then use the Make button in the group section (bottom right). Once you have made the group you can click collapse to shrink the containers down to 1 with only the needed fields/terminals displayed.
Group made picture Collapse group picture

2. Remapping

You might have noticed when you make a group various options appear in the bottom of the group pane (see Group Made Pic above).

With these you can select which fields/terminal are visible from outside the group, their names and which side of the terminals will appear on.

To help knowing which fields/terminals are which you can hover over the remapping row and it will highlight the container/group of containers that it is related to.
Nested groups and highlight picture

(Note: If you leave the name blank an autogenerated one will be used)
(Note: Terminals are evenly distributed from the center of the side they are on, at the moment no other position options are available)

3. Advanced groups

If you create 2 or more groups of containers you can click to focus on a particular container, if it has a group the other containers in that group will be highlighted and the group options will appear in the group pane.

You can additionally nest groups within groups and mix groups and containers in a single group.

When you have more than one level of grouping you cannot immediately edit the inner group when you select a container from it. To do so you must use the group select drop down after selecting the container.
Group select drop down picture

You can also collapse an inner group and leave the outer group uncollapsed.
Nested groups picture