git.r.bdr.sh - rbdr/canvas/blob - 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>