Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix zoom outside of chart area #811

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Fix zoom outside of chart area #811

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
91c9c9b
fix: typo in contribution guideline
gopal-panigrahi Mar 9, 2024
3b7e123
fix: sample graph
gopal-panigrahi Mar 9, 2024
5e7051c
fix: clips drag region to chart area, and zooms drag area only
gopal-panigrahi Mar 9, 2024
76065cb
refactored position calculation for reducing cyclometric complexity
gopal-panigrahi Mar 17, 2024
d9fd526
extended drag rect boundary to entire canvas area
gopal-panigrahi Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,4 @@ By contributing your code, you agree to license your contribution under the [MIT
Releases
-------

See [the maintaining guide](Maintaining.md).
See [the maintaining guide](MAINTAINING.md).
2 changes: 1 addition & 1 deletion samples/zoom-separately.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<head>
<title>Chart.js Zoom each scale separately</title>
<script src="../node_modules/chart.js/dist/chart.js"></script>
<script src="../node_modules/chart.js/dist/chart.umd.js"></script>
<script src="../node_modules/hammerjs/hammer.min.js"></script>
<script src="../dist/chartjs-plugin-zoom.min.js"></script>

Expand Down
28 changes: 19 additions & 9 deletions src/handlers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {directionEnabled, debounce, keyNotPressed, getModifierKey, keyPressed} from './utils';
import {zoom, zoomRect} from './core';
import {callback as call, getRelativePosition} from 'chart.js/helpers';
import {callback as call, getRelativePosition, _isPointInArea} from 'chart.js/helpers';
import {getState} from './state';

function removeHandler(chart, type) {
Expand Down Expand Up @@ -46,10 +46,20 @@ function keyDown(chart, event) {
chart.update('none');
}

function getPointPosition(event, chart) {
const point = getRelativePosition(event, chart);
const canvasArea = chart.canvas.getBoundingClientRect();
if (!_isPointInArea(event, canvasArea)) {
point.x = event.clientX - canvasArea.left;
point.y = event.clientY - canvasArea.top;
}
return point;
}

function zoomStart(chart, event, zoomOptions) {
const {onZoomStart, onZoomRejected} = zoomOptions;
if (onZoomStart) {
const point = getRelativePosition(event, chart);
const point = getPointPosition(event, chart);
if (call(onZoomStart, [{chart, event, point}]) === false) {
call(onZoomRejected, [{chart, event}]);
return false;
Expand All @@ -73,7 +83,7 @@ export function mouseDown(chart, event) {
}
state.dragStart = event;

addHandler(chart, chart.canvas, 'mousemove', mouseMove);
addHandler(chart, chart.canvas.ownerDocument, 'mousemove', mouseMove);
addHandler(chart, window.document, 'keydown', keyDown);
}

Expand All @@ -82,17 +92,17 @@ export function computeDragRect(chart, mode, beginPointEvent, endPointEvent) {
const yEnabled = directionEnabled(mode, 'y', chart);
let {top, left, right, bottom, width: chartWidth, height: chartHeight} = chart.chartArea;

const beginPoint = getRelativePosition(beginPointEvent, chart);
const endPoint = getRelativePosition(endPointEvent, chart);
const beginPoint = getPointPosition(beginPointEvent, chart);
const endPoint = getPointPosition(endPointEvent, chart);

if (xEnabled) {
left = Math.min(beginPoint.x, endPoint.x);
right = Math.max(beginPoint.x, endPoint.x);
left = Math.max(0, Math.min(beginPoint.x, endPoint.x));
right = Math.min(chart.width, Math.max(beginPoint.x, endPoint.x));
}

if (yEnabled) {
top = Math.min(beginPoint.y, endPoint.y);
bottom = Math.max(beginPoint.y, endPoint.y);
top = Math.max(0, Math.min(beginPoint.y, endPoint.y));
bottom = Math.min(chart.height, Math.max(beginPoint.y, endPoint.y));
}
const width = right - left;
const height = bottom - top;
Expand Down