Partially render the boxes

4 files changed, 49 insertions, 16 deletions

diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index 7664939..03c5377 100644
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -1,16 +1,14 @@
 <script>
   import { browser } from '$app/env';
-
-  export let x;
-  export let y;
+  import { canvas } from '$lib/stores/canvas';
 
   const kDotSize = 32;
 
   $: {
     if (browser) {
       document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
-      document.documentElement.style.setProperty('--dot-x', kDotSize - x % kDotSize + 'px');
-      document.documentElement.style.setProperty('--dot-y', kDotSize - y % kDotSize + 'px');
+      document.documentElement.style.setProperty('--dot-x', kDotSize - $canvas.x % kDotSize + 'px');
+      document.documentElement.style.setProperty('--dot-y', kDotSize - $canvas.y % kDotSize + 'px');
     }
   }
 </script>
diff --git a/src/lib/components/hud.svelte b/src/lib/components/hud.svelte
index f79658a..ffea4de 100644
--- a/src/lib/components/hud.svelte
+++ b/src/lib/components/hud.svelte
@@ -1,8 +1,6 @@
 <script>
   import { coordinateLength } from '$lib/config';
-
-  export let x;
-  export let y;
+  import { canvas } from '$lib/stores/canvas';
 
   const kSeparatorRegex = /([0-9a-z]{2})/g;
 
@@ -15,7 +13,7 @@
 </script>
 
 <div class="hud">
-  { formatCoordinate(x) } × { formatCoordinate(y) }
+  { formatCoordinate($canvas.x) } × { formatCoordinate($canvas.y) }
 </div>
 
 <style>
diff --git a/src/lib/components/sensor.svelte b/src/lib/components/sensor.svelte
index e98b740..3b7dfc2 100644
--- a/src/lib/components/sensor.svelte
+++ b/src/lib/components/sensor.svelte
@@ -1,11 +1,9 @@
 <script>
   import { browser } from '$app/env';
   import { maxSize } from '$lib/config';
+  import { canvas } from '$lib/stores/canvas';
   import { sensor } from '$lib/stores/widgets';
 
-  export let x;
-  export let y;
-
   const kSensorSize = 2;
 
   let left;
@@ -23,10 +21,10 @@
 
   $: {
     if (browser) {
-      left = x - window.screen.width * kSensorSize;
-      top = y - window.screen.height * kSensorSize;
-      right = x + window.screen.width * kSensorSize;
-      bottom = y + window.screen.height * kSensorSize;
+      left = $canvas.x - window.screen.width * kSensorSize;
+      top = $canvas.y - window.screen.height * kSensorSize;
+      right = $canvas.x + window.screen.width * kSensorSize;
+      bottom = $canvas.y + window.screen.height * kSensorSize;
 
       fetchItems(left, top, right, bottom);
     }
diff --git a/src/lib/components/widget.svelte b/src/lib/components/widget.svelte
new file mode 100644
index 0000000..7d587b5
--- /dev/null
+++ b/src/lib/components/widget.svelte
@@ -0,0 +1,39 @@
+<script>
+  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;
+
+  $: renderX = widget.box.left - modulo($topLeft.x, maxSize);
+  $: renderY = widget.box.top - modulo($topLeft.y, 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"
+>
+  {widget.type}
+</div>
+
+<style>
+  .widget {
+    position: fixed;
+    background-color: #f0f;
+    border: 1px solid black;
+    opacity: 0.5;
+  }
+</style>