Definición de plantillas de nodos y enlaces personalizadas

La plantilla es una serie JSON que describe el contenido de un nodo, enlace o subgráfico. Las plantillas predeterminadas se encuentran en el archivo fuente ibm_ilog.diagram/templates/template.js. Las plantillas pueden contener enlaces a las propiedades de datos de aspecto (véase Utilización de plantillas y enlaces ).
En el caso de las aplicaciones que requieren gráficos específicos para los nodos y los enlaces, las plantillas de nodos y enlaces predeterminadas y sus propiedades no son suficientes.
Para crear gráficos personalizados:
  • Pase un argumento template a las funciones createNode(), createLink() y createSubgraph().
    Este es un ejemplo de una plantilla de nodos personalizada:
    var nodeTemplate = "[{"+
    "            dojoAttachPoint: 'baseShape',"+
    "            shape: {"+
    "                type: 'ellipse',"+
    "                cx: 0,"+
    "                cy: 0,"+
    "                rx: 10,"+
    "                ry: 10"+
    "            },"+
    "            stroke: {"+
    "                color: '#00',"+
    "                width: 3"+
    "            },"+
    "            fill: '{{backgroundColor}}',"+
    "            selectedStyle: {"+
    "                fill: '{{selectedBackgroundColor}}'"+
    "            }"+
    "        }, {"+
    "            dojoAttachPoint: 'textShape',"+
    "            shape: {"+
    "                type: 'text',"+
    "                text: '{{label}}',"+
    "                x: 5,"+
    "                y: 30,"+
    "                align: 'middle'"+
    "            },"+
    "            fill: '{{textColor}}',"+
    "            font: {"+
    "                type: 'font',"+
    "                weight: 'bold',"+
    "                size: '12pt',"+
    "                family: 'Arial'"+
    "            }"+
    "        }]";
    
    ...
                var node = graph.createNode(nodeTemplate);
    Al crear plantillas de nodos personalizadas, tenga en cuenta que:
    • Los campos dojoAttachPoint identifican los componentes del nodo que están disponibles como propiedades de JavaScript (véase Utilización de plantillas y enlaces ). Todos los nodos deben tener al menos un componente baseShape definido.
    • Los valores entre llaves dobles, por ejemplo {{backgroundColor}}, son enlaces a las propiedades del nodo (véase Utilización de plantillas y enlaces ).
    • Los campos selectedStyle definen el aspecto del nodo cuando está seleccionado (véase Selección de objetos)
    Este es un ejemplo de una plantilla de enlaces personalizada:
    var linkTemplate = "[{"+
    "            dojoAttachPoint: '_path',"+
    "            shape: {"+
    "                type: 'polyline',"+
    "                points: [{x: 0,    y: 0}, {x: 100, y: 0}]"+
    "            },"+
    "            stroke: {"+
    "                color: '{{strokeColor}}',"+
    "                width: {{strokeWidth}},"+
    "                style: 'ShortDot'"+
    "            },"+
    "            selectedStyle: {"+
    "                stroke: {"+
    "                    color: '{{selectedStrokeColor}}',"+
    "                    width: {{selectedStrokeWidth}},"+
    "                    style: 'ShortDot'"+
    "                }"+
    "            }"+
    "        }, {"+
    "            dojoAttachPoint: '_endArrow',"+
    "            shape: {"+
    "                type: 'polyline',"+
    "                points: [{x: -8,y: 5}, {x: 0,y: 0}, {x: -8,y: -5}]"+
    "            },"+
    "            stroke: {"+
    "                color: '{{strokeColor}}',"+
    "                width: 2"+
    "            },"+
    "            selectedStyle: {"+
    "                stroke: {"+
    "                    color: '{{selectedStrokeColor}}',"+
    "                    width: 2"+
    "                }"+
    "            }"+
    "        }]";
    
    ...
                var link = graph.createLink(linkTemplate);
Este es el gráfico resultante cuando se utilizan las plantillas de nodos y enlaces personalizadas:
Gráfico
con nodos y enlaces personalizados. Hay cuatro nodos
circulares, 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 discontinuos con
una punta de flecha. Nodo 2 y Nodo 3 están conectados con Nodo 4
mediante enlaces discontinuos con una punta de
flecha.