OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity
impress/app/assets/stylesheets/application/magic-magnifier.sass

48 lines
1.9 KiB
Sass
Raw Normal View History

Add magnification when editing pet appearance I couldn't find a library for this functionality that didn't require jQuery, and I don't want to be adding *more* jQuery requirements. So, I decided to throw together my own! The `<magic-magnifier>` component copies its contents into a "lens" element, then uses basic JS to track mouse position, then uses CSS to move the lens and its contents into a helpful position. One thing I noticed here is that the zoom is a bit crunchy because we're using PNG images, and it's hard to zoom in even further than we already are. I might try switching this UI to use the SVG images by default instead?
2024-12-07 11:39:37 -08:00
magic-magnifier
position: relative
Fix minor bug to hide magnifier if its position isn't ready yet
2024-12-07 11:53:18 -08:00
// Only show the lens when we are hovering, and the magnifier's X and Y
// coordinates are set. (This ensures the component is running, and has
// received a mousemove event, instead of defaulting to (0, 0).)
magic-magnifier-lens
display: none
&:hover
@container style(--magic-magnifier-x) and style(--magic-magnifier-y)
magic-magnifier-lens
display: block
Add magnification when editing pet appearance I couldn't find a library for this functionality that didn't require jQuery, and I don't want to be adding *more* jQuery requirements. So, I decided to throw together my own! The `<magic-magnifier>` component copies its contents into a "lens" element, then uses basic JS to track mouse position, then uses CSS to move the lens and its contents into a helpful position. One thing I noticed here is that the zoom is a bit crunchy because we're using PNG images, and it's hard to zoom in even further than we already are. I might try switching this UI to use the SVG images by default instead?
2024-12-07 11:39:37 -08:00
magic-magnifier-lens
width: var(--magic-magnifier-lens-width, 100px)
height: var(--magic-magnifier-lens-height, 100px)
overflow: hidden
border-radius: 100%
background: white
border: 2px solid black
box-shadow: 3px 3px 3px rgba(0, 0, 0, .5)
position: absolute
left: var(--magic-magnifier-x, 0px)
top: var(--magic-magnifier-y, 0px)
> *
// Translations are applied in the opposite of the order they're specified.
// So, here's what we're doing:
//
// 1. Translate the content left by --magic-magnifier-x and up by
// --magic-magnifier-y, to align the target location with the lens's
// top-right corner.
// 2. Zoom in by --magic-magnifier-scale.
// 3. Translate the content right by half of --magic-magnifier-lens-width,
// and down by half of --magic-magnifier-lens-height, to align the
// target location with the lens's center.
//
// Note that it *is* possible to specify transforms relative to the center,
// rather than the top-left corner—this is in fact the default!—but that
// gets confusing fast with scale in play. I think this is easier to reason
// about with the top-left corner in terms of math, and center it after the
// fact.
transform: translateX(calc(var(--magic-magnifier-lens-width, 100px) / 2)) translateY(calc(var(--magic-magnifier-lens-height, 100px) / 2)) scale(var(--magic-magnifier-scale, 2)) translateX(calc(-1 * var(--magic-magnifier-x, 0px))) translateY(calc(-1 * var(--magic-magnifier-y, 0px)))
transform-origin: left top
Copy permalink