diff --git a/types/maker.js/index.d.ts b/types/maker.js/index.d.ts index ff6a7bd69e..e8be054a36 100644 --- a/types/maker.js/index.d.ts +++ b/types/maker.js/index.d.ts @@ -2,6 +2,7 @@ // Project: https://github.com/Microsoft/maker.js // Definitions by: Dan Marshall // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.1 /// /// diff --git a/types/opentype.js/index.d.ts b/types/opentype.js/index.d.ts index 24df752461..8dc449784d 100644 --- a/types/opentype.js/index.d.ts +++ b/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 +// Edgar Simson // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.1 export as namespace opentype; -interface Contour extends Array { -} - -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 & { + 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 {} + +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; diff --git a/types/opentype.js/opentype.js-tests.ts b/types/opentype.js/opentype.js-tests.ts index e4b9942bd9..04781d5415 100644 --- a/types/opentype.js/opentype.js-tests.ts +++ b/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); diff --git a/types/opentype.js/tslint.json b/types/opentype.js/tslint.json index a41bf5d19a..f93cf8562a 100644 --- a/types/opentype.js/tslint.json +++ b/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" }