2015-10-24 4 views
7

Ich möchte ein Label zu einem Link hinzufügen, indem Sie einen Doppelklick auf den Link. Das ist also mein Versuch:jointjs: verhindern Hinzufügen von Vertex durch Klicken auf den Link

paper.on({ 
    'cell:pointerdblclick': function(cellView, event, x, y){ 
     if (cellView.model.isLink()) { 
      cellView.model.label(0, { 
       position: .5, 
       attrs: { 
        rect: { fill: 'white' }, 
        text: { text: 'my label' } 
       } 
      }); 
     } 
    }, 
}); 

Das Problem ist, dass ein Doppelklick dort tun, ist auch ein Scheitelpunkt zugleich geschaffen beeing. Wie kann ich das verhindern?

Oder was wäre eine andere einfache Möglichkeit, Benutzer ein Label für einen Link hinzufügen lassen?

Antwort

12

Wie in der Dokumentation gezeigt (http://jointjs.com/api#joint.dia.LinkView:addVertex) fügen Sie einfach diesen Teil zu joint.dia.Paper:

interactive: function(cellView) { 
     if (cellView.model instanceof joint.dia.Link) { 
      // Disable the default vertex add functionality on pointerdown. 
      return { vertexAdd: false }; 
     } 
     return true; 
    } 
+1

Das ist richtig. Sie können dies auch kürzer machen, indem Sie nur ein Objekt verwenden (die Funktion ist jedoch flexibler): interactive: {vertexAdd: false}. Auch eine Seitennotiz, anstelle von cellView.model instanceof joint.dia.Link, können Sie cellView.model.isLink() verwenden (was äquivalent aber kürzer ist) – dave

+0

@dave Aber es ist nicht möglich, die genaue Position und Größe zu erhalten vom Label, oder? Ich möchte ein HTML-Element als Overlay genau über das Label setzen – user3142695

+2

Das kann gemacht werden. Sie können über die Verknüpfungsansicht auf das Label zugreifen und seine bbox mithilfe der Vectorizer-Bibliothek (Teil von JointJS) abrufen: V (paper.findViewByModel (link). $ ('. Label') [0]). Bbox(). Jetzt müssen Sie die Positionierung Ihres HTML anpassen, wenn sich der Link bewegt. Dies hängt von der Anwendung ab, aber am einfachsten wäre es, alle Diagrammänderungen zu überwachen: graph.on ('change', function() {/ * position HTML-Etiketten * /}) – dave