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 = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
  22     const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
  23
  24     const pWidget = widget.box.left;
  25     const qWidget = widget.box.top;
  26
  27     xWidget = pWidget - pCanvas;
  28     yWidget = qWidget - qCanvas;
  29
  30     // Case 1: Boundary jump happens inside the box
  31     if (pWidget < pCanvas
  32         && pBoundary > maxSize
  33         && pWidget < pBoundary - maxSize) {
  34       xWidget = xWidget + maxSize;
  35     }
  36     // Case 2: Boundary jump happens to the left of the box
  37     else if (pWidget > pCanvas
  38         && pBoundary < maxSize
  39         && pWidget > pBoundary) {
  40       xWidget = xWidget - maxSize;
  41     }
  42
  43     // Case 1: Boundary jump happens inside the box
  44     if (qWidget < qCanvas
  45         && qBoundary > maxSize
  46         && qWidget < qBoundary - maxSize) {
  47       yWidget = yWidget + maxSize;
  48     }
  49     // Case 2: Boundary jump happens above the top of the box
  50     else if (qWidget > qCanvas
  51         && qBoundary < maxSize
  52         && qWidget > qBoundary) {
  53       yWidget = yWidget - maxSize;
  54     }
  55
  56
  57     console.log('Max', maxSize,
  58                 'Widget Actual', widget.box.left, widget.box.top,
  59                 'Canvas WH', Math.abs($topLeft.x - $bottomRight.x), Math.abs($topLeft.y - $bottomRight.y),
  60                 'Canvas XY', $topLeft.x, $topLeft.y,
  61                 'Canvas PQ', pCanvas, qCanvas,
  62                 'Boundary XY', $bottomRight.x, $bottomRight.y,
  63                 'Boundary PQ', pBoundary, qBoundary,
  64                 'Widget Rendered', xWidget, yWidget,
  65                 'Calculated',
  66                 modulo(pWidget - pCanvas, maxSize),
  67                 modulo(qWidget - qCanvas, maxSize))
  68
  69   }
  70
  71 </script>
  72
  73 <div class="widget"
  74   style:width="{width}px"
  75   style:height="{height}px"
  76   style:left="{xWidget}px"
  77   style:top="{yWidget}px"
  78 >
  79   {widget.type}
  80 </div>
  81
  82 <style>
  83   .widget {
  84     position: fixed;
  85     background-color: #f0f;
  86     border: 1px solid black;
  87     opacity: 0.5;
  88   }
  89 </style>