combine @Property and @signal decorators (works great)

Author: spearwolf

packages/twopoint5d-elements/src/components/PostProcessingElement.ts

@@ -28,9 +28,9 @@ export class PostProcessingElement extends TwoPoint5DElement {
 
   @consume({context: stageRendererContext, subscribe: true})
   @property({attribute: false})
-  accessor stageRendererCtx: IStageRenderer | undefined;
+  @signal({readAsValue: true})
+  accessor parentRenderer: IStageRenderer | undefined;
 
-  @signal({readAsValue: true}) accessor parentRenderer: IStageRenderer | undefined;
   @signalReader() accessor parentRenderer$: SignalReader<IStageRenderer | undefined>;
 
   @provide({context: stageRendererContext})
@@ -56,8 +56,6 @@ export class PostProcessingElement extends TwoPoint5DElement {
   }
 
   override render() {
-    this.parentRenderer = this.stageRendererCtx;
-
     return html`<slot></slot>`;
   }
 }

packages/twopoint5d-elements/src/components/Stage2DElement.ts

@@ -47,16 +47,19 @@ export class Stage2DElement extends TwoPoint5DElement {
     }
   `;
 
-  @property({type: String, reflect: true})
-  accessor name: string | undefined;
-
   @consume({context: stageRendererContext, subscribe: true})
   @property({attribute: false})
-  accessor stageRendererCtx: IStageRenderer | undefined;
+  @signal({readAsValue: true})
+  accessor stageRenderer: IStageRenderer | undefined;
 
-  @signal({readAsValue: true}) accessor stageRenderer: IStageRenderer | undefined;
   @signalReader() accessor stageRenderer$: SignalReader<IStageRenderer | undefined>;
 
+  @property({type: String, reflect: true})
+  @signal({readAsValue: true})
+  accessor name: string | undefined;
+
+  @signalReader() accessor name$: SignalReader<string | undefined>;
+
   @property({type: String, reflect: true})
   accessor fit: 'contain' | 'cover' | 'fill' | undefined;
 
@@ -128,6 +131,10 @@ export class Stage2DElement extends TwoPoint5DElement {
 
     this.retain([FirstFrame, StageResize]);
 
+    this.name$((name) => {
+      this.stage2d.name = name;
+    });
+
     this.stageRenderer$((stageRenderer) => {
       this.logger?.log('requested stage-renderer context', stageRenderer);
 
@@ -193,11 +200,9 @@ export class Stage2DElement extends TwoPoint5DElement {
   }
 
   override render() {
-    this.stageRenderer = this.stageRendererCtx;
-
-    if (this.name) {
-      this.stage2d.name = this.name;
-    }
+    // if (this.name) {
+    //   this.stage2d.name = this.name;
+    // }
 
     return html`<slot></slot>`;
   }

packages/twopoint5d-elements/src/components/TextureStoreElement.ts

@@ -27,18 +27,18 @@ export class TextureStoreElement extends TwoPoint5DElement {
   `;
 
   @property({type: String, reflect: true})
+  @signal({readAsValue: true})
   accessor src: string | undefined;
 
+  @signalReader() accessor src$: SignalReader<string | undefined>;
+
   @consume({context: displayContext, subscribe: true})
   @property({attribute: false})
-  accessor displayCtx: Display | undefined;
+  @signal({readAsValue: true})
+  accessor display: Display | undefined;
 
-  @signal({readAsValue: true}) accessor display: Display | undefined;
   @signalReader() accessor display$: SignalReader<Display | undefined>;
 
-  @signal({readAsValue: true}) accessor href: string | undefined;
-  @signalReader() accessor href$: SignalReader<string | undefined>;
-
   readonly store = new TextureStore();
 
   constructor() {
@@ -52,19 +52,16 @@ export class TextureStoreElement extends TwoPoint5DElement {
       this.logger?.log('received display', {display, el: this});
     });
 
-    this.href$((href) => {
-      if (href?.trim()) {
-        const url = new URL(href, window.location.href).href;
+    this.src$((src) => {
+      if (src?.trim()) {
+        const url = new URL(src, window.location.href).href;
         this.logger?.log('load texture-store from', {url, el: this});
         this.store.load(url);
       }
     });
   }
 
   override render() {
-    this.display = this.displayCtx;
-    this.href = this.src;
-
     return html`<slot></slot>`;
   }
 }

packages/twopoint5d/src/stage/PostProcessingRenderer.ts

@@ -17,7 +17,7 @@ import {StageRenderer} from './StageRenderer.js';
 export class PostProcessingRenderer extends StageRenderer implements IStageAdded, IStageRemoved {
   composer?: EffectComposer;
 
-  renderPasses: WeakMap<IStage, RenderPass> = new WeakMap();
+  stagePasses: WeakMap<IStage, RenderPass> = new WeakMap();
   passes: Pass[] = [];
 
   constructor() {
@@ -31,7 +31,7 @@ export class PostProcessingRenderer extends StageRenderer implements IStageAdded
     this.stages.forEach((stage) => {
       this.resizeStage(stage, this.width, this.height);
       stage.stage.renderFrame(renderer, now, deltaTime, frameNo, (scene, camera, autoClear) => {
-        const renderPass = this.renderPasses.get(stage.stage);
+        const renderPass = this.stagePasses.get(stage.stage);
         if (renderPass) {
           renderPass.clear = autoClear;
           renderPass.scene = scene;
@@ -72,19 +72,19 @@ export class PostProcessingRenderer extends StageRenderer implements IStageAdded
   }
 
   stageAdded({stage}: StageAddedProps) {
-    if (hasGetRenderPass(stage) && !this.renderPasses.has(stage)) {
+    if (hasGetRenderPass(stage) && !this.stagePasses.has(stage)) {
       const renderPass = stage.getRenderPass();
-      this.renderPasses.set(stage, renderPass);
+      this.stagePasses.set(stage, renderPass);
       this.addPass(renderPass);
 
       console.log('stageAdded', {stage, renderPass, postProcessingRenderer: this});
     }
   }
 
   stageRemoved({stage}: StageRemovedProps) {
-    if (this.renderPasses.has(stage)) {
-      const renderPass = this.renderPasses.get(stage)!;
-      this.renderPasses.delete(stage);
+    if (this.stagePasses.has(stage)) {
+      const renderPass = this.stagePasses.get(stage)!;
+      this.stagePasses.delete(stage);
       this.removePass(renderPass);
       renderPass.dispose();