Lib sigma.gs : comment associer un événement "click" à un noeud?

Lib sigma.gs : comment associer un événement "click" à un noeud? - HTML/CSS - Programmation

Marsh Posté le 07-03-2013 à 11:54:03    

Bonjour,
 
Depuis 2-3 jours, je développe un script utilisant la lib Sigma.js ( http://sigmajs.org/ ), ça marche plutôt bien mais alors, impossible de trouver comment associer à un noeud du graphe une fonction appelée sur l'événement "click" (en gros, je voudrais pourvoir cliquer sur un noeud et que ça fasse qq chose). J'ai cherché partout, y compris sur le wiki du projet (qui n'a pas l'air franchement à jour, la doc ne semble pas être le dada de l'auteur :/ ), rien trouvé.
 
En plus, j'arrive même pas à comprendre comment les noeuds sont tracés dans la <div>, ça ne semble pas être des éléments du DOM :/ (j'ai esayé de faire un addEventListener() sur un node, ça marche pas...
 
Help, please :jap:


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 07-03-2013 à 11:54:03   

Reply

Marsh Posté le 07-03-2013 à 12:14:07    

Je n'ai pas trouvé comment faire un click directement , donc j'ai fait un truc sale :

Code :
  1. graph.bind('overnodes',
  2. //je maintiens une liste des noeuds sous mon curseur de souris
  3.            function (event) {
  4.                var nodes = event.content;
  5.                if (nodes.length)
  6.                     //ajouter les noeuds dans ma liste ;
  7.            }).bind('outnodes', function (event) {
  8.                   //enlever les noeuds de la liste
  9.            });


ensuite en cas de click sur le conteneur, je sasi que j'ai cliqué sue les noeuds qui sont encore dans ma liste de overnode (attention, il peut y en avoir plusieurs)
Sinon, il faut reprendre le code de la fonction checkHover a chaque click pour déterminer quels sont les noeuds sous la position du clik de la souris

 

C'est dessiné avec du canvas (plusieurs canvas les un au dessus des autres ). Pour avoir des évènement 'click' sur chaque élément il faudrait faire du dessin vectoriel (svg/vml) au lieu du raster(canvas) , mais les perfs s'effondre dès qu'il y a trop de monde sur le graphe


Message édité par flo850 le 07-03-2013 à 12:17:12

---------------

Reply

Marsh Posté le 07-03-2013 à 16:37:47    

Bon, j'ai fini par trouver :

Code :
  1. var sigRoot = document.getElementById("MaDIV" );
  2. var sigInst = sigma.init(sigRoot);
  3. sigRoot.addEventListener('click', function (event) {
  4.    var mousePos = sigInst.getMouse();
  5.    sigInst.iterNodes(function (node) {
  6.        var dX, dY, s, newH;
  7.        dX = Math.abs(node['displayX'] - mousePos.mouseX);
  8.        dY = Math.abs(node['displayY'] - mousePos.mouseY);
  9.        s = node['displaySize'];
  10.        // Detect if the mouse is over the node
  11.        newH = dX < s && dY < s && Math.sqrt(dX * dX + dY * dY) < s;
  12.        if (newH) {
  13.            // Do here what I want on Click...
  14.        }                
  15.    });
  16. }, true);


 
Je me suis inspiré du code de la fonction checkHover() justement ;) Ca marche bien.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed