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                 const pCanvas = modulo($topLeft.x, maxSize);
  18                 const qCanvas = modulo($topLeft.y, maxSize);
  19
  20                 const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
  21                 const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
  22
  23                 const pWidget = widget.box.left;
  24                 const qWidget = widget.box.top;
  25
  26                 xWidget = pWidget - pCanvas;
  27                 yWidget = qWidget - qCanvas;
  28
  29                 // Case 1: Boundary jump happens inside the box
  30                 if (pWidget < pCanvas && pBoundary > maxSize && pWidget < pBoundary - maxSize) {
  31                         xWidget = xWidget + maxSize;
  32                 }
  33                 // Case 2: Boundary jump happens to the left of the box
  34                 else if (pWidget > pCanvas && pBoundary < maxSize && pWidget > pBoundary) {
  35                         xWidget = xWidget - maxSize;
  36                 }
  37
  38                 // Case 1: Boundary jump happens inside the box
  39                 if (qWidget < qCanvas && qBoundary > maxSize && qWidget < qBoundary - maxSize) {
  40                         yWidget = yWidget + maxSize;
  41                 }
  42                 // Case 2: Boundary jump happens above the top of the box
  43                 else if (qWidget > qCanvas && qBoundary < maxSize && qWidget > qBoundary) {
  44                         yWidget = yWidget - maxSize;
  45                 }
  46         }
  47 </script>
  48
  49 <div
  50         class="widget"
  51         style:width="{width}px"
  52         style:height="{height}px"
  53         style:left="{xWidget}px"
  54         style:top="{yWidget}px"
  55 >
  56         {widget.type}
  57 </div>
  58
  59 <style>
  60         .widget {
  61                 position: fixed;
  62                 background-color: #f0f;
  63                 border: 1px solid black;
  64                 opacity: 0.5;
  65         }
  66 </style>