My ImageZP Zoom Pane

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://d3js.org/d3.v5.min.js"></script>
  <title>Document</title>
</head>
<body style="overflow:hidden;">

  <script>
    width = document.body.scrollWidth - 20
    height = document.body.scrollHeight - 20
    var svg = d3.select('body').append('svg')
                  .attr('width', `${width}px`)
                  .attr('height', `${height}px`)
    var g = svg.append('g')
    var zoom = d3.zoom().on('zoom', zoomed)
    function zoomed(event) {
      g.attr('transform', event.transform)
    }
    svg.call(zoom)
    // svg.call(zoom.transform, d3.zoomIdentity.translate(20, 11).scale(0.1249))

    let hash = window.location.hash
    hash = hash.slice(1, hash.length)
    let queryString = window.location.search
    // console.log('querystring', queryString)
    let urlParams = new URLSearchParams(queryString)
    let url = hash.replaceAll('-.-', '/')


    const loadImg = (link) => {
      svg.style('display', 'block')

      svg.node().innerHTML = ''
      let isimg = link.match(/\.(png|jpg|jpeg)$/i) 
      d3.xml(link).then(rs => {
        svgNode = rs.getElementsByTagName('svg')[0]
        if (isimg){
          svg.append('g')
            .append('svg:image')
            .attr('xlink:href', link)
        }else if(!svgNode.querySelector('g') || true){
          svg.append('g').node().innerHTML = svgNode.innerHTML
        }else{
          svg.node().innerHTML = svgNode.innerHTML
        }

        g = svg.select('g')
        const loop = () => {
          ss = g.node().getBoundingClientRect()
          if (ss.width == 0){
            setTimeout(() => {
              loop()
            }, 100)
            return
          }

          toscale = Math.min(((90*width)/100)/(ss.width+100),
                            ((90*height)/100)/(ss.height))
          g.attr('transform', `scale(${toscale})`)
          newss = g.node().getBoundingClientRect()
          tow = ss.width*toscale
          toh = ss.height*toscale
          
          let oCenter = {} // the center of g#test element
          oCenter.x = newss.x + tow/2;
          oCenter.y = newss.y + toh/2;

          tow2 = (width/2) - oCenter.x
          toh2 = (height/2) - oCenter.y
          toscale2 = toscale

          svg.call(zoom.transform,d3.zoomIdentity.translate(tow2, toh2).scale(toscale2))
        }

        loop()

      })
    }

    console.log('url', url)
    if (!url){
      url = 'home-dia1.svg'
    }

    loadImg(url)

    function dragstarted(){
      d3.select(this).raise()
      g.attr('cursor', 'grabbing')
    }

    function dragended(){
      g.attr('cursor', 'grab')
    }

    function zoomed(){
      g.attr('transform', d3.event.transform)
    }

  </script>
</body>
</html>
Carlos Aguni
