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   $: renderX = widget.box.left - modulo($topLeft.x, maxSize);
  11   $: renderY = widget.box.top - modulo($topLeft.y, maxSize);
  12
  13   console.log('Max', maxSize,
  14               'Widget Actual', widget.box.left, widget.box.top,
  15               'Top Left', $topLeft.x, $topLeft.y,
  16               'Mod Top Left', modulo($topLeft.x, maxSize), modulo($topLeft.y, maxSize),
  17               'Calculated',
  18               modulo(widget.box.left - modulo($topLeft.x, maxSize), maxSize),
  19               modulo(widget.box.top - modulo($topLeft.y, maxSize), maxSize))
  20
  21 </script>
  22
  23 <div class="widget"
  24   style:width="{width}px"
  25   style:height="{height}px"
  26   style:left="{renderX}px"
  27   style:top="{renderY}px"
  28 >
  29   {widget.type}
  30 </div>
  31
  32 <style>
  33   .widget {
  34     position: fixed;
  35     background-color: #f0f;
  36     border: 1px solid black;
  37     opacity: 0.5;
  38   }
  39 </style>