Add palette basics

[rbdr/canvas] / src / routes / index.svelte

<script>

  import { browser } from '$app/env';
	import { blink } from '$lib/animations/blink';

  const dotSize = 24;
  $: x = 0;
  $: y = 0;
  $: shouldShowPalette = false;

  if (browser) {
    document.documentElement.style.setProperty('--dot-size', dotSize + 'px');
  }


  $: {
    if (browser) {
      document.documentElement.style.setProperty('--dot-x', dotSize - x % dotSize + 'px');
      document.documentElement.style.setProperty('--dot-y', dotSize - y % dotSize + 'px');
    }
  }

  let dragging = false;

  const moveCanvas = function moveCanvas(event) {

    if (dragging) {
      x -= event.x - dragging.x;
      y -= event.y - dragging.y;
      dragging.x = event.x;
      dragging.y = event.y;
    }
  }

  const startDragging = function startDragging(event) {
    dragging = {
      x: event.x,
      y: event.y
    };
  }

  const stopDragging = function startDragging() {
    dragging = null;
  }

  const formatCoordinate = function formatCoordinate(coordinate) {
    const sign = Math.sign(coordinate) === 1 ? '' : '-';
    const value = Math.abs(coordinate).toString(16).padStart(4, 0);
    return sign + value;
  }

  const showPalette = function showPalette(event) {
    event.preventDefault();
    dragging = null;
    document.documentElement.style.setProperty('--palette-x', event.clientX + 'px');
    document.documentElement.style.setProperty('--palette-y', event.clientY + 'px');
    shouldShowPalette = true;
  }

  const hidePalette = function hidePalette() {
    event.preventDefault();
    shouldShowPalette = false;
  }
</script>

<div
  class="canvas"
  on:contextmenu={showPalette}
  on:mousedown={startDragging}
  on:mouseup={stopDragging}
  on:mousemove={moveCanvas}>
</div>

<div class="hud">
  ({ formatCoordinate(x) }, { formatCoordinate(y) })
</div>

{#if shouldShowPalette }
  <div class="palette-container" on:click={hidePalette}>
  </div>
  <div class="palette" transition:blink>
    <p>
      palette palette palette palette palette palette <br/>
      palette palette palette palette palette palette <br/>
      palette palette palette palette palette palette <br/>
      palette palette palette palette palette palette <br/>
      palette palette palette palette palette palette <br/>
      palette palette palette palette palette palette <br/>
    </p>
  </div>
{/if}

<style>
  .canvas {
    user-select: none;
    background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
    background-size: var(--dot-size) var(--dot-size);
    background-position: var(--dot-x) var(--dot-y);
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
  }

  .hud {
    background-color: #fff;
    padding: 4px;
    position: fixed;
    bottom: 2px;
    right: 2px;
    font-smooth: never;
    -webkit-font-smoothing : none;
  }

  .palette {
    position: fixed;
    top: var(--palette-y);
    left: var(--palette-x);
    border: 1px solid black;
    background-color: #fff;
    overflow: hidden;
  }

  .palette-container {
    width: 100vw;
    height: 100vh;
    background-color: #f0f;
    position: fixed;
    top: 0;
    left: 0;
  }

</style>