three-text 0.2.11 → 0.2.12

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /*!
- * three-text v0.2.11
+ * three-text v0.2.12
  * Copyright (C) 2025 Countertype LLC
  * 
  * This program is free software: you can redistribute it and/or modify
@@ -3772,7 +3772,7 @@ class GlyphGeometryBuilder {
         this.fontId = fontId;
     }
     // Build instanced geometry from glyph contours
-    buildInstancedGeometry(clustersByLine, depth, removeOverlaps, isCFF, separateGlyphs = false) {
+    buildInstancedGeometry(clustersByLine, depth, removeOverlaps, isCFF, separateGlyphs = false, coloredTextIndices) {
         perfLogger.start('GlyphGeometryBuilder.buildInstancedGeometry', {
             lineCount: clustersByLine.length,
             wordCount: clustersByLine.flat().length,
@@ -3798,7 +3798,13 @@ class GlyphGeometryBuilder {
                 // Step 2: Check for overlaps within the cluster
                 const relativePositions = cluster.glyphs.map((g) => new Vec3(g.x, g.y, 0));
                 const boundaryGroups = this.clusterer.cluster(clusterGlyphContours, relativePositions);
-                const hasOverlaps = separateGlyphs
+                const clusterHasColoredGlyphs = coloredTextIndices &&
+                    cluster.glyphs.some((g) => coloredTextIndices.has(g.absoluteTextIndex));
+                // Force glyph-level caching if:
+                // - separateGlyphs flag is set (for shader attributes), OR
+                // - cluster contains selectively colored text (needs separate vertex ranges per glyph)
+                const forceSeparate = separateGlyphs || clusterHasColoredGlyphs;
+                const hasOverlaps = forceSeparate
                     ? false
                     : boundaryGroups.some((group) => group.length > 1);
                 if (hasOverlaps) {
@@ -4008,30 +4014,14 @@ class TextShaper {
         perfLogger.start('TextShaper.shapeLines', {
             lineCount: lineInfos.length
         });
-        // Calculate color boundaries once for the entire text before line processing
-        const colorBoundaries = new Set();
-        if (color &&
-            typeof color === 'object' &&
-            'byText' in color &&
-            color.byText &&
-            originalText) {
-            for (const textToColor of Object.keys(color.byText)) {
-                let index = 0;
-                while ((index = originalText.indexOf(textToColor, index)) !== -1) {
-                    colorBoundaries.add(index);
-                    colorBoundaries.add(index + textToColor.length);
-                    index += textToColor.length;
-                }
-            }
-        }
         const clustersByLine = [];
         lineInfos.forEach((lineInfo, lineIndex) => {
-            const clusters = this.shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction, colorBoundaries);
+            const clusters = this.shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction);
             clustersByLine.push(clusters);
         });
         return clustersByLine;
     }
-    shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction, colorBoundaries) {
+    shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction) {
         const buffer = this.loadedFont.hb.createBuffer();
         if (direction === 'rtl') {
             buffer.setDirection('rtl');
@@ -4064,8 +4054,9 @@ class TextShaper {
                 glyph.absoluteTextIndex = lineInfo.originalStart + glyph.cl;
             }
             glyph.lineIndex = lineIndex;
-            const isBoundary = colorBoundaries.has(glyph.absoluteTextIndex);
-            if (isWhitespace || isBoundary) {
+            // Cluster boundaries are based on whitespace only.
+            // Coloring is applied later via vertex colors and must never affect shaping/kerning.
+            if (isWhitespace) {
                 if (currentClusterGlyphs.length > 0) {
                     clusters.push({
                         text: currentClusterText,
@@ -5252,7 +5243,35 @@ class Text {
             // Allow manual override via options.removeOverlaps
             const shouldRemoveOverlaps = options.removeOverlaps ?? this.loadedFont.isVariable ?? false;
             const clustersByLine = this.textShaper.shapeLines(layoutData.lines, layoutData.scaledLineHeight, layoutData.letterSpacing, layoutData.align, layoutData.direction, options.color, options.text);
-            const shapedResult = this.geometryBuilder.buildInstancedGeometry(clustersByLine, layoutData.depth, shouldRemoveOverlaps, this.loadedFont.metrics.isCFF, options.separateGlyphsWithAttributes || false);
+            // Pre-compute which character indices will be colored. This allows geometry building
+            // to selectively use glyph-level caching (separate vertices) only for clusters containing
+            // colored text, while non-colored clusters can still use fast cluster-level merging
+            let coloredTextIndices;
+            if (options.color && typeof options.color === 'object' && !Array.isArray(options.color)) {
+                if (options.color.byText || options.color.byCharRange) {
+                    // Build the set manually since glyphs don't exist yet
+                    coloredTextIndices = new Set();
+                    if (options.color.byText) {
+                        for (const pattern of Object.keys(options.color.byText)) {
+                            let index = 0;
+                            while ((index = options.text.indexOf(pattern, index)) !== -1) {
+                                for (let i = index; i < index + pattern.length; i++) {
+                                    coloredTextIndices.add(i);
+                                }
+                                index += pattern.length;
+                            }
+                        }
+                    }
+                    if (options.color.byCharRange) {
+                        for (const range of options.color.byCharRange) {
+                            for (let i = range.start; i < range.end; i++) {
+                                coloredTextIndices.add(i);
+                            }
+                        }
+                    }
+                }
+            }
+            const shapedResult = this.geometryBuilder.buildInstancedGeometry(clustersByLine, layoutData.depth, shouldRemoveOverlaps, this.loadedFont.metrics.isCFF, options.separateGlyphsWithAttributes || false, coloredTextIndices);
             const cacheStats = this.geometryBuilder.getCacheStats();
             const result = this.finalizeGeometry(shapedResult.vertices, shapedResult.normals, shapedResult.indices, shapedResult.glyphInfos, shapedResult.planeBounds, options, cacheStats, options.text);
             if (options.separateGlyphsWithAttributes) {

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * three-text v0.2.11
+ * three-text v0.2.12
  * Copyright (C) 2025 Countertype LLC
  * 
  * This program is free software: you can redistribute it and/or modify
@@ -3769,7 +3769,7 @@ class GlyphGeometryBuilder {
         this.fontId = fontId;
     }
     // Build instanced geometry from glyph contours
-    buildInstancedGeometry(clustersByLine, depth, removeOverlaps, isCFF, separateGlyphs = false) {
+    buildInstancedGeometry(clustersByLine, depth, removeOverlaps, isCFF, separateGlyphs = false, coloredTextIndices) {
         perfLogger.start('GlyphGeometryBuilder.buildInstancedGeometry', {
             lineCount: clustersByLine.length,
             wordCount: clustersByLine.flat().length,
@@ -3795,7 +3795,13 @@ class GlyphGeometryBuilder {
                 // Step 2: Check for overlaps within the cluster
                 const relativePositions = cluster.glyphs.map((g) => new Vec3(g.x, g.y, 0));
                 const boundaryGroups = this.clusterer.cluster(clusterGlyphContours, relativePositions);
-                const hasOverlaps = separateGlyphs
+                const clusterHasColoredGlyphs = coloredTextIndices &&
+                    cluster.glyphs.some((g) => coloredTextIndices.has(g.absoluteTextIndex));
+                // Force glyph-level caching if:
+                // - separateGlyphs flag is set (for shader attributes), OR
+                // - cluster contains selectively colored text (needs separate vertex ranges per glyph)
+                const forceSeparate = separateGlyphs || clusterHasColoredGlyphs;
+                const hasOverlaps = forceSeparate
                     ? false
                     : boundaryGroups.some((group) => group.length > 1);
                 if (hasOverlaps) {
@@ -4005,30 +4011,14 @@ class TextShaper {
         perfLogger.start('TextShaper.shapeLines', {
             lineCount: lineInfos.length
         });
-        // Calculate color boundaries once for the entire text before line processing
-        const colorBoundaries = new Set();
-        if (color &&
-            typeof color === 'object' &&
-            'byText' in color &&
-            color.byText &&
-            originalText) {
-            for (const textToColor of Object.keys(color.byText)) {
-                let index = 0;
-                while ((index = originalText.indexOf(textToColor, index)) !== -1) {
-                    colorBoundaries.add(index);
-                    colorBoundaries.add(index + textToColor.length);
-                    index += textToColor.length;
-                }
-            }
-        }
         const clustersByLine = [];
         lineInfos.forEach((lineInfo, lineIndex) => {
-            const clusters = this.shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction, colorBoundaries);
+            const clusters = this.shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction);
             clustersByLine.push(clusters);
         });
         return clustersByLine;
     }
-    shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction, colorBoundaries) {
+    shapeLineIntoClusters(lineInfo, lineIndex, scaledLineHeight, letterSpacing, align, direction) {
         const buffer = this.loadedFont.hb.createBuffer();
         if (direction === 'rtl') {
             buffer.setDirection('rtl');
@@ -4061,8 +4051,9 @@ class TextShaper {
                 glyph.absoluteTextIndex = lineInfo.originalStart + glyph.cl;
             }
             glyph.lineIndex = lineIndex;
-            const isBoundary = colorBoundaries.has(glyph.absoluteTextIndex);
-            if (isWhitespace || isBoundary) {
+            // Cluster boundaries are based on whitespace only.
+            // Coloring is applied later via vertex colors and must never affect shaping/kerning.
+            if (isWhitespace) {
                 if (currentClusterGlyphs.length > 0) {
                     clusters.push({
                         text: currentClusterText,
@@ -5249,7 +5240,35 @@ class Text {
             // Allow manual override via options.removeOverlaps
             const shouldRemoveOverlaps = options.removeOverlaps ?? this.loadedFont.isVariable ?? false;
             const clustersByLine = this.textShaper.shapeLines(layoutData.lines, layoutData.scaledLineHeight, layoutData.letterSpacing, layoutData.align, layoutData.direction, options.color, options.text);
-            const shapedResult = this.geometryBuilder.buildInstancedGeometry(clustersByLine, layoutData.depth, shouldRemoveOverlaps, this.loadedFont.metrics.isCFF, options.separateGlyphsWithAttributes || false);
+            // Pre-compute which character indices will be colored. This allows geometry building
+            // to selectively use glyph-level caching (separate vertices) only for clusters containing
+            // colored text, while non-colored clusters can still use fast cluster-level merging
+            let coloredTextIndices;
+            if (options.color && typeof options.color === 'object' && !Array.isArray(options.color)) {
+                if (options.color.byText || options.color.byCharRange) {
+                    // Build the set manually since glyphs don't exist yet
+                    coloredTextIndices = new Set();
+                    if (options.color.byText) {
+                        for (const pattern of Object.keys(options.color.byText)) {
+                            let index = 0;
+                            while ((index = options.text.indexOf(pattern, index)) !== -1) {
+                                for (let i = index; i < index + pattern.length; i++) {
+                                    coloredTextIndices.add(i);
+                                }
+                                index += pattern.length;
+                            }
+                        }
+                    }
+                    if (options.color.byCharRange) {
+                        for (const range of options.color.byCharRange) {
+                            for (let i = range.start; i < range.end; i++) {
+                                coloredTextIndices.add(i);
+                            }
+                        }
+                    }
+                }
+            }
+            const shapedResult = this.geometryBuilder.buildInstancedGeometry(clustersByLine, layoutData.depth, shouldRemoveOverlaps, this.loadedFont.metrics.isCFF, options.separateGlyphsWithAttributes || false, coloredTextIndices);
             const cacheStats = this.geometryBuilder.getCacheStats();
             const result = this.finalizeGeometry(shapedResult.vertices, shapedResult.normals, shapedResult.indices, shapedResult.glyphInfos, shapedResult.planeBounds, options, cacheStats, options.text);
             if (options.separateGlyphsWithAttributes) {