diff --git a/code/CHANGELOG.md b/code/CHANGELOG.md index 10fd5e392..6e578daf4 100644 --- a/code/CHANGELOG.md +++ b/code/CHANGELOG.md @@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - [#291](https://github.com/InditexTech/weavejs/issues/291) Group of elements moving not maintaining position (all layers) - [#300](https://github.com/InditexTech/weavejs/issues/300) Un-grouping elements are unordered +- [#310](https://github.com/InditexTech/weavejs/issues/310) Fix zoom in / out stepping before fitting ## [0.19.0] - 2025-05-28 diff --git a/code/packages/sdk/src/plugins/stage-zoom/constants.ts b/code/packages/sdk/src/plugins/stage-zoom/constants.ts index 52ce1320d..b214dd397 100644 --- a/code/packages/sdk/src/plugins/stage-zoom/constants.ts +++ b/code/packages/sdk/src/plugins/stage-zoom/constants.ts @@ -2,4 +2,14 @@ // // SPDX-License-Identifier: Apache-2.0 +import type { WeaveStageZoomPluginConfig } from './types'; + export const WEAVE_STAGE_ZOOM_KEY = 'stageZoom'; + +export const WEAVE_STAGE_ZOOM_DEFAULT_CONFIG: WeaveStageZoomPluginConfig = { + zoomSteps: [ + 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.25, 1.5, 1.75, 2, 3, 4, 6, + 8, 10, + ], + defaultZoom: 1, +}; diff --git a/code/packages/sdk/src/plugins/stage-zoom/stage-zoom.ts b/code/packages/sdk/src/plugins/stage-zoom/stage-zoom.ts index 8758bf67b..8e21b6051 100644 --- a/code/packages/sdk/src/plugins/stage-zoom/stage-zoom.ts +++ b/code/packages/sdk/src/plugins/stage-zoom/stage-zoom.ts @@ -10,7 +10,10 @@ import { } from './types'; import Konva from 'konva'; import { WeaveNodesSelectionPlugin } from '../nodes-selection/nodes-selection'; -import { WEAVE_STAGE_ZOOM_KEY } from './constants'; +import { + WEAVE_STAGE_ZOOM_DEFAULT_CONFIG, + WEAVE_STAGE_ZOOM_KEY, +} from './constants'; export class WeaveStageZoomPlugin extends WeavePlugin { private isCtrlOrMetaPressed: boolean; @@ -30,8 +33,7 @@ export class WeaveStageZoomPlugin extends WeavePlugin { const { config } = params ?? {}; this.config = { - zoomSteps: [0.1, 0.25, 0.5, 1, 2, 4, 8], - defaultZoom: 1, + ...WEAVE_STAGE_ZOOM_DEFAULT_CONFIG, ...config, }; @@ -122,8 +124,9 @@ export class WeaveStageZoomPlugin extends WeavePlugin { const actualZoomIsStep = this.config.zoomSteps.findIndex( (scale) => scale === this.actualScale ); + if (actualZoomIsStep === -1) { - this.actualStep = this.findClosestStepIndex(); + this.actualStep = this.findClosestStepIndex('zoomOut'); } return this.actualStep - 1 > 0; @@ -138,7 +141,7 @@ export class WeaveStageZoomPlugin extends WeavePlugin { (scale) => scale === this.actualScale ); if (actualZoomIsStep === -1) { - this.actualStep = this.findClosestStepIndex(); + this.actualStep = this.findClosestStepIndex('zoomIn'); } return this.actualStep + 1 < this.config.zoomSteps.length; @@ -157,16 +160,16 @@ export class WeaveStageZoomPlugin extends WeavePlugin { this.setZoom(this.config.zoomSteps[step]); } - private findClosestStepIndex() { - let closestStepIndex = 0; - let actualDiff = Infinity; - for (let i = 0; i < this.config.zoomSteps.length; i++) { - if (Math.abs(this.config.zoomSteps[i] - this.actualScale) < actualDiff) { - closestStepIndex = i; - actualDiff = Math.abs(this.config.zoomSteps[i] - this.actualScale); - } - } - return closestStepIndex; + private findClosestStepIndex(direction: 'zoomIn' | 'zoomOut'): number { + const nextValue = this.config.zoomSteps + .filter((scale) => + direction === 'zoomIn' + ? scale >= this.actualScale + : scale <= this.actualScale + ) + .sort((a, b) => (direction === 'zoomIn' ? a - b : b - a))[0]; + + return this.config.zoomSteps.findIndex((scale) => scale === nextValue); } zoomIn(): void { @@ -182,7 +185,7 @@ export class WeaveStageZoomPlugin extends WeavePlugin { (scale) => scale === this.actualScale ); if (actualZoomIsStep === -1) { - this.actualStep = this.findClosestStepIndex(); + this.actualStep = this.findClosestStepIndex('zoomIn'); } else { this.actualStep += 1; } @@ -203,7 +206,7 @@ export class WeaveStageZoomPlugin extends WeavePlugin { (scale) => scale === this.actualScale ); if (actualZoomIsStep === -1) { - this.actualStep = this.findClosestStepIndex(); + this.actualStep = this.findClosestStepIndex('zoomOut'); } else { this.actualStep -= 1; } diff --git a/docs/content/docs/main/changelog/prerelease/0.20.0.mdx b/docs/content/docs/main/changelog/prerelease/0.20.0.mdx index 060463ce2..ffdae3f83 100644 --- a/docs/content/docs/main/changelog/prerelease/0.20.0.mdx +++ b/docs/content/docs/main/changelog/prerelease/0.20.0.mdx @@ -16,3 +16,4 @@ description: Selection & grouping bugfixes - [#291](https://github.com/InditexTech/weavejs/issues/291) Group of elements moving not maintaining position (all layers) - [#300](https://github.com/InditexTech/weavejs/issues/300) Un-grouping elements are unordered +- [#310](https://github.com/InditexTech/weavejs/issues/310) Fix zoom in / out stepping before fitting diff --git a/docs/content/docs/sdk/api-reference/plugins/stage-zoom.mdx b/docs/content/docs/sdk/api-reference/plugins/stage-zoom.mdx index 3b0ab354c..225c2595b 100644 --- a/docs/content/docs/sdk/api-reference/plugins/stage-zoom.mdx +++ b/docs/content/docs/sdk/api-reference/plugins/stage-zoom.mdx @@ -76,7 +76,8 @@ For `WeaveStageZoomPluginConfig`: ["zoomSteps"]: { description: "An array that defines the zooming steps of the plugin.", type: "number[]", - default: "[0.1, 0.25, 0.5, 1, 2, 4, 8]", + default: + "[ 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.25, 1.5, 1.75, 2, 3, 4, 6, 8, 10]", }, ["defaultZoom"]: { description: "The default zoom when loading the stage (canvas).",