panzoom
panzoom copied to clipboard
FR: set the current scale as a CSS variable, to allow inversion for child elements that should stay a fixed size.
The current scale value could be set as a CSS variable in the zoom()
function, just before it returns.
elem.style.setProperty('--scale', scale)
Then it becomes easy to keep child elements the same size regardless of the zoom, with a simple inversion:
.popup {
/* revert scale */
transform: scale(calc(1/var(--scale)));
}
This is great for adding labels / pop-ups to the scaled content that stay a fixed size.
Ref: https://github.com/timmywil/panzoom/blob/1c97ddd816f56ba88d9bfa70f03de894887aca61/src/panzoom.ts#L307-L334