@johnmorrisdotca/wakusei-planets 0.5.1 → 0.7.0

package/dist/portrait/element.js

@@ -0,0 +1,545 @@
+import { BODIES } from "../facts.js";
+import { createGate, frameCap } from "../gate.js";
+import { setThreeLoader, takeRenderer } from "../scene/shared.js";
+import { TEXTURE_BASE, TEXTURE_FAR_BASE } from "../element.js";
+import { backgroundCss, drawShapes, lineScene, paintBackground, shapesOf, shapesSvg, starfield } from "./overlay.js";
+import { decodeScene, defaultPortrait, encodeScene, fromScreen, hitTest, resolve, toScreen } from "./model.js";
+import { poseOf } from "./pose.js";
+import { createPortraitItem } from "./scene3d.js";
+export { setThreeLoader };
+const TEMPLATE = `<style>
+:host { display: block; width: var(--wakusei-size, 720px); max-width: 100%; aspect-ratio: var(--wakusei-ratio, 16 / 9); position: relative; overflow: hidden; contain: layout style; touch-action: none; user-select: none; }
+#bg, #stage, #over { position: absolute; inset: 0; width: 100%; height: 100%; }
+#stage svg { display: block; width: 100%; height: 100%; }
+#over { pointer-events: none; overflow: visible; }
+</style><div id="bg"></div><div id="stage"></div><svg id="over" aria-hidden="true"></svg>`;
+const num = (value, fallback) => {
+    const n = value === null || value.trim() === "" ? NaN : Number(value);
+    return Number.isFinite(n) ? n : fallback;
+};
+/**
+ * The `<wakusei-portrait>` custom element: a scene of bodies arranged on one picture.
+ *
+ * Attributes: `scene` (the scene as the portrait builder writes it in its address), `look` (`line`, `realistic` or `painted`: replaces the scene's), `size` (pixels across), `lang` (`en` or `ja`: the names),
+ * `live` (`always`, `hover` or `off`: when it takes the page's one WebGL context), `texture-base` and `texture-far-base` (where the surface pictures are).
+ *
+ * @example
+ * ```ts no-run
+ * import { WakuseiPortrait } from "@johnmorrisdotca/wakusei-planets/portrait";
+ *
+ * const view = document.createElement("wakusei-portrait") as WakuseiPortrait;
+ * view.setAttribute("scene", "arrange:arc~look:painted~sun_0_0_0.3_0~earth_0_0_0.3_0~moon_0_0_0.3_0");
+ * document.body.append(view);
+ * ```
+ */
+export class WakuseiPortrait extends HTMLElement {
+    static observedAttributes = ["scene", "look", "size", "lang", "live", "texture-base", "texture-far-base"];
+    #root;
+    #stage;
+    #bg;
+    #over;
+    #portrait = defaultPortrait();
+    #fromAttributes = true;
+    #resolved = { placed: [], camera: { x: 0, y: 0, h: 1 } };
+    #state = "line";
+    #renderer;
+    #release;
+    #view;
+    #viewKey = "";
+    #stilled = false;
+    #wantLive = false;
+    #visible = typeof IntersectionObserver !== "function";
+    #io;
+    #tick;
+    #gate;
+    #queued = false;
+    #startedAt = 0;
+    #reduce = false;
+    #edit = {};
+    #overKey = "";
+    #lineKey = "";
+    #hover = () => void this.goLive();
+    #onContext = (state) => {
+        if (state === "unavailable")
+            this.#set("unavailable");
+        else if (state === "lost")
+            this.#set("lost");
+        else if (this.#view?.live)
+            this.#set("live");
+    };
+    #onHidden = () => {
+        if (document.visibilityState === "hidden")
+            this.#stopTick();
+        else
+            this.#resume();
+    };
+    /** The scene now. Setting it hands the element a scene of your own, as the builder does; it is drawn at once and at most thirty times a second after. */
+    get portrait() {
+        return this.#portrait;
+    }
+    set portrait(value) {
+        this.#portrait = value;
+        this.#fromAttributes = false;
+        this.#changed();
+    }
+    /** The chosen body's index and the guides to draw over the picture (the builder's editing). */
+    set editing(value) {
+        this.#edit = value;
+        this.#paintOver();
+    }
+    get state() {
+        return this.#state;
+    }
+    /** Numbers for a test or a status line. */
+    get stats() {
+        return { state: this.#state, bodies: this.#resolved.placed.length, renderer: this.#renderer?.stats };
+    }
+    /** Where everything is on the page now: the picture's size in pixels, pixels to a scene unit, and the bodies (back to front). */
+    get metrics() {
+        const { width, height } = this.#size();
+        return { width, height, scale: toScreen(this.#resolved.camera, width, height).scale, camera: this.#resolved.camera, placed: this.#resolved.placed };
+    }
+    /** The body under a point of the page (client coordinates): its index in the list, or -1. `slop` is the smallest radius, in pixels, a body is hit within. */
+    pick(clientX, clientY, slop = 10) {
+        const at = this.worldAt(clientX, clientY);
+        const { scale } = toScreen(this.#resolved.camera, this.#size().width, this.#size().height);
+        return hitTest(this.#resolved.placed, at.x, at.y, slop / scale);
+    }
+    /** A point of the page (client coordinates) in the scene's units. */
+    worldAt(clientX, clientY) {
+        const box = this.getBoundingClientRect();
+        const { width, height } = this.#size();
+        return fromScreen(this.#resolved.camera, width, height, ((clientX - box.left) / Math.max(1, box.width)) * width, ((clientY - box.top) / Math.max(1, box.height)) * height);
+    }
+    connectedCallback() {
+        this.#root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+        this.#root.innerHTML = TEMPLATE;
+        this.#stage = this.#root.getElementById("stage");
+        this.#bg = this.#root.getElementById("bg");
+        this.#over = this.#root.getElementById("over");
+        this.#startedAt = performance.now();
+        this.#reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "img");
+        if (!this.hasAttribute("data-state"))
+            this.setAttribute("data-state", this.#state);
+        this.#gate = createGate(1000 / frameCap(30, { deviceMemory: navigator.deviceMemory, hardwareConcurrency: navigator.hardwareConcurrency }), () => this.#frame());
+        if (typeof IntersectionObserver === "function") {
+            this.#io = new IntersectionObserver((entries) => {
+                const last = entries[entries.length - 1];
+                if (last === undefined)
+                    return;
+                this.#visible = last.isIntersecting;
+                if (this.#visible) {
+                    this.#still();
+                    this.#resume();
+                    if (this.#portrait.look !== "line" && this.#view?.live !== true && this.#priority())
+                        void this.goLive();
+                }
+                else
+                    this.#stopTick();
+            });
+            this.#io.observe(this);
+        }
+        document.addEventListener("visibilitychange", this.#onHidden);
+        this.#applyHover();
+        this.#readAttributes();
+        this.#queue();
+    }
+    disconnectedCallback() {
+        this.#stopTick();
+        this.#io?.disconnect();
+        document.removeEventListener("visibilitychange", this.#onHidden);
+        this.removeEventListener("pointerenter", this.#hover);
+        this.removeEventListener("focusin", this.#hover);
+        this.removeEventListener("pointerdown", this.#hover);
+        this.#view?.dispose();
+        this.#view = undefined;
+        this.#viewKey = "";
+        this.#release?.();
+        this.#release = undefined;
+        this.#renderer = undefined;
+    }
+    attributeChangedCallback(name) {
+        if (!this.isConnected)
+            return;
+        if (name === "live")
+            this.#applyHover();
+        if (name === "scene" || name === "look")
+            this.#readAttributes();
+        this.#queue();
+    }
+    /** Take the page's one WebGL context and draw the scene on it. Resolves true when it is live; a line scene has nothing to take and resolves false. */
+    async goLive() {
+        if (this.#portrait.look === "line")
+            return false;
+        this.#wantLive = true;
+        await this.#ensureView();
+        const ok = (await this.#view?.focus()) === true;
+        if (ok) {
+            this.#set("live");
+            this.#sync();
+            this.#resume();
+        }
+        else if (this.#state !== "unavailable" && this.#state !== "lost")
+            this.#set("still");
+        return ok;
+    }
+    /** Give the WebGL context back: the picture stays as a still. */
+    rest() {
+        this.#wantLive = false;
+        this.#stopTick();
+        if (this.#view === undefined)
+            return;
+        this.#view.blur();
+        if (this.#portrait.look !== "line" && this.#state !== "unavailable") {
+            this.#set("still");
+            this.#rekey();
+        }
+    }
+    /** The picture as a PNG: the background, the bodies and the names, at the size it is on the page times `scale` (the canvas of the bodies is at most the page's pixel ratio, 2). */
+    async toPng(scale = 1) {
+        const { width, height } = this.#size();
+        const canvas = document.createElement("canvas");
+        const ratio = Math.max(1, Math.min(4, scale));
+        canvas.width = Math.round(width * ratio);
+        canvas.height = Math.round(height * ratio);
+        const ctx = canvas.getContext("2d");
+        paintBackground(ctx, this.#portrait.bg, canvas.width, canvas.height);
+        if (this.#portrait.look === "line") {
+            const image = await this.#svgImage(this.#lineDocument(width, height, false), canvas.width, canvas.height);
+            ctx.drawImage(image, 0, 0);
+        }
+        else {
+            await this.#drawCanvasOnto(ctx, canvas.width, canvas.height);
+            drawShapes(ctx, shapesOf(this.#portrait, this.#resolved, width, height, this.#lang()), canvas.width / width);
+        }
+        return new Promise((resolveBlob, reject) => canvas.toBlob((blob) => (blob === null ? reject(new Error("the picture could not be made")) : resolveBlob(blob)), "image/png"));
+    }
+    /** The picture as SVG. The line look is all vector. The shaded looks hold the bodies as a picture inside the SVG, with the background, the orbits and the names as vector. */
+    async toSvg() {
+        const { width, height } = this.#size();
+        if (this.#portrait.look === "line")
+            return this.#lineDocument(width, height, true);
+        const href = await this.#glDataUrl();
+        return this.#wrapSvg(width, height, `<image x="0" y="0" width="${width}" height="${height}" href="${href}"/>`);
+    }
+    // --- the scene ----------------------------------------------------------------------------------------------------------------------------------------
+    #readAttributes() {
+        if (!this.#fromAttributes)
+            return;
+        const text = this.getAttribute("scene");
+        const p = text === null ? defaultPortrait() : decodeScene(text);
+        const look = this.getAttribute("look");
+        if (look === "line" || look === "realistic" || look === "painted")
+            p.look = look;
+        this.#portrait = p;
+    }
+    #lang() {
+        return this.getAttribute("lang") === "ja" ? "ja" : "en";
+    }
+    #size() {
+        const width = Math.max(1, Math.round(this.clientWidth || num(this.getAttribute("size"), 720)));
+        const height = Math.max(1, Math.round(this.clientHeight || width / this.#portrait.aspect));
+        return { width, height };
+    }
+    #date() {
+        const ms = this.#portrait.date === undefined ? NaN : Date.parse(this.#portrait.date);
+        return Number.isFinite(ms) ? ms : undefined;
+    }
+    get #turning() {
+        return !this.#reduce && this.#portrait.items.some((i) => i.turn !== 0);
+    }
+    #seconds() {
+        return this.#turning ? (performance.now() - this.#startedAt) / 1000 : 0;
+    }
+    #draw() {
+        const p = this.#portrait;
+        return { placed: this.#resolved.placed, camera: this.#resolved.camera, light: p.light, look: p.look === "painted" ? "painted" : "realistic", ms: this.#date(), seconds: this.#seconds(), shadows: p.shadows };
+    }
+    #changed() {
+        if (!this.isConnected)
+            return;
+        if (this.#view?.live === true && !this.#queued) {
+            this.#resolved = resolve(this.#portrait);
+            this.#style();
+            this.#gate?.request();
+        }
+        else
+            this.#queue();
+    }
+    #style() {
+        const p = this.#portrait;
+        this.style.setProperty("--wakusei-ratio", String(p.aspect));
+        if (this.hasAttribute("size"))
+            this.style.setProperty("--wakusei-size", `${num(this.getAttribute("size"), 720)}px`);
+        this.#bg.style.background = backgroundCss(p.bg);
+        this.#paintOver();
+    }
+    #paintOver() {
+        if (this.#over === undefined)
+            return;
+        const { width, height } = this.#size();
+        const shapes = shapesOf(this.#portrait, this.#resolved, width, height, this.#lang(), this.#edit);
+        const markup = shapesSvg(shapes);
+        const key = `${width}x${height}|${markup}`;
+        if (key === this.#overKey)
+            return;
+        this.#overKey = key;
+        this.#over.setAttribute("viewBox", `0 0 ${width} ${height}`);
+        this.#over.innerHTML = markup;
+    }
+    // --- drawing ------------------------------------------------------------------------------------------------------------------------------------------
+    #queue() {
+        if (this.#queued)
+            return;
+        this.#queued = true;
+        queueMicrotask(() => {
+            this.#queued = false;
+            if (this.isConnected)
+                void this.#refresh();
+        });
+    }
+    async #refresh() {
+        if (!this.isConnected)
+            return;
+        const p = this.#portrait;
+        this.#resolved = resolve(p);
+        this.#style();
+        this.setAttribute("aria-label", this.#label());
+        const wants3d = p.look !== "line" && this.#state !== "unavailable" && p.items.length > 0;
+        if (!wants3d) {
+            if (this.#view !== undefined) {
+                this.#view.dispose();
+                this.#view = undefined;
+                this.#viewKey = "";
+                this.#release?.();
+                this.#release = undefined;
+                this.#renderer = undefined;
+            }
+            this.#drawLine();
+            if (p.look === "line" || p.items.length === 0)
+                this.#set("line");
+            return;
+        }
+        if (this.#stage.querySelector("svg") !== null && this.#view === undefined)
+            this.#stage.innerHTML = "";
+        this.#lineKey = "";
+        if (this.#view === undefined || this.#viewKey === "")
+            await this.#ensureView();
+        if (this.#view?.live !== true && this.#wantLive) {
+            void this.goLive();
+            return;
+        }
+        if (this.#view?.live === true) {
+            this.#sync();
+            this.#view.invalidate();
+        }
+        else {
+            this.#rekey();
+            if (this.#wantLive || this.#priority())
+                void this.goLive();
+        }
+    }
+    #label() {
+        const names = this.#portrait.items.map((i) => BODIES[i.body].name[this.#lang()]);
+        return this.#lang() === "ja" ? `惑星の肖像: ${names.join("、")}` : `Portrait: ${names.join(", ")}`;
+    }
+    #priority() {
+        return (this.getAttribute("live") ?? "always") === "always" && this.#visible;
+    }
+    #applyHover() {
+        this.removeEventListener("pointerenter", this.#hover);
+        this.removeEventListener("focusin", this.#hover);
+        this.removeEventListener("pointerdown", this.#hover);
+        if ((this.getAttribute("live") ?? "always") === "hover") {
+            this.addEventListener("pointerenter", this.#hover);
+            this.addEventListener("focusin", this.#hover);
+            this.addEventListener("pointerdown", this.#hover);
+        }
+    }
+    #poses() {
+        const seconds = this.#seconds();
+        return this.#resolved.placed.map((q) => poseOf(q, this.#date(), seconds, this.#portrait.light));
+    }
+    #lineBody(width, height) {
+        return lineScene(this.#portrait, this.#resolved, width, height, this.#poses(), this.#lang());
+    }
+    #drawLine() {
+        const { width, height } = this.#size();
+        const markup = this.#lineBody(width, height);
+        const key = `${width}x${height}|${markup.length}|${this.#portrait.light.az}`;
+        if (this.#portrait.look !== "line") {
+            if (this.#stage.firstChild !== null && this.#lineKey !== "")
+                this.#stage.innerHTML = "";
+            this.#lineKey = "";
+            return;
+        }
+        if (key === this.#lineKey && !this.#turning)
+            return;
+        this.#lineKey = key;
+        this.#stage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="xMidYMid meet" role="presentation">${markup}</svg>`;
+    }
+    #key() {
+        const { width } = this.#size();
+        return `${encodeScene(this.#portrait)}|${width}`;
+    }
+    async #ensureView() {
+        if (this.#renderer === undefined) {
+            const taken = takeRenderer(this.#onContext);
+            this.#renderer = taken.renderer;
+            this.#release = taken.release;
+        }
+        if (this.#view === undefined)
+            this.#makeView();
+    }
+    #makeView() {
+        this.#viewKey = this.#key();
+        this.#stilled = false;
+        this.#stage.innerHTML = "";
+        const base = () => {
+            const own = this.getAttribute("texture-base");
+            return own === null || own === "" ? TEXTURE_BASE : own.endsWith("/") ? own : `${own}/`;
+        };
+        const item = createPortraitItem({
+            key: this.#viewKey,
+            state: () => this.#draw(),
+            textureBase: base,
+            farBase: () => {
+                const own = this.getAttribute("texture-far-base");
+                if (own !== null && own !== "")
+                    return own.endsWith("/") ? own : `${own}/`;
+                return this.hasAttribute("texture-base") ? base() : TEXTURE_FAR_BASE;
+            },
+            redraw: () => this.#view?.invalidate(),
+        });
+        this.#view = this.#renderer.view(this.#stage, item);
+        this.#set("loading");
+        if (this.#visible)
+            this.#still();
+    }
+    #still() {
+        if (this.#stilled || this.#view === undefined)
+            return;
+        this.#stilled = true;
+        void this.#view.showStill().then(() => {
+            if (this.#state === "loading")
+                this.#set("still");
+        });
+    }
+    #rekey() {
+        if (this.#renderer === undefined || this.#view === undefined || this.#view.live)
+            return;
+        if (this.#key() === this.#viewKey)
+            return;
+        this.#view.dispose();
+        this.#view = undefined;
+        this.#makeView();
+    }
+    #sync() {
+        const scene = this.#view?.scene;
+        if (scene === undefined || typeof scene.apply !== "function")
+            return;
+        scene.apply(this.#draw());
+    }
+    // --- moving -------------------------------------------------------------------------------------------------------------------------------------------
+    #frame() {
+        this.#resolved = resolve(this.#portrait);
+        this.#paintOver();
+        if (this.#portrait.look === "line") {
+            this.#drawLine();
+            if (this.#turning && this.#visible && document.visibilityState !== "hidden")
+                this.#tick = setTimeout(() => this.#gate?.request(), 100);
+            return;
+        }
+        if (this.#view?.live !== true || !this.#visible || document.visibilityState === "hidden")
+            return;
+        this.#sync();
+        this.#view.invalidate();
+        if (this.#turning)
+            this.#tick = setTimeout(() => this.#gate?.request(), 0);
+    }
+    #resume() {
+        this.#stopTick();
+        if (this.#turning && this.#visible && document.visibilityState !== "hidden" && (this.#view?.live === true || this.#portrait.look === "line"))
+            this.#gate?.request();
+    }
+    #stopTick() {
+        clearTimeout(this.#tick);
+        this.#tick = undefined;
+        this.#gate?.cancel();
+    }
+    #set(state) {
+        if (state === this.#state)
+            return;
+        this.#state = state;
+        this.setAttribute("data-state", state);
+        this.dispatchEvent(new CustomEvent("wakusei-state", { detail: { state } }));
+        if (state === "unavailable")
+            this.#drawLine();
+    }
+    // --- exporting ----------------------------------------------------------------------------------------------------------------------------------------
+    async #drawCanvasOnto(ctx, width, height) {
+        await this.#capturePixels((c) => ctx.drawImage(c, 0, 0, width, height));
+    }
+    async #glDataUrl() {
+        let url = "";
+        await this.#capturePixels((c) => {
+            url = c.toDataURL("image/png");
+        });
+        return url;
+    }
+    async #capturePixels(use) {
+        if (this.#view?.live !== true && !(await this.goLive()))
+            throw new Error("the 3D picture is not available here");
+        await new Promise((done, reject) => {
+            const view = this.#view;
+            const scene = view?.scene;
+            const canvas = this.#stage.querySelector("canvas");
+            if (view === undefined || scene?.afterDraw === undefined || canvas === null) {
+                reject(new Error("the 3D picture is not available here"));
+                return;
+            }
+            const timeout = setTimeout(() => reject(new Error("the picture was not drawn")), 8000);
+            scene.afterDraw(() => {
+                clearTimeout(timeout);
+                try {
+                    use(canvas);
+                    done();
+                }
+                catch (error) {
+                    reject(error instanceof Error ? error : new Error("the picture could not be read"));
+                }
+            });
+            this.#sync();
+            view.invalidate();
+        });
+    }
+    #svgImage(svg, width, height) {
+        return new Promise((resolveImage, reject) => {
+            const image = new Image(width, height);
+            image.onload = () => resolveImage(image);
+            image.onerror = () => reject(new Error("the SVG could not be drawn"));
+            image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+        });
+    }
+    #lineDocument(width, height, withBackground) {
+        const body = this.#lineBody(width, height);
+        return this.#wrapSvg(width, height, body, withBackground);
+    }
+    #wrapSvg(width, height, bodies, withBackground = true) {
+        const p = this.#portrait;
+        const stars = starfield();
+        let back = "";
+        if (withBackground && p.bg === "black")
+            back = `<rect width="${width}" height="${height}" fill="#000"/>`;
+        else if (withBackground && p.bg === "gradient")
+            back = `<defs><radialGradient id="sky" cx="30%" cy="20%" r="110%"><stop offset="0" stop-color="#1c3358"/><stop offset="0.55" stop-color="#0d1a33"/><stop offset="1" stop-color="#050914"/></radialGradient></defs><rect width="${width}" height="${height}" fill="url(#sky)"/>`;
+        else if (withBackground && p.bg === "stars")
+            back = `<defs><radialGradient id="sky" cx="50%" cy="40%" r="80%"><stop offset="0" stop-color="#07101f"/><stop offset="1" stop-color="#000"/></radialGradient></defs><rect width="${width}" height="${height}" fill="url(#sky)"/>${stars.map((s) => `<circle cx="${(s.x * width).toFixed(1)}" cy="${(s.y * height).toFixed(1)}" r="${Math.max(0.5, s.r * 1000).toFixed(2)}" fill="#fff" fill-opacity="${s.a.toFixed(2)}"/>`).join("")}`;
+        const over = shapesSvg(shapesOf(p, this.#resolved, width, height, this.#lang()));
+        return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img" aria-label="${this.#label().replace(/&/g, "&amp;").replace(/"/g, "&quot;")}">${back}${bodies}${over}</svg>`;
+    }
+}
+if (typeof customElements !== "undefined" && !customElements.get("wakusei-portrait"))
+    customElements.define("wakusei-portrait", WakuseiPortrait);