From: Ruben Beltran del Rio <redacted>
Date: Fri, 8 Jul 2022 13:02:08 +0000 (+0200)
Subject: Render cases when the boundary crosses the viewport
X-Git-Url: https://git.r.bdr.sh/rbdr/canvas/commitdiff_plain/c55cffecda48be785d89721dc8c8f04c99270b2d?hp=d7cea96940ddeb764c7343e05526f611863019d8

Render cases when the boundary crosses the viewport
---

diff --git a/src/lib/components/widget.svelte b/src/lib/components/widget.svelte
index 7d587b5..fd9401d 100644
--- a/src/lib/components/widget.svelte
+++ b/src/lib/components/widget.svelte
@@ -7,24 +7,53 @@
   const width = widget.box.right - widget.box.left;
   const height = widget.box.bottom - widget.box.top;
 
-  $: renderX = widget.box.left - modulo($topLeft.x, maxSize);
-  $: renderY = widget.box.top - modulo($topLeft.y, maxSize);
+  // Coordinates in canvas space are (p,q)
+  // Coordinates in screen space are (x,y)
 
-  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))
+  $: xWidget = 0;
+  $: yWidget = 0;
+
+  $: {
+
+    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 pWidget = widget.box.left;
+    const qWidget = widget.box.top;
+
+    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))
+
+  }
 
 </script>
 
 <div class="widget"
   style:width="{width}px"
   style:height="{height}px"
-  style:left="{renderX}px"
-  style:top="{renderY}px"
+  style:left="{xWidget}px"
+  style:top="{yWidget}px"
 >
   {widget.type}
 </div>