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