blob: 411b81f0940ab95c33537b9bd3ace151eb0a7a88 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
<script>
import Sensor from '$lib/components/sensor.svelte';
import Background from '$lib/components/background.svelte';
import Palette from '$lib/components/palette.svelte';
import Hud from '$lib/components/hud.svelte';
import Widget from '$lib/components/widget.svelte';
import { modulo } from '$lib/math';
import { widgets } from '$lib/stores/widgets';
import { canvas } from '$lib/stores/canvas';
import { coordinateLength, maxSize } from '$lib/config';
$: shouldShowPalette = false;
let dragging = false;
const moveCanvas = function moveCanvas(event) {
if (dragging) {
let deltaX = event.x - dragging.x;
let deltaY = event.y - dragging.y;
let x = modulo($canvas.x - deltaX, maxSize);
let y = modulo($canvas.y - deltaY, maxSize);
dragging.x = event.x;
dragging.y = event.y;
canvas.set({ x, y })
}
}
const startDragging = function startDragging(event) {
dragging = {
x: event.x,
y: event.y
};
}
const stopDragging = function startDragging() {
dragging = null;
}
const showPalette = function showPalette(event) {
event.preventDefault();
dragging = null;
document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
shouldShowPalette = true;
}
const hidePalette = function hidePalette() {
event.preventDefault();
shouldShowPalette = false;
}
</script>
<div
class="canvas"
on:click={hidePalette}
on:contextmenu={showPalette}
on:mousedown={startDragging}
on:mouseup={stopDragging}
on:mousemove={moveCanvas}
>
<Sensor />
<Background />
<Hud />
{#if shouldShowPalette }
<Palette/>
{/if}
{#if $widgets}
{#each $widgets as widget}
<Widget widget={widget}/>
{/each}
{/if}
</div>
<style>
.canvas {
user-select: none;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
}
</style>
|
