| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-19 11:22:22 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-19 11:22:22 -0700 |
| commit | 2919627c1e8fefb1c9bbd4034419b4fd2b117b9e (patch) | |
| tree | 0d404c71fe8d2204b9c0fe49a7fd6385265025dc /src/app.js | |
| parent | 25eca15a3007c76c4e444b859683feb29edfa183 (diff) | |
WIP: add callback param
Diffstat (limited to 'src/app.js')
| -rw-r--r-- | src/app.js | 25 |
1 files changed, 19 insertions, 6 deletions
@@ -1,5 +1,7 @@ -import zoom from './modules/zoom'; -import pan from './modules/pan'; +//import zoom from './modules/zoom'; +//import pan from './modules/pan'; +import * as panzoom from './modules/with-restore'; +import { getTracked } from './modules/utils'; const optionalZoomFactor = 0.1 //, object = document.querySelector('object') @@ -11,12 +13,23 @@ const optionalZoomFactor = 0.1 window.addEventListener('load', function () { const svg = document.querySelector('svg'), - targetEl = svg.querySelector('g.pan-zoom'), + //targetEl = svg.querySelector('g.pan-zoom'), //pointer = svg.querySelector('#pointer'), - options = { passive: false }; + //options = { passive: false }, + groups = getTracked(svg.querySelectorAll('g[class] use')), + afterZoom = async () => { + groups.forEach(([z, p]) => { + z.style.display = ''; + const { width } = z.getBoundingClientRect(); + console.log('width', width); + width < 40 ? z.style.display = 'none' : z.style.display = ''; + }); + }; - svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor), options); - svg.addEventListener('pointerdown', pan(targetEl), options); + //svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor, afterZoom), options); + //svg.addEventListener('pointerdown', pan(targetEl), options); + + panzoom.start(svg, 'g.pan-zoom', afterZoom); //svg.addEventListener('pointermove', e => { // const pt = new DOMPoint(e.clientX, e.clientY), |