Defining node location and other graphic properties

The location of a node is generally determined by the information in a data store item. The positioning occurs either implicitly, through a predefined layout with the use of data binding in a template, or more directly in JavaScript, when the node is created. If the x and y positions are retrieved directly from the data store item, use the xBinding and yBinding properties to specify the data store attributes that define the x and y location when the node or subgraph is created. On writable data stores, they are also used to persist the values, if modified.
<div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' xBinding="xpos" yBinding="ypos"  ...>
</div>

Defining the node location

To specify a position at the center of a node:
  • Use the centerOnLocation attribute.
    In more complex situations, a single function can be defined for both read and write values.
    <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>

Defining graphical properties of nodes and links

To define general graphical properties of nodes and links:
  • Use nodesGraphBinding or linksGraphBinding to specify a data store attribute that you can use to persist a list of graphical properties.
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeGraphBinding="gfxNodeData" nodesGraphProperties="backgroundColor,textColor"  ...>
    </div>
    A single function can be defined for reading and writing graphical property.
    <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>
    The value passed to the function can be a complex JavaScript object, like the following one:
    {
      "backgroundColor": "#FFFFFF",
      "textColor": "#000000",
      "bounds": {"x": "320", "y": "140", "width": "120", "height": "80"}
    }