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

Question

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

我需要添加一些额外的自定义节点类型以及节点的一些其他属性。 我考虑过修改然后构建库，但这对于这样的任务来说听起来有点过分，而且我也遇到了构建问题 。

是否有捷径可寻？

UPDATE

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

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;
}

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

Answer 2

你所做的一切听起来都是对的。 我唯一能看到的是你说你修改了文件aui- diagram-builder-impl.js ，但是在创建YUI沙箱时，你没有指定过滤器为raw ，默认的YUI过滤器是min ，所以除非你有一个全局配置将过滤器设置为raw ，你的浏览器可能正在加载aui-diagram-builder-impl-min.js而不是aui-diagram-builder-impl.js 。

你应该做的是：

YUI({ filter: 'raw' }).use(
'aui-diagram-builder',
.
.
.
)

但我强烈建议您不要直接更改构建文件。 您可以在自定义文件中创建DiagramNodeCustom 。 做就是了：

YUI().use(
  'aui-diagram-builder',
  function(A) {
      A.DiagramNodeCustom = A.Component.create({
        NAME: DIAGRAM_NODE_NAME,

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

        EXTENDS: A.DiagramNodeTask
      });

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

      // and then do your thing here
  }
);

希望能帮助到你。