@cantoo/fontkit 2.0.4 → 2.0.6

package/src/glyph/COLRGlyph.js

@@ -1,9 +1,19 @@
 import Glyph from './Glyph';
 import BBox from './BBox';
 
+/** @typedef {import('../../types/fontkit').CPALColor} CPALColor */
+/** @typedef {import('../../types/fontkit').GlyphLike} GlyphLike */
+/** @typedef {import('../../types/fontkit').PathRenderingContext} PathRenderingContext */
+
 class COLRLayer {
+  /**
+   * @param {GlyphLike | null | undefined} glyph
+   * @param {CPALColor} color
+   */
   constructor(glyph, color) {
+    /** @type {GlyphLike | null | undefined} */
     this.glyph = glyph;
+    /** @type {CPALColor} */
     this.color = color;
   }
 }
@@ -16,16 +26,22 @@ class COLRLayer {
 export default class COLRGlyph extends Glyph {
   type = 'COLR';
 
+  /**
+   * @returns {BBox}
+   */
   _getBBox() {
     let layers = this.layers;
     if (!layers) {
       let g = this._font._getBaseGlyph(this.id);
-      return g ? g.bbox : new BBox(0, 0, 0, 0);
+      return g ? new BBox(g.bbox.minX, g.bbox.minY, g.bbox.maxX, g.bbox.maxY) : new BBox(0, 0, 0, 0);
     }
 
-    let bbox = new BBox;
+    let bbox = new BBox();
     for (let i = 0; i < layers.length; i++) {
       let layer = layers[i];
+      if (!layer.glyph) {
+        continue;
+      }
       let b = layer.glyph.bbox;
       bbox.addPoint(b.minX, b.minY);
       bbox.addPoint(b.maxX, b.maxY);
@@ -37,7 +53,7 @@ export default class COLRGlyph extends Glyph {
   /**
    * Returns an array of objects containing the glyph and color for
    * each layer in the composite color glyph.
-   * @type {object[]}
+   * @type {COLRLayer[] | null}
    */
   get layers() {
     let cpal = this._font.CPAL;
@@ -50,6 +66,7 @@ export default class COLRGlyph extends Glyph {
 
     let low = 0;
     let high = colr.baseGlyphRecord.length - 1;
+    /** @type {import('../../types/fontkit').COLRBaseGlyphRecord | undefined} */
     let baseLayer;
 
     while (low <= high) {
@@ -70,6 +87,7 @@ export default class COLRGlyph extends Glyph {
     // default to normal glyph from glyf or CFF
     if (baseLayer == null) {
       let g = this._font._getBaseGlyph(this.id);
+      /** @type {CPALColor} */
       let color = {
         red: 0,
         green: 0,
@@ -81,10 +99,17 @@ export default class COLRGlyph extends Glyph {
     }
 
     // otherwise, return an array of all the layers
+    /** @type {COLRLayer[]} */
     let layers = [];
     for (let i = baseLayer.firstLayerIndex; i < baseLayer.firstLayerIndex + baseLayer.numLayers; i++) {
       let rec = colr.layerRecords[i];
+      if (!cpal || !rec) {
+        continue;
+      }
       let color = cpal.colorRecords[rec.paletteIndex];
+      if (!color) {
+        continue;
+      }
       let g = this._font._getBaseGlyph(rec.gid);
       layers.push(new COLRLayer(g, color));
     }
@@ -92,14 +117,24 @@ export default class COLRGlyph extends Glyph {
     return layers;
   }
 
+  /**
+   * @param {PathRenderingContext} ctx
+   * @param {number} size
+   * @returns {void}
+   */
   render(ctx, size) {
     let layers = this.layers;
     if (!layers) {
       return;
     }
 
-    for (let {glyph, color} of layers) {
-      ctx.fillColor([color.red, color.green, color.blue], color.alpha / 255 * 100);
+    for (let { glyph, color } of layers) {
+      if (!glyph) {
+        continue;
+      }
+      if (typeof ctx.fillColor === 'function') {
+        ctx.fillColor([color.red, color.green, color.blue], color.alpha / 255 * 100);
+      }
       glyph.render(ctx, size);
     }
 

package/src/glyph/Glyph.js

@@ -1,8 +1,14 @@
 import { cache } from '../decorators';
 import Path from './Path';
-import {isMark} from '../packages/unicode-properties/index.js';
+import { isMark } from '../packages/unicode-properties/index.js';
 import StandardNames from './StandardNames';
 
+/** @typedef {import('../../types/fontkit').FontLike} FontLike */
+/** @typedef {import('../../types/fontkit').GlyphMetrics} GlyphMetrics */
+/** @typedef {import('../../types/fontkit').MetricsTable} MetricsTable */
+/** @typedef {import('../../types/fontkit').PathRenderingContext} PathRenderingContext */
+/** @typedef {import('./BBox').default} BBox */
+
 /**
  * Glyph objects represent a glyph in the font. They have various properties for accessing metrics and
  * the actual vector path the glyph represents, and methods for rendering the glyph to a graphics context.
@@ -12,6 +18,11 @@ import StandardNames from './StandardNames';
  * on the font format, but they all inherit from this class.
  */
 export default class Glyph {
+  /**
+   * @param {number} id
+   * @param {number[]} codePoints
+   * @param {FontLike} font
+   */
   constructor(id, codePoints, font) {
     /**
      * The glyph id in the font
@@ -26,28 +37,50 @@ export default class Glyph {
      * @type {number[]}
      */
     this.codePoints = codePoints;
+
+    /** @type {FontLike} */
     this._font = font;
 
+    /** @type {GlyphMetrics | undefined} */
+    this._metrics = undefined;
+
     // TODO: get this info from GDEF if available
     this.isMark = this.codePoints.length > 0 && this.codePoints.every(isMark);
     this.isLigature = this.codePoints.length > 1;
   }
 
+  /**
+   * @returns {Path}
+   */
   _getPath() {
     return new Path();
   }
 
+  /**
+   * @returns {BBox}
+   */
   _getCBox() {
     return this.path.cbox;
   }
 
+  /**
+   * @returns {BBox}
+   */
   _getBBox() {
     return this.path.bbox;
   }
 
+  /**
+   * @param {MetricsTable} table
+   * @returns {{ advance: number, bearing: number }}
+   */
   _getTableMetrics(table) {
     if (this.id < table.metrics.length) {
-      return table.metrics.get(this.id);
+      let metric = table.metrics.get(this.id);
+      return {
+        advance: metric ? metric.advance : 0,
+        bearing: metric ? metric.bearing : 0
+      };
     }
 
     let metric = table.metrics.get(table.metrics.length - 1);
@@ -59,16 +92,20 @@ export default class Glyph {
     return res;
   }
 
+  /**
+   * @param {BBox} [cbox]
+   * @returns {GlyphMetrics}
+   */
   _getMetrics(cbox) {
     if (this._metrics) { return this._metrics; }
     if (cbox == null) { ({ cbox } = this); }
 
-    let {advance: advanceWidth, bearing: leftBearing} = this._getTableMetrics(this._font.hmtx);
+    let { advance: advanceWidth, bearing: leftBearing } = this._getTableMetrics(this._font.hmtx);
 
     // Vertical metrics: vmtx, else font ascent/descent (respects useTypoMetrics)
     let advanceHeight, topBearing;
     if (this._font.vmtx) {
-      ({advance: advanceHeight, bearing: topBearing} = this._getTableMetrics(this._font.vmtx));
+      ({ advance: advanceHeight, bearing: topBearing } = this._getTableMetrics(this._font.vmtx));
     } else {
       advanceHeight = Math.abs(this._font.ascent - this._font.descent);
       topBearing = this._font.ascent - cbox.maxY;
@@ -78,7 +115,7 @@ export default class Glyph {
       advanceWidth += this._font._variationProcessor.getAdvanceAdjustment(this.id, this._font.HVAR);
     }
 
-    let {width, height} = cbox;
+    let { width, height } = cbox;
     return this._metrics = {
       width,
       height,
@@ -210,10 +247,16 @@ export default class Glyph {
     return this._getMetrics().bottomBearing;
   }
 
+  /**
+   * @returns {null}
+   */
   get ligatureCaretPositions() {
     return null;
   }
 
+  /**
+   * @returns {string | null | undefined}
+   */
   _getName() {
     let { post } = this._font;
     if (!post) {
@@ -225,25 +268,40 @@ export default class Glyph {
         return StandardNames[this.id];
 
       case 2: {
-        let id = post.glyphNameIndex[this.id];
+        let id = post.glyphNameIndex?.[this.id];
+        if (id == null) {
+          return null;
+        }
         if (id < StandardNames.length) {
           return StandardNames[id];
         }
 
-        return post.names[id - StandardNames.length];
+        return post.names?.[id - StandardNames.length];
       }
 
-      case 2.5:
-        return StandardNames[this.id + post.offsets[this.id]];
+      case 2.5: {
+        let offset = post.offsets?.[this.id];
+        if (offset == null) {
+          return null;
+        }
+        return StandardNames[this.id + offset];
+      }
 
-      case 4:
-        return String.fromCharCode(post.map[this.id]);
+      case 4: {
+        let mapped = post.map?.[this.id];
+        if (mapped == null) {
+          return null;
+        }
+        return String.fromCharCode(mapped);
+      }
     }
+
+    return null;
   }
 
   /**
    * The glyph's name
-   * @type {string}
+   * @type {string | null | undefined}
    */
   @cache
   get name() {
@@ -252,8 +310,9 @@ export default class Glyph {
 
   /**
    * Renders the glyph to the given graphics context, at the specified font size.
-   * @param {CanvasRenderingContext2d} ctx
+   * @param {PathRenderingContext} ctx
    * @param {number} size
+   * @returns {void}
    */
   render(ctx, size) {
     ctx.save();