JeuWeb - Crée ton jeu par navigateur
Vues multiples d'un arbre - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Vues multiples d'un arbre (/showthread.php?tid=6615)



Vues multiples d'un arbre - Angelblade - 29-01-2013

Bonjour à tous, j'aurais besoin de votre aide sur un problème:

Sachant que:

- Depuis un objet JSON* je crée une structure d'arbre.
- Je veux créer une vue (dans le DOM) de cette arbre.
- Je souhaite pouvoir représenter plusieurs vues de l'arbre depuis le même objet JSON.

Pour créer une vue j'ai deux choix:

1- Soit je passe le JSON et je crée l'arbre spécifique à cette vue.
2- Soit je passe l'arbre déjà créé depuis le JSON à la vue.

Dans le cas 1 le problème c'est que je recrée un arbre à chaque nouvelle vue.
Dans le cas 2 le problème c'est que je suis obligé de recréer une structure d'arbre simplifiée à partir de l'arbre complet afin de pouvoir agir sur les données originales.

* par objet JSON j'entend objet JavasScript de base genre: {name: 'root', children:[]}


RE: Vues multiples d'un arbre - niahoo - 29-01-2013

Et donc, quel est le problème ?


RE: Vues multiples d'un arbre - Xenos - 29-01-2013

Error : "Vue" is not defined for class "Arbre".
Tips: Please tell us what "Vue" means to you.


RE: Vues multiples d'un arbre - Angelblade - 29-01-2013

Le problème c'est que je ne sais pas quelle solution choisir.

Ce que j’entends par une vue c'est: explorateur de fichier, menu contextuel avec sous menu, toolbar, etc.

Cas pratique:


// explorerELement est une classe dessinant une structure d'arbre en HTML
var root = {name: 'root', children: ['a','b','c']};

// SOLUTION1:
var tree = new Tree(root);
var explorerElement = new ExplorerElement(tree);
var secondExplorer = new ExplorerElement(tree, {mutliSelection:true});
// SOLUTION2:
var explorerElement = new ExplorerElement(root);
var secondExplorer = new ExplorerElement(root, {multiSelection:true});

Inconvénient solution 1: ExplorerElement doit créer une structure d'arbre qui reflète tree pour ne pas l'altérer directement.
Inconvénient solution 2: ExplorerElement doit faire new Tree(root) deux fois au lieu d'une

En l'expliquant il m'apparait plus difficile d'implémenter la 1 mais c'est indispensable si je veux pouvoir agir sur les deux vues lorsque j'en modifie une...

Je crois que j'ai ma réponse nan? ^^


RE: Vues multiples d'un arbre - niahoo - 30-01-2013

Non mais c'est pas clair, je vois pas la différence entre les deux solutions ...

Une vue c'est censé afficher, donc tu peux leur passer le même objet Tree, elles devraient juste lire les données. Et si elles mettent à jour tes données, alors c'est aussi bien que la mise à jour se reflette dans les autres widgets qui les exploitent, non ?

Ici on voit pas ce que Tree() apporte en plus que l'objet root, donc les deux solutions ne sont pas différentes.


RE: Vues multiples d'un arbre - Angelblade - 30-01-2013

Tree sert à manipuler les données et à transformer chaque objet en noeud Treenode.

En fait la différence entre les deux solutions c'est que dans un cas ExplorerElement est une sous classe de Tree, il recoit directement root qu'il faut transformer en Tree.
Alors que dans l'autre il se contente de lier les noeuds de Tree aux éléments qu'il va créer.


RE: Vues multiples d'un arbre - Xenos - 30-01-2013

Si tu transmet directement le root (JSON), alors tu prends le risques que la fonction le modifie.
Si tu passes un Tree, tu peux te mettre en place un système (aka, une conception) qui empêche l'édition de cet arbre lors de l'appel à la fonction.

En d'autres mots, passer par Tree permettra d'émuler le mot-clef "const" utilisé en C par exemple.


RE: Vues multiples d'un arbre - Angelblade - 30-01-2013

En effet je cherche à ne pas modifier Tree.

Comment feriez vous pour propager les modifications sur les vues ?
J'ai un système d'event qui me permet d'écrire:


function ExplorerElement(tree){
tree.on('rename', function(node, name){
this.toNodeView(node).rename(name);
}.bind(this));
}

J'écoute l'event rename sur tree et lorsqu'il se produit je veux le propager à la vue correspondante.
Comment implémenter toNodeView qui doit retrouver la vue correspondant à node?


// idée1: une vue possède une référence vers node, je parcoure tous les noeuds pour retrouver la vue
ExplorerElement.prototype.toNodeView = function(node){
return this.getNode(function(nodeView){
return nodeView.node == node;
});
};

// idée2: chaque vue de node est stocké dans node.views
ExplorerElement.prototype.toNodeView = function(node){
var i = node.views.length;
while(i--){
if( node.views[i].view == this ) return node.views[i];
}
return null;
};

Suis je clair? mes idées sont-elles bonnes? auriez vous d'autres idées?


RE: Vues multiples d'un arbre - Ter Rowan - 30-01-2013

pousse plus loin l'événement :

si tu veux que tree soit modifié, tree écoute rename, si tu ne veux pas, tree n'écoute pas

pour chacune de tes vues, si tu veux qu'elle soit modifiée, ta vue écoute rename, si tu ne veux pas, elle ne l'écoute pas