forked from chartjs/chartjs-plugin-zoom
/
plugin.js
112 lines (94 loc) · 3.2 KB
/
plugin.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import Hammer from 'hammerjs';
import {addListeners, computeDragRect, removeListeners} from './handlers';
import {startHammer, stopHammer} from './hammer';
import {pan, zoom, resetZoom, zoomScale, getZoomLevel, getInitialScaleBounds, isZoomedOrPanned} from './core';
import {panFunctions, zoomFunctions} from './scale.types';
import {getState, removeState} from './state';
import {version} from '../package.json';
export default {
id: 'zoom',
version,
defaults: {
pan: {
enabled: false,
mode: 'xy',
threshold: 10,
modifierKey: null,
},
zoom: {
wheel: {
enabled: false,
speed: 0.1,
modifierKey: null
},
drag: {
enabled: false,
modifierKey: null
},
pinch: {
enabled: false
},
mode: 'xy',
}
},
start: function(chart, _args, options) {
const state = getState(chart);
state.options = options;
if (Object.prototype.hasOwnProperty.call(options.zoom, 'enabled')) {
console.warn('The option `zoom.enabled` is no longer supported. Please use `zoom.wheel.enabled`, `zoom.drag.enabled`, or `zoom.pinch.enabled`.');
}
if (Object.prototype.hasOwnProperty.call(options.zoom, 'overScaleMode')
|| Object.prototype.hasOwnProperty.call(options.pan, 'overScaleMode')) {
console.warn('The option `overScaleMode` is deprecated. Please use `scaleMode` instead (and update `mode` as desired).');
}
if (Hammer) {
startHammer(chart, options);
}
chart.pan = (delta, panScales, transition) => pan(chart, delta, panScales, transition);
chart.zoom = (args, transition) => zoom(chart, args, transition);
chart.zoomScale = (id, range, transition) => zoomScale(chart, id, range, transition);
chart.resetZoom = (transition) => resetZoom(chart, transition);
chart.getZoomLevel = () => getZoomLevel(chart);
chart.getInitialScaleBounds = () => getInitialScaleBounds(chart);
chart.isZoomedOrPanned = () => isZoomedOrPanned(chart);
},
beforeEvent(chart) {
const state = getState(chart);
if (state.panning || state.dragging) {
// cancel any event handling while panning or dragging
return false;
}
},
beforeUpdate: function(chart, args, options) {
const state = getState(chart);
state.options = options;
addListeners(chart, options);
},
beforeDatasetsDraw: function(chart, args, options) {
const {dragStart, dragEnd} = getState(chart);
if (dragEnd) {
const {left, top, width, height} = computeDragRect(chart, options.zoom.mode, dragStart, dragEnd);
const dragOptions = options.zoom.drag;
const ctx = chart.ctx;
ctx.save();
ctx.beginPath();
ctx.fillStyle = dragOptions.backgroundColor || 'rgba(225,225,225,0.3)';
ctx.fillRect(left, top, width, height);
if (dragOptions.borderWidth > 0) {
ctx.lineWidth = dragOptions.borderWidth;
ctx.strokeStyle = dragOptions.borderColor || 'rgba(225,225,225)';
ctx.strokeRect(left, top, width, height);
}
ctx.restore();
}
},
stop: function(chart) {
removeListeners(chart);
if (Hammer) {
stopHammer(chart);
}
removeState(chart);
},
panFunctions,
zoomFunctions
};