<script>
// https://github.com/Rich-Harris/svelte-undo
import { createStack } from 'svelte-undo@1.0.2';
const stack = createStack([]);
</script>
<div class="container">
<svg viewBox="0 0 100 100">
{#each $stack.current as point}
<circle
cx={point.x}
cy={point.y}
r={point.r}
fill="hsl({point.hue}, 100%, 50%)"
/>
{/each}
</svg>
<div class="controls">
<button
disabled={$stack.first}
on:click={stack.undo}
>undo</button>
<button on:click={() => {
stack.push(points => [
// we create a new array rather than
// mutating, because mutation doesn't
// play well with undo stacks!
...points,
{
x: Math.random() * 100,
y: Math.random() * 100,
r: 2 + Math.random() * 10,
hue: Math.round(Math.random() * 360)