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
|
//import zoom from './modules/zoom';
//import pan from './modules/pan';
import * as panzoom from './modules/with-restore';
import { default as zoom, programmaticZoom } from './modules/zoom';
import { default as pan, programmaticPan } from './modules/pan';
import { getTracked } from './modules/utils';
const optionalZoomFactor = 0.1
//, object = document.querySelector('object')
;
// If embedding an SVG using an <object> tag, it's necessary to wait until the
// page has loaded before querying its `contentDocument`, otherwise it will be
// `null`.
window.addEventListener('load', function () {
const svg = document.querySelector('svg'),
targetEl = svg.querySelector('g.pan-zoom'),
//pointer = svg.querySelector('#pointer'),
options = { passive: false },
{ width, height } = svg.getBoundingClientRect(),
groups = getTracked(svg.querySelectorAll('g[class] use')),
afterZoom = async () => {
groups.forEach(([z, p]) => {
z.style.display = '';
const { width } = z.getBoundingClientRect();
width < 50 ? z.style.display = 'none' : z.style.display = '';
});
};
svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor, afterZoom), options);
svg.addEventListener('pointerdown', pan(targetEl), options);
//panzoom.start(svg, 'g.pan-zoom', afterZoom);
programmaticZoom(targetEl, { x: width / 2, y: height / 2 }, 2, afterZoom);
//svg.addEventListener('pointermove', e => {
// const pt = new DOMPoint(e.clientX, e.clientY),
// svgP = pt.matrixTransform(targetEl.getScreenCTM().inverse());
//
// pointer.setAttributeNS(null, 'cx', svgP.x);
// pointer.setAttributeNS(null, 'cy', svgP.y);
//});
});
|