关于Connections的Diagram Builder自定义属性

时间:2014-01-20 14:45:36

标签: javascript alloy-ui

这与this question有关,但它是关于向节点添加自定义节点类型和属性(我已成功完成),并且我希望在连接上添加自定义属性。

我尝试覆盖getProperties上的方法getPropertyModelbuilder.connector无效。以下是我当前(以及我认为最接近的)尝试:

// .. 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??'
        }
    ]
};

查看源代码,似乎还有一个STRINGS属性也可能需要修改,但我只能找到获取字符串的方法(getStrings)而无法修改方法他们。我可以尝试直接修改它,但我不是100%确定它存在的对象(在它上面没有在builder.connector上设置)

提前致谢。

1 个答案:

答案 0 :(得分:4)

抱歉,这些事情并不像以前那么简单:S

我已经使用您正在寻找的working case更新了旧示例。和以前一样,不是生产代码材料,只是足以让你启动并运行;)

如果你看一下源代码,这里的一个问题就是Y.DiagramBuilderImpl创建了自己的Y.Connector个实例,所以要做的就是mix对它进行一些扩展来修改行为。

正如您在示例中所看到的,我们使用

创建了一个扩展
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'
        }
    ];
};

然后,我们mix根据需要扩展到现有的Y.Connector添加和覆盖功能:

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

另外一个选项可能是您要创建自己的CustomConnectorY.Connector(请参阅Base.create),然后将其设置为DiagramBuilder此类的连接器类为:

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