如何向AlloyUI图生成器添加自定义节点和属性

Question

我一直在尝试使用AlloyUI的图表构建器示例。

我需要添加一些额外的自定义节点类型以及这些节点的一些其他属性。我曾考虑过修改然后构建库，但这听起来像是对这项任务的过大杀伤力，而且我在构建时遇到了问题。

是否有捷径可寻？

更新

我意识到我可以直接修改构建文件夹中的文件以摆脱构建过程。我尝试添加类似的内容：

var Lang = A.Lang,
..
CUSTOM = 'custom',
..

..
A.DiagramNodeCustom = A.Component.create({
  NAME: DIAGRAM_NODE_NAME,

  ATTRS: {
    type: {
      value: CUSTOM
    },
  },

  EXTENDS: A.DiagramNodeTask
});

A.DiagramBuilder.types[CUSTOM] = A.DiagramNodeCustom;

到/build/aui-diagram-builder-impl/aui-diagram-builder-impl.js。

我有这样的主要javascript文件结构：

var Y = YUI().use(
  'aui-diagram-builder',
  ..
  function(Y) {
    var availableFields = [
      ..
      {
        iconClass: 'aui-diagram-node-task-icon',
        label: 'Custom',
        type: 'custom'
      },
      ..
    ];

    diagram = new Y.DiagramBuilder(
      {
        availableFields: availableFields,
        boundingBox: '#myDiagramContainer',
        srcNode: '#myDiagramBuilder'
      }
    ).render();
    ..
  }
);

我知道可以在图表中添加自定义节点。我可以单击它并更改名称，但是不幸的是，它在图表中不可见。另外我仍然找不到如何向节点添加新属性。有任何想法吗？

Answer 1

如前所述，到目前为止您所做的一切听起来都不错。

我认为您只是缺少一些CSS才能看到您的节点。你可以看到它在这里工作

查看CSS面板

.aui-diagram-node-custom .aui-diagram-node-content {
   /* Style of your node in the diagram */
}

.aui-diagram-node-custom-icon {
   /* Style of your node icon in the nodes lists */
}

注意： 从Alloy-2.0.0pr6开始，css类不再以 aui-
作为前缀，因此在开始使用较新版本时请记住这一点。我在这里整理了一个例子

编辑： 为了能够向编辑器面板公开新属性，自定义字段需要扩展getPropertyModel方法以将新属性添加到模型。

getPropertyModel: function() {
    var instance = this;

    var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);

    model.push({
        attributeName: 'customAttr',
        name: 'Custom Attribute'
    });

    return model;
}

在这里您可以找到更新的示例