Diagram Builder Custom Attributes on Connections

Question

This is related to this question, but it is about adding custom node types and attributes to nodes (which I have been successful in doing), and I'm looking to add custom properties on connections themselves.

I have tried overriding the methods getProperties and getPropertyModel on builder.connector to no avail. Below is my current (and what I believe to be closest) attempt:

// .. adding different node types and their attributes

var builder = new Y.DiagramBuilder( {
    availableFields: availableFields,
    boundingBox: '#diagramContainer',
    srcNode: '#diagramBuilder'
} );

builder.render();

var test = builder.connector.addAttr(
    'testAttr', 
    { 
        value:'test', 
        validator: Y.Lang.isString,
        readOnly: false,
        lazyAdd: false
    },
    false
);
builder.connector.SERIALIZABLE_ATTRS.push('testAttr');

// just calling addAttr doesn't seem to work, so I also tried this..
test.getProperties = function() {

    return [
        {
            attributeName: 'testAttr',
            editor: new Y.TextCellEditor(),
            name: 'Test Attr',
            value: 'default value??'
        }
    ]
};

Looking in the source, there seems to be a STRINGS property that may also need to be modified, but I can only find a method for getting the strings (getStrings) and no method for modifying them. I could try modifying it directly, but I'm not 100% sure what object it's present on (above it is not set on the builder.connector)

Thanks in advance.

Answer 1

sorry these things aren't as straightforward as they could be :S

I've updated the old example with a working case of what you're looking for. As before, not production code material, just enough to get you up and running ;)

If you look at the source code, one problem here is that the Y.DiagramBuilderImpl creates its own Y.Connector instances, so the way to go is to mix some extensions into it to modify the behaviour.

As you can see in the example, we create an extension with

var CustomConnector = function() {
};

CustomConnector.ATTRS = {
    testAttr: {
        valueFn: function() {
            return 'test attr instance value';
        }
    }
};

CustomConnector.prototype.initializer = function() {
    var instance = this;

    instance.SERIALIZABLE_ATTRS.push('testAttr');
};

CustomConnector.prototype.getPropertyModel = function() {
    var instance = this;

    return [
        {
            attributeName: 'testAttr',
            editor: new Y.TextCellEditor(),
            name: 'Test Attr'
        }
    ];
};

Then, we mix the extension into the existing Y.Connector adding and overriding functionality as desired with:

Y.Base.mix(Y.Connector, [CustomConnector]);

One additional option could be for you to create your own CustomConnector class extending Y.Connector (see Base.create) and then setting that as the connector class for your DiagramBuilder such as:

var builder = new Y.DiagramBuilder( {
    availableFields: availableFields,
    boundingBox: '#diagramContainer',
    connector: CustomConnector,
    srcNode: '#diagramBuilder'
});