@fusion.dev/helix 0.217.0 → 0.218.0

package/dist/voice-level/root/voice-level-root.js

@@ -0,0 +1,324 @@
+import { __decorate } from "tslib";
+import { customElement, HelixElement, hostAria, numberConverter, PaintGateController, readColorAlpha, words, writtenNumbers, } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { bandFor, barCount, centered, ease, envelope, QUIET_STOP, SILENT, STILL_TIME, stillLength, unit, WAVE_LINES, waveAt, } from '../draw.js';
+import { styles } from './voice-level-root.css.js';
+const GRAY = 'rgba(128,128,128,1)';
+const FAINT = 0.45;
+const TRACK = 0.18;
+const WAVE_STEP = 2;
+const ink = (value, alpha = 1) => {
+    const read = readColorAlpha(value);
+    return read ? `rgba(${read[0]},${read[1]},${read[2]},${read[3] * alpha})` : GRAY;
+};
+let HelixVoiceLevel = class HelixVoiceLevel extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.bands = '';
+        this.fallbackLabel = 'Voice level';
+        this.label = '';
+        this.level = 0;
+        this.still = false;
+        this.context = null;
+        this.lost = false;
+        this.width = 0;
+        this.height = 0;
+        this.shown = [];
+        this.swing = 0;
+        this.time = 0;
+        this.quiet = 0;
+        this.resting = false;
+        this.gate = new PaintGateController(this, {
+            canRun: () => !!this.context && !this.lost && !this.resting && !this.still,
+            onFrame: (delta) => {
+                this.step(delta);
+                this.paint();
+                if (this.quiet >= QUIET_STOP) {
+                    this.resting = true;
+                    this.gate.stop();
+                }
+            },
+            onMotion: () => {
+                this.paint();
+            },
+            onResize: () => {
+                this.measure();
+                this.paint();
+            },
+        });
+        this.handleRestyle = () => {
+            if (!this.gate.running) {
+                this.paint();
+            }
+        };
+        this.handleLost = () => {
+            this.lost = true;
+            this.gate.stop();
+            this.canvas?.toggleAttribute('hidden', true);
+        };
+        this.handleRestored = () => {
+            this.lost = false;
+            this.canvas?.toggleAttribute('hidden', false);
+            this.width = 0;
+            this.height = 0;
+            this.measure();
+            this.paint();
+            this.gate.play();
+        };
+    }
+    static { this.words = 'helix-voice-level'; }
+    static { this.styles = styles; }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { label: this.label || this.fallbackLabel, role: 'img' });
+        if (changed.has('level') ||
+            changed.has('bands') ||
+            changed.has('still') ||
+            changed.has('variant')) {
+            this.wake();
+        }
+    }
+    render() {
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.start();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated) {
+            this.start();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.width = 0;
+        this.height = 0;
+        this.canvas?.removeEventListener('contextlost', this.handleLost);
+        this.canvas?.removeEventListener('contextrestored', this.handleRestored);
+        this.canvas?.removeEventListener('transitionend', this.handleRestyle);
+    }
+    get readings() {
+        return writtenNumbers(this.bands).map(unit);
+    }
+    get sounding() {
+        return unit(this.level) > SILENT || this.readings.some((band) => band > SILENT);
+    }
+    wake() {
+        if (!this.context) {
+            return;
+        }
+        if (this.still) {
+            this.gate.stop();
+            this.paint();
+            return;
+        }
+        if (this.gate.reduced) {
+            this.paint();
+            return;
+        }
+        if (this.sounding) {
+            this.resting = false;
+            this.quiet = 0;
+            this.gate.play();
+        }
+        else if (!this.gate.running) {
+            this.paint();
+        }
+    }
+    start() {
+        if (!this.isConnected) {
+            return;
+        }
+        const canvas = this.renderRoot.querySelector('canvas');
+        if (!canvas) {
+            return;
+        }
+        this.canvas = canvas;
+        this.context ??= canvas.getContext('2d');
+        if (!this.context) {
+            return;
+        }
+        canvas.addEventListener('contextlost', this.handleLost);
+        canvas.addEventListener('contextrestored', this.handleRestored);
+        canvas.addEventListener('transitionend', this.handleRestyle);
+        if (this.lost && !this.context.isContextLost()) {
+            this.lost = false;
+            canvas.toggleAttribute('hidden', false);
+        }
+        this.gate.watch();
+        this.measure();
+        this.paint();
+        this.resting = !this.sounding;
+        this.gate.play();
+    }
+    measure() {
+        const canvas = this.canvas;
+        if (!canvas) {
+            return false;
+        }
+        const box = this.getBoundingClientRect();
+        const width = Math.round(box.width);
+        const height = Math.round(box.height);
+        if (width <= 0 || height <= 0 || (width === this.width && height === this.height)) {
+            return false;
+        }
+        this.width = width;
+        this.height = height;
+        const dpr = Math.min(2, window.devicePixelRatio || 1);
+        canvas.width = Math.round(width * dpr);
+        canvas.height = Math.round(height * dpr);
+        this.context?.setTransform(dpr, 0, 0, dpr, 0, 0);
+        return true;
+    }
+    step(delta) {
+        const count = this.bars;
+        const readings = this.readings;
+        if (this.shown.length !== count) {
+            this.shown = Array.from({ length: count }, (_, at) => this.shown[at] ?? 0);
+        }
+        let top = 0;
+        for (let at = 0; at < count; at++) {
+            const target = bandFor(readings, this.level, at, count) * envelope(at, count);
+            const next = ease(this.shown[at] ?? 0, target, delta);
+            this.shown[at] = next;
+            top = Math.max(top, next, target);
+        }
+        const level = unit(this.level);
+        this.swing = ease(this.swing, level, delta);
+        this.time += delta;
+        top = Math.max(top, this.swing, level);
+        this.quiet = top > SILENT ? 0 : this.quiet + delta;
+    }
+    settle() {
+        const count = this.bars;
+        const readings = this.readings;
+        this.shown = Array.from({ length: count }, (_, at) => bandFor(readings, this.level, at, count) * envelope(at, count));
+        this.swing = unit(this.level);
+        this.time = STILL_TIME;
+    }
+    get bars() {
+        return this.canvas ? barCount(getComputedStyle(this.canvas).animationIterationCount) : 0;
+    }
+    paint() {
+        const ctx = this.context;
+        const canvas = this.canvas;
+        if (!ctx || !canvas || this.width <= 0 || this.height <= 0) {
+            return;
+        }
+        const painted = getComputedStyle(canvas);
+        const main = ink(painted.color);
+        ctx.clearRect(0, 0, this.width, this.height);
+        if (this.still) {
+            this.settle();
+        }
+        if (this.gate.reduced && !this.still) {
+            this.paintStill(ctx, main, ink(painted.color, TRACK));
+        }
+        else if (this.variant === 'waves') {
+            this.paintWaves(ctx, main, painted, this.still ? STILL_TIME : this.time);
+        }
+        else {
+            this.paintSpectrum(ctx, main, ink(painted.textDecorationColor));
+        }
+    }
+    paintSpectrum(ctx, main, edge) {
+        const count = this.bars;
+        if (this.shown.length !== count) {
+            this.step(0);
+        }
+        const slot = this.width / count;
+        const thickness = Math.min(4, Math.max(1.5, slot * 0.5));
+        const middle = this.height / 2;
+        const center = new Path2D();
+        const ends = new Path2D();
+        for (let at = 0; at < count; at++) {
+            const tall = thickness + (this.shown[at] ?? 0) * (this.height - thickness);
+            const path = centered(at, count) ? center : ends;
+            rounded(path, slot * (at + 0.5) - thickness / 2, middle - tall / 2, thickness, tall);
+        }
+        ctx.fillStyle = edge;
+        ctx.fill(ends);
+        ctx.fillStyle = main;
+        ctx.fill(center);
+    }
+    paintWaves(ctx, main, painted, time) {
+        const middle = this.height / 2;
+        const colors = {
+            accent: ink(painted.columnRuleColor),
+            faint: ink(painted.color, FAINT),
+            main,
+        };
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        for (const line of WAVE_LINES) {
+            const reach = Math.max(0, middle - line.width) * this.swing;
+            ctx.beginPath();
+            for (let x = 0; x <= this.width; x += WAVE_STEP) {
+                const y = middle - reach * waveAt(line, x / this.width, time);
+                if (x === 0) {
+                    ctx.moveTo(x, y);
+                }
+                else {
+                    ctx.lineTo(x, y);
+                }
+            }
+            ctx.lineTo(this.width, middle);
+            ctx.lineWidth = line.width;
+            ctx.strokeStyle = colors[line.ink];
+            ctx.stroke();
+        }
+    }
+    paintStill(ctx, main, faint) {
+        const thickness = this.variant === 'waves'
+            ? 2
+            : Math.min(4, Math.max(1.5, (this.width / (this.bars || 1)) * 0.5));
+        const readings = this.readings;
+        const level = this.level > 0 || readings.length === 0
+            ? this.level
+            : Math.max(...readings.map((band, at) => band * envelope(at, readings.length)));
+        const length = stillLength(level, this.width, thickness);
+        const top = (this.height - thickness) / 2;
+        const track = new Path2D();
+        rounded(track, 0, top, this.width, thickness);
+        ctx.fillStyle = faint;
+        ctx.fill(track);
+        const path = new Path2D();
+        rounded(path, (this.width - length) / 2, top, length, thickness);
+        ctx.fillStyle = main;
+        ctx.fill(path);
+    }
+};
+__decorate([
+    property()
+], HelixVoiceLevel.prototype, "bands", void 0);
+__decorate([
+    words,
+    property({ attribute: 'fallback-label' })
+], HelixVoiceLevel.prototype, "fallbackLabel", void 0);
+__decorate([
+    property()
+], HelixVoiceLevel.prototype, "label", void 0);
+__decorate([
+    property({ converter: numberConverter('level', 0) })
+], HelixVoiceLevel.prototype, "level", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixVoiceLevel.prototype, "still", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixVoiceLevel.prototype, "variant", void 0);
+HelixVoiceLevel = __decorate([
+    customElement('helix-voice-level')
+], HelixVoiceLevel);
+export { HelixVoiceLevel };
+const rounded = (path, x, y, width, height) => {
+    if (typeof path.roundRect === 'function') {
+        path.roundRect(x, y, width, height, Math.min(width, height) / 2);
+    }
+    else {
+        path.rect(x, y, width, height);
+    }
+};