Question

我一直在尝试使用AlloyUI的diagram builder example。

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

有一种简单的方法吗？

更新

我意识到我可以直接修改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才能看到你的节点。您可以看到它正常工作here

查看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 - 作为前缀，因此在开始使用较新版本时请记住这一点。我汇总了一个例子here

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

getPropertyModel: function() {
    var instance = this;

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

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

    return model;
}

您可以在这里找到updated example

Answer 2

你所做的一切听起来都是对的。我唯一能看到的是你说你修改了文件aui- diagram-builder-impl.js ，但是在创建YUI沙箱时，你没有指定过滤器为 raw ，默认的YUI过滤器为 min ，因此除非您在其他地方将全局配置设置为原始，否则您的浏览器可能正在加载 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
  }
);

希望它有所帮助。

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

2 个答案: