Skip to content

Fix zoom outside of chart area #811

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

Merged
kurkle merged 7 commits into from
Nov 17, 2024
Merged

Fix zoom outside of chart area #811

Changes from all commits
Commits
Show all changes
7 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
990188d
Merge branch 'chartjs:master' into master
gopal-panigrahi Nov 15, 2024
9ac8d80
Merge branch 'chartjs:master' into master
gopal-panigrahi Nov 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions src/handlers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,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 Down Expand Up @@ -82,7 +92,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 @@ -91,17 +101,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
Loading