Para Especialistas: Dicas Adicionais para o TL

Especificando Vizinhos a Leste/oeste

É possível especificar que dois modos não relacionados devem ser vizinhos diretos em uma direção perpendicular à direção do fluxo. Nos modos de layout de nível e radial, os nós são posicionados no mesmo nível próximos uns dos outros. Nos modos de layout livre e invertido, os nós são posicionados alinhados na borda norte. Tais nós são chamados de vizinhos a leste/oeste porque um nó é posicionado como o vizinho direto no lado leste do outro nó. O outro nó se torna o vizinho direto no lado oeste do primeiro nó. (Consulte também Usando Direções da Bússola para Parâmetros de Layout Posicionais (TL)).
Technically, the nodes are treated as parent and child, even if there is no link between them. Therefore, one of the two nodes can have a real parent, but the other node must not because its virtual parent is its east-west neighbor.
O recurso de vizinho a leste/oeste pode ser usado, por exemplo, para nós de anotação em uma árvore de sintaxe com tipo que ocorre na construção do compilador. Árvore de sintaxe anotada da instrução a[25] = b[24] + 0.5; mostra um exemplo desse tipo de árvore.
Picture
of tree layout illustrating the east west neighboring parameter
Árvore de sintaxe anotada da instrução a[25] = b[24] + 0.5;
Para especificar que dois nós são vizinhos a leste/oeste, use o método:
treeLayout.setEastWestNeighboring(eastNode, westNode);
Também é possível usar a seguinte função, que é idêntica, exceto para a ordem de parâmetro invertida:
treeLayout.setWestEastNeighboring(westNode, eastNode);
If the flow direction is to the bottom, the latter method might be easier to remember because, in this case, west is to the left of east in the layout, which is similar to the text flow of the parameters.
Para obter o nó que é o vizinho a leste ou oeste de um nó, use as chamadas:
var eastNode = treeLayout.getEastNeighbor(westNode);
var westNode = treeLayout.getWestNeighbor(eastNode);
Each node can have at most one east neighbor and one west neighbor because they are direct neighbors. Se mais de um vizinho direto for especificado, ele será parcialmente ignorado. As especificações cíclicas também podem causar conflito. Por exemplo, se o nó B for o vizinho a leste do nó A e o nó C for o vizinho a leste de B, o nó A não poderá ser o vizinho a leste de C. (Estritamente falando, tais ciclos podem ser tecnicamente possíveis em algumas situações no modo de layout radial, no entanto, eles não são permitidos em nenhum modo de layout.)
If B is the east neighbor of A, then A is automatically the west neighbor of B. The east neighbor of A can itself have another east neighbor. You can thus create chains of east-west neighbors, which is a common way to visualize lists of trees. Dois exemplos são mostrados na figura Cadeias de vizinhos a leste/oeste para visualizar listas de árvores.
Picture
of tree layouts illustrating chains of east west neighborings
Cadeias de vizinhos a leste/oeste para visualizar listas de árvores

Recuperando Categorias de Links

O algoritmo de Layout de Árvore funciona em uma árvore de ampliação, conforme mencionado em um O Algoritmo TL. Se o gráfico a ser organizado não for uma árvore pura, o algoritmo ignorará alguns links. Para tratar estes tipos de links de uma maneira especial, é possível obter uma lista de links não de árvore.
Como existem nós-pais e filhos na árvore de ampliação, as seguintes categorias de links devem ser diferenciadas:
  • Um link de árvore de avanço é um link de um pai para seu filho.
  • Um link de árvore de retrocesso é um link de um filho para seu pai. If the link is drawn as a directed arrow, the arrow points in the opposite direction to the flow direction.
  • Um link não de árvore é um link entre dois nós não relacionados, nenhum deles é um filho do outro.
Picture
illustrating the different link categories
Categorias de links
O algoritmo de layout usa estas categorias de links internamente, mas não as armazena permanentemente para economizar tempo e assegurar eficiência da memória. Se desejar tratar algumas categorias de links de uma maneira especial (por exemplo, para chamar o Layout de Link nos links não de árvore), você deverá especificar antes do layout que deseja acessar as categorias de links após o layout.
Para isso, use o método setCategorizingLinks da seguinte maneira:
  treeLayout.setCategorizingLinks(true);
  graph.setNodeLayout(treeLayout);
  graph.performGraphLayout();
  var link;
  var forwardLinks = treeLayout.getCalcForwardTreeLinks();
  console.log("forward links:");
  while(forwardLinks.hasNext()){
   link = forwardLinks.next();
   console.log(link.getStartNode().getLabel() + " -> " + link.getEndNode().getLabel());
  }
  var backwardLinks = treeLayout.getCalcBackwardTreeLinks();
  console.log("backward links:");
  while(backwardLinks.hasNext()){
   link = backwardLinks.next();
   console.log(link.getStartNode().getLabel() + " -> " + link.getEndNode().getLabel());
  }
  var nonTreeLinks = treeLayout.getCalcNonTreeLinks();
  console.log("non-tree links:");
  while(nonTreeLinks.hasNext()){
   link = nonTreeLinks.next();
   console.log(link.getStartNode().getLabel() + " -> " + link.getEndNode().getLabel());
  }
Depois de executar o layout, é possível acessar as categorias de links.
Os dados da categoria de link são preenchidos sempre que o layout é chamado, a menos que você chame o método setCategorizingLinks(false).

Sequências de Layouts com Mudanças Incrementais

You can work with trees that have become out-of-date, for example, the trees that need to be extended with more child nodes. Se você executar um layout após uma extensão, provavelmente desejará identificar as partes que já foram organizadas no gráfico original. O algoritmo de Layout de Árvore suporta estas mudanças incrementais no modo incremental porque ele considera as posições anteriores dos nós. Ele preserva a ordem relativa dos nós-filhos no layout subsequente.
Em modo não incremental, o algoritmo de Layout de Árvore calcula a ordem dos nós-filhos a partir da ordem de nós especificada pelo modelo de gráfico anexado (ou gráfico).
In this case, the layout is independent from the positions of the nodes before the layout. Ele não preserva a ordem relativa dos nós-filhos em layouts subsequentes.
O modo incremental é ativado por padrão.
Para desativar o modo incremental:
Chame:
treeLayout.setIncrementalMode(false);

Edição Interativa

The fact that the relative order of the layout is preserved is useful during interactive editing. Permite corrigir o layout facilmente. Por exemplo, se o primeiro layout posicionar um nó A à esquerda de seu irmão nó B mas for necessário reverter a ordem, simplesmente será possível mover o nó A para a direita do nó B e iniciar um novo layout para limpar o desenho. In the second layout, A remains to the right of B, and the subtree of A “follows” node A.
Three
pictures showing the effect of moving a node and then redoing the
layout
Edição interativa para obter a ordem específica de nós-filhos

Especificando a Ordem de Nós-filhos

Alguns aplicativos requerem uma ordem relativa específica de nós-filhos na árvore. Isto significa que, por exemplo, quando a direção do fluxo for para a parte inferior, qual filho deverá ser posicionado à esquerda de outro filho.
It can be achieved in non-incremental mode by specifying a node comparator as follows:
  treeLayout.setNodeComparator(function(node1, node2) {
   // for example: sort nodes by increasing width
   return node1.getBounds().width - node2.getBounds().width;
  });
O comparador especifica a ordem conforme definida na tabela a seguir. Para alinhamento regular, resulta no aumento de coordenadas para os filhos. For tip-over alignment, it results in increasing distance from the parent. Para modos de balão e radial, resulta em ordenações no sentido horário.
Modo de Layout Alinhamento Direção do Fluxo Ordem
Livre, de Nível, Invertido nenhuma inversão Parte inferior da esquerda para a direita
Parte Superior da esquerda para a direita
Esquerda parte superior para a parte inferior
Direita parte superior para a parte inferior
Livre, de Nível, Invertido inversão Parte inferior parte superior para a parte inferior
Parte Superior parte inferior para a parte superior
Esquerda direita para a esquerda
Direita da esquerda para a direita
Radial, Balão any any sentido horário