L'API d'agencement GFX de Dojo Diagrammer GFX constitue une extension de l'API dojox.gfx. Elle fournit la classe de groupe GFX (et donc la classe de noeud) avec la possibilité de réorganiser automatiquement ses enfants en fonction des contraintes d'emplacement et de taille.
Avec l'API étendue, la position et la taille des sous-composants de noeud n'ont pas besoin d'être codés en dur. Le noeud
adapte automatiquement sa taille au contenu dès qu'une modification affectant la taille a lieu. Par exemple, si le libellé du noeud devient plus long, la taille du noeud s'adapte dynamiquement à la nouvelle taille du libellé.
Par défaut, l'API gfxlayout n'est pas activée, même si elle est utilisée dans la plupart des exemples. Pour l'activer, définissez la propriété useGfxLayout de
djConfig sur
true
comme illustré dans le code suivant :<script type="text/javascript"> var djConfig = { parseOnLoad:true, useGfxLayout:true } </scrip>
Réorganisation des enfants d'un noeud
Lors de la réorganisation des enfants d'une instance de noeud, l'enfant direct
du noeud est généralement une instance de groupe qui tient lieu de panneau supérieur pour les formes enfants. Ce panneau traite la taille et la position des objets enfants en association avec algorithme d'agencement de votre choix.
L'exemple suivant montre comment écrire un modèle pour créer une forme d'arrière-plan et un libellé.
Ce modèle est une version simplifiée du modèle de noeud par défaut.
Ses contraintes d'agencement sont définies pour que la taille du noeud soit toujours adaptée à la taille du libellé :
{ 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'} } ] }
Le modèle définit d'abord un groupe comme enfant direct unique. Une instance de la classe GridLayout est définie sur ce groupe. Le groupe est composée de deux enfants :
- Une forme de rectangle dont les paramètres de taille sont définis sur la taille du libellé. Toutefois, une taille minimale est également spécifiée pour que le noeud conserve sa taille par défaut si la taille du libellé est réduite. Le moteur d'agencement utilise la propriété
minimumSize
pour contrôler la taille d'une forme. - Une forme de texte est liée à la propriété de libellé du noeud. La propriété
margins
est définie sur le texte pour spécifier l'espace entre le libellé et le bord du panneau.
La figure suivante montre le résultat avec une taille de noeud ajustée en fonction de la longueur du libellé :

L'exemple spécifie deux propriétés qui ajoutent des contraintes à l'agencement :
minimumSize
et margins
.
Elles font partie d'un ensemble de propriétés qui peuvent être définies sur toute forme et sont prises en charge par tous les algorithmes d'agencement.halign
etvalign
: alignements horizontal et vertical.Ces propriétés sont utilisées pour calculer les positions horizontale et verticale de la forme au sein de l'emplacement du panneau.Les valeurs dehalign
sont : left (gauche), center (centre), right (droite), stretch (étirer).Les valeurs devalign
sont : top (haut), center (centre), bottom (bas), stretch (étirer).Si la valeur est stretch, la forme remplit la totalité de l'emplacement.margins
: marges de la forme au sein de l'emplacement.Il s'agit de l'espace entre les limites de l'emplacement et la forme proprement dite. La valeur est soit un nombre pour définir les marges de gauche, du haut, de droite et du bas sur la même valeur, soit un ensemble de quatre nombres dans l'ordre des marges de gauche, du haut, de droite et du bas.minimumSize
: taille minimale de la forme.maximumSize
: taille maximale de la forme.
StackLayout
La classe ibm_ilog.diagram.gfxlayout.StackLayout réorganise les enfants d'un conteneur en une pile horizontale ou verticale. L'orientation est indiquée lors de la construction à l'aide de la propriété
horizontal
. La figure suivante montre deux instances de groupe avec une classe
StackLayout dont la propriété
horizontal
est définie sur false
dans la première instance et sur true
dans la deuxième instance :

La classe StackLayout définit
les propriétés
paddingLeft
, paddingRight
, paddingTop
et paddingBottom
pour spécifier les marges internes du panneau par rapport à la position des enfants. Une propriété padding
globale définit le même remplissage dans toutes les directions. L'espace entre les enfants peut être ajusté à l'aide de la propriété gap
.
La figure suivante illustre ces propriétés :
Un agencement en pile horizontal aligne verticalement les objets enfants en fonction de la valeur de leurs propriétés
valign
et margins
. Un agencement en pile vertical aligne horizontalement les objets enfants en fonction de la valeur de leurs propriétés halign
et margins
. L'image suivante montre comment les valeurs d'alignement horizontal et vertical
sont utilisées par l'agencement pour positionner les formes dans le conteneur :

Le modèle de code suivant crée la pile horizontale illustrée dans la figure :
{ 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
La classe ibm_ilog.diagram.gfxlayout.GridLayout réorganise les enfants d'un conteneur en éléments de grille.
La structure d'agencement en grille est définie par un ensemble d'objets descripteurs de colonne et de ligne qui indiquent comment les mesures de chaque colonne ou ligne sont calculées. Ces objets descripteurs prennent en charge les propriétés suivantes :
width
etheight
: si la largeur ou la hauteur du conteneur n'est pas fixe, la largeur de colonne ou la hauteur de ligne dépend de la valeur de cette propriété. La valeur -1 adjute les dimensions sur les dimensions enfants maximales.weight
: si la largeur ou la hauteur du conteneur est fixe, cette propriété définit la répartition entre les colonnes et les lignes dans l'espace qui reste une fois que toutes les largeurs ou hauteurs fixes ont été soustraites de la largeur et la hauteur du conteneur. Par exemple, une colonne avec le poids 2 dispose de deux fois l'espace d'une colonne avec le poids 1 et la même largeur fixe. Une ligne avec le poids 2 dispose de deux fois l'espace d'une ligne avec le poids 1 et la même hauteur fixe.
Examinez la structure de grille suivante :
cols:[{ width:250}, {weight:2}, {weight:1}, {weight:2} ], rows:[{ height:90}, {height:-1}]
Le panneau dans son ensemble à une largeur fixe de 600. La première colonne est définie sur une largeur de 250 pixels et les autres colonnes partagent l'espace restant avec la contrainte suivante : la largeur de la deuxième et la quatrième colonnes est définie pour être deux fois la largeur de la troisième colonne.
Si la hauteur du panneau est définie sur -1, le panneau s'adapte à la taille de ses enfants. Dans cet exemple, la première ligne a une hauteur fixe égale à 90 et la deuxième ligne s'adapte à la hauteur maximale de la forme qu'elle contient. La figure suivante illustre cette structure de grille :

La classe GridLayout définit
les propriétés
paddingLeft
, paddingRight
, paddingTop
et paddingBottom
pour spécifier les marges internes du panneau par rapport à la position des enfants. Une propriété padding
globale définit le même remplissage dans toutes les directions. Ce remplissage s'ajoute aux marges spécifiques qui sont définies pour chaque forme. La figure suivante illustre les relations entre ces propriétés :
Les enfants de la grille sont placés dans les cellules de la grille en fonction des propriétés
column
et row
des enfants. Lorsque ces propriétés ne sont pas spécifiées pour une forme, cette dernière est automatiquement placée dans la grille selon son ordre dans la liste des enfants du conteneur. La direction du positionnement est définie par la propriété horizontalFlow
qui a la valeur true par défaut. Si la propriété
horizontalFlow
a la valeur true et que les enfants ne définissent pas un index de ligne ou de colonne spécifique, le premier enfant est placé dans la cellule (0,0), le deuxième dans la cellule (1,0), et ainsi de suite.Un enfant peut s'étendre sur plusieurs lignes ou colonnes en fonction de ses propriétés
colspan
ou rowspan
.
Ces propriétés indiquent le nombre de colonnes ou de lignes que l'enfant doit chevaucher. Une valeur de -1 pour les propriétés
colspan
ou rowspan
signifie que l'enfant doit s'étendre sur toutes les colonnes ou lignes restantes.
Dans la figure suivante, une forme dans la cellule (0,0) est configurée pour s'étendre sur deux colonnes (sa propriété colspan
est définie sur 2). Une autre forme dans la cellule (2,0) est configurée pour s'étendre verticalement sur les lignes restantes (sa propriété rowspan
est définie sur -1).