@cantoo/fontkit 2.0.4

package/src/glyph/TTFGlyph.js

@@ -0,0 +1,408 @@
+import Glyph from './Glyph';
+import Path from './Path';
+import BBox from './BBox';
+import * as r from 'restructure';
+
+// The header for both simple and composite glyphs
+let GlyfHeader = new r.Struct({
+  numberOfContours: r.int16, // if negative, this is a composite glyph
+  xMin:             r.int16,
+  yMin:             r.int16,
+  xMax:             r.int16,
+  yMax:             r.int16
+});
+
+// Flags for simple glyphs
+const ON_CURVE        = 1 << 0;
+const X_SHORT_VECTOR  = 1 << 1;
+const Y_SHORT_VECTOR  = 1 << 2;
+const REPEAT          = 1 << 3;
+const SAME_X          = 1 << 4;
+const SAME_Y          = 1 << 5;
+
+// Flags for composite glyphs
+const ARG_1_AND_2_ARE_WORDS      = 1 << 0;
+const _ARGS_ARE_XY_VALUES        = 1 << 1;
+const _ROUND_XY_TO_GRID          = 1 << 2;
+const WE_HAVE_A_SCALE            = 1 << 3;
+const MORE_COMPONENTS            = 1 << 5;
+const WE_HAVE_AN_X_AND_Y_SCALE   = 1 << 6;
+const WE_HAVE_A_TWO_BY_TWO       = 1 << 7;
+const WE_HAVE_INSTRUCTIONS       = 1 << 8;
+const _USE_MY_METRICS            = 1 << 9;
+const _OVERLAP_COMPOUND          = 1 << 10;
+const _SCALED_COMPONENT_OFFSET   = 1 << 11;
+const _UNSCALED_COMPONENT_OFFSET = 1 << 12;
+
+// Represents a point in a simple glyph
+export class Point {
+  constructor(onCurve, endContour, x = 0, y = 0) {
+    this.onCurve = onCurve;
+    this.endContour = endContour;
+    this.x = x;
+    this.y = y;
+  }
+
+  copy() {
+    return new Point(this.onCurve, this.endContour, this.x, this.y);
+  }
+}
+
+// Represents a component in a composite glyph
+class Component {
+  constructor(glyphID, dx, dy) {
+    this.glyphID = glyphID;
+    this.dx = dx;
+    this.dy = dy;
+    this.pos = 0;
+    this.scaleX = this.scaleY = 1;
+    this.scale01 = this.scale10 = 0;
+  }
+}
+
+/**
+ * Represents a TrueType glyph.
+ */
+export default class TTFGlyph extends Glyph {
+  type = 'TTF';
+
+  // Parses just the glyph header and returns the bounding box
+  _getCBox(internal) {
+    // We need to decode the glyph if variation processing is requested,
+    // so it's easier just to recompute the path's cbox after decoding.
+    if (this._font._variationProcessor && !internal) {
+      return this.path.cbox;
+    }
+
+    let glyfPos = this._font.loca.offsets[this.id];
+    // No outline data (e.g. space): avoid decoding the next glyph's header
+    if (glyfPos === this._font.loca.offsets[this.id + 1]) {
+      return Object.freeze(new BBox(0, 0, 0, 0));
+    }
+
+    let stream = this._font._getTableStream('glyf');
+    stream.pos += glyfPos;
+    let glyph = GlyfHeader.decode(stream);
+    return Object.freeze(new BBox(glyph.xMin, glyph.yMin, glyph.xMax, glyph.yMax));
+  }
+
+  // Parses a single glyph coordinate
+  _parseGlyphCoord(stream, prev, short, same) {
+    let val;
+    if (short) {
+      val = stream.readUInt8();
+      if (!same) {
+        val = -val;
+      }
+
+      val += prev;
+    } else {
+      if (same) {
+        val = prev;
+      } else {
+        val = prev + stream.readInt16BE();
+      }
+    }
+
+    return val;
+  }
+
+  // Decodes the glyph data into points for simple glyphs,
+  // or components for composite glyphs
+  _decode() {
+    let glyfPos = this._font.loca.offsets[this.id];
+    let nextPos = this._font.loca.offsets[this.id + 1];
+
+    // Nothing to do if there is no data for this glyph
+    if (glyfPos === nextPos) { return null; }
+
+    let stream = this._font._getTableStream('glyf');
+    stream.pos += glyfPos;
+    let startPos = stream.pos;
+
+    let glyph = GlyfHeader.decode(stream);
+
+    if (glyph.numberOfContours > 0) {
+      this._decodeSimple(glyph, stream);
+
+    } else if (glyph.numberOfContours < 0) {
+      this._decodeComposite(glyph, stream, startPos);
+    }
+
+    return glyph;
+  }
+
+  _decodeSimple(glyph, stream) {
+    // this is a simple glyph
+    glyph.points = [];
+
+    let endPtsOfContours = new r.Array(r.uint16, glyph.numberOfContours).decode(stream);
+    glyph.instructions = new r.Array(r.uint8, r.uint16).decode(stream);
+
+    let flags = [];
+    let numCoords = endPtsOfContours[endPtsOfContours.length - 1] + 1;
+
+    while (flags.length < numCoords) {
+      let flag = stream.readUInt8();
+      flags.push(flag);
+
+      // check for repeat flag
+      if (flag & REPEAT) {
+        let count = stream.readUInt8();
+        for (let j = 0; j < count; j++) {
+          flags.push(flag);
+        }
+      }
+    }
+
+    for (let i = 0; i < flags.length; i++) {
+      let flag = flags[i];
+      let point = new Point(!!(flag & ON_CURVE), endPtsOfContours.indexOf(i) >= 0, 0, 0);
+      glyph.points.push(point);
+    }
+
+    let px = 0;
+    for (let i = 0; i < flags.length; i++) {
+      let flag = flags[i];
+      glyph.points[i].x = px = this._parseGlyphCoord(stream, px, flag & X_SHORT_VECTOR, flag & SAME_X);
+    }
+
+    let py = 0;
+    for (let i = 0; i < flags.length; i++) {
+      let flag = flags[i];
+      glyph.points[i].y = py = this._parseGlyphCoord(stream, py, flag & Y_SHORT_VECTOR, flag & SAME_Y);
+    }
+
+    if (this._font._variationProcessor) {
+      let points = glyph.points.slice();
+      points.push(...this._getPhantomPoints(glyph));
+
+      this._font._variationProcessor.transformPoints(this.id, points);
+      glyph.phantomPoints = points.slice(-4);
+    }
+
+    return;
+  }
+
+  _decodeComposite(glyph, stream, offset = 0) {
+    // this is a composite glyph
+    glyph.components = [];
+    let haveInstructions = false;
+    let flags = MORE_COMPONENTS;
+
+    while (flags & MORE_COMPONENTS) {
+      flags = stream.readUInt16BE();
+      let gPos = stream.pos - offset;
+      let glyphID = stream.readUInt16BE();
+      if (!haveInstructions) {
+        haveInstructions = (flags & WE_HAVE_INSTRUCTIONS) !== 0;
+      }
+
+      let dx, dy;
+      if (flags & ARG_1_AND_2_ARE_WORDS) {
+        dx = stream.readInt16BE();
+        dy = stream.readInt16BE();
+      } else {
+        dx = stream.readInt8();
+        dy = stream.readInt8();
+      }
+
+      let component = new Component(glyphID, dx, dy);
+      component.pos = gPos;
+
+      if (flags & WE_HAVE_A_SCALE) {
+        // fixed number with 14 bits of fraction
+        component.scaleX =
+        component.scaleY = ((stream.readUInt8() << 24) | (stream.readUInt8() << 16)) / 1073741824;
+
+      } else if (flags & WE_HAVE_AN_X_AND_Y_SCALE) {
+        component.scaleX = ((stream.readUInt8() << 24) | (stream.readUInt8() << 16)) / 1073741824;
+        component.scaleY = ((stream.readUInt8() << 24) | (stream.readUInt8() << 16)) / 1073741824;
+
+      } else if (flags & WE_HAVE_A_TWO_BY_TWO) {
+        component.scaleX  = ((stream.readUInt8() << 24) | (stream.readUInt8() << 16)) / 1073741824;
+        component.scale01 = ((stream.readUInt8() << 24) | (stream.readUInt8() << 16)) / 1073741824;
+        component.scale10 = ((stream.readUInt8() << 24) | (stream.readUInt8() << 16)) / 1073741824;
+        component.scaleY  = ((stream.readUInt8() << 24) | (stream.readUInt8() << 16)) / 1073741824;
+      }
+
+      glyph.components.push(component);
+    }
+
+    if (this._font._variationProcessor) {
+      let points = [];
+      for (let j = 0; j < glyph.components.length; j++) {
+        let component = glyph.components[j];
+        points.push(new Point(true, true, component.dx, component.dy));
+      }
+
+      points.push(...this._getPhantomPoints(glyph));
+
+      this._font._variationProcessor.transformPoints(this.id, points);
+      glyph.phantomPoints = points.splice(-4, 4);
+
+      for (let i = 0; i < points.length; i++) {
+        let point = points[i];
+        glyph.components[i].dx = point.x;
+        glyph.components[i].dy = point.y;
+      }
+    }
+
+    return haveInstructions;
+  }
+
+  _getPhantomPoints(glyph) {
+    let cbox = this._getCBox(true);
+    if (this._metrics == null) {
+      this._metrics = Glyph.prototype._getMetrics.call(this, cbox);
+    }
+
+    let { advanceWidth, advanceHeight, leftBearing, topBearing } = this._metrics;
+
+    return [
+      new Point(false, true, glyph.xMin - leftBearing, 0),
+      new Point(false, true, glyph.xMin - leftBearing + advanceWidth, 0),
+      new Point(false, true, 0, glyph.yMax + topBearing),
+      new Point(false, true, 0, glyph.yMax + topBearing + advanceHeight)
+    ];
+  }
+
+  // Decodes font data, resolves composite glyphs, and returns an array of contours
+  _getContours() {
+    let glyph = this._decode();
+    if (!glyph) {
+      return [];
+    }
+
+    let points = [];
+
+    if (glyph.numberOfContours < 0) {
+      // resolve composite glyphs
+      for (let component of glyph.components) {
+        let componentGlyph = this._font._getBaseGlyph(component.glyphID);
+        if (!componentGlyph) {
+          continue;
+        }
+
+        let contours = componentGlyph._getContours();
+        for (let i = 0; i < contours.length; i++) {
+          let contour = contours[i];
+          for (let j = 0; j < contour.length; j++) {
+            let point = contour[j];
+            let x = point.x * component.scaleX + point.y * component.scale01 + component.dx;
+            let y = point.y * component.scaleY + point.x * component.scale10 + component.dy;
+            points.push(new Point(point.onCurve, point.endContour, x, y));
+          }
+        }
+      }
+    } else {
+      points = glyph.points || [];
+    }
+
+    // Recompute and cache metrics if we performed variation processing, and don't have an HVAR table
+    if (glyph.phantomPoints && !this._font.directory.tables.HVAR) {
+      let m = this._metrics;
+      m.advanceWidth  = glyph.phantomPoints[1].x - glyph.phantomPoints[0].x;
+      m.advanceHeight = glyph.phantomPoints[3].y - glyph.phantomPoints[2].y;
+      m.leftBearing   = glyph.xMin - glyph.phantomPoints[0].x;
+      m.topBearing    = glyph.phantomPoints[2].y - glyph.yMax;
+      m.rightBearing  = m.advanceWidth - m.leftBearing - m.width;
+      m.bottomBearing = m.advanceHeight - m.topBearing - m.height;
+    }
+
+    let contours = [];
+    let cur = [];
+    for (let k = 0; k < points.length; k++) {
+      var point = points[k];
+      cur.push(point);
+      if (point.endContour) {
+        contours.push(cur);
+        cur = [];
+      }
+    }
+
+    return contours;
+  }
+
+  _getMetrics() {
+    if (this._metrics) {
+      return this._metrics;
+    }
+
+    let cbox = this._getCBox(true);
+    super._getMetrics(cbox);
+
+    if (this._font._variationProcessor && !this._font.HVAR) {
+      // No HVAR table, decode the glyph. This triggers recomputation of metrics.
+      this.path;
+    }
+
+    return this._metrics;
+  }
+
+  // Converts contours to a Path object that can be rendered
+  _getPath() {
+    let contours = this._getContours();
+    let path = new Path;
+
+    for (let i = 0; i < contours.length; i++) {
+      let contour = contours[i];
+      let firstPt = contour[0];
+      let lastPt = contour[contour.length - 1];
+      let start = 0;
+      let curvePt;
+
+      if (firstPt.onCurve) {
+        // The first point will be consumed by the moveTo command, so skip in the loop
+        curvePt = null;
+        start = 1;
+      } else {
+        if (lastPt.onCurve) {
+          // Start at the last point if the first point is off curve and the last point is on curve
+          firstPt = lastPt;
+        } else {
+          // Start at the middle if both the first and last points are off curve
+          firstPt = new Point(false, false, (firstPt.x + lastPt.x) / 2, (firstPt.y + lastPt.y) / 2);
+        }
+
+        curvePt = firstPt;
+      }
+
+      path.moveTo(firstPt.x, firstPt.y);
+
+      for (let j = start; j < contour.length; j++) {
+        let pt = contour[j];
+        let prevPt = j === 0 ? firstPt : contour[j - 1];
+
+        if (prevPt.onCurve && pt.onCurve) {
+          path.lineTo(pt.x, pt.y);
+
+        } else if (prevPt.onCurve && !pt.onCurve) {
+          curvePt = pt;
+
+        } else if (!prevPt.onCurve && !pt.onCurve) {
+          let midX = (prevPt.x + pt.x) / 2;
+          let midY = (prevPt.y + pt.y) / 2;
+          path.quadraticCurveTo(prevPt.x, prevPt.y, midX, midY);
+          curvePt = pt;
+
+        } else if (!prevPt.onCurve && pt.onCurve) {
+          path.quadraticCurveTo(curvePt.x, curvePt.y, pt.x, pt.y);
+          curvePt = null;
+
+        } else {
+          throw new Error("Unknown TTF path state");
+        }
+      }
+
+      // Connect the first and last points
+      if (curvePt) {
+        path.quadraticCurveTo(curvePt.x, curvePt.y, firstPt.x, firstPt.y);
+      }
+
+      path.closePath();
+    }
+
+    return path;
+  }
+}

package/src/glyph/TTFGlyphEncoder.js

@@ -0,0 +1,158 @@
+import * as r from 'restructure';
+
+// Flags for simple glyphs
+const ON_CURVE        = 1 << 0;
+const X_SHORT_VECTOR  = 1 << 1;
+const Y_SHORT_VECTOR  = 1 << 2;
+const REPEAT          = 1 << 3;
+const SAME_X          = 1 << 4;
+const SAME_Y          = 1 << 5;
+
+class Point {
+  static size(val) {
+    return val >= 0 && val <= 255 ? 1 : 2;
+  }
+  
+  static encode(stream, value) {
+    if (value >= 0 && value <= 255) {
+      stream.writeUInt8(value);
+    } else {
+      stream.writeInt16BE(value);
+    }
+  }
+}
+
+let Glyf = new r.Struct({
+  numberOfContours: r.int16, // if negative, this is a composite glyph
+  xMin: r.int16,
+  yMin: r.int16,
+  xMax: r.int16,
+  yMax: r.int16,
+  endPtsOfContours: new r.Array(r.uint16, 'numberOfContours'),
+  instructions: new r.Array(r.uint8, r.uint16),
+  flags: new r.Array(r.uint8, 0),
+  xPoints: new r.Array(Point, 0),
+  yPoints: new r.Array(Point, 0)
+});
+
+/**
+ * Encodes TrueType glyph outlines
+ */
+export default class TTFGlyphEncoder {
+  encodeSimple(path, instructions = []) {
+    let endPtsOfContours = [];
+    let xPoints = [];
+    let yPoints = [];
+    let flags = [];
+    let same = 0;
+    let lastX = 0, lastY = 0, lastFlag = 0;
+    let pointCount = 0;
+    
+    for (let i = 0; i < path.commands.length; i++) {
+      let c = path.commands[i];
+      
+      for (let j = 0; j < c.args.length; j += 2) {
+        let x = c.args[j];
+        let y = c.args[j + 1];
+        let flag = 0;
+        
+        // If the ending point of a quadratic curve is the midpoint
+        // between the control point and the control point of the next
+        // quadratic curve, we can omit the ending point.
+        if (c.command === 'quadraticCurveTo' && j === 2) {
+          let next = path.commands[i + 1];
+          if (next && next.command === 'quadraticCurveTo') {
+            let midX = (lastX + next.args[0]) / 2;
+            let midY = (lastY + next.args[1]) / 2;
+            
+            if (x === midX && y === midY) {
+              continue;
+            }
+          }
+        }
+        
+        // All points except control points are on curve.
+        if (!(c.command === 'quadraticCurveTo' && j === 0)) {
+          flag |= ON_CURVE;
+        }
+        
+        flag = this._encodePoint(x, lastX, xPoints, flag, X_SHORT_VECTOR, SAME_X);
+        flag = this._encodePoint(y, lastY, yPoints, flag, Y_SHORT_VECTOR, SAME_Y);
+        
+        if (flag === lastFlag && same < 255) {
+          flags[flags.length - 1] |= REPEAT;
+          same++;
+        } else {
+          if (same > 0) {
+            flags.push(same);
+            same = 0;
+          }
+      
+          flags.push(flag);
+          lastFlag = flag;
+        }
+        
+        lastX = x;
+        lastY = y;
+        pointCount++;
+      }
+  
+      if (c.command === 'closePath') {
+        endPtsOfContours.push(pointCount - 1);
+      }
+    }
+
+    // Close the path if the last command didn't already
+    if (path.commands.length > 1 && path.commands[path.commands.length - 1].command !== 'closePath') {
+      endPtsOfContours.push(pointCount - 1);
+    }
+    
+    let bbox = path.bbox;
+    let glyf = {
+      numberOfContours: endPtsOfContours.length,
+      xMin: bbox.minX,
+      yMin: bbox.minY,
+      xMax: bbox.maxX,
+      yMax: bbox.maxY,
+      endPtsOfContours: endPtsOfContours,
+      instructions: instructions,
+      flags: flags,
+      xPoints: xPoints,
+      yPoints: yPoints
+    };
+    
+    let size = Glyf.size(glyf);
+    let tail = 4 - (size % 4);
+    
+    let stream = new r.EncodeStream(size + tail);
+    Glyf.encode(stream, glyf);
+    
+    // Align to 4-byte length
+    if (tail !== 0) {
+      stream.fill(0, tail);
+    }
+    
+    return stream.buffer;
+  }
+  
+  _encodePoint(value, last, points, flag, shortFlag, sameFlag) {
+    let diff = value - last;
+    
+    if (value === last) {
+      flag |= sameFlag;
+    } else {
+      if (-255 <= diff && diff <= 255) {
+        flag |= shortFlag;
+        if (diff < 0) {
+          diff = -diff;
+        } else {
+          flag |= sameFlag;
+        }
+      }
+      
+      points.push(diff);
+    }
+    
+    return flag;
+  }
+}

package/src/glyph/WOFF2Glyph.js

@@ -0,0 +1,70 @@
+import TTFGlyph, { Point } from './TTFGlyph';
+import BBox from './BBox';
+
+/**
+ * Represents a TrueType glyph in the WOFF2 format, which compresses glyphs differently.
+ */
+export default class WOFF2Glyph extends TTFGlyph {
+  type = 'WOFF2';
+
+  _decode() {
+    let cached = this._font._transformedGlyphs[this.id];
+    if (!cached) {
+      return null;
+    }
+
+    if (!this._font._variationProcessor) {
+      // Non-variable path: return the pre-decoded glyph without copying.
+      return cached;
+    }
+
+    // Clone so per-instance deltas do not mutate the shared transformed cache.
+    // Transformed glyf has no per-glyph bbox; zeros keep phantom-point math
+    // aligned with hmtx (same approach as a missing bbox bitmap entry).
+    let glyph = {
+      numberOfContours: cached.numberOfContours,
+      xMin: 0,
+      yMin: 0,
+      xMax: 0,
+      yMax: 0,
+    };
+
+    if (cached.points) {
+      glyph.points = cached.points.map(p => p.copy());
+      let points = glyph.points.concat(this._getPhantomPoints(glyph));
+      this._font._variationProcessor.transformPoints(this.id, points);
+      glyph.phantomPoints = points.slice(-4);
+    }
+
+    if (cached.components) {
+      glyph.components = cached.components.map(c => {
+        return Object.assign(Object.create(Object.getPrototypeOf(c)), c);
+      });
+
+      let points = [];
+      for (let component of glyph.components) {
+        points.push(new Point(true, true, component.dx, component.dy));
+      }
+      points.push(...this._getPhantomPoints(glyph));
+
+      this._font._variationProcessor.transformPoints(this.id, points);
+      glyph.phantomPoints = points.splice(-4, 4);
+
+      for (let i = 0; i < points.length; i++) {
+        glyph.components[i].dx = points[i].x;
+        glyph.components[i].dy = points[i].y;
+      }
+    }
+
+    return glyph;
+  }
+
+  _getCBox(internal) {
+    // Avoid path recursion while building phantom points during variation decode.
+    if (internal) {
+      return new BBox(0, 0, 0, 0);
+    }
+
+    return this.path.bbox;
+  }
+}

package/src/index.js

@@ -0,0 +1,15 @@
+import { registerFormat } from './base';
+import TTFFont from './TTFFont';
+import WOFFFont from './WOFFFont';
+import WOFF2Font from './WOFF2Font';
+import TrueTypeCollection from './TrueTypeCollection';
+import DFont from './DFont';
+
+// Register font formats
+registerFormat(TTFFont);
+registerFormat(WOFFFont);
+registerFormat(WOFF2Font);
+registerFormat(TrueTypeCollection);
+registerFormat(DFont);
+
+export * from './base';

package/src/layout/GlyphPosition.js

@@ -0,0 +1,30 @@
+/**
+ * Represents positioning information for a glyph in a GlyphRun.
+ */
+export default class GlyphPosition {
+  constructor(xAdvance = 0, yAdvance = 0, xOffset = 0, yOffset = 0) {
+    /**
+     * The amount to move the virtual pen in the X direction after rendering this glyph.
+     * @type {number}
+     */
+    this.xAdvance = xAdvance;
+
+    /**
+     * The amount to move the virtual pen in the Y direction after rendering this glyph.
+     * @type {number}
+     */
+    this.yAdvance = yAdvance;
+
+    /**
+     * The offset from the pen position in the X direction at which to render this glyph.
+     * @type {number}
+     */
+    this.xOffset = xOffset;
+
+    /**
+     * The offset from the pen position in the Y direction at which to render this glyph.
+     * @type {number}
+     */
+    this.yOffset = yOffset;
+  }
+}