Skip to content

Commit 1bd916c

Browse files
jledentubenmccann
jledentu
authored and
benmccann
committed
Allow switching between wheel/drag modes of the zoom (#196)
Enable switching between wheel/drag modes of the zoom
1 parent 48a24d5 commit 1bd916c

File tree

2 files changed

+80
-64
lines changed

2 files changed

+80
-64
lines changed

‎samples/zoom-time.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<body>
2020
<div style="width:75%;">
2121
<button onclick="resetZoom()">Reset Zoom</button>
22+
<button id="drag-switch" onclick="toggleDragMode()">Disable drag mode</button>
2223
<canvas id="canvas"></canvas>
2324
</div>
2425
<script>
@@ -123,10 +124,19 @@
123124
dataset.pointBorderWidth = 1;
124125
});
125126

127+
window.resetZoom = function() {
128+
window.myLine.resetZoom();
129+
};
130+
131+
window.toggleDragMode = function() {
132+
var zoomOptions = window.myLine.options.zoom;
133+
zoomOptions.drag = !zoomOptions.drag;
134+
document.getElementById('drag-switch').innerText = zoomOptions.drag ? 'Disable drag mode' : 'Enable drag mode';
135+
};
136+
126137
window.onload = function() {
127138
var ctx = document.getElementById('canvas').getContext('2d');
128139
window.myLine = new window.Chart(ctx, config);
129-
130140
};
131141
</script>
132142
</body>

‎src/plugin.js‎

Lines changed: 69 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -364,66 +364,73 @@ var zoomPlugin = {
364364
if (!options.zoom || !options.zoom.enabled) {
365365
return;
366366
}
367-
if (options.zoom.drag) {
368-
chartInstance.zoom._mouseDownHandler = function(event) {
367+
368+
chartInstance.zoom._mouseDownHandler = function(event) {
369+
if (chartInstance.options.zoom.drag) {
370+
node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
369371
chartInstance.zoom._dragZoomStart = event;
370-
};
371-
node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
372+
}
373+
};
374+
node.addEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
372375

373-
chartInstance.zoom._mouseMoveHandler = function(event) {
374-
if (chartInstance.zoom._dragZoomStart) {
375-
chartInstance.zoom._dragZoomEnd = event;
376-
chartInstance.update(0);
377-
}
378-
};
379-
node.addEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
380-
381-
chartInstance.zoom._mouseUpHandler = function(event) {
382-
if (chartInstance.zoom._dragZoomStart) {
383-
var chartArea = chartInstance.chartArea;
384-
var xAxis = getXAxis(chartInstance);
385-
var yAxis = getYAxis(chartInstance);
386-
var beginPoint = chartInstance.zoom._dragZoomStart;
387-
var startX = xAxis.left;
388-
var endX = xAxis.right;
389-
var startY = yAxis.top;
390-
var endY = yAxis.bottom;
391-
392-
if (directionEnabled(options.zoom.mode, 'x')) {
393-
var offsetX = beginPoint.target.getBoundingClientRect().left;
394-
startX = Math.min(beginPoint.clientX, event.clientX) - offsetX;
395-
endX = Math.max(beginPoint.clientX, event.clientX) - offsetX;
396-
}
397-
398-
if (directionEnabled(options.zoom.mode, 'y')) {
399-
var offsetY = beginPoint.target.getBoundingClientRect().top;
400-
startY = Math.min(beginPoint.clientY, event.clientY) - offsetY;
401-
endY = Math.max(beginPoint.clientY, event.clientY) - offsetY;
402-
}
403-
404-
var dragDistanceX = endX - startX;
405-
var chartDistanceX = chartArea.right - chartArea.left;
406-
var zoomX = 1 + ((chartDistanceX - dragDistanceX) / chartDistanceX);
407-
408-
var dragDistanceY = endY - startY;
409-
var chartDistanceY = chartArea.bottom - chartArea.top;
410-
var zoomY = 1 + ((chartDistanceY - dragDistanceY) / chartDistanceY);
411-
412-
// Remove drag start and end before chart update to stop drawing selected area
413-
chartInstance.zoom._dragZoomStart = null;
414-
chartInstance.zoom._dragZoomEnd = null;
415-
416-
if (dragDistanceX > 0 || dragDistanceY > 0) {
417-
doZoom(chartInstance, zoomX, zoomY, {
418-
x: (startX - chartArea.left) / (1 - dragDistanceX / chartDistanceX) + chartArea.left,
419-
y: (startY - chartArea.top) / (1 - dragDistanceY / chartDistanceY) + chartArea.top
420-
});
421-
}
422-
}
423-
};
424-
node.ownerDocument.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
425-
} else {
426-
chartInstance.zoom._wheelHandler = function(event) {
376+
chartInstance.zoom._mouseMoveHandler = function(event) {
377+
if (chartInstance.options.zoom.drag && chartInstance.zoom._dragZoomStart) {
378+
chartInstance.zoom._dragZoomEnd = event;
379+
chartInstance.update(0);
380+
}
381+
};
382+
383+
chartInstance.zoom._mouseUpHandler = function(event) {
384+
if (!chartInstance.options.zoom.drag || !chartInstance.zoom._dragZoomStart) {
385+
return;
386+
}
387+
388+
node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
389+
390+
var chartArea = chartInstance.chartArea;
391+
var xAxis = getXAxis(chartInstance);
392+
var yAxis = getYAxis(chartInstance);
393+
var beginPoint = chartInstance.zoom._dragZoomStart;
394+
var startX = xAxis.left;
395+
var endX = xAxis.right;
396+
var startY = yAxis.top;
397+
var endY = yAxis.bottom;
398+
399+
if (directionEnabled(chartInstance.options.zoom.mode, 'x')) {
400+
var offsetX = beginPoint.target.getBoundingClientRect().left;
401+
startX = Math.min(beginPoint.clientX, event.clientX) - offsetX;
402+
endX = Math.max(beginPoint.clientX, event.clientX) - offsetX;
403+
}
404+
405+
if (directionEnabled(chartInstance.options.zoom.mode, 'y')) {
406+
var offsetY = beginPoint.target.getBoundingClientRect().top;
407+
startY = Math.min(beginPoint.clientY, event.clientY) - offsetY;
408+
endY = Math.max(beginPoint.clientY, event.clientY) - offsetY;
409+
}
410+
411+
var dragDistanceX = endX - startX;
412+
var chartDistanceX = chartArea.right - chartArea.left;
413+
var zoomX = 1 + ((chartDistanceX - dragDistanceX) / chartDistanceX);
414+
415+
var dragDistanceY = endY - startY;
416+
var chartDistanceY = chartArea.bottom - chartArea.top;
417+
var zoomY = 1 + ((chartDistanceY - dragDistanceY) / chartDistanceY);
418+
419+
// Remove drag start and end before chart update to stop drawing selected area
420+
chartInstance.zoom._dragZoomStart = null;
421+
chartInstance.zoom._dragZoomEnd = null;
422+
423+
if (dragDistanceX > 0 || dragDistanceY > 0) {
424+
doZoom(chartInstance, zoomX, zoomY, {
425+
x: (startX - chartArea.left) / (1 - dragDistanceX / chartDistanceX) + chartArea.left,
426+
y: (startY - chartArea.top) / (1 - dragDistanceY / chartDistanceY) + chartArea.top
427+
});
428+
}
429+
};
430+
node.ownerDocument.addEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
431+
432+
chartInstance.zoom._wheelHandler = function(event) {
433+
if (!chartInstance.options.zoom.drag) {
427434
var rect = event.target.getBoundingClientRect();
428435
var offsetX = event.clientX - rect.left;
429436
var offsetY = event.clientY - rect.top;
@@ -440,10 +447,10 @@ var zoomPlugin = {
440447
}
441448
// Prevent the event from triggering the default behavior (eg. Content scrolling).
442449
event.preventDefault();
443-
};
450+
}
451+
};
444452

445-
node.addEventListener('wheel', chartInstance.zoom._wheelHandler);
446-
}
453+
node.addEventListener('wheel', chartInstance.zoom._wheelHandler);
447454

448455
if (Hammer) {
449456
var mc = new Hammer.Manager(node);
@@ -592,11 +599,10 @@ var zoomPlugin = {
592599
var options = chartInstance.options;
593600
var node = chartInstance.zoom.node;
594601

595-
if (options.zoom && options.zoom.drag) {
602+
if (options.zoom) {
596603
node.removeEventListener('mousedown', chartInstance.zoom._mouseDownHandler);
597604
node.removeEventListener('mousemove', chartInstance.zoom._mouseMoveHandler);
598605
node.ownerDocument.removeEventListener('mouseup', chartInstance.zoom._mouseUpHandler);
599-
} else {
600606
node.removeEventListener('wheel', chartInstance.zoom._wheelHandler);
601607
}
602608

0 commit comments

Comments
 (0)