| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 14:58:29 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-11 15:09:41 -0700 |
| commit | 9c34e15c47cf3578adeff41693a62061a25fdcde (patch) | |
| tree | fed30aa9d385c5be893f5715791837583d480350 /src/app.js | |
| parent | 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf (diff) | |
Update implementation to account for WebKit bugv0.2.0
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
Diffstat (limited to 'src/app.js')
| -rw-r--r-- | src/app.js | 28 |
1 files changed, 12 insertions, 16 deletions
@@ -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 <object> 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); }); }); |