git.r.bdr.sh - rbdr/canvas/blob - src/routes/index.svelte

   1 <script>
   2
   3   import { browser } from '$app/env';
   4         import { blink } from '$lib/animations/blink';
   5
   6   const dotSize = 24;
   7   $: x = 0;
   8   $: y = 0;
   9   $: shouldShowPalette = false;
  10
  11   if (browser) {
  12     document.documentElement.style.setProperty('--dot-size', dotSize + 'px');
  13   }
  14
  15
  16   $: {
  17     if (browser) {
  18       document.documentElement.style.setProperty('--dot-x', dotSize - x % dotSize + 'px');
  19       document.documentElement.style.setProperty('--dot-y', dotSize - y % dotSize + 'px');
  20     }
  21   }
  22
  23   let dragging = false;
  24
  25   const moveCanvas = function moveCanvas(event) {
  26
  27     if (dragging) {
  28       x -= event.x - dragging.x;
  29       y -= event.y - dragging.y;
  30       dragging.x = event.x;
  31       dragging.y = event.y;
  32     }
  33   }
  34
  35   const startDragging = function startDragging(event) {
  36     dragging = {
  37       x: event.x,
  38       y: event.y
  39     };
  40   }
  41
  42   const stopDragging = function startDragging() {
  43     dragging = null;
  44   }
  45
  46   const formatCoordinate = function formatCoordinate(coordinate) {
  47     const sign = Math.sign(coordinate) === 1 ? '' : '-';
  48     const value = Math.abs(coordinate).toString(16).padStart(4, 0);
  49     return sign + value;
  50   }
  51
  52   const showPalette = function showPalette(event) {
  53     event.preventDefault();
  54     dragging = null;
  55     document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
  56     document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
  57     shouldShowPalette = true;
  58   }
  59
  60   const hidePalette = function hidePalette() {
  61     event.preventDefault();
  62     shouldShowPalette = false;
  63   }
  64 </script>
  65
  66 <div
  67   class="canvas"
  68   on:contextmenu={showPalette}
  69   on:mousedown={startDragging}
  70   on:mouseup={stopDragging}
  71   on:mousemove={moveCanvas}>
  72 </div>
  73
  74 <div class="hud">
  75   ({ formatCoordinate(x) }, { formatCoordinate(y) })
  76 </div>
  77
  78 {#if shouldShowPalette }
  79   <div class="palette-container" on:click={hidePalette}>
  80   </div>
  81   <div class="palette" transition:blink>
  82     <p>
  83       palette palette palette palette palette palette <br/>
  84       palette palette palette palette palette palette <br/>
  85       palette palette palette palette palette palette <br/>
  86       palette palette palette palette palette palette <br/>
  87       palette palette palette palette palette palette <br/>
  88       palette palette palette palette palette palette <br/>
  89     </p>
  90   </div>
  91 {/if}
  92
  93 <style>
  94   .canvas {
  95     user-select: none;
  96     background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
  97     background-size: var(--dot-size) var(--dot-size);
  98     background-position: var(--dot-x) var(--dot-y);
  99     padding: 0;
 100     margin: 0;
 101     width: 100vw;
 102     height: 100vh;
 103   }
 104
 105   .hud {
 106     background-color: #fff;
 107     padding: 4px;
 108     position: fixed;
 109     bottom: 2px;
 110     right: 2px;
 111     font-smooth: never;
 112     -webkit-font-smoothing : none;
 113   }
 114
 115   .palette {
 116     position: fixed;
 117     top: var(--palette-y);
 118     left: var(--palette-x);
 119     border: 1px solid black;
 120     background-color: #fff;
 121     overflow: hidden;
 122   }
 123
 124   .palette-container {
 125     width: 100vw;
 126     height: 100vh;
 127     background-color: #f0f;
 128     position: fixed;
 129     top: 0;
 130     left: 0;
 131   }
 132
 133 </style>