wip: box selection

2024-03-13 19:41:52 +01:00
parent c4c203968d
commit f312f885c7
3 changed files with 58 additions and 1 deletions
--- a/frontend/src/lib/components/BoxSelection.svelte
+++ b/frontend/src/lib/components/BoxSelection.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { HTML } from "@threlte/extras";
+
+  export let p1 = { x: 0, y: 0 };
+  export let p2 = { x: 0, y: 0 };
+
+  export let cameraPosition = [0, 1, 0];
+
+  $: width = Math.abs(p1.x - p2.x) * cameraPosition[2];
+  $: height = Math.abs(p1.y - p2.y) * cameraPosition[2];
+
+  $: x = Math.max(p1.x, p2.x) - width / cameraPosition[2];
+  $: y = Math.max(p1.y, p2.y) - height / cameraPosition[2];
+</script>
+
+<HTML position.x={x} position.z={y} transform={false}>
+  <div
+    class="selection"
+    style={`width: ${width}px; height: ${height}px;`}
+  ></div>
+</HTML>
+
+<!-- <T.Mesh -->
+<!--   position.x={x - width / 2} -->
+<!--   position.z={y - height / 2} -->
+<!--   rotation.x={-Math.PI / 2} -->
+<!-- > -->
+<!--   <T.PlaneGeometry args={[width, height]} /> -->
+<!--   <T.MeshBasicMaterial color="red" /> -->
+<!-- </T.Mesh> -->
+
+<style>
+  .selection {
+    width: 40px;
+    height: 20px;
+    border: solid 0.2px red;
+    border-style: dashed;
+    border-radius: 2px;
+  }
+</style>