| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-18 13:43:26 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-18 13:47:07 -0700 |
| commit | 25eca15a3007c76c4e444b859683feb29edfa183 (patch) | |
| tree | d0a867be54ab95f5e138cec9df662fa0ba450544 /src/app.js | |
| parent | 99d137cc0937c0342fc1076eafe609c8aa370087 (diff) | |
WIP: translate an object to zoomed position without scalingcm-pan-not-zoom
Diffstat (limited to 'src/app.js')
| -rw-r--r-- | src/app.js | 25 |
1 files changed, 13 insertions, 12 deletions
@@ -1,27 +1,28 @@ import zoom from './modules/zoom'; import pan from './modules/pan'; -const optionalZoomFactor = 0.1, - object = document.querySelector('object'); +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'), + const svg = document.querySelector('svg'), + targetEl = svg.querySelector('g.pan-zoom'), + //pointer = svg.querySelector('#pointer'), options = { passive: false }; svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor), options); svg.addEventListener('pointerdown', pan(targetEl), 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); - }); + //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); + //}); }); |