@vectojs/core 1.34.2 → 1.35.1

package/dist/index.js

@@ -6212,7 +6212,7 @@ var Scene = (_class15 = class _Scene {
       return;
     }
     const projection = node.getContentProjection(
-      lineBand ? { minY: lineBand.minY, maxY: lineBand.maxY } : void 0
+      lineBand ? { minY: lineBand.minY, maxY: lineBand.maxY, textOnly: tier === "coarse" } : tier === "coarse" ? { textOnly: true } : void 0
     );
     if (!projection || !projection.text) {
       releaseProjectionEl();
@@ -6316,6 +6316,12 @@ var Scene = (_class15 = class _Scene {
                   runElement.style.verticalAlign = "top";
                   runElement.style.unicodeBidi = "isolate";
                   runElement.dir = "ltr";
+                } else if (run.width !== void 0) {
+                  runElement.style.display = "inline-block";
+                  runElement.style.width = `${run.width}px`;
+                  runElement.style.boxSizing = "border-box";
+                  runElement.style.whiteSpace = "pre";
+                  runElement.style.verticalAlign = "top";
                 }
                 lineElement.appendChild(runElement);
               }
@@ -6324,26 +6330,43 @@ var Scene = (_class15 = class _Scene {
               if (mctx) {
                 mctx.font = lineFont;
                 const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
-                const segments = [...segmenter.segment(line.text)];
-                let runningX = 0;
-                for (let segIdx = 0; segIdx < segments.length; segIdx++) {
-                  const { segment, index: index2 } = segments[segIdx];
-                  const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
-                  const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
-                  const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
-                  const carrierEl = document.createElement("span");
-                  carrierEl.textContent = segment;
-                  carrierEl.style.position = "relative";
-                  carrierEl.style.display = "inline-block";
-                  carrierEl.style.left = `${canvasX - runningX}px`;
-                  carrierEl.style.width = `${canvasWidth}px`;
-                  carrierEl.style.boxSizing = "border-box";
-                  carrierEl.style.lineHeight = `${lineHeight2}px`;
-                  carrierEl.style.whiteSpace = "pre";
-                  carrierEl.style.verticalAlign = "top";
-                  carrierEl.style.unicodeBidi = "isolate";
-                  lineElement.appendChild(carrierEl);
-                  runningX += canvasWidth;
+                if (line.shapedPaint) {
+                  const segments = [...segmenter.segment(line.text)];
+                  let runningX = 0;
+                  for (let segIdx = 0; segIdx < segments.length; segIdx++) {
+                    const { segment, index: index2 } = segments[segIdx];
+                    const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
+                    const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
+                    const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
+                    const carrierEl = document.createElement("span");
+                    carrierEl.textContent = segment;
+                    carrierEl.style.position = "relative";
+                    carrierEl.style.display = "inline-block";
+                    carrierEl.style.left = `${canvasX - runningX}px`;
+                    carrierEl.style.width = `${canvasWidth}px`;
+                    carrierEl.style.boxSizing = "border-box";
+                    carrierEl.style.lineHeight = `${lineHeight2}px`;
+                    carrierEl.style.whiteSpace = "pre";
+                    carrierEl.style.verticalAlign = "top";
+                    carrierEl.style.unicodeBidi = "isolate";
+                    lineElement.appendChild(carrierEl);
+                    runningX += canvasWidth;
+                  }
+                } else {
+                  for (const { segment } of segmenter.segment(line.text)) {
+                    const canvasWidth = mctx.measureText(segment).width;
+                    const carrierEl = document.createElement("span");
+                    carrierEl.textContent = segment;
+                    carrierEl.style.position = "relative";
+                    carrierEl.style.display = "inline-block";
+                    carrierEl.style.width = `${canvasWidth}px`;
+                    carrierEl.style.boxSizing = "border-box";
+                    carrierEl.style.lineHeight = `${lineHeight2}px`;
+                    carrierEl.style.whiteSpace = "pre";
+                    carrierEl.style.verticalAlign = "top";
+                    carrierEl.style.unicodeBidi = "isolate";
+                    lineElement.appendChild(carrierEl);
+                  }
                 }
               } else {
                 lineElement.textContent = line.text;

package/dist/index.mjs

@@ -6211,7 +6211,7 @@ var Scene = class _Scene {
       return;
     }
     const projection = node.getContentProjection(
-      lineBand ? { minY: lineBand.minY, maxY: lineBand.maxY } : void 0
+      lineBand ? { minY: lineBand.minY, maxY: lineBand.maxY, textOnly: tier === "coarse" } : tier === "coarse" ? { textOnly: true } : void 0
     );
     if (!projection || !projection.text) {
       releaseProjectionEl();
@@ -6315,6 +6315,12 @@ var Scene = class _Scene {
                   runElement.style.verticalAlign = "top";
                   runElement.style.unicodeBidi = "isolate";
                   runElement.dir = "ltr";
+                } else if (run.width !== void 0) {
+                  runElement.style.display = "inline-block";
+                  runElement.style.width = `${run.width}px`;
+                  runElement.style.boxSizing = "border-box";
+                  runElement.style.whiteSpace = "pre";
+                  runElement.style.verticalAlign = "top";
                 }
                 lineElement.appendChild(runElement);
               }
@@ -6323,26 +6329,43 @@ var Scene = class _Scene {
               if (mctx) {
                 mctx.font = lineFont;
                 const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
-                const segments = [...segmenter.segment(line.text)];
-                let runningX = 0;
-                for (let segIdx = 0; segIdx < segments.length; segIdx++) {
-                  const { segment, index: index2 } = segments[segIdx];
-                  const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
-                  const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
-                  const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
-                  const carrierEl = document.createElement("span");
-                  carrierEl.textContent = segment;
-                  carrierEl.style.position = "relative";
-                  carrierEl.style.display = "inline-block";
-                  carrierEl.style.left = `${canvasX - runningX}px`;
-                  carrierEl.style.width = `${canvasWidth}px`;
-                  carrierEl.style.boxSizing = "border-box";
-                  carrierEl.style.lineHeight = `${lineHeight2}px`;
-                  carrierEl.style.whiteSpace = "pre";
-                  carrierEl.style.verticalAlign = "top";
-                  carrierEl.style.unicodeBidi = "isolate";
-                  lineElement.appendChild(carrierEl);
-                  runningX += canvasWidth;
+                if (line.shapedPaint) {
+                  const segments = [...segmenter.segment(line.text)];
+                  let runningX = 0;
+                  for (let segIdx = 0; segIdx < segments.length; segIdx++) {
+                    const { segment, index: index2 } = segments[segIdx];
+                    const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
+                    const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
+                    const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
+                    const carrierEl = document.createElement("span");
+                    carrierEl.textContent = segment;
+                    carrierEl.style.position = "relative";
+                    carrierEl.style.display = "inline-block";
+                    carrierEl.style.left = `${canvasX - runningX}px`;
+                    carrierEl.style.width = `${canvasWidth}px`;
+                    carrierEl.style.boxSizing = "border-box";
+                    carrierEl.style.lineHeight = `${lineHeight2}px`;
+                    carrierEl.style.whiteSpace = "pre";
+                    carrierEl.style.verticalAlign = "top";
+                    carrierEl.style.unicodeBidi = "isolate";
+                    lineElement.appendChild(carrierEl);
+                    runningX += canvasWidth;
+                  }
+                } else {
+                  for (const { segment } of segmenter.segment(line.text)) {
+                    const canvasWidth = mctx.measureText(segment).width;
+                    const carrierEl = document.createElement("span");
+                    carrierEl.textContent = segment;
+                    carrierEl.style.position = "relative";
+                    carrierEl.style.display = "inline-block";
+                    carrierEl.style.width = `${canvasWidth}px`;
+                    carrierEl.style.boxSizing = "border-box";
+                    carrierEl.style.lineHeight = `${lineHeight2}px`;
+                    carrierEl.style.whiteSpace = "pre";
+                    carrierEl.style.verticalAlign = "top";
+                    carrierEl.style.unicodeBidi = "isolate";
+                    lineElement.appendChild(carrierEl);
+                  }
                 }
               } else {
                 lineElement.textContent = line.text;

package/dist/tree/Entity.d.ts

@@ -116,6 +116,21 @@ export interface ContentProjectionLine {
      * hit-mapping when DOM order != visual order (PR #146 revert).
      */
     perGraphemeCarriers?: boolean;
+    /**
+     * The canvas painted this line's ink as ONE shaped `fillText(line.text)`, so
+     * the ink includes the browser's kerning and ligatures. Per-grapheme
+     * carriers must then be measured as shaped PREFIX DIFFERENCES of the whole
+     * line — isolated grapheme advances would omit exactly the kerning/ligature
+     * contraction the paint applied, widening the DOM line past the ink.
+     *
+     * Leave unset for per-glyph painters (glyphs placed at summed isolated
+     * advances, e.g. RichText and TextEntity): there the ink is unkerned, and
+     * shaped prefixes would drift the carriers ahead of it by the accumulated
+     * kerning delta instead.
+     *
+     * Only meaningful alongside {@link perGraphemeCarriers}.
+     */
+    shapedPaint?: boolean;
 }
 /**
  * Advice from the {@link Scene} about which part of an entity is worth
@@ -144,6 +159,18 @@ export interface ContentProjectionHint {
      */
     minY?: number;
     maxY?: number;
+    /**
+     * When `true`, the caller only needs {@link ContentProjection.text} — no
+     * `lines`, no `grid`. Entities receiving this should return the full source
+     * text without building per-line or per-glyph structures, which avoids the
+     * O(glyphs) layout walk that the coarse resident tier would discard anyway.
+     *
+     * Entities may ignore this hint and still return `lines`; the caller will
+     * simply not use them. Returning fewer than all lines is **not** safe under
+     * this hint: if `lines` is non-empty, Scene interprets it as the line
+     * window, which must cover the whole text for correctness.
+     */
+    textOnly?: boolean;
 }
 /**
  * Whether a line at `y` of height `height` is worth projecting under `hint`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/core",
-  "version": "1.34.2",
+  "version": "1.35.1",
   "publishConfig": {
     "access": "public"
   },