]> git.r.bdr.sh - rbdr/canvas/blob - src/routes/index.svelte
06c2357590d3157bf668b58e39f777df0632703a
[rbdr/canvas] / src / routes / index.svelte
1 <script>
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';
8
9 import { coordinateLength, maxSize } from '$lib/config';
10
11 $: x = 0;
12 $: y = 0;
13 $: shouldShowPalette = false;
14
15 let dragging = false;
16
17 const moveCanvas = function moveCanvas(event) {
18
19 if (dragging) {
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);
24 dragging.x = event.x;
25 dragging.y = event.y;
26 }
27 }
28
29 const startDragging = function startDragging(event) {
30 dragging = {
31 x: event.x,
32 y: event.y
33 };
34 }
35
36 const stopDragging = function startDragging() {
37 dragging = null;
38 }
39
40 const showPalette = function showPalette(event) {
41 event.preventDefault();
42 dragging = null;
43 document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
44 document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
45 shouldShowPalette = true;
46 }
47
48 const hidePalette = function hidePalette() {
49 event.preventDefault();
50 shouldShowPalette = false;
51 }
52 </script>
53
54 <div
55 class="canvas"
56 on:click={hidePalette}
57 on:contextmenu={showPalette}
58 on:mousedown={startDragging}
59 on:mouseup={stopDragging}
60 on:mousemove={moveCanvas}
61 >
62 <Sensor x={x} y={y} />
63 <Background x={x} y={y} />
64 <Hud x={x} y={y} />
65
66 {#if shouldShowPalette }
67 <Palette/>
68 {/if}
69
70 <p>{JSON.stringify($widgets)}</p>
71 </div>
72
73 <style>
74 .canvas {
75 user-select: none;
76 padding: 0;
77 margin: 0;
78 width: 100vw;
79 height: 100vh;
80 }
81 </style>