Combine range options, add minimum scale range (#470)

* Combine range options, add minimum scale range

* Review feedback

* range to minRange

Author: kurkle

docs/guide/options.md

@@ -2,7 +2,7 @@
 
 The options for chartjs-plugin-zoom should be placed in `options.plugins.zoom` in chart.js configuration.
 
-The options are split in two sub-objects, [pan](#pan) and [zoom](#zoom).
+The options are split in three sub-objects, [limits](#limits), [pan](#pan) and [zoom](#zoom).
 
 ```js
 const chart = new Chart('id', {
@@ -14,6 +14,9 @@ const chart = new Chart('id', {
         pan: {
           // pan options and/or events
         },
+        limits: {
+          // axis limits
+        },
         zoom: {
           // zoom options and/or events
         }
@@ -33,8 +36,6 @@ const chart = new Chart('id', {
 | `mode` | `'x'`\|`'y'`\|`'xy'` | `'xy'` | Allowed panning directions
 | `modifierKey` | `'ctrl'`\|`'alt'`\|`'shift'`\|`'meta'` | `null` |  Modifier key required for panning with mouse
 | `overScaleMode` | `'x'`\|`'y'`\|`'xy'` | `undefined` | Which of the enabled panning directions should only be available when the mouse cursor is over a scale for that axis
-| `rangeMin` | `{x: any, y: any}` | `undefined` | Minimum pan range allowed for the axes. Value type depends on the scale type
-| `rangeMax` | `{x: any, y: any}` | `undefined` | Maximum pan range allowed for the axes. Value type depends on the scale type
 | `speed` | `number` | `20` | Factor for pan velocity on **category scale**
 | `threshold` | `number` | `10` | Mimimal pan distance required before actually applying pan
 
@@ -56,8 +57,6 @@ const chart = new Chart('id', {
 | `drag` | `boolean` | `undefined` | Enable drag-to-zoom behavior (disables zooming by wheel)
 | `mode` | `'x'`\|`'y'`\|`'xy'` | `'xy'` | Allowed zoom directions
 | `overScaleMode` | `'x'`\|`'y'`\|`'xy'` | `undefined` | Which of the enabled zooming directions should only be available when the mouse cursor is over a scale for that axis
-| `rangeMin` | `{x: any, y: any}` | `undefined` | Minimum zoom range allowed for the axes. Value type depends on the scale type
-| `rangeMax` | `{x: any, y: any}` | `undefined` | Maximum zoom range allowed for the axes. Value type depends on the scale type
 | `speed` | `number` | `0.1` | Factor of zoom speed via mouse wheel.
 | `threshold` | `number` | `0` | Mimimal zoom distance required before actually applying zoom
 | `wheelModifierKey` | `'ctrl'`\|`'alt'`\|`'shift'`\|`'meta'` | `null` |  Modifier key required for zooming with mouse
@@ -69,3 +68,22 @@ const chart = new Chart('id', {
 | `onZoom` | `{chart}` | Called while the chart is being zoomed
 | `onZoomComplete` | `{chart}` | Called once zooming is completed
 | `onZoomRejected` | `{chart,event}` | Called when zoom is rejected due to missing modifier key. `event` is the a [hammer event](https://hammerjs.github.io/api#event-object) that failed
+
+## Limits
+
+Limits options define the limits per axis for pan and zoom.
+
+### Limit options
+
+| Name | Type | Description
+| ---- | -----| -----------
+| `x` | [`ScaleLimits`](#scale-limits) | Limits for x-axis
+| `y` | [`ScaleLimits`](#scale-limits) | Limits for y-axis
+
+#### Scale Limits
+
+| Name | Type | Description
+| ---- | -----| -----------
+| `min` | `number` | Minimun allowed value for scale.min
+| `max` | `number` | Maximum allowed value for scale.max
+| `minRange` | `number` | Minimum allowed range (max - min). This defines the max zoom level.

docs/samples/basic.md

@@ -52,16 +52,20 @@ Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));
 
 // <block:zoom:0>
 const zoomOptions = {
-  zoom: {
+  limits: {
+    x: {min: -200, max: 200, minRange: 50},
+    y: {min: -200, max: 200, minRange: 50}
+  },
+  pan: {
     enabled: true,
     mode: 'xy',
   },
-  pan: {
+  zoom: {
     enabled: true,
     mode: 'xy',
   }
 };
-// </block>
+// </block:zoom>
 
 const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
 const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';

docs/samples/log.md

@@ -138,29 +138,17 @@ const config = {
     scales: scales,
     plugins: {
       zoom: {
+        limits: {
+          x: {min: 0.5, max: 2e3, minRange: 100},
+          y: {min: -50, max: 10, minRange: 10}
+        },
         pan: {
           enabled: true,
           mode: 'xy',
-          rangeMin: {
-            x: 0.5,
-            y: -50
-          },
-          rangeMax: {
-            x: 2e3,
-            y: 10
-          }
         },
         zoom: {
           enabled: true,
           mode: 'xy',
-          rangeMin: {
-            x: 0.5,
-            y: -50
-          },
-          rangeMax: {
-            x: 2e3,
-            y: 10
-          }
         },
       }
     },

src/core.js

@@ -18,9 +18,9 @@ function storeOriginalScaleLimits(chart) {
   return originalScaleLimits;
 }
 
-function zoomScale(scale, zoom, center, zoomOptions) {
+function zoomScale(scale, zoom, center, limits) {
   const fn = zoomFunctions[scale.type] || zoomFunctions.default;
-  call(fn, [scale, zoom, center, zoomOptions]);
+  call(fn, [scale, zoom, center, limits]);
 }
 
 function getCenter(chart) {
@@ -34,12 +34,12 @@ function getCenter(chart) {
 /**
  * @param chart The chart instance
  * @param {number | {x?: number, y?: number, focalPoint?: {x: number, y: number}}} zoom The zoom percentage or percentages and focal point
- * @param {object} [options] The zoom options
  * @param {boolean} [useTransition] Whether to use `zoom` transition
  */
-export function doZoom(chart, zoom, options = {}, useTransition) {
+export function doZoom(chart, zoom, useTransition) {
   const {x = 1, y = 1, focalPoint = getCenter(chart)} = typeof zoom === 'number' ? {x: zoom, y: zoom} : zoom;
-  const {mode = 'xy', overScaleMode} = options;
+  const {options: {limits, zoom: zoomOptions}} = getState(chart);
+  const {mode = 'xy', overScaleMode} = zoomOptions || {};
 
   storeOriginalScaleLimits(chart);
 
@@ -49,15 +49,15 @@ export function doZoom(chart, zoom, options = {}, useTransition) {
 
   each(enabledScales || chart.scales, function(scale) {
     if (scale.isHorizontal() && xEnabled) {
-      zoomScale(scale, x, focalPoint, options);
+      zoomScale(scale, x, focalPoint, limits);
     } else if (!scale.isHorizontal() && yEnabled) {
-      zoomScale(scale, y, focalPoint, options);
+      zoomScale(scale, y, focalPoint, limits);
     }
   });
 
   chart.update(useTransition ? 'zoom' : 'none');
 
-  call(options.onZoom, [{chart}]);
+  call(zoomOptions.onZoom, [{chart}]);
 }
 
 export function resetZoom(chart) {
@@ -76,14 +76,15 @@ export function resetZoom(chart) {
   chart.update();
 }
 
-function panScale(scale, delta, panOptions) {
+function panScale(scale, delta, panOptions, limits) {
   const fn = panFunctions[scale.type] || panFunctions.default;
-  call(fn, [scale, delta, panOptions]);
+  call(fn, [scale, delta, panOptions, limits]);
 }
 
-export function doPan(chart, pan, options = {}, enabledScales) {
+export function doPan(chart, pan, enabledScales) {
   const {x = 0, y = 0} = typeof pan === 'number' ? {x: pan, y: pan} : pan;
-  const {mode = 'xy', onPan} = options;
+  const {options: {pan: panOptions, limits}} = getState(chart);
+  const {mode = 'xy', onPan} = panOptions || {};
 
   storeOriginalScaleLimits(chart);
 
@@ -92,9 +93,9 @@ export function doPan(chart, pan, options = {}, enabledScales) {
 
   each(enabledScales || chart.scales, function(scale) {
     if (scale.isHorizontal() && xEnabled) {
-      panScale(scale, x, options);
+      panScale(scale, x, panOptions, limits);
     } else if (!scale.isHorizontal() && yEnabled) {
-      panScale(scale, y, options);
+      panScale(scale, y, panOptions, limits);
     }
   });
 

src/hammer.js

@@ -49,8 +49,7 @@ function handlePinch(chart, state, e) {
     const zoomPercent = 1 / state.scale * e.scale;
     const rect = e.target.getBoundingClientRect();
     const pinch = pinchAxes(pointers[0], pointers[1]);
-    const options = state.options.zoom;
-    const mode = options.mode;
+    const mode = state.options.zoom.mode;
     const zoom = {
       x: pinch.x && directionEnabled(mode, 'x', chart) ? zoomPercent : 1,
       y: pinch.y && directionEnabled(mode, 'y', chart) ? zoomPercent : 1,
@@ -60,7 +59,7 @@ function handlePinch(chart, state, e) {
       }
     };
 
-    doZoom(chart, zoom, options);
+    doZoom(chart, zoom);
 
     // Keep track of overall scale
     state.scale = e.scale;
@@ -86,7 +85,7 @@ function handlePan(chart, state, e) {
   const delta = state.delta;
   if (delta !== null) {
     state.panning = true;
-    doPan(chart, {x: e.deltaX - delta.x, y: e.deltaY - delta.y}, state.options.pan, state.panScales);
+    doPan(chart, {x: e.deltaX - delta.x, y: e.deltaY - delta.y}, state.panScales);
     state.delta = {x: e.deltaX, y: e.deltaY};
   }
 }

src/handlers.js

@@ -93,7 +93,7 @@ export function mouseUp(chart, event) {
       y: (rect.top - top) / (1 - dragDistanceY / height) + top
     }
   };
-  doZoom(chart, zoom, zoomOptions, true);
+  doZoom(chart, zoom, true);
 
   call(zoomOptions.onZoomComplete, [chart]);
 }
@@ -129,7 +129,7 @@ export function wheel(chart, event) {
     }
   };
 
-  doZoom(chart, zoom, zoomOptions);
+  doZoom(chart, zoom);
 
   if (onZoomComplete) {
     debounce(() => call(onZoomComplete, [{chart}]), 250);

src/plugin.js

@@ -34,8 +34,8 @@ export default {
       startHammer(chart, options);
     }
 
-    chart.pan = (pan, panOptions, panScales) => doPan(chart, pan, panOptions, panScales);
-    chart.zoom = (zoom, zoomOptions, useTransition) => doZoom(chart, zoom, zoomOptions, useTransition);
+    chart.pan = (pan, panScales) => doPan(chart, pan, panScales);
+    chart.zoom = (zoom, useTransition) => doZoom(chart, zoom, useTransition);
     chart.resetZoom = () => resetZoom(chart);
   },
 

src/scale.types.js

@@ -1,39 +1,55 @@
-import {isNullOrUndef} from 'chart.js/helpers';
-
-function rangeMaxLimiter(rangeMax, axis, newMax) {
-  const limit = rangeMax && rangeMax[axis];
-  return !isNullOrUndef(limit) && newMax > limit ? limit : newMax;
-}
-
-function rangeMinLimiter(rangeMin, axis, newMin) {
-  const limit = rangeMin && rangeMin[axis];
-  return !isNullOrUndef(limit) && newMin < limit ? limit : newMin;
-}
-
 function zoomDelta(scale, zoom, center) {
   const range = scale.max - scale.min;
-  const newDiff = range * (zoom - 1);
+  const newRange = range * (zoom - 1);
 
   const centerPoint = scale.isHorizontal() ? center.x : center.y;
-  const minPercent = (scale.getValueForPixel(centerPoint) - scale.min) / range;
+  const minPercent = (scale.getValueForPixel(centerPoint) - scale.min) / range || 0;
   const maxPercent = 1 - minPercent;
 
   return {
-    min: newDiff * minPercent,
-    max: newDiff * maxPercent
+    min: newRange * minPercent,
+    max: newRange * maxPercent
   };
 }
 
-function zoomNumericalScale(scale, zoom, center, zoomOptions) {
-  const delta = zoomDelta(scale, zoom, center);
+function updateRange(scale, {min, max}, limits, zoom = false) {
   const {axis, options: scaleOpts} = scale;
-  scaleOpts.min = rangeMinLimiter(zoomOptions.rangeMin, axis, scale.min + delta.min);
-  scaleOpts.max = rangeMaxLimiter(zoomOptions.rangeMax, axis, scale.max - delta.max);
+  const {min: minLimit = -Infinity, max: maxLimit = Infinity, minRange = 0} = limits && limits[axis] || {};
+  const cmin = Math.max(min, minLimit);
+  const cmax = Math.min(max, maxLimit);
+  const range = zoom ? Math.max(cmax - cmin, minRange) : scale.max - scale.min;
+  if (cmax - cmin !== range) {
+    if (minLimit > cmax - range) {
+      min = cmin;
+      max = cmin + range;
+    } else if (maxLimit < cmin + range) {
+      max = cmax;
+      min = cmax - range;
+    } else if (zoom && range === minRange) {
+      min = scale.min;
+      max = scale.max;
+    } else {
+      const offset = (range - cmax + cmin) / 2;
+      min = cmin - offset;
+      max = cmax + offset;
+    }
+  } else {
+    min = cmin;
+    max = cmax;
+  }
+  scaleOpts.min = min;
+  scaleOpts.max = max;
+}
+
+function zoomNumericalScale(scale, zoom, center, limits) {
+  const delta = zoomDelta(scale, zoom, center);
+  const newRange = {min: scale.min + delta.min, max: scale.max - delta.max};
+  updateRange(scale, newRange, limits, true);
 }
 
 const integerChange = (v) => v === 0 || isNaN(v) ? 0 : v < 0 ? Math.min(Math.round(v), -1) : Math.max(Math.round(v), 1);
 
-function zoomCategoryScale(scale, zoom, center, zoomOptions) {
+function zoomCategoryScale(scale, zoom, center, limits) {
   const labels = scale.getLabels();
   const maxIndex = labels.length - 1;
   if (scale.min === scale.max && zoom < 1) {
@@ -44,13 +60,12 @@ function zoomCategoryScale(scale, zoom, center, zoomOptions) {
     }
   }
   const delta = zoomDelta(scale, zoom, center);
-  const {axis, options: scaleOpts} = scale;
-  scaleOpts.min = Math.max(0, rangeMinLimiter(zoomOptions.rangeMin, axis, scale.min + integerChange(delta.min)));
-  scaleOpts.max = Math.min(maxIndex, rangeMaxLimiter(zoomOptions.rangeMax, axis, scale.max - integerChange(delta.max)));
+  const newRange = {min: scale.min + integerChange(delta.min), max: scale.max - integerChange(delta.max)};
+  updateRange(scale, newRange, limits, true);
 }
 
 const categoryDelta = new WeakMap();
-function panCategoryScale(scale, delta, panOptions) {
+function panCategoryScale(scale, delta, panOptions, limits) {
   const labels = scale.getLabels();
   const lastLabelIndex = labels.length - 1;
   const offsetAmt = Math.max(scale.ticks.length, 1);
@@ -65,31 +80,14 @@ function panCategoryScale(scale, delta, panOptions) {
 
   categoryDelta.set(scale, minIndex !== scaleMin ? 0 : cumDelta);
 
-  const {axis, options: scaleOpts} = scale;
-  scaleOpts.min = rangeMinLimiter(panOptions.rangeMin, axis, minIndex);
-  scaleOpts.max = rangeMaxLimiter(panOptions.rangeMax, axis, maxIndex);
+  updateRange(scale, {min: minIndex, max: maxIndex}, limits);
 }
 
-function panNumericalScale(scale, delta, panOptions) {
-  const {axis, min: prevStart, max: prevEnd, options: scaleOpts} = scale;
+function panNumericalScale(scale, delta, panOptions, limits) {
+  const {min: prevStart, max: prevEnd} = scale;
   const newMin = scale.getValueForPixel(scale.getPixelForValue(prevStart) - delta);
   const newMax = scale.getValueForPixel(scale.getPixelForValue(prevEnd) - delta);
-  const rangeMin = rangeMinLimiter(panOptions.rangeMin, axis, newMin);
-  const rangeMax = rangeMaxLimiter(panOptions.rangeMax, axis, newMax);
-  let diff;
-
-  if (newMin >= rangeMin && newMax <= rangeMax) {
-    scaleOpts.min = newMin;
-    scaleOpts.max = newMax;
-  } else if (newMin < rangeMin) {
-    diff = prevStart - rangeMin;
-    scaleOpts.min = rangeMin;
-    scaleOpts.max = prevEnd - diff;
-  } else if (newMax > rangeMax) {
-    diff = rangeMax - prevEnd;
-    scaleOpts.max = rangeMax;
-    scaleOpts.min = prevStart + diff;
-  }
+  updateRange(scale, {min: newMin, max: newMax}, limits);
 }
 
 export const zoomFunctions = {