802517394

Build Type

push

github

Committed by GitHub

Commit Message

Add onPanStart and onZoomStart callbacks (#487)

Run Details

202 of 274 branches covered (73.72%)

Branch coverage included in aggregate %.

24 of 25 new or added lines in 3 files covered. (96.0%)

1 existing line in 1 file now uncovered.

318 of 377 relevant lines covered (84.35%)

368.55 hits per line

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

90.91

/src/handlers.js

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

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

function addHandler(chart, target, type, handler) {
  const {handlers, options} = getState(chart);
  removeHandler(chart, target, type);
  handlers[type] = (event) => handler(chart, event, options);
  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.modifierKey;
  if (panKey && event[panKey + 'Key']) {
    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.canvas, 'mousemove', chart);
  const zoomOptions = state.options.zoom;
  const rect = computeDragRect(chart, zoomOptions.mode, state.dragStart, event);
  const {width: dragDistanceX, height: dragDistanceY} = rect;

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

  const zoomThreshold = zoomOptions.threshold || 0;
  if (dragDistanceX <= zoomThreshold && dragDistanceY <= zoomThreshold) {
    return;
  }

  const {top, left, width, height} = chart.chartArea;
  const amount = {
    x: rect.zoomX,
    y: rect.zoomY,
    focalPoint: {
      x: (rect.left - left) / (1 - dragDistanceX / width) + left,
      y: (rect.top - top) / (1 - dragDistanceY / height) + top
    }
  };
  zoom(chart, amount, 'zoom');

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

function wheelPreconditions(chart, event, zoomOptions) {
  const {wheelModifierKey, onZoomRejected} = zoomOptions;
  // Before preventDefault, check if the modifier key required and pressed
  if (wheelModifierKey && !event[wheelModifierKey + 'Key']) {
    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.speed : zoomOptions.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 {enabled: zoomEnabled, drag: dragEnabled, 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 (zoomEnabled && !dragEnabled) {
    addHandler(chart, canvas, 'wheel', wheel);
    addDebouncedHandler(chart, 'onZoomComplete', onZoomComplete, 250);
  } else {
    removeHandler(chart, canvas, 'wheel');
  }
  if (zoomEnabled && dragEnabled) {
    addHandler(chart, canvas, 'mousedown', mouseDown);
    addHandler(chart, canvas.ownerDocument, 'mouseup', mouseUp);
  } else {
    removeHandler(chart, canvas, 'mousedown');
    removeHandler(chart, canvas, 'mousemove');
    removeHandler(chart, canvas.ownerDocument, 'mouseup');
  }
}

export function removeListeners(chart) {
  const {canvas} = chart;
  if (!canvas) {
    return;
  }
  removeHandler(chart, canvas, 'mousedown');
  removeHandler(chart, canvas, 'mousemove');
  removeHandler(chart, canvas.ownerDocument, 'mouseup');
  removeHandler(chart, canvas, 'wheel');
  removeHandler(chart, canvas, 'click');
}

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

chartjs / chartjs-plugin-zoom / 802517394

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