5

我一直在尝试使用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();
    ..
  }
);

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

4

2 回答 2

6

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

我认为您只是缺少一些 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;
}

在这里你可以找到一个更新的例子

于 2013-07-07T20:42:50.270 回答
3

你所做的一切听起来都是正确的。我唯一能看到的是您说您修改了文件 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
  }
);

希望能帮助到你。

于 2013-07-04T17:54:00.027 回答