2015-10-24 15 views
7

リンク上でダブルクリックすることでリンクにラベルを追加したいと思います。jointjs:リンクをクリックして頂点を追加できないようにする

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

問題がダブルクリックをすることによっても同時に作成beeingて頂点があること、である:これは私の試みです。どうすればそれを防ぐことができますか?

また、ユーザーがリンクのラベルを追加できるもう1つの簡単な方法は何ですか?

ドキュメント( http://jointjs.com/api#joint.dia.LinkView:addVertex)に示すように

答えて

12

だけ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

を。対話型:{vertexAdd:false}を使うだけで、これを短くすることもできます(関数はより柔軟です)。また、cellView.model instanceofjoint.dia.Linkの代わりにcellView.model.isLink()を使用することもできます(等価ですがより短い) – dave

+0

@daveしかし、正確な位置とサイズを取得することはできませんラベルの、右か?私はラベルの上に正確にオーバーレイとしてHTML要素を入れたいです – user3142695

+2

これはできます。リンクビューでラベルにアクセスし、Vectorizerライブラリ(JointJSの一部)を使用して、そのBboxを取得することができます:V(paper.findViewByModel(link)。$( '。label')[0])bbox()。リンクが動くたびにHTMLの位置を調整する必要があります。これはアプリケーションに依存しますが、グラフの変更をすべて聞くのが最も簡単です:graph.on( 'change'、function(){/ * HTMLラベルを配置する* /}) – dave

関連する問題