fix: "[NGRM]: zooming using mouse scroll wheel is limited #2240" (#2260)

Will fix limited zoom in 2D and also missing ticks on the ruler top left
corner.

For large UTM like numbers there is some precision issues in 2D . Hence
will limit zoom somewhat in this case. Is a bit hacky but seems to work
fine.

A better possible future solution would be to translate all data to
around origo. For readout the numbers would have to be translated back.
This is similar to how RMS does it.

typescript/packages/subsurface-viewer/src/components/Map.tsx

@@ -92,7 +92,7 @@ type Size = {
 const minZoom3D = -12;
 const maxZoom3D = 12;
 const minZoom2D = -12;
-const maxZoom2D = 4;
+const maxZoom2D = 12;
 
 const DEFAULT_VIEWS: ViewsType = {
     layout: [1, 1],
@@ -1397,13 +1397,17 @@ function getViewStateFromBounds(
         fb_zoom = fb.zoom;
     }
 
+    // For large numbers (like utm coordinates) max zoom is limited in 2D to avoid numerical imprecision.
+    const isLarge = Math.max(bounds[0], bounds[1]) > 99999;
+    const max2DZoom = isLarge ? 3 : maxZoom2D;
+
     const view_state: ViewStateType = {
         target: viewPort.target ?? fb_target,
         zoom: getZoom(viewPort, fb_zoom),
         rotationX: 90, // look down z -axis
         rotationOrbit: 0,
         minZoom: viewPort.show3D ? minZoom3D : minZoom2D,
-        maxZoom: viewPort.show3D ? maxZoom3D : maxZoom2D,
+        maxZoom: viewPort.show3D ? maxZoom3D : max2DZoom,
     };
     return view_state;
 }
@@ -1750,7 +1754,7 @@ function computeViewState(
 
         const centerOfData: Point3D = boxCenter(boundingBox);
 
-        // In 2D set camera target (centerOfData) to 0; Zoom scales world around target.
+        // In 2D set camera target (centerOfData) to 0. Zoom scales world around target.
         centerOfData[2] = 0;
 
         // if bounds are defined, use them

typescript/packages/subsurface-viewer/src/layers/axes2d/axes2DLayer.ts

@@ -517,14 +517,7 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
 
         //- BOTTOM RULER ----------------------------------------
         if (isB) {
-            const axes = [
-                xmin,
-                yBoundsMin + mv,
-                zDepthAxes,
-                xmax,
-                yBoundsMin + mv,
-                zDepthAxes,
-            ];
+            const axes = [xmin, ymin, zDepthAxes, xmax, ymin, zDepthAxes];
 
             const [ticks, labels] = this.GetTickLinesAndLabels(
                 xmin,
@@ -548,14 +541,7 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
 
         //- TOP RULER ----------------------------------------
         if (isT) {
-            const axes = [
-                xmin,
-                yBoundsMax - mv,
-                zDepthAxes,
-                xmax,
-                yBoundsMax - mv,
-                zDepthAxes,
-            ];
+            const axes = [xmin, ymax, zDepthAxes, xmax, ymax, zDepthAxes];
             const [ticks, labels] = this.GetTickLinesAndLabels(
                 xmin,
                 xmax,
@@ -578,17 +564,10 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
 
         //- LEFT RULER ----------------------------------------
         if (isL) {
-            const axes = [
-                xBoundsMin + mh,
-                ymin,
-                zDepthAxes,
-                xBoundsMin + mh,
-                ymax,
-                zDepthAxes,
-            ];
+            const axes = [xmin, ymin, zDepthAxes, xmin, ymax, zDepthAxes];
             const [ticks, labels] = this.GetTickLinesAndLabels(
                 ymin,
-                yBoundsMax - mv,
+                ymax,
                 ViewSide.Left,
                 pixel2worldHor,
                 pixel2worldVer
@@ -607,14 +586,7 @@ export default class Axes2DLayer extends Layer<Axes2DLayerProps> {
 
         //- RIGHT RULER ----------------------------------------
         if (isR) {
-            const axes = [
-                xBoundsMax - mh,
-                ymin,
-                zDepthAxes,
-                xBoundsMax - mh,
-                ymax,
-                zDepthAxes,
-            ];
+            const axes = [xmax, ymin, zDepthAxes, xmax, ymax, zDepthAxes];
             const [ticks, labels] = this.GetTickLinesAndLabels(
                 ymin,
                 ymax,