ノード位置およびその他のグラフィック・プロパティーの定義

ノードの位置は、一般的にデータ・ストア項目内の情報によって決定されます。位置決めは、ノード作成時に、暗黙的に、テンプレート内のデータ・バインディングの使用による事前定義のレイアウトにより、あるいは、JavaScript 内でより直接的に行われます。x および y 座標が、データ・ストア項目から直接取り出される場合、xBinding および yBinding プロパティーを使用して、ノードまたはサブグラフの作成時に x および y 位置を定義するデータ・ストア属性を指定します。 これらは、書き込み可能データ・ストアの場合、変更された場合の値をパーシストするためにも使用されます。
<div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' xBinding="xpos" yBinding="ypos"  ...>
</div>

ノード位置の定義

位置をノードの中央に指定するには、次のようにします。
  • centerOnLocation 属性を使用します。
    より複雑な状態の場合でも、読み込みおよび書き込み値の両方に単一の関数を定義できます。
    <script type="text/javascript">
    var persistX = function(nodesStore, item, value){
      var retVal;
      if (value) {
        retVal = nodesStore.setValue(item, "xpos", value);
      }
      else {
        retVal = nodesStore.getValue(item, "xpos");
      }
      return retVal;
    };
    </script>
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' xBinding="persistX" ...>
    </div>

ノードおよびリンクのグラフィック・プロパティーの定義

ノードおよびリンクの一般グラフィック・プロパティーを定義するには、次のようにします。
  • nodesGraphBinding または linksGraphBinding を使用して、グラフィック・プロパティーのリストをパーシストするために使用できるデータ・ストア属性を指定します。
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeGraphBinding="gfxNodeData" nodesGraphProperties="backgroundColor,textColor"  ...>
    </div>
    単一の関数が、読み込みおよび書き込みグラフィック・プロパティーに定義できます。
    <script type="text/javascript">
    var persistNodeProps = function(nodesStore, item, value){
      var retVal;
      if (value) {
         var jvalue = dojo.toJson(value);
         retVal = nodesStore.setValue(item, "gfxNodeData", jvalue);
      }
      else {
          var retValj = nodesStore.getValue(item, "gfxNodeData");
          retVal = dojo.fromJson(retValj);
      }
      return retVal;
    };
    </script>
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodesGraphBinding="persistNodeProps" nodesGraphProperties="bounds,backgroundColor,textColor" ...>
    </div>
    関数に渡される値は、以下のように複雑な JavaScript オブジェクトにすることもできます。
    {
      "backgroundColor": "#FFFFFF",
      "textColor": "#000000",
      "bounds": {"x": "320", "y": "140", "width": "120", "height": "80"}
    }