@miris-inc/components 0.0.3 → 0.0.6-008a30d6

package/stream.ts

@@ -1,217 +0,0 @@
-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);
-  }
-}

package/test/carousel-multiple.html

@@ -1,386 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>hero</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      .hero-pagination-button {
-        text-transform: uppercase;
-        color: #9e9e9e;
-        cursor: pointer;
-        background-color: transparent;
-        border-style: none;
-        padding: 12px 16px;
-        width: var(--button-width);
-
-        &:hover {
-          color: #fff;
-        }
-      }
-
-      .hero-nav {
-        background-color: transparent;
-        position: absolute;
-        top: 0;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        fill: #fff;
-        padding: 16px;
-        border-style: none;
-        cursor: pointer;
-
-        &:hover {
-          fill: #d7d8d2;
-        }
-
-        & svg {
-          width: 40px;
-          height: 40px;
-        }
-      }
-
-      .hero-nav-prev {
-        left: 0;
-      }
-
-      .hero-nav-next {
-        right: 0;
-      }
-
-      .hero-display {
-        --hero-display-margin: 20%;
-
-        position: relative;
-        place-items: center;
-        height: 100%;
-      }
-
-      .hero-pagination-item {
-        scroll-snap-align: center;
-        display: block;
-      }
-
-      .hero-pagination-list {
-        --button-width: 192px;
-
-        position: absolute;
-        inset: 0;
-        bottom: auto;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-end;
-        grid-column-start: 7;
-        grid-column-end: 12;
-        list-style-type: none;
-        padding-inline-start: 0;
-        margin-block: 0;
-        width: 100%;
-        scroll-snap-type: inline mandatory;
-        overflow-x: auto;
-        padding-inline: calc(50% - (var(--button-width) / 2));
-        scrollbar-width: none;
-      }
-
-      .hero-mask {
-        mask-image: linear-gradient(
-          to right,
-          transparent,
-          black var(--hero-display-margin),
-          black calc(100% - var(--hero-display-margin)),
-          transparent
-        );
-      }
-
-      .hero-scene {
-        height: 100%;
-      }
-
-      body {
-        margin: 0;
-        background-color: black;
-        font-family:
-          Plus Jakarta Sans,
-          sans-serif;
-      }
-
-      .hero {
-        position: relative;
-        height: 100%;
-      }
-
-      .hero-container {
-        position: relative;
-        display: grid;
-        max-width: 1536px;
-        margin-inline: auto;
-        padding-inline: 64px;
-        padding-block: 4rem;
-        align-items: center;
-
-        @media (min-width: 1280px) {
-          grid-template-columns: repeat(12, minmax(0, 1fr));
-        }
-      }
-
-      .hero-wrapper {
-        height: 100%;
-        @media (min-width: 1280px) {
-          grid-column-start: 6;
-          grid-column-end: 13;
-        }
-      }
-
-      .hero-description {
-        width: 100%;
-        color: #9e9e9e;
-        margin-block: 0;
-      }
-
-      .hero-heading {
-        color: #fff;
-        font-size: 72px;
-        line-height: 94%;
-        margin-block: 0;
-      }
-
-      .hero-links-anchor {
-        display: block;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        border-radius: 25px;
-        text-align: center;
-        padding: 16px 24px;
-        text-decoration: none;
-        font-size: 10px;
-        border-width: 1px;
-        border-style: solid;
-      }
-
-      .hero-links-anchor-primary {
-        color: #151515;
-        background-color: #fff;
-        border-color: transparent;
-        font-weight: 800;
-
-        &:hover {
-          background-color: #d7d8d2;
-        }
-      }
-
-      .hero-links-anchor-secondary {
-        border-color: #c2c3be;
-        color: #fff;
-        font-weight: 500;
-
-        &:hover {
-          background-color: #151515;
-        }
-      }
-
-      .hero-links-list {
-        display: flex;
-        column-gap: 1rem;
-        list-style-type: none;
-        padding-inline-start: 0;
-        margin-block: 0;
-      }
-
-      .hero-text {
-        display: grid;
-        row-gap: 24px;
-
-        @media (min-width: 1280px) {
-          grid-column-start: 1;
-          grid-column-end: 6;
-          grid-row-start: 1;
-          grid-row-end: 3;
-        }
-      }
-
-      .hero-video {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .container {
-        height: 800px;
-        max-width: 1536px;
-        padding-block: 64px;
-        margin-inline: auto;
-      }
-    </style>
-    <script type="module" src="/index.ts"></script>
-    <script type="module" lang="ts">
-      const slots = 7;
-
-      await customElements.whenDefined("miris-stream");
-      for (const hero of document.getElementsByClassName("hero")) {
-        const scene = hero.querySelector(".hero-scene");
-        const group = hero.querySelector(".hero-group");
-        const list = hero.querySelector(".hero-pagination-list");
-        const assets = await scene.fetchAssets(["miris.com"]);
-        const count = assets.length;
-        const streams = [];
-        const paginationButtons = [];
-        const radius = 1 / (2 * Math.sin(Math.PI / slots));
-
-        assets.forEach(({ uuid, name, pY = 0, zoom = 1 }, index) => {
-          // calculate positions
-          const angle = (index % slots) * ((2 * Math.PI) / slots);
-          const pX = radius * Math.sin(angle);
-          const pZ = radius * Math.cos(angle);
-
-          const wrapper = document.createElement("miris-group");
-          wrapper.position.set(pX, pY, pZ);
-          group.append(wrapper);
-
-          // create stream
-          const stream = document.createElement("miris-stream");
-          stream.disabled = true;
-          stream.controls = true;
-          stream.uuid = uuid;
-          stream.zoom = zoom * 0.25;
-          streams.push(stream);
-          wrapper.append(stream);
-
-          // create list item
-          const item = document.createElement("li");
-          item.className = "hero-pagination-item";
-          list.append(item);
-
-          // create button
-          const button = document.createElement("button");
-          button.className = "hero-pagination-button";
-          button.innerText = name.replaceAll(/_+/g, " ");
-          button.addEventListener("click", () =>
-            button.scrollIntoView({ inline: "center", behavior: "smooth" })
-          );
-          paginationButtons.push(button);
-          item.append(button);
-        });
-
-        let waiting = false;
-        const scroll = () => {
-          // take measurements
-          const { clientWidth: cwL, scrollLeft: slL, scrollWidth: swL } = list;
-          const cwB = swL / count;
-
-          // calculate rotation
-          const rMaxProgress = 1 - 1 / count;
-          const rProgress = rMaxProgress * (slL / (swL - cwL));
-          const rRadians = rProgress * 2 * Math.PI;
-          const rY = rRadians * (count / slots);
-
-          // determine active indices
-          const iProgress = (slL + cwB / 2) / (swL - cwL + cwB);
-          const iCurr = Math.floor(iProgress / (1 / count));
-          const iPrev = iCurr - 1;
-          const iNext = iCurr + 1;
-
-          // update scene
-          streams.forEach((stream, index) => {
-            stream.disabled = ![iPrev, iCurr, iNext].includes(index);
-            stream.parentElement.rotation.y = rY;
-          });
-          group.rotation.y = -rY;
-
-          // update buttons
-          paginationButtons.forEach((button, index) => {
-            const className = "hero-pagination-button-active";
-            const { classList } = button;
-            if (index === iCurr) classList.add(className);
-            else classList.remove(className);
-          });
-
-          // release hold
-          waiting = false;
-        };
-
-        list.addEventListener("scroll", () => {
-          if (!waiting) waiting = Boolean(requestAnimationFrame(scroll));
-        });
-        scroll();
-
-        hero.querySelector(".hero-nav-prev")?.addEventListener("click", () => {
-          const padding = parseFloat(getComputedStyle(list).paddingLeft);
-          const prevButton = hero
-            .querySelector(".hero-pagination-button-active")
-            ?.parentElement?.previousElementSibling?.querySelector(
-              ".hero-pagination-button"
-            );
-
-          if (prevButton) {
-            list.scroll({
-              left: prevButton.offsetLeft - padding,
-              behavior: "smooth",
-            });
-          }
-        });
-
-        hero.querySelector(".hero-nav-next")?.addEventListener("click", () => {
-          const padding = parseFloat(getComputedStyle(list).paddingLeft);
-          const nextButton = hero
-            .querySelector(".hero-pagination-button-active")
-            ?.parentElement?.nextElementSibling?.querySelector(
-              ".hero-pagination-button"
-            );
-
-          if (nextButton) {
-            list.scroll({
-              left: nextButton.offsetLeft - padding,
-              behavior: "smooth",
-            });
-          }
-        });
-      }
-    </script>
-  </head>
-  <body>
-    <div class="container">
-      <div class="hero">
-        <div class="hero-wrapper">
-          <div class="hero-display">
-            <div class="hero-mask">
-              <miris-scene
-                key="l2LWVHS39ZhmXDOtefPoOmvPdAp55OxTPJfwVmNo7rY"
-                class="hero-scene"
-              >
-                <miris-group position="0 0 -3" class="hero-group"></miris-group>
-              </miris-scene>
-              <ul class="hero-pagination-list"></ul>
-            </div>
-            <button class="hero-nav hero-nav-prev">
-              <svg viewBox="0 0 24 24">
-                <path
-                  fill-rule="evenodd"
-                  d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </button>
-            <button class="hero-nav hero-nav-next">
-              <svg viewBox="0 0 24 24">
-                <path
-                  fill-rule="evenodd"
-                  d="M16.28 11.47a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 0 1-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 0 1 1.06-1.06l7.5 7.5Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>