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

Author: jledentu

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
 

docs/guide/usage.md

@@ -20,7 +20,12 @@ const config = {
     plugins: {
       zoom: {
         zoom: {
-          enabled: true,
+          wheel: {
+            enabled: true,
+          },
+          pinch: {
+            enabled: true
+          },
           mode: 'xy',
         }
       }

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();
     }
   }, {

docs/samples/drag/category.md

@@ -67,8 +67,9 @@ const config = {
           modifierKey: 'ctrl',
         },
         zoom: {
-          enabled: true,
-          drag: true,
+          drag: {
+            enabled: true
+          },
           mode: 'x',
         },
       }

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();
     }
   }, {

docs/samples/drag/log.md

@@ -146,8 +146,9 @@ const config = {
           modifierKey: 'ctrl',
         },
         zoom: {
-          enabled: true,
-          drag: true,
+          drag: {
+            enabled: true
+          },
           mode: 'xy',
         },
       }

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();
     }
   }, {

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();
     }
   }, {

docs/samples/pan-region.md

@@ -71,7 +71,12 @@ const zoomOptions = {
     mode: 'xy',
   },
   zoom: {
-    enabled: false,
+    wheel: {
+      enabled: false,
+    },
+    pinch: {
+      enabled: true
+    },
   }
 };
 // </block:zoom>

docs/samples/wheel/category.md

@@ -63,7 +63,12 @@ const config = {
           threshold: 5,
         },
         zoom: {
-          enabled: true,
+          wheel: {
+            enabled: true
+          },
+          pinch: {
+            enabled: true
+          },
           mode: 'xy',
         },
       }