Render cases when the boundary crosses the viewport

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

<script>
  import Sensor from '$lib/components/sensor.svelte';
  import Background from '$lib/components/background.svelte';
  import Palette from '$lib/components/palette.svelte';
  import Hud from '$lib/components/hud.svelte';
  import Widget from '$lib/components/widget.svelte';
  import { modulo } from '$lib/math';
  import { widgets } from '$lib/stores/widgets';
  import { canvas } from '$lib/stores/canvas';

  import { coordinateLength, maxSize } from '$lib/config';

  $: shouldShowPalette = false;

  let dragging = false;

  const moveCanvas = function moveCanvas(event) {

    if (dragging) {
      let deltaX = event.x - dragging.x;
      let deltaY = event.y - dragging.y;
      let x = modulo($canvas.x - deltaX, maxSize);
      let y = modulo($canvas.y - deltaY, maxSize);
      dragging.x = event.x;
      dragging.y = event.y;
      canvas.set({ x, y })
    }
  }

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

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

  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:click={hidePalette}
  on:contextmenu={showPalette}
  on:mousedown={startDragging}
  on:mouseup={stopDragging}
  on:mousemove={moveCanvas}
>
  <Sensor />
  <Background />
  <Hud />

  {#if shouldShowPalette }
    <Palette/>
  {/if}

  {#if $widgets}
    {#each $widgets as widget}
      <Widget widget={widget}/>
    {/each}
  {/if}
</div>

<style>
  .canvas {
    user-select: none;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
  }
</style>