ts-maps 0.3.4 → 0.3.5

package/dist/core-map/layer/tile/VectorTileMapLayer.d.ts

@@ -86,6 +86,7 @@ export declare interface VectorTileLayoutProperties {
   'text-font'?: string | string[]
   'text-italic'?: boolean
   'text-bold'?: boolean
+  'text-letter-spacing'?: number | unknown
   'icon-image'?: string | unknown
   'icon-size'?: number
   'icon-rotate'?: number

package/dist/core-map/symbols/GlyphAtlas.d.ts

@@ -1,10 +1,3 @@
-// GlyphAtlas — rasterises font glyphs to a single backing canvas and packs
-// them via a simple shelf-packer. Each glyph gets an approximate signed
-// distance field generated by a cheap 2-pass Chamfer 3-4 scan so callers can
-// resample the atlas at any target size with tolerably smooth edges.
-//
-// Zero runtime deps. Designed to live alongside Canvas2D rendering today and
-// graduate to WebGL sampling later without changing the public API.
 export declare interface GlyphMetrics {
   codePoint: number
   x: number
@@ -26,8 +19,8 @@ export declare class GlyphAtlas {
   constructor(opts?: GlyphAtlasOptions);
   getOrAddGlyph(codePoint: number, style?: { italic?: boolean, bold?: boolean }): GlyphMetrics;
   measure(text: string, style?: { italic?: boolean, bold?: boolean, family?: string }): { width: number, height: number };
-  advances(text: string, size: number, style?: { italic?: boolean, bold?: boolean, family?: string }): Array<{ char: string, advance: number }>;
-  measureText(text: string, size: number, style?: { italic?: boolean, bold?: boolean, family?: string }): { width: number, height: number, ascent: number, descent: number };
+  advances(text: string, size: number, style?: { italic?: boolean, bold?: boolean, family?: string, letterSpacing?: number }): Array<{ char: string, advance: number }>;
+  measureText(text: string, size: number, style?: { italic?: boolean, bold?: boolean, family?: string, letterSpacing?: number }): { width: number, height: number, ascent: number, descent: number };
   fontString(size: number, style?: { italic?: boolean, bold?: boolean, family?: string }): string;
   resolveFont(textFont: string | string[] | undefined): { family: string, bold: boolean, italic: boolean };
   drawText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, options: {
@@ -38,6 +31,7 @@ export declare class GlyphAtlas {
       italic?: boolean
       bold?: boolean
       family?: string
+      letterSpacing?: number
     }): void;
   _buildSDF(imageData: ImageData): ImageData;
 }

package/dist/core-map/symbols/index.js

@@ -168,6 +168,23 @@ var exports_GlyphAtlas = {};
 __export(exports_GlyphAtlas, {
   GlyphAtlas: () => GlyphAtlas
 });
+function applyTracking(ctx, spacing) {
+  if (!spacing)
+    return true;
+  if (!("letterSpacing" in ctx))
+    return false;
+  const tracked = ctx;
+  tracked.letterSpacing = `${spacing}px`;
+  return true;
+}
+function trackingWidth(text, spacing) {
+  if (!spacing)
+    return 0;
+  let count = 0;
+  for (const _ of text)
+    count++;
+  return count * spacing;
+}
 function styleKey(k) {
   if (!k)
     return "r";
@@ -230,8 +247,9 @@ class GlyphAtlas {
     if (ctx) {
       ctx.save();
       ctx.font = this.fontString(size, style);
+      const tracking = style?.letterSpacing ?? 0;
       for (const ch of text)
-        out.push({ char: ch, advance: ctx.measureText(ch).width });
+        out.push({ char: ch, advance: ctx.measureText(ch).width + tracking });
       ctx.restore();
       return out;
     }
@@ -249,15 +267,18 @@ class GlyphAtlas {
       const atlas = this.measure(text, style);
       const scale = size / this._fontSize;
       const height = atlas.height * scale;
-      return { width: atlas.width * scale, height, ascent: height * 0.8, descent: height * 0.2 };
+      const tracking = trackingWidth(text, style?.letterSpacing);
+      return { width: atlas.width * scale + tracking, height, ascent: height * 0.8, descent: height * 0.2 };
     }
     ctx.save();
     ctx.font = this.fontString(size, style);
+    const spaced = applyTracking(ctx, style?.letterSpacing);
     const m = ctx.measureText(text);
+    const width = spaced ? m.width : m.width + trackingWidth(text, style?.letterSpacing);
     ctx.restore();
     const ascent = m.fontBoundingBoxAscent || m.actualBoundingBoxAscent || size * 0.8;
     const descent = m.fontBoundingBoxDescent || m.actualBoundingBoxDescent || size * 0.2;
-    return { width: m.width, height: ascent + descent, ascent, descent };
+    return { width, height: ascent + descent, ascent, descent };
   }
   fontString(size, style) {
     const parts = [];
@@ -312,6 +333,7 @@ class GlyphAtlas {
     const style = { italic: !!options.italic, bold: !!options.bold, family: options.family };
     ctx.save();
     ctx.font = this.fontString(options.size, style);
+    applyTracking(ctx, options.letterSpacing);
     ctx.textAlign = "left";
     ctx.textBaseline = "alphabetic";
     if (options.haloColor && options.haloWidth && options.haloWidth > 0) {

package/dist/index.js

@@ -8319,6 +8319,23 @@ var exports_GlyphAtlas = {};
 __export(exports_GlyphAtlas, {
   GlyphAtlas: () => GlyphAtlas
 });
+function applyTracking(ctx, spacing) {
+  if (!spacing)
+    return true;
+  if (!("letterSpacing" in ctx))
+    return false;
+  const tracked = ctx;
+  tracked.letterSpacing = `${spacing}px`;
+  return true;
+}
+function trackingWidth(text, spacing) {
+  if (!spacing)
+    return 0;
+  let count = 0;
+  for (const _ of text)
+    count++;
+  return count * spacing;
+}
 function styleKey(k) {
   if (!k)
     return "r";
@@ -8381,8 +8398,9 @@ class GlyphAtlas {
     if (ctx) {
       ctx.save();
       ctx.font = this.fontString(size, style);
+      const tracking = style?.letterSpacing ?? 0;
       for (const ch of text)
-        out.push({ char: ch, advance: ctx.measureText(ch).width });
+        out.push({ char: ch, advance: ctx.measureText(ch).width + tracking });
       ctx.restore();
       return out;
     }
@@ -8400,15 +8418,18 @@ class GlyphAtlas {
       const atlas = this.measure(text, style);
       const scale = size / this._fontSize;
       const height = atlas.height * scale;
-      return { width: atlas.width * scale, height, ascent: height * 0.8, descent: height * 0.2 };
+      const tracking = trackingWidth(text, style?.letterSpacing);
+      return { width: atlas.width * scale + tracking, height, ascent: height * 0.8, descent: height * 0.2 };
     }
     ctx.save();
     ctx.font = this.fontString(size, style);
+    const spaced = applyTracking(ctx, style?.letterSpacing);
     const m = ctx.measureText(text);
+    const width = spaced ? m.width : m.width + trackingWidth(text, style?.letterSpacing);
     ctx.restore();
     const ascent = m.fontBoundingBoxAscent || m.actualBoundingBoxAscent || size * 0.8;
     const descent = m.fontBoundingBoxDescent || m.actualBoundingBoxDescent || size * 0.2;
-    return { width: m.width, height: ascent + descent, ascent, descent };
+    return { width, height: ascent + descent, ascent, descent };
   }
   fontString(size, style) {
     const parts = [];
@@ -8463,6 +8484,7 @@ class GlyphAtlas {
     const style = { italic: !!options.italic, bold: !!options.bold, family: options.family };
     ctx.save();
     ctx.font = this.fontString(options.size, style);
+    applyTracking(ctx, options.letterSpacing);
     ctx.textAlign = "left";
     ctx.textBaseline = "alphabetic";
     if (options.haloColor && options.haloWidth && options.haloWidth > 0) {
@@ -11552,8 +11574,9 @@ function drawSymbol(ctx, rings, styleLayer, feature, zoom, featureState, glyphAt
       return !collision.hits({ ...box, priority });
     return collision.tryInsert({ ...box, priority });
   };
-  const textStyle = { italic, bold, family: font.family };
-  const drawOptions = { color: textColor, haloColor, haloWidth, size: textSize, italic, bold, family: font.family };
+  const letterSpacing = (resolveLayoutExpression(layout?.["text-letter-spacing"], zoom, feature, featureState) ?? 0) * textSize;
+  const textStyle = { italic, bold, family: font.family, letterSpacing };
+  const drawOptions = { color: textColor, haloColor, haloWidth, size: textSize, italic, bold, family: font.family, letterSpacing };
   const placeAlongLine = layout?.["symbol-placement"] === "line" || layout?.["symbol-placement"] === "line-center";
   if (placeAlongLine && text && feature.type !== 1) {
     drawLineLabel(ctx, rings, project, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ts-maps",
   "type": "module",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "A modern vector map library.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",