Web Dev Solutions

Catalin Mititiuc

//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 //, object = document.querySelector('object') ; // If embedding an SVG using an tag, it's necessary to wait until the // page has loaded before querying its `contentDocument`, otherwise it will be // `null`. window.addEventListener('load', function () { const svg = document.querySelector('svg'), targetEl = svg.querySelector('g.pan-zoom'), //pointer = svg.querySelector('#pointer'), 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(); width < 50 ? z.style.display = 'none' : z.style.display = ''; }); }; svg.addEventListener('wheel', zoom(targetEl, optionalZoomFactor, afterZoom), options); svg.addEventListener('pointerdown', pan(targetEl), options); //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), // svgP = pt.matrixTransform(targetEl.getScreenCTM().inverse()); // // pointer.setAttributeNS(null, 'cx', svgP.x); // pointer.setAttributeNS(null, 'cy', svgP.y); //}); });