Agencement GFX

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é :
Figure
montrant deux noeuds rectangulaires, un en haut à gauche et un en bas à droite de la figure. Les deux noeuds ont un arrière-plan bleu.
Le noeud en haut à gauche a le libellé Node 1 et celui en bas à droite, le libellé New node added 1. La taille de chaque forme est ajustée en fonction de la longueur de son 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 et valign : 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 de halign sont : left (gauche), center (centre), right (droite), stretch (étirer).
    Les valeurs de valign 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 :
Figure
montrant un groupe de quatre formes rectangulaires de la même longueur mais de hauteurs différentes. Les formes sont alignées verticalement avec un écart entre chaque. (agencement en pile avec la propriété horizontal définie sur
false.)
Figure
montrant un groupe de quatre formes rectangulaires de même hauteur mais de longueurs différentes. Les formes sont alignées horizontalement avec un écart entre chaque. (agencement en pile avec la propriété horizontal définie sur
true.)
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 :
Figure
montrant trois formes empilées verticalement. Elle
illustre l'écart entre les formes, ainsi que le remplissage à gauche, à droite, en haut et en bas par rapport au panneau qui contient ce groupe de formes.
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 :
Figure
montrant un agencement en pile vertical et un agencement en pile horizontal. L'agencement en pile comprend quatre formes rectangulaires empilées de différentes tailles. Chaque forme contient un libellé : center (la forme est centrée horizontalement dans le panneau conteneur), stretch (la forme est alignée horizontalement par rapport aux marges droite et gauche du panneau conteneur),
left (la forme est alignée horizontalement par rapport à la gauche du panneau conteneur) et
center (la forme est centrée horizontalement dans le panneau conteneur).
En haut de l'agencement en pile vertical, la légende "halign
property" est indiquée. L'agencement en pile horizontal montre quatre formes rectangulaires de différentes tailles côte à côte. Chaque forme contient un libellé : center (la forme est centrée verticalement dans le panneau conteneur), stretch (la forme est alignée verticalement par rapport aux marges droite et gauche du panneau conteneur),
bottom (la forme est alignée verticalement avec le bas du panneau conteneur) et
top (la forme est alignée verticalement avec le haut du panneau conteneur).
En haut de l'agencement en pile horizontal, la légende "valign
property" est indiquée.
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 et height : 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 :
Illustration
de la structure de grille décrite ci-dessus.
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 :
Illustration du remplissage sur un agencement en grille qui contient quatre formes carrées de différentes tailles. Un remplissage est effectué en haut, en bas, à gauche et à droite du conteneur de grille. Il y a des marges entre les formes du conteneur de grille.
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).
Illustration
de l'agencement de la grille décrit ci-dessus