Definindo Modelos de Nós e de Links Customizados

O modelo é uma sequência JSON que descreve o conteúdo de um nó, link ou subgráfico. Os modelos padrão estão no arquivo de origem ibm_ilog.diagram/templates/template.js. Os modelos podem conter ligações com as propriedades de dados de aparência (consulte Usando Modelos e Ligações).
Para aplicativos que requerem gráficos específicos para nós e links, os modelos padrão de nós e links e suas propriedades não são o suficiente.
Para criar gráficos customizados:
  • Transmita um argumento template para as funções createNode(), createLink() e createSubgraph().
    A seguir está um exemplo de um modelo de nó customizado:
    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);
    Ao criar modelos de nós customizados, observe que:
    • Os campos dojoAttachPoint identificam as partes do nó que estão disponíveis como propriedades JavaScript (consulte Usando Modelos e Ligações). Todos os nós devem ter pelo menos uma parte baseShape definida.
    • Os valores entre chaves duplas, por exemplo, {{backgroundColor}}, são ligações com as propriedades do nó (consulte Usando Modelos e Ligações).
    • Os campos selectedStyle definem a aparência do nó quando ele é selecionado (consulte Selecionando Objetos)
    A seguir está um exemplo de um modelo de link customizado:
    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);
A seguir está o gráfico resultante ao usar os modelos de nós e de links customizados:
Um gráfico
com nós e links customizados. Existem quatro nós circulares, cada um tendo
um rótulo abaixo deles: 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 pontilhados com uma ponta de seta. O Nó 2 e o Nó 3 estão
conectados ao Nó 4 por links pontilhados com uma ponta de seta.