Context menu with Konva.js

Question

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.

score 4 · Accepted Answer · answered Jun 14 '18 at 13:07

4

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

answered Jun 14 '18 at 13:07

Hi @Skypho. Any possibility of you adding an example to what you did to your answer? – Ebbs Nov 28 '18 at 16:08
@Ebbs https://github.com/shakhbulatgaz/dota2-canvas/blob/master/src/scripts/scripts.js Check out the line 121. There has to be better way, but i gave up back then – Nov 29 '18 at 15:51
Thanks, that's interesting! I also started working on my own version yesterday. Some of it looks very familiar to what you did. It is far from done and I still need some help getting there. I made an SO post about it: https://stackoverflow.com/questions/53541783/how-to-create-a-konva-react-context-menu. It has a Sandbox in it if you want to play around. – Ebbs Nov 29 '18 at 16:01

Context menu with Konva.js

1 Answers1