Cytoscape style dynamique dernier noeud ajouté seulement

Question

Je suis dans la phase de début de l'utilisation de Cytoscape.js et j'essaie de styler le dernier noeud ajouté à mon arbre de mise en page dagre.

Pour le contexte, j'essaye de visualiser le workflow de Git pendant que je fais un commit de Git. Les nœuds actuels sur l'arbre sont colorés en vert. Quand je fais un commit Git, un nouveau noeud sera ajouté à la fin de l'arbre Git (dagre) avec une couleur rouge. Une fois que je fais une autre validation, un nouveau nœud rouge sera ajouté ... mais je veux que le nœud précédent qui était rouge soit vert comme les autres nœuds. J'ai accroché mon commit Git avec cy.add() et j'ajoute de la couleur d'arrière-plan à chaque nouveau nœud. Encore une fois, je voudrais styler uniquement le nouveau nœud rouge (ou animer une sorte de pulsation pour indiquer qu'il s'agit du nœud nouvellement ajouté), et avoir toutes les couleurs avant de passer au vert. J'ai vraiment l'impression de manquer quelque chose de simple ... Toute aide serait appréciée!

Answer 1

Généralement, il est plus flexible d'utiliser des classes pour le style.

Vous pouvez définir des styles pour les classes dans votre stylesheet, défini à init.

Dans votre exemple, vous pourriez avoir une classe head pour la validation correspondant à la validation de la tête git. Vous pouvez alors simplement cy.nodes().removeClass('head') lorsque vous ajoutez un nouveau nœud, et newNode.addClass('head') pour marquer le nouveau nœud comme nouvelle tête.

Vous pouvez mettre n'importe quel style associé à une classe dans votre feuille de style. Vous pouvez même utiliser des animations de transition, similaires à HTML/CSS, afin de pouvoir animer les nouveaux noeuds head.