2 files changed, 23 insertions, 10 deletions
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();