1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
import { default as getComputedTransformMatrix, extractNum, track, getTracked } from './utils';
function zoomIn(deltaY) {
return deltaY < 0;
}
function getScale(deltaY, factor) {
const outMult = 1 - factor;
const inMult = 1 + factor / outMult
return zoomIn(deltaY) ? inMult : outMult;
}
function getTranslateMatrix(el, clientX, clientY) {
const inverseScreenCTM = el.getScreenCTM().inverse();
const translateMtx = new DOMMatrix();
const pointer = new DOMPoint(clientX, clientY)
const { x, y } = pointer.matrixTransform(inverseScreenCTM);
return translateMtx.translate(x, y);
}
function setTransform(el, computedMtx, translateMtx, scale) {
const transformMtx =
computedMtx.multiply(translateMtx).scale(scale).multiply(translateMtx.inverse());
//groups.forEach(([z, p]) => track(z, p, transformMtx));
el.style.transform = transformMtx;
}
//let groups = [];
export function programmaticZoom(el, point, scale, cb) {
const computedMtx = getComputedTransformMatrix(el);
const translateMtx = getTranslateMatrix(el, point.x, point.y);
el.style.transition = 'transform 0.5s';
setTransform(el, computedMtx, translateMtx, scale);
el.addEventListener('transitionend', () => el.style.transition = '', { once: true });
cb();
}
export default function (el, factor = 0.1, cb) {
//groups = getTracked(document.querySelectorAll('svg g[class] use'));
return e => {
e.preventDefault();
const computedMtx = getComputedTransformMatrix(el);
const scale = getScale(e.deltaY, factor);
const translateMtx = getTranslateMatrix(el, e.clientX, e.clientY);
setTransform(el, computedMtx, translateMtx, scale);
cb();
//groups.forEach(([z, p]) => {
// z.style.display = '';
// const { width } = z.getBoundingClientRect();
// width < 40 ? z.style.display = 'none' : z.style.display = '';
//});
}
}
|