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 に答える