JointJS - GitHub Discussion

prevent contextmenu. https://github.com/clientIO/joint/issues/2658

by Roman Bruckner

HTML

<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.5/joint.min.js" />
</head>

      <!-- dependencies -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.5/joint.min.js"></script>
    

<div id="paper" style="background-color: #0EE;"></div>
<div id='popup' style="background-color: #F00; position: absolute; width:100px; height: 100px; top:0px; right: 150px; display:none;">Hello!<div>

JavaScript

const {
  dia,
  shapes: defaultShapes,
} = joint;

const shapes = {
  ...defaultShapes,
};

const graph = new dia.Graph({}, {
  cellNamespace: shapes
});

const paper = new dia.Paper({
  el: document.getElementById('paper'),
  width: 800,
  height: 900,
  model: graph,
  cellViewNamespace: shapes,
  async: true,
//  preventContextMenu: true
});


const el1 = new shapes.standard.Rectangle({
  size: {
    width: 100,
    height: 100
  },
  attrs: {
    label: {
      text: 'Element'
    }
  }
});

graph.addCells([el1]);

paper.on('element:contextmenu', function(elementView, evt, x, y) {
  evt.stopPropagation();
  evt.preventDefault();
  let e = document.getElementById('popup');
  e.style.left=evt.pageX+"px";
  e.style.top=evt.pageY+"px";
  if (e.style.display=="")
   e.style.display="none";
  else
   e.style.display="";
});