Move elements with the keyboard arrow keys

code/CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - [#678](https://github.com/InditexTech/weavejs/issues/678) Allow to change Frame background on the fly
+- [#680](https://github.com/InditexTech/weavejs/issues/680) Move elements with the keyboard arrow keys
 
 ### Fixed
 

code/packages/sdk/src/index.ts

@@ -148,3 +148,5 @@ export * from './plugins/nodes-distance-snapping/types';
 export { WeaveCommentsRendererPlugin } from './plugins/comments-renderer/comments-renderer';
 export * from './plugins/comments-renderer/constants';
 export * from './plugins/comments-renderer/types';
+export { WeaveStageKeyboardMovePlugin } from './plugins/stage-keyboard-move/stage-keyboard-move';
+export * from './plugins/stage-keyboard-move/constants';

code/packages/sdk/src/plugins/stage-keyboard-move/constants.ts

@@ -0,0 +1,9 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export const WEAVE_STAGE_KEYBOARD_MOVE_KEY = 'stageKeyboardMove';
+
+export const WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG = {
+  movementDelta: 5,
+};

code/packages/sdk/src/plugins/stage-keyboard-move/stage-keyboard-move.ts

@@ -0,0 +1,98 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+import { WeavePlugin } from '@/plugins/plugin';
+import merge from 'lodash/merge';
+import {
+  WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG,
+  WEAVE_STAGE_KEYBOARD_MOVE_KEY,
+} from './constants';
+import type { WeaveNodesSelectionPlugin } from '../nodes-selection/nodes-selection';
+import type {
+  WeaveMoveOrientation,
+  WeaveStageKeyboardMovePluginConfig,
+  WeaveStageKeyboardMovePluginParams,
+} from './types';
+import type { WeaveNode } from '@/nodes/node';
+
+export class WeaveStageKeyboardMovePlugin extends WeavePlugin {
+  private config!: WeaveStageKeyboardMovePluginConfig;
+  getLayerName = undefined;
+  initLayer = undefined;
+  onRender: undefined;
+
+  constructor(params?: WeaveStageKeyboardMovePluginParams) {
+    super();
+
+    this.config = merge(
+      WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG,
+      params?.config ?? {}
+    );
+  }
+
+  getName(): string {
+    return WEAVE_STAGE_KEYBOARD_MOVE_KEY;
+  }
+
+  handleNodesMovement(movementOrientation: WeaveMoveOrientation) {
+    const nodesSelectionPlugin =
+      this.instance.getPlugin<WeaveNodesSelectionPlugin>('nodesSelection');
+
+    if (nodesSelectionPlugin) {
+      const selectedNodes = nodesSelectionPlugin.getSelectedNodes();
+
+      for (const node of selectedNodes) {
+        switch (movementOrientation) {
+          case 'up':
+            node.y(node.y() - this.config.movementDelta);
+            break;
+          case 'down':
+            node.y(node.y() + this.config.movementDelta);
+            break;
+          case 'left':
+            node.x(node.x() - this.config.movementDelta);
+            break;
+          case 'right':
+            node.x(node.x() + this.config.movementDelta);
+            break;
+        }
+
+        const nodeHandler = this.instance.getNodeHandler<WeaveNode>(
+          node.getAttrs().nodeType
+        );
+
+        if (!nodeHandler) {
+          break;
+        }
+
+        this.instance.updateNode(nodeHandler.serialize(node));
+      }
+    }
+  }
+
+  onInit(): void {
+    window.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowUp' && e.shiftKey) {
+        this.handleNodesMovement('up');
+      }
+      if (e.key === 'ArrowLeft' && e.shiftKey) {
+        this.handleNodesMovement('left');
+      }
+      if (e.key === 'ArrowRight' && e.shiftKey) {
+        this.handleNodesMovement('right');
+      }
+      if (e.key === 'ArrowDown' && e.shiftKey) {
+        this.handleNodesMovement('down');
+      }
+    });
+  }
+
+  enable(): void {
+    this.enabled = true;
+  }
+
+  disable(): void {
+    this.enabled = false;
+  }
+}

code/packages/sdk/src/plugins/stage-keyboard-move/types.ts

@@ -0,0 +1,13 @@
+// SPDX-FileCopyrightText: 2025 2025 INDUSTRIA DE DISEÑO TEXTIL S.A. (INDITEX S.A.)
+//
+// SPDX-License-Identifier: Apache-2.0
+
+export type WeaveMoveOrientation = 'up' | 'down' | 'left' | 'right';
+
+export type WeaveStageKeyboardMovePluginConfig = {
+  movementDelta: number;
+};
+
+export type WeaveStageKeyboardMovePluginParams = {
+  config?: WeaveStageKeyboardMovePluginConfig;
+};

code/packages/sdk/src/plugins/stage-minimap/stage-minimap.ts

@@ -12,7 +12,7 @@ import type {
   WeaveStageMinimapPluginConfig,
   WeaveStageMinimapPluginParams,
 } from './types';
-import { merge } from 'lodash';
+import { merge, throttle } from 'lodash';
 
 export class WeaveStageMinimapPlugin extends WeavePlugin {
   getLayerName = undefined;
@@ -111,7 +111,7 @@ export class WeaveStageMinimapPlugin extends WeavePlugin {
 
     this.hideLayers();
 
-    const pixelRatio = 0.5;
+    const pixelRatio = 0.1;
     const dataUrl = await stage.toDataURL({
       x: box.x,
       y: box.y,
@@ -213,10 +213,12 @@ export class WeaveStageMinimapPlugin extends WeavePlugin {
   }
 
   onInit(): void {
-    this.instance.addEventListener('onStateChange', async () => {
+    const throttledUpdateMinimap = throttle(async () => {
       await this.updateMinimapContent();
       this.updateMinimapViewportReference();
-    });
+    }, 100);
+
+    this.instance.addEventListener('onStateChange', throttledUpdateMinimap);
   }
 
   private showLayers() {

code/packages/sdk/src/reconciler/reconciler.ts

@@ -241,7 +241,7 @@ export class WeaveReconciler {
             });
           }
 
-          weaveInstance.getMainLayer()?.batchDraw();
+          // weaveInstance.getMainLayer()?.batchDraw();
         }
       },
       appendChild(

docs/content/docs/main/build/plugins/index.mdx

@@ -152,6 +152,12 @@ elements more precisely.
 
 </Card>
 
+<Card href="/docs/main/build/plugins/stage-keyboard-move" title='Stage Keyboard Move'>
+
+Enables to move selected nodes by a delta when pressing shift + keyboard arrows.
+
+</Card>
+
 <Card href="/docs/main/build/plugins/stage-panning" title='Stage Panning'>
 
 Enables users to navigate the canvas by dragging to move around the Stage.

docs/content/docs/main/build/plugins/meta.json

@@ -9,10 +9,12 @@
     "nodes-snapping",
     "stage-drop-area",
     "stage-grid",
+    "stage-keyboard-move",
     "stage-panning",
     "stage-resize",
     "stage-zoom",
     "stage-minimap",
+    "stage-keyboard",
     "users-pointers",
     "users-selector"
   ]

docs/content/docs/main/build/plugins/stage-keyboard-move.mdx

@@ -0,0 +1,55 @@
+---
+title: Stage Keyboard Move
+description: Activates moving elements with shift + keyboard arrows
+---
+
+## Introduction
+
+This plugin automatically allows to move the selected nodes by a defined delta (by default 5)
+when pressing shift + keyboard arrows (up, down, left or right). The selected nodes WeaveEllipseToolAction
+move by the define delta each time a shift + keyboard arrow key is pressed.
+
+## Usage
+
+<div className="fd-steps">
+
+<div className="[&_h3]:fd-step">
+
+### Import the Plugin
+
+Start by importing the plugin:
+
+```ts
+import { WeaveStageKeyboardMovePlugin } from "@inditextech/weave-sdk";
+```
+
+</div>
+
+<div className='[&_h3]:fd-step'>
+
+### Register the Plugin
+
+Then register the plugin on the [Weave](/docs/sdk/api-reference/weave) class instance.
+
+```ts
+const instance = new Weave({
+  ...
+  plugins: [
+    ...,
+    new WeaveStageKeyboardMovePlugin(), // [!code ++]
+  ]
+})
+```
+
+</div>
+
+<div className='[&_h3]:fd-step'>
+
+### Use the plugin
+
+Once the plugin is registered, select the nodes you want and use shift + keyboard arrows to move
+then by the defined delta (by default 5).
+
+</div>
+
+</div>

docs/content/docs/main/changelog/prerelease/0.72.0.mdx

@@ -1,6 +1,6 @@
 ---
 title: v0.72.0
-description: Support to change Frame background, fix nodes stroke scaling issues
+description: New plugin to move elements with shift + keyboard arrows, support to change Frame background, fix nodes stroke scaling issues
 ---
 
 ## Metadata
@@ -10,6 +10,7 @@ description: Support to change Frame background, fix nodes stroke scaling issues
 ### Added
 
 - [#678](https://github.com/InditexTech/weavejs/issues/678) Allow to change Frame background on the fly
+- [#680](https://github.com/InditexTech/weavejs/issues/680) Move elements with the keyboard arrow keys
 
 ### Fixed
 

docs/content/docs/sdk/api-reference/plugins/index.mdx

@@ -125,6 +125,12 @@ elements more precisely.
 
 </Card>
 
+<Card href="/docs/sdk/api-reference/plugins/stage-keyboard-move" title='WeaveStageKeyboardMovePlugin'>
+
+Enables to move selected nodes by a delta when pressing shift + keyboard arrows.
+
+</Card>
+
 <Card href="/docs/sdk/api-reference/plugins/stage-panning" title='WeaveStagePanningPlugin'>
 
 Enables users to navigate the canvas by dragging to move around the Stage.

docs/content/docs/sdk/api-reference/plugins/meta.json

@@ -11,6 +11,7 @@
     "nodes-distance-snapping",
     "stage-drop-area",
     "stage-grid",
+    "stage-keyboard-move",
     "stage-minimap",
     "stage-panning",
     "stage-resize",

docs/content/docs/sdk/api-reference/plugins/stage-keyboard-move.mdx

@@ -0,0 +1,68 @@
+---
+title: WeaveStageKeyboardMovePlugin
+description: Activates the movement by a delta of stage nodes using shift + keyboard arrow keys
+---
+
+import { TypeTable } from "fumadocs-ui/components/type-table";
+
+## Overview
+
+The [WeaveStageKeyboardMovePlugin](https://github.com/InditexTech/weavejs/blob/main/code/packages/sdk/src/plugins/stage-keyboard-move/stage-keyboard-move.ts)
+class that enables the movement of nodes by a delta (by default 5) when pressing shift + keyboard arrow keys.
+
+The class extends the [WeavePlugin](/docs/sdk/api-reference/plugins/plugin) class
+
+## Name
+
+This plugin `name` property value is `stageKeyboardMove`.
+
+## Import
+
+```shell
+import { WeaveStageKeyboardMovePlugin } from "@inditextech/weave-sdk";
+```
+
+## Instantiation
+
+```ts
+new WeaveStageKeyboardMovePlugin(params?: WeaveStageKeyboardMovePluginParams);
+```
+
+## TypeScript types
+
+```ts
+type WeaveMoveOrientation = "up" | "down" | "left" | "right";
+
+type WeaveStageKeyboardMovePluginConfig = {
+  movementDelta: number;
+};
+
+type WeaveStageKeyboardMovePluginParams = {
+  config?: WeaveStageKeyboardMovePluginConfig;
+};
+```
+
+## Parameters
+
+For `WeaveStageKeyboardMovePluginParams`:
+
+<TypeTable
+  type={{
+    ["config"]: {
+      description: "Config parameters for the plugin.",
+      type: "WeaveStageKeyboardMovePluginConfig",
+    },
+  }}
+/>
+
+For `WeaveStageKeyboardMovePluginConfig`:
+
+<TypeTable
+  type={{
+    ["movementDelta"]: {
+      description: "Delta to move the selected nodes.",
+      type: "number",
+      default: "5",
+    },
+  }}
+/>