Custom Keymap: Prevent Default in Absolute Drag Mode

[michaelhofer]

Hi,

We would like to move the components in absolute drag mode using the arrow keys. We do this as follows:

Custom Keymap:

grapesjs.init({
    keymaps:  {
       defaults: {
         "ns:up" : { keys: 'up, shift+up', handler: 'moveUp' },
         "ns:down" : { keys: 'down, shift+down', handler: 'moveDown' },
         "ns:left" : { keys: 'left, shift+left', handler: 'moveLeft' },
         "ns:right" : { keys: 'right, shift+right', handler: 'moveRight' }
        }
     },

The commands are being added as follows:

editor.Commands.add("moveUp", { run: function(editor) { moveSelectedElement(editor, -5, "top"); }});
editor.Commands.add("moveDown", { run: function(editor) { moveSelectedElement(editor, 5, "top")}});
editor.Commands.add("moveLeft", { run: function(editor) { moveSelectedElement(editor, -5, "left")}});
editor.Commands.add("moveRight", { run: function(editor) { moveSelectedElement(editor, 5, "left")}});

The moveSelectedElements method just does the following:

function moveSelectedElement(editor, pixel, property) {
    var model    = editor.getSelected();
    var style    = model.getStyle();
    var position = style[property].replace('px','').replace(' ', ''); 
    
    // Round to nearest multiple of 5 to align to grid
    var newPosition = Math.ceil((Number(position)+Number(pixel))/5)*5
    style[property] =  newPosition + "px";
    
    model.setStyle(style);
    editor.trigger('component:toggled');
}

However, when moving the elements with arrow keys, the canvas scrolls as well, which is the default bowser behaviour.

How can we prevent the default propagation with the keymaps (e.preventDefault())? Should this be happening automatically, or is there a way to configure that?