From 587d8fe65d61b8f7217b4e8850b44e43159c16fb Mon Sep 17 00:00:00 2001
From: Ruben Beltran del Rio <ruben@unlimited.pizza>
Date: Sun, 21 Jan 2024 14:48:35 +0100
Subject: Save WIP

---
 src/lib/animations/blink.js              |   6 --
 src/lib/components/background.svelte     |  56 +++++++------
 src/lib/components/hud.svelte            |  35 ++++----
 src/lib/components/minimap.svelte        |  91 ++++++++++----------
 src/lib/components/minimap_sector.svelte |  22 +++++
 src/lib/components/palette.svelte        |  33 ++++----
 src/lib/components/sensor.svelte         |  49 ++++++-----
 src/lib/components/widget.svelte         | 139 +++++++++++++------------------
 src/lib/math.js                          |   4 +-
 src/lib/plugins/square.js                |   0
 src/lib/stores/canvas.js                 |  30 +++----
 src/lib/stores/widgets.js                |  85 ++++++++++---------
 12 files changed, 278 insertions(+), 272 deletions(-)
 create mode 100644 src/lib/components/minimap_sector.svelte
 create mode 100644 src/lib/plugins/square.js

(limited to 'src/lib')

diff --git a/src/lib/animations/blink.js b/src/lib/animations/blink.js
index c12e031..eca3917 100644
--- a/src/lib/animations/blink.js
+++ b/src/lib/animations/blink.js
@@ -9,14 +9,8 @@ export const blink = function blink(node, params) {
 		duration: params.duration || 400,
 		easing: params.easing || sineInOut,
 		css: (t) => {
-			const halfWidth = originalWidth / 2;
-			const halfHeight = originalHeight / 2;
 			const width = Math.round(t <= 0.2 ? (originalWidth * t) / 0.2 : originalWidth);
-			const marginY = Math.round(t <= 0.2 ? halfHeight * (1 - t / 0.2) : 0);
 			const height = Math.round(t > 0.2 ? ((t - 0.2) / 0.8) * originalHeight : 0);
-			const marginX = Math.round(t > 0.2 ? (1 - (t - 0.2) / 0.8) * halfWidth : halfWidth);
-
-      console.log(width, height);
 
 			return `width: ${width}px; height: ${height}px;`;
 		}
diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index 1aa82fa..20b9e37 100644
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -1,33 +1,39 @@
 <script>
-  import { browser } from '$app/environment';
-  import { canvas } from '$lib/stores/canvas';
+	import { browser } from '$app/environment';
+	import { canvas } from '$lib/stores/canvas';
 
-  const kDotSize = 32;
+	const kDotSize = 32;
 
-  $: {
-    if (browser) {
-      document.documentElement.style.setProperty('--dot-size', kDotSize + 'px');
-      document.documentElement.style.setProperty('--dot-x', kDotSize - $canvas.x % kDotSize + 'px');
-      document.documentElement.style.setProperty('--dot-y', kDotSize - $canvas.y % kDotSize + 'px');
-    }
-  }
+	$: {
+		if (browser) {
+			document.documentElement.style.setProperty('--dot-size', 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>
 
-<div class="background"></div>
+<div class="background" />
 
 <style>
-  .background {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    user-select: none;
-    pointer-events: none;
-    background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
-    background-size: var(--dot-size) var(--dot-size);
-    background-position: var(--dot-x) var(--dot-y);
-    padding: 0;
-    margin: 0;
-    width: 100vw;
-    height: 100vh;
-  }
+	.background {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		user-select: none;
+		pointer-events: none;
+		background: radial-gradient(#aaa, #aaa 1px, #fff 1px, #fff var(--dot-size));
+		background-size: var(--dot-size) var(--dot-size);
+		background-position: var(--dot-x) var(--dot-y);
+		padding: 0;
+		margin: 0;
+		width: 100vw;
+		height: 100vh;
+	}
 </style>
diff --git a/src/lib/components/hud.svelte b/src/lib/components/hud.svelte
index ffea4de..a115c91 100644
--- a/src/lib/components/hud.svelte
+++ b/src/lib/components/hud.svelte
@@ -1,29 +1,26 @@
 <script>
-  import { coordinateLength } from '$lib/config';
-  import { canvas } from '$lib/stores/canvas';
+	import { coordinateLength } from '$lib/config';
+	import { canvas } from '$lib/stores/canvas';
 
-  const kSeparatorRegex = /([0-9a-z]{2})/g;
+	const kSeparatorRegex = /([0-9a-z]{2})/g;
 
-  const formatCoordinate = function formatCoordinate(coordinate) {
-    return coordinate
-      .toString(16)
-      .padStart(coordinateLength, 0)
-      .replace(kSeparatorRegex, '$1 ');
-  }
+	const formatCoordinate = function formatCoordinate(coordinate) {
+		return coordinate.toString(16).padStart(coordinateLength, 0).replace(kSeparatorRegex, '$1 ');
+	};
 </script>
 
 <div class="hud">
-  { formatCoordinate($canvas.x) } × { formatCoordinate($canvas.y) }
+	{formatCoordinate($canvas.x)} × {formatCoordinate($canvas.y)}
 </div>
 
 <style>
-  .hud {
-    background-color: #fff;
-    padding: 4px;
-    position: fixed;
-    bottom: 2px;
-    right: 2px;
-    font-smooth: never;
-    -webkit-font-smoothing : none;
-  }
+	.hud {
+		background-color: #fff;
+		padding: 4px;
+		position: fixed;
+		bottom: 2px;
+		right: 2px;
+		font-smooth: never;
+		-webkit-font-smoothing: none;
+	}
 </style>
diff --git a/src/lib/components/minimap.svelte b/src/lib/components/minimap.svelte
index cfee685..0f823f4 100644
--- a/src/lib/components/minimap.svelte
+++ b/src/lib/components/minimap.svelte
@@ -1,54 +1,55 @@
 <script>
-  import { coordinateLength } from '$lib/config';
-  import { sensor } from '$lib/stores/widgets';
-  import { maxSize } from '$lib/config';
+	import { topLeft, bottomRight } from '$lib/stores/canvas';
+	import { modulo } from '$lib/math';
+	import { maxSize } from '$lib/config';
+	import MinimapSector from '$lib/components/minimap_sector.svelte';
 
-  const isActive = function isActive($s, x, y) {
-    const isXActive = $s.left > x * maxSize && $s.left < (x + 1) * maxSize;
-    const isYActive = $s.top > y * maxSize && $s.top < (y + 1) * maxSize;
-    return isXActive || isYActive;
-  }
+	const gridSize = 24;
+	const sectors = Array(gridSize).fill(Array(gridSize).fill());
+	const size = maxSize / gridSize;
+
+	const isActive = function isActive(x, y, $topLeft) {
+		const pCanvas = modulo($topLeft.x, maxSize);
+		const qCanvas = modulo($topLeft.y, maxSize);
+		const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
+		const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
+
+		const sectorLeft = size * x;
+		const sectorTop = size * y;
+		const sectorRight = sectorLeft + size;
+		const sectorBottom = sectorTop + size;
+		return (
+			sectorRight >= pCanvas &&
+			pBoundary >= sectorLeft &&
+			sectorBottom >= qCanvas &&
+			qBoundary >= sectorTop
+		);
+	};
 </script>
 
 <div class="minimap">
-  <table>
-    <tr>
-      <td class="{isActive($sensor, -1,-1) ? 'active' : ''}"></td>
-      <td class="{isActive($sensor, 0,-1) ? 'active' : ''}"></td>
-      <td class="{isActive($sensor, 1,-1) ? 'active' : ''}"></td>
-    </tr>
-    <tr>
-      <td class="{isActive($sensor, -1,0) ? 'active' : ''}"></td>
-      <td class="{isActive($sensor, 0,0) ? 'active' : ''}"></td>
-      <td class="{isActive($sensor, 1,0) ? 'active' : ''}"></td>
-    </tr>
-    <tr>
-      <td class="{isActive($sensor, -1,1) ? 'active' : ''}"></td>
-      <td class="{isActive($sensor, 0,1) ? 'active' : ''}"></td>
-      <td class="{isActive($sensor, 1,1) ? 'active' : ''}"></td>
-    </tr>
-  </table>
+	<table>
+		{#each sectors as _, y}
+			<tr>
+				{#each sectors[y] as _, x}
+					<MinimapSector x="{x}," y="{y}," {size} isActive={isActive(x, y, $topLeft)} />
+				{/each}
+			</tr>
+		{/each}
+	</table>
 </div>
 
 <style>
-  .minimap {
-    background-color: #fff;
-    padding: 4px;
-    position: fixed;
-    top: 2px;
-    right: 2px;
-    font-smooth: never;
-    -webkit-font-smoothing : none;
-  }
-
-  td {
-    width: 10px;
-    height: 10px;
-    border: 1px solid black;
-  }
-
-  td.active {
-    background-color: magenta;
-  }
+	.minimap {
+		background-color: #fff;
+		padding: 4px;
+		position: fixed;
+		top: 2px;
+		right: 2px;
+		font-smooth: never;
+		-webkit-font-smoothing: none;
+	}
+	table {
+		border-collapse: collapse;
+	}
 </style>
-
diff --git a/src/lib/components/minimap_sector.svelte b/src/lib/components/minimap_sector.svelte
new file mode 100644
index 0000000..2e14043
--- /dev/null
+++ b/src/lib/components/minimap_sector.svelte
@@ -0,0 +1,22 @@
+<script>
+	export let x;
+	export let y;
+	export let size;
+	export let isActive;
+
+	import { countElements } from '$lib/stores/widgets';
+</script>
+
+<td class={isActive ? 'active' : ''} />
+
+<style>
+	td {
+		width: 4px;
+		height: 4px;
+		border: 1px solid black;
+	}
+
+	td.active {
+		border: 2px solid cyan;
+	}
+</style>
diff --git a/src/lib/components/palette.svelte b/src/lib/components/palette.svelte
index 94ba3db..4b7bcca 100644
--- a/src/lib/components/palette.svelte
+++ b/src/lib/components/palette.svelte
@@ -3,23 +3,24 @@
 </script>
 
 <div class="palette" transition:blink>
-  <p>
-    palette palette palette palette palette palette <br/>
-    palette palette palette palette palette palette <br/>
-    palette palette palette palette palette palette <br/>
-    palette palette palette palette palette palette <br/>
-    palette palette palette palette palette palette <br/>
-    palette palette palette palette palette palette <br/>
-  </p>
+	<p>
+		palette palette palette palette palette palette <br />
+		palette palette palette palette palette palette <br />
+		palette palette palette palette palette palette <br />
+		palette palette palette palette palette palette <br />
+		palette palette palette palette palette palette <br />
+		palette palette palette palette palette palette <br />
+	</p>
 </div>
 
 <style>
-  .palette {
-    position: fixed;
-    top: var(--palette-y);
-    left: var(--palette-x);
-    border: 1px solid black;
-    background-color: #fff;
-    overflow: hidden;
-  }
+	.palette {
+		position: fixed;
+		top: var(--palette-y);
+		left: var(--palette-x);
+		border: 1px solid black;
+		background-color: #fff;
+		overflow: hidden;
+    z-index: 10000;
+	}
 </style>
diff --git a/src/lib/components/sensor.svelte b/src/lib/components/sensor.svelte
index b6d38d8..9458705 100644
--- a/src/lib/components/sensor.svelte
+++ b/src/lib/components/sensor.svelte
@@ -1,34 +1,33 @@
 <script>
-  import { browser } from '$app/environment';
-  import { maxSize } from '$lib/config';
-  import { modulo } from '$lib/math';
-  import { canvas } from '$lib/stores/canvas';
-  import { sensor } from '$lib/stores/widgets';
+	import { browser } from '$app/environment';
+	import { maxSize } from '$lib/config';
+	import { modulo } from '$lib/math';
+	import { canvas } from '$lib/stores/canvas';
+	import { sensor } from '$lib/stores/widgets';
 
-  const kSensorSize = 2;
+	const kSensorSize = 2;
 
-  let left;
-  let right;
-  let top;
-  let bottom;
+	let left;
+	let right;
+	let top;
+	let bottom;
 
-  let timer;
-  const fetchItems = function fetchItems( left, top, right, bottom ) {
-    clearTimeout(timer);
+	let timer;
+	const fetchItems = function fetchItems(left, top, right, bottom) {
+		clearTimeout(timer);
 		timer = setTimeout(() => {
-      sensor.set({ left, top, right, bottom });
+			sensor.set({ left, top, right, bottom });
 		}, 50);
-  }
+	};
 
-  $: {
-    if (browser) {
-      left = modulo($canvas.x - window.screen.width * kSensorSize, maxSize);
-      top = modulo($canvas.y - window.screen.height * kSensorSize, maxSize);
-      right = left + 2 * window.screen.width * kSensorSize;
-      bottom = top + 2 * window.screen.height * kSensorSize;
-
-      fetchItems(left, top, right, bottom);
-    }
-  }
+	$: {
+		if (browser) {
+			left = modulo($canvas.x - window.screen.width * kSensorSize, maxSize);
+			top = modulo($canvas.y - window.screen.height * kSensorSize, maxSize);
+			right = left + 2 * window.screen.width * kSensorSize;
+			bottom = top + 2 * window.screen.height * kSensorSize;
 
+			fetchItems(left, top, right, bottom);
+		}
+	}
 </script>
diff --git a/src/lib/components/widget.svelte b/src/lib/components/widget.svelte
index 907a016..87a3ee5 100644
--- a/src/lib/components/widget.svelte
+++ b/src/lib/components/widget.svelte
@@ -1,89 +1,66 @@
 <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;
-
-  // Coordinates in canvas space are (p,q)
-  // Coordinates in screen space are (x,y)
-
-  $: xWidget = 0;
-  $: yWidget = 0;
-
-  $: {
-
-    const pCanvas = modulo($topLeft.x, maxSize);
-    const qCanvas = modulo($topLeft.y, maxSize);
-
-    const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
-    const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
-
-    const pWidget = widget.box.left;
-    const qWidget = widget.box.top;
-
-    xWidget = pWidget - pCanvas;
-    yWidget = qWidget - qCanvas;
-
-    // Case 1: Boundary jump happens inside the box
-    if (pWidget < pCanvas
-        && pBoundary > maxSize
-        && pWidget < pBoundary - maxSize) {
-      xWidget = xWidget + maxSize;
-    }
-    // Case 2: Boundary jump happens to the left of the box
-    else if (pWidget > pCanvas
-        && pBoundary < maxSize
-        && pWidget > pBoundary) {
-      xWidget = xWidget - maxSize;
-    }
-
-    // Case 1: Boundary jump happens inside the box
-    if (qWidget < qCanvas
-        && qBoundary > maxSize
-        && qWidget < qBoundary - maxSize) {
-      yWidget = yWidget + maxSize;
-    }
-    // Case 2: Boundary jump happens above the top of the box
-    else if (qWidget > qCanvas
-        && qBoundary < maxSize
-        && qWidget > qBoundary) {
-      yWidget = yWidget - maxSize;
-    }
-
-
-    console.log('Max', maxSize,
-                'Widget Actual', widget.box.left, widget.box.top,
-                'Canvas WH', Math.abs($topLeft.x - $bottomRight.x), Math.abs($topLeft.y - $bottomRight.y),
-                'Canvas XY', $topLeft.x, $topLeft.y,
-                'Canvas PQ', pCanvas, qCanvas,
-                'Boundary XY', $bottomRight.x, $bottomRight.y,
-                'Boundary PQ', pBoundary, qBoundary,
-                'Widget Rendered', xWidget, yWidget,
-                'Calculated',
-                modulo(pWidget - pCanvas, maxSize),
-                modulo(qWidget - qCanvas, maxSize))
-
-  }
-
+	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;
+
+	// Coordinates in canvas space are (p,q)
+	// Coordinates in screen space are (x,y)
+
+	$: xWidget = 0;
+	$: yWidget = 0;
+
+	$: {
+		const pCanvas = modulo($topLeft.x, maxSize);
+		const qCanvas = modulo($topLeft.y, maxSize);
+
+		const pBoundary = pCanvas + Math.abs($topLeft.x - $bottomRight.x);
+		const qBoundary = qCanvas + Math.abs($topLeft.y - $bottomRight.y);
+
+		const pWidget = widget.box.left;
+		const qWidget = widget.box.top;
+
+		xWidget = pWidget - pCanvas;
+		yWidget = qWidget - qCanvas;
+
+		// Case 1: Boundary jump happens inside the box
+		if (pWidget < pCanvas && pBoundary > maxSize && pWidget < pBoundary - maxSize) {
+			xWidget = xWidget + maxSize;
+		}
+		// Case 2: Boundary jump happens to the left of the box
+		else if (pWidget > pCanvas && pBoundary < maxSize && pWidget > pBoundary) {
+			xWidget = xWidget - maxSize;
+		}
+
+		// Case 1: Boundary jump happens inside the box
+		if (qWidget < qCanvas && qBoundary > maxSize && qWidget < qBoundary - maxSize) {
+			yWidget = yWidget + maxSize;
+		}
+		// Case 2: Boundary jump happens above the top of the box
+		else if (qWidget > qCanvas && qBoundary < maxSize && qWidget > qBoundary) {
+			yWidget = yWidget - maxSize;
+		}
+	}
 </script>
 
-<div class="widget"
-  style:width="{width}px"
-  style:height="{height}px"
-  style:left="{xWidget}px"
-  style:top="{yWidget}px"
+<div
+	class="widget"
+	style:width="{width}px"
+	style:height="{height}px"
+	style:left="{xWidget}px"
+	style:top="{yWidget}px"
 >
-  {widget.type}
+	{widget.type}
 </div>
 
 <style>
-  .widget {
-    position: fixed;
-    background-color: #f0f;
-    border: 1px solid black;
-    opacity: 0.5;
-  }
+	.widget {
+		position: fixed;
+		background-color: #f0f;
+		border: 1px solid black;
+		opacity: 0.5;
+	}
 </style>
diff --git a/src/lib/math.js b/src/lib/math.js
index c745cdc..9b45cf0 100644
--- a/src/lib/math.js
+++ b/src/lib/math.js
@@ -3,6 +3,6 @@
  * @param {number} dividend the number to divide
  * @param {number} divisor the divisor to calculate the remainder
  */
-export const modulo = function modulo (dividend, divisor) {
-  return ((dividend % divisor) + divisor) % divisor
+export const modulo = function modulo(dividend, divisor) {
+	return ((dividend % divisor) + divisor) % divisor;
 };
diff --git a/src/lib/plugins/square.js b/src/lib/plugins/square.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/stores/canvas.js b/src/lib/stores/canvas.js
index 2a5e89c..ed0a5d7 100644
--- a/src/lib/stores/canvas.js
+++ b/src/lib/stores/canvas.js
@@ -1,24 +1,24 @@
 import { browser } from '$app/environment';
 import { derived, writable } from 'svelte/store';
 
-export const canvas = writable({x: 0, y: 0});
+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}
+	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}
+	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 9bdb649..372cad1 100644
--- a/src/lib/stores/widgets.js
+++ b/src/lib/stores/widgets.js
@@ -1,55 +1,64 @@
-import { derived, writable } from 'svelte/store';
+import { derived, readable, writable } from 'svelte/store';
 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 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});
+export const sensor = writable({ left: 0, top: 0, right: 0, bottom: 0 });
 
-const getBoxes = function getBoxes ({left, top, right, bottom}) {
-  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}))"`,
-    `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 getBoxes = function getBoxes({ left, top, right, bottom }) {
+	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}))"`,
+		`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
+	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])
+	};
 
-  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 }
+	return { ...widget, box };
 };
 
 let ac = null;
 export const widgets = derived(sensor, async function ($sensor, set) {
-
-  const boxes = getBoxes($sensor);
-  ac && ac.abort()
-  ac = new AbortController();
-  const { data } = await client
-    .from('widgets')
-    .select()
-    .or(boxes.join(','))
-    .abortSignal(ac.signal)
-  if (data) {
-    return set(data.map(serialize));
-  }
+	const boxes = getBoxes($sensor);
+	ac && ac.abort();
+	ac = new AbortController();
+	const { data } = await client.from('widgets').select().or(boxes.join(',')).abortSignal(ac.signal);
+	if (data) {
+		return set(data.map(serialize));
+	}
 });
+
+export const countElements = function countElements(left, top, right, bottom) {
+	let countAc = null;
+	return readable(0, (set) => {
+		(async function () {
+			countAc && countAc.abort();
+			countAc = new AbortController();
+			const { data } = await client
+				.from('widgets')
+				.select('*', { head: true, count: 'estimated' })
+				.or(`box.ov."((${left},${top}),(${right},${bottom}))"`)
+				.abortSignal(countAc.signal);
+			if (data) {
+				return set(data);
+			}
+		})();
+	});
+};
-- 
cgit