Add the ability to enable both wheel and drag modes at the same time (#…

…507) * Make able to use both wheel and drag modes * Fix samples * Fix typings * Fix fixture tests * Handle pinch options * Add warning when zoom.enabled is used * Fix pinch mode + fix ESLint error * Fix defaults test * Not more supported -> no longer supported
chartjs · May 14, 2021 · 5ed4e2a · 5ed4e2a
1 parent 7796886
commit 5ed4e2a
Show file tree

Hide file tree

Showing 25 changed files with 259 additions and 113 deletions.
diff --git a/docs/guide/options.md b/docs/guide/options.md
@@ -53,21 +53,35 @@ const chart = new Chart('id', {
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | ----------
-| `enabled` | `boolean` | `false` | Enable zooming
-| `drag` | `boolean`\|[`DragEffectOptions`](#drag-effect-options) | `undefined` | Enable drag-to-zoom behavior (disables zooming by wheel)
+| `wheel` | [`WheelOptions`](#wheel-options) | `undefined` | Options of the mouse wheel behavior
+| `drag` | [`DragOptions`](#drag-options) | `undefined` | Options of the drag-to-zoom behavior
+| `pinch` | [`PinchOptions`](#pinch-options) | `undefined` | Options of the pinch behavior
 | `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
-| `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
 
-#### Drag effect options
+#### Wheel options
 
-| Name | Type | Description
-| ---- | -----| -----------
-| `backgroundColor` | `Color` | Fill color
-| `borderColor` | `Color` | Stroke color
-| `borderWidth` | `number` | Stroke width
+| Name | Type | Default | Description
+| ---- | -----| ------- | -----------
+| `enabled` | `boolean` | `false` | Enable zooming via mouse wheel
+| `speed` | `number` | `0.1` | Factor of zoom speed via mouse wheel
+| `modifierKey` | `'ctrl'`\|`'alt'`\|`'shift'`\|`'meta'` | `null` |  Modifier key required for zooming with mouse
+
+#### Drag options
+
+| Name | Type | Default | Description
+| ---- | -----| ------- | -----------
+| `enabled` | `boolean` | `false` | Enable drag-to-zoom
+| `backgroundColor` | `Color` | `'rgba(225,225,225,0.3)'` | Fill color
+| `borderColor` | `Color` | `'rgba(225,225,225)'` | Stroke color
+| `borderWidth` | `number` | `0` | Stroke width
+| `threshold` | `number` | `0` | Minimal zoom distance required before actually applying zoom
+
+#### Pinch options
+
+| Name | Type | Default | Description
+| ---- | -----| ------- | -----------
+| `enabled` | `boolean` | `false` | Enable zooming via pinch
 
 ### Zoom Events
 

diff --git a/docs/guide/usage.md b/docs/guide/usage.md
@@ -20,7 +20,12 @@ const config = {
     plugins: {
       zoom: {
         zoom: {
-          enabled: true,
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true
+          },
           mode: 'xy',
         }
       }

diff --git a/docs/samples/basic.md b/docs/samples/basic.md
@@ -61,14 +61,19 @@ const zoomOptions = {
     mode: 'xy',
   },
   zoom: {
-    enabled: true,
+    wheel: {
+      enabled: true,
+    },
+    pinch: {
+      enabled: true
+    },
     mode: 'xy',
   }
 };
 // </block:zoom>
 
 const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
-const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
+const zoomStatus = () => zoomOptions.zoom.wheel.enabled ? 'enabled' : 'disabled';
 
 // <block:config:1>
 const config = {
@@ -95,7 +100,8 @@ const actions = [
   {
     name: 'Toggle zoom',
     handler(chart) {
-      zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
+      zoomOptions.zoom.wheel.enabled = !zoomOptions.zoom.wheel.enabled;
+      zoomOptions.zoom.pinch.enabled = !zoomOptions.zoom.pinch.enabled;
       chart.update();
     }
   }, {

diff --git a/docs/samples/drag/category.md b/docs/samples/drag/category.md
@@ -67,8 +67,9 @@ const config = {
           modifierKey: 'ctrl',
         },
         zoom: {
-          enabled: true,
-          drag: true,
+          drag: {
+            enabled: true
+          },
           mode: 'x',
         },
       }

diff --git a/docs/samples/drag/linear.md b/docs/samples/drag/linear.md
@@ -61,9 +61,9 @@ const zoomOptions = {
     modifierKey: 'ctrl',
   },
   zoom: {
-    enabled: true,
     mode: 'xy',
     drag: {
+      enabled: true,
       borderColor: 'rgb(54, 162, 235)',
       borderWidth: 1,
       backgroundColor: 'rgba(54, 162, 235, 0.3)'
@@ -72,7 +72,7 @@ const zoomOptions = {
 };
 // </block:zoom>
 
-const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
+const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';
 
 // <block:config:1>
 const config = {
@@ -96,7 +96,7 @@ const actions = [
   {
     name: 'Toggle zoom',
     handler(chart) {
-      zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
+      zoomOptions.zoom.drag.enabled = !zoomOptions.zoom.drag.enabled;
       chart.update();
     }
   }, {

diff --git a/docs/samples/drag/log.md b/docs/samples/drag/log.md
@@ -146,8 +146,9 @@ const config = {
           modifierKey: 'ctrl',
         },
         zoom: {
-          enabled: true,
-          drag: true,
+          drag: {
+            enabled: true
+          },
           mode: 'xy',
         },
       }

diff --git a/docs/samples/drag/time.md b/docs/samples/drag/time.md
@@ -60,15 +60,16 @@ const zoomOptions = {
     modifierKey: 'ctrl',
   },
   zoom: {
-    enabled: true,
-    drag: true,
+    drag: {
+      enabled: true
+    },
     mode: 'xy',
   },
 };
 // </block>
 
 const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
-const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
+const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';
 
 // <block:config:1>
 const config = {
@@ -92,7 +93,7 @@ const actions = [
   {
     name: 'Toggle zoom',
     handler(chart) {
-      zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
+      zoomOptions.zoom.drag.enabled = !zoomOptions.zoom.drag.enabled;
       chart.update();
     }
   }, {

diff --git a/docs/samples/drag/timeseries.md b/docs/samples/drag/timeseries.md
@@ -63,15 +63,16 @@ const zoomOptions = {
     modifierKey: 'ctrl',
   },
   zoom: {
-    enabled: true,
-    drag: true,
+    drag: {
+      enabled: true,
+    },
     mode: 'xy',
   },
 };
 // </block>
 
 const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
-const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
+const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';
 
 // <block:config:1>
 const config = {
@@ -95,7 +96,7 @@ const actions = [
   {
     name: 'Toggle zoom',
     handler(chart) {
-      zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
+      zoomOptions.zoom.drag.enabled = !zoomOptions.zoom.drag.enabled;
       chart.update();
     }
   }, {

diff --git a/docs/samples/pan-region.md b/docs/samples/pan-region.md
@@ -71,7 +71,12 @@ const zoomOptions = {
     mode: 'xy',
   },
   zoom: {
-    enabled: false,
+    wheel: {
+      enabled: false,
+    },
+    pinch: {
+      enabled: true
+    },
   }
 };
 // </block:zoom>

diff --git a/docs/samples/wheel/category.md b/docs/samples/wheel/category.md
@@ -63,7 +63,12 @@ const config = {
           threshold: 5,
         },
         zoom: {
-          enabled: true,
+          wheel: {
+            enabled: true
+          },
+          pinch: {
+            enabled: true
+          },
           mode: 'xy',
         },
       }

diff --git a/docs/samples/wheel/click-zoom.md b/docs/samples/wheel/click-zoom.md
@@ -57,7 +57,12 @@ const zoomOptions = {
     mode: 'xy',
   },
   zoom: {
-    enabled: false,
+    wheel: {
+      enabled: false,
+    },
+    pinch: {
+      enabled: false
+    },
     mode: 'xy',
   }
 };
@@ -97,7 +102,8 @@ const config = {
     },
     onClick(e) {
       const chart = e.chart;
-      chart.options.plugins.zoom.zoom.enabled = !chart.options.plugins.zoom.zoom.enabled;
+      chart.options.plugins.zoom.zoom.wheel.enabled = !chart.options.plugins.zoom.zoom.wheel.enabled;
+      chart.options.plugins.zoom.zoom.pinch.enabled = !chart.options.plugins.zoom.zoom.pinch.enabled;
       chart.update();
     }
   },
@@ -117,7 +123,7 @@ const actions = [
   }, {
     name: 'Toggle zoom',
     handler(chart) {
-      zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
+      zoomOptions.zoom.wheel.enabled = !zoomOptions.zoom.wheel.enabled;
       chart.update();
     }
   }, {

diff --git a/docs/samples/wheel/log.md b/docs/samples/wheel/log.md
@@ -147,7 +147,12 @@ const config = {
           mode: 'xy',
         },
         zoom: {
-          enabled: true,
+          wheel: {
+            enabled: true
+          },
+          pinch: {
+            enabled: true,
+          },
           mode: 'xy',
         },
       }

diff --git a/docs/samples/wheel/over-scale-mode.md b/docs/samples/wheel/over-scale-mode.md
@@ -55,7 +55,12 @@ Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));
 // <block:zoom:0>
 const zoomOptions = {
   zoom: {
-    enabled: true,
+    wheel: {
+      enabled: true,
+    },
+    pinch: {
+      enabled: true,
+    },
     mode: 'xy',
     overScaleMode: 'xy',
   },
@@ -68,7 +73,7 @@ const zoomOptions = {
 // </block>
 
 const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
-const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
+const zoomStatus = () => zoomOptions.zoom.wheel.enabled ? 'enabled' : 'disabled';
 
 // <block:config:1>
 const config = {
@@ -92,7 +97,8 @@ const actions = [
   {
     name: 'Toggle zoom',
     handler(chart) {
-      zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
+      zoomOptions.zoom.wheel.enabled = !zoomOptions.zoom.wheel.enabled;
+      zoomOptions.zoom.pinch.enabled = !zoomOptions.zoom.pinch.enabled;
       chart.update();
     }
   }, {

diff --git a/docs/samples/wheel/time.md b/docs/samples/wheel/time.md
@@ -54,7 +54,12 @@ const scales = {
 // <block:zoom:0>
 const zoomOptions = {
   zoom: {
-    enabled: true,
+    wheel: {
+      enabled: true,
+    },
+    pinch: {
+      enabled: true,
+    },
     mode: 'xy',
   },
   pan: {
@@ -65,7 +70,7 @@ const zoomOptions = {
 // </block>
 
 const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
-const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
+const zoomStatus = () => zoomOptions.zoom.wheel.enabled ? 'enabled' : 'disabled';
 
 // <block:config:1>
 const config = {
@@ -92,7 +97,8 @@ const actions = [
   {
     name: 'Toggle zoom',
     handler(chart) {
-      zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
+      zoomOptions.zoom.wheel.enabled = !zoomOptions.zoom.wheel.enabled;
+      zoomOptions.zoom.pinch.enabled = !zoomOptions.zoom.pinch.enabled;
       chart.update();
     }
   }, {

diff --git a/samples/zoom-separately.html b/samples/zoom-separately.html
@@ -104,7 +104,12 @@
 								overScaleMode: 'y'
 							},
 							zoom: {
-								enabled: true,
+								wheel: {
+									enabled: true,
+								},
+								pinch: {
+									enabled: true,
+								},
 								mode: 'xy',
 								overScaleMode: 'y'
 							}

diff --git a/src/hammer.js b/src/hammer.js
@@ -67,7 +67,7 @@ function handlePinch(chart, state, e) {
 }
 
 function startPinch(chart, state) {
-  if (state.options.zoom.enabled) {
+  if (state.options.zoom.pinch.enabled) {
     state.scale = 1;
   }
 }
@@ -125,7 +125,7 @@ export function startHammer(chart, options) {
   const {pan: panOptions, zoom: zoomOptions} = options;
 
   const mc = new Hammer.Manager(canvas);
-  if (zoomOptions && zoomOptions.enabled) {
+  if (zoomOptions && zoomOptions.pinch.enabled) {
     mc.add(new Hammer.Pinch());
     mc.on('pinchstart', () => startPinch(chart, state));
     mc.on('pinch', (e) => handlePinch(chart, state, e));