From: Ruben Beltran del Rio <redacted>
Date: Thu, 7 Jul 2022 21:14:18 +0000 (+0200)
Subject: Partially render the boxes
X-Git-Url: https://git.r.bdr.sh/rbdr/canvas/commitdiff_plain/d7cea96940ddeb764c7343e05526f611863019d8?hp=c30e688113e317ff6aca8a63f16b202cbfff3820

Partially render the boxes
---

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>
diff --git a/src/lib/stores/canvas.js b/src/lib/stores/canvas.js
new file mode 100644
index 0000000..e0cc115
--- /dev/null
+++ b/src/lib/stores/canvas.js
@@ -0,0 +1,24 @@
+import { browser } from '$app/env';
+import { derived, writable } from 'svelte/store';
+
+export const canvas = writable({x: 0, y: 0});
+
+export const topLeft = derived(canvas, ($canvas) => {
+  if (browser) {
+    return {
+      x: $canvas.x - window.screen.width/2,
+      y: $canvas.y - window.screen.height/2
+    };
+  }
+  return {x: 0, y: 0}
+});
+
+export const bottomRight = derived(canvas, ($canvas) => {
+  if (browser) {
+    return {
+      x: $canvas.x + window.screen.width/2,
+      y: $canvas.y + window.screen.height/2
+    };
+  }
+  return {x: 0, y: 0}
+});
diff --git a/src/lib/stores/widgets.js b/src/lib/stores/widgets.js
index ff5c53e..4da94ff 100644
--- a/src/lib/stores/widgets.js
+++ b/src/lib/stores/widgets.js
@@ -3,17 +3,44 @@ import { createClient } from '@supabase/supabase-js';
 import { supabase } from '$lib/config';
 import { maxSize } from '$lib/config';
 
+const boxParser = /\(([0-9]+),([0-9]+)\),\(([0-9]+),([0-9]+)\)/
 const client = createClient(supabase.url, supabase.key);
 
 export const sensor = writable({left: 0, top: 0, right: 0, bottom: 0});
 
 const getBoxes = function getBoxes ({left, top, right, bottom}) {
-  return [
-    `box.ov."(${left},${top},${right},${bottom})"`,
-    `box.ov."(${left+maxSize},${top+maxSize},${right+maxSize},${bottom+maxSize})"`,
-    `box.ov."(${left+maxSize},${top},${right+maxSize},${bottom})"`,
-    `box.ov."(${left},${top+maxSize},${right},${bottom+maxSize})"`
-  ]
+  const results = [
+    `box.ov."((${left},${top}),(${right},${bottom}))"`,
+    `box.ov."((${left+maxSize},${top+maxSize}),(${right+maxSize},${bottom+maxSize}))"`,
+    `box.ov."((${left+maxSize},${top}),(${right+maxSize},${bottom}))"`,
+    `box.ov."((${left},${top+maxSize}),(${right},${bottom+maxSize}))"`
+  ];
+
+  if (right > maxSize  || bottom > maxSize) {
+    return [...results,
+      `box.ov."((${left-maxSize},${top-maxSize}),(${right-maxSize},${bottom-maxSize}))"`,
+      `box.ov."((${left-maxSize},${top}),(${right-maxSize},${bottom}))"`,
+      `box.ov."((${left},${top-maxSize}),(${right},${bottom-maxSize}))"`
+    ];
+  }
+
+  return results
+};
+
+const serialize = function serialize(widget) {
+
+  const boxComponents = widget.box
+    .match(boxParser)
+    .slice(1,5)
+    .map(Number);
+  const box = {
+    left: Math.min(boxComponents[0], boxComponents[2]),
+    right: Math.max(boxComponents[0], boxComponents[2]),
+    top: Math.min(boxComponents[1], boxComponents[3]),
+    bottom: Math.max(boxComponents[1], boxComponents[3])
+  };
+
+  return {...widget, box }
 };
 
 let ac = null;
@@ -27,5 +54,7 @@ export const widgets = derived(sensor, async function ($sensor, set) {
     .select()
     .or(boxes.join(','))
     .abortSignal(ac.signal)
-  return set(data);
+  if (data) {
+    return set(data.map(serialize));
+  }
 });
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 06c2357..411b81f 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -3,13 +3,13 @@
   import Background from '$lib/components/background.svelte';
   import Palette from '$lib/components/palette.svelte';
   import Hud from '$lib/components/hud.svelte';
+  import Widget from '$lib/components/widget.svelte';
   import { modulo } from '$lib/math';
   import { widgets } from '$lib/stores/widgets';
+  import { canvas } from '$lib/stores/canvas';
 
   import { coordinateLength, maxSize } from '$lib/config';
 
-  $: x = 0;
-  $: y = 0;
   $: shouldShowPalette = false;
 
   let dragging = false;
@@ -19,10 +19,11 @@
     if (dragging) {
       let deltaX = event.x - dragging.x;
       let deltaY = event.y - dragging.y;
-      x = modulo(x - deltaX, maxSize);
-      y = modulo(y - deltaY, maxSize);
+      let x = modulo($canvas.x - deltaX, maxSize);
+      let y = modulo($canvas.y - deltaY, maxSize);
       dragging.x = event.x;
       dragging.y = event.y;
+      canvas.set({ x, y })
     }
   }
 
@@ -59,15 +60,19 @@
   on:mouseup={stopDragging}
   on:mousemove={moveCanvas}
 >
-  <Sensor x={x} y={y} />
-  <Background x={x} y={y} />
-  <Hud x={x} y={y} />
+  <Sensor />
+  <Background />
+  <Hud />
 
   {#if shouldShowPalette }
     <Palette/>
   {/if}
 
-  <p>{JSON.stringify($widgets)}</p>
+  {#if $widgets}
+    {#each $widgets as widget}
+      <Widget widget={widget}/>
+    {/each}
+  {/if}
 </div>
 
 <style>