2 import Sensor from '$lib/components/sensor.svelte';
3 import Background from '$lib/components/background.svelte';
4 import Palette from '$lib/components/palette.svelte';
5 import Hud from '$lib/components/hud.svelte';
6 import { modulo } from '$lib/math';
7 import { widgets } from '$lib/stores/widgets';
9 import { coordinateLength, maxSize } from '$lib/config';
13 $: shouldShowPalette = false;
17 const moveCanvas = function moveCanvas(event) {
20 let deltaX = event.x - dragging.x;
21 let deltaY = event.y - dragging.y;
22 x = modulo(x - deltaX, maxSize);
23 y = modulo(y - deltaY, maxSize);
29 const startDragging = function startDragging(event) {
36 const stopDragging = function startDragging() {
40 const showPalette = function showPalette(event) {
41 event.preventDefault();
43 document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
44 document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
45 shouldShowPalette = true;
48 const hidePalette = function hidePalette() {
49 event.preventDefault();
50 shouldShowPalette = false;
56 on:click={hidePalette}
57 on:contextmenu={showPalette}
58 on:mousedown={startDragging}
59 on:mouseup={stopDragging}
60 on:mousemove={moveCanvas}
62 <Sensor x={x} y={y} />
63 <Background x={x} y={y} />
66 {#if shouldShowPalette }
70 <p>{JSON.stringify($widgets)}</p>