]> git.r.bdr.sh - rbdr/canvas/blob - src/routes/index.svelte
f2544cf60c1a345f5d2b87d8ecfdbee014e99bd3
[rbdr/canvas] / src / routes / index.svelte
1 <script>
2
3 import { browser } from '$app/env';
4
5 const dotSize = 24;
6 $: x = 0;
7 $: y = 0;
8
9 if (browser) {
10 document.documentElement.style.setProperty('--dot-size', dotSize + 'px');
11 }
12
13
14 $: {
15 if (browser) {
16 document.documentElement.style.setProperty('--dot-x', dotSize - x % dotSize + 'px');
17 document.documentElement.style.setProperty('--dot-y', dotSize - y % dotSize + 'px');
18 }
19 }
20
21 let dragging = false;
22
23 const moveCanvas = function moveCanvas(event) {
24
25 if (dragging) {
26 x -= event.x - dragging.x;
27 y -= event.y - dragging.y;
28 dragging.x = event.x;
29 dragging.y = event.y;
30 }
31 }
32
33 const startDragging = function startDragging(event) {
34 dragging = {
35 x: event.x,
36 y: event.y
37 };
38 }
39
40 const stopDragging = function startDragging() {
41 dragging = null;
42 }
43
44 const formatCoordinate = function formatCoordinate(coordinate) {
45 const sign = Math.sign(coordinate) === 1 ? '' : '-';
46 const value = Math.abs(coordinate).toString(16).padStart(4, 0);
47 return sign + value;
48 }
49
50 </script>
51
52 <div class="canvas" on:mousedown={startDragging} on:mouseup={stopDragging} on:mousemove={moveCanvas}>
53 </div>
54
55 <div class="hud">
56 ({ formatCoordinate(x) }, { formatCoordinate(y) })
57 </div>
58
59 <style>
60 .canvas {
61 user-select: none;
62 background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
63 background-size: var(--dot-size) var(--dot-size);
64 background-position: var(--dot-x) var(--dot-y);
65 padding: 0;
66 margin: 0;
67 width: 100vw;
68 height: 100vh;
69 }
70
71 .hud {
72 background-color: #fff;
73 padding: 4px;
74 position: fixed;
75 bottom: 2px;
76 right: 2px;
77 font-smooth: never;
78 -webkit-font-smoothing : none;
79 }
80 </style>