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 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 = '';
//});
}
}