create <two5-texture-store> element

Author: spearwolf

packages/twopoint5d-elements-e2e/pages/display-and-stage2d.html

@@ -10,11 +10,11 @@
     <script type="module" src="/src/display-and-stage2d.ts"></script>
     <main class="two5-display-container">
       <two5-display class="two5-display">
-        <x-texture-store src="/assets/textures.json">
+        <two5-texture-store id="texstore" src="/assets/textures.json">
           <x-frame-buffer name="out1" width="640" height="480">
             <two5-stage2d id="stage2d" projection-type="parallax" width="197" height="205"></two5-stage2d>
           </x-frame-buffer>
-        </x-texture-store>
+        </two5-texture-store>
       </two5-display>
     </main>
   </body>

packages/twopoint5d-elements-e2e/pages/post-processing.html

@@ -10,9 +10,11 @@
     <script type="module" src="/src/post-processing.ts"></script>
     <main class="two5-display-container">
       <x-display class="two5-display">
-        <x-post-processing>
-          <x-stage2d id="stage2d" projection-type="parallax" width="197" height="205"></x-stage2d>
-        </x-post-processing>
+        <x-texture-store id="texstore" src="/assets/textures.json">
+          <x-post-processing debug>
+            <x-stage2d id="stage2d" projection-type="parallax" width="197" height="205"></x-stage2d>
+          </x-post-processing>
+        </x-texture-store>
       </x-display>
     </main>
   </body>

packages/twopoint5d-elements-e2e/src/display-and-stage2d.ts

@@ -1,45 +1,32 @@
-import {TextureStore} from '@spearwolf/twopoint5d';
-import {Stage2DElement} from '@spearwolf/twopoint5d-elements';
+import {Stage2DElement, TextureStoreElement} from '@spearwolf/twopoint5d-elements';
 import '@spearwolf/twopoint5d-elements/two5-display.js';
 import '@spearwolf/twopoint5d-elements/two5-stage2d.js';
+import '@spearwolf/twopoint5d-elements/two5-texture-store.js';
 import {Color, Scene, Sprite, SpriteMaterial} from 'three';
 import './display.css';
 import './style.css';
 
-console.log('hej ho!');
+const initialize = async (action: (stageEl: Stage2DElement, storeEl: TextureStoreElement) => void) => {
+  const [stageEl, storeEl] = await Promise.all([
+    Stage2DElement.whenDefined(document.getElementById('stage2d')),
+    TextureStoreElement.whenDefined(document.getElementById('texstore')),
+  ]);
+  action(stageEl, storeEl);
+};
 
-const textures = new TextureStore().load('/assets/textures.json');
-
-Stage2DElement.whenDefined(document.getElementById('stage2d')).then((el) => {
-  // let renderFrameLogCount = 0;
-
-  // el.addEventListener(StageResize, (e: StageResizeEvent) => {
-  //   renderFrameLogCount = 0;
-  //   console.debug(StageResize, e.detail);
-  // });
-
-  el.sceneReady().then((scene: Scene) => {
+initialize((stageEl, {store}) => {
+  stageEl.sceneReady().then((scene: Scene) => {
     scene.background = new Color(0x212121);
-  });
-
-  el.firstFrame().then(({renderer, scene}) => {
-    textures.renderer = renderer;
 
     const sprite = new Sprite();
     sprite.scale.set(197, 205, 1);
     scene.add(sprite);
 
-    textures.get('ballPatternRot', ['texture', 'imageCoords'], ([texture, imageCoords]) => {
+    store.get('ballPatternRot', ['texture', 'imageCoords'], ([texture, imageCoords]) => {
       console.log('texture', {texture, imageCoords});
 
       sprite.material?.dispose();
       sprite.material = new SpriteMaterial({map: texture});
     });
   });
-
-  // el.on(StageRenderFrame, (props: StageRenderFrameProps) => {
-  //   if (renderFrameLogCount++ < 3) {
-  //     console.debug(StageRenderFrame, props.frameNo, props);
-  //   }
-  // });
 });

packages/twopoint5d-elements-e2e/src/post-processing.ts

@@ -1,32 +1,29 @@
-import {TextureStore} from '@spearwolf/twopoint5d';
-import {DisplayElement, Stage2DElement} from '@spearwolf/twopoint5d-elements';
+import {DisplayElement, Stage2DElement, TextureStoreElement} from '@spearwolf/twopoint5d-elements';
 import {Color, Scene, Sprite, SpriteMaterial} from 'three';
 import './display.css';
 import './style.css';
 
-const initialize = async (action: (el: Stage2DElement) => void) => {
+const initialize = async (action: (stageEl: Stage2DElement, storeEl: TextureStoreElement) => void) => {
   customElements.define('x-display', DisplayElement);
   customElements.define('x-stage2d', Stage2DElement);
+  customElements.define('x-texture-store', TextureStoreElement);
 
-  const el = await Stage2DElement.whenDefined(document.getElementById('stage2d'));
-  action(el);
+  const elems = await Promise.all([
+    Stage2DElement.whenDefined(document.getElementById('stage2d')),
+    TextureStoreElement.whenDefined(document.getElementById('texstore')),
+  ]);
+  action(...elems);
 };
 
-const textures = new TextureStore().load('/assets/textures.json');
-
-initialize((el) => {
-  el.sceneReady().then((scene: Scene) => {
+initialize((stageEl, {store}) => {
+  stageEl.sceneReady().then((scene: Scene) => {
     scene.background = new Color(0x212121);
-  });
-
-  el.firstFrame().then(({renderer, scene}) => {
-    textures.renderer = renderer;
 
     const sprite = new Sprite();
     sprite.scale.set(197, 205, 1);
     scene.add(sprite);
 
-    textures.get('ballPatternRot', ['texture', 'imageCoords'], ([texture, imageCoords]) => {
+    store.get('ballPatternRot', ['texture', 'imageCoords'], ([texture, imageCoords]) => {
       console.log('texture', {texture, imageCoords});
 
       sprite.material?.dispose();

packages/twopoint5d-elements/package.json

@@ -36,16 +36,22 @@
     "./two5-stage2d.js": {
       "default": "./dist/src/two5-stage2d.js",
       "types": "./dist/src/two5-stage2d.d.ts"
+    },
+    "./two5-texture-store.js": {
+      "default": "./dist/src/two5-texture-store.js",
+      "types": "./dist/src/two5-texture-store.d.ts"
     }
   },
   "sideEffects": [
     "build/src/simple-greeting.js",
     "build/src/two5-display.js",
     "build/src/two5-stage2d.js",
+    "build/src/two5-texture-store.js",
     "build/src/components/attachContextRoot.js",
     "dist/src/simple-greeting.js",
     "dist/src/two5-display.js",
     "dist/src/two5-stage2d.js",
+    "dist/src/two5-texture-store.js",
     "dist/src/components/attachContextRoot.js",
     "dist/src/bundle.js",
     "dist/bundle.js"

packages/twopoint5d-elements/package.override.json

@@ -5,6 +5,7 @@
     "src/simple-greeting.js",
     "src/two5-display.js",
     "src/two5-stage2d.js",
+    "src/two5-texture-store.js",
     "src/components/attachContextRoot.js"
   ],
   "scripts": null,

packages/twopoint5d-elements/src/bundle.ts

@@ -1,3 +1,4 @@
 import './simple-greeting.js';
 import './two5-display.js';
 import './two5-stage2d.js';
+import './two5-texture-store.js';

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

@@ -0,0 +1,70 @@
+import {consume} from '@lit/context';
+import {eventize, type Eventize} from '@spearwolf/eventize';
+import {type SignalReader} from '@spearwolf/signalize';
+import {signal, signalReader} from '@spearwolf/signalize/decorators';
+import {Display, TextureStore} from '@spearwolf/twopoint5d';
+import {css, html} from 'lit';
+import {property} from 'lit/decorators.js';
+import {displayContext} from '../index.js';
+import {whenDefined} from '../utils/whenDefined.js';
+import {TwoPoint5DElement} from './TwoPoint5DElement.js';
+
+export interface TextureStoreElement extends Eventize {}
+
+export class TextureStoreElement extends TwoPoint5DElement {
+  static async whenDefined(el: any): Promise<TextureStoreElement> {
+    await whenDefined(el);
+    if (el instanceof TextureStoreElement) {
+      return el;
+    }
+    throw new Error('not a TextureStoreElement');
+  }
+
+  static override styles = css`
+    :host {
+      display: inline;
+    }
+  `;
+
+  @property({type: String, reflect: true})
+  accessor src: string | undefined;
+
+  @consume({context: displayContext, subscribe: true})
+  @property({attribute: false})
+  accessor displayCtx: 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() {
+    super();
+    eventize(this);
+
+    this.loggerNS = 'two5-texture-store';
+
+    this.display$((display) => {
+      this.store.renderer = display?.renderer;
+      this.logger?.log('received display', {display, el: this});
+    });
+
+    this.href$((href) => {
+      if (href?.trim()) {
+        const url = new URL(href, 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-elements/src/context/texture-store-context.ts

@@ -0,0 +1,4 @@
+import {createContext} from '@lit/context';
+import type {TextureStore} from '@spearwolf/twopoint5d';
+
+export const textureStoreContext = createContext<TextureStore | undefined>(Symbol('texture-store'));

packages/twopoint5d-elements/src/index.ts

@@ -1,9 +1,11 @@
 export * from './components/DisplayElement.js';
 export * from './components/SimpleGreeting.js';
 export * from './components/Stage2DElement.js';
+export * from './components/TextureStoreElement.js';
 export * from './components/TwoPoint5DElement.js';
 export * from './context/display-context.js';
 export * from './context/stage-renderer-context.js';
+export * from './context/texture-store-context.js';
 export * from './utils/ConsoleLogger.js';
 export * from './utils/asBoolean.js';
 export * from './utils/readBooleanAttribute.js';

packages/twopoint5d-elements/src/two5-texture-store.ts

@@ -0,0 +1,4 @@
+import {TextureStoreElement} from './components/TextureStoreElement.js';
+import './components/attachContextRoot.js';
+
+customElements.define('two5-texture-store', TextureStoreElement);