git.r.bdr.sh - rbdr/canvas/blob - src/routes/+page.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 Minimap from '$lib/components/minimap.svelte';
   7         import Widget from '$lib/components/widget.svelte';
   8         import { modulo } from '$lib/math';
   9         import { widgets } from '$lib/stores/widgets';
  10         import { canvas } from '$lib/stores/canvas';
  11
  12         import { maxSize } from '$lib/config';
  13
  14         $: shouldShowPalette = false;
  15
  16         let dragging = false;
  17
  18         const moveCanvas = function moveCanvas(event) {
  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         <Minimap />
  67
  68         {#if shouldShowPalette}
  69                 <Palette />
  70         {/if}
  71
  72         {#if $widgets}
  73                 {#each $widgets as widget}
  74                         <Widget {widget} />
  75                 {/each}
  76         {/if}
  77 </div>
  78
  79 <style>
  80         .canvas {
  81                 user-select: none;
  82                 padding: 0;
  83                 margin: 0;
  84                 width: 100vw;
  85                 height: 100vh;
  86         }
  87 </style>