git.r.bdr.sh - rbdr/canvas/blob - src/lib/components/widget.svelte

   1 <script>
   2   import { bottomRight, topLeft } from '$lib/stores/canvas';
   3   import { modulo } from '$lib/math';
   4   import { maxSize } from '$lib/config';
   5   export let widget;
   6
   7   const width = widget.box.right - widget.box.left;
   8   const height = widget.box.bottom - widget.box.top;
   9
  10   // Coordinates in canvas space are (p,q)
  11   // Coordinates in screen space are (x,y)
  12
  13   $: xWidget = 0;
  14   $: yWidget = 0;
  15
  16   $: {
  17
  18     const pCanvas = modulo($topLeft.x, maxSize);
  19     const qCanvas = modulo($topLeft.y, maxSize);
  20
  21     const pBoundary = modulo($bottomRight.x, maxSize);
  22     const qBoundary = modulo($bottomRight.y, maxSize);
  23
  24     const pWidget = widget.box.left;
  25     const qWidget = widget.box.top;
  26
  27     xWidget = pWidget - pCanvas;
  28     yWidget = qWidget - qCanvas;
  29
  30     if (pWidget < pCanvas &&
  31         pWidget < pBoundary) {
  32       xWidget = modulo(xWidget, maxSize);
  33     }
  34
  35     if (qWidget < qCanvas &&
  36         qWidget < qBoundary) {
  37       yWidget = modulo(yWidget, maxSize);
  38     }
  39
  40     console.log('Max', maxSize,
  41                 'Widget Actual', widget.box.left, widget.box.top,
  42                 'Top Left', $topLeft.x, $topLeft.y,
  43                 'Mod Top Left', modulo($topLeft.x, maxSize), modulo($topLeft.y, maxSize),
  44                 'Calculated',
  45                 modulo(widget.box.left - modulo($topLeft.x, maxSize), maxSize),
  46                 modulo(widget.box.top - modulo($topLeft.y, maxSize), maxSize))
  47
  48   }
  49
  50 </script>
  51
  52 <div class="widget"
  53   style:width="{width}px"
  54   style:height="{height}px"
  55   style:left="{xWidget}px"
  56   style:top="{yWidget}px"
  57 >
  58   {widget.type}
  59 </div>
  60
  61 <style>
  62   .widget {
  63     position: fixed;
  64     background-color: #f0f;
  65     border: 1px solid black;
  66     opacity: 0.5;
  67   }
  68 </style>