Wie alle Elemente relativ zu einer Zelle im Diagramm hervorgehoben werden, wenn jointjs verwendet wird

Question

Ich implementiere eine Aufgabe relativ zum Zeichnen des Diagramms. Es erfordert, dass wenn der Benutzer auf einer Zelle des Diagramms schwebt, es alle vorherigen und nachfolgenden dieser Zelle und Links hervorhebt. Ich habe herausgefunden, wie man ein Element hervorhebt, indem man darauf klickt. Und ich bin mir nicht sicher, ob ich Links markieren kann. Ist es möglich zu tun?

Answer 1

Ich habe es auf diese Weise gelöst:

this.listenTo(this.options.paper, 'cell:mouseover', function (cellView) { 
     const links = this.options.paper.model.getConnectedLinks(cellView.model, {deep: true}); 
     const neighbours = this.options.paper.model.getNeighbors(cellView.model); 

     cellView.highlight(); 

     neighbours.forEach((element) => { 
     const viewElement = this.options.paper.findViewByModel(element); 
     viewElement.highlight(); 
     }); 

     links.forEach((link) => { 
     const viewLink = this.options.paper.findViewByModel(link); 
     viewLink.highlight(); 
     }); 
    }); 

Answer 2

Verbindungen und Elementen aus der Zelle erben. Zellen sind Backbone-Modelle mit assoziierten cellViews. CellView ist eine Backbone-Ansicht, in der sich die Highlight-Methode befindet. LinkView ist die spezifische Ansicht für Links, die von CellView erbt. CellViews Standard-Highlight-Methode funktioniert gut für rechteckige Zellen, aber für Links ist es nicht so gut wie die Highlight ist ein rechtwinkliges Rechteck Bounding Box um den gesamten Link.

Die Hervorhebungsmethode verwendet zwei Parameter, von denen der zweite den Typ der Hervorhebung angeben kann. Dies ist dokumentiert here. Einer der zulässigen "Typen" ist, wo Sie eine CSS-Klasse angeben können. Sie können eine Klasse definieren und hier angeben.

Wenn das nicht genug ist, wäre eine weitere Option LinkView zu erweitern und Ihre eigenen "Highlight" -Methoden zu implementieren. Stellen Sie diese neue linkView dann dem Papierkonstruktor als Vorlage zur Verfügung.