@cantoo/fontkit 2.0.4 → 2.0.6

package/src/glyph/Path.js

@@ -1,5 +1,9 @@
 import BBox from './BBox';
 
+/** @typedef {import('../../types/fontkit').PathCommand} PathCommand */
+/** @typedef {import('../../types/fontkit').PathRenderingContext} PathRenderingContext */
+
+/** @type {Record<PathCommand['command'], string>} */
 const SVG_COMMANDS = {
   moveTo: 'M',
   lineTo: 'L',
@@ -16,21 +20,94 @@ const SVG_COMMANDS = {
  */
 export default class Path {
   constructor() {
+    /** @type {PathCommand[]} */
     this.commands = [];
+    /** @type {BBox | null} */
     this._bbox = null;
+    /** @type {BBox | null} */
     this._cbox = null;
   }
 
+  /**
+   * @param {PathCommand['command']} command
+   * @param {...number} args
+   * @returns {this}
+   */
+  _addCommand(command, ...args) {
+    this._bbox = this._cbox = null;
+    this.commands.push({
+      command,
+      args
+    });
+    return this;
+  }
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @returns {this}
+   */
+  moveTo(x, y) {
+    return this._addCommand('moveTo', x, y);
+  }
+
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @returns {this}
+   */
+  lineTo(x, y) {
+    return this._addCommand('lineTo', x, y);
+  }
+
+  /**
+   * @param {number} cpx
+   * @param {number} cpy
+   * @param {number} x
+   * @param {number} y
+   * @returns {this}
+   */
+  quadraticCurveTo(cpx, cpy, x, y) {
+    return this._addCommand('quadraticCurveTo', cpx, cpy, x, y);
+  }
+
+  /**
+   * @param {number} cp1x
+   * @param {number} cp1y
+   * @param {number} cp2x
+   * @param {number} cp2y
+   * @param {number} x
+   * @param {number} y
+   * @returns {this}
+   */
+  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+    return this._addCommand('bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y);
+  }
+
+  /**
+   * @returns {this}
+   */
+  closePath() {
+    return this._addCommand('closePath');
+  }
+
   /**
    * Compiles the path to a JavaScript function that can be applied with
    * a graphics context in order to render the path.
-   * @return {string}
+   * @return {(ctx: PathRenderingContext) => void}
    */
   toFunction() {
-    return ctx => {
-      this.commands.forEach(c => {
-        return ctx[c.command].apply(ctx, c.args)
-      })
+    /**
+     * @param {PathRenderingContext} ctx
+     * @returns {void}
+     */
+    return (ctx) => {
+      this.commands.forEach((c) => {
+        const fn = ctx[c.command];
+        if (typeof fn === 'function') {
+          Reflect.apply(fn, ctx, c.args);
+        }
+      });
     };
   }
 
@@ -39,8 +116,8 @@ export default class Path {
    * @return {string}
    */
   toSVG() {
-    let cmds = this.commands.map(c => {
-      let args = c.args.map(arg => Math.round(arg * 100) / 100);
+    let cmds = this.commands.map((c) => {
+      let args = c.args.map(/** @param {number} arg */ arg => Math.round(arg * 100) / 100);
       return `${SVG_COMMANDS[c.command]}${args.join(' ')}`;
     });
 
@@ -59,7 +136,7 @@ export default class Path {
       if (this.commands.length === 0) {
         this._cbox = Object.freeze(new BBox(0, 0, 0, 0));
       } else {
-        let cbox = new BBox;
+        let cbox = new BBox();
         for (let command of this.commands) {
           for (let i = 0; i < command.args.length; i += 2) {
             cbox.addPoint(command.args[i], command.args[i + 1]);
@@ -87,7 +164,7 @@ export default class Path {
       return this._bbox = Object.freeze(new BBox(0, 0, 0, 0));
     }
 
-    let bbox = new BBox;
+    let bbox = new BBox();
     let cx = 0, cy = 0;
 
     for (let c of this.commands) {
@@ -109,9 +186,9 @@ export default class Path {
             let [qp1x, qp1y, qp3x, qp3y] = c.args;
             p3x = qp3x;
             p3y = qp3y;
-            cp1x = cx + 2 / 3 * (qp1x - cx);    // CP1 = QP0 + 2/3 * (QP1-QP0)
+            cp1x = cx + 2 / 3 * (qp1x - cx); // CP1 = QP0 + 2/3 * (QP1-QP0)
             cp1y = cy + 2 / 3 * (qp1y - cy);
-            cp2x = p3x + 2 / 3 * (qp1x - p3x);  // CP2 = QP2 + 2/3 * (QP1-QP2)
+            cp2x = p3x + 2 / 3 * (qp1x - p3x); // CP2 = QP2 + 2/3 * (QP1-QP2)
             cp2y = p3y + 2 / 3 * (qp1y - p3y);
           } else {
             [cp1x, cp1y, cp2x, cp2y, p3x, p3y] = c.args;
@@ -125,24 +202,31 @@ export default class Path {
           let p2 = [cp2x, cp2y];
           let p3 = [p3x, p3y];
 
+          /**
+           * @param {number} t
+           * @param {number} i
+           * @returns {number}
+           */
           let f = (t, i) => (
             Math.pow(1 - t, 3) * p0[i]
-              + 3 * Math.pow(1 - t, 2) * t * p1[i]
-              + 3 * (1 - t) * Math.pow(t, 2) * p2[i]
-              + Math.pow(t, 3) * p3[i]
+            + 3 * Math.pow(1 - t, 2) * t * p1[i]
+            + 3 * (1 - t) * Math.pow(t, 2) * p2[i]
+            + Math.pow(t, 3) * p3[i]
           );
 
           for (let i = 0; i <= 1; i++) {
             let b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
             let a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
-            c = 3 * p1[i] - 3 * p0[i];
+            // Renamed from `c` — reassigning the PathCommand loop variable to a number
+            // would corrupt subsequent iterations / confuse the type checker.
+            let coeff = 3 * p1[i] - 3 * p0[i];
 
             if (a === 0) {
               if (b === 0) {
                 continue;
               }
 
-              let t = -c / b;
+              let t = -coeff / b;
               if (0 < t && t < 1) {
                 if (i === 0) {
                   bbox.addPoint(f(t, i), bbox.maxY);
@@ -154,7 +238,7 @@ export default class Path {
               continue;
             }
 
-            let b2ac = Math.pow(b, 2) - 4 * c * a;
+            let b2ac = Math.pow(b, 2) - 4 * coeff * a;
             if (b2ac < 0) {
               continue;
             }
@@ -190,11 +274,11 @@ export default class Path {
 
   /**
    * Applies a mapping function to each point in the path.
-   * @param {function} fn
+   * @param {(x: number, y: number) => [number, number]} fn
    * @return {Path}
    */
   mapPoints(fn) {
-    let path = new Path;
+    let path = new Path();
 
     for (let c of this.commands) {
       let args = [];
@@ -203,7 +287,7 @@ export default class Path {
         args.push(x, y);
       }
 
-      path[c.command](...args);
+      path._addCommand(c.command, ...args);
     }
 
     return path;
@@ -211,6 +295,13 @@ export default class Path {
 
   /**
    * Transforms the path by the given matrix.
+   * @param {number} m0
+   * @param {number} m1
+   * @param {number} m2
+   * @param {number} m3
+   * @param {number} m4
+   * @param {number} m5
+   * @returns {Path}
    */
   transform(m0, m1, m2, m3, m4, m5) {
     return this.mapPoints((x, y) => {
@@ -222,6 +313,9 @@ export default class Path {
 
   /**
    * Translates the path by the given offset.
+   * @param {number} x
+   * @param {number} y
+   * @returns {Path}
    */
   translate(x, y) {
     return this.transform(1, 0, 0, 1, x, y);
@@ -229,6 +323,8 @@ export default class Path {
 
   /**
    * Rotates the path by the given angle (in radians).
+   * @param {number} angle
+   * @returns {Path}
    */
   rotate(angle) {
     let cos = Math.cos(angle);
@@ -238,20 +334,11 @@ export default class Path {
 
   /**
    * Scales the path.
+   * @param {number} scaleX
+   * @param {number} [scaleY]
+   * @returns {Path}
    */
   scale(scaleX, scaleY = scaleX) {
     return this.transform(scaleX, 0, 0, scaleY, 0, 0);
   }
 }
-
-for (let command of ['moveTo', 'lineTo', 'quadraticCurveTo', 'bezierCurveTo', 'closePath']) {
-  Path.prototype[command] = function(...args) {
-    this._bbox = this._cbox = null;
-    this.commands.push({
-      command,
-      args
-    });
-
-    return this;
-  };
-}

package/src/glyph/SBIXGlyph.js

@@ -1,13 +1,47 @@
 import TTFGlyph from './TTFGlyph';
 import * as r from 'restructure';
 
-let SBIXImage = new r.Struct({
+/** @typedef {import('restructure').StructValue} StructValue */
+/** @typedef {import('../../types/fontkit').PathRenderingContext} PathRenderingContext */
+/** @typedef {import('../../types/fontkit').SBIXImage} SBIXImageData */
+
+let SBIXImageStruct = new r.Struct({
   originX: r.uint16,
   originY: r.uint16,
   type: new r.String(4),
-  data: new r.Buffer(t => t.parent.buflen - t._currentOffset)
+  data: new r.Buffer((t) => {
+    let parent = t.parent;
+    let buflen = parent && typeof parent.buflen === 'number' ? parent.buflen : 0;
+    let offset = typeof t._currentOffset === 'number' ? t._currentOffset : 0;
+    return buflen - offset;
+  })
 });
 
+/**
+ * @param {StructValue} raw
+ * @returns {SBIXImageData}
+ */
+function asSBIXImage(raw) {
+  let originX = raw.originX;
+  let originY = raw.originY;
+  let type = raw.type;
+  let data = raw.data;
+  if (
+    typeof originX !== 'number'
+    || typeof originY !== 'number'
+    || typeof type !== 'string'
+    || !ArrayBuffer.isView(data)
+  ) {
+    throw new Error('Invalid SBIX image');
+  }
+  return {
+    originX,
+    originY,
+    type,
+    data
+  };
+}
+
 /**
  * Represents a color (e.g. emoji) glyph in Apple's SBIX format.
  */
@@ -20,11 +54,18 @@ export default class SBIXGlyph extends TTFGlyph {
    * along with the image type, and origin.
    *
    * @param {number} size
-   * @return {object}
+   * @return {SBIXImageData | null}
    */
   getImageForSize(size) {
-    for (let i = 0; i < this._font.sbix.imageTables.length; i++) {
-      var table = this._font.sbix.imageTables[i];
+    let sbix = this._font.sbix;
+    if (!sbix || sbix.imageTables.length === 0) {
+      return null;
+    }
+
+    /** @type {import('../../types/fontkit').SBIXImageTable} */
+    let table = sbix.imageTables[0];
+    for (let i = 0; i < sbix.imageTables.length; i++) {
+      table = sbix.imageTables[i];
       if (table.ppem >= size) { break; }
     }
 
@@ -37,17 +78,25 @@ export default class SBIXGlyph extends TTFGlyph {
     }
 
     this._font.stream.pos = start;
-    return SBIXImage.decode(this._font.stream, {buflen: end - start});
+    return asSBIXImage(SBIXImageStruct.decode(this._font.stream, { buflen: end - start }));
   }
 
+  /**
+   * @param {PathRenderingContext} ctx
+   * @param {number} size
+   * @returns {void}
+   */
   render(ctx, size) {
     let img = this.getImageForSize(size);
     if (img != null) {
       let scale = size / this._font.unitsPerEm;
-      ctx.image(img.data, {height: size, x: img.originX, y: (this.bbox.minY - img.originY) * scale});
+      if (typeof ctx.image === 'function') {
+        ctx.image(img.data, { height: size, x: img.originX, y: (this.bbox.minY - img.originY) * scale });
+      }
     }
 
-    if (this._font.sbix.flags.renderOutlines) {
+    let sbix = this._font.sbix;
+    if (sbix && sbix.flags.renderOutlines) {
       super.render(ctx, size);
     }
   }

package/src/glyph/StandardNames.js

@@ -1,3 +1,4 @@
+/** @type {string[]} */
 export default [
   '.notdef', '.null', 'nonmarkingreturn', 'space', 'exclam', 'quotedbl', 'numbersign', 'dollar', 'percent',
   'ampersand', 'quotesingle', 'parenleft', 'parenright', 'asterisk', 'plus', 'comma', 'hyphen', 'period', 'slash',