Merge pull request #23602 from OrangeLV/master

opentype.js: update to 0.7.3, add more tests

types/maker.js/index.d.ts

@@ -2,6 +2,7 @@
 // Project: https://github.com/Microsoft/maker.js
 // Definitions by: Dan Marshall <https://github.com/danmarshall>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.1
 
 /// <reference types="pdfkit" />
 /// <reference types="bezier-js" />

types/opentype.js/index.d.ts

@@ -1,66 +1,152 @@
-// Type definitions for opentype.js
+// Type definitions for opentype.js 0.7
 // Project: https://github.com/nodebox/opentype.js
 // Definitions by: Dan Marshall <https://github.com/danmarshall>
+//                 Edgar Simson <https://github.com/edzis>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.1
 
 export as namespace opentype;
 
-interface Contour extends Array<Point> {
-}
-
-export class Encoding {
-    charset: string;
-    charToGlyphIndex(c: string): number;
-    font: Font;
-}
-
-interface Field {
-    name: string;
-    type: string;
-    value: any;
-}
+/******************************************
+ * FONT
+ ******************************************/
 
 export class Font {
-    private nametoGlyphIndex;
-    private supported;
-    constructor(options: FontOptions);
+    names: FontNames;
+    unitsPerEm: number;
     ascender: number;
-    cffEncoding: Encoding;
+    descender: number;
+    createdTimestamp: number;
+    tables: { [tableName: string]: Table };
+    supported: boolean;
+    glyphs: GlyphSet;
+    encoding: Encoding;
+    substitution: Substitution;
+
+    readonly defaultRenderOptions: RenderOptions;
+
+    constructor(options: FontConstructorOptions);
+
     charToGlyph(c: string): Glyph;
     charToGlyphIndex(s: string): number;
-    descender: number;
-    download(): void;
-    draw(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, fontSize: number, options?: RenderOptions): void;
-    drawMetrics(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, fontSize: number, options?: RenderOptions): void;
-    drawPoints(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, fontSize: number, options?: RenderOptions): void;
-    encoding: Encoding;
-    forEachGlyph(text: string, x: number, y: number, fontSize: number, options: RenderOptions, callback: { (glyph: Glyph, x: number, y: number, fontSize: number, options?: RenderOptions): void; }): void;
+    download(fileName?: string): void;
+    draw(
+        ctx: CanvasRenderingContext2D,
+        text: string,
+        x?: number,
+        y?: number,
+        fontSize?: number,
+        options?: RenderOptions
+    ): void;
+    drawMetrics(
+        ctx: CanvasRenderingContext2D,
+        text: string,
+        x?: number,
+        y?: number,
+        fontSize?: number,
+        options?: RenderOptions
+    ): void;
+    drawPoints(
+        ctx: CanvasRenderingContext2D,
+        text: string,
+        x?: number,
+        y?: number,
+        fontSize?: number,
+        options?: RenderOptions
+    ): void;
+    forEachGlyph(
+        text: string,
+        x: number | undefined,
+        y: number | undefined,
+        fontSize: number | undefined,
+        options: RenderOptions | undefined,
+        callback: (
+            glyph: Glyph,
+            x: number,
+            y: number,
+            fontSize: number,
+            options?: RenderOptions
+        ) => void
+    ): number;
+    getAdvanceWidth(
+        text: string,
+        fontSize?: number,
+        options?: RenderOptions
+    ): number;
     getEnglishName(name: string): string;
-    getGposKerningValue: { (leftGlyph: Glyph | number, rightGlyph: Glyph | number): number; };
-    getKerningValue(leftGlyph: Glyph | number, rightGlyph: Glyph | number): number;
-    getPath(text: string, x: number, y: number, fontSize: number, options?: RenderOptions): Path;
-    getPaths(text: string, x: number, y: number, fontSize: number, options?: RenderOptions): Path[];
-    glyphs: GlyphSet;
+    getKerningValue(
+        leftGlyph: Glyph | number,
+        rightGlyph: Glyph | number
+    ): number;
+    getPath(
+        text: string,
+        x: number,
+        y: number,
+        fontSize: number,
+        options?: RenderOptions
+    ): Path;
+    getPaths(
+        text: string,
+        x: number,
+        y: number,
+        fontSize: number,
+        options?: RenderOptions
+    ): Path[];
     glyphIndexToName(gid: number): string;
     glyphNames: GlyphNames;
     hasChar(c: string): boolean;
     kerningPairs: KerningPairs;
-    names: FontNames;
     nameToGlyph(name: string): Glyph;
     nameToGlyphIndex(name: string): number;
     numberOfHMetrics: number;
     numGlyphs: number;
     outlinesFormat: string;
     stringToGlyphs(s: string): Glyph[];
-    tables: { [tableName: string]: Table; };
     toArrayBuffer(): ArrayBuffer;
     toBuffer(): ArrayBuffer;
     toTables(): Table;
-    unitsPerEm: number;
     validate(): void;
 }
 
-interface FontNames {
+export type FontConstructorOptions = FontConstructorOptionsBase &
+    Partial<FontOptions> & {
+        glyphs: Glyph[];
+    };
+
+export interface FontOptions {
+    empty?: boolean;
+    familyName: string;
+    styleName: string;
+    fullName?: string;
+    postScriptName?: string;
+    designer?: string;
+    designerURL?: string;
+    manufacturer?: string;
+    manufacturerURL?: string;
+    license?: string;
+    licenseURL?: string;
+    version?: string;
+    description?: string;
+    copyright?: string;
+    trademark?: string;
+    unitsPerEm: number;
+    ascender: number;
+    descender: number;
+    createdTimestamp: number;
+    weightClass?: string;
+    widthClass?: string;
+    fsSelection?: string;
+}
+
+export interface FontConstructorOptionsBase {
+    familyName: string;
+    styleName: string;
+    unitsPerEm: number;
+    ascender: number;
+    descender: number;
+}
+
+export interface FontNames {
     copyright: LocalizedName;
     description: LocalizedName;
     designer: LocalizedName;
@@ -77,28 +163,33 @@ interface FontNames {
     version: LocalizedName;
 }
 
-interface FontOptions {
-    copyright?: string;
-    ascender?: number;
-    descender?: number;
-    description?: string;
-    designer?: string;
-    designerURL?: string;
-    empty?: boolean;
-    familyName?: string;
-    fullName?: string;
-    glyphs?: Glyph[] | GlyphSet;
-    license?: string;
-    licenseURL?: string;
-    manufacturer?: string;
-    manufacturerURL?: string;
-    postScriptName?: string;
-    styleName?: string;
-    unitsPerEm?: number;
-    trademark?: string;
-    version?: string;
+export interface Table {
+    [propName: string]: any;
+    encode(): number[];
+    fields: Field[];
+    sizeOf(): number;
+    tables: Table[];
+    tableName: string;
 }
 
+export interface KerningPairs {
+    [pair: string]: number;
+}
+
+export interface LocalizedName {
+    [lang: string]: string;
+}
+
+export interface Field {
+    name: string;
+    type: string;
+    value: any;
+}
+
+/******************************************
+ * GLYPH
+ ******************************************/
+
 export class Glyph {
     private index;
     private xMin;
@@ -106,23 +197,50 @@ export class Glyph {
     private yMin;
     private yMax;
     private points;
-    constructor(options: GlyphOptions);
-    addUnicode(unicode: number): void;
-    advanceWidth: number;
-    bindConstructorValues(options: GlyphOptions): void;
-    draw(ctx: CanvasRenderingContext2D, x: number, y: number, fontSize: number): void;
-    drawMetrics(ctx: CanvasRenderingContext2D, x: number, y: number, fontSize: number): void;
-    drawPoints(ctx: CanvasRenderingContext2D, x: number, y: number, fontSize: number): void;
-    getContours(): Contour[];
-    getMetrics(): Metrics;
-    getPath(x: number, y: number, fontSize: number): Path;
+
     name: string;
-    path: Path | { (): Path; };
+    path: Path | (() => Path);
     unicode: number;
     unicodes: number[];
-}
+    advanceWidth: number;
 
-interface GlyphOptions {
+    constructor(options: GlyphOptions);
+
+    addUnicode(unicode: number): void;
+    bindConstructorValues(options: GlyphOptions): void;
+    draw(
+        ctx: CanvasRenderingContext2D,
+        x?: number,
+        y?: number,
+        fontSize?: number,
+        options?: RenderOptions
+    ): void;
+    drawMetrics(
+        ctx: CanvasRenderingContext2D,
+        x?: number,
+        y?: number,
+        fontSize?: number,
+        options?: RenderOptions
+    ): void;
+    drawPoints(
+        ctx: CanvasRenderingContext2D,
+        x?: number,
+        y?: number,
+        fontSize?: number,
+        options?: RenderOptions
+    ): void;
+    getBoundingBox(): BoundingBox;
+    getContours(): Contour;
+    getMetrics(): Metrics;
+    getPath(
+        x?: number,
+        y?: number,
+        fontSize?: number,
+        options?: RenderOptions,
+        font?: Font
+    ): Path;
+}
+export interface GlyphOptions {
     advanceWidth?: number;
     index?: number;
     font?: Font;
@@ -146,71 +264,13 @@ export class GlyphNames {
 export class GlyphSet {
     private font;
     private glyphs;
-    constructor(font: Font, glyphs: Glyph[] | { (): Glyph; }[]);
+    constructor(font: Font, glyphs: Glyph[] | Array<(() => Glyph)>);
     get(index: number): Glyph;
     length: number;
-    push(index: number, loader: { (): Glyph; }): void;
+    push(index: number, loader: () => Glyph): void;
 }
 
-interface KerningPairs {
-    [pair: string]: number;
-}
-
-export function load(url: string, callback: { (error: any, font?: Font): void; }): void;
-
-export function loadSync(url: string): Font;
-
-interface LocalizedName {
-    [lang: string]: string;
-}
-
-interface Metrics {
-    leftSideBearing: number;
-    rightSideBearing?: number;
-    xMax: number;
-    xMin: number;
-    yMax: number;
-    yMin: number;
-}
-
-export function parse(buffer: any): Font;
-
-export class Path {
-    private fill;
-    private stroke;
-    private strokeWidth;
-    constructor();
-    bezierCurveTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number): void;
-    close: () => void;
-    closePath(): void;
-    commands: PathCommand[];
-    curveTo: (x1: number, y1: number, x2: number, y2: number, x: number, y: number) => void;
-    draw(ctx: CanvasRenderingContext2D): void;
-    extend(pathOrCommands: Path | PathCommand[]): void;
-    lineTo(x: number, y: number): void;
-    moveTo(x: number, y: number): void;
-    quadraticCurveTo(x1: number, y1: number, x: number, y: number): void;
-    quadTo: (x1: number, y1: number, x: number, y: number) => void;
-    toPathData(decimalPlaces: number): string;
-    toSVG(decimalPlaces: number): string;
-    unitsPerEm: number;
-}
-
-interface PathCommand {
-    type: string;
-    x?: number;
-    y?: number;
-    x1?: number;
-    y1?: number;
-    x2?: number;
-    y2?: number;
-}
-
-interface Point {
-    lastPointOfContour?: boolean;
-}
-
-interface Post {
+export interface Post {
     glyphNameIndex?: number[];
     isFixedPitch: number;
     italicAngle: number;
@@ -226,15 +286,108 @@ interface Post {
     version: number;
 }
 
-interface RenderOptions {
-    kerning: boolean;
+export interface RenderOptions {
+    script?: string;
+    language?: string;
+    kerning?: boolean;
+    xScale?: number;
+    yScale?: number;
+    features?: {
+        [key: string]: boolean;
+    };
 }
 
-interface Table {
-    [propName: string]: any;
-    encode(): number[];
-    fields: Field[];
-    sizeOf(): number;
-    tables: Table[];
-    tableName: string;
+export interface Metrics {
+    leftSideBearing: number;
+    rightSideBearing?: number;
+    xMax: number;
+    xMin: number;
+    yMax: number;
+    yMin: number;
 }
+
+export interface Contour extends Array<Point> {}
+
+export interface Point {
+    lastPointOfContour?: boolean;
+}
+
+/******************************************
+ * PATH
+ ******************************************/
+
+export class Path {
+    private fill;
+    private stroke;
+    private strokeWidth;
+    constructor();
+    bezierCurveTo(
+        x1: number,
+        y1: number,
+        x2: number,
+        y2: number,
+        x: number,
+        y: number
+    ): void;
+    close: () => void;
+    closePath(): void;
+    commands: PathCommand[];
+    curveTo: (
+        x1: number,
+        y1: number,
+        x2: number,
+        y2: number,
+        x: number,
+        y: number
+    ) => void;
+    draw(ctx: CanvasRenderingContext2D): void;
+    extend(pathOrCommands: Path | PathCommand[] | BoundingBox): void;
+    getBoundingBox(): BoundingBox;
+    lineTo(x: number, y: number): void;
+    moveTo(x: number, y: number): void;
+    quadraticCurveTo(x1: number, y1: number, x: number, y: number): void;
+    quadTo: (x1: number, y1: number, x: number, y: number) => void;
+    toDOMElement(decimalPlaces: number): SVGPathElement;
+    toPathData(decimalPlaces: number): string;
+    toSVG(decimalPlaces: number): string;
+    unitsPerEm: number;
+}
+
+export interface PathCommand {
+    type: string;
+    x?: number;
+    y?: number;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+}
+
+/******************************************
+ * UTIL CLASSES
+ ******************************************/
+
+export type BoundingBox = () => any;
+// TODO add methods
+
+export interface Encoding {
+    charset: string;
+    charToGlyphIndex(c: string): number;
+    font: Font;
+}
+
+export type Substitution = (font: Font) => any;
+// TODO add methods
+
+/******************************************
+ * STATIC
+ ******************************************/
+
+export function load(
+    url: string,
+    callback: (error: any, font?: Font) => void
+): void;
+
+export function loadSync(url: string): Font;
+
+export function parse(buffer: any): Font;

types/opentype.js/opentype.js-tests.ts

@@ -1,63 +1,119 @@
-var x = 0;
-var y = 0;
-var fontSize = 72;
-var ctx: CanvasRenderingContext2D;
+const x = 0;
+const y = 0;
+const fontSize = 72;
+let ctx: CanvasRenderingContext2D;
 
-opentype.load('fonts/Roboto-Black.ttf', function(err, font) {
+opentype.load('fonts/Roboto-Black.ttf', (err, font) => {
     if (err) {
-         alert('Font could not be loaded: ' + err);
+        alert('Font could not be loaded: ' + err);
     } else {
-        var path = font.getPath('Hello, World!', 0, 150, 72);
+        const path = font.getPath('Hello, World!', 0, 150, 72);
         // If you just want to draw the text you can also use font.draw(ctx, text, x, y, fontSize).
         path.draw(ctx);
     }
 });
 
-var myBuffer: ArrayBuffer;
-var font = opentype.parse(myBuffer);
+let myBuffer: ArrayBuffer;
+let font = opentype.parse(myBuffer);
 font = opentype.loadSync('fonts/Roboto-Black.ttf');
 
-var notdefGlyph = new opentype.Glyph({
+const notdefGlyph = new opentype.Glyph({
     name: '.notdef',
     unicode: 0,
     advanceWidth: 650,
     path: new opentype.Path()
 });
 
-var aPath = new opentype.Path();
-aPath.moveTo(100, 0);
-aPath.lineTo(100, 700);
+const aPath = new opentype.Path();
 // more drawing instructions...
-var aGlyph = new opentype.Glyph({
+const aGlyph = new opentype.Glyph({
     name: 'A',
     unicode: 65,
     advanceWidth: 650,
     path: aPath
 });
 
-var glyphs = [notdefGlyph, aGlyph];
-var font = new opentype.Font({
+const glyphs = [notdefGlyph, aGlyph];
+const fontGenerated = new opentype.Font({
     familyName: 'OpenTypeSans',
     styleName: 'Medium',
     unitsPerEm: 1000,
     ascender: 800,
     descender: -200,
-    glyphs: glyphs});
+
+    glyphs
+});
 font.download();
 
-font.getPath('text', x, y, fontSize);
-font.draw(ctx, 'text', x, y, fontSize);
-font.drawPoints(ctx, 'text', x, y, fontSize);
-font.drawMetrics(ctx, 'text', x, y, fontSize);
-font.stringToGlyphs('string');
-font.charToGlyph('c');
-font.getKerningValue(notdefGlyph, aGlyph);
+const hasChar: boolean = font.hasChar('a');
+const charIndex: number = font.charToGlyphIndex('a');
+const charGlyph: opentype.Glyph = font.charToGlyph('a');
+const charGlyphs: opentype.Glyph[] = font.stringToGlyphs('abc');
+const nameIndex: number = font.nameToGlyphIndex('a');
+const nameGlyph: opentype.Glyph = font.nameToGlyph('a');
+const indexName: string = font.glyphIndexToName(1);
+const kerning: number = font.getKerningValue(notdefGlyph, aGlyph);
+font.defaultRenderOptions.kerning = false;
+const forEachWidth: number = font.forEachGlyph(
+    'text',
+    x,
+    y,
+    fontSize,
+    {
+        kerning: true
+    },
+    (glyph: opentype.Glyph, x: number, y: number, fontSize: number) => {
+        console.log({
+            glyph,
+            x,
+            y,
+            fontSize
+        });
+    }
+);
+const fontPath: opentype.Path = font.getPath('text', x, y, fontSize, {});
+const fontPaths: opentype.Path[] = font.getPaths('text', x, y, fontSize, {});
+const fontWidth: number = font.getAdvanceWidth('text', fontSize, { yScale: 0.5 });
+font.draw(ctx, 'text');
+font.drawPoints(ctx, 'text', x, y, fontSize, { yScale: 0.5 });
+font.drawMetrics(ctx, 'text', x, y, fontSize, { xScale: 1.1, yScale: 0.5 });
+const engName: string = font.getEnglishName('a');
+font.validate();
+const tables: opentype.Table = font.toTables();
+const ab: ArrayBuffer = font.toArrayBuffer();
+font.download();
+font.download('fileName.ttf');
 
-aGlyph.getPath(x, y, fontSize);
-aGlyph.draw(ctx, x, y, fontSize);
+aGlyph.bindConstructorValues({ advanceWidth: 1 });
+aGlyph.addUnicode(42);
+const glyphBBox: opentype.BoundingBox = aGlyph.getBoundingBox();
+const glyphPathBasic: opentype.Path = aGlyph.getPath();
+const glyphPathFull: opentype.Path = aGlyph.getPath(
+    x,
+    y,
+    fontSize,
+    { xScale: 1, yScale: 2 },
+    font
+);
+const glyphContours: opentype.Contour = aGlyph.getContours();
+const glyphMetrics: opentype.Metrics = aGlyph.getMetrics();
+aGlyph.draw(ctx, x, y, fontSize, {});
 aGlyph.drawPoints(ctx, x, y, fontSize);
 aGlyph.drawMetrics(ctx, x, y, fontSize);
 
+aPath.moveTo(100, 0);
+aPath.lineTo(100, 700);
+aPath.curveTo(100, 700, 200, 800, 150, 750);
+aPath.bezierCurveTo(100, 700, 200, 800, 150, 750);
+aPath.quadTo(100, 700, 200, 800);
+aPath.quadraticCurveTo(100, 700, 200, 800);
+aPath.close();
+aPath.closePath();
+aPath.extend(aPath);
+aPath.extend(aPath.commands);
+aPath.extend(aPath.getBoundingBox());
+const pathBBox: opentype.BoundingBox = aPath.getBoundingBox();
 aPath.draw(ctx);
-aPath.toPathData(7);
-aPath.toSVG(7);
+const pathData: string = aPath.toPathData(7);
+const pathSvg: string = aPath.toSVG(7);
+const pathDom: SVGPathElement = aPath.toDOMElement(7);

types/opentype.js/tslint.json

@@ -1,79 +1,3 @@
 {
-    "extends": "dtslint/dt.json",
-    "rules": {
-        "adjacent-overload-signatures": false,
-        "array-type": false,
-        "arrow-return-shorthand": false,
-        "ban-types": false,
-        "callable-types": false,
-        "comment-format": false,
-        "dt-header": false,
-        "eofline": false,
-        "export-just-namespace": false,
-        "import-spacing": false,
-        "interface-name": false,
-        "interface-over-type-literal": false,
-        "jsdoc-format": false,
-        "max-line-length": false,
-        "member-access": false,
-        "new-parens": false,
-        "no-any-union": false,
-        "no-boolean-literal-compare": false,
-        "no-conditional-assignment": false,
-        "no-consecutive-blank-lines": false,
-        "no-construct": false,
-        "no-declare-current-package": false,
-        "no-duplicate-imports": false,
-        "no-duplicate-variable": false,
-        "no-empty-interface": false,
-        "no-for-in-array": false,
-        "no-inferrable-types": false,
-        "no-internal-module": false,
-        "no-irregular-whitespace": false,
-        "no-mergeable-namespace": false,
-        "no-misused-new": false,
-        "no-namespace": false,
-        "no-object-literal-type-assertion": false,
-        "no-padding": false,
-        "no-redundant-jsdoc": false,
-        "no-redundant-jsdoc-2": false,
-        "no-redundant-undefined": false,
-        "no-reference-import": false,
-        "no-relative-import-in-test": false,
-        "no-self-import": false,
-        "no-single-declare-module": false,
-        "no-string-throw": false,
-        "no-unnecessary-callback-wrapper": false,
-        "no-unnecessary-class": false,
-        "no-unnecessary-generics": false,
-        "no-unnecessary-qualifier": false,
-        "no-unnecessary-type-assertion": false,
-        "no-useless-files": false,
-        "no-var-keyword": false,
-        "no-var-requires": false,
-        "no-void-expression": false,
-        "no-trailing-whitespace": false,
-        "object-literal-key-quotes": false,
-        "object-literal-shorthand": false,
-        "one-line": false,
-        "one-variable-per-declaration": false,
-        "only-arrow-functions": false,
-        "prefer-conditional-expression": false,
-        "prefer-const": false,
-        "prefer-declare-function": false,
-        "prefer-for-of": false,
-        "prefer-method-signature": false,
-        "prefer-template": false,
-        "radix": false,
-        "semicolon": false,
-        "space-before-function-paren": false,
-        "space-within-parens": false,
-        "strict-export-declare-modifiers": false,
-        "trim-file": false,
-        "triple-equals": false,
-        "typedef-whitespace": false,
-        "unified-signatures": false,
-        "void-return": false,
-        "whitespace": false
-    }
+    "extends": "dtslint/dt.json"
 }