From 9c34e15c47cf3578adeff41693a62061a25fdcde Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Tue, 11 Jun 2024 14:58:29 -0700
Subject: Update implementation to account for WebKit bug
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 element, we can only transform a child element
---
src/app.js | 28 ++++++++++++----------------
1 file changed, 12 insertions(+), 16 deletions(-)
(limited to 'src/app.js')
diff --git a/src/app.js b/src/app.js
index 3afc329..30b4467 100644
--- a/src/app.js
+++ b/src/app.js
@@ -2,14 +2,7 @@ import zoom from './modules/zoom.js';
import pan from './modules/pan.js';
const optionalZoomFactor = 0.1,
- container = document.querySelector('.container'),
- object = document.querySelector('object'),
- img = document.querySelector('img'),
- button = document.querySelector('button');
-
-function reset(elements) {
- elements.forEach(el => el.removeAttribute('style'));
-}
+ object = document.querySelector('object');
// If embedding an SVG using an tag, it's necessary to wait until the
// page has loaded before querying its `contentDocument`, otherwise it will be
@@ -17,15 +10,18 @@ function reset(elements) {
window.addEventListener('load', function () {
const svg = object.contentDocument.querySelector('svg'),
- pannableAndZoomableElements = [img, svg];
+ targetEl = svg.querySelector('g'),
+ pointer = svg.querySelector('#pointer'),
+ options = { passive: false };
- button.addEventListener('click', () => {
- [button, container].forEach(el => el.classList.toggle('switch'));
- reset(pannableAndZoomableElements);
- });
+ 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());
- pannableAndZoomableElements.forEach(el => {
- el.addEventListener('wheel', e => zoom(el, e, optionalZoomFactor), { passive: false });
- el.addEventListener('pointerdown', e => pan(el, e), { passive: false });
+ pointer.setAttributeNS(null, 'cx', svgP.x);
+ pointer.setAttributeNS(null, 'cy', svgP.y);
});
});
--
cgit v1.2.3