From 207942c6e7fbaf6d318048f042615285c974f2be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= Date: Thu, 2 Oct 2025 16:47:42 +0200 Subject: [PATCH 1/2] chore: initial commit From e7a63ac30b9cf20633c5cbe670deb8d0fb2271ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesus=20Manuel=20Pi=C3=B1eiro=20Cid?= Date: Thu, 2 Oct 2025 18:04:17 +0200 Subject: [PATCH 2/2] feat: new plugin to move selected nodes using shift + keyboard arrows --- code/CHANGELOG.md | 1 + code/packages/sdk/src/index.ts | 2 + .../plugins/stage-keyboard-move/constants.ts | 9 ++ .../stage-keyboard-move.ts | 98 +++++++++++++++++++ .../src/plugins/stage-keyboard-move/types.ts | 13 +++ .../plugins/stage-minimap/stage-minimap.ts | 10 +- .../packages/sdk/src/reconciler/reconciler.ts | 2 +- .../content/docs/main/build/plugins/index.mdx | 6 ++ .../content/docs/main/build/plugins/meta.json | 2 + .../build/plugins/stage-keyboard-move.mdx | 55 +++++++++++ .../docs/main/changelog/prerelease/0.72.0.mdx | 3 +- .../docs/sdk/api-reference/plugins/index.mdx | 6 ++ .../docs/sdk/api-reference/plugins/meta.json | 1 + .../plugins/stage-keyboard-move.mdx | 68 +++++++++++++ 14 files changed, 270 insertions(+), 6 deletions(-) create mode 100644 code/packages/sdk/src/plugins/stage-keyboard-move/constants.ts create mode 100644 code/packages/sdk/src/plugins/stage-keyboard-move/stage-keyboard-move.ts create mode 100644 code/packages/sdk/src/plugins/stage-keyboard-move/types.ts create mode 100644 docs/content/docs/main/build/plugins/stage-keyboard-move.mdx create mode 100644 docs/content/docs/sdk/api-reference/plugins/stage-keyboard-move.mdx diff --git a/code/CHANGELOG.md b/code/CHANGELOG.md index 03007b8bb..fcec67ba0 100644 --- a/code/CHANGELOG.md +++ b/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 diff --git a/code/packages/sdk/src/index.ts b/code/packages/sdk/src/index.ts index 3dc99e566..8ad525de0 100644 --- a/code/packages/sdk/src/index.ts +++ b/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'; diff --git a/code/packages/sdk/src/plugins/stage-keyboard-move/constants.ts b/code/packages/sdk/src/plugins/stage-keyboard-move/constants.ts new file mode 100644 index 000000000..284d18495 --- /dev/null +++ b/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, +}; diff --git a/code/packages/sdk/src/plugins/stage-keyboard-move/stage-keyboard-move.ts b/code/packages/sdk/src/plugins/stage-keyboard-move/stage-keyboard-move.ts new file mode 100644 index 000000000..5795f5789 --- /dev/null +++ b/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('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( + 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; + } +} diff --git a/code/packages/sdk/src/plugins/stage-keyboard-move/types.ts b/code/packages/sdk/src/plugins/stage-keyboard-move/types.ts new file mode 100644 index 000000000..ed9719c60 --- /dev/null +++ b/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; +}; diff --git a/code/packages/sdk/src/plugins/stage-minimap/stage-minimap.ts b/code/packages/sdk/src/plugins/stage-minimap/stage-minimap.ts index f7cd067e5..e49fd86d6 100644 --- a/code/packages/sdk/src/plugins/stage-minimap/stage-minimap.ts +++ b/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() { diff --git a/code/packages/sdk/src/reconciler/reconciler.ts b/code/packages/sdk/src/reconciler/reconciler.ts index a3cc2694c..f415e6719 100644 --- a/code/packages/sdk/src/reconciler/reconciler.ts +++ b/code/packages/sdk/src/reconciler/reconciler.ts @@ -241,7 +241,7 @@ export class WeaveReconciler { }); } - weaveInstance.getMainLayer()?.batchDraw(); + // weaveInstance.getMainLayer()?.batchDraw(); } }, appendChild( diff --git a/docs/content/docs/main/build/plugins/index.mdx b/docs/content/docs/main/build/plugins/index.mdx index fa5c6c99d..96158f389 100644 --- a/docs/content/docs/main/build/plugins/index.mdx +++ b/docs/content/docs/main/build/plugins/index.mdx @@ -152,6 +152,12 @@ elements more precisely. + + +Enables to move selected nodes by a delta when pressing shift + keyboard arrows. + + + Enables users to navigate the canvas by dragging to move around the Stage. diff --git a/docs/content/docs/main/build/plugins/meta.json b/docs/content/docs/main/build/plugins/meta.json index d12c7970e..74449e056 100644 --- a/docs/content/docs/main/build/plugins/meta.json +++ b/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" ] diff --git a/docs/content/docs/main/build/plugins/stage-keyboard-move.mdx b/docs/content/docs/main/build/plugins/stage-keyboard-move.mdx new file mode 100644 index 000000000..59ffec03f --- /dev/null +++ b/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 + +
+ +
+ +### Import the Plugin + +Start by importing the plugin: + +```ts +import { WeaveStageKeyboardMovePlugin } from "@inditextech/weave-sdk"; +``` + +
+ +
+ +### 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 ++] + ] +}) +``` + +
+ +
+ +### 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). + +
+ +
diff --git a/docs/content/docs/main/changelog/prerelease/0.72.0.mdx b/docs/content/docs/main/changelog/prerelease/0.72.0.mdx index 50343dcbc..4192ec047 100644 --- a/docs/content/docs/main/changelog/prerelease/0.72.0.mdx +++ b/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 diff --git a/docs/content/docs/sdk/api-reference/plugins/index.mdx b/docs/content/docs/sdk/api-reference/plugins/index.mdx index 6e3d30b37..f8a48e889 100644 --- a/docs/content/docs/sdk/api-reference/plugins/index.mdx +++ b/docs/content/docs/sdk/api-reference/plugins/index.mdx @@ -125,6 +125,12 @@ elements more precisely. + + +Enables to move selected nodes by a delta when pressing shift + keyboard arrows. + + + Enables users to navigate the canvas by dragging to move around the Stage. diff --git a/docs/content/docs/sdk/api-reference/plugins/meta.json b/docs/content/docs/sdk/api-reference/plugins/meta.json index 6ed8bb54c..0eb819948 100644 --- a/docs/content/docs/sdk/api-reference/plugins/meta.json +++ b/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", diff --git a/docs/content/docs/sdk/api-reference/plugins/stage-keyboard-move.mdx b/docs/content/docs/sdk/api-reference/plugins/stage-keyboard-move.mdx new file mode 100644 index 000000000..dae030f78 --- /dev/null +++ b/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`: + + + +For `WeaveStageKeyboardMovePluginConfig`: + +