Allow dragging

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

<script>

  import { browser } from '$app/env';

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

  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;
  }

</script>

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

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

<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;
  }
</style>