Cytoscape.js: Klassen abrufen und gefilterte Knoten zurückgeben. (Getter nicht existent?)

Question

Diese Frage ergibt sich aus folgendem Zusammenhang:

Man hat einen Filter mit verschiedenen Attributen wie demo-ed here.

Für das minimale Arbeitsbeispiel werden wir berücksichtigen, dass alle Kontrollkästchen eine der Klassen des Knotens darstellen, z.

Das Ziel ist es, Knoten aus dieses Filters basiert entfernen/hinzufügen. Einige Knoten können zu mehreren Klassen gehören. Ich kann das mit hide/show arbeiten lassen. Dieser Code befindet sich am Ende dieses Posts.

In diesem Code habe ich den Filter implementieren, wenn die Maus das Dropdown-Menü verlässt. Wahrscheinlich nicht ideal, aber ausreichend. Ich habe ein Objekt allNodeClasses, das die Klassen als Eigenschaften enthält und ob sie über den Filter als Booleans angezeigt werden sollen, z.

allNodeClasses = { 
class1: true 
class2: true, 
etc 
} 

Der folgende Code kann in zwei Hauptphasen, Set-up und dem Filter aufgebrochen wird (vor und nach cy.batch... respectively). Zuerst aktualisiere ich das boolesche Objekt, ob seine jeweilige Schaltfläche überprüft wurde oder nicht. Dann durchlaufe ich für jeden Knoten jede Klasse und sehe, ob sie eine Klasse hat, die auf falsch gesetzt ist. Wenn dies der Fall ist, ist der Knoten ausgeblendet. Wenn alle Klassen dieses Knotens wahr sind, wird er angezeigt (wodurch alle vorherigen verdeckten Knoten wiederhergestellt werden).

Ersetzen mit ausblenden und Hinzufügen/Wiederherstellen mit Show funktioniert nicht (gut entfernen funktioniert ...). Nämlich - glaube ich - dass bestimmte Funktionen auf entfernten Knoten nicht funktionieren.

So habe ich die folgenden paar Fragen:

FRAGEN

1.) Wie kann ich diese Arbeit mit Abschminken und Add/wiederherstellen?

2.) Gibt es einen 'Getter' für Knoten-Klassen? weil so scheint .classes nur als Setter zu funktionieren, und .class funktioniert auch nicht.

3.) Was ist Toggle-Klasse ..., weil ich denke, es würde hier funktionieren, aber es gibt nicht wirklich nützliche Beispiele auf der Website-Demonstration, wie könnte das tun.

HINWEIS zu Frage 1: Die ideale Lösung für Frage 1 beinhaltet nicht die Erstellung und Pflege eines removedElements-Arrays.

HINWEIS: die ideale Lösung - in meinem Kopf - hätte folgenden sudo Code

for elem in cyGraph     \\ for every item in the graph 
    var keepQ = true     \\ assume default 
    for class in elem.classes  \\ for every class that 
            \\ element belongs to 
     if allClasses[class] == false\\ if that class is false 
      keepQ = false   \\ we are not to keep it 
      break     \\ no need to keep searching 
    if elem.removedQ && keepQ  \\ restore only removed elements 
            \\ that we should now keep 
     elem.restore 
    if !keepQ      \\ remove filtered out elements 
     elem.remove 

CODE

$('#filter-wrapper').on('mouseleave',function(){ 

     var opts =[]; 
     for (var className in allNodeClasses) {opts.push(className)}; 

     var numOpts = opts.length; 

     for (var i = 0; i < numOpts; i++) { 
     allNodeClasses[opts[i]] = document.getElementById('filter-checkbox-'+opts[i]).checked 
     }; 


     cy.batch(function(){ 




      cy.nodes().forEach(function(node){ 
      var keepQ = true; 
      for (var i = 0; i < numOpts; i++) { 
       if (node.hasClass(opts[i]) && !allNodeClasses[opts[i]]) { 
       keepQ = false; 
       }; 
      }; 

      if (!keepQ) { 
       node.hide(); 
      } else { 
       node.show(); 
      } 
      }); 



     }); 

Answer 1

einfach die Elemente entfernen, die nicht markiert Klassen entsprechen.

z. Wenn foo und bar deaktiviert sind, dann cy.$('.foo, .bar').remove().