759249828

Build Type

github

Committed by GitHub

Commit Message

Merge 8ff2b5485 into b7bd3e2d8

Pull Request Pull Request #457: Internal state handling

Run Details

155 of 226 branches covered (68.58%)

Branch coverage included in aggregate %.

107 of 129 new or added lines in 6 files covered. (82.95%)

1 existing line in 1 file now uncovered.

261 of 327 relevant lines covered (79.82%)

121.15 hits per line

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

65.81

/src/hammer.js

import {callback as call} from 'chart.js/helpers';
import Hammer from 'hammerjs';
import {doPan, doZoom} from './core';
import {getState} from './state';
import {getEnabledScalesByPoint} from './utils';

function createEnabler(chart) {
  const state = getState(chart);
  return function(recognizer, event) {
    const panOptions = state.options.pan;
    if (!panOptions || !panOptions.enabled) {
      return false;
    }
    if (!event || !event.srcEvent) { // Sometimes Hammer queries this with a null event.
      return true;
    }
    const modifierKey = panOptions.modifierKey;
    const requireModifier = modifierKey && (event.pointerType === 'mouse');
    if (requireModifier && !event.srcEvent[modifierKey + 'Key']) {
      call(panOptions.onPanRejected, [{chart, event}]);
      return false;
    }
    return true;
  };
}

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

  // diagonal fingers will change both (xy) axes
  const p = x / y;
  return p > 0.3 && p < 1.7 ? 'xy' : x > y ? '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 zoom = 1 / state.scale * e.scale;
    const rect = e.target.getBoundingClientRect();
    const focalPoint = {
      x: center.x - rect.left,
      y: center.y - rect.top
    };

    const xy = pinchAxes(pointers[0], pointers[1]);

    doZoom(chart, zoom, zoom, focalPoint, state.options.zoom, xy);

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

function startPinch(chart, state) {
  if (state.options.zoom.enabled) {
    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 !== null) {
    state.panning = true;
    doPan(chart, e.deltaX - delta.x, e.deltaY - delta.y, state.options.pan, state.panScales);
    state.delta = {x: e.deltaX, y: e.deltaY};
  }
}

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

  state.panScales = getEnabledScalesByPoint(panOptions, x, y, chart);
  state.delta = {x: 0, y: 0};
  handlePan(chart, state, e);
}

function endPan(chart, state) {
  state.delta = null;
  if (state.panning) {
    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.enabled) {
    mc.add(new Hammer.Pinch());
    mc.on('pinchstart', () => startPinch(chart, state));
    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)
    }));
    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);
  }
}

1	import {callback as call} from 'chart.js/helpers';
2	import Hammer from 'hammerjs';
3	import {doPan, doZoom} from './core';
4	import {getState} from './state';
5	import {getEnabledScalesByPoint} from './utils';
6
7	function createEnabler(chart) {
8	const state = getState(chart);	4✔
9	return function(recognizer, event) {	4✔
10	const panOptions = state.options.pan;	196✔
11	if (!panOptions \|\| !panOptions.enabled) {	196!
12	return false;	×
13	}
14	if (!event \|\| !event.srcEvent) { // Sometimes Hammer queries this with a null event.	196✔
15	return true;	4✔
16	}
17	const modifierKey = panOptions.modifierKey;	192✔
18	const requireModifier = modifierKey && (event.pointerType === 'mouse');	192!
19	if (requireModifier && !event.srcEvent[modifierKey + 'Key']) {	192!
20	call(panOptions.onPanRejected, [{chart, event}]);	×
21	return false;	×
22	}
23	return true;	192✔
24	};
25	}
26
27	function pinchAxes(p0, p1) {
28	// fingers position difference
29	const x = Math.abs(p0.clientX - p1.clientX);	×
30	const y = Math.abs(p0.clientY - p1.clientY);	×
31
32	// diagonal fingers will change both (xy) axes
33	const p = x / y;	×
34	return p > 0.3 && p < 1.7 ? 'xy' : x > y ? 'x' : 'y';	×
35	}
36
37	function handlePinch(chart, state, e) {
NEW 38	if (state.scale) {	×
39	const {center, pointers} = e;	×
40	// Hammer reports the total scaling. We need the incremental amount
NEW 41	const zoom = 1 / state.scale * e.scale;	×
42	const rect = e.target.getBoundingClientRect();	×
43	const focalPoint = {	×
44	x: center.x - rect.left,
45	y: center.y - rect.top
46	};
47
48	const xy = pinchAxes(pointers[0], pointers[1]);	×
49
NEW 50	doZoom(chart, zoom, zoom, focalPoint, state.options.zoom, xy);	×
51
52	// Keep track of overall scale
NEW 53	state.scale = e.scale;	×
54	}
55	}
56
57	function startPinch(chart, state) {
NEW 58	if (state.options.zoom.enabled) {	×
NEW 59	state.scale = 1;	×
60	}
61	}
62
63	function endPinch(chart, state, e) {
NEW 64	if (state.scale) {	×
NEW 65	handlePinch(chart, state, e);	×
NEW 66	state.scale = null; // reset	×
NEW 67	call(state.options.zoom.onZoomComplete, [chart]);	×
68	}
69	}
70
71
72	function handlePan(chart, state, e) {
73	const delta = state.delta;	64✔
74	if (delta !== null) {	64!
75	state.panning = true;	64✔
76	doPan(chart, e.deltaX - delta.x, e.deltaY - delta.y, state.options.pan, state.panScales);	64✔
77	state.delta = {x: e.deltaX, y: e.deltaY};	64✔
78	}
79	}
80
81	function startPan(chart, state, e) {
82	const panOptions = state.options.pan;	64✔
83	if (!panOptions.enabled) {	64!
NEW 84	return;	×
85	}
86	const rect = e.target.getBoundingClientRect();	64✔
87	const x = e.center.x - rect.left;	64✔
88	const y = e.center.y - rect.top;	64✔
89
90	state.panScales = getEnabledScalesByPoint(panOptions, x, y, chart);	64✔
91	state.delta = {x: 0, y: 0};	64✔
92	handlePan(chart, state, e);	64✔
93	}
94
95	function endPan(chart, state) {
96	state.delta = null;	64✔
97	if (state.panning) {	64✔
98	setTimeout(() => (state.panning = false), 500);	54✔
99	call(state.options.pan.onPanComplete, [chart]);	54✔
100	}
101	}
102
103	const hammers = new WeakMap();	4✔
104	export function startHammer(chart, options) {
105	const state = getState(chart);	80✔
106	const canvas = chart.canvas;	80✔
107	const {pan: panOptions, zoom: zoomOptions} = options;	80✔
108
109	const mc = new Hammer.Manager(canvas);	80✔
110	if (zoomOptions && zoomOptions.enabled) {	80✔
111	mc.add(new Hammer.Pinch());	72✔
112	mc.on('pinchstart', () => startPinch(chart, state));	72✔
113	mc.on('pinch', (e) => handlePinch(chart, state, e));	72✔
114	mc.on('pinchend', (e) => endPinch(chart, state, e));	72✔
115	}
116
117	if (panOptions && panOptions.enabled) {	80✔
118	mc.add(new Hammer.Pan({	4✔
119	threshold: panOptions.threshold,
120	enable: createEnabler(chart)
121	}));
122	mc.on('panstart', (e) => startPan(chart, state, e));	64✔
123	mc.on('panmove', (e) => handlePan(chart, state, e));	4✔
124	mc.on('panend', () => endPan(chart, state));	64✔
125	}
126
127	hammers.set(chart, mc);	80✔
128	}
129
130	export function stopHammer(chart) {
131	const mc = hammers.get(chart);	772✔
132	if (mc) {	772✔
133	mc.remove('pinchstart');	80✔
134	mc.remove('pinch');	80✔
135	mc.remove('pinchend');	80✔
136	mc.remove('panstart');	80✔
137	mc.remove('pan');	80✔
138	mc.remove('panend');	80✔
139	mc.destroy();	80✔
140	hammers.delete(chart);	80✔
141	}
142	}

chartjs / chartjs-plugin-zoom / 759249828

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