Addind wheel events support

svgmap/src/components/map/MouseHandler.tsx

@@ -84,14 +84,41 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
     }
   };
 
+  const doScale = (x: number, y: number, factor: number) => {
+    setShift({
+      x: shift.x + (shift.x - x) * (factor - 1),
+      y: shift.y + (shift.y - y) * (factor - 1),
+    });
+    setZoom(zoom * factor);
+  };
+
   const doubleClickHandler = (event: any) => {
     genericHandler(event);
-    const newZoom = zoom * Math.SQRT2;
+    doScale(event.pageX, event.pageY, Math.SQRT2);
-    setShift({
+  };
-      x: shift.x + (shift.x - event.pageX) * (newZoom / zoom - 1),
+
-      y: shift.y + (shift.y - event.pageY) * (newZoom / zoom - 1),
+  const initialWheelState = {
-    });
+    timestamp: 0,
-    setZoom(newZoom);
+  };
+
+  const [wheelState, setWheelState] = useState(initialWheelState);
+
+  const wheelEventHandler = (event: any) => {
+    genericHandler(event);
+    if (
+      event.deltaMode === WheelEvent.DOM_DELTA_PIXEL &&
+      Date.now() - wheelState.timestamp > 100
+    ) {
+      doScale(
+        event.pageX,
+        event.pageY,
+        event.deltaY < 0 ? Math.SQRT2 : Math.SQRT1_2
+      );
+
+      setWheelState({
+        timestamp: Date.now(),
+      });
+    }
   };
 
   return (
@@ -101,6 +128,7 @@ const MouseHandler: react.FC<MouseHandlerProperties> = (
       onMouseUp={mouseUpHandler}
       onMouseLeave={mouseLeaveHandler}
       onDoubleClick={doubleClickHandler}
+      onWheel={wheelEventHandler}
     >
       <Viewport boardSize={props.boardSize} shift={shift} zoom={zoom} />
     </div>