From 5f33ef6edf4fbad9b85017d6cfe2b8d73643f61e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Fri, 27 Sep 2024 19:23:18 -0700
Subject: [PATCH] fix demos

---
 demo/collision.html            |  9 +++------
 demo/maps.html                 |  7 ++-----
 demo/shapes.html               |  6 +++---
 src/canvas/spatial-geometry.ts | 26 +++++++++++++++++++-------
 4 files changed, 27 insertions(+), 21 deletions(-)
diff --git a/demo/collision.html b/demo/collision.html
index 385439b..9b3534a 100644
--- a/demo/collision.html
+++ b/demo/collision.html
@@ -25,8 +25,8 @@
     </style>
   </head>
   <body>
-    <spatial-geometry x="100" y="100" width="50" height="50">Shape with some text</spatial-geometry>
-    <spatial-geometry x="200" y="200" width="50" height="50">Shape with some text</spatial-geometry>
+    <spatial-geometry x="100" y="100" width="50" height="50"></spatial-geometry>
+    <spatial-geometry x="200" y="200" width="50" height="50"></spatial-geometry>
 
     <script type="module">
       import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
@@ -36,10 +36,7 @@
 
       function collisionDetection(rect1, rect2) {
         return (
-          rect1.left < rect2.right &&
-          rect1.right > rect2.left &&
-          rect1.top < rect2.bottom &&
-          rect1.bottom > rect2.top
+          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
         );
       }
 
diff --git a/demo/maps.html b/demo/maps.html
index 1e53e47..198b0c8 100644
--- a/demo/maps.html
+++ b/demo/maps.html
@@ -57,14 +57,11 @@
 
       function collisionDetection(rect1, rect2) {
         return (
-          rect1.left < rect2.right &&
-          rect1.right > rect2.left &&
-          rect1.top < rect2.bottom &&
-          rect1.bottom > rect2.top
+          rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
         );
       }
 
-      function proximityDetection(rect1, rect2, distance = 30) {
+      function proximityDetection(rect1, rect2, distance = 100) {
         return collisionDetection(
           DOMRectReadOnly.fromRect({
             x: rect1.x - distance,
diff --git a/demo/shapes.html b/demo/shapes.html
index a5bcc82..b7643d3 100644
--- a/demo/shapes.html
+++ b/demo/shapes.html
@@ -27,9 +27,9 @@
     </style>
   </head>
   <body>
-    <input type="text" value="Hello" />
-    <input type="text" value="World" />
-    <spatial-geometry x="100" y="100" width="50" height="50">Shape with some text</spatial-geometry>
+    <spatial-geometry x="100" y="100" width="50" height="50"></spatial-geometry>
+    <spatial-geometry x="100" y="200" width="50" height="50"></spatial-geometry>
+    <spatial-geometry x="100" y="300" width="50" height="50"></spatial-geometry>
 
     <script type="module">
       import { SpatialGeometry } from '../src/canvas/spatial-geometry.ts';
diff --git a/src/canvas/spatial-geometry.ts b/src/canvas/spatial-geometry.ts
index c96d20f..1e574fc 100644
--- a/src/canvas/spatial-geometry.ts
+++ b/src/canvas/spatial-geometry.ts
@@ -32,11 +32,18 @@ styles.replaceSync(`
   cursor: var(--fc-move, move);
 }
 
+:host::before {
+  content: '';
+  position: absolute;
+  inset: -10px -10px -10px -10px;
+}
+
 ::slotted(*) {
   cursor: default;
 }
 
 :host(:focus-within) {
+  z-index: calc(infinity - 1);
   outline: solid 1px hsl(214, 84%, 56%);
 }
 
@@ -60,6 +67,7 @@ styles.replaceSync(`
   background: hsl(210, 20%, 98%);
   z-index: calc(infinity);
 
+
   &[part="resize-nw"], 
   &[part="resize-ne"], 
   &[part="resize-se"], 
@@ -165,6 +173,7 @@ export class SpatialGeometry extends HTMLElement {
   }
 
   set x(x: number) {
+    this.#previousX = this.#x;
     this.#x = x;
     this.#requestUpdate('x');
   }
@@ -176,6 +185,7 @@ export class SpatialGeometry extends HTMLElement {
   }
 
   set y(y: number) {
+    this.#previousY = this.#y;
     this.#y = y;
     this.#requestUpdate('y');
   }
@@ -187,6 +197,7 @@ export class SpatialGeometry extends HTMLElement {
   }
 
   set width(width: number) {
+    this.#previousWidth = this.#width;
     this.#width = width;
     this.#requestUpdate('width');
   }
@@ -198,6 +209,7 @@ export class SpatialGeometry extends HTMLElement {
   }
 
   set height(height: number) {
+    this.#previousHeight = this.#height;
     this.#height = height;
     this.#requestUpdate('height');
   }
@@ -209,10 +221,15 @@ export class SpatialGeometry extends HTMLElement {
   }
 
   set rotate(rotate: number) {
+    this.#previousRotate = this.#rotate;
     this.#rotate = rotate;
     this.#requestUpdate('rotate');
   }
 
+  connectedCallback() {
+    this.#update(new Set(['type', 'x', 'y', 'height', 'width', 'rotate']));
+  }
+
   disconnectedCallback() {
     cancelAnimationFrame(this.#rAFId);
   }
@@ -283,9 +300,7 @@ export class SpatialGeometry extends HTMLElement {
         if (part === 'rotate') {
           const centerX = (this.#x + this.#width) / 2;
           const centerY = (this.#y + this.#height) / 2;
-          var newAngle =
-            ((Math.atan2(event.clientY - centerY, event.clientX - centerX) + Math.PI / 2) * 180) /
-            Math.PI;
+          var newAngle = ((Math.atan2(event.clientY - centerY, event.clientX - centerX) + Math.PI / 2) * 180) / Math.PI;
           this.rotate = newAngle;
           return;
         }
@@ -365,7 +380,6 @@ export class SpatialGeometry extends HTMLElement {
           movementY: this.#height - this.#previousHeight,
         })
       );
-
       if (notCancelled) {
         if (updatedProperties.has('width')) {
           this.style.width = `${this.#width}px`;
@@ -383,9 +397,7 @@ export class SpatialGeometry extends HTMLElement {
 
     if (updatedProperties.has('rotate')) {
       // Although the change in resize isn't useful inside this component, the outside world might find it helpful to calculate acceleration and other physics
-      const notCancelled = this.dispatchEvent(
-        new RotateEvent({ rotate: this.#rotate - this.#previousRotate })
-      );
+      const notCancelled = this.dispatchEvent(new RotateEvent({ rotate: this.#rotate - this.#previousRotate }));
 
       if (notCancelled) {
         if (updatedProperties.has('rotate')) {
