如何向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
  }
);

希望能幫助到你。