Update project, improve sensor/render logic

[rbdr/canvas] / src / lib / components / sensor.svelte

<script>
  import { browser } from '$app/environment';
  import { maxSize } from '$lib/config';
  import { modulo } from '$lib/math';
  import { canvas } from '$lib/stores/canvas';
  import { sensor } from '$lib/stores/widgets';

  const kSensorSize = 2;

  let left;
  let right;
  let top;
  let bottom;

  let timer;
  const fetchItems = function fetchItems( left, top, right, bottom ) {
    clearTimeout(timer);
		timer = setTimeout(() => {
      sensor.set({ left, top, right, bottom });
		}, 50);
  }

  $: {
    if (browser) {
      left = modulo($canvas.x - window.screen.width * kSensorSize, maxSize);
      top = modulo($canvas.y - window.screen.height * kSensorSize, maxSize);
      right = left + 2 * window.screen.width * kSensorSize;
      bottom = top + 2 * window.screen.height * kSensorSize;

      fetchItems(left, top, right, bottom);
    }
  }

</script>