consider pathedit mode when zooming (#1035)

* consider pathedit mode when zooming
* new helper function and style improvements
* update dependencies

package.json

@@ -89,7 +89,7 @@
     "browser-fs-access": "0.35.0",
     "core-js": "3.41.0",
     "elix": "15.0.1",
-    "i18next": "24.2.2",
+    "i18next": "24.2.3",
     "jspdf": "3.0.0",
     "pathseg": "1.2.1",
     "regenerator-runtime": "0.14.1",
@@ -97,15 +97,15 @@
     "svg2pdf.js": "2.4.0"
   },
   "devDependencies": {
-    "@babel/core": "7.26.9",
+    "@babel/core": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/register": "7.25.9",
-    "@babel/runtime-corejs3": "7.26.9",
+    "@babel/runtime-corejs3": "7.26.10",
     "@cypress/code-coverage": "3.13.12",
     "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "^28",
+    "@rollup/plugin-commonjs": "28.0.3",
     "@rollup/plugin-dynamic-import-vars": "2.1.5",
-    "@rollup/plugin-node-resolve": "16.0.0",
+    "@rollup/plugin-node-resolve": "16.0.1",
     "@rollup/plugin-replace": "6.0.2",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-url": "8.0.2",
@@ -115,7 +115,7 @@
     "babel-plugin-transform-object-rest-spread": "7.0.0-beta.3",
     "core-js-bundle": "3.41.0",
     "cp-cli": "2.0.0",
-    "cypress": "14.1.0",
+    "cypress": "14.2.0",
     "cypress-multi-reporters": "2.0.5",
     "jamilih": "0.60.0",
     "jsdoc": "4.0.4",
@@ -136,7 +136,7 @@
     "rollup-plugin-progress": "1.1.2",
     "rollup-plugin-re": "1.0.7",
     "standard": "17.1.2",
-    "start-server-and-test": "2.0.10"
+    "start-server-and-test": "2.0.11"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.35.0"

src/editor/panels/BottomPanel.js

@@ -59,33 +59,27 @@ class BottomPanel {
         this.editor.zoomChanged(window, value)
         break
       default: {
-        const zoomlevel = Number(value) > 0.1 ? Number(value) * 0.01 : 0.1
+        const newZoom = Number(value) > 0.1 ? Number(value) * 0.01 : 0.1
         const zoom = this.editor.svgCanvas.getZoom()
-        const { workarea } = this.editor
+        if (this.editor.svgCanvas.getMode() === 'pathedit') {
-        this.editor.zoomChanged(
+          // In pathedit mode, use zoomImage to update path points correctly.
-          window,
+          this.editor.zoomImage(newZoom / zoom)
-          {
+        } else {
-            width: 0,
+          const { workarea } = this.editor
-            height: 0,
+          // Use helper function to compute center only once.
-            // center pt of scroll position
+          const center = getWorkareaCenter(workarea, zoom)
-            x:
+          this.editor.zoomChanged(
-              (workarea.scrollLeft +
+            window,
-                parseFloat(
+            {
-                  getComputedStyle(workarea, null).width.replace('px', '')
+              width: 0,
-                ) /
+              height: 0,
-                  2) /
+              x: center.x,
-              zoom,
+              y: center.y,
-            y:
+              zoom: newZoom
-              (workarea.scrollTop +
+            },
-                parseFloat(
+            true
-                  getComputedStyle(workarea, null).height.replace('px', '')
+          )
-                ) /
+        }
-                  2) /
-              zoom,
-            zoom: zoomlevel
-          },
-          true
-        )
       }
     }
   }
@@ -106,7 +100,7 @@ class BottomPanel {
     ]
 
     if (bNoStroke) {
-      buttonsNeedingStroke.forEach((btn) => {
+      buttonsNeedingStroke.forEach(btn => {
         // if btn is pressed, change to select button
         if ($id(btn).pressed) {
           this.editor.leftPanel.clickSelect()
@@ -114,12 +108,12 @@ class BottomPanel {
         $id(btn).disabled = true
       })
     } else {
-      buttonsNeedingStroke.forEach((btn) => {
+      buttonsNeedingStroke.forEach(btn => {
         $id(btn).disabled = false
       })
     }
     if (bNoStroke && bNoFill) {
-      buttonsNeedingFillAndStroke.forEach((btn) => {
+      buttonsNeedingFillAndStroke.forEach(btn => {
         // if btn is pressed, change to select button
         if ($id(btn).pressed) {
           this.editor.leftPanel.clickSelect()
@@ -127,7 +121,7 @@ class BottomPanel {
         $id(btn).disabled = true
       })
     } else {
-      buttonsNeedingFillAndStroke.forEach((btn) => {
+      buttonsNeedingFillAndStroke.forEach(btn => {
         $id(btn).disabled = false
       })
     }
@@ -213,26 +207,26 @@ class BottomPanel {
         solidColor: curConfig.initStroke.color
       })
     )
-    $id('zoom').addEventListener('change', (e) =>
+    $id('zoom').addEventListener('change', e =>
       this.changeZoom.bind(this)(e.detail.value)
     )
-    $id('stroke_color').addEventListener('change', (evt) =>
+    $id('stroke_color').addEventListener('change', evt =>
       this.handleColorPicker.bind(this)('stroke', evt)
     )
-    $id('fill_color').addEventListener('change', (evt) =>
+    $id('fill_color').addEventListener('change', evt =>
       this.handleColorPicker.bind(this)('fill', evt)
     )
     $id('stroke_width').addEventListener(
       'change',
       this.changeStrokeWidth.bind(this)
     )
-    $id('stroke_style').addEventListener('change', (evt) =>
+    $id('stroke_style').addEventListener('change', evt =>
       this.handleStrokeAttr.bind(this)('stroke-dasharray', evt)
     )
-    $id('stroke_linejoin').addEventListener('change', (evt) =>
+    $id('stroke_linejoin').addEventListener('change', evt =>
       this.handleStrokeAttr.bind(this)('stroke-linejoin', evt)
     )
-    $id('stroke_linecap').addEventListener('change', (evt) =>
+    $id('stroke_linecap').addEventListener('change', evt =>
       this.handleStrokeAttr.bind(this)('stroke-linecap', evt)
     )
     $id('opacity').addEventListener('change', this.handleOpacity.bind(this))
@@ -257,4 +251,14 @@ class BottomPanel {
   }
 }
 
+// Helper function to get the center of the workarea
+const getWorkareaCenter = (workarea, zoom) => {
+  const width = parseFloat(getComputedStyle(workarea).width.replace('px', ''))
+  const height = parseFloat(getComputedStyle(workarea).height.replace('px', ''))
+  return {
+    x: (workarea.scrollLeft + width / 2) / zoom,
+    y: (workarea.scrollTop + height / 2) / zoom
+  }
+}
+
 export default BottomPanel