Introducs signals for angles and position in all components to sync s…

…tate

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@astrojs/vercel": "^5.2.0",
+    "@lit-labs/preact-signals": "^1.0.1",
     "@shoelace-style/shoelace": "^2.12.0",
     "astro": "^3.6.0",
     "lit": "^3.1.0"

src/components/CameraControlHPR.webcomponent.js

@@ -1,5 +1,6 @@
 /* eslint-env browser */
 import { LitElement, html, css } from 'lit-element';
+import { watch } from '@lit-labs/preact-signals';
 
 const DEFAULT_ANGLES = Object.freeze([0, 0, 0]);
 const HPR_MINMAX = Object.freeze([-180, 180]);
@@ -29,6 +30,8 @@ function parseHPR(val) {
 }
 
 export class CameraControlHPR extends LitElement {
+  #signal;
+
   static get styles() {
     return css`
       :host {
@@ -74,6 +77,10 @@ export class CameraControlHPR extends LitElement {
     }
   }
 
+  set signal(signal) {
+    this.#signal = signal;
+  }
+
   set angles(val) {
     const [heading, pitch, roll] = normalizeHPR(val);
     const angles = [parseHPR(heading), parseHPR(pitch), parseHPR(roll)];
@@ -120,6 +127,7 @@ export class CameraControlHPR extends LitElement {
     return html`
       <h1>HPR</h1>
       <slot></slot>
+      <p>Signal: ${watch(this.#signal)}</p>
       ${this.renderHPR(this.angles)}<br />
       ${this.renderSlider("heading", "Heading", this.heading, HPR_MINMAX, this._onChangeHeading)}<br />
       ${this.renderSlider("pitch", "Pitch", this.pitch, HPR_MINMAX, this._onChangePitch)}<br />
@@ -148,6 +156,9 @@ export class CameraControlHPR extends LitElement {
   }
 
   _onChangeAngles() {
+    if (this.#signal) {
+      this.#signal.value = this.angles;
+    };
     this.dispatchEvent(
       new CustomEvent("angles-changed", { detail: this.angles })
     );

src/components/CameraControlPosition.webcomponent.js

@@ -1,5 +1,6 @@
 /* eslint-env browser */
 import { LitElement, html, css } from 'lit-element';
+import { watch } from '@lit-labs/preact-signals';
 
 const ORIGIN_COORD = Object.freeze([0, 0, 0]);
 const LAT_MINMAX = Object.freeze([-90, 90]);
@@ -39,6 +40,8 @@ function parseAlt(val) {
 }
 
 export class CameraControlPosition extends LitElement {
+  #signal;
+
   static get styles() {
     return css`
       :host {
@@ -102,6 +105,10 @@ export class CameraControlPosition extends LitElement {
     }
   }
 
+  set signal(signal) {
+    this.#signal = signal;
+  }
+
   set coord(val) {
     const [lat, lng, alt] = normalizeCoord(val);
     const coord = [parseLat(lat), parseLng(lng), parseAlt(alt)];
@@ -148,6 +155,7 @@ export class CameraControlPosition extends LitElement {
     return html`
       <h1>Position</h1>
       <slot></slot>
+      <p>Signal: ${watch(this.#signal)}</p>
       ${this.renderCoord(this.coord, this.srs)}<br />
       ${this.renderSlider("lat", "Latitude", this.lat, LAT_MINMAX, this._onChangeLat)}<br />
       ${this.renderSlider("lng", "Longitude", this.lng, LNG_MINMAX, this._onChangeLng)}<br />
@@ -176,6 +184,9 @@ export class CameraControlPosition extends LitElement {
   }
 
   _onChangeCoord() {
+    if (this.#signal) {
+      this.#signal.value = this.coord;
+    };
     this.dispatchEvent(
       new CustomEvent("coord-changed", { detail: this.coord })
     );

src/components/SceneView.webcomponent.js

@@ -1,7 +1,10 @@
 /* eslint-env browser */
 import { LitElement, html, css } from 'lit-element';
+import { watch } from '@lit-labs/preact-signals';
 
 export class SceneView extends LitElement {
+  #signals;
+
   static get styles() {
     return css`
       :host {
@@ -34,13 +37,18 @@ export class SceneView extends LitElement {
     this.coord = [0, 0, 0];
   }
 
+  set signals(signals) {
+    const {angles, coord} = signals;
+    this.#signals = { angles, coord };
+  }
+
   render() {
     return html`
       <div id="scene">
         <slot></slot>
         <h1>Scene</h1>
-        <p class="coord">Camera HPR: <code>${JSON.stringify(this.angles)}</code></p>
-        <p class="coord">Camera position: <code>${JSON.stringify(this.coord)}</code></p>
+        <p class="coord">Camera HPR: <code>${watch(this.#signals.angles)}</code></p>
+        <p class="coord">Camera position: <code>${watch(this.#signals.coord)}</code></p>
       </div>
     `;
   }

src/pages/webapp.astro

@@ -4,31 +4,46 @@ import ShoelaceLayout from '../layouts/ShoelaceLayout.astro';
 <ShoelaceLayout title="Signals › WebApp">
   <h1>Signals</h1>
   <div id="set01" class="controls">
-    <camera-control-hpr angles="[90,30,0]"></camera-control-hpr>
-    <camera-control-position coord="[45,6,500]"></camera-control-position>
+    <camera-control-hpr id="hpr01" angles="[90,30,0]"></camera-control-hpr>
+    <camera-control-position id="pos01" coord="[45,6,500]"></camera-control-position>
   </div>
   <div class="scene">
     <scene-view angles="[90,30,0]" coord="[45,6,500]"></scene-view>
   </div>
+  <div id="set02" class="controls">
+    <camera-control-hpr id="hpr02" angles="[90,30,0]"></camera-control-hpr>
+    <camera-control-position id="pos02" coord="[45,6,500]"></camera-control-position>
+  </div>
 </ShoelaceLayout>
 
 <script>
+  import { signal } from "@lit-labs/preact-signals";
+
   import "../components/CameraControlHPR.js";
   import "../components/CameraControlPosition.js";
   import "../components/SceneView.js";
 
   const sceneView = document.querySelector("scene-view");
+  const allCameraControlHPR = document.querySelectorAll("camera-control-hpr");
+  const allCameraControlPosition = document.querySelectorAll("camera-control-position");
+
+  const angles = signal([90, 30, 0]);
+  const coord = signal([45, 6, 500]);
+
+  sceneView.signals = { angles, coord };
 
-  const cameraControlHPR = document.querySelector("camera-control-hpr");
-  cameraControlHPR?.addEventListener("angles-changed", (e) => {
-    console.log(`HPR angles changed to [${e.detail.join(",")}]`);
-    sceneView?.setAttribute("angles", JSON.stringify(e.detail));
+  allCameraControlHPR?.forEach((cameraControlHPR) => {
+    cameraControlHPR.signal = angles;
+    cameraControlHPR.addEventListener("angles-changed", (e) => {
+      console.log(`HPR angles changed to [${e.detail.join(",")}]`);
+    })
   });
 
-  const cameraControlPosition = document.querySelector("camera-control-position");
-  cameraControlPosition?.addEventListener("coord-changed", (e) => {
-    console.log(`Position coordinates changed to [${e.detail.join(",")}]`);
-    sceneView?.setAttribute("coord", JSON.stringify(e.detail));
+  allCameraControlPosition?.forEach((cameraControlPosition) => {
+    cameraControlPosition.signal = coord;
+    cameraControlPosition.addEventListener("coord-changed", (e) => {
+      console.log(`Position 01 coordinates changed to [${e.detail.join(",")}]`);
+    })
   });
 </script>