Définition de modèles de noeud et de lien personnalisés

Le modèle est une chaîne JSON qui décrit le contenu d'un noeud, d'un lien ou d'un sous-graphe. Les modèles par défaut sont situés dans le fichier source ibm_ilog.diagram/templates/template.js. Les modèles peuvent contenir des liaisons vers les propriétés de données d'apparence (voir Utilisation des modèles et des liaisons).
Pour les applications qui ont besoin de graphiques spécifiques pour des noeuds et des liens, les modèles de noeud et de lien par défaut et leurs propriétés sont insuffisants.
Pour créer des graphiques personnalisés :
  • Transmettez un argument template aux fonctions createNode(), createLink() et createSubgraph().
    Voici un exemple de modèle de noeud personnalisé :
    var nodeTemplate = "[{"+
    "            dojoAttachPoint: 'baseShape',"+
    "            shape: {"+
    "                type: 'ellipse',"+
    "                cx: 0,"+
    "                cy: 0,"+
    "                rx: 10,"+
    "                ry: 10"+
    "            },"+
    "            stroke: {"+
    "                color: '#00',"+
    "                width: 3"+
    "            },"+
    "            fill: '{{backgroundColor}}',"+
    "            selectedStyle: {"+
    "                fill: '{{selectedBackgroundColor}}'"+
    "            }"+
    "        }, {"+
    "            dojoAttachPoint: 'textShape',"+
    "            shape: {"+
    "                type: 'text',"+
    "                text: '{{label}}',"+
    "                x: 5,"+
    "                y: 30,"+
    "                align: 'middle'"+
    "            },"+
    "            fill: '{{textColor}}',"+
    "            font: {"+
    "                type: 'font',"+
    "                weight: 'bold',"+
    "                size: '12pt',"+
    "                family: 'Arial'"+
    "            }"+
    "        }]";
    
    ...
                var node = graph.createNode(nodeTemplate);
    Lorsque vous créez des modèles de noeud personnalisés, tenez compte des points suivants :
    • Les zones dojoAttachPoint identifient les composants du noeud qui sont disponibles en tant que propriétés JavaScript (voir Utilisation des modèles et des liaisons). Tous les noeuds doivent avoir au moins un composant baseShape défini.
    • Les valeurs placées entre des accolades doubles, par exemple {{backgroundColor}}, sont des liaison vers les propriétés du noeud (voir Utilisation des modèles et des liaisons).
    • Les zones selectedStyle définissent l'aspect du noeud lorsque celui-ci est sélectionné (voir Sélection d'objets)
    Voici un exemple de modèle de lien personnalisé :
    var linkTemplate = "[{"+
    "            dojoAttachPoint: '_path',"+
    "            shape: {"+
    "                type: 'polyline',"+
    "                points: [{x: 0,    y: 0}, {x: 100, y: 0}]"+
    "            },"+
    "            stroke: {"+
    "                color: '{{strokeColor}}',"+
    "                width: {{strokeWidth}},"+
    "                style: 'ShortDot'"+
    "            },"+
    "            selectedStyle: {"+
    "                stroke: {"+
    "                    color: '{{selectedStrokeColor}}',"+
    "                    width: {{selectedStrokeWidth}},"+
    "                    style: 'ShortDot'"+
    "                }"+
    "            }"+
    "        }, {"+
    "            dojoAttachPoint: '_endArrow',"+
    "            shape: {"+
    "                type: 'polyline',"+
    "                points: [{x: -8,y: 5}, {x: 0,y: 0}, {x: -8,y: -5}]"+
    "            },"+
    "            stroke: {"+
    "                color: '{{strokeColor}}',"+
    "                width: 2"+
    "            },"+
    "            selectedStyle: {"+
    "                stroke: {"+
    "                    color: '{{selectedStrokeColor}}',"+
    "                    width: 2"+
    "                }"+
    "            }"+
    "        }]";
    
    ...
                var link = graph.createLink(linkTemplate);
Voici le graphe résultant lorsque les modèles de noeud et de lien personnalisés sont utilisés :
Graphe avec des noeuds et des liens personnalisés. Il contient quatre noeuds circulaires avec un libellé en dessous de chacun d'entre eux : Node 1, Node 2, Node 3, Node 4. Node 1 est situé à gauche, Node 2 en haut, Node 3 en bas et Node 4 à droite du graphe. Node 1 est connecté à Node 2 et Node 3 avec des liens en pointillés terminés par une flèche. Node 2 et Node 3 sont connectés à Node 4 avec des liens en pointillés terminés par une flèche.