JointJS - GitHub Discussion

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

by Roman Bruckner

HTML

<script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/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+1}px`;
  e.style.top = `${evt.pageY+1}px`;
  if (e.style.display=="")
   e.style.display="none";
  else
   e.style.display="";
});