Partially render the boxes

2 files changed, 60 insertions, 7 deletions

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));
+  }
 });