2015-10-24 10 views
7

Vorrei aggiungere un'etichetta a un collegamento facendo un doppio clic sul collegamento. Quindi questo è il mio tentativo:jointjs: impedire l'aggiunta di vertici facendo clic sul collegamento

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' } 
       } 
      }); 
     } 
    }, 
}); 

Il problema è, che facendo un doppio c'è anche un vertice beeing creato allo stesso tempo. Come posso impedirlo?

Oppure quale sarebbe un altro modo semplice per consentire agli utenti di aggiungere un'etichetta per un collegamento?

risposta

12

Come illustrato nella documentazione (http://jointjs.com/api#joint.dia.LinkView:addVertex) basta aggiungere questa parte 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

Questo è corretto. Puoi anche accorciarlo usando solo un oggetto (la funzione è più flessibile): interattiva: {vertexAdd: false}. Inoltre, una nota a margine, invece di cellView.model instanceof joint.dia.Link, è possibile utilizzare cellView.model.isLink() (che è equivalente ma più breve) – dave

+0

@dave Ma non è possibile ottenere la posizione esatta e la dimensione dell'etichetta, giusto? Vorrei mettere un elemento HTML come una sovrapposizione esattamente sopra l'etichetta – user3142695

+2

Ciò può essere fatto. È possibile accedere all'etichetta tramite la vista del collegamento e ottenere la sua bbox utilizzando la libreria Vectorizer (parte di JointJS): V (paper.findViewByModel (collegamento). $ ('. Label') [0]). Bbox(). Ora devi regolare il posizionamento del tuo codice HTML ogni volta che il link si sposta. Questo dipende dall'applicazione, ma il più semplice sarebbe ascoltare tutte le modifiche del grafico: graph.on ('change', function() {/ * position HTML labels * /}) – dave

Problemi correlati