Render cases when the boundary crosses the viewport

[rbdr/canvas] / src / lib / stores / widgets.js

diff --git a/src/lib/stores/widgets.js b/src/lib/stores/widgets.js
index ff5c53ecd8f60d9cb12076753e633070e31613ea..4da94ff1980c012e417f0959c1f61fe64d82af7f 100644 (file)
--- 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';
 
 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}) {
 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;
 };
 
 let ac = null;


@@ -27,5 +54,7 @@ export const widgets = derived(sensor, async function ($sensor, set) {
     .select()
     .or(boxes.join(','))
     .abortSignal(ac.signal)
     .select()
     .or(boxes.join(','))
     .abortSignal(ac.signal)

-  return set(data);
+  if (data) {
+    return set(data.map(serialize));
+  }

 });
 });