panzoom icon indicating copy to clipboard operation
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.

Open croxton opened this issue 2 years ago • 0 comments

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

croxton avatar Aug 04 '22 12:08 croxton