3 files changed, 34 insertions, 12 deletions
diff --git a/src/app.js b/src/app.js
index 5e9a2e4..02d3bd5 100644
--- a/src/app.js
+++ b/src/app.js
@@ -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),
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 = '';
+    //});
   }
 }