Partially render the boxes

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

<script>
  import { bottomRight, topLeft } from '$lib/stores/canvas';
  import { modulo } from '$lib/math';
  import { maxSize } from '$lib/config';
  export let widget;

  const width = widget.box.right - widget.box.left;
  const height = widget.box.bottom - widget.box.top;

  $: renderX = widget.box.left - modulo($topLeft.x, maxSize);
  $: renderY = widget.box.top - modulo($topLeft.y, maxSize);

  console.log('Max', maxSize,
              'Widget Actual', widget.box.left, widget.box.top,
              'Top Left', $topLeft.x, $topLeft.y,
              'Mod Top Left', modulo($topLeft.x, maxSize), modulo($topLeft.y, maxSize),
              'Calculated',
              modulo(widget.box.left - modulo($topLeft.x, maxSize), maxSize),
              modulo(widget.box.top - modulo($topLeft.y, maxSize), maxSize))

</script>

<div class="widget"
  style:width="{width}px"
  style:height="{height}px"
  style:left="{renderX}px"
  style:top="{renderY}px"
>
  {widget.type}
</div>

<style>
  .widget {
    position: fixed;
    background-color: #f0f;
    border: 1px solid black;
    opacity: 0.5;
  }
</style>