proximity refactor

folk-systems · Nov 28, 2024 · 4e05995 · 4e05995
1 parent 4e54968
commit 4e05995
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 94 deletions.
diff --git a/demo/collision.html b/demo/collision.html
@@ -30,37 +30,15 @@
 
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
+      import { collisionDetection } from '../src/collision.ts';
 
       FolkGeometry.register();
 
       const geometryElements = document.querySelectorAll('fc-geometry');
 
-      function collisionDetection(rect1, rect2) {
-        return (
-          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
-        );
-      }
-
       function handleCollision(e) {
         geometryElements.forEach((el) => {
-          if (
-            el !== e.target &&
-            collisionDetection(
-              // TODO: refactor this hack once resizing and the vertices API are figured out
-              DOMRectReadOnly.fromRect({
-                x: el.x,
-                y: el.y,
-                height: el.height,
-                width: el.width,
-              }),
-              DOMRectReadOnly.fromRect({
-                x: e.target.x,
-                y: e.target.y,
-                height: e.target.height,
-                width: e.target.width,
-              })
-            )
-          ) {
+          if (el !== e.target && collisionDetection(el.getClientRect(), e.target.getClientRect())) {
             e.preventDefault();
           }
         });

diff --git a/demo/hull.html b/demo/hull.html
@@ -22,10 +22,7 @@
       folk-hull {
         display: block;
         position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
+        inset: 0 0 0 0;
         pointer-events: none;
         background-color: #b4d8f669;
       }

diff --git a/demo/maps.html b/demo/maps.html
@@ -27,74 +27,58 @@
       }
 
       geo-wiki {
+        border: solid 2px black;
+        border-radius: 5px;
         ul {
           height: 100%;
           overflow: auto;
           margin: 0;
           scroll-padding-block-end: 1rem;
         }
       }
+
+      olk-hull {
+        display: block;
+        position: absolute;
+        inset: 0 0 0 0;
+        pointer-events: none;
+        background-color: #b4d8f63b;
+      }
     </style>
   </head>
   <body>
-    <fc-geometry x="25" y="100" width="400" height="200">
+    <fc-geometry id="1" x="25" y="100" width="400" height="200">
       <folk-map coordinates="52.09, 5.12" zoom="13"></folk-map>
     </fc-geometry>
 
-    <fc-geometry x="50" y="550" width="400" height="250">
+    <fc-geometry id="2" x="50" y="550" width="400" height="250">
       <folk-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></folk-map>
     </fc-geometry>
 
-    <fc-geometry x="500" y="400" width="500" height="300">
+    <fc-geometry id="3" x="500" y="400" width="500" height="300">
       <geo-wiki coordinates="51.50404120260676, -0.14007568359375003"></geo-wiki>
     </fc-geometry>
 
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
       import { FolkMap } from '../src/folk-map.ts';
+      import { FolkHull } from '../src/folk-hull.ts';
+      import { collisionDetection } from '../src/collision.ts';
 
       FolkGeometry.register();
       FolkMap.register();
+      FolkHull.register();
 
-      function collisionDetection(rect1, rect2) {
-        return (
-          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
-        );
-      }
-
-      function proximityDetection(rect1, rect2, distance = 100) {
-        return collisionDetection(
-          DOMRectReadOnly.fromRect({
-            x: rect1.x - distance,
-            y: rect1.y - distance,
-            height: rect1.height + distance * 2,
-            width: rect1.width + distance * 2,
-          }),
-          rect2
-        );
-      }
+      const geometries = Array.from(document.querySelectorAll('fc-geometry'));
 
-      const proximityMap = new Map(Array.from(document.querySelectorAll('fc-geometry')).map((el) => [el, new Set()]));
+      const proximityMap = new Map(geometries.map((el) => [el, new Set()]));
 
       function handleProximity(e) {
         proximityMap.forEach((set, el) => {
           if (el !== e.target) {
             const alreadyIntersection = set.has(e.target);
             // TODO: refactor this hack once resizing and the vertices API are figured out
-            const isNowIntersecting = proximityDetection(
-              DOMRectReadOnly.fromRect({
-                x: el.x,
-                y: el.y,
-                height: el.height,
-                width: el.width,
-              }),
-              DOMRectReadOnly.fromRect({
-                x: e.target.x,
-                y: e.target.y,
-                height: e.target.height,
-                width: e.target.width,
-              })
-            );
+            const isNowIntersecting = collisionDetection(el.getClientRect(), e.target.getClientRect(), 100);
             if (isNowIntersecting && !alreadyIntersection) {
               set.add(e.target);
               proximityMap.get(e.target)?.add(el);

diff --git a/demo/proximity-music.html b/demo/proximity-music.html
@@ -62,6 +62,7 @@
     <script type="module">
       import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
       import { RecordPlayer } from '../src/music/record-player.ts';
+      import { collisionDetection } from '../src/collision.ts';
 
       FolkGeometry.register();
       RecordPlayer.register();
@@ -87,40 +88,12 @@
         el.firstElementChild.addEventListener('canplay', setPlayback);
       });
 
-      function collisionDetection(rect1, rect2) {
-        return (
-          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
-        );
-      }
-
-      function proximityDetection(rect1, rect2, distance = 30) {
-        return collisionDetection(
-          DOMRectReadOnly.fromRect({
-            x: rect1.x - distance,
-            y: rect1.y - distance,
-            height: rect1.height + distance * 2,
-            width: rect1.width + distance * 2,
-          }),
-          rect2
-        );
-      }
-
       function updateFlowerProximity(flower) {
         const alreadyIntersection = proximitySet.has(flower);
         // TODO: refactor this hack once resizing and the vertices API are figured out
-        const isNowIntersecting = proximityDetection(
-          DOMRectReadOnly.fromRect({
-            x: recordPlayerGeometry.x,
-            y: recordPlayerGeometry.y,
-            height: recordPlayerGeometry.height,
-            width: recordPlayerGeometry.width,
-          }),
-          DOMRectReadOnly.fromRect({
-            x: flower.x,
-            y: flower.y,
-            height: flower.height,
-            width: flower.width,
-          }),
+        const isNowIntersecting = collisionDetection(
+          recordPlayerGeometry.getClientRect(),
+          flower.getClientRect(),
           proximityDistance
         );
 

diff --git a/src/collision.ts b/src/collision.ts
@@ -0,0 +1,8 @@
+export function collisionDetection(rect1, rect2, proximity = 0) {
+  return (
+    rect1.left - rect2.right < proximity &&
+    rect2.left - rect1.right < proximity &&
+    rect1.top - rect2.bottom < proximity &&
+    rect2.top - rect1.bottom < proximity
+  );
+}