COLRv1 support

src/TTFFont.js

@@ -8,7 +8,8 @@ import LayoutEngine from './layout/LayoutEngine';
 import TTFGlyph from './glyph/TTFGlyph';
 import CFFGlyph from './glyph/CFFGlyph';
 import SBIXGlyph from './glyph/SBIXGlyph';
-import COLRGlyph from './glyph/COLRGlyph';
+import { COLRGlyph, COLRv1Glyph } from './glyph/COLRGlyph';
+import { PAINT_OPERATIONS } from './glyph/PaintOperation';
 import GlyphVariationProcessor from './glyph/GlyphVariationProcessor';
 import TTFSubset from './subset/TTFSubset';
 import CFFSubset from './subset/CFFSubset';
@@ -386,17 +387,34 @@ export default class TTFFont {
 
   _getBaseGlyph(glyph, characters = []) {
     if (!this._glyphs[glyph]) {
-      if (this.directory.tables.glyf) {
-        this._glyphs[glyph] = new TTFGlyph(glyph, characters, this);
-
-      } else if (this.directory.tables['CFF '] || this.directory.tables.CFF2) {
-        this._glyphs[glyph] = new CFFGlyph(glyph, characters, this);
-      }
+      this._glyphs[glyph] = this._getBaseGlyphUncached(glyph, characters)
     }
 
     return this._glyphs[glyph] || null;
   }
 
+  _getBaseGlyphUncached(glyph, characters = []) {
+    if (this.directory.tables.glyf) {
+      return new TTFGlyph(glyph, characters, this);
+    } else if (this.directory.tables['CFF '] || this.directory.tables.CFF2) {
+      return new CFFGlyph(glyph, characters, this);
+    }
+  }
+
+  _getColrGlyph(glyph, characters = []) {
+    if (this.COLR.version == 1 && this.COLR.baseGlyphList) {
+      for (let baseGlyph of this.COLR.baseGlyphList.baseGlyphPaintRecords) {
+        if (baseGlyph.gid == glyph) {
+          let colorGlyph = new COLRv1Glyph(glyph, characters, this)
+          colorGlyph.paint = (new PAINT_OPERATIONS[baseGlyph.paint.version])(baseGlyph.paint, this);
+          return colorGlyph
+        }
+      }
+    }
+    // Either v0 format, no BaseGlyphList, or not found -> treat as COLRv0
+    return new COLRGlyph(glyph, characters, this);
+  }
+
   /**
    * Returns a glyph object for the given glyph id.
    * You can pass the array of code points this glyph represents for
@@ -412,8 +430,8 @@ export default class TTFFont {
         this._glyphs[glyph] = new SBIXGlyph(glyph, characters, this);
 
       } else if ((this.directory.tables.COLR) && (this.directory.tables.CPAL)) {
-        this._glyphs[glyph] = new COLRGlyph(glyph, characters, this);
-
+        // Each glyph may be either COLRv0 (layers) or COLRv1 (paint tree)
+        this._glyphs[glyph] = this._getColrGlyph(glyph, characters);
       } else {
         this._getBaseGlyph(glyph, characters);
       }

src/glyph/COLRGlyph.js

@@ -13,7 +13,7 @@ class COLRLayer {
  * Each glyph in this format contain a list of colored layers, each
  * of which  is another vector glyph.
  */
-export default class COLRGlyph extends Glyph {
+export class COLRGlyph extends Glyph {
   type = 'COLR';
 
   _getBBox() {
@@ -87,4 +87,51 @@ export default class COLRGlyph extends Glyph {
 
     return;
   }
+  _getContours() {
+    var base = this._font._getBaseGlyphUncached(this.id);
+    return base._getContours();
+  }
+
+}
+
+/**
+ * Represents a color (e.g. emoji) glyph in Microsoft/Google's COLRv1
+ * format. Each glyph in this format contains a directed acyclic graph
+ * of Paint structures.
+ */
+export class COLRv1Glyph extends COLRGlyph {
+  type = 'COLRv1';
+
+  _getBBox() {
+    // If we have a clip list item, use that
+    let colr = this._font.COLR;
+    if (colr.clipList) {
+      for (var clip of colr.clipList.clips) {
+        if (clip.startGlyphId <= this.id && this.id <= clip.endGlyphId) {
+          let box = clip.clipBox;
+          return new BBox(
+            box.xMin,
+            box.yMin,
+            box.xMax,
+            box.yMax
+          );
+        }
+      }
+    }
+    return super._getBBox();
+  }
+  render(ctx, size) {
+    // One scale only.
+    ctx.save();
+    let scale = 1 / this._font.unitsPerEm * size;
+    ctx.scale(scale, scale);
+
+    let paint = this.paint;
+    if (this._font.variationCoords) {
+      paint = paint.instantiate(this._font._variationProcessor);
+    }
+
+    paint.render(ctx, size);
+    ctx.restore();
+  }
 }