Search code examples
javascriptcanvaskonvajs

Context menu with Konva.js

I have a map with multiple objects, like players, towers, enemies etc..

They are added to the map with this function: 

const createCustomObject = (sides, radius, color, x, y) => {
  let customObject = new Konva.RegularPolygon({
    fill: color,
    x: x,
    y: y,
    sides: sides,
    radius: radius,
    id: returnID()
  });
  customObject.on("click", e => console.log(e.target.id()));
  addLayer(objectLayer, customObject);
};

Now i need to change it so that when user clicks on any customObject, context menu should appear with clickable options like "Delete", "Show ID" etc..

How exactly can i do that? I was thinking about creating a Konva.Rect() onclick and filling with clickable Konva.Text() objects, but maybe i'm missing some other way? My one seems to be quite ugly.

Solution

  • So that's what i did. I made a rectange, and placed Konva.Text's above it. Then just made onclick function for all Konva.Text elements