Multi-axis zoom and original zoom limits (#524)

* Minor formatting, code cleanup, spelling fixes

* Allow configuring limits for individual axes

Fixes #522.

* Allow using original axis as zoom limits

Fixes #523.

* Handle autoscaled min/max

* Fix resetZoom

This should fix test failures.

* Retrieve chart state within updateRange

This lets us keep the `zoomFunctions` and `panFunctions` signatures unchanged, since they're part of the public API.

* Revise state management

As discussed in code review, it seems cleaner to consistently get state at the start of a function then pass it to `storeOriginalScaleLimits`.

Author: joshkel

docs/guide/options.md

@@ -36,7 +36,7 @@ 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
-| `threshold` | `number` | `10` | Mimimal pan distance required before actually applying pan
+| `threshold` | `number` | `10` | Minimal pan distance required before actually applying pan
 
 ### Pan Events
 
@@ -103,10 +103,42 @@ Limits options define the limits per axis for pan and zoom.
 | `x` | [`ScaleLimits`](#scale-limits) | Limits for x-axis
 | `y` | [`ScaleLimits`](#scale-limits) | Limits for y-axis
 
+If you're using multiple or custom axes (scales), you can define limits for those, too.
+
+```js
+const chart = new Chart('id', {
+  type: 'line',
+  data: {},
+  options: {
+    scales: {
+      y: {
+        min: 20,
+        max: 80,
+      },
+      y2: {
+        position: 'right',
+        min: -5,
+        max: 5
+      }
+    },
+    plugins: {
+      zoom: {
+        limits: {
+          y: {min: 0, max: 100},
+          y2: {min: -5, max: 5}
+        },
+      }
+    }
+  }
+});
+```
+
 #### Scale Limits
 
 | Name | Type | Description
 | ---- | -----| -----------
-| `min` | `number` | Minimun allowed value for scale.min
-| `max` | `number` | Maximum allowed value for scale.max
+| `min` | `number | 'original'` | Minimum allowed value for scale.min
+| `max` | `number | 'original'` | Maximum allowed value for scale.max
 | `minRange` | `number` | Minimum allowed range (max - min). This defines the max zoom level.
+
+You may use the keyword `'original'` in place of a numeric limit to instruct chartjs-plugin-zoom to use whatever limits the scale had when the chart was first displayed.

src/core.js

@@ -3,11 +3,14 @@ import {panFunctions, updateRange, zoomFunctions} from './scale.types';
 import {getState} from './state';
 import {directionEnabled, getEnabledScalesByPoint} from './utils';
 
-function storeOriginalScaleLimits(chart) {
-  const {originalScaleLimits} = getState(chart);
+function storeOriginalScaleLimits(chart, state) {
+  const {originalScaleLimits} = state;
   each(chart.scales, function(scale) {
     if (!originalScaleLimits[scale.id]) {
-      originalScaleLimits[scale.id] = {min: scale.options.min, max: scale.options.max};
+      originalScaleLimits[scale.id] = {
+        min: {scale: scale.min, options: scale.options.min},
+        max: {scale: scale.max, options: scale.options.max},
+      };
     }
   });
   each(originalScaleLimits, function(opt, key) {
@@ -34,14 +37,15 @@ function getCenter(chart) {
 /**
  * @param chart The chart instance
  * @param {number | {x?: number, y?: number, focalPoint?: {x: number, y: number}}} amount The zoom percentage or percentages and focal point
- * @param {string} [transition] Which transiton mode to use. Defaults to 'none'
+ * @param {string} [transition] Which transition mode to use. Defaults to 'none'
  */
 export function zoom(chart, amount, transition = 'none') {
   const {x = 1, y = 1, focalPoint = getCenter(chart)} = typeof amount === 'number' ? {x: amount, y: amount} : amount;
-  const {options: {limits, zoom: zoomOptions}} = getState(chart);
+  const state = getState(chart);
+  const {options: {limits, zoom: zoomOptions}} = state;
   const {mode = 'xy', overScaleMode} = zoomOptions || {};
 
-  storeOriginalScaleLimits(chart);
+  storeOriginalScaleLimits(chart, state);
 
   const xEnabled = x !== 1 && directionEnabled(mode, 'x', chart);
   const yEnabled = y !== 1 && directionEnabled(mode, 'y', chart);
@@ -70,10 +74,11 @@ function getRange(scale, pixel0, pixel1) {
 }
 
 export function zoomRect(chart, p0, p1, transition = 'none') {
-  const {options: {limits, zoom: zoomOptions}} = getState(chart);
+  const state = getState(chart);
+  const {options: {limits, zoom: zoomOptions}} = state;
   const {mode = 'xy'} = zoomOptions;
 
-  storeOriginalScaleLimits(chart);
+  storeOriginalScaleLimits(chart, state);
   const xEnabled = directionEnabled(mode, 'x', chart);
   const yEnabled = directionEnabled(mode, 'y', chart);
 
@@ -91,21 +96,21 @@ export function zoomRect(chart, p0, p1, transition = 'none') {
 }
 
 export function zoomScale(chart, scaleId, range, transition = 'none') {
-  storeOriginalScaleLimits(chart);
+  storeOriginalScaleLimits(chart, getState(chart));
   const scale = chart.scales[scaleId];
   updateRange(scale, range, undefined, true);
   chart.update(transition);
 }
 
 
 export function resetZoom(chart, transition = 'default') {
-  const originalScaleLimits = storeOriginalScaleLimits(chart);
+  const originalScaleLimits = storeOriginalScaleLimits(chart, getState(chart));
 
   each(chart.scales, function(scale) {
     const scaleOptions = scale.options;
     if (originalScaleLimits[scale.id]) {
-      scaleOptions.min = originalScaleLimits[scale.id].min;
-      scaleOptions.max = originalScaleLimits[scale.id].max;
+      scaleOptions.min = originalScaleLimits[scale.id].min.options;
+      scaleOptions.max = originalScaleLimits[scale.id].max.options;
     } else {
       delete scaleOptions.min;
       delete scaleOptions.max;
@@ -114,8 +119,8 @@ export function resetZoom(chart, transition = 'default') {
   chart.update(transition);
 }
 
-function panScale(scale, delta, limits) {
-  const {panDelta} = getState(scale.chart);
+function panScale(scale, delta, limits, state) {
+  const {panDelta} = state;
   // Add possible cumulative delta from previous pan attempts where scale did not change
   const storedDelta = panDelta[scale.id] || 0;
   if (sign(storedDelta) === sign(delta)) {
@@ -133,19 +138,20 @@ function panScale(scale, delta, limits) {
 
 export function pan(chart, delta, enabledScales, transition = 'none') {
   const {x = 0, y = 0} = typeof delta === 'number' ? {x: delta, y: delta} : delta;
-  const {options: {pan: panOptions, limits}} = getState(chart);
+  const state = getState(chart);
+  const {options: {pan: panOptions, limits}} = state;
   const {mode = 'xy', onPan} = panOptions || {};
 
-  storeOriginalScaleLimits(chart);
+  storeOriginalScaleLimits(chart, state);
 
   const xEnabled = x !== 0 && directionEnabled(mode, 'x', chart);
   const yEnabled = y !== 0 && directionEnabled(mode, 'y', chart);
 
   each(enabledScales || chart.scales, function(scale) {
     if (scale.isHorizontal() && xEnabled) {
-      panScale(scale, x, limits);
+      panScale(scale, x, limits, state);
     } else if (!scale.isHorizontal() && yEnabled) {
-      panScale(scale, y, limits);
+      panScale(scale, y, limits, state);
     }
   });
 

src/hammer.js

@@ -4,8 +4,7 @@ import {pan, zoom} from './core';
 import {getState} from './state';
 import {directionEnabled, getEnabledScalesByPoint} from './utils';
 
-function createEnabler(chart) {
-  const state = getState(chart);
+function createEnabler(chart, state) {
   return function(recognizer, event) {
     const panOptions = state.options.pan;
     if (!panOptions || !panOptions.enabled) {
@@ -135,7 +134,7 @@ export function startHammer(chart, options) {
   if (panOptions && panOptions.enabled) {
     mc.add(new Hammer.Pan({
       threshold: panOptions.threshold,
-      enable: createEnabler(chart)
+      enable: createEnabler(chart, state)
     }));
     mc.on('panstart', (e) => startPan(chart, state, e));
     mc.on('panmove', (e) => handlePan(chart, state, e));

src/scale.types.js

@@ -1,3 +1,5 @@
+import {getState} from './state';
+
 function zoomDelta(scale, zoom, center) {
   const range = scale.max - scale.min;
   const newRange = range * (zoom - 1);
@@ -12,9 +14,27 @@ function zoomDelta(scale, zoom, center) {
   };
 }
 
+function getLimit(chartState, scale, scaleLimits, prop, fallback) {
+  let limit = scaleLimits[prop];
+  if (limit === 'original') {
+    const original = chartState.originalScaleLimits[scale.id][prop];
+    limit = original.options !== null && original.options !== undefined ? original.options : original.scale;
+  }
+  if (limit === null || limit === undefined) {
+    limit = fallback;
+  }
+  return limit;
+}
+
 export function updateRange(scale, {min, max}, limits, zoom = false) {
-  const {axis, options: scaleOpts} = scale;
-  const {min: minLimit = -Infinity, max: maxLimit = Infinity, minRange = 0} = limits && limits[axis] || {};
+  const chartState = getState(scale.chart);
+  const {id, axis, options: scaleOpts} = scale;
+
+  const scaleLimits = limits && (limits[id] || limits[axis]) || {};
+  const {minRange = 0} = scaleLimits;
+  const minLimit = getLimit(chartState, scale, scaleLimits, 'min', -Infinity);
+  const maxLimit = getLimit(chartState, scale, scaleLimits, 'max', Infinity);
+
   const cmin = Math.max(min, minLimit);
   const cmax = Math.min(max, maxLimit);
   const range = zoom ? Math.max(cmax - cmin, minRange) : scale.max - scale.min;
@@ -58,7 +78,6 @@ function existCategoryFromMaxZoom(scale) {
   if (scale.max < maxIndex) {
     scale.max += 1;
   }
-
 }
 
 function zoomCategoryScale(scale, zoom, center, limits) {

types/options.d.ts

@@ -57,7 +57,7 @@ export interface PinchOptions {
 }
 
 /**
- * Container for zoop options
+ * Container for zoom options
  */
 export interface ZoomOptions {
   /**
@@ -115,7 +115,6 @@ export interface PanOptions {
    */
   enabled?: boolean;
 
-
   /**
    * Panning directions. Remove the appropriate direction to disable
    * Eg. 'y' would only allow panning in the y direction
@@ -158,17 +157,18 @@ export interface PanOptions {
   onPanStart?: (context: { chart: Chart, event: Event, point: Point }) => boolean | undefined;
 }
 
+export interface ScaleLimits {
+  min?: number | 'original';
+  max?: number | 'original';
+  minRange?: number;
+}
+
 export interface LimitOptions {
-  x?: {
-    min?: number;
-    max?: number;
-    minRange?: number;
-  },
-  y?: {
-    min?: number;
-    max?: number;
-    minRange?: number;
-  }
+  // Default horizontal and vertical scale limits
+  x?: ScaleLimits;
+  y?: ScaleLimits;
+  // Optional additional scale limits, indexed by the scale's ID (key)
+  [axisId: string]: ScaleLimits;
 }
 
 export interface ZoomPluginOptions {