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
|
import { default as getComputedTransformMatrix } 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());
el.style.transform = transformMtx;
}
export default function (el, factor = 0.1) {
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);
}
}
|