Pregunta: Usa las flechas para mover bloques en el lienzo configurado en modo de posicionamiento absoluto

No, desafortunadamente, en ese caso, el keymap personalizado sería la única solución. Deberías simplemente conseguir el componente seleccionado y actualizar su estilo.

He encontrado una solución funcional para esto de la siguiente manera:

grapesjs.init({
    keymaps: {
       Predeterminados: {
         "ns:up" : { teclas: 'arriba, shift+up', manejador: 'moveUp' },
         "ns:down" : { teclas: 'abajo, shift+down', manejador: 'moveDown' },
         "ns:left" : { teclas: 'izquierda, shift+izquierda', manejador: 'moveLeft' },
         "ns:right" : { teclas: 'right, shift+right', handler: 'moveRight' }
        }
     },
...

Los comandos se están añadiendo de la siguiente manera:

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")}});

El método 'moveSelectedElements' hace lo siguiente:

función moveSelectedElement(editor, pixel, property) {
        var model = editor.getSelected();
        var style = model.getStyle();
        var position = style[property].replace('px','').replace(' ', ''); 
        
Redondea al múltiplo más cercano de 5 para alinearse con la cuadrícula
        var newPosition = Math.ceil((Number(position)+Number(pixel))/5)*5
        style[property] = newPosition + "px";
        
model.setStyle(style);
        editor.trigger('component:toggled');
    }

Sin embargo, al mover los elementos con las flechas, el lienzo también se desplaza, que es el comportamiento predeterminado de los bowser.

¿Cómo podemos evitar la propagación por defecto con los keymaps ('e.preventDefault()')? ¿Debería ocurrir esto automáticamente o hay alguna forma de configurarlo?

keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', { Evitar la acción predeterminada del navegador prevente: cierto, });

Gracias por informar de esto, @wfcheng.

Buena pregunta sobre Pregunta: Usa las flechas para mover bloques en el lienzo configurado en modo de posicionamiento absoluto. El enfoque recomendado con GrapesJS es usar la API orientada a eventos.

Empieza aquí:

1. Consulta la documentación de GrapesJS de tu módulo específico
2. Busca el método del oyente de eventos 'on()'
3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));

**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!