Definindo a Localização do Nó e outras Propriedades do Gráfico

A localização de um nó geralmente é determinada pelas informações em um item de armazenamento de dados. O posicionamento ocorre implicitamente, por meio de um layout predefinido com o uso de ligação de dados em um modelo, ou mais diretamente em JavaScript, quando o nó é criado. Se as posições x e y forem recuperadas diretamente do item de armazenamento de dados, use as propriedades xBinding e yBinding para especificar os atributos de armazenamento de dados que definem os locais x e y quando o nó ou subgráfico é criado. Em armazenamentos de dados graváveis, eles também são usados para persistir os valores, se modificados.
<div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' xBinding="xpos" yBinding="ypos"  ...>
</div>

Definindo a Localização do Nó

Para especificar uma posição no centro de um nó:
  • Use o atributo centerOnLocation.
    Para situações mais complexas, uma única função pode ser definida para os valores de ler e gravar.
    <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>

Definindo Propriedades Gráficas de Nós e Links

Para definir propriedades gráficas gerais de nós e links:
  • Use nodesGraphBinding ou linksGraphBinding para especificar um atributo de armazenamento de dados que pode ser usado para persistir uma lista de propriedades gráficas.
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeGraphBinding="gfxNodeData" nodesGraphProperties="backgroundColor,textColor"  ...>
    </div>
    Uma única função pode ser definida para ler e gravar a propriedade gráfica.
    <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>
    O valor transmitido para a função pode ser um objeto JavaScript complexo, como o seguinte:
    {
      "backgroundColor": "#FFFFFF",
      "textColor": "#000000",
      "bounds": {"x": "320", "y": "140", "width": "120", "height": "80"}
    }