Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove and restore transform styles #327

Open
michaelsboost opened this issue Apr 28, 2024 · 0 comments
Open

Remove and restore transform styles #327

michaelsboost opened this issue Apr 28, 2024 · 0 comments

Comments

@michaelsboost
Copy link

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
    };
  }
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant