WIP Pinch refactor, Chart.zoom

samples/highcharts/studies/pinch-zoom/demo.html

@@ -1,15 +1,11 @@
 <script src="https://code.highcharts.com/stock/highstock.js"></script>
+<script src="https://code.highcharts.com/highcharts-more.js"></script>
 <script src="https://code.highcharts.com/modules/mouse-wheel-zoom.js"></script>
 <script src="https://code.highcharts.com/modules/exporting.js"></script>
 <script src="https://code.highcharts.com/modules/export-data.js"></script>
 <script src="https://code.highcharts.com/modules/accessibility.js"></script>
 
 <figure class="highcharts-figure">
     <div id="container"></div>
-    <p class="highcharts-description">
-        Highcharts has extensive support for time series, and will adapt
-        intelligently to the input data. Click and drag in the chart to zoom in
-        and inspect the data.
-    </p>
 </figure>
 <pre id="log"></pre>

samples/highcharts/studies/pinch-zoom/demo.js

@@ -3,24 +3,44 @@ To do
 - Remove chart.plotLeft, chart.plotTop from the calculations. Check axis
   positioning.
 - When to show reset zoom button? Not on mousewheel.
-- Look into the Chart.zoom function. Can it also use transform?
+- Try replacing `minPixelPadding` translation roundtrip with `minPointOffset`.
+  It should mean the same.
+- Rename `panningState` to `allExtremes`, having properties `dataMin` and
+  `dataMax`. Then it can be spread right into the extremes object if defined.
+  Also checked for `cropped` to avoid doing this for nothing.
+- Refactor: touchpan and zoom now uses basically the same chart.axes.filter
+  expression
+- Clean up mouseDownX, mouseDownY, lastTouches, pinchStart. See if we can store
+  one single event instead.
+- MouseWheel hard to start when minPadding and maxPadding since
+  `allowZoomOutside` change. Check out if minPadding, maxPadding and threshold
+  can be refactored out and shared with setTickPositions.
+- Check if marker/attr stuff is necessary in `getSelectionBox`. Simple .getBBox
+  should be sufficient.
 */
 
 
 (async () => {
 
     const data = await fetch(
         'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v10.3.3/samples/data/usdeur.json'
-    ).then(response => response.json());
+    ).then(response => response.json())
+        .then(data =>
+            data.map(p => p[1])
+                .slice(0, 20)
+        );
 
     Highcharts.chart('container', {
         chart: {
-            zoomType: 'x',
+            zoomType: 'xy',
             panning: {
-                enabled: true,
-                type: 'x'
+                enabled: true
             },
-            panKey: 'shift'
+            mouseWheel: {
+                enabled: true
+            },
+            panKey: 'shift',
+            width: 600
         },
         title: {
             text: 'USD to EUR exchange rate over time',
@@ -31,10 +51,6 @@ To do
                 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in',
             align: 'left'
         },
-        xAxis: {
-            min: 500,
-            max: 2500
-        },
         yAxis: {
             title: {
                 text: 'Exchange rate'
@@ -47,6 +63,9 @@ To do
         legend: {
             enabled: false
         },
+        rangeSelector: {
+            selected: 2
+        },
         plotOptions: {
             area: {
                 fillColor: {
@@ -75,9 +94,9 @@ To do
         },
 
         series: [{
-            type: 'area',
+            type: 'column',
             name: 'USD to EUR',
-            data: data.map(p => p[1])
+            data
         }]
     });
 
@@ -86,6 +105,7 @@ To do
         // eslint-disable-line no-extend-native
         return this[i];
     };
+    /*
     setTimeout(function () {
         const chart = Highcharts.charts[0],
             offset = Highcharts.offset(chart.container);
@@ -154,4 +174,5 @@ To do
         }, 500);
 
     }, 1000);
+    // */
 })();

samples/unit-tests/chart/zoomtype/demo.js

@@ -612,7 +612,7 @@ QUnit.test('Zooming accross multiple charts, #15569', assert => {
     );
 
     assert.ok(
-        chart0.xAxis[0].displayBtn,
+        chart0.resetZoomButton,
         'Ending a zoom on a different chart should result in a zoom in.'
     );
     flexContainer.remove(); // Remove this line to visually debug the chart

ts/Core/Axis/Axis.ts

@@ -217,7 +217,6 @@ class Axis {
     public crosshair?: AxisCrosshairOptions;
     public dataMax?: number;
     public dataMin?: number;
-    public displayBtn?: boolean;
     public eventArgs?: any;
     public eventOptions: Record<string, EventCallback<Series, Event>> = void 0 as any;
     public expectedSpace: number|undefined;
@@ -2633,11 +2632,11 @@ class Axis {
      * @emits Highcharts.Axis#event:setExtremes
      */
     public setExtremes(
-        newMin?: number,
-        newMax?: number,
+        min?: number,
+        max?: number,
         redraw: boolean = true,
         animation?: (boolean|Partial<AnimationOptions>),
-        eventArguments?: any
+        eventArguments?: Record<string, any>
     ): void {
         const axis = this,
             chart = axis.chart;
@@ -2647,16 +2646,16 @@ class Axis {
         });
 
         // Extend the arguments with min and max
-        eventArguments = extend(eventArguments, {
-            min: newMin,
-            max: newMax
-        });
+        eventArguments = extend(
+            eventArguments,
+            { min, max }
+        );
 
         // Fire the event
-        fireEvent(axis, 'setExtremes', eventArguments, (): void => {
+        fireEvent(axis, 'setExtremes', eventArguments, (e): void => {
 
-            axis.userMin = newMin;
-            axis.userMax = newMax;
+            axis.userMin = (e as any).min;
+            axis.userMax = (e as any).max;
             axis.eventArgs = eventArguments;
 
             if (redraw) {
@@ -2717,10 +2716,12 @@ class Axis {
 
                 // In full view, displaying the reset zoom button is not
                 // required
+                /*
                 axis.displayBtn = (
                     typeof newMin !== 'undefined' ||
                     typeof newMax !== 'undefined'
                 );
+                */
 
                 // Do it
                 axis.setExtremes(

ts/Core/Axis/NavigatorAxisComposition.ts

@@ -79,7 +79,7 @@ function onAxisInit(
  * selector.
  * @private
  */
-function onAxisZoom(
+function onAxisSetExtremes(
     this: Axis,
     e: AnyRecord
 ): void {
@@ -92,33 +92,37 @@ function onAxisZoom(
         rangeSelector = chartOptions.rangeSelector,
         zoomType = chart.zooming.type;
 
-    if (axis.isXAxis && ((navigator && navigator.enabled) ||
-            (rangeSelector && rangeSelector.enabled))) {
+    if (
+        axis.isXAxis &&
+        (navigator?.enabled || rangeSelector?.enabled)
+    ) {
 
         // For y only zooming, ignore the X axis completely
         if (zoomType === 'y') {
             e.zoomed = false;
 
-        // For xy zooming, record the state of the zoom before zoom
-        // selection, then when the reset button is pressed, revert to
-        // this state. This should apply only if the chart is
-        // initialized with a range (#6612), otherwise zoom all the way
-        // out.
+        // For xy zooming, record the state of the zoom before zoom selection,
+        // then when the reset button is pressed, revert to this state. This
+        // should apply only if the chart is initialized with a range (#6612),
+        // otherwise zoom all the way out.
         } else if (
             (
-                (!isTouchDevice && zoomType === 'xy') ||
+                (e.trigger === 'zoom' && zoomType === 'xy') ||
                 (isTouchDevice && pinchType === 'xy')
             ) &&
             axis.options.range
         ) {
 
             const previousZoom = navigatorAxis.previousZoom;
 
-            if (defined(e.newMin)) {
+            // Minimum defined, zooming in
+            if (defined(e.min)) {
                 navigatorAxis.previousZoom = [axis.min, axis.max];
+
+            // Minimum undefined, resetting zoom
             } else if (previousZoom) {
-                e.newMin = previousZoom[0];
-                e.newMax = previousZoom[1];
+                e.min = previousZoom[0];
+                e.max = previousZoom[1];
                 navigatorAxis.previousZoom = void 0;
             }
         }
@@ -158,7 +162,7 @@ class NavigatorAxisAdditions {
             AxisClass.keepProps.push('navigatorAxis');
 
             addEvent(AxisClass, 'init', onAxisInit);
-            addEvent(AxisClass, 'zoom', onAxisZoom);
+            addEvent(AxisClass, 'setExtremes', onAxisSetExtremes);
         }
 
     }