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
|
import zoom from './modules/zoom.js';
import pan from './modules/pan.js';
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 = object.contentDocument.querySelector('svg'),
targetEl = svg.querySelector('g'),
pointer = svg.querySelector('#pointer'),
options = { passive: false };
svg.addEventListener('wheel', e => zoom(targetEl, e, optionalZoomFactor), options);
svg.addEventListener('pointerdown', e => pan(svg, targetEl, e), options);
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);
});
});
|