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)
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.
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?
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.
Issue #3115
BUG: component droped position is wrong when I changed canvas size under Absolute/Designer mode
WARNING I changed the canvas size and I drop a compent from blocks panel. The result is compent postion is wrong. By the way, the editor is...
Issue #2008
[Question]The canvas turns dark and unmodifiable on adding a large piece of custom html.
I used to add custom html with editor.addComponent(). It works well at most of the time, but when I try to insert a large piece of HTML whi...
Issue #1337
[Question] Loading from package in TypeScript giving undefined error.
Similar to issue #902 but I can't seem to resolve with the steps taken in that discussion. I'm using the latest version of Angular, Webpack...
Issue #2577
[QUESTION] How do I block the insertion of a block inside another block?
Please tell me how do I prevent inserting a block inside another block? I use the editor to create the internal structure of an article for...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.