987030399

Build Type

github

Committed by GitHub

Commit Message

Merge b2cf10064 into 09e0eaa2e

Pull Request Pull Request #555: Add modifierKey option for drag-to-zoom

Run Details

252 of 312 branches covered (80.77%)

Branch coverage included in aggregate %.

6 of 6 new or added lines in 2 files covered. (100.0%)

27 existing lines in 3 files now uncovered.

377 of 436 relevant lines covered (86.47%)

937.45 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

95.29

/src/handlers.js

import {directionEnabled, debounce} from './utils';
import {zoom, zoomRect} from './core';
import {callback as call} from 'chart.js/helpers';
import {getState} from './state';

export const modifierKeyPressed = (key, event) => key && event[key + 'Key'];
export const modifierKeyNotPressed = (key, event) => key && !event[key + 'Key'];

function removeHandler(chart, type) {
  const {handlers} = getState(chart);
  const handler = handlers[type];
  if (handler && handler.target) {
    handler.target.removeEventListener(type, handler);
    delete handlers[type];
  }
}

function addHandler(chart, target, type, handler) {
  const {handlers, options} = getState(chart);
  removeHandler(chart, type);
  handlers[type] = (event) => handler(chart, event, options);
  handlers[type].target = target;
  target.addEventListener(type, handlers[type]);
}

export function mouseMove(chart, event) {
  const state = getState(chart);
  if (state.dragStart) {
    state.dragging = true;
    state.dragEnd = event;
    chart.update('none');
  }
}

function zoomStart(chart, event, zoomOptions) {
  const {onZoomStart, onZoomRejected} = zoomOptions;
  if (onZoomStart) {
    const {left: offsetX, top: offsetY} = event.target.getBoundingClientRect();
    const point = {
      x: event.clientX - offsetX,
      y: event.clientY - offsetY
    };
    if (call(onZoomStart, [{chart, event, point}]) === false) {
      call(onZoomRejected, [{chart, event}]);
      return false;
    }
  }
}

export function mouseDown(chart, event) {
  const state = getState(chart);
  const {pan: panOptions, zoom: zoomOptions} = state.options;
  const panKey = panOptions && panOptions.enabled && panOptions.modifierKey;
  const dragKey = zoomOptions && zoomOptions.drag && zoomOptions.drag.modifierKey;
  if (modifierKeyPressed(panKey, event) || modifierKeyNotPressed(dragKey, event)) {
    return call(zoomOptions.onZoomRejected, [{chart, event}]);
  }

  if (zoomStart(chart, event, zoomOptions) === false) {
    return;
  }
  state.dragStart = event;

  addHandler(chart, chart.canvas, 'mousemove', mouseMove);
}

export function computeDragRect(chart, mode, beginPoint, endPoint) {
  const {left: offsetX, top: offsetY} = beginPoint.target.getBoundingClientRect();
  const xEnabled = directionEnabled(mode, 'x', chart);
  const yEnabled = directionEnabled(mode, 'y', chart);
  let {top, left, right, bottom, width: chartWidth, height: chartHeight} = chart.chartArea;

  if (xEnabled) {
    left = Math.min(beginPoint.clientX, endPoint.clientX) - offsetX;
    right = Math.max(beginPoint.clientX, endPoint.clientX) - offsetX;
  }

  if (yEnabled) {
    top = Math.min(beginPoint.clientY, endPoint.clientY) - offsetY;
    bottom = Math.max(beginPoint.clientY, endPoint.clientY) - offsetY;
  }
  const width = right - left;
  const height = bottom - top;

  return {
    left,
    top,
    right,
    bottom,
    width,
    height,
    zoomX: xEnabled && width ? 1 + ((chartWidth - width) / chartWidth) : 1,
    zoomY: yEnabled && height ? 1 + ((chartHeight - height) / chartHeight) : 1
  };
}

export function mouseUp(chart, event) {
  const state = getState(chart);
  if (!state.dragStart) {
    return;
  }

  removeHandler(chart, 'mousemove');
  const {mode, onZoomComplete, drag: {threshold = 0}} = state.options.zoom;
  const rect = computeDragRect(chart, mode, state.dragStart, event);
  const distanceX = directionEnabled(mode, 'x', chart) ? rect.width : 0;
  const distanceY = directionEnabled(mode, 'y', chart) ? rect.height : 0;
  const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);

  // Remove drag start and end before chart update to stop drawing selected area
  state.dragStart = state.dragEnd = null;

  if (distance <= threshold) {
    state.dragging = false;
    chart.update('none');
    return;
  }

  zoomRect(chart, {x: rect.left, y: rect.top}, {x: rect.right, y: rect.bottom}, 'zoom');

  setTimeout(() => (state.dragging = false), 500);
  call(onZoomComplete, [{chart}]);
}

function wheelPreconditions(chart, event, zoomOptions) {
  const {wheel: wheelOptions, onZoomRejected} = zoomOptions;
  // Before preventDefault, check if the modifier key required and pressed
  if (modifierKeyNotPressed(wheelOptions.modifierKey, event)) {
    call(onZoomRejected, [{chart, event}]);
    return;
  }

  if (zoomStart(chart, event, zoomOptions) === false) {
    return;
  }

  // Prevent the event from triggering the default behavior (eg. Content scrolling).
  if (event.cancelable) {
    event.preventDefault();
  }

  // Firefox always fires the wheel event twice:
  // First without the delta and right after that once with the delta properties.
  if (event.deltaY === undefined) {
    return;
  }
  return true;
}

export function wheel(chart, event) {
  const {handlers: {onZoomComplete}, options: {zoom: zoomOptions}} = getState(chart);

  if (!wheelPreconditions(chart, event, zoomOptions)) {
    return;
  }

  const rect = event.target.getBoundingClientRect();
  const speed = 1 + (event.deltaY >= 0 ? -zoomOptions.wheel.speed : zoomOptions.wheel.speed);
  const amount = {
    x: speed,
    y: speed,
    focalPoint: {
      x: event.clientX - rect.left,
      y: event.clientY - rect.top
    }
  };

  zoom(chart, amount);

  if (onZoomComplete) {
    onZoomComplete();
  }
}

function addDebouncedHandler(chart, name, handler, delay) {
  if (handler) {
    getState(chart).handlers[name] = debounce(() => call(handler, [{chart}]), delay);
  }
}

export function addListeners(chart, options) {
  const canvas = chart.canvas;
  const {wheel: wheelOptions, drag: dragOptions, onZoomComplete} = options.zoom;

  // Install listeners. Do this dynamically based on options so that we can turn zoom on and off
  // We also want to make sure listeners aren't always on. E.g. if you're scrolling down a page
  // and the mouse goes over a chart you don't want it intercepted unless the plugin is enabled
  if (wheelOptions.enabled) {
    addHandler(chart, canvas, 'wheel', wheel);
    addDebouncedHandler(chart, 'onZoomComplete', onZoomComplete, 250);
  } else {
    removeHandler(chart, 'wheel');
  }
  if (dragOptions.enabled) {
    addHandler(chart, canvas, 'mousedown', mouseDown);
    addHandler(chart, canvas.ownerDocument, 'mouseup', mouseUp);
  } else {
    removeHandler(chart, 'mousedown');
    removeHandler(chart, 'mousemove');
    removeHandler(chart, 'mouseup');
  }
}

export function removeListeners(chart) {
  removeHandler(chart, 'mousedown');
  removeHandler(chart, 'mousemove');
  removeHandler(chart, 'mouseup');
  removeHandler(chart, 'wheel');
  removeHandler(chart, 'click');
}

1	import {directionEnabled, debounce} from './utils';
2	import {zoom, zoomRect} from './core';
3	import {callback as call} from 'chart.js/helpers';
4	import {getState} from './state';
5
6	export const modifierKeyPressed = (key, event) => key && event[key + 'Key'];	96✔
7	export const modifierKeyNotPressed = (key, event) => key && !event[key + 'Key'];	204✔
8
9	function removeHandler(chart, type) {
10	const {handlers} = getState(chart);	34,695✔
11	const handler = handlers[type];	34,695✔
12	if (handler && handler.target) {	34,695✔
13	handler.target.removeEventListener(type, handler);	668✔
14	delete handlers[type];	668✔
15	}
16	}
17
18	function addHandler(chart, target, type, handler) {
19	const {handlers, options} = getState(chart);	668✔
20	removeHandler(chart, type);	668✔
21	handlers[type] = (event) => handler(chart, event, options);	668✔
22	handlers[type].target = target;	668✔
23	target.addEventListener(type, handlers[type]);	668✔
24	}
25
26	export function mouseMove(chart, event) {
27	const state = getState(chart);	40✔
28	if (state.dragStart) {	40!
29	state.dragging = true;	40✔
30	state.dragEnd = event;	40✔
31	chart.update('none');	40✔
32	}
33	}
34
35	function zoomStart(chart, event, zoomOptions) {
36	const {onZoomStart, onZoomRejected} = zoomOptions;	172✔
37	if (onZoomStart) {	172✔
38	const {left: offsetX, top: offsetY} = event.target.getBoundingClientRect();	16✔
39	const point = {	16✔
40	x: event.clientX - offsetX,
41	y: event.clientY - offsetY
42	};
43	if (call(onZoomStart, [{chart, event, point}]) === false) {	16✔
44	call(onZoomRejected, [{chart, event}]);	8✔
45	return false;	8✔
46	}
47	}
48	}
49
50	export function mouseDown(chart, event) {
51	const state = getState(chart);	96✔
52	const {pan: panOptions, zoom: zoomOptions} = state.options;	96✔
53	const panKey = panOptions && panOptions.enabled && panOptions.modifierKey;	96✔
54	const dragKey = zoomOptions && zoomOptions.drag && zoomOptions.drag.modifierKey;	96✔
55	if (modifierKeyPressed(panKey, event) \|\| modifierKeyNotPressed(dragKey, event)) {	96✔
56	return call(zoomOptions.onZoomRejected, [{chart, event}]);	32✔
57	}
58
59	if (zoomStart(chart, event, zoomOptions) === false) {	64✔
60	return;	4✔
61	}
62	state.dragStart = event;	60✔
63
64	addHandler(chart, chart.canvas, 'mousemove', mouseMove);	60✔
65	}
66
67	export function computeDragRect(chart, mode, beginPoint, endPoint) {
68	const {left: offsetX, top: offsetY} = beginPoint.target.getBoundingClientRect();	96✔
69	const xEnabled = directionEnabled(mode, 'x', chart);	96✔
70	const yEnabled = directionEnabled(mode, 'y', chart);	96✔
71	let {top, left, right, bottom, width: chartWidth, height: chartHeight} = chart.chartArea;	96✔
72
73	if (xEnabled) {	96✔
74	left = Math.min(beginPoint.clientX, endPoint.clientX) - offsetX;	88✔
75	right = Math.max(beginPoint.clientX, endPoint.clientX) - offsetX;	88✔
76	}
77
78	if (yEnabled) {	96✔
79	top = Math.min(beginPoint.clientY, endPoint.clientY) - offsetY;	24✔
80	bottom = Math.max(beginPoint.clientY, endPoint.clientY) - offsetY;	24✔
81	}
82	const width = right - left;	96✔
83	const height = bottom - top;	96✔
84
85	return {	96✔
86	left,
87	top,
88	right,
89	bottom,
90	width,
91	height,
92	zoomX: xEnabled && width ? 1 + ((chartWidth - width) / chartWidth) : 1,	280✔
93	zoomY: yEnabled && height ? 1 + ((chartHeight - height) / chartHeight) : 1	216✔
94	};
95	}
96
97	export function mouseUp(chart, event) {
98	const state = getState(chart);	92✔
99	if (!state.dragStart) {	92✔
100	return;	36✔
101	}
102
103	removeHandler(chart, 'mousemove');	56✔
104	const {mode, onZoomComplete, drag: {threshold = 0}} = state.options.zoom;	56✔
105	const rect = computeDragRect(chart, mode, state.dragStart, event);	56✔
106	const distanceX = directionEnabled(mode, 'x', chart) ? rect.width : 0;	56✔
107	const distanceY = directionEnabled(mode, 'y', chart) ? rect.height : 0;	56✔
108	const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);	56✔
109
110	// Remove drag start and end before chart update to stop drawing selected area
111	state.dragStart = state.dragEnd = null;	56✔
112
113	if (distance <= threshold) {	56!
UNCOV 114	state.dragging = false;	×
UNCOV 115	chart.update('none');	×
UNCOV 116	return;	×
117	}
118
119	zoomRect(chart, {x: rect.left, y: rect.top}, {x: rect.right, y: rect.bottom}, 'zoom');	56✔
120
121	setTimeout(() => (state.dragging = false), 500);	56✔
122	call(onZoomComplete, [{chart}]);	56✔
123	}
124
125	function wheelPreconditions(chart, event, zoomOptions) {
126	const {wheel: wheelOptions, onZoomRejected} = zoomOptions;	124✔
127	// Before preventDefault, check if the modifier key required and pressed
128	if (modifierKeyNotPressed(wheelOptions.modifierKey, event)) {	124✔
129	call(onZoomRejected, [{chart, event}]);	16✔
130	return;	16✔
131	}
132
133	if (zoomStart(chart, event, zoomOptions) === false) {	108✔
134	return;	4✔
135	}
136
137	// Prevent the event from triggering the default behavior (eg. Content scrolling).
138	if (event.cancelable) {	104!
139	event.preventDefault();	104✔
140	}
141
142	// Firefox always fires the wheel event twice:
143	// First without the delta and right after that once with the delta properties.
144	if (event.deltaY === undefined) {	104!
UNCOV 145	return;	×
146	}
147	return true;	104✔
148	}
149
150	export function wheel(chart, event) {
151	const {handlers: {onZoomComplete}, options: {zoom: zoomOptions}} = getState(chart);	124✔
152
153	if (!wheelPreconditions(chart, event, zoomOptions)) {	124✔
154	return;	20✔
155	}
156
157	const rect = event.target.getBoundingClientRect();	104✔
158	const speed = 1 + (event.deltaY >= 0 ? -zoomOptions.wheel.speed : zoomOptions.wheel.speed);	104✔
159	const amount = {	104✔
160	x: speed,
161	y: speed,
162	focalPoint: {
163	x: event.clientX - rect.left,
164	y: event.clientY - rect.top
165	}
166	};
167
168	zoom(chart, amount);	104✔
169
170	if (onZoomComplete) {	104✔
171	onZoomComplete();	4✔
172	}
173	}
174
175	function addDebouncedHandler(chart, name, handler, delay) {
176	if (handler) {	224✔
177	getState(chart).handlers[name] = debounce(() => call(handler, [{chart}]), delay);	8✔
178	}
179	}
180
181	export function addListeners(chart, options) {
182	const canvas = chart.canvas;	1,344✔
183	const {wheel: wheelOptions, drag: dragOptions, onZoomComplete} = options.zoom;	1,344✔
184
185	// Install listeners. Do this dynamically based on options so that we can turn zoom on and off
186	// We also want to make sure listeners aren't always on. E.g. if you're scrolling down a page
187	// and the mouse goes over a chart you don't want it intercepted unless the plugin is enabled
188	if (wheelOptions.enabled) {	1,344✔
189	addHandler(chart, canvas, 'wheel', wheel);	224✔
190	addDebouncedHandler(chart, 'onZoomComplete', onZoomComplete, 250);	224✔
191	} else {
192	removeHandler(chart, 'wheel');	1,120✔
193	}
194	if (dragOptions.enabled) {	1,344✔
195	addHandler(chart, canvas, 'mousedown', mouseDown);	192✔
196	addHandler(chart, canvas.ownerDocument, 'mouseup', mouseUp);	192✔
197	} else {
198	removeHandler(chart, 'mousedown');	1,152✔
199	removeHandler(chart, 'mousemove');	1,152✔
200	removeHandler(chart, 'mouseup');	1,152✔
201	}
202	}
203
204	export function removeListeners(chart) {
205	removeHandler(chart, 'mousedown');	5,879✔
206	removeHandler(chart, 'mousemove');	5,879✔
207	removeHandler(chart, 'mouseup');	5,879✔
208	removeHandler(chart, 'wheel');	5,879✔
209	removeHandler(chart, 'click');	5,879✔
210	}

chartjs / chartjs-plugin-zoom / 987030399

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous