Definindo a Aparência de Links

O componente Diagram gera instâncias da classe Link para representar as relações entre os itens. IBM® ILOG® O Dojo Diagrammer fornece um mecanismo de estilo integrado que permite customizar a representação gráfica dos links.

Definindo o Modelo de Link

Para definir o modelo de link:
  • Use a propriedade linkTemplate. O valor é uma sequência JSON ou um objeto que descreve o nó como uma hierarquia de formas GFX. Ele segue as mesmas regras que a propriedade nodeTemplate. Para obter informações adicionais, consulte Definindo a aparências dos nós.
    Um diagram.Link é composto de três subcomponentes dojox.gfx.Shape:
    • caminho principal (obrigatório)
    • seta inicial (opcional)
    • seta final (opcional)
    O modelo de link deve estar em conformidade com esta estrutura. Cada formato no modelo do link deve incluir um identificador específico com uma propriedade dojoAttachPoint que especifica a qual subcomponente cada formato corresponde. Dependendo do subcomponente, a propriedade dojoAttachPoint deve ser uma das seguintes especificações de subcomponente: _path, _startArrow ou _endArrow.
O exemplo a seguir é uma versão simplificada do modelo de link padrão (com ligações removidas para simplificação):
[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }]
      },
      fill: '#00'
   }
]
O código a seguir define um link com um círculo como a seta inicial e uma polilinha como o caminho do link e uma seta final:
var linkTemplate = "[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_startArrow',
      shape: {
         type: 'circle',
         r: 4
      },
      fill: 'white',
      stroke: 'black'
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }, {
            x: -8,
            y: 4
         }]
      },
      fill: 'black'
   }
]";

Definindo o Estilo de Link

Para customizar o estilo de link:
  • Use a propriedade linkStyle. O valor é um objeto JavaScript simples que contém definições para as propriedades de link correspondentes que você deseja configurar. Isso é válido para qualquer propriedade de link se um configurador para a propriedade e seu nome seguir a convenção de nomenclatura Java (para uma propriedade de nome a_property, deve existir um configurador setAProperty).
    A classe de Link define as seguintes propriedades que podem ser usadas para alterar a aparência do link com a propriedade linkStyle:
    Property Type Descrição
    strokeColor string ou dojo.Color
    Configura a cor do traço do link.
    strokeWidth int
    Configura a largura do traço do link.
    selectedStrokeColor string ou dojo.Color
    Configura a cor do traço do link quando selecionado.
    selectedStrokeWidth int
    Configura a largura do traço do link quando selecionada.
    startArrowVisible Booleano
    Configura se a seta inicial ficará visível.
    startArrowFill dojox.gfx.fill
    Configura o preenchimento da seta inicial.
    startArrowStroke dojox.gfx.stroke
    Configura o traço da seta inicial.
    endArrowVisible Booleano
    Configura se a seta final ficará visível.
    endArrowFill dojox.gfx.fill
    Configura o preenchimento da seta final.
    endArrowStroke dojox.gfx.stroke
    Configura o traço da seta final.
    Por exemplo, o código a seguir configura a largura do traço do link como 4:
    <div id="canvas" dojoType='ibm_ilog.diagram.widget.Diagram' style="width:900px;height:700px" movableNode="true"
              linkStyle="{strokeWidth:4}">
       </div>

Definindo links customizados programaticamente

Para definir links customizados:
  • Configure os atributos onLinkCreated ou createLinkFunction do widget Diagrama se os mecanismos descritos neste tópico não forem o suficiente para customizar os links.
    O onLinkCreated é chamado todas as vezes que um link é criado. Permite customizar o link, conforme o necessário. A função deve estar de acordo com o seguinte protótipo:
    function linkCreated(link, start, end, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // link: ibm_ilog.diagram.Link: The newly created Link.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    O atributo createLinkFunction permite alterar a maneira como um link é criado. Ele é chamado para criar cada um dos links e deve estar de acordo com o seguinte protótipo:
    function createLink(item, start, end, template, onGraph, diagram){
        // summary: Creates a Link for a given data store item.
        // item: The item contained in the linksStore, or null if the link is not created from a linksStore item.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // template: The suggested node template.
        // onGraph: The parent Graph in which the node must be created.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget.
        ...
        return link; // ibm_ilog.diagram.Link
    };
    O modo sugerido é o modelo especificado pelos atributos linkTemplate ou linkTemplateFunction. O createLinkFunction pode usar um modelo diferente. Para criar o link customizado, o createLinkFunction deve chamar a função createTemplatedShape do widget Diagrama.
    O exemplo a seguir criar uma instância da classe MyLink que deve ser uma subclasse do ibm_ilog.diagram.Link:
    function createLink(item, start, end, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyLink, template, onGraph, diagram.linkStyle, diagram.linksStore, item);
    };
    Se o createLinkFunction não se conectar o Link com os nós de início e extremidade (chamando link.setStartPort/setEndPort), isso será feito automaticamente pelo widget Diagrama depois que o createLinkFunction for chamado. Contudo, o createLinkFunction pode conectar o link, por exemplo, para customizar os pontos de conexão para usar portas customizadas. Nesse caso, o widget não substitui as portas configuradas pela função.