Skip to content

Commit 5ed4e2a

Browse files
authored
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
1 parent 7796886 commit 5ed4e2a

File tree

25 files changed

+259
-113
lines changed

25 files changed

+259
-113
lines changed

docs/guide/options.md

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -53,21 +53,35 @@ const chart = new Chart('id', {
5353

5454
| Name | Type | Default | Description
5555
| ---- | ---- | ------- | ----------
56-
| `enabled` | `boolean` | `false` | Enable zooming
57-
| `drag` | `boolean`\|[`DragEffectOptions`](#drag-effect-options) | `undefined` | Enable drag-to-zoom behavior (disables zooming by wheel)
56+
| `wheel` | [`WheelOptions`](#wheel-options) | `undefined` | Options of the mouse wheel behavior
57+
| `drag` | [`DragOptions`](#drag-options) | `undefined` | Options of the drag-to-zoom behavior
58+
| `pinch` | [`PinchOptions`](#pinch-options) | `undefined` | Options of the pinch behavior
5859
| `mode` | `'x'`\|`'y'`\|`'xy'` | `'xy'` | Allowed zoom directions
5960
| `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
60-
| `speed` | `number` | `0.1` | Factor of zoom speed via mouse wheel.
61-
| `threshold` | `number` | `0` | Mimimal zoom distance required before actually applying zoom
62-
| `wheelModifierKey` | `'ctrl'`\|`'alt'`\|`'shift'`\|`'meta'` | `null` | Modifier key required for zooming with mouse
6361

64-
#### Drag effect options
62+
#### Wheel options
6563

66-
| Name | Type | Description
67-
| ---- | -----| -----------
68-
| `backgroundColor` | `Color` | Fill color
69-
| `borderColor` | `Color` | Stroke color
70-
| `borderWidth` | `number` | Stroke width
64+
| Name | Type | Default | Description
65+
| ---- | -----| ------- | -----------
66+
| `enabled` | `boolean` | `false` | Enable zooming via mouse wheel
67+
| `speed` | `number` | `0.1` | Factor of zoom speed via mouse wheel
68+
| `modifierKey` | `'ctrl'`\|`'alt'`\|`'shift'`\|`'meta'` | `null` | Modifier key required for zooming with mouse
69+
70+
#### Drag options
71+
72+
| Name | Type | Default | Description
73+
| ---- | -----| ------- | -----------
74+
| `enabled` | `boolean` | `false` | Enable drag-to-zoom
75+
| `backgroundColor` | `Color` | `'rgba(225,225,225,0.3)'` | Fill color
76+
| `borderColor` | `Color` | `'rgba(225,225,225)'` | Stroke color
77+
| `borderWidth` | `number` | `0` | Stroke width
78+
| `threshold` | `number` | `0` | Minimal zoom distance required before actually applying zoom
79+
80+
#### Pinch options
81+
82+
| Name | Type | Default | Description
83+
| ---- | -----| ------- | -----------
84+
| `enabled` | `boolean` | `false` | Enable zooming via pinch
7185

7286
### Zoom Events
7387

docs/guide/usage.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,12 @@ const config = {
2020
plugins: {
2121
zoom: {
2222
zoom: {
23-
enabled: true,
23+
wheel: {
24+
enabled: true,
25+
},
26+
pinch: {
27+
enabled: true
28+
},
2429
mode: 'xy',
2530
}
2631
}

docs/samples/basic.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,19 @@ const zoomOptions = {
6161
mode: 'xy',
6262
},
6363
zoom: {
64-
enabled: true,
64+
wheel: {
65+
enabled: true,
66+
},
67+
pinch: {
68+
enabled: true
69+
},
6570
mode: 'xy',
6671
}
6772
};
6873
// </block:zoom>
6974

7075
const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
71-
const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
76+
const zoomStatus = () => zoomOptions.zoom.wheel.enabled ? 'enabled' : 'disabled';
7277

7378
// <block:config:1>
7479
const config = {
@@ -95,7 +100,8 @@ const actions = [
95100
{
96101
name: 'Toggle zoom',
97102
handler(chart) {
98-
zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
103+
zoomOptions.zoom.wheel.enabled = !zoomOptions.zoom.wheel.enabled;
104+
zoomOptions.zoom.pinch.enabled = !zoomOptions.zoom.pinch.enabled;
99105
chart.update();
100106
}
101107
}, {

docs/samples/drag/category.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,9 @@ const config = {
6767
modifierKey: 'ctrl',
6868
},
6969
zoom: {
70-
enabled: true,
71-
drag: true,
70+
drag: {
71+
enabled: true
72+
},
7273
mode: 'x',
7374
},
7475
}

docs/samples/drag/linear.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,9 @@ const zoomOptions = {
6161
modifierKey: 'ctrl',
6262
},
6363
zoom: {
64-
enabled: true,
6564
mode: 'xy',
6665
drag: {
66+
enabled: true,
6767
borderColor: 'rgb(54, 162, 235)',
6868
borderWidth: 1,
6969
backgroundColor: 'rgba(54, 162, 235, 0.3)'
@@ -72,7 +72,7 @@ const zoomOptions = {
7272
};
7373
// </block:zoom>
7474

75-
const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
75+
const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';
7676

7777
// <block:config:1>
7878
const config = {
@@ -96,7 +96,7 @@ const actions = [
9696
{
9797
name: 'Toggle zoom',
9898
handler(chart) {
99-
zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
99+
zoomOptions.zoom.drag.enabled = !zoomOptions.zoom.drag.enabled;
100100
chart.update();
101101
}
102102
}, {

docs/samples/drag/log.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,9 @@ const config = {
146146
modifierKey: 'ctrl',
147147
},
148148
zoom: {
149-
enabled: true,
150-
drag: true,
149+
drag: {
150+
enabled: true
151+
},
151152
mode: 'xy',
152153
},
153154
}

docs/samples/drag/time.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,15 +60,16 @@ const zoomOptions = {
6060
modifierKey: 'ctrl',
6161
},
6262
zoom: {
63-
enabled: true,
64-
drag: true,
63+
drag: {
64+
enabled: true
65+
},
6566
mode: 'xy',
6667
},
6768
};
6869
// </block>
6970

7071
const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
71-
const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
72+
const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';
7273

7374
// <block:config:1>
7475
const config = {
@@ -92,7 +93,7 @@ const actions = [
9293
{
9394
name: 'Toggle zoom',
9495
handler(chart) {
95-
zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
96+
zoomOptions.zoom.drag.enabled = !zoomOptions.zoom.drag.enabled;
9697
chart.update();
9798
}
9899
}, {

docs/samples/drag/timeseries.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,15 +63,16 @@ const zoomOptions = {
6363
modifierKey: 'ctrl',
6464
},
6565
zoom: {
66-
enabled: true,
67-
drag: true,
66+
drag: {
67+
enabled: true,
68+
},
6869
mode: 'xy',
6970
},
7071
};
7172
// </block>
7273

7374
const panStatus = () => zoomOptions.pan.enabled ? 'enabled' : 'disabled';
74-
const zoomStatus = () => zoomOptions.zoom.enabled ? 'enabled' : 'disabled';
75+
const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';
7576

7677
// <block:config:1>
7778
const config = {
@@ -95,7 +96,7 @@ const actions = [
9596
{
9697
name: 'Toggle zoom',
9798
handler(chart) {
98-
zoomOptions.zoom.enabled = !zoomOptions.zoom.enabled;
99+
zoomOptions.zoom.drag.enabled = !zoomOptions.zoom.drag.enabled;
99100
chart.update();
100101
}
101102
}, {

docs/samples/pan-region.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,12 @@ const zoomOptions = {
7171
mode: 'xy',
7272
},
7373
zoom: {
74-
enabled: false,
74+
wheel: {
75+
enabled: false,
76+
},
77+
pinch: {
78+
enabled: true
79+
},
7580
}
7681
};
7782
// </block:zoom>

docs/samples/wheel/category.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,12 @@ const config = {
6363
threshold: 5,
6464
},
6565
zoom: {
66-
enabled: true,
66+
wheel: {
67+
enabled: true
68+
},
69+
pinch: {
70+
enabled: true
71+
},
6772
mode: 'xy',
6873
},
6974
}

0 commit comments

Comments
 (0)