Code animation: Resizing with Svelte actions

One component I need for the code animation project is a way to resize elements.

In this experiment, I look at building a generic component using a Svelte Active.

Example usage:

<div use:resize/>

It handles resizing in 8-directions: north, south, east, west, north-west, north-east, south-west, and south-east.

Code

https://svelte.dev/repl/8b974ea483c648fba362a1e9f3dbc29f?version=3.37.0

Demo

Notes

• Support resizing in fixed increments, by holding down shift key while dragging
• Alternative to building this an action is using a component with a slot