@cantoo/fontkit 2.0.4

package/src/glyph/COLRGlyph.js

@@ -0,0 +1,108 @@
+import Glyph from './Glyph';
+import BBox from './BBox';
+
+class COLRLayer {
+  constructor(glyph, color) {
+    this.glyph = glyph;
+    this.color = color;
+  }
+}
+
+/**
+ * Represents a color (e.g. emoji) glyph in Microsoft's COLR format.
+ * Each glyph in this format contain a list of colored layers, each
+ * of which  is another vector glyph.
+ */
+export default class COLRGlyph extends Glyph {
+  type = 'COLR';
+
+  _getBBox() {
+    let layers = this.layers;
+    if (!layers) {
+      let g = this._font._getBaseGlyph(this.id);
+      return g ? g.bbox : new BBox(0, 0, 0, 0);
+    }
+
+    let bbox = new BBox;
+    for (let i = 0; i < layers.length; i++) {
+      let layer = layers[i];
+      let b = layer.glyph.bbox;
+      bbox.addPoint(b.minX, b.minY);
+      bbox.addPoint(b.maxX, b.maxY);
+    }
+
+    return bbox;
+  }
+
+  /**
+   * Returns an array of objects containing the glyph and color for
+   * each layer in the composite color glyph.
+   * @type {object[]}
+   */
+  get layers() {
+    let cpal = this._font.CPAL;
+    let colr = this._font.COLR;
+
+    // COLR v1 uses paint-based records instead of v0 baseGlyphRecord
+    if (!colr || !colr.baseGlyphRecord) {
+      return null;
+    }
+
+    let low = 0;
+    let high = colr.baseGlyphRecord.length - 1;
+    let baseLayer;
+
+    while (low <= high) {
+      let mid = (low + high) >> 1;
+      let rec = colr.baseGlyphRecord[mid];
+
+      if (this.id < rec.gid) {
+        high = mid - 1;
+      } else if (this.id > rec.gid) {
+        low = mid + 1;
+      } else {
+        baseLayer = rec;
+        break;
+      }
+    }
+
+    // if base glyph not found in COLR table,
+    // default to normal glyph from glyf or CFF
+    if (baseLayer == null) {
+      let g = this._font._getBaseGlyph(this.id);
+      let color = {
+        red: 0,
+        green: 0,
+        blue: 0,
+        alpha: 255
+      };
+
+      return [new COLRLayer(g, color)];
+    }
+
+    // otherwise, return an array of all the layers
+    let layers = [];
+    for (let i = baseLayer.firstLayerIndex; i < baseLayer.firstLayerIndex + baseLayer.numLayers; i++) {
+      let rec = colr.layerRecords[i];
+      let color = cpal.colorRecords[rec.paletteIndex];
+      let g = this._font._getBaseGlyph(rec.gid);
+      layers.push(new COLRLayer(g, color));
+    }
+
+    return layers;
+  }
+
+  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);
+      glyph.render(ctx, size);
+    }
+
+    return;
+  }
+}

package/src/glyph/Glyph.js

@@ -0,0 +1,270 @@
+import { cache } from '../decorators';
+import Path from './Path';
+import {isMark} from '../packages/unicode-properties/index.js';
+import StandardNames from './StandardNames';
+
+/**
+ * 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.
+ *
+ * You do not create glyph objects directly. They are created by various methods on the font object.
+ * There are several subclasses of the base Glyph class internally that may be returned depending
+ * on the font format, but they all inherit from this class.
+ */
+export default class Glyph {
+  constructor(id, codePoints, font) {
+    /**
+     * The glyph id in the font
+     * @type {number}
+     */
+    this.id = id;
+
+    /**
+     * An array of unicode code points that are represented by this glyph.
+     * There can be multiple code points in the case of ligatures and other glyphs
+     * that represent multiple visual characters.
+     * @type {number[]}
+     */
+    this.codePoints = codePoints;
+    this._font = font;
+
+    // TODO: get this info from GDEF if available
+    this.isMark = this.codePoints.length > 0 && this.codePoints.every(isMark);
+    this.isLigature = this.codePoints.length > 1;
+  }
+
+  _getPath() {
+    return new Path();
+  }
+
+  _getCBox() {
+    return this.path.cbox;
+  }
+
+  _getBBox() {
+    return this.path.bbox;
+  }
+
+  _getTableMetrics(table) {
+    if (this.id < table.metrics.length) {
+      return table.metrics.get(this.id);
+    }
+
+    let metric = table.metrics.get(table.metrics.length - 1);
+    let res = {
+      advance: metric ? metric.advance : 0,
+      bearing: table.bearings.get(this.id - table.metrics.length) || 0
+    };
+
+    return res;
+  }
+
+  _getMetrics(cbox) {
+    if (this._metrics) { return this._metrics; }
+    if (cbox == null) { ({ cbox } = this); }
+
+    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));
+    } else {
+      advanceHeight = Math.abs(this._font.ascent - this._font.descent);
+      topBearing = this._font.ascent - cbox.maxY;
+    }
+
+    if (this._font._variationProcessor && this._font.HVAR) {
+      advanceWidth += this._font._variationProcessor.getAdvanceAdjustment(this.id, this._font.HVAR);
+    }
+
+    let {width, height} = cbox;
+    return this._metrics = {
+      width,
+      height,
+      advanceWidth,
+      advanceHeight,
+      leftBearing,
+      topBearing,
+      rightBearing: advanceWidth - leftBearing - width,
+      bottomBearing: advanceHeight - topBearing - height
+    };
+  }
+
+  /**
+   * The glyph’s control box.
+   * This is often the same as the bounding box, but is faster to compute.
+   * Because of the way bezier curves are defined, some of the control points
+   * can be outside of the bounding box. Where `bbox` takes this into account,
+   * `cbox` does not. Thus, cbox is less accurate, but faster to compute.
+   * See [here](http://www.freetype.org/freetype2/docs/glyphs/glyphs-6.html#section-2)
+   * for a more detailed description.
+   *
+   * @type {BBox}
+   */
+  @cache
+  get cbox() {
+    return this._getCBox();
+  }
+
+  /**
+   * The glyph’s bounding box, i.e. the rectangle that encloses the
+   * glyph outline as tightly as possible.
+   * @type {BBox}
+   */
+  @cache
+  get bbox() {
+    return this._getBBox();
+  }
+
+  /**
+   * A vector Path object representing the glyph outline.
+   * @type {Path}
+   */
+  @cache
+  get path() {
+    // Cache the path so we only decode it once
+    // Decoding is actually performed by subclasses
+    return this._getPath();
+  }
+
+  /**
+   * Returns a path scaled to the given font size.
+   * @param {number} size
+   * @return {Path}
+   */
+  getScaledPath(size) {
+    let scale = 1 / this._font.unitsPerEm * size;
+    return this.path.scale(scale);
+  }
+
+  /**
+   * The glyph's width.
+   * @type {number}
+   */
+  @cache
+  get width() {
+    return this._getMetrics().width;
+  }
+
+  /**
+   * The glyph's height.
+   * @type {number}
+   */
+  @cache
+  get height() {
+    return this._getMetrics().height;
+  }
+
+  /**
+   * The glyph's advance width.
+   * @type {number}
+   */
+  @cache
+  get advanceWidth() {
+    return this._getMetrics().advanceWidth;
+  }
+
+  /**
+   * The glyph's advance height.
+   * @type {number}
+   */
+  @cache
+  get advanceHeight() {
+    return this._getMetrics().advanceHeight;
+  }
+
+  /**
+   * The glyph's left side bearing.
+   * @type {number}
+   */
+  @cache
+  get leftBearing() {
+    return this._getMetrics().leftBearing;
+  }
+
+  /**
+   * The glyph's top side bearing.
+   * @type {number}
+   */
+  @cache
+  get topBearing() {
+    return this._getMetrics().topBearing;
+  }
+
+  /**
+   * The glyph's right side bearing.
+   * @type {number}
+   */
+  @cache
+  get rightBearing() {
+    return this._getMetrics().rightBearing;
+  }
+
+  /**
+   * The glyph's bottom side bearing.
+   * @type {number}
+   */
+  @cache
+  get bottomBearing() {
+    return this._getMetrics().bottomBearing;
+  }
+
+  get ligatureCaretPositions() {
+    return null;
+  }
+
+  _getName() {
+    let { post } = this._font;
+    if (!post) {
+      return null;
+    }
+
+    switch (post.version) {
+      case 1:
+        return StandardNames[this.id];
+
+      case 2: {
+        let id = post.glyphNameIndex[this.id];
+        if (id < StandardNames.length) {
+          return StandardNames[id];
+        }
+
+        return post.names[id - StandardNames.length];
+      }
+
+      case 2.5:
+        return StandardNames[this.id + post.offsets[this.id]];
+
+      case 4:
+        return String.fromCharCode(post.map[this.id]);
+    }
+  }
+
+  /**
+   * The glyph's name
+   * @type {string}
+   */
+  @cache
+  get name() {
+    return this._getName();
+  }
+
+  /**
+   * Renders the glyph to the given graphics context, at the specified font size.
+   * @param {CanvasRenderingContext2d} ctx
+   * @param {number} size
+   */
+  render(ctx, size) {
+    ctx.save();
+
+    let scale = 1 / this._font.head.unitsPerEm * size;
+    ctx.scale(scale, scale);
+
+    let fn = this.path.toFunction();
+    fn(ctx);
+    ctx.fill();
+
+    ctx.restore();
+  }
+}