three-text 0.3.4 → 0.3.5

package/README.md

@@ -637,6 +637,8 @@ const text = await Text.create({
 
 Text matching occurs after layout processing, so patterns like "connection" will be found even if hyphenation splits them across lines. The `coloredRanges` property on the returned object contains the resolved color assignments for programmatic access to the colored parts of the geometry
 
+When using selective coloring with `byText` or `byCharRange`, colored glyphs are kept geometrically separate from adjacent non-colored glyphs. This ensures accurate vertex coloring while still allowing overlap removal between glyphs of the same color status, e.g. two adjacent colored letters that overlap will still be properly merged
+
 ## API reference
 
 The library's full TypeScript definitions are the most complete source of truth for the API. The core data structures and configuration options can be found in `src/core/types.ts`

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /*!
- * three-text v0.3.4
+ * three-text v0.3.5
  * Copyright (C) 2025 Countertype LLC
  * 
  * This program is free software: you can redistribute it and/or modify
@@ -3902,15 +3902,20 @@ class GlyphGeometryBuilder {
                     boundaryGroups = [[0]];
                 }
                 else {
-                    // Check clustering cache (same text + glyph IDs = same overlap groups)
+                    // Check clustering cache (same text + glyph IDs + positions = same overlap groups)
                     // Key must be font-specific; glyph ids/bounds differ between fonts
+                    // Positions must match since overlap detection depends on relative glyph placement
                     const cacheKey = `${this.cacheKeyPrefix}_${cluster.text}`;
                     const cached = this.clusteringCache.get(cacheKey);
                     let isValid = false;
                     if (cached && cached.glyphIds.length === cluster.glyphs.length) {
                         isValid = true;
                         for (let i = 0; i < cluster.glyphs.length; i++) {
-                            if (cached.glyphIds[i] !== cluster.glyphs[i].g) {
+                            const glyph = cluster.glyphs[i];
+                            const cachedPos = cached.positions[i];
+                            if (cached.glyphIds[i] !== glyph.g ||
+                                cachedPos.x !== (glyph.x ?? 0) ||
+                                cachedPos.y !== (glyph.y ?? 0)) {
                                 isValid = false;
                                 break;
                             }
@@ -3924,17 +3929,52 @@ class GlyphGeometryBuilder {
                         boundaryGroups = this.clusterer.cluster(clusterGlyphContours, relativePositions);
                         this.clusteringCache.set(cacheKey, {
                             glyphIds: cluster.glyphs.map((g) => g.g),
+                            positions: cluster.glyphs.map((g) => ({
+                                x: g.x ?? 0,
+                                y: g.y ?? 0
+                            })),
                             groups: boundaryGroups
                         });
                     }
                 }
-                const clusterHasColoredGlyphs = coloredTextIndices &&
-                    cluster.glyphs.some((g) => coloredTextIndices.has(g.absoluteTextIndex));
-                // Use glyph-level caching when separateGlyphs is set or when cluster contains colored text
-                const forceSeparate = separateGlyphs || clusterHasColoredGlyphs;
+                // Only force separate tessellation when explicitly requested via separateGlyphs
+                const forceSeparate = separateGlyphs;
+                // Split boundary groups so colored and non-colored glyphs don't merge together
+                // This preserves overlap removal within each color class while keeping
+                // geometry separate for accurate vertex coloring
+                let finalGroups = boundaryGroups;
+                if (coloredTextIndices && coloredTextIndices.size > 0) {
+                    finalGroups = [];
+                    for (const group of boundaryGroups) {
+                        if (group.length <= 1) {
+                            finalGroups.push(group);
+                        }
+                        else {
+                            // Split group into colored and non-colored sub-groups
+                            const coloredIndices = [];
+                            const nonColoredIndices = [];
+                            for (const idx of group) {
+                                const glyph = cluster.glyphs[idx];
+                                if (coloredTextIndices.has(glyph.absoluteTextIndex)) {
+                                    coloredIndices.push(idx);
+                                }
+                                else {
+                                    nonColoredIndices.push(idx);
+                                }
+                            }
+                            // Add non-empty sub-groups
+                            if (coloredIndices.length > 0) {
+                                finalGroups.push(coloredIndices);
+                            }
+                            if (nonColoredIndices.length > 0) {
+                                finalGroups.push(nonColoredIndices);
+                            }
+                        }
+                    }
+                }
                 // Iterate over the geometric groups identified by BoundaryClusterer
                 // logical groups (words) split into geometric sub-groups
-                for (const groupIndices of boundaryGroups) {
+                for (const groupIndices of finalGroups) {
                     const isOverlappingGroup = groupIndices.length > 1;
                     const shouldCluster = isOverlappingGroup && !forceSeparate;
                     if (shouldCluster) {
@@ -5595,6 +5635,7 @@ class Text {
                                 else {
                                     lineGroups.set(glyph.lineIndex, [glyph]);
                                 }
+                                // Color vertices owned by this glyph
                                 for (let v = 0; v < glyph.vertexCount; v++) {
                                     const vertexIndex = (glyph.vertexStart + v) * 3;
                                     if (vertexIndex >= 0 && vertexIndex < colors.length) {
@@ -5636,6 +5677,7 @@ class Text {
                                 else {
                                     lineGroups.set(glyph.lineIndex, [glyph]);
                                 }
+                                // Color vertices owned by this glyph
                                 for (let v = 0; v < glyph.vertexCount; v++) {
                                     const vertexIndex = (glyph.vertexStart + v) * 3;
                                     if (vertexIndex >= 0 && vertexIndex < colors.length) {

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
- * three-text v0.3.4
+ * three-text v0.3.5
  * Copyright (C) 2025 Countertype LLC
  * 
  * This program is free software: you can redistribute it and/or modify
@@ -3899,15 +3899,20 @@ class GlyphGeometryBuilder {
                     boundaryGroups = [[0]];
                 }
                 else {
-                    // Check clustering cache (same text + glyph IDs = same overlap groups)
+                    // Check clustering cache (same text + glyph IDs + positions = same overlap groups)
                     // Key must be font-specific; glyph ids/bounds differ between fonts
+                    // Positions must match since overlap detection depends on relative glyph placement
                     const cacheKey = `${this.cacheKeyPrefix}_${cluster.text}`;
                     const cached = this.clusteringCache.get(cacheKey);
                     let isValid = false;
                     if (cached && cached.glyphIds.length === cluster.glyphs.length) {
                         isValid = true;
                         for (let i = 0; i < cluster.glyphs.length; i++) {
-                            if (cached.glyphIds[i] !== cluster.glyphs[i].g) {
+                            const glyph = cluster.glyphs[i];
+                            const cachedPos = cached.positions[i];
+                            if (cached.glyphIds[i] !== glyph.g ||
+                                cachedPos.x !== (glyph.x ?? 0) ||
+                                cachedPos.y !== (glyph.y ?? 0)) {
                                 isValid = false;
                                 break;
                             }
@@ -3921,17 +3926,52 @@ class GlyphGeometryBuilder {
                         boundaryGroups = this.clusterer.cluster(clusterGlyphContours, relativePositions);
                         this.clusteringCache.set(cacheKey, {
                             glyphIds: cluster.glyphs.map((g) => g.g),
+                            positions: cluster.glyphs.map((g) => ({
+                                x: g.x ?? 0,
+                                y: g.y ?? 0
+                            })),
                             groups: boundaryGroups
                         });
                     }
                 }
-                const clusterHasColoredGlyphs = coloredTextIndices &&
-                    cluster.glyphs.some((g) => coloredTextIndices.has(g.absoluteTextIndex));
-                // Use glyph-level caching when separateGlyphs is set or when cluster contains colored text
-                const forceSeparate = separateGlyphs || clusterHasColoredGlyphs;
+                // Only force separate tessellation when explicitly requested via separateGlyphs
+                const forceSeparate = separateGlyphs;
+                // Split boundary groups so colored and non-colored glyphs don't merge together
+                // This preserves overlap removal within each color class while keeping
+                // geometry separate for accurate vertex coloring
+                let finalGroups = boundaryGroups;
+                if (coloredTextIndices && coloredTextIndices.size > 0) {
+                    finalGroups = [];
+                    for (const group of boundaryGroups) {
+                        if (group.length <= 1) {
+                            finalGroups.push(group);
+                        }
+                        else {
+                            // Split group into colored and non-colored sub-groups
+                            const coloredIndices = [];
+                            const nonColoredIndices = [];
+                            for (const idx of group) {
+                                const glyph = cluster.glyphs[idx];
+                                if (coloredTextIndices.has(glyph.absoluteTextIndex)) {
+                                    coloredIndices.push(idx);
+                                }
+                                else {
+                                    nonColoredIndices.push(idx);
+                                }
+                            }
+                            // Add non-empty sub-groups
+                            if (coloredIndices.length > 0) {
+                                finalGroups.push(coloredIndices);
+                            }
+                            if (nonColoredIndices.length > 0) {
+                                finalGroups.push(nonColoredIndices);
+                            }
+                        }
+                    }
+                }
                 // Iterate over the geometric groups identified by BoundaryClusterer
                 // logical groups (words) split into geometric sub-groups
-                for (const groupIndices of boundaryGroups) {
+                for (const groupIndices of finalGroups) {
                     const isOverlappingGroup = groupIndices.length > 1;
                     const shouldCluster = isOverlappingGroup && !forceSeparate;
                     if (shouldCluster) {
@@ -5592,6 +5632,7 @@ class Text {
                                 else {
                                     lineGroups.set(glyph.lineIndex, [glyph]);
                                 }
+                                // Color vertices owned by this glyph
                                 for (let v = 0; v < glyph.vertexCount; v++) {
                                     const vertexIndex = (glyph.vertexStart + v) * 3;
                                     if (vertexIndex >= 0 && vertexIndex < colors.length) {
@@ -5633,6 +5674,7 @@ class Text {
                                 else {
                                     lineGroups.set(glyph.lineIndex, [glyph]);
                                 }
+                                // Color vertices owned by this glyph
                                 for (let v = 0; v < glyph.vertexCount; v++) {
                                     const vertexIndex = (glyph.vertexStart + v) * 3;
                                     if (vertexIndex >= 0 && vertexIndex < colors.length) {