@braccato/core 1.16.0 → 1.16.2

package/dist/engine.js

@@ -18,7 +18,7 @@
 // that never meet. `themeSettings.ts` holds the third thing under that rule.
 import { ANIMATING_CLASS, CREDITS_CLASS, CURRENT_LYRICS_CLASS, FOOTER_CLASS, LINE_CLASS, PAUSED_CLASS, ROMANIZED_LYRICS_CLASS, RTL_CLASS, TRANSLATED_LYRICS_CLASS, USER_SCROLLING_CLASS, WORD_STATE_ACTIVE, WORD_STATE_ATTR, WORD_STATE_PAST, WORD_STATE_UPCOMING, } from "./constants.js";
 import { INSTRUMENTAL_WAVE_PATH_HIGH, INSTRUMENTAL_WAVE_PATH_LOW } from "./instrumental.js";
-import { layoutStage, planStage, queuedStageY, } from "./stage.js";
+import { layoutStage, planStage, queuedStageY, stageTextSpan, } from "./stage.js";
 import { registerThemeSetting } from "./themeSettings.js";
 import { clamp, getRelativeLayoutBounds, positiveModulo, roundedMs, toMs } from "./util.js";
 const NO_LYRICS_ELEMENT_LOG = "No lyrics element found on the page, skipping lyrics injection";
@@ -1976,26 +1976,63 @@ function stageElements(engine) {
     }
     return { elements, items };
 }
-function originXOf(engine, element) {
-    const align = engine.window.getComputedStyle(element).textAlign;
+function originXOf(align) {
     if (align === "center")
         return 0.5;
     if (align === "right" || align === "end")
         return 1;
     return 0;
 }
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+function contentWidthOf(element, style) {
+    return (element.clientWidth - (Number.parseFloat(style.paddingLeft) || 0) - (Number.parseFloat(style.paddingRight) || 0));
+}
+// A block that fills its parent is looked inside; inline boxes and shrunk blocks (the romanization pill) count whole.
+function collectContentRects(engine, range, node, contentWidth, rects) {
+    for (const child of node.childNodes) {
+        if (child.nodeType === TEXT_NODE) {
+            range.selectNodeContents(child);
+            rects.push(...range.getClientRects());
+            continue;
+        }
+        if (child.nodeType !== ELEMENT_NODE)
+            continue;
+        const element = child;
+        const style = engine.window.getComputedStyle(element);
+        if (style.display === "none")
+            continue;
+        if (style.display === "contents") {
+            collectContentRects(engine, range, element, contentWidth, rects);
+        }
+        else if (style.display.startsWith("inline")) {
+            rects.push(...element.getClientRects());
+        }
+        else if (element.offsetWidth < contentWidth - 1) {
+            rects.push(element.getBoundingClientRect());
+        }
+        else {
+            collectContentRects(engine, range, element, contentWidthOf(element, style), rects);
+        }
+    }
+    return rects;
+}
 export function measureStage(engine) {
     engine.stageMetrics.clear();
     const container = engine.lyricsContainer;
     if (!container)
         return;
     engine.stageFontSize = Number.parseFloat(engine.window.getComputedStyle(container).fontSize) || 16;
+    const range = engine.document.createRange();
     for (const element of stageElements(engine).elements) {
+        const style = engine.window.getComputedStyle(element);
+        const originX = originXOf(style.textAlign);
+        const span = stageTextSpan(element.offsetLeft, element.offsetWidth, element.getBoundingClientRect(), collectContentRects(engine, range, element, contentWidthOf(element, style), []), { left: Number.parseFloat(style.paddingLeft) || 0, right: Number.parseFloat(style.paddingRight) || 0 }, originX);
         engine.stageMetrics.set(element, {
             height: element.offsetHeight,
-            left: element.offsetLeft,
-            width: element.offsetWidth,
-            originX: originXOf(engine, element),
+            left: span.left,
+            width: span.width,
+            originX,
         });
     }
     engine.stageKey = "";

package/dist/stage.d.ts

@@ -35,6 +35,21 @@ export interface StageBox {
     width: number;
     height: number;
 }
+export interface StageSpanRect {
+    x: number;
+    width: number;
+}
+/**
+ * A wrapped `fit-content` box fills the width offered, so the plate follows the text instead. The rects
+ * miss printed `::before` labels, so the span is widened to what the alignment guarantees.
+ */
+export declare function stageTextSpan(offsetLeft: number, offsetWidth: number, box: StageSpanRect, textRects: Iterable<StageSpanRect>, padding: {
+    left: number;
+    right: number;
+}, originX: number): {
+    left: number;
+    width: number;
+};
 /** Where a line waits below the floor, and where it rises from as it enters. */
 export declare function queuedStageY(stageHeight: number, height: number, gap: number): number;
 export declare function layoutStage(roles: readonly StageRole[], items: readonly StageItem[], metrics: readonly StageMetrics[], previousY: readonly (number | null)[], geometry: StageGeometry): {

package/dist/stage.js

@@ -36,6 +36,40 @@ export function planStage(items, timeS) {
     }
     return roles;
 }
+/**
+ * A wrapped `fit-content` box fills the width offered, so the plate follows the text instead. The rects
+ * miss printed `::before` labels, so the span is widened to what the alignment guarantees.
+ */
+export function stageTextSpan(offsetLeft, offsetWidth, box, textRects, padding, originX) {
+    const whole = { left: offsetLeft, width: offsetWidth };
+    if (box.width <= 0 || offsetWidth <= 0 || originX === 1)
+        return whole;
+    const scale = box.width / offsetWidth;
+    let start = Number.POSITIVE_INFINITY;
+    let end = Number.NEGATIVE_INFINITY;
+    for (const rect of textRects) {
+        if (rect.width <= 0)
+            continue;
+        start = Math.min(start, (rect.x - box.x) / scale);
+        end = Math.max(end, (rect.x + rect.width - box.x) / scale);
+    }
+    if (start > end)
+        return whole;
+    const contentLeft = padding.left;
+    const contentRight = offsetWidth - padding.right;
+    if (originX === 0) {
+        start = contentLeft;
+    }
+    else {
+        const centre = (contentLeft + contentRight) / 2;
+        const half = Math.max(end - centre, centre - start);
+        start = centre - half;
+        end = centre + half;
+    }
+    const left = Math.max(0, start - padding.left);
+    const right = Math.min(offsetWidth, end + padding.right);
+    return { left: offsetLeft + left, width: right - left };
+}
 function unionBox(box, next) {
     if (box === null)
         return next;

package/dist/styles/stage.css

@@ -40,6 +40,12 @@
 	transform-origin: center center !important;
 }
 
+/* The romanization pill is a fit-content block, so text-align cannot place it. */
+.blyrics-container[data-layout="stage"] > .blyrics--line > .blyrics--romanized {
+	margin-right: auto;
+	margin-left: auto;
+}
+
 /* A duet puts each singer on their own side, mirrored for right-to-left lines; everyone together
    stays centred. */
 .blyrics-container[data-layout="stage"][data-stage-duet] > .blyrics--line:not([data-agent="v2"], [data-agent="v3"], [data-agent="v1000"]):not([data-direction="rtl"]),
@@ -49,9 +55,19 @@
 	transform-origin: left center !important;
 }
 
+.blyrics-container[data-layout="stage"][data-stage-duet] > .blyrics--line:not([data-agent="v2"], [data-agent="v3"], [data-agent="v1000"]):not([data-direction="rtl"]) > .blyrics--romanized,
+.blyrics-container[data-layout="stage"][data-stage-duet] > .blyrics--line:is([data-agent="v2"], [data-agent="v3"])[data-direction="rtl"] > .blyrics--romanized {
+	margin-left: 0;
+}
+
 .blyrics-container[data-layout="stage"][data-stage-duet] > .blyrics--line:is([data-agent="v2"], [data-agent="v3"]):not([data-direction="rtl"]),
 .blyrics-container[data-layout="stage"][data-stage-duet] > .blyrics--line:not([data-agent="v2"], [data-agent="v3"], [data-agent="v1000"])[data-direction="rtl"] {
 	margin: 0 0 0 auto !important;
 	text-align: right;
 	transform-origin: right center !important;
 }
+
+.blyrics-container[data-layout="stage"][data-stage-duet] > .blyrics--line:is([data-agent="v2"], [data-agent="v3"]):not([data-direction="rtl"]) > .blyrics--romanized,
+.blyrics-container[data-layout="stage"][data-stage-duet] > .blyrics--line:not([data-agent="v2"], [data-agent="v3"], [data-agent="v1000"])[data-direction="rtl"] > .blyrics--romanized {
+	margin-right: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braccato/core",
-  "version": "1.16.0",
+  "version": "1.16.2",
   "description": "Synchronized lyrics renderer with word-by-word animations",
   "type": "module",
   "license": "MIT",