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