Fix zoom in / out stepping before fitting

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
 

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,
+};

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

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

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).",