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