| index : pan-zoom | |
| SVG pan/zoom library. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 13:57:16 -0800 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2025-03-05 14:18:31 -0800 |
| commit | 79964ead9181d69c5463777fcd2b227a14d30d32 (patch) | |
| tree | ccda4fdd4fbb118085a2589f78b535a470b513b0 | |
| parent | ffdf173cda784db9f02b0c6d27aa4d67718abe32 (diff) | |
Add module to save and restore pan/zoom values on page reloadv0.3.0
| -rw-r--r-- | index.js | 5 | ||||
| -rw-r--r-- | package-lock.json | 4 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/app.js | 8 | ||||
| -rw-r--r-- | src/modules/with-restore.js | 36 |
5 files changed, 46 insertions, 9 deletions
@@ -1,2 +1,3 @@ -export { default as pan, programmaticPan } from './src/modules/pan.js'; -export { default as zoom } from './src/modules/zoom.js'; +export { default as pan, programmaticPan } from './src/modules/pan'; +export { default as zoom } from './src/modules/zoom'; +export * as withRestore from './src/modules/with-restore'; diff --git a/package-lock.json b/package-lock.json index 44f82aa..3bc25c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "pan-zoom", - "version": "0.2.0", + "version": "0.3.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "pan-zoom", - "version": "0.2.0", + "version": "0.3.0", "devDependencies": { "esbuild": "^0.20.2", "esbuild-server": "^0.3.0" diff --git a/package.json b/package.json index b99e239..46dcee4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pan-zoom", - "version": "0.2.0", + "version": "0.3.0", "browser": "index.js", "devDependencies": { "esbuild": "^0.20.2", @@ -1,5 +1,5 @@ -import zoom from './modules/zoom.js'; -import pan from './modules/pan.js'; +import zoom from './modules/zoom'; +import pan from './modules/pan'; const optionalZoomFactor = 0.1, object = document.querySelector('object'); @@ -14,8 +14,8 @@ window.addEventListener('load', function () { pointer = svg.querySelector('#pointer'), options = { passive: false }; - svg.addEventListener('wheel', e => zoom(targetEl, e, optionalZoomFactor), options); - svg.addEventListener('pointerdown', e => pan(svg, targetEl, e), options); + 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), diff --git a/src/modules/with-restore.js b/src/modules/with-restore.js new file mode 100644 index 0000000..cfe94f7 --- /dev/null +++ b/src/modules/with-restore.js @@ -0,0 +1,36 @@ +import zoom from './zoom'; +import pan from './pan'; + +const storageKey = "pan-zoom"; +const zoomFactor = 0.25; + +function restorePanZoomVal(el) { + const storedPanZoomVal = localStorage.getItem(storageKey); + + if (storedPanZoomVal) el.style.transform = storedPanZoomVal; +} + +function addEventListeners(svg, el) { + svg.addEventListener("wheel", zoom(el, zoomFactor), { passive: false }); + svg.addEventListener("pointerdown", pan(el), { passive: false }); +} + +function storePanZoomVal(transformMatrix) { + localStorage.setItem(storageKey, transformMatrix); +} + +function observePanZoomChanges(el) { + const observer = new MutationObserver(() => + storePanZoomVal(el.style.transform), + ); + + observer.observe(el, { attributeFilter: ["style"] }); +} + +export function start(svg, selector) { + const targetEl = svg.querySelector(selector); + + restorePanZoomVal(targetEl); + addEventListeners(svg, targetEl); + observePanZoomChanges(targetEl); +} |