From 06e5c4e09ea8373e153e8fa8b3ea97203f7c61f9 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 19 Mar 2025 19:27:56 -0700
Subject: Add programmaticZoom
---
index.js | 2 +-
src/app.js | 18 +++++++++++-------
src/modules/zoom.js | 15 ++++++++++++---
3 files changed, 24 insertions(+), 11 deletions(-)
diff --git a/index.js b/index.js
index c7af525..2882c2b 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,3 @@
export { default as pan, programmaticPan } from './src/modules/pan';
-export { default as zoom } from './src/modules/zoom';
+export { default as zoom, programmaticZoom } from './src/modules/zoom';
export * as withRestore from './src/modules/with-restore';
diff --git a/src/app.js b/src/app.js
index 02d3bd5..d84aef8 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,6 +1,8 @@
//import zoom from './modules/zoom';
//import pan from './modules/pan';
import * as panzoom from './modules/with-restore';
+import { default as zoom, programmaticZoom } from './modules/zoom';
+import { default as pan, programmaticPan } from './modules/pan';
import { getTracked } from './modules/utils';
const optionalZoomFactor = 0.1
@@ -13,23 +15,25 @@ 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 },
+ { width, height } = svg.getBoundingClientRect(),
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 = '';
+ width < 50 ? z.style.display = 'none' : z.style.display = '';
});
};
- //svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor, afterZoom), 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);
+ //panzoom.start(svg, 'g.pan-zoom', afterZoom);
+
+ programmaticZoom(targetEl, { x: width / 2, y: height / 2 }, 2, afterZoom);
//svg.addEventListener('pointermove', e => {
// const pt = new DOMPoint(e.clientX, e.clientY),
diff --git a/src/modules/zoom.js b/src/modules/zoom.js
index 15e622e..3ccb918 100644
--- a/src/modules/zoom.js
+++ b/src/modules/zoom.js
@@ -24,15 +24,24 @@ function setTransform(el, computedMtx, translateMtx, scale) {
const transformMtx =
computedMtx.multiply(translateMtx).scale(scale).multiply(translateMtx.inverse());
- groups.forEach(([z, p]) => track(z, p, transformMtx));
+ //groups.forEach(([z, p]) => track(z, p, transformMtx));
el.style.transform = transformMtx;
}
-let groups = [];
+//let groups = [];
+
+export function programmaticZoom(el, point, scale, cb) {
+ const computedMtx = getComputedTransformMatrix(el);
+ const translateMtx = getTranslateMatrix(el, point.x, point.y);
+
+ setTransform(el, computedMtx, translateMtx, scale);
+
+ cb();
+}
export default function (el, factor = 0.1, cb) {
- groups = getTracked(document.querySelectorAll('svg g[class] use'));
+ //groups = getTracked(document.querySelectorAll('svg g[class] use'));
return e => {
e.preventDefault();
--
cgit v1.2.3