cytoscape.jsノードのカスタムコンテキストメニューを使用

Question

私はthis context menu javascript libraryを使用しようとしていますが、ノードが右クリックされたときにトリガすることはできません。

私は基本的なデモを実装しようとしましたが、それは動作するので、私はページに必要なjsを持っています。

は、私は、ノードの左クリックにこれを追加しましたので、同様custom方法によって、コンテキストメニューをトリガすることを試みた：

graph.$('node').on('cxttapstart', function (event) { 

      event.cyTarget.contextMenu(); 
     }); 

$.contextMenu({ 
     selector: '.context-menu-one', 
     trigger: 'none', 
     callback: function (key, options) { 
      var m = "clicked: " + key; 
      window.console && console.log(m) || alert(m); 
     }, 
     items: { 
      "edit": { name: "Edit", icon: "edit" }, 
      "cut": { name: "Cut", icon: "cut" }, 
      "copy": { name: "Copy", icon: "copy" }, 
      "paste": { name: "Paste", icon: "paste" }, 
      "delete": { name: "Delete", icon: "delete" }, 
      "sep1": "---------", 
      "quit": { name: "Quit", icon: function ($element, key, item) { return 'context-menu-icon context-menu-icon-quit'; } } 
     } 
    }); 

が、私はちょうどライン上で何をするか分からない

selector: '.context-menu-one' 

のように表示され、コンテキストメニューがノードの横に表示されます。

これまでに誰でもこれを行ったことはありますか？

乾杯

Answer 1

event.cyTarget（2.xの）またはevent.target（3.xの）は、DOM要素ではありません。サイトスコープ要素です。メニューの独自のDOM要素（divなど）を作成し、node.renderedPosition()に相対的に配置する必要があります。cxttapです。

サイトスコープでコンテキストメニューを使用する場合は、既存の拡張機能を使用する方が簡単です。 https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus

： https://github.com/cytoscape/cytoscape.js-cxtmenu

も、伝統的なリストメニューだ1あります：

現代円形スワイプメニューがあり1あります