I'm working on a group formed with rects and transformers, now there's a need to move it in ways other than the mouse. Using containers I can move it using the arrow keys but with the group the Keydown function does not work, I already tried using group.on without success.
I would like that when clicking the arrows would start to work in the group moving it.
You can't listen to keyboard event on canvas nodes (such as Group or Shape) with Konva. But you can easily emulate it.
You can make Stage node focusable and listen to keyboard events on it. Then do required action in an event handler.
var container = stage.container();
// make it focusable
container.tabIndex = 1;
// focus it
// also stage will be in focus on its click
container.focus();
const DELTA = 4;
container.addEventListener('keydown', function (e) {
if (e.keyCode === 37) {
circle.x(circle.x() - DELTA);
} else if (e.keyCode === 38) {
circle.y(circle.y() - DELTA);
} else if (e.keyCode === 39) {
circle.x(circle.x() + DELTA);
} else if (e.keyCode === 40) {
circle.y(circle.y() + DELTA);
} else {
return;
}
e.preventDefault();
layer.batchDraw();
});