Remove and restore transform styles
michaelsboost opened this issue · comments
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
};
}
};