Save WIP

[rbdr/canvas] / src / lib / components / widget.svelte

diff --git a/src/lib/components/widget.svelte b/src/lib/components/widget.svelte
index fd9401d35253184944a506ee5c212905b3d6d780..87a3ee578c7d921146c127727e9e93a6fb71dcc3 100644 (file)
--- a/src/lib/components/widget.svelte
+++ b/src/lib/components/widget.svelte
@@ -1,68 +1,66 @@
 <script>
 <script>

-  import { bottomRight, topLeft } from '$lib/stores/canvas';
-  import { modulo } from '$lib/math';
-  import { maxSize } from '$lib/config';
-  export let widget;
+       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;
+       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)
+       // Coordinates in canvas space are (p,q)
+       // Coordinates in screen space are (x,y)

 
 

-  $: xWidget = 0;
-  $: yWidget = 0;
+       $: xWidget = 0;
+       $: yWidget = 0;

 
 

-  $: {
+       $: {
+               const pCanvas = modulo($topLeft.x, maxSize);
+               const qCanvas = modulo($topLeft.y, maxSize);

 
 

-    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 pBoundary = modulo($bottomRight.x, maxSize);
-    const qBoundary = modulo($bottomRight.y, maxSize);
+               const pWidget = widget.box.left;
+               const qWidget = widget.box.top;

 
 

-    const pWidget = widget.box.left;
-    const qWidget = widget.box.top;
+               xWidget = pWidget - pCanvas;
+               yWidget = qWidget - qCanvas;

 
 

-    xWidget = pWidget - pCanvas;
-    yWidget = qWidget - qCanvas;
-
-    if (pWidget < pCanvas &&
-        pWidget < pBoundary) {
-      xWidget = modulo(xWidget, maxSize);
-    }
-
-    if (qWidget < qCanvas &&
-        qWidget < qBoundary) {
-      yWidget = modulo(yWidget, maxSize);
-    }
-
-    console.log('Max', maxSize,
-                'Widget Actual', widget.box.left, widget.box.top,
-                'Top Left', $topLeft.x, $topLeft.y,
-                'Mod Top Left', modulo($topLeft.x, maxSize), modulo($topLeft.y, maxSize),
-                'Calculated',
-                modulo(widget.box.left - modulo($topLeft.x, maxSize), maxSize),
-                modulo(widget.box.top - modulo($topLeft.y, maxSize), maxSize))
-
-  }
+               // 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;
+               }
+       }

 </script>
 
 </script>
 

-<div class="widget"
-  style:width="{width}px"
-  style:height="{height}px"
-  style:left="{xWidget}px"
-  style:top="{yWidget}px"
+<div
+       class="widget"
+       style:width="{width}px"
+       style:height="{height}px"
+       style:left="{xWidget}px"
+       style:top="{yWidget}px"

 >
 >

-  {widget.type}
+       {widget.type}

 </div>
 
 <style>
 </div>
 
 <style>

-  .widget {
-    position: fixed;
-    background-color: #f0f;
-    border: 1px solid black;
-    opacity: 0.5;
-  }
+       .widget {
+               position: fixed;
+               background-color: #f0f;
+               border: 1px solid black;
+               opacity: 0.5;
+       }

 </style>
 </style>