From 050c5fcdc4e9ec6b63e6f119801adae8a114a9ca Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 18 Jun 2016 22:23:05 -0700 Subject: [PATCH 1/5] Added definitions for opentype.js --- opentype/opentype-tests.ts | 66 ++++++++++ opentype/opentype.d.ts | 249 +++++++++++++++++++++++++++++++++++++ 2 files changed, 315 insertions(+) create mode 100644 opentype/opentype-tests.ts create mode 100644 opentype/opentype.d.ts diff --git a/opentype/opentype-tests.ts b/opentype/opentype-tests.ts new file mode 100644 index 0000000000..696ed2de51 --- /dev/null +++ b/opentype/opentype-tests.ts @@ -0,0 +1,66 @@ +/// + +var x = 0; +var y = 0; +var fontSize = 72; +var options; +var ctx: CanvasRenderingContext2D; + +opentype.load('fonts/Roboto-Black.ttf', function(err, font) { + if (err) { + alert('Font could not be loaded: ' + err); + } else { + var 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; +var font = opentype.parse(myBuffer); +font = opentype.loadSync('fonts/Roboto-Black.ttf'); + +var 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); +// more drawing instructions... +var aGlyph = new opentype.Glyph({ + name: 'A', + unicode: 65, + advanceWidth: 650, + path: aPath +}); + +var glyphs = [notdefGlyph, aGlyph]; +var font = new opentype.Font({ + familyName: 'OpenTypeSans', + styleName: 'Medium', + unitsPerEm: 1000, + ascender: 800, + descender: -200, + glyphs: glyphs}); +font.download(); + +font.getPath('text', x, y, fontSize, options); +font.draw(ctx, 'text', x, y, fontSize, options); +font.drawPoints(ctx, 'text', x, y, fontSize, options); +font.drawMetrics(ctx, 'text', x, y, fontSize, options); +font.stringToGlyphs('string'); +font.charToGlyph('c'); +font.getKerningValue(notdefGlyph, aGlyph); + +aGlyph.getPath(x, y, fontSize); +aGlyph.draw(ctx, x, y, fontSize); +aGlyph.drawPoints(ctx, x, y, fontSize); +aGlyph.drawMetrics(ctx, x, y, fontSize); + +aPath.draw(ctx); +aPath.toPathData(7); +aPath.toSVG(7); diff --git a/opentype/opentype.d.ts b/opentype/opentype.d.ts new file mode 100644 index 0000000000..ff09104dfd --- /dev/null +++ b/opentype/opentype.d.ts @@ -0,0 +1,249 @@ +// Type definitions for opentype.js +// Project: https://github.com/nodebox/opentype.js +// Definitions by: Dan Marshall +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +// Type definitions for opentype.js +// Project: https://github.com/nodebox/opentype.js +// Definitions by: Dan Marshall +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +declare namespace opentypejs { + + interface Contour extends Array { + } + + class Encoding { + charset: string; + charToGlyphIndex(c: string): number; + font: Font; + } + + interface Field { + name: string; + type: string; + value: any; + } + + class Font { + private nametoGlyphIndex; + private supported; + constructor(options: FontOptions); + ascender: number; + cffEncoding: Encoding; + 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; + 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; + 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 { + copyright: LocalizedName; + description: LocalizedName; + designer: LocalizedName; + designerURL: LocalizedName; + fontFamily: LocalizedName; + fontSubfamily: LocalizedName; + fullName: LocalizedName; + license: LocalizedName; + licenseURL: LocalizedName; + manufacturer: LocalizedName; + manufacturerURL: LocalizedName; + postScriptName: LocalizedName; + trademark: LocalizedName; + 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; + } + + class Glyph { + private index; + private xMin; + private xMax; + 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; }; + unicode: number; + unicodes: number[]; + } + + interface GlyphOptions { + advanceWidth?: number; + index?: number; + font?: Font; + name?: string; + path?: Path; + unicode?: number; + unicodes?: number[]; + xMax?: number; + xMin?: number; + yMax?: number; + yMin?: number; + } + + class GlyphNames { + private names; + constructor(post: Post); + glyphIndexToName(gid: number): string; + nameToGlyphIndex(name: string): number; + } + + class GlyphSet { + private font; + private glyphs; + constructor(font: Font, glyphs: Glyph[] | { (): Glyph; }[]); + get(index: number): Glyph; + length: number; + push(index: number, loader: { (): Glyph; }): void; + } + + interface KerningPairs { + [pair: string]: number; + } + + function load(url: string, callback: { (error: any, font?: Font): void; }): void; + + function loadSync(url: string): Font; + + interface LocalizedName { + [lang: string]: string; + } + + interface Metrics { + leftSideBearing: number; + rightSideBearing?: number; + xMax: number; + xMin: number; + yMax: number; + yMin: number; + } + + function parse(buffer: any): Font; + + 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 { + glyphNameIndex?: number[]; + isFixedPitch: number; + italicAngle: number; + maxMemType1: number; + minMemType1: number; + maxMemType42: number; + minMemType42: number; + names?: string[]; + numberOfGlyphs?: number; + offset?: number[]; + underlinePosition: number; + underlineThickness: number; + version: number; + } + + interface RenderOptions { + kerning: boolean; + } + + interface Table { + [propName: string]: any; + encode(): number[]; + fields: Field[]; + sizeOf(): number; + tables: Table[]; + tableName: string; + } + +} + +declare var opentype: typeof opentypejs; From a29af1859902375b3048d859c5c5fb397e55f133 Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 18 Jun 2016 22:26:03 -0700 Subject: [PATCH 2/5] removed non-type options var --- opentype/opentype-tests.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/opentype/opentype-tests.ts b/opentype/opentype-tests.ts index 696ed2de51..d70e4f56fb 100644 --- a/opentype/opentype-tests.ts +++ b/opentype/opentype-tests.ts @@ -3,7 +3,6 @@ var x = 0; var y = 0; var fontSize = 72; -var options; var ctx: CanvasRenderingContext2D; opentype.load('fonts/Roboto-Black.ttf', function(err, font) { @@ -48,10 +47,10 @@ var font = new opentype.Font({ glyphs: glyphs}); font.download(); -font.getPath('text', x, y, fontSize, options); -font.draw(ctx, 'text', x, y, fontSize, options); -font.drawPoints(ctx, 'text', x, y, fontSize, options); -font.drawMetrics(ctx, 'text', x, y, fontSize, options); +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); From 864bb0cb15f85b1f6d1c1c1c915edb032a6bc1b3 Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Sat, 18 Jun 2016 22:27:57 -0700 Subject: [PATCH 3/5] cast MyBuffer --- opentype/opentype-tests.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/opentype/opentype-tests.ts b/opentype/opentype-tests.ts index d70e4f56fb..758b09283c 100644 --- a/opentype/opentype-tests.ts +++ b/opentype/opentype-tests.ts @@ -15,7 +15,7 @@ opentype.load('fonts/Roboto-Black.ttf', function(err, font) { } }); -var myBuffer; +var myBuffer: ArrayBuffer; var font = opentype.parse(myBuffer); font = opentype.loadSync('fonts/Roboto-Black.ttf'); From 35066584f8ed8fc9e9f3cdc5cfb2f79a75a7c4bd Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Mon, 20 Jun 2016 11:45:30 -0700 Subject: [PATCH 4/5] removed duplicate header copy paste error --- opentype/opentype.d.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/opentype/opentype.d.ts b/opentype/opentype.d.ts index ff09104dfd..4e98b12ece 100644 --- a/opentype/opentype.d.ts +++ b/opentype/opentype.d.ts @@ -3,11 +3,6 @@ // Definitions by: Dan Marshall // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -// Type definitions for opentype.js -// Project: https://github.com/nodebox/opentype.js -// Definitions by: Dan Marshall -// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped - declare namespace opentypejs { interface Contour extends Array { From 1dafe949f6aa2ba44cde014760bf71ff6169fadf Mon Sep 17 00:00:00 2001 From: Dan Marshall Date: Mon, 20 Jun 2016 11:49:21 -0700 Subject: [PATCH 5/5] added module declaration --- opentype/opentype.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/opentype/opentype.d.ts b/opentype/opentype.d.ts index 4e98b12ece..fec42369a1 100644 --- a/opentype/opentype.d.ts +++ b/opentype/opentype.d.ts @@ -242,3 +242,7 @@ declare namespace opentypejs { } declare var opentype: typeof opentypejs; + +declare module "opentype.js" { + export = opentype; +}