Update project, improve sensor/render logic

[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 = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
    const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);

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

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

    // Case 1: Boundary jump happens inside the box
    if (pWidget < pCanvas
        && pBoundary > maxSize
        && pWidget < pBoundary - maxSize) {
      xWidget = xWidget + maxSize;
    }
    // Case 2: Boundary jump happens to the left of the box
    else if (pWidget > pCanvas
        && pBoundary < maxSize
        && pWidget > pBoundary) {
      xWidget = xWidget - maxSize;
    }

    // Case 1: Boundary jump happens inside the box
    if (qWidget < qCanvas
        && qBoundary > maxSize
        && qWidget < qBoundary - maxSize) {
      yWidget = yWidget + maxSize;
    }
    // Case 2: Boundary jump happens above the top of the box
    else if (qWidget > qCanvas
        && qBoundary < maxSize
        && qWidget > qBoundary) {
      yWidget = yWidget - maxSize;
    }


    console.log('Max', maxSize,
                'Widget Actual', widget.box.left, widget.box.top,
                'Canvas WH', Math.abs($topLeft.x - $bottomRight.x), Math.abs($topLeft.y - $bottomRight.y),
                'Canvas XY', $topLeft.x, $topLeft.y,
                'Canvas PQ', pCanvas, qCanvas,
                'Boundary XY', $bottomRight.x, $bottomRight.y,
                'Boundary PQ', pBoundary, qBoundary,
                'Widget Rendered', xWidget, yWidget,
                'Calculated',
                modulo(pWidget - pCanvas, maxSize),
                modulo(qWidget - qCanvas, 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>