Issue #3337Opened March 12, 2021by wfcheng0 reactions

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

Question

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.

Answers (3)

artfMarch 21, 20210 reactions

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.

michaelhoferJune 30, 20210 reactions

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?

sathudeva7August 15, 20240 reactions

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.