11883460899

Committed 18 Nov 2024 12:19AM UTC coverage: 83.705% (-0.1%) from 83.803%

Build # 11883460899

Build Type

push

github

Committed by

web-flow

Commit Message

chore: add sample for rejecting drag start outside chartArea (#890)

Run Details

228 of 288 branches covered (79.17%)

Branch coverage included in aggregate %.

0 of 3 new or added lines in 1 file covered. (0.0%)

1 existing line in 1 file now uncovered.

486 of 565 relevant lines covered (86.02%)

1536.55 hits per line

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

52.59

/src/hammer.js

import {callback as call, getRelativePosition} from 'chart.js/helpers';
import Hammer from 'hammerjs';
import {pan, zoom} from './core';
import {getState} from './state';
import {directionEnabled, getEnabledScalesByPoint, getModifierKey, keyNotPressed, keyPressed} from './utils';

function createEnabler(chart, state) {
  return function(recognizer, event) {
    const {pan: panOptions, zoom: zoomOptions = {}} = state.options;
    if (!panOptions || !panOptions.enabled) {
      return false;
    }
    const srcEvent = event && event.srcEvent;
    if (!srcEvent) { // Sometimes Hammer queries this with a null event.
      return true;
    }
    if (!state.panning && event.pointerType === 'mouse' && (
      keyNotPressed(getModifierKey(panOptions), srcEvent) || keyPressed(getModifierKey(zoomOptions.drag), srcEvent))
    ) {
      call(panOptions.onPanRejected, [{chart, event}]);
      return false;
    }
    return true;
  };
}

function pinchAxes(p0, p1) {
  // fingers position difference
  const pinchX = Math.abs(p0.clientX - p1.clientX);
  const pinchY = Math.abs(p0.clientY - p1.clientY);

  // diagonal fingers will change both (xy) axes
  const p = pinchX / pinchY;
  let x, y;
  if (p > 0.3 && p < 1.7) {
    x = y = true;
  } else if (pinchX > pinchY) {
    x = true;
  } else {
    y = true;
  }
  return {x, y};
}

function handlePinch(chart, state, e) {
  if (state.scale) {
    const {center, pointers} = e;
    // Hammer reports the total scaling. We need the incremental amount
    const zoomPercent = 1 / state.scale * e.scale;
    const rect = e.target.getBoundingClientRect();
    const pinch = pinchAxes(pointers[0], pointers[1]);
    const mode = state.options.zoom.mode;
    const amount = {
      x: pinch.x && directionEnabled(mode, 'x', chart) ? zoomPercent : 1,
      y: pinch.y && directionEnabled(mode, 'y', chart) ? zoomPercent : 1,
      focalPoint: {
        x: center.x - rect.left,
        y: center.y - rect.top
      }
    };

    zoom(chart, amount);

    // Keep track of overall scale
    state.scale = e.scale;
  }
}

function startPinch(chart, state, event) {
  if (state.options.zoom.pinch.enabled) {
    const point = getRelativePosition(event, chart);
    call(state.options.zoom.onZoomStart, [{chart, event, point}]);
    state.scale = 1;
  }
}

function endPinch(chart, state, e) {
  if (state.scale) {
    handlePinch(chart, state, e);
    state.scale = null; // reset
    call(state.options.zoom.onZoomComplete, [{chart}]);
  }
}

function handlePan(chart, state, e) {
  const delta = state.delta;
  if (delta) {
    state.panning = true;
    pan(chart, {x: e.deltaX - delta.x, y: e.deltaY - delta.y}, state.panScales);
    state.delta = {x: e.deltaX, y: e.deltaY};
  }
}

function startPan(chart, state, event) {
  const {enabled, onPanStart, onPanRejected} = state.options.pan;
  if (!enabled) {
    return;
  }
  const rect = event.target.getBoundingClientRect();
  const point = {
    x: event.center.x - rect.left,
    y: event.center.y - rect.top
  };

  if (call(onPanStart, [{chart, event, point}]) === false) {
    return call(onPanRejected, [{chart, event}]);
  }

  state.panScales = getEnabledScalesByPoint(state.options.pan, point, chart);
  state.delta = {x: 0, y: 0};
  clearTimeout(state.panEndTimeout);
  handlePan(chart, state, event);
}

function endPan(chart, state) {
  state.delta = null;
  if (state.panning) {
    state.panEndTimeout = setTimeout(() => (state.panning = false), 500);
    call(state.options.pan.onPanComplete, [{chart}]);
  }
}

const hammers = new WeakMap();
export function startHammer(chart, options) {
  const state = getState(chart);
  const canvas = chart.canvas;
  const {pan: panOptions, zoom: zoomOptions} = options;

  const mc = new Hammer.Manager(canvas);
  if (zoomOptions && zoomOptions.pinch.enabled) {
    mc.add(new Hammer.Pinch());
    mc.on('pinchstart', (e) => startPinch(chart, state, e));
    mc.on('pinch', (e) => handlePinch(chart, state, e));
    mc.on('pinchend', (e) => endPinch(chart, state, e));
  }

  if (panOptions && panOptions.enabled) {
    mc.add(new Hammer.Pan({
      threshold: panOptions.threshold,
      enable: createEnabler(chart, state)
    }));
    mc.on('panstart', (e) => startPan(chart, state, e));
    mc.on('panmove', (e) => handlePan(chart, state, e));
    mc.on('panend', () => endPan(chart, state));
  }

  hammers.set(chart, mc);
}

export function stopHammer(chart) {
  const mc = hammers.get(chart);
  if (mc) {
    mc.remove('pinchstart');
    mc.remove('pinch');
    mc.remove('pinchend');
    mc.remove('panstart');
    mc.remove('pan');
    mc.remove('panend');
    mc.destroy();
    hammers.delete(chart);
  }
}

export function hammerOptionsChanged(oldOptions, newOptions) {
  const {pan: oldPan, zoom: oldZoom} = oldOptions;
  const {pan: newPan, zoom: newZoom} = newOptions;

  if (oldZoom?.zoom?.pinch?.enabled !== newZoom?.zoom?.pinch?.enabled) {
    return true;
  }
  if (oldPan?.enabled !== newPan?.enabled) {
    return true;
  }
  if (oldPan?.threshold !== newPan?.threshold) {
    return true;
  }

  return false;
}

1	import {callback as call, getRelativePosition} from 'chart.js/helpers';
2	import Hammer from 'hammerjs';
3	import {pan, zoom} from './core';
4	import {getState} from './state';
5	import {directionEnabled, getEnabledScalesByPoint, getModifierKey, keyNotPressed, keyPressed} from './utils';
6
7	function createEnabler(chart, state) {
8	return function(recognizer, event) {	92✔
9	const {pan: panOptions, zoom: zoomOptions = {}} = state.options;	472!
10	if (!panOptions \|\| !panOptions.enabled) {	472!
11	return false;	×
12	}
13	const srcEvent = event && event.srcEvent;	472✔
14	if (!srcEvent) { // Sometimes Hammer queries this with a null event.	472✔
15	return true;	92✔
16	}
17	if (!state.panning && event.pointerType === 'mouse' && (	380!
18	keyNotPressed(getModifierKey(panOptions), srcEvent) \|\| keyPressed(getModifierKey(zoomOptions.drag), srcEvent))
19	) {
20	call(panOptions.onPanRejected, [{chart, event}]);	×
21	return false;	×
22	}
23	return true;	380✔
24	};
25	}
26
27	function pinchAxes(p0, p1) {
28	// fingers position difference
29	const pinchX = Math.abs(p0.clientX - p1.clientX);	×
30	const pinchY = Math.abs(p0.clientY - p1.clientY);	×
31
32	// diagonal fingers will change both (xy) axes
33	const p = pinchX / pinchY;	×
34	let x, y;
35	if (p > 0.3 && p < 1.7) {	×
36	x = y = true;	×
37	} else if (pinchX > pinchY) {	×
38	x = true;	×
39	} else {
40	y = true;	×
41	}
42	return {x, y};	×
43	}
44
45	function handlePinch(chart, state, e) {
46	if (state.scale) {	×
47	const {center, pointers} = e;	×
48	// Hammer reports the total scaling. We need the incremental amount
49	const zoomPercent = 1 / state.scale * e.scale;	×
50	const rect = e.target.getBoundingClientRect();	×
51	const pinch = pinchAxes(pointers[0], pointers[1]);	×
52	const mode = state.options.zoom.mode;	×
53	const amount = {	×
54	x: pinch.x && directionEnabled(mode, 'x', chart) ? zoomPercent : 1,	×
55	y: pinch.y && directionEnabled(mode, 'y', chart) ? zoomPercent : 1,	×
56	focalPoint: {
57	x: center.x - rect.left,
58	y: center.y - rect.top
59	}
60	};
61
62	zoom(chart, amount);	×
63
64	// Keep track of overall scale
65	state.scale = e.scale;	×
66	}
67	}
68
69	function startPinch(chart, state, event) {
70	if (state.options.zoom.pinch.enabled) {	×
NEW 71	const point = getRelativePosition(event, chart);	×
NEW 72	call(state.options.zoom.onZoomStart, [{chart, event, point}]);	×
UNCOV 73	state.scale = 1;	×
74	}
75	}
76
77	function endPinch(chart, state, e) {
78	if (state.scale) {	×
79	handlePinch(chart, state, e);	×
80	state.scale = null; // reset	×
81	call(state.options.zoom.onZoomComplete, [{chart}]);	×
82	}
83	}
84
85	function handlePan(chart, state, e) {
86	const delta = state.delta;	224✔
87	if (delta) {	224✔
88	state.panning = true;	216✔
89	pan(chart, {x: e.deltaX - delta.x, y: e.deltaY - delta.y}, state.panScales);	216✔
90	state.delta = {x: e.deltaX, y: e.deltaY};	216✔
91	}
92	}
93
94	function startPan(chart, state, event) {
95	const {enabled, onPanStart, onPanRejected} = state.options.pan;	76✔
96	if (!enabled) {	76!
97	return;	×
98	}
99	const rect = event.target.getBoundingClientRect();	76✔
100	const point = {	76✔
101	x: event.center.x - rect.left,
102	y: event.center.y - rect.top
103	};
104
105	if (call(onPanStart, [{chart, event, point}]) === false) {	76✔
106	return call(onPanRejected, [{chart, event}]);	4✔
107	}
108
109	state.panScales = getEnabledScalesByPoint(state.options.pan, point, chart);	72✔
110	state.delta = {x: 0, y: 0};	72✔
111	clearTimeout(state.panEndTimeout);	72✔
112	handlePan(chart, state, event);	72✔
113	}
114
115	function endPan(chart, state) {
116	state.delta = null;	76✔
117	if (state.panning) {	76✔
118	state.panEndTimeout = setTimeout(() => (state.panning = false), 500);	72✔
119	call(state.options.pan.onPanComplete, [{chart}]);	72✔
120	}
121	}
122
123	const hammers = new WeakMap();	4✔
124	export function startHammer(chart, options) {
125	const state = getState(chart);	316✔
126	const canvas = chart.canvas;	316✔
127	const {pan: panOptions, zoom: zoomOptions} = options;	316✔
128
129	const mc = new Hammer.Manager(canvas);	316✔
130	if (zoomOptions && zoomOptions.pinch.enabled) {	316!
131	mc.add(new Hammer.Pinch());	×
NEW 132	mc.on('pinchstart', (e) => startPinch(chart, state, e));	×
133	mc.on('pinch', (e) => handlePinch(chart, state, e));	×
134	mc.on('pinchend', (e) => endPinch(chart, state, e));	×
135	}
136
137	if (panOptions && panOptions.enabled) {	316✔
138	mc.add(new Hammer.Pan({	92✔
139	threshold: panOptions.threshold,
140	enable: createEnabler(chart, state)
141	}));
142	mc.on('panstart', (e) => startPan(chart, state, e));	92✔
143	mc.on('panmove', (e) => handlePan(chart, state, e));	152✔
144	mc.on('panend', () => endPan(chart, state));	92✔
145	}
146
147	hammers.set(chart, mc);	316✔
148	}
149
150	export function stopHammer(chart) {
151	const mc = hammers.get(chart);	11,733✔
152	if (mc) {	11,733✔
153	mc.remove('pinchstart');	316✔
154	mc.remove('pinch');	316✔
155	mc.remove('pinchend');	316✔
156	mc.remove('panstart');	316✔
157	mc.remove('pan');	316✔
158	mc.remove('panend');	316✔
159	mc.destroy();	316✔
160	hammers.delete(chart);	316✔
161	}
162	}
163
164	export function hammerOptionsChanged(oldOptions, newOptions) {
165	const {pan: oldPan, zoom: oldZoom} = oldOptions;	1,600✔
166	const {pan: newPan, zoom: newZoom} = newOptions;	1,600✔
167
168	if (oldZoom?.zoom?.pinch?.enabled !== newZoom?.zoom?.pinch?.enabled) {	1,600!
169	return true;	×
170	}
171	if (oldPan?.enabled !== newPan?.enabled) {	1,600!
172	return true;	×
173	}
174	if (oldPan?.threshold !== newPan?.threshold) {	1,600!
175	return true;	×
176	}
177
178	return false;	1,600✔
179	}

chartjs / chartjs-plugin-zoom / 11883460899

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