Creación de puertos

Cuando se crea el enlace, está conectado a un puerto predeterminado, que es una instancia de AutomaticPort. Suele ser mejor especificar anclas explícitas. Por ejemplo, cuando dos enlaces están conectados al mismo nodo, puede que le interese tener puntos de conexión diferentes.
Para definir puntos de conexión fijos en los límites de un nodo:
  • Cree instancias de la clase BasicPort en la función 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);
    La función setPosition especifica una posición relativa en los límites del nodo. Por ejemplo, setPosition({x:0, y:0.5}) define un puerto en el lado izquierdo y en el punto medio vertical del nodo. La función setOffset especifica un desplazamiento opcional, por ejemplo, setOffset({x:0, y:10}) desplaza el puerto 10 píxeles hacia abajo.
Este es el gráfico resultante con anclas de límites explícitas:
Gráfico
compuesto por cuatro nodos rectangulares, todos con una etiqueta:
Nodo 1, Nodo 2, Nodo 3, Nodo 4. Nodo 1 está situado a la izquierda,
Nodo 2 en la parte superior, Nodo 3 en la parte inferior y Nodo 4 a
la derecha del gráfico.
Nodo 1 está conectado con Nodo 2 y con Nodo 3 mediante enlaces con
una punta de flecha. Nodo 2 y Nodo 3 están conectados con Nodo 4
mediante enlaces con una punta de flecha. Los puntos de conexión de
los enlace son diferentes.