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