Simulating Zoom using formulas in properties

[gbishop]

The new release of OS-DPI will support the use of formulas in the properties of components. Formulas, as in Excel, begin with a single equal sign and are evaluated on each redraw. These bring superpowers and new ways to confuse yourself.

Recently Jeff asked about simulating Zoom. I've figured out two ways to implement it using formulas. The first is a crazy CSS hack and the second uses Patterns in a dynamic way.

The CSS hack involves using box-shadow to make the Cue large enough to overlap adjacent grid cells. It uses the very new CSS feature container to allow me to get the correct size and the clip-path to avoid it spilling outside the grid. The funny units on the CSS are referring to the size of the container. I said it was crazy.

Formual_Zoom_CSS.webm

Formula_Zoom_CSS.zip

The Pattern method is more robust (I think) and is amenable to expanding the zoom region beyond 3x3. The boundaries of the Pattern are controlled by $state variables that are updated as the cursor moves around.

Formual_Zoom_Pattern.webm

Formula_Zoom_Pattern.zip

This is what this computer nerd calls good fun!