anvaka / panzoom

Universal pan and zoom library (DOM, SVG, Custom)
https://anvaka.github.io/panzoom/demo/attach-via-script.html
MIT License
1.83k stars 293 forks source link

Remove and restore transform styles #327

Open michaelsboost opened 7 months ago

michaelsboost commented 7 months ago

Is there a way to remove the styles in this attribute panzoom renders?

style="transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 659.167, 446.917);"

I attempted this with this function with no success.

// clear style attribute
const destroy = () => {
  instance.zoomAbs(0, 0, 1);
  instance.dispose();
  instance.off();
  canvas.style = "";
  console.log(instance);
};

Here's my entire panzoom function...

const project = {
  zoomPan: (canvas, isEnabled = true) => {
    // init panzoom
    let instance = panzoom(canvas, {
      bounds: true,
      boundsPadding: 0.1
    });
    const centerCanvas = () => {
      const canvasRect = canvas.getBoundingClientRect();
      const canvasW = canvasRect.width * 0.75; // Adjusted canvas width based on zoom ratio
      const canvasH = canvasRect.height * 0.75; // Adjusted canvas height based on zoom ratio
      const bodyW = window.innerWidth / 2;
      const bodyH = window.innerHeight / 2;
      const initialXPos = bodyW - canvasW / 2;
      const initialYPos = bodyH - canvasH / 2;
      const zoomRatio = 0.75; // Set the zoom ratio to 0.75
      instance.zoomAbs(initialXPos, initialYPos, zoomRatio);
      instance.moveTo(initialXPos, initialYPos);
    };
    centerCanvas();
    // reset canvas dimentions and center it
    let resetCanvas = (w, h) => {
      canvas.style.width = w + 'px';
      canvas.style.height = h + 'px';
      centerCanvas();
    };
    // enable panzoom function
    const enablePanzoom = () => {
      instance.resume();
    };
    // disable panzoom function
    const disablePanzoom = () => {
      instance.pause();
    };
    // clear style attribute
    const destroy = () => {
      instance.zoomAbs(0, 0, 1);
      instance.dispose();
      instance.off();
      canvas.style = "";
      console.log(instance);
    };
    // if isEnabled is false, disable panzoom initially
    if (!isEnabled) {
      disablePanzoom();
    }
    // expose enable and disable panzoom functions
    return {
      enablePanzoom,
      disablePanzoom,
      resetCanvas,
      destroy
    };
  }
};