feat(webui): 🚧 base of select all

webui/src/components/EntitySelect.svelte

@@ -1,11 +1,32 @@
 <script lang="ts" context="module">
   import { writable } from "svelte/store";
+  import api from "../lib/api";
 
   export const selected = writable<string[]>([]);
+  export async function selectGroup(address: string) {
+    const result = await api.query(
+      new Query().matches(undefined, ATTR_IN, `@${address}`),
+    );
+    result.entities
+      .map((e) => e.replace(/^@/, ""))
+      .forEach((entity) => {
+        selected.update((selected) => {
+          if (!selected.includes(entity)) {
+            return [...selected, entity];
+          } else {
+            return selected;
+          }
+        });
+      });
+  }
 </script>
 
 <script lang="ts">
   import { onMount } from "svelte";
+  import { i18n } from "../i18n";
+
+  import { Query } from "@upnd/upend";
+  import { ATTR_IN } from "@upnd/upend/constants";
 
   let canvas: HTMLCanvasElement;
 
@@ -19,13 +40,48 @@
     window.addEventListener("resize", resizeCanvas);
     resizeCanvas();
 
-    // if ctrl is pressed while right button is dragged over screen, draw a red line on canvas
     let selecting = false;
+    let selectAllArea: DOMRect | undefined = undefined;
+    let selectAllAddress: string | undefined = undefined;
     document.addEventListener("mousedown", (ev) => {
       if (ev.ctrlKey) {
         ev.preventDefault();
 
         selecting = true;
+
+        const el = document.elementFromPoint(
+          ev.clientX,
+          ev.clientY,
+        ) as HTMLElement;
+
+        const groupElement = el.closest("[data-address-group]") as
+          | HTMLElement
+          | undefined;
+
+        if (groupElement) {
+          const banner = groupElement.querySelector("h2 .banner");
+
+          if (banner) {
+            const rect = banner.getBoundingClientRect();
+            selectAllArea = rect;
+            selectAllAddress = groupElement.dataset.addressGroup;
+
+            ctx.rect(rect.left, rect.top, rect.width, rect.height);
+            ctx.fillStyle = "#dc322f33";
+            ctx.fill();
+
+            ctx.fillStyle = "#dc322f77";
+            ctx.font = `bold ${rect.height / 2}px Inter`;
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(
+              $i18n.t("Select All"),
+              rect.left + rect.width / 2,
+              rect.top + rect.height / 2,
+            );
+          }
+        }
+
         ctx.strokeStyle = "#dc322f77";
         ctx.lineWidth = 7;
         ctx.beginPath();
@@ -37,6 +93,18 @@
       if (selecting) {
         ev.preventDefault();
 
+        if (selectAllArea) {
+          if (
+            ev.clientX > selectAllArea.left &&
+            ev.clientX < selectAllArea.right &&
+            ev.clientY > selectAllArea.top &&
+            ev.clientY < selectAllArea.bottom
+          ) {
+            selectGroup(selectAllAddress);
+            stop();
+          }
+        }
+
         const el = document.elementFromPoint(
           ev.clientX,
           ev.clientY,
@@ -64,9 +132,15 @@
     });
 
     document.addEventListener("mouseup", () => {
+      stop();
+    });
+
+    function stop() {
+      selectAllArea = undefined;
+      selectAllAddress = undefined;
       selecting = false;
       ctx.clearRect(0, 0, canvas.width, canvas.height);
-    });
+    }
   });
 </script>
 

webui/src/components/Inspect.svelte

@@ -17,7 +17,12 @@
   import EntryList from "./widgets/EntryList.svelte";
   import api from "../lib/api";
   import EntityList from "./widgets/EntityList.svelte";
-  import { ATTR_IN, ATTR_LABEL, ATTR_KEY, ATTR_OF } from "@upnd/upend/constants";
+  import {
+    ATTR_IN,
+    ATTR_LABEL,
+    ATTR_KEY,
+    ATTR_OF,
+  } from "@upnd/upend/constants";
   import InspectGroups from "./InspectGroups.svelte";
   import InspectTypeEditor from "./InspectTypeEditor.svelte";
   import LabelBorder from "./utils/LabelBorder.svelte";
@@ -355,7 +360,12 @@
   });
 </script>
 
-<div class="inspect" class:detail class:blob={blobHandled}>
+<div
+  class="inspect"
+  class:detail
+  class:blob={blobHandled}
+  data-address-group={address}
+>
   <header>
     <h2>
       {#if $entity}