Question: Use arrow keys to move blocks in canvas configured in absolute positioning mode

[wfcheng]

Hi, I am building a solution for students to tell their high school experiences as slides built from grapejs editor (similar to canva), and have configured the editor in 'absolute' mode, which works wonderfully. However I can't seem to find a way to move the dropped block in the editor with the arrow keys. I am aware that custom keymap binding and will look into adding that functionality, but just want to see if I have missed something, and if there are other better options.

[artf]

No, unfortunately, for such a case, the custom keymap would be the only solution. You should just get the selected component and update its style.

[michaelhofer]

I have found a working solution for this as follows:

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?

[sathudeva7]

keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', { // Prevent the default browser action prevent: true, });