| 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/modules | |
| parent | 25eca15a3007c76c4e444b859683feb29edfa183 (diff) | |
WIP: add callback param
Diffstat (limited to 'src/modules')
| -rw-r--r-- | src/modules/with-restore.js | 8 | ||||
| -rw-r--r-- | src/modules/zoom.js | 13 |
2 files changed, 15 insertions, 6 deletions
diff --git a/src/modules/with-restore.js b/src/modules/with-restore.js index cfe94f7..8614a18 100644 --- a/src/modules/with-restore.js +++ b/src/modules/with-restore.js @@ -10,8 +10,8 @@ function restorePanZoomVal(el) { if (storedPanZoomVal) el.style.transform = storedPanZoomVal; } -function addEventListeners(svg, el) { - svg.addEventListener("wheel", zoom(el, zoomFactor), { passive: false }); +function addEventListeners(svg, el, postZoom) { + svg.addEventListener("wheel", zoom(el, zoomFactor, postZoom), { passive: false }); svg.addEventListener("pointerdown", pan(el), { passive: false }); } @@ -27,10 +27,10 @@ function observePanZoomChanges(el) { observer.observe(el, { attributeFilter: ["style"] }); } -export function start(svg, selector) { +export function start(svg, selector, postZoom) { const targetEl = svg.querySelector(selector); restorePanZoomVal(targetEl); - addEventListeners(svg, targetEl); + addEventListeners(svg, targetEl, postZoom); observePanZoomChanges(targetEl); } diff --git a/src/modules/zoom.js b/src/modules/zoom.js index 69652c0..15e622e 100644 --- a/src/modules/zoom.js +++ b/src/modules/zoom.js @@ -29,9 +29,11 @@ function setTransform(el, computedMtx, translateMtx, scale) { el.style.transform = transformMtx; } -const groups = getTracked(document.querySelectorAll('svg g[class] use')); +let groups = []; + +export default function (el, factor = 0.1, cb) { + groups = getTracked(document.querySelectorAll('svg g[class] use')); -export default function (el, factor = 0.1) { return e => { e.preventDefault(); @@ -40,5 +42,12 @@ export default function (el, factor = 0.1) { const translateMtx = getTranslateMatrix(el, e.clientX, e.clientY); setTransform(el, computedMtx, translateMtx, scale); + + cb(); + //groups.forEach(([z, p]) => { + // z.style.display = ''; + // const { width } = z.getBoundingClientRect(); + // width < 40 ? z.style.display = 'none' : z.style.display = ''; + //}); } } |