Layout GFX

A API do layout GFX do Dojo Diagrammer estende a API dojox.gfx. Ela fornece a classe Grupo GFX (e, portanto, a classe Nó) com a capacidade de organizar automaticamente seus filhos de acordo com restrições de local e tamanho.
Com esta API estendida, a posição e tamanho dos subcomponentes Nó não precisam ser codificados permanentemente. O nó adapta automaticamente seu tamanho ao conteúdo assim que ocorre uma mudança que afeta o tamanho. Por exemplo, se o rótulo Nó ficar maior, o tamanho do nó se ajustará ao novo tamanho do rótulo dinamicamente.
Por padrão, a API gfxlayout não é ativada, embora ela seja usada na maioria das amostras. Para ativá-la, configure a propriedade useGfxLayout de djConfig como true, conforme mostrado no código a seguir:
<script type="text/javascript">
	    var djConfig = {
	        parseOnLoad:true,
               useGfxLayout:true
	    }
</scrip>
	

Organizando os Filhos de um Nó

Quando os filhos de uma instância de Nó são organizados, o filho direto do Nó é normalmente uma instância de Grupo que age como o painel superior para as formas de filhos. Este painel manipula o tamanho e posição dos objetos-filhos juntamente com o algoritmo de layout de sua opção.
O exemplo a seguir mostra como gravar um modelo para construir um Nó básico composto de uma forma de plano de fundo e de um rótulo de texto. Esse modelo é a versão simplificada do modelo de nó padrão. Suas restrições de layout são configuradas de forma o tamanho do nó sempre se ajuste ao tamanho do rótulo:
{
layout: { type:'ibm_ilog.diagram.gfxlayout.GridLayout' },
children: [
    { 
        dojoAttachPoint: 'baseShape',
        minimumSize:{width:80, height:40},
        shape: { width:1, height:1, r: 5, type:'rect'}, 
        fill: '{{backgroundColor}}', 
        stroke: {'color': '{{borderColor}}', 
        'width': 2 }
    },
    {
        dojoAttachPoint: 'textShape', 
        margins:[5,5,5,-2],
        shape: {type:'text', text:'{{label}}', align:'middle'}, 
        fill:'{{textColor}}', 
        font:{type:'font', size:'10pt', family:'sans-serif'}
    }
]
}
O modelo primeiro define um Grupo como o filho direto exclusivo. Uma instância da classe GridLayout é configurada para este grupo. O grupo é composto de dois filhos:
  • Uma forma de retângulo que possui seus parâmetros de tamanho configurados como 1 para ajustar-se ao tamanho do rótulo. Contudo, um tamanho mínimo é especificado também, assim, se o tamanho do rótulo for menor, o Nó mantém seu tamanho padrão. O mecanismo de layout usa a propriedade minimumSize para controlar o tamanho de uma forma.
  • Uma forma de texto que está limitada à propriedade do rótulo do nó. A propriedade margins é configurada no texto para definir o espaço entre o rótulo e a borda do painel.
A figura a seguir ilustra o resultado e mostra um tamanho de nó ajustado para o comprimento do rótulo:
Figura
mostra dois nós retangulares, um na parte superior esquerda e o outro na parte
inferior direita da figura. Os dois nós possuem um plano de fundo azul.
O nó superior esquerdo possui o rótulo Nó 1 e o nó inferior direito
possui o rótulo Novo nó incluído 1. O tamanho de cada forma é ajustado
ao comprimento de seu rótulo.
O exemplo especifica duas propriedades que incluem algumas restrições no layout: minimumSize e margins. Estas são partes de um conjunto de propriedades que podem ser definidas em qualquer forma e são suportadas por todos os algoritmos de layout:
  • halign e valign: os alinhamentos horizontais e verticais.
    Estas propriedades são usadas para calcular as posições horizontal e vertical da forma no slot do painel.
    Os valores de halign são: esquerda, centro, direita, expansão.
    Os valores de valign são: parte superior, centro, parte inferior, expansão
    Se o valor for ‘expansão’, a forma preencherá o slot inteiro.
  • margins: as margens da forma no slot.
    É o espaço entre os limites do slot e a própria forma. O valor é um número para configurar as margens esquerda, superior, direita e inferior como o mesmo valor, ou uma matriz de quatro números organizados em ordem pelas margens esquerda, superior, direita e inferior.
  • minimumSize: o tamanho mínimo da forma.
  • maximumSize: o tamanho máximo da forma.

StackLayout

A classe ibm_ilog.diagram.gfxlayout.StackLayout organiza os filhos de um contêiner em uma pilha horizontal ou vertical. A orientação é fornecida no tempo de construção por meio da propriedade horizontal.
A figura a seguir mostra duas instâncias Grupo com um StackLayout cuja propriedade horizontal está configurada como false na primeira instância e como true na segunda instância:
Figura
mostra um grupo de quatro formas retangulares do mesmo comprimento, mas
de alturas diferentes. As formas são alinhadas verticalmente com um intervalo
entre cada uma delas. (Layout de pilha com propriedade horizontal configurada
como false.)
Figura
mostra um grupo de quatro formas retangulares da mesma altura, mas
de comprimentos diferentes. As formas são alinhadas horizontalmente com um intervalo
entre cada uma delas. (Layout de pilha com propriedade horizontal configurada
como true.)
A classe StackLayout define as propriedades paddingLeft, paddingRight, paddingTop e paddingBottom para especificar as margens internas do painel em relação a quais filhos serão posicionados. Uma propriedade global padding define o mesmo preenchimento em todas as direções. O espaço entre os filhos pode ser ajustado usando a propriedade gap. A figura a seguir ilustra estas propriedades:
Figura
mostra três formas retangulares empilhadas verticalmente. A figura ilustra
o intervalo entre as formas, bem como o preenchimento à esquerda, à direita,
na parte superior e na parte inferior em relação ao painel que
contém este grupo de formas.
Um layout de pilha horizontal alinha os objetos-filhos verticalmente no slot de layout calculado de acordo com o valor de suas propriedades valign e margins. Um layout de pilha vertical alinha os objetos-filhos horizontalmente no slot de layout calculado de acordo com o valor de suas propriedades halign e margins.
A imagem a seguir mostra como os valores de alinhamento horizontal e vertical são usados pelo layout para posicionar as formas no contêiner:
Figura
mostra um layout de pilha vertical e um layout de pilha horizontal. O layout de
pilha vertical possui quatro formas retangulares empilhadas de diferentes tamanhos. Cada forma contém um rótulo: centro (a forma é centralizada
horizontalmente no painel do contêiner), expansão (a forma é alinhada
horizontalmente com as margens direita e esquerda do painel do contêiner),
esquerda (a forma é alinhada horizontalmente à esquerda do painel do contêiner),
centro (a forma é centralizada horizontalmente no painel do contêiner).
Na parte superior deste layout de pilha vertical, a legenda ‘propriedade halign’ é indicada. O layout de pilha horizontal mostra quatro formas retangulares
de diferentes tamanhos próximas umas das outras. Cada forma
contém um rótulo: centro (a forma é centralizada verticalmente no
painel do contêiner), expansão (a forma é alinhada verticalmente
com as margens superior e inferior do painel do contêiner), parte inferior
(a forma é alinhada verticalmente com a parte inferior do painel do contêiner),
parte superior (a forma é alinhada verticalmente com a parte superior da forma do contêiner).
Na parte superior deste Layout de pilha horizontal, a legenda ‘propriedade valign’ é indicada.
O código de modelo a seguir cria a pilha horizontal ilustrada na figura:
{
layout:{
horizontal:true,
gap:10,
padding:[5,5,5,5]},
children:[
{
valign:'center',
shape:{x:0, y:0, width:60, height:40, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},

{
valign:'stretch',
shape:{x:0, y:0, width:110, height:65, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},

{
valign:'bottom',
shape:{x:0, y:0, width:40, height:40, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},

{
valign:'top', 
shape:{x:0, y:0, width:80, height:20, r:5, type:'rect'}, 
fill: '{{backgroundColor}}', 
stroke: {'color': '{{borderColor}}', 'width': 2 }},
]}

GridLayout

A classe ibm_ilog.diagram.gfxlayout.GridLayout organiza os filhos de um contêiner como elementos da grade.
A estrutura de layout da grade é definida por uma coleção de objetos do descritor de colunas e de linhas que especificam como a métrica de cada linha ou coluna é calculada. Estes objetos do descritor suportam as seguintes propriedades:
  • width e height: se a largura ou altura do contêiner não for fixa, a largura da coluna ou a altura da linha dependerá do valor desta propriedade. Um valor de -1 ajusta as dimensões ao máximo de dimensões-filhas.
  • weight: se a largura ou altura do contêiner for fixa, esta propriedade definirá como será distribuído entre as colunas ou linhas o espaço que permanece após todas as larguras ou alturas fixas terem sido subtraídas da largura ou altura do contêiner. Por exemplo, uma coluna com um peso de 2 tem o dobro do espaço de uma coluna com um peso de 1 e a mesma largura fixa. Uma linha com um peso de 2 tem o dobro do espaço de uma linha com um peso de 1 e a mesma altura fixa.
Considere a seguinte estrutura de grade:
cols:[{ width:250}, {weight:2}, {weight:1}, {weight:2} ],  
rows:[{ height:90}, {height:-1}]
O painel inteiro tem uma largura fixa de 600. A primeira coluna é configurada como 250 pixels e as outras colunas compartilham o espaço restante com a seguinte restrição: a largura da segunda e quarta colunas é configurada para ser o dobro da largura da terceira coluna.
Se o painel de altura for configurado como -1, o painel será adaptado ao tamanho de seus filhos. Neste exemplo, a primeira linha possui uma altura fixa de 90 e a segunda linha ajusta a altura máxima da forma nesta linha. A figura a seguir ilustra esta estrutura de grade:
Ilustração
da estrutura da grade descrita acima.
A classe GridLayout define as propriedades paddingLeft, paddingRight, paddingTop e paddingBottom para especificar as margens internas do painel em relação a quais filhos serão posicionados. Uma propriedade global padding define o mesmo preenchimento em todas as direções. Este preenchimento é incluído nas margens específicas que estão definidas para cada forma. A figura a seguir mostra os relacionamentos entre estas propriedades:
Ilustração de
preenchimento em um layout de grade que contém quatro formas quadradas de
tamanhos diferentes. Há algum preenchimento na parte superior, na parte inferior,
à esquerda e à direita do contêiner de grade. Existem margens
entre as formas no contêiner da grade.
Os filhos na grade são posicionados nas células da grade de acordo com as propriedades column e row dos filhos. Quando estas propriedades não forem especificadas para uma forma, a forma será automaticamente posicionada na grade de acordo com sua ordem na lista de filhos do contêiner. A direção do posicionamento é definida por meio da propriedade horizontalFlow que é true por padrão.
Se a propriedade horizontalFlow for true e os filhos não definirem nenhum índice de linha ou coluna específico, o primeiro filho será posicionado na célula (0,0), o segundo na célula (1,0) e assim por diante.
Um filho pode se estender por várias linhas ou colunas, dependendo de suas propriedades colspan ou rowspan. Estas propriedades indicam o número de colunas ou linhas que o filho deve sobrepor.
Um valor de -1 para as propriedades colspan ou rowspan significa que o filho deve se estender por todas as colunas ou linhas remanescentes. Na figura a seguir, uma forma na célula (0,0) é configurada para se estender em duas colunas (sua propriedade colspan está configurada como 2). Outra forma na célula (2,0) está configurada para se estender verticalmente por todas as linhas remanescentes (sua propriedade rowspan está configurada como -1).
Ilustração
da ampliação da grade descrita acima