Update project, improve sensor/render logic

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

diff --git a/src/lib/components/widget.svelte b/src/lib/components/widget.svelte
index fd9401d35253184944a506ee5c212905b3d6d780..907a01631d0b9847676d21c1037e3f9dc856a3fa 100644 (file)
--- a/src/lib/components/widget.svelte
+++ b/src/lib/components/widget.svelte
@@ -18,8 +18,8 @@
     const pCanvas = modulo($topLeft.x, maxSize);
     const qCanvas = modulo($topLeft.y, maxSize);
 
-    const pBoundary = modulo($bottomRight.x, maxSize);
-    const qBoundary = modulo($bottomRight.y, maxSize);
+    const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
+    const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
 
     const pWidget = widget.box.left;
     const qWidget = widget.box.top;
@@ -27,23 +27,44 @@
     xWidget = pWidget - pCanvas;
     yWidget = qWidget - qCanvas;
 
-    if (pWidget < pCanvas &&
-        pWidget < pBoundary) {
-      xWidget = modulo(xWidget, 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;
     }
 
-    if (qWidget < qCanvas &&
-        qWidget < qBoundary) {
-      yWidget = modulo(yWidget, 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;
     }
 
+
     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),
+                'Canvas WH', Math.abs($topLeft.x - $bottomRight.x), Math.abs($topLeft.y - $bottomRight.y),
+                'Canvas XY', $topLeft.x, $topLeft.y,
+                'Canvas PQ', pCanvas, qCanvas,
+                'Boundary XY', $bottomRight.x, $bottomRight.y,
+                'Boundary PQ', pBoundary, qBoundary,
+                'Widget Rendered', xWidget, yWidget,
                 'Calculated',
-                modulo(widget.box.left - modulo($topLeft.x, maxSize), maxSize),
-                modulo(widget.box.top - modulo($topLeft.y, maxSize), maxSize))
+                modulo(pWidget - pCanvas, maxSize),
+                modulo(qWidget - qCanvas, maxSize))
 
   }