Criando Portas

Quando o link é criado, ele é conectado a uma porta padrão, que é uma instância de AutomaticPort. Geralmente é melhor especificar âncoras explícitas. Por exemplo, quando dois links são conectados no mesmo nó, é recomendável distinguir os pontos de conexão.
Para definir pontos de conexão fixos nos limites de um nó:
  • Crie instâncias da classe BasicPort na função createLink
    var createLink = function(start, end, startOffsetY, endOffsetY) 
             var link = graph.createLink();
             
             var startPort = new ibm_ilog.diagram.BasicPort();
             startPort.setPosition({x:1, y:0.5});
             startPort.setOffset({x:0, y:startOffsetY});
             
             start.addPort(startPort);
             link.setStartPort(startPort);
             
             var endPort = new ibm_ilog.diagram.BasicPort();
             endPort.setPosition({x:0, y:0.5});
             endPort.setOffset({x:0, y:endOffsetY});
             
             end.addPort(endPort);
             link.setEndPort(endPort);
             
             return link;
          };
          
          var createNodesAndLinks = function() {
             var node1 = createNode("Node 1", 100, 200);
             var node2 = createNode("Node 2", 300, 100);
             var node3 = createNode("Node 3", 300, 300);
             var node4 = createNode("Node 4", 500, 200);
             var link1 = createLink(node1, node2, -10,  0);
             var link2 = createLink(node1, node3,  10,  0);
             var link3 = createLink(node2, node4,  0, -10);
             var link3 = createLink(node3, node4,  0,  10);
          };
          dojo.addOnLoad(createNodesAndLinks);
    A função setPosition especifica uma posição relativa nos limites do nó. Por exemplo, setPosition({x:0, y:0.5}) define uma porta à esquerda e no meio vertical do nó. A função setOffset especifica um deslocamento opcional, por exemplo, setOffset({x:0, y:10}) desloca a porta 10 pixels para baixo.
A seguir está o gráfico resultante com âncoras de limites explícitas:
Um gráfico
formado de quatro nós retangulares, cada um contendo um rótulo: Nó
1, Nó 2, Nó 3, Nó 4. O Nó 1 está localizado à esquerda, o Nó 2 na
parte superior, o Nó 3 na parte inferior e o Nó 4 à direita do gráfico.
O Nó 1 está conectado ao Nó 2 e ao Nó 3 por links com uma ponta de seta. O Nó 2 e o Nó 3 estão conectados ao Nó 4 por links com uma ponta de seta. Os pontos de conexão dos links são distintos.