fix(ui): Fix map zoom behavior for trackpoint and trackpad scroll zoom

Hypfer · Nov 27, 2021 · ca94600 · ca94600
1 parent c864170
commit ca94600
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/frontend/src/map/Map.tsx b/frontend/src/map/Map.tsx
@@ -24,6 +24,12 @@ const Container = styled(Box)({
     width: "100%",
 });
 
+const SCROLL_PARAMETERS = {
+    ZOOM_IN_MULTIPLIER: 4/3 - 1,
+    ZOOM_OUT_MULTIPLIER: 1 - 3/4,
+    PIXELS_PER_FULL_STEP: 100
+};
+
 class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
     protected readonly canvasRef: React.RefObject<HTMLCanvasElement>;
     protected structureManager: StructureManager;
@@ -423,10 +429,12 @@ class Map<P, S> extends React.Component<P & MapProps, S & MapState > {
                 this.pendingInternalDrawableStateUpdate = false;
                 this.updateInternalDrawableState();
             }
-        }, 200);
+        }, 250);
+
 
+        const fullStep = evt.deltaY < 0 ? SCROLL_PARAMETERS.ZOOM_IN_MULTIPLIER : SCROLL_PARAMETERS.ZOOM_OUT_MULTIPLIER;
+        const factor = 1 - (fullStep * (evt.deltaY / SCROLL_PARAMETERS.PIXELS_PER_FULL_STEP));
 
-        const factor = evt.deltaY > 0 ? 3 / 4 : 4 / 3;
         const currentScaleFactor = this.ctx.getScaleFactor2d()[0];
 
         if (factor * currentScaleFactor < 0.4 && factor < 1) {