Is it possible to have custom connectors in AlloyUI

Question

AlloyUI newbie here and I guess am having trouble with something very basic of the YUI framework. Am using AlloyUI 3.0.1, which still uses YUI and AngularJS.

Question is: Is there a way to create custom connectors on a 'per-custom-node' basis in AlloyUI?

The goal is to be able to have different custom connectors (with set of separate custom attributes) for each custom nodes. For example, lets say I have 2 custom nodes A and B and I want nodes A - A to be connected using one type of custom connecter and B - B using another. Is this possible?

I am able to create custom nodes with custom properties etc. like so:

  service.getScriptContainer = function(Y) {
    var scriptContainer = Y.Component.create({
        NAME: 'diagram-node',
        ATTRS: {
          //..custom properies,
            connectors : {
                valueFn : function(){
                    return ConnectorFactory.getScriptConnector(Y);
                }
            }
        },
        EXTENDS: Y.DiagramNodeTask,
        prototype: {
          .....
}

where ConnectorFactory is an AngularJS factory that returns an object of type: 'A.Connector'.

When I use this, I am able to drag and drop the custom node on the canvas, but as soon as I try to use a connector on it to connect to another node, I get an error in the console saying:

Uncaught TypeError: undefined is not a function at line 920: aui-diagram-node.js

which is:

 return instance.get('connectors').has(transition.uid);

.. and this is where am getting lost.

Can I extend 'A.connector' and use it on a 'per-custom-node' basis? If so, how?

Any help is appreciated!

Thanks.

Answer 1

I think I have at least direction you should investigate (if not the answer):

you can (re)write your own aui-diagram-builder-connector.js and "replace/hijack old one" via applyConfig - something like this:

YUI().use('aui-diagram-builder', function(Y) {

    /* your code */

}).applyConfig({ /* her we "hijack" default aui-diagram-builder-connector file  */
       modules: {
             "aui-diagram-builder-connector": {
                    fullpath: '/js/aui-diagram-builder-connector-mine.js' /* use relative path and minified version if possible */
             }
       }
});

This will load new file for built-in required module, so you have maximum freedom while keeping old file untouched :)

This one saved me once and I hope it will save somebody else too :D

Took me whole day to find it :(

Answer 2

I tested this but the cpied /js/aui-diagram-builder-connector-mine.js is never loaded or used in the DiagramBuilder.

best regards