Catalin Mititiuc
9c34e15c47
getScreenCTM() on WebKit does not reflect transformations applied to an ancestor (see bug https://bugs.webkit.org/show_bug.cgi?id=209220), so instead of transforming the root <svg> element, we can only transform a child element
28 lines
981 B
JavaScript
28 lines
981 B
JavaScript
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);
|
|
});
|
|
});
|