npm - @miris-inc/components - Versions diffs - 0.0.1 - Mend

@miris-inc/components 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/bus.ts +33 -0
package/camera.ts +67 -0
package/elements.ts +4 -0
package/group.ts +12 -0
package/index.html +11 -0
package/index.ts +10 -0
package/package.json +16 -0
package/primitive.ts +202 -0
package/scene.ts +127 -0
package/stream.ts +217 -0
package/test/carousel-multiple.html +386 -0
package/test/carousel-single.html +494 -0
package/test/controls.html +71 -0
package/test/hero-test.html +99 -0
package/test/index.html +29 -0
package/test/sdk.html +10 -0
package/vite.config.ts +32 -0

package/bus.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import type Primitive from "./primitive";
+import type Scene from "./scene";
+type Subscriber = Primitive | Scene;
+type Callback = (...params: any[]) => void;
+export default class Bus {
+  static #subscriptions = new Map<Subscriber, Map<string, Callback>>();
+  static subscribe(key: Subscriber, name: string, callback: Callback) {
+    if (!this.#subscriptions.has(key)) {
+      this.#subscriptions.set(key, new Map());
+    }
+    this.#subscriptions.get(key)!.set(name, callback);
+  }
+  static unsubscribe(key: Subscriber, name: string) {
+    if (!this.#subscriptions.has(key)) return;
+    this.#subscriptions.get(key)!.delete(name);
+    if (this.#subscriptions.get(key)!.size) {
+      this.#subscriptions.delete(key);
+    }
+  }
+  static publish(key: Subscriber, name: string, ...args: any[]) {
+    const callback = this.#subscriptions.get(key)?.get(name);
+    if (callback) callback(...args);
+  }
+}

package/camera.ts ADDED Viewed

@@ -0,0 +1,67 @@
+import { PerspectiveCamera as ThreeCamera } from "three";
+import Primitive from "./primitive";
+export default class MirisCamera extends Primitive {
+  #fov = 50;
+  // prettier-ignore
+  get fov() { return this.#fov }
+  set fov(fov) {
+    if (this._threeObject) {
+      this._threeObject.fov = fov;
+      this._threeObject.updateProjectionMatrix();
+    }
+    this.#fov = fov;
+  }
+  #aspect = 1;
+  // prettier-ignore
+  get aspect() { return this.#aspect }
+  set aspect(aspect) {
+    if (this._threeObject) {
+      this._threeObject.aspect = aspect;
+      this._threeObject.updateProjectionMatrix();
+    }
+    this.#aspect = aspect;
+  }
+  #near = 0.1;
+  // prettier-ignore
+  get near() { return this.#near }
+  set near(near) {
+    if (this._threeObject) {
+      this._threeObject.near = near;
+      this._threeObject.updateProjectionMatrix();
+    }
+    this.#near = near;
+  }
+  #far = 2000;
+  // prettier-ignore
+  get far() { return this.#far }
+  set far(far) {
+    if (this._threeObject) {
+      this._threeObject.far = far;
+      this._threeObject.updateProjectionMatrix();
+    }
+    this.#far = far;
+  }
+  protected override _threeObject: ThreeCamera | null = null;
+  override _enable() {
+    this._threeObject = new ThreeCamera(
+      this.fov,
+      this.aspect,
+      this.near,
+      this.far
+    );
+    this._threeObject.name = "supplied camera";
+    super._enable();
+  }
+}

package/elements.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { default as Scene } from "./scene";
+export { default as Camera } from "./camera";
+export { default as Group } from "./group";
+export { default as Stream } from "./stream";

package/group.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Group as ThreeGroup } from "three";
+import Primitive from "./primitive";
+export default class MirisGroup extends Primitive {
+  protected override _threeObject: ThreeGroup | null = null;
+  override _enable() {
+    this._threeObject = new ThreeGroup();
+    super._enable();
+  }
+}

package/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="refresh" content="0; url=./test/index.html">
+    <title>Redirecting...</title>
+</head>
+<body>
+    <p>Redirecting to <a href="./test/index.html">test page</a>...</p>
+</body>
+</html>

package/index.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import * as elements from "./elements";
+for (const name of [
+  "Scene",
+  "Camera",
+  "Group",
+  "Stream",
+] as (keyof typeof elements)[]) {
+  customElements.define(`miris-${name.toLowerCase()}`, elements[name]);
+}

package/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "name": "@miris-inc/components",
+  "exports": "./index.ts",
+  "scripts": {
+    "d": "bun dev",
+    "dev": "vite",
+    "b": "vite build",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@miris-inc/three": "*",
+    "@types/three": "^0.182.0",
+    "three": "^0.182.0"
+  },
+  "version": "0.0.1"
+}

package/primitive.ts ADDED Viewed

@@ -0,0 +1,202 @@
+import { Euler, type Object3D, Vector3 as ThreeVector3 } from "three";
+import Bus from "./bus";
+import type Scene from "./scene";
+import type Group from "./group";
+type Vector3 = {
+  x: number;
+  y: number;
+  z: number;
+  set: (x: number, y: number, z: number) => void;
+};
+export default class MirisPrimitive extends HTMLElement {
+  #position = new ThreeVector3();
+  #rotation = new Euler();
+  #scale = new ThreeVector3(1, 1, 1);
+  declare readonly position: Vector3;
+  declare readonly rotation: Vector3;
+  declare readonly scale: Vector3;
+  #zoom = 1;
+  // prettier-ignore
+  get zoom () { return this.#zoom }
+  set zoom(zoom) {
+    this.#zoom = zoom;
+    const { x, y, z } = this.scale;
+    this._threeObject?.scale.set(zoom * x, zoom * y, zoom * z);
+  }
+  protected _parent: Group | Scene | null = null;
+  protected _threeObject: Object3D | null = null;
+  #initPosition() {
+    const self = this;
+    // prettier-ignore
+    Object.defineProperty(this, "position", {
+      value: {
+        get x() { return self.#position.x },
+        set x(x) {
+          self.#position.x = x;
+          if (self._threeObject) self._threeObject.position.x = x;
+        },
+        get y() { return self.#position.y },
+        set y(y) {
+          self.#position.y = y;
+          if (self._threeObject) self._threeObject.position.y = y;
+        },
+        get z() { return self.#position.z },
+        set z(z) {
+          self.#position.z = z;
+          if (self._threeObject) self._threeObject.position.z = z;
+        },
+        set(x: number, y: number, z: number) {
+          self.#position.x = x;
+          self.#position.y = y;
+          self.#position.z = z;
+          self._threeObject?.position.set(x, y, z);
+        },
+      },
+    });
+    Object.freeze(this.position);
+    const position = this.getAttribute("position");
+    const [x = 0, y = 0, z = 0] = position?.split(" ")?.map(parseFloat) ?? [];
+    this.position.set(x, y, z);
+  }
+  #initRotation() {
+    const self = this;
+    // prettier-ignore
+    Object.defineProperty(this, "rotation", {
+      value: {
+        get x() { return self.#rotation.x },
+        set x(x) {
+          self.#rotation.x = x;
+          if (self._threeObject) self._threeObject.rotation.x = x;
+        },
+        get y() { return self.#rotation.y },
+        set y(y) {
+          self.#rotation.y = y;
+          if (self._threeObject) self._threeObject.rotation.y = y;
+        },
+        get z() { return self.#rotation.z },
+        set z(z) {
+          self.#rotation.z = z;
+          if (self._threeObject) self._threeObject.rotation.z = z;
+        },
+        set(x: number, y: number, z: number) {
+          self.#rotation.x = x;
+          self.#rotation.y = y;
+          self.#rotation.z = z;
+          self._threeObject?.rotation.set(x, y, z);
+        },
+      },
+    });
+    Object.freeze(this.rotation);
+    const rotation = this.getAttribute("rotation");
+    const [x = 0, y = 0, z = 0] = rotation?.split(" ")?.map(parseFloat) ?? [];
+    this.rotation.set(x, y, z);
+  }
+  #initScale() {
+    const self = this;
+    // prettier-ignore
+    Object.defineProperty(this, "scale", {
+      value: {
+        get x() { return self.#scale.x },
+        set x(x) {
+          self.#scale.x = x;
+          if (self._threeObject) self._threeObject.scale.x = self.zoom * x;
+        },
+        get y() { return self.#scale.y },
+        set y(y) {
+          self.#scale.y = y;
+          if (self._threeObject) self._threeObject.scale.y = self.zoom * y;
+        },
+        get z() { return self.#scale.z },
+        set z(z) {
+          self.#scale.z = z;
+          if (self._threeObject) self._threeObject.scale.z = self.zoom * z;
+        },
+        set(x: number, y: number, z: number) {
+          const { zoom } = self
+          self.#scale.x = x;
+          self.#scale.y = y;
+          self.#scale.z = z;
+          self._threeObject?.scale.set(zoom * x, zoom * y, zoom * z);
+        },
+      },
+    });
+    Object.freeze(this.scale);
+    this.#zoom = parseFloat(this.getAttribute("zoom") ?? `${this.#zoom}`);
+    const scale = this.getAttribute("scale");
+    const [x = 1, y = 1, z = 1] = scale?.split(" ")?.map(parseFloat) ?? [];
+    this.scale.set(x, y, z);
+  }
+  constructor() {
+    super();
+    this.#initPosition();
+    this.#initRotation();
+    this.#initScale();
+  }
+  protected _enable() {
+    if (!document.body.contains(this) || !this._threeObject) {
+      return;
+    }
+    const { position, rotation, scale, zoom } = this;
+    const { x: pX, y: pY, z: pZ } = position;
+    const { x: rX, y: rY, z: rZ } = rotation;
+    const { x: sX, y: sY, z: sZ } = scale;
+    this._threeObject.position.set(pX, pY, pZ);
+    this._threeObject.rotation.set(rX, rY, rZ);
+    this._threeObject.scale.set(zoom * sX, zoom * sY, zoom * sZ);
+    if (this._parent) {
+      Bus.publish(this._parent, "add", this._threeObject);
+    }
+  }
+  protected _disable() {
+    if (this._parent) Bus.publish(this._parent, "remove", this._threeObject);
+    this._threeObject = null;
+  }
+  connectedCallback() {
+    const selector = "miris-group, miris-scene";
+    this._parent = this.parentElement?.closest(selector) ?? null;
+    this._enable();
+    Bus.subscribe(this, "add", (object) => {
+      if (this._threeObject?.children.includes(object)) return;
+      this._threeObject?.add(object);
+    });
+    Bus.subscribe(this, "remove", (object) => {
+      this._threeObject?.remove(object);
+    });
+  }
+  disconnectedCallback() {
+    Bus.unsubscribe(this, "add");
+    Bus.unsubscribe(this, "remove");
+  }
+}

package/scene.ts ADDED Viewed

@@ -0,0 +1,127 @@
+import {
+  MirisControls as ThreeControls,
+  MirisScene as ThreeScene,
+} from "@miris-inc/three";
+import {
+  type Object3D,
+  PerspectiveCamera as ThreeCamera,
+  WebGLRenderer as ThreeRenderer,
+} from "three";
+import Bus from "./bus";
+export default class MirisScene extends HTMLElement {
+  static observedAttributes = ["key"];
+  #renderer: ThreeRenderer | null = null;
+  #scene: ThreeScene | null = null;
+  #camera: ThreeCamera | null = null;
+  #observer: ResizeObserver | null = null;
+  // prettier-ignore
+  get camera() : ThreeCamera { return this.#camera }
+  // prettier-ignore
+  set camera(camera: ThreeCamera) { this.#camera = camera }
+  #key: string | null = null;
+  // prettier-ignore
+  get key() { return this.#key }
+  set key(key) {
+    if (key === this.#key) return;
+    this.#key = key;
+    if (key) this.setAttribute("key", key);
+    else this.removeAttribute("key");
+  }
+  connectedCallback() {
+    const camera = new ThreeCamera();
+    const renderer = new ThreeRenderer({ alpha: true });
+    const controls = new ThreeControls(null, camera, renderer.domElement);
+    const scene = new ThreeScene(this.key);
+    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      const entry = entries[entries.length - 1]!;
+      const width = entry.contentBoxSize[0]!.inlineSize;
+      const height = entry.contentBoxSize[0]!.blockSize;
+      renderer.setPixelRatio(devicePixelRatio);
+      renderer.setSize(width, height, false);
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+    });
+    const sheet = new CSSStyleSheet();
+    const shadow = this.attachShadow({ mode: "closed" });
+    sheet.insertRule(":host { display: block }");
+    sheet.insertRule("canvas { display: block; width: 100%; height: 100% }");
+    shadow.adoptedStyleSheets.push(sheet);
+    shadow.append(renderer.domElement);
+    observer.observe(this);
+    renderer.setAnimationLoop(() => renderer.render(scene, camera));
+    this.#renderer = renderer;
+    this.#scene = scene;
+    this.#observer = observer;
+    this.#camera = camera;
+    Bus.subscribe(this, "add", (object: Object3D) => {
+      if (scene.children.includes(object)) return;
+      if (object instanceof ThreeCamera) return;
+      scene.add(object);
+    });
+    Bus.subscribe(this, "remove", (object: Object3D) => {
+      scene.remove(object);
+    });
+    Bus.subscribe(this, "control", (object: Object3D) => {
+      controls.objects.add(object);
+    });
+    Bus.subscribe(this, "uncontrol", (object: Object3D) => {
+      controls.objects.delete(object);
+    });
+  }
+  getRenderStats() {
+    return {
+      callCount: this.#renderer?.info.render.calls,
+      programCount: this.#renderer?.info.programs.length,
+      triangleCount: this.#renderer?.info.render.triangles,
+    };
+  }
+  disconnectedCallback() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#renderer?.dispose();
+    this.#renderer = null;
+    Bus.unsubscribe(this, "add");
+    Bus.unsubscribe(this, "remove");
+    Bus.unsubscribe(this, "control");
+    Bus.unsubscribe(this, "uncontrol");
+  }
+  attributeChangedCallback(
+    name: string,
+    _oldValue: string | null,
+    newValue: string | null
+  ) {
+    switch (name) {
+      case "key":
+        this.key = newValue;
+        break;
+    }
+  }
+  setViewerKey(viewerKey: string) {
+    this.#scene.setViewerKey(viewerKey);
+  }
+  async fetchAssets(...args: Parameters<ThreeScene["fetchAssets"]>) {
+    if (this.#scene) return this.#scene.fetchAssets(...args);
+  }
+  get coreScene() {
+    return this.#scene.coreScene;
+  }
+}

package/stream.ts ADDED Viewed

@@ -0,0 +1,217 @@
+import {
+  PerspectiveCamera as ThreeCamera,
+  WebGLRenderer as ThreeRenderer,
+} from "three";
+import {
+  MirisScene as ThreeScene,
+  MirisStream as ThreeStream,
+  MirisControls as ThreeControls,
+} from "@miris-inc/three";
+import Bus from "./bus";
+import Primitive from "./primitive";
+import type Scene from "./scene";
+export default class MirisStream extends Primitive {
+  static observedAttributes = ["uuid", "key", "disabled", "controls"];
+  #disabled = false;
+  // prettier-ignore
+  get disabled() { return this.#disabled }
+  set disabled(disabled) {
+    if (disabled === this.#disabled) return;
+    this.#disabled = disabled;
+    if (disabled) {
+      this.setAttribute("disabled", "");
+      this._disable();
+    } else {
+      this.removeAttribute("disabled");
+      this._enable();
+    }
+  }
+  #uuid: string | null = null;
+  // prettier-ignore
+  get uuid() { return this.#uuid }
+  set uuid(uuid) {
+    if (uuid === this.#uuid) return;
+    if (this._threeObject) this._threeObject.clearBoxes();
+    const oldUuid = this.#uuid;
+    this.#uuid = uuid;
+    if (uuid) {
+      this.setAttribute("uuid", uuid);
+      if (oldUuid) this._disable();
+      this._enable();
+    } else {
+      this.removeAttribute("uuid");
+      this._disable();
+    }
+  }
+  #controls = false;
+  // prettier-ignore
+  get controls() { return this.#controls }
+  set controls(controls) {
+    if (controls === this.#controls) return;
+    this.#controls = controls;
+    if (controls) this.#control();
+    else this.#uncontrol();
+  }
+  #threeControls: ThreeControls | null = null;
+  #key: string | null = null;
+  // prettier-ignore
+  get key() { return this.#key }
+  set key(key) {
+    if (key === this.#key) return;
+    this.#key = key;
+    if (key) this.setAttribute("key", key);
+    else this.removeAttribute("key");
+  }
+  protected override _threeObject: ThreeStream | null = null;
+  #renderer: ThreeRenderer | null = null;
+  #observer: ResizeObserver | null = null;
+  #shadow: ShadowRoot | null = null;
+  #scene: ThreeScene | null = null;
+  constructor() {
+    super();
+    this.#key = this.getAttribute("key");
+  }
+  #enableScene() {
+    if (this.#renderer) return;
+    const renderer = new ThreeRenderer({ alpha: true });
+    const scene = new ThreeScene(this.key);
+    const camera = new ThreeCamera();
+    const controls = new ThreeControls(null, camera, renderer.domElement);
+    const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+      const entry = entries[entries.length - 1]!;
+      const width = entry.contentBoxSize[0]!.inlineSize;
+      const height = entry.contentBoxSize[0]!.blockSize;
+      renderer.setPixelRatio(devicePixelRatio);
+      renderer.setSize(width, height, false);
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+    });
+    if (!this.#shadow) {
+      this.#shadow = this.attachShadow({ mode: "closed" });
+      const sheet = new CSSStyleSheet();
+      sheet.insertRule(":host { display: block }");
+      sheet.insertRule("canvas { display: block; width: 100%; height: 100% }");
+      this.#shadow.adoptedStyleSheets.push(sheet);
+      this.#shadow.append(renderer.domElement);
+    }
+    if (this._threeObject) scene.add(this._threeObject);
+    observer.observe(this);
+    renderer.setAnimationLoop(() => renderer.render(scene, camera));
+    this.#renderer = renderer;
+    this.#scene = scene;
+    this.#threeControls = controls;
+    this.#observer = observer;
+  }
+  override _enable() {
+    if (this.disabled) return;
+    if (!this._threeObject && this.uuid) {
+      this._threeObject = new ThreeStream(this.uuid, this.key);
+      this._threeObject.name = this.uuid;
+    }
+    super._enable();
+    if (this.#scene && this._threeObject) this.#scene.add(this._threeObject);
+    if (!this._parent && this.uuid) this.#enableScene();
+    if (this.controls) this.#control();
+  }
+  #disableScene() {
+    if (this.#renderer) {
+      this.#renderer?.dispose();
+      this.#renderer = null;
+    }
+    if (this.#observer) {
+      this.#observer?.disconnect();
+      this.#observer = null;
+    }
+  }
+  override _disable() {
+    // // Cannot implement until Aqua allows multiple scenes per page
+    // if (!this._parent) this.#disableScene();
+    if (this._threeObject) this.#scene?.remove(this._threeObject);
+    if (this.controls) this.#uncontrol();
+    super._disable();
+  }
+  #control() {
+    if (!this.controls || !this._threeObject) return;
+    const scene = this.closest("miris-scene") as Scene | null;
+    if (scene) Bus.publish(scene, "control", this._threeObject);
+    else this.#threeControls?.objects.add(this._threeObject);
+  }
+  #uncontrol() {
+    if (this.controls || !this._threeObject) return;
+    const scene = this.closest("miris-scene") as Scene | null;
+    if (scene) Bus.publish(scene, "uncontrol", this._threeObject);
+    else this.#threeControls?.objects.delete(this._threeObject);
+  }
+  attributeChangedCallback(
+    name: string,
+    _oldValue: string | null,
+    newValue: string | null
+  ) {
+    switch (name) {
+      case "controls":
+        this.controls = newValue !== null;
+        break;
+      case "disabled":
+        this.disabled = newValue !== null;
+        break;
+      case "key":
+        this.#key = newValue;
+        break;
+      case "uuid":
+        this.uuid = newValue;
+        break;
+    }
+  }
+  update() {
+    if (this._threeObject) this._threeObject?.update();
+  }
+  toggleRenderBounds(shouldRender: boolean) {
+    if (this._threeObject) this._threeObject?.toggleRenderBounds(shouldRender);
+  }
+}