Render cases when the boundary crosses the viewport

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

  // Coordinates in canvas space are (p,q)
  // Coordinates in screen space are (x,y)

  $: xWidget = 0;
  $: yWidget = 0;

  $: {

    const pCanvas = modulo($topLeft.x, maxSize);
    const qCanvas = modulo($topLeft.y, maxSize);

    const pBoundary = modulo($bottomRight.x, maxSize);
    const qBoundary = modulo($bottomRight.y, maxSize);

    const pWidget = widget.box.left;
    const qWidget = widget.box.top;

    xWidget = pWidget - pCanvas;
    yWidget = qWidget - qCanvas;

    if (pWidget < pCanvas &&
        pWidget < pBoundary) {
      xWidget = modulo(xWidget, maxSize);
    }

    if (qWidget < qCanvas &&
        qWidget < qBoundary) {
      yWidget = modulo(yWidget, 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="{xWidget}px"
  style:top="{yWidget}px"
>
  {widget.type}
</div>

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