Konva – Group is not draggable from a click on its empty space – what gives?

So there you are with a shiny new group – with a couple of shapes added to it. Click-dragging either shape will move the Group, but click-dragging the empty space doesn’t – what gives ?

So – by design, the Group does not have a hitFunc. What? Ok – so when the Konva engine is checking for hits on a shape, it uses the shapes hitFunc to draw the shape (filled in a random color) in an off-screen canvas and does a pixel color check at the click position to know if there was a hit.

Normally you don’t get into hitFunc’s as the shapes do this for you under the covers. Also, if you read about sceneFuncs you will find that the sceneFunc is what the Konva engine requires to draw what we see as a shape – and Konva will use the sceneFunc to draw this hit-checking shape if we don’t supply a hitFunc (which we mostly don’t).

So when would you use a hitFunc I hear you say – when you need to change the default shape used to detect hits, like maybe when you want the users to have a better chance of hitting your shape.

Anyhow, Groups don’t have a hitFunc property, or a sceneFunc. so in other words, they have no detectable shape that can be used to detect a hit via the hit-canvas approach.

What is the workaround ?

You’ll need to add a transparent rect to the group. Use getClientRect to get the rectangle position and size that would tightly cover the group, and make the rect that size and position, and draggable=false. Then move it to the bottom of the stack with shape.moveToBottom(). Now you can click-drag on the empty space inside the group.

Summary

We’ve explained why you can’t drag a Group by its empty space, and we’ve seen the simple solution of adding a transparent rect. If you want some more detail about the spooky properties of the Konva.Group then see my other blog post Konva – the Group, useful but spooky

And just in case you were wondering, the other two containers, Stage & Layer, are both draggable via their empty space. The Group is the only shape that exhibits this behavior.

Thanks for reading.

VW. March 2023