fix zooming in/out when scrolling

epam · Oct 21, 2023 · 9e0372a · 9e0372a
1 parent 46975be
commit 9e0372a
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 16 deletions.
diff --git a/src/engine/Graphics2d.js b/src/engine/Graphics2d.js
@@ -508,22 +508,41 @@ class Graphics2d extends React.Component {
     const step = evt.deltaY * 2 ** -10;
 
     const zoom = store.render2dZoom;
-    let zoomNew = zoom + step;
-    let xPosNew = store.render2dxPos - ((step / 4) * evt.clientX) / evt.clientY;
-    let yPosNew = store.render2dyPos - ((step / 4) * evt.clientY) / evt.clientX;
+    let newZoom = zoom + step;
+
+    let xPosNew;
+    let yPosNew;
+    if (step < 0) {
+      xPosNew = store.render2dxPos - ((step / 3) * evt.clientX) / evt.clientY;
+      yPosNew = store.render2dyPos - ((step / 3) * evt.clientY) / evt.clientX;
+    } else {
+      const totalPosSum = store.render2dxPos + store.render2dyPos;
+      const ratioX = totalPosSum !== 0 ? store.render2dxPos / totalPosSum : 0;
+
+      const coefficientX = 0.1 * ratioX;
+      const coefficientY = 0.1 * (1 - ratioX);
+
+      xPosNew = store.render2dxPos - coefficientX;
+      yPosNew = store.render2dyPos - coefficientY;
+    }
 
     console.log(`onMouseWheel.evt = ${xPosNew}, ${yPosNew}`);
     // console.log(`onMouseWheel. zoom.puml = ${zoom.puml} zoomNew = ${zoomNew}, xyPos = ${xPosNew},${yPosNew}`);
-    if (Math.abs(zoomNew) > 1 || Math.abs(zoomNew) < 0.1 || xPosNew < 0 || yPosNew < 0 || xPosNew > 1 || yPosNew > 1) {
-      return;
+    if (xPosNew < 0) {
+      xPosNew = 0;
     }
-
-    if (zoomNew > 0.96) {
-      zoomNew = 1;
+    if (yPosNew < 0) {
+      yPosNew = 0;
+    }
+    if (newZoom > 1) {
+      newZoom = 1;
       xPosNew = 0;
       yPosNew = 0;
     }
-    store.dispatch({ type: StoreActionType.SET_2D_ZOOM, render2dZoom: zoomNew });
+    if (newZoom < 0.1) {
+      return;
+    }
+    store.dispatch({ type: StoreActionType.SET_2D_ZOOM, render2dZoom: newZoom });
     store.dispatch({ type: StoreActionType.SET_2D_X_POS, render2dxPos: xPosNew });
     store.dispatch({ type: StoreActionType.SET_2D_Y_POS, render2dyPos: yPosNew });
 

diff --git a/src/ui/UiZoomTools.jsx b/src/ui/UiZoomTools.jsx
@@ -16,21 +16,48 @@ const UiZoomTools = (props) => {
 
   const zoomImage = (step, buttonId) => {
     const currentZoom = props.render2dZoom;
-    const newZoom = Math.round((currentZoom + step) * 10) / 10;
+    let newZoom = Math.round((currentZoom + step) * 10) / 10;
 
-    if ((buttonId === Tools2dType.ZOOM_IN && props.render2dZoom > 0.1) || (buttonId === Tools2dType.ZOOM_OUT && props.render2dZoom < 1)) {
-      const posChange = buttonId === Tools2dType.ZOOM_IN ? 0.05 : -0.05;
-      props.dispatch({ type: StoreActionType.SET_2D_ZOOM, render2dZoom: newZoom });
-      props.dispatch({ type: StoreActionType.SET_2D_X_POS, render2dxPos: props.render2dxPos + posChange });
-      props.dispatch({ type: StoreActionType.SET_2D_Y_POS, render2dyPos: props.render2dyPos + posChange });
+    let xPosNew;
+    let yPosNew;
+    if (buttonId === Tools2dType.ZOOM_IN && newZoom > 0) {
+      xPosNew = props.render2dxPos + 0.05;
+      yPosNew = props.render2dyPos + 0.05;
+    } else if (buttonId === Tools2dType.ZOOM_OUT && newZoom < 1) {
+      const totalPosSum = props.render2dxPos + props.render2dyPos;
+      const ratioX = totalPosSum !== 0 ? props.render2dxPos / totalPosSum : 0;
+
+      const stepX = 0.1 * ratioX;
+      const stepY = 0.1 * (1 - ratioX);
+
+      xPosNew = props.render2dxPos - stepX;
+      yPosNew = props.render2dyPos - stepY;
+    }
+
+    if (xPosNew < 0) {
+      xPosNew = 0;
+    }
+    if (yPosNew < 0) {
+      yPosNew = 0;
+    }
+    if (newZoom > 1) {
+      newZoom = 1;
+      xPosNew = 0;
+      yPosNew = 0;
+    }
+    if (newZoom < 0.1) {
+      return;
     }
+    props.dispatch({ type: StoreActionType.SET_2D_ZOOM, render2dZoom: newZoom });
+    props.dispatch({ type: StoreActionType.SET_2D_X_POS, render2dxPos: xPosNew });
+    props.dispatch({ type: StoreActionType.SET_2D_Y_POS, render2dyPos: yPosNew });
   };
 
   const mediator = (buttonId) => {
     setActiveButton(buttonId);
     props.dispatch({ type: StoreActionType.SET_2D_TOOLS_INDEX, indexTools2d: buttonId });
 
-    if (buttonId === Tools2dType.ZOOM_100 || (buttonId === Tools2dType.ZOOM_OUT && props.render2dZoom > 0.7)) {
+    if (buttonId === Tools2dType.ZOOM_100 || (buttonId === Tools2dType.ZOOM_OUT && props.render2dZoom > 0.8)) {
       props.dispatch({ type: StoreActionType.SET_2D_ZOOM, render2dZoom: 1.0 });
       props.dispatch({ type: StoreActionType.SET_2D_X_POS, render2dxPos: 0.0 });
       props.dispatch({ type: StoreActionType.SET_2D_Y_POS, render2dyPos: 0.0 });