<script>
import { panzoom } from '@douganderson444/panzoom-node@1.0.2'
import Spot from './Spot.svelte';
let zoomable, container;
let style = ''; // show styling applied
let scale = { value: 1 };
let count = 10;
let min = count;
function handleZoom(e) {
console.log('Zoomed.', { detail: e.detail });
scale = e.detail.scale;
style = zoomable.style.transform;
}
const grid = Array.from({ length: count }, (_, i) =>
Array.from({ length: count }, (_, j) => ({ id: i * count + j }))
);
</script>
<div class="container" bind:this={container}>
<div class="menu">
<div>
Zoom Level: {scale.value}
</div>
<div>Style: {style}</div>
</div>
<div class="zoomable flexbox" bind:this={zoomable} use:panzoom on:zoomed={handleZoom}>
{#if container}
<div class="grid">
{#each grid as col, x}
<div class="col">
{#each col as square, y}
<Spot