From 82be5d12d16eb14fa81fbc70a32744141b4bf36d Mon Sep 17 00:00:00 2001 From: Patrick Walton Date: Mon, 19 Feb 2018 11:52:00 -0800 Subject: [PATCH] Update dependencies and fix TypeScript build failures. Closes #68. --- demo/client/css/pathfinder.css | 3 ++ demo/client/package.json | 32 +++++++++--------- demo/client/src/3d-demo.ts | 31 +++++++++++------ demo/client/src/app-controller.ts | 22 ++++++------ demo/client/src/benchmark.ts | 42 +++++++++++------------ demo/client/src/camera.ts | 8 ++--- demo/client/src/mesh-debugger.ts | 20 +++++------ demo/client/src/meshes.ts | 56 +++++++++++++++---------------- demo/client/src/reference-test.ts | 56 +++++++++++++++---------------- demo/client/src/renderer.ts | 12 +++---- demo/client/src/shader-loader.ts | 4 +-- demo/client/src/ssaa-strategy.ts | 6 ++-- demo/client/src/svg-demo.ts | 6 ++-- demo/client/src/svg-loader.ts | 5 ++- demo/client/src/svg-renderer.ts | 6 ++-- demo/client/src/text-demo.ts | 34 +++++++++---------- demo/client/src/text-renderer.ts | 10 +++--- demo/client/src/view.ts | 32 ++++++++++-------- demo/client/src/xcaa-strategy.ts | 12 ++++--- 19 files changed, 209 insertions(+), 188 deletions(-) diff --git a/demo/client/css/pathfinder.css b/demo/client/css/pathfinder.css index bac8fcc3..751b962a 100644 --- a/demo/client/css/pathfinder.css +++ b/demo/client/css/pathfinder.css @@ -183,6 +183,9 @@ button > svg path { label.pf-disabled { color: gray; } +.btn-group input[type="radio"] { + -moz-appearance: none; +} /* * Arrow diff --git a/demo/client/package.json b/demo/client/package.json index 4a3ddde6..10c30360 100644 --- a/demo/client/package.json +++ b/demo/client/package.json @@ -11,34 +11,34 @@ "license": "MIT OR Apache-2.0", "dependencies": { "@types/base64-js": "^1.2.5", - "@types/gl-matrix": "^2.3.0", - "@types/lodash": "^4.14.74", - "@types/node": "^8.0.28", + "@types/gl-matrix": "^2.4.0", + "@types/lodash": "^4.14.104", + "@types/node": "^8.9.4", "@types/opentype.js": "0.0.0", - "@types/papaparse": "^4.1.31", + "@types/papaparse": "^4.1.33", "@types/webgl-ext": "0.0.29", - "base64-js": "^1.2.1", - "bootstrap": "^4.0.0-beta", + "base64-js": "^1.2.3", + "bootstrap": "^4.0.0", "gl-matrix": "^2.4.0", - "handlebars": "^4.0.10", + "handlebars": "^4.0.11", "handlebars-loader": "^1.6.0", - "handlebars-webpack-plugin": "^1.2.0", - "html-loader": "^0.5.1", + "handlebars-webpack-plugin": "^1.3.2", + "html-loader": "^0.5.5", "image-ssim": "^0.2.0", - "jquery": "^3.2.1", - "lodash": "^4.17.4", + "jquery": "^3.3.1", + "lodash": "^4.17.5", "opentype.js": "^0.7.3", - "papaparse": "^4.3.6", + "papaparse": "^4.3.7", "parse-color": "^1.0.0", "path-data-polyfill.js": "^1.0.2", - "popper.js": "^1.12.5", + "popper.js": "^1.13.0", "rustdoc-webpack-plugin": "file:./build/rustdoc-webpack-plugin", "ts-loader": "^2.3.7", - "typescript": "^2.5.2", - "webpack": "^3.5.6" + "typescript": "^2.7.2", + "webpack": "^3.11.0" }, "devDependencies": { - "tslint": "^5.7.0", + "tslint": "^5.9.1", "tslint-loader": "^3.5.3" } } diff --git a/demo/client/src/3d-demo.ts b/demo/client/src/3d-demo.ts index 9c82f67f..9b98fb95 100644 --- a/demo/client/src/3d-demo.ts +++ b/demo/client/src/3d-demo.ts @@ -125,18 +125,18 @@ interface MeshDescriptor { } class ThreeDController extends DemoAppController { - font: PathfinderFont; - textFrames: TextFrame[]; - glyphStore: GlyphStore; - meshDescriptors: MeshDescriptor[]; + font!: PathfinderFont; + textFrames!: TextFrame[]; + glyphStore!: GlyphStore; + meshDescriptors!: MeshDescriptor[]; - atlasGlyphs: AtlasGlyph[]; - atlas: Atlas; + atlasGlyphs!: AtlasGlyph[]; + atlas!: Atlas; - baseMeshes: PathfinderMeshData; - private expandedMeshes: PathfinderMeshData[]; + baseMeshes!: PathfinderMeshData; + private expandedMeshes!: PathfinderMeshData[]; - private monumentPromise: Promise; + private monumentPromise!: Promise; start() { super.start(); @@ -360,7 +360,7 @@ class ThreeDView extends DemoView implements TextRenderContext { } class ThreeDRenderer extends Renderer { - renderContext: ThreeDView; + renderContext!: ThreeDView; camera: PerspectiveCamera; @@ -412,7 +412,7 @@ class ThreeDRenderer extends Renderer { private cubeVertexPositionBuffer: WebGLBuffer; private cubeIndexBuffer: WebGLBuffer; - private glyphPositionsBuffer: WebGLBuffer; + private glyphPositionsBuffer!: WebGLBuffer; private glyphPositions: number[]; private glyphPositionRanges: Range[]; private glyphTexCoords: glmatrix.vec4[]; @@ -425,6 +425,13 @@ class ThreeDRenderer extends Renderer { const gl = renderContext.gl; + this.glyphPositions = []; + this.glyphPositionRanges = []; + this.glyphTexCoords = []; + this.glyphSizes = []; + + this.distantGlyphVAO = null; + this.camera = new PerspectiveCamera(renderContext.canvas, { innerCollisionExtent: MONUMENT_SCALE[0], }); @@ -924,6 +931,8 @@ class ThreeDAtlasRenderer extends TextRenderer { constructor(renderContext: ThreeDView, atlasGlyphs: AtlasGlyph[]) { super(renderContext); this.allAtlasGlyphs = atlasGlyphs; + this.glyphTexCoords = []; + this.glyphSizes = []; } renderAtlas(): void { diff --git a/demo/client/src/app-controller.ts b/demo/client/src/app-controller.ts index cc0448d4..b3c50107 100644 --- a/demo/client/src/app-controller.ts +++ b/demo/client/src/app-controller.ts @@ -73,11 +73,9 @@ interface Switches { } export abstract class AppController { - protected canvas: HTMLCanvasElement; - - protected selectFileElement: HTMLSelectElement | null; - - protected screenshotButton: HTMLButtonElement | null; + protected canvas!: HTMLCanvasElement; + protected selectFileElement: HTMLSelectElement | null = null; + protected screenshotButton: HTMLButtonElement | null = null; start(): void { this.selectFileElement = document.getElementById('pf-select-file') as HTMLSelectElement | @@ -111,19 +109,19 @@ export abstract class AppController { export abstract class DemoAppController extends AppController implements Switches { - view: Promise; + view!: Promise; - subpixelAASwitchInputs: SwitchInputs | null; - gammaCorrectionSwitchInputs: SwitchInputs | null; - stemDarkeningSwitchInputs: SwitchInputs | null; + subpixelAASwitchInputs: SwitchInputs | null = null; + gammaCorrectionSwitchInputs: SwitchInputs | null = null; + stemDarkeningSwitchInputs: SwitchInputs | null = null; protected abstract readonly builtinFileURI: string; - protected filePickerView: FilePickerView | null; + protected filePickerView: FilePickerView | null = null; - protected aaLevelSelect: HTMLSelectElement | null; + protected aaLevelSelect: HTMLSelectElement | null = null; - private fpsLabel: HTMLElement | null; + private fpsLabel: HTMLElement | null = null; constructor() { super(); diff --git a/demo/client/src/benchmark.ts b/demo/client/src/benchmark.ts index 2709d2ec..ecca06d7 100644 --- a/demo/client/src/benchmark.ts +++ b/demo/client/src/benchmark.ts @@ -77,12 +77,12 @@ const TEST_SIZES: BenchmarkModeMap = { }; class BenchmarkAppController extends DemoAppController { - font: PathfinderFont | null; - textRun: TextRun | null; + font: PathfinderFont | null = null; + textRun: TextRun | null = null; - svgLoader: SVGLoader; + svgLoader!: SVGLoader; - mode: BenchmarkMode; + mode!: BenchmarkMode; protected get defaultFile(): string { if (this.mode === 'text') @@ -96,22 +96,22 @@ class BenchmarkAppController extends DemoAppController { return BUILTIN_SVG_URI; } - private optionsModal: HTMLDivElement; + private optionsModal!: HTMLDivElement; - private resultsModal: HTMLDivElement; - private resultsTableHeader: HTMLTableSectionElement; - private resultsTableBody: HTMLTableSectionElement; - private resultsPartitioningTimeLabel: HTMLSpanElement; + private resultsModal!: HTMLDivElement; + private resultsTableHeader!: HTMLTableSectionElement; + private resultsTableBody!: HTMLTableSectionElement; + private resultsPartitioningTimeLabel!: HTMLSpanElement; - private glyphStore: GlyphStore; - private baseMeshes: PathfinderMeshData; - private expandedMeshes: ExpandedMeshData; + private glyphStore!: GlyphStore; + private baseMeshes!: PathfinderMeshData; + private expandedMeshes!: ExpandedMeshData; - private size: number; - private currentRun: number; - private startTime: number; - private elapsedTimes: ElapsedTime[]; - private partitionTime: number; + private size!: number; + private currentRun!: number; + private startTime!: number; + private elapsedTimes!: ElapsedTime[]; + private partitionTime!: number; start(): void { super.start(); @@ -360,11 +360,11 @@ class BenchmarkAppController extends DemoAppController { } class BenchmarkTestView extends DemoView { - renderer: BenchmarkTextRenderer | BenchmarkSVGRenderer; + renderer!: BenchmarkTextRenderer | BenchmarkSVGRenderer; readonly appController: BenchmarkAppController; - renderingPromiseCallback: ((time: number) => void) | null; + renderingPromiseCallback: ((time: number) => void) | null = null; get camera(): OrthographicCamera { return this.renderer.camera; @@ -419,7 +419,7 @@ class BenchmarkTestView extends DemoView { } class BenchmarkTextRenderer extends Renderer { - renderContext: BenchmarkTestView; + renderContext!: BenchmarkTestView; camera: OrthographicCamera; @@ -600,7 +600,7 @@ class BenchmarkTextRenderer extends Renderer { } class BenchmarkSVGRenderer extends SVGRenderer { - renderContext: BenchmarkTestView; + renderContext!: BenchmarkTestView; protected get loader(): SVGLoader { return this.renderContext.appController.svgLoader; diff --git a/demo/client/src/camera.ts b/demo/client/src/camera.ts index 03784c78..103b8ecf 100644 --- a/demo/client/src/camera.ts +++ b/demo/client/src/camera.ts @@ -98,9 +98,9 @@ export class OrthographicCamera extends Camera { onZoom: (() => void) | null; onRotate: (() => void) | null; - translation: glmatrix.vec2; - scale: number; - rotationAngle: number; + translation!: glmatrix.vec2; + scale!: number; + rotationAngle!: number; private _bounds: glmatrix.vec4; @@ -315,7 +315,7 @@ export class OrthographicCamera extends Camera { } export class PerspectiveCamera extends Camera { - canvas: HTMLCanvasElement; + canvas!: HTMLCanvasElement; get usesSTTransform(): boolean { return false; diff --git a/demo/client/src/mesh-debugger.ts b/demo/client/src/mesh-debugger.ts index 113872b7..1faeaa55 100644 --- a/demo/client/src/mesh-debugger.ts +++ b/demo/client/src/mesh-debugger.ts @@ -86,21 +86,21 @@ interface NormalsTable { } class MeshDebuggerAppController extends AppController { - meshes: PathfinderMeshData | null; + meshes: PathfinderMeshData | null = null; protected readonly defaultFile: string = FONT; - private file: PathfinderFont | SVGLoader | null; - private fileType: FileType; - private fileData: ArrayBuffer | null; + private file: PathfinderFont | SVGLoader | null = null; + private fileType!: FileType; + private fileData: ArrayBuffer | null = null; - private openModal: HTMLElement; - private openFileSelect: HTMLSelectElement; - private fontPathSelectGroup: HTMLElement; - private fontPathSelect: HTMLSelectElement; + private openModal!: HTMLElement; + private openFileSelect!: HTMLSelectElement; + private fontPathSelectGroup!: HTMLElement; + private fontPathSelect!: HTMLSelectElement; - private filePicker: FilePickerView; - private view: MeshDebuggerView; + private filePicker!: FilePickerView; + private view!: MeshDebuggerView; start() { super.start(); diff --git a/demo/client/src/meshes.ts b/demo/client/src/meshes.ts index b2ac9aa9..26fcc91c 100644 --- a/demo/client/src/meshes.ts +++ b/demo/client/src/meshes.ts @@ -174,27 +174,27 @@ interface PathRanges { } export class PathfinderMeshData implements Meshes, MeshDataCounts, PathRanges { - readonly bQuadVertexPositions: ArrayBuffer; - readonly bQuadVertexInteriorIndices: ArrayBuffer; - readonly bBoxes: ArrayBuffer; - readonly bBoxSigns: ArrayBuffer; - readonly bBoxIndices: ArrayBuffer; - readonly stencilSegments: ArrayBuffer; - readonly stencilNormals: ArrayBuffer; + readonly bQuadVertexPositions!: ArrayBuffer; + readonly bQuadVertexInteriorIndices!: ArrayBuffer; + readonly bBoxes!: ArrayBuffer; + readonly bBoxSigns!: ArrayBuffer; + readonly bBoxIndices!: ArrayBuffer; + readonly stencilSegments!: ArrayBuffer; + readonly stencilNormals!: ArrayBuffer; readonly bQuadVertexPositionCount: number; readonly bQuadVertexInteriorIndexCount: number; readonly bBoxCount: number; readonly stencilSegmentCount: number; - bQuadVertexPositionPathIDs: ArrayBuffer; - bBoxPathIDs: ArrayBuffer; - stencilSegmentPathIDs: ArrayBuffer; + bQuadVertexPositionPathIDs!: ArrayBuffer; + bBoxPathIDs!: ArrayBuffer; + stencilSegmentPathIDs!: ArrayBuffer; - bQuadVertexPositionPathRanges: Range[]; - bQuadVertexInteriorIndexPathRanges: Range[]; - bBoxPathRanges: Range[]; - stencilSegmentPathRanges: Range[]; + bQuadVertexPositionPathRanges!: Range[]; + bQuadVertexInteriorIndexPathRanges!: Range[]; + bBoxPathRanges!: Range[]; + stencilSegmentPathRanges!: Range[]; constructor(meshes: ArrayBuffer | Meshes, optionalRanges?: PathRanges) { if (meshes instanceof ArrayBuffer) { @@ -383,21 +383,21 @@ export class PathfinderMeshData implements Meshes, MeshDataCounts, } export class PathfinderMeshBuffers implements Meshes, PathRanges { - readonly bQuadVertexPositions: WebGLBuffer; - readonly bQuadVertexPositionPathIDs: WebGLBuffer; - readonly bQuadVertexInteriorIndices: WebGLBuffer; - readonly bBoxes: WebGLBuffer; - readonly bBoxSigns: WebGLBuffer; - readonly bBoxIndices: WebGLBuffer; - readonly bBoxPathIDs: WebGLBuffer; - readonly stencilSegments: WebGLBuffer; - readonly stencilSegmentPathIDs: WebGLBuffer; - readonly stencilNormals: WebGLBuffer; + readonly bQuadVertexPositions!: WebGLBuffer; + readonly bQuadVertexPositionPathIDs!: WebGLBuffer; + readonly bQuadVertexInteriorIndices!: WebGLBuffer; + readonly bBoxes!: WebGLBuffer; + readonly bBoxSigns!: WebGLBuffer; + readonly bBoxIndices!: WebGLBuffer; + readonly bBoxPathIDs!: WebGLBuffer; + readonly stencilSegments!: WebGLBuffer; + readonly stencilSegmentPathIDs!: WebGLBuffer; + readonly stencilNormals!: WebGLBuffer; - readonly bQuadVertexPositionPathRanges: Range[]; - readonly bQuadVertexInteriorIndexPathRanges: Range[]; - readonly bBoxPathRanges: Range[]; - readonly stencilSegmentPathRanges: Range[]; + readonly bQuadVertexPositionPathRanges!: Range[]; + readonly bQuadVertexInteriorIndexPathRanges!: Range[]; + readonly bBoxPathRanges!: Range[]; + readonly stencilSegmentPathRanges!: Range[]; constructor(gl: WebGLRenderingContext, meshData: PathfinderMeshData) { for (const bufferName of Object.keys(BUFFER_TYPES) as Array>) { diff --git a/demo/client/src/reference-test.ts b/demo/client/src/reference-test.ts index 242af873..b9066e3b 100644 --- a/demo/client/src/reference-test.ts +++ b/demo/client/src/reference-test.ts @@ -95,17 +95,17 @@ interface AntialiasingStrategyTable { } class ReferenceTestAppController extends DemoAppController { - font: PathfinderFont | null; - textRun: TextRun | null; + font: PathfinderFont | null = null; + textRun: TextRun | null = null; - svgLoader: SVGLoader; - builtinSvgName: string | null; + svgLoader!: SVGLoader; + builtinSvgName: string | null = null; - referenceCanvas: HTMLCanvasElement; + referenceCanvas!: HTMLCanvasElement; - tests: Promise; + tests!: Promise; - currentTestType: 'font' | 'svg'; + currentTestType!: 'font' | 'svg'; protected readonly defaultFile: string = FONT; @@ -115,29 +115,29 @@ class ReferenceTestAppController extends DemoAppController { return BUILTIN_SVG_URI; } - private glyphStore: GlyphStore; - private baseMeshes: PathfinderMeshData; - private expandedMeshes: ExpandedMeshData; + private glyphStore!: GlyphStore; + private baseMeshes!: PathfinderMeshData; + private expandedMeshes!: ExpandedMeshData; - private fontSizeInput: HTMLInputElement; - private characterInput: HTMLInputElement; - private referenceRendererSelect: HTMLSelectElement; + private fontSizeInput!: HTMLInputElement; + private characterInput!: HTMLInputElement; + private referenceRendererSelect!: HTMLSelectElement; - private differenceCanvas: HTMLCanvasElement; + private differenceCanvas!: HTMLCanvasElement; - private aaLevelGroup: HTMLElement; + private aaLevelGroup!: HTMLElement; - private customTabs: PerTestType; - private customTestForms: PerTestType; - private selectFileGroups: PerTestType; - private runTestsButtons: PerTestType; - private ssimGroups: PerTestType; - private ssimLabels: PerTestType; - private resultsTables: PerTestType; + private customTabs!: PerTestType; + private customTestForms!: PerTestType; + private selectFileGroups!: PerTestType; + private runTestsButtons!: PerTestType; + private ssimGroups!: PerTestType; + private ssimLabels!: PerTestType; + private resultsTables!: PerTestType; - private currentTestGroupIndex: number | null; - private currentTestCaseIndex: number | null; - private currentGlobalTestCaseIndex: number | null; + private currentTestGroupIndex: number | null = null; + private currentTestCaseIndex: number | null = null; + private currentGlobalTestCaseIndex: number | null = null; get currentFontSize(): number { return parseInt(this.fontSizeInput.value, 10); @@ -583,7 +583,7 @@ class ReferenceTestAppController extends DemoAppController { } class ReferenceTestView extends DemoView { - renderer: ReferenceTestTextRenderer | ReferenceTestSVGRenderer; + renderer!: ReferenceTestTextRenderer | ReferenceTestSVGRenderer; readonly appController: ReferenceTestAppController; get camera(): OrthographicCamera { @@ -656,7 +656,7 @@ class ReferenceTestView extends DemoView { } class ReferenceTestTextRenderer extends Renderer { - renderContext: ReferenceTestView; + renderContext!: ReferenceTestView; camera: OrthographicCamera; needsStencil: boolean = false; @@ -823,7 +823,7 @@ class ReferenceTestTextRenderer extends Renderer { } class ReferenceTestSVGRenderer extends SVGRenderer { - renderContext: ReferenceTestView; + renderContext!: ReferenceTestView; protected get loader(): SVGLoader { return this.renderContext.appController.svgLoader; diff --git a/demo/client/src/renderer.ts b/demo/client/src/renderer.ts index e91a8f5d..21957aae 100644 --- a/demo/client/src/renderer.ts +++ b/demo/client/src/renderer.ts @@ -90,14 +90,14 @@ export abstract class Renderer { protected abstract get usedSizeFactor(): glmatrix.vec2; protected abstract get worldTransform(): glmatrix.mat4; - private implicitCoverInteriorVAO: WebGLVertexArrayObjectOES | null; - private implicitCoverCurveVAO: WebGLVertexArrayObjectOES | null; + private implicitCoverInteriorVAO: WebGLVertexArrayObjectOES | null = null; + private implicitCoverCurveVAO: WebGLVertexArrayObjectOES | null = null; - private gammaLUTTexture: WebGLTexture | null; + private gammaLUTTexture: WebGLTexture | null = null; - private instancedPathIDVBO: WebGLBuffer | null; - private vertexIDVBO: WebGLBuffer | null; - private timerQueryPollInterval: number | null; + private instancedPathIDVBO: WebGLBuffer | null = null; + private vertexIDVBO: WebGLBuffer | null = null; + private timerQueryPollInterval: number | null = null; constructor(renderContext: RenderContext) { this.renderContext = renderContext; diff --git a/demo/client/src/shader-loader.ts b/demo/client/src/shader-loader.ts index ccbde856..ad2e9e66 100644 --- a/demo/client/src/shader-loader.ts +++ b/demo/client/src/shader-loader.ts @@ -122,8 +122,8 @@ interface ShaderProgramURLs { } export class ShaderLoader { - common: Promise; - shaders: Promise>; + common!: Promise; + shaders!: Promise>; load(): void { this.common = window.fetch(COMMON_SHADER_URL).then(response => response.text()); diff --git a/demo/client/src/ssaa-strategy.ts b/demo/client/src/ssaa-strategy.ts index cc12e00a..01ecdec0 100644 --- a/demo/client/src/ssaa-strategy.ts +++ b/demo/client/src/ssaa-strategy.ts @@ -33,9 +33,9 @@ export default class SSAAStrategy extends AntialiasingStrategy { private destFramebufferSize: glmatrix.vec2; private supersampledFramebufferSize: glmatrix.vec2; - private supersampledColorTexture: WebGLTexture; - private supersampledDepthTexture: WebGLTexture; - private supersampledFramebuffer: WebGLFramebuffer; + private supersampledColorTexture!: WebGLTexture; + private supersampledDepthTexture!: WebGLTexture; + private supersampledFramebuffer!: WebGLFramebuffer; constructor(level: number, subpixelAA: SubpixelAAType) { super(); diff --git a/demo/client/src/svg-demo.ts b/demo/client/src/svg-demo.ts index 91200c47..bbe3ba15 100644 --- a/demo/client/src/svg-demo.ts +++ b/demo/client/src/svg-demo.ts @@ -26,11 +26,11 @@ const SVG_NS: string = "http://www.w3.org/2000/svg"; const DEFAULT_FILE: string = 'tiger'; class SVGDemoController extends DemoAppController { - loader: SVGLoader; + loader!: SVGLoader; protected readonly builtinFileURI: string = BUILTIN_SVG_URI; - private meshes: PathfinderMeshData; + private meshes!: PathfinderMeshData; start() { super.start(); @@ -93,7 +93,7 @@ class SVGDemoView extends DemoView { } class SVGDemoRenderer extends SVGRenderer { - renderContext: SVGDemoView; + renderContext!: SVGDemoView; needsStencil: boolean = false; diff --git a/demo/client/src/svg-loader.ts b/demo/client/src/svg-loader.ts index cd96233c..cd3aacc3 100644 --- a/demo/client/src/svg-loader.ts +++ b/demo/client/src/svg-loader.ts @@ -99,7 +99,7 @@ export class SVGLoader { isMonochrome: boolean; private svg: SVGSVGElement; - private fileData: ArrayBuffer; + private fileData!: ArrayBuffer; private paths: any[]; private clipPathIDs: ClipPathIDTable; @@ -108,7 +108,10 @@ export class SVGLoader { this.scale = 1.0; this.pathInstances = []; this.pathBounds = []; + this.paths = []; + this.clipPathIDs = {}; this.svgBounds = glmatrix.vec4.create(); + this.svgViewBox = glmatrix.vec4.create(); this.svg = unwrapNull(document.getElementById('pf-svg')) as Element as SVGSVGElement; this.isMonochrome = false; } diff --git a/demo/client/src/svg-renderer.ts b/demo/client/src/svg-renderer.ts index 796cf710..58a20858 100644 --- a/demo/client/src/svg-renderer.ts +++ b/demo/client/src/svg-renderer.ts @@ -42,7 +42,7 @@ export interface SVGRendererOptions { } export abstract class SVGRenderer extends Renderer { - renderContext: RenderContext; + renderContext!: RenderContext; camera: OrthographicCamera; @@ -95,10 +95,12 @@ export abstract class SVGRenderer extends Renderer { this.options = options; - this.camera = new OrthographicCamera(this.canvas, { + // FIXME(pcwalton): Get the canvas a better way? + this.camera = new OrthographicCamera((this as any).canvas, { fixed: !!this.options.fixed, scaleBounds: true, }); + this.camera.onPan = () => this.renderContext.setDirty(); this.camera.onZoom = () => this.renderContext.setDirty(); this.camera.onRotate = () => this.renderContext.setDirty(); diff --git a/demo/client/src/text-demo.ts b/demo/client/src/text-demo.ts index 8ed49f70..e18f1b98 100644 --- a/demo/client/src/text-demo.ts +++ b/demo/client/src/text-demo.ts @@ -120,24 +120,24 @@ declare module 'opentype.js' { } class TextDemoController extends DemoAppController { - font: PathfinderFont; - layout: SimpleTextLayout; - glyphStore: GlyphStore; - atlasGlyphs: AtlasGlyph[]; + font!: PathfinderFont; + layout!: SimpleTextLayout; + glyphStore!: GlyphStore; + atlasGlyphs!: AtlasGlyph[]; - private hintingSelect: HTMLSelectElement; - private emboldenInput: HTMLInputElement; + private hintingSelect!: HTMLSelectElement; + private emboldenInput!: HTMLInputElement; - private editTextModal: HTMLElement; - private editTextArea: HTMLTextAreaElement; + private editTextModal!: HTMLElement; + private editTextArea!: HTMLTextAreaElement; private _atlas: Atlas; - private meshes: PathfinderMeshData; + private meshes!: PathfinderMeshData; - private _fontSize: number; - private _rotationAngle: number; - private _emboldenAmount: number; + private _fontSize!: number; + private _rotationAngle!: number; + private _emboldenAmount!: number; private text: string; @@ -440,13 +440,13 @@ class TextDemoView extends DemoView implements TextRenderContext { } class TextDemoRenderer extends TextRenderer { - renderContext: TextDemoView; + renderContext!: TextDemoView; - glyphPositionsBuffer: WebGLBuffer; - glyphTexCoordsBuffer: WebGLBuffer; - glyphElementsBuffer: WebGLBuffer; + glyphPositionsBuffer!: WebGLBuffer; + glyphTexCoordsBuffer!: WebGLBuffer; + glyphElementsBuffer!: WebGLBuffer; - private glyphBounds: Float32Array; + private glyphBounds!: Float32Array; get layout(): SimpleTextLayout { return this.renderContext.appController.layout; diff --git a/demo/client/src/text-renderer.ts b/demo/client/src/text-renderer.ts index de9602e4..bd9b214d 100644 --- a/demo/client/src/text-renderer.ts +++ b/demo/client/src/text-renderer.ts @@ -58,12 +58,12 @@ export interface TextRenderContext extends RenderContext { } export abstract class TextRenderer extends Renderer { - renderContext: TextRenderContext; + renderContext!: TextRenderContext; camera: OrthographicCamera; - atlasFramebuffer: WebGLFramebuffer; - atlasDepthTexture: WebGLTexture; + atlasFramebuffer!: WebGLFramebuffer; + atlasDepthTexture!: WebGLTexture; get isMulticolor(): boolean { return false; @@ -142,8 +142,8 @@ export abstract class TextRenderer extends Renderer { return glmatrix.vec2.create(); } - private stemDarkening: StemDarkeningMode; - private subpixelAA: SubpixelAAType; + private stemDarkening!: StemDarkeningMode; + private subpixelAA!: SubpixelAAType; constructor(renderContext: TextRenderContext) { super(renderContext); diff --git a/demo/client/src/view.ts b/demo/client/src/view.ts index 02c06ecf..5f6fbd93 100644 --- a/demo/client/src/view.ts +++ b/demo/client/src/view.ts @@ -63,6 +63,7 @@ export abstract class PathfinderView { constructor() { this.dirty = false; + this.pulseHandle = 0; this.suppressAutomaticRedraw = false; this.canvas = unwrapNull(document.getElementById('pf-canvas')) as HTMLCanvasElement; window.addEventListener('resize', () => this.resizeToFit(false), false); @@ -137,24 +138,24 @@ export abstract class PathfinderView { } export abstract class DemoView extends PathfinderView implements RenderContext { - readonly renderer: Renderer; + readonly renderer!: Renderer; - gl: WebGLRenderingContext; + gl!: WebGLRenderingContext; shaderPrograms: ShaderMap; gammaLUT: HTMLImageElement; - instancedArraysExt: ANGLEInstancedArrays; - textureHalfFloatExt: OESTextureHalfFloat; - timerQueryExt: EXTDisjointTimerQuery; - vertexArrayObjectExt: OESVertexArrayObject; + instancedArraysExt!: ANGLE_instanced_arrays; + textureHalfFloatExt!: OESTextureHalfFloat; + timerQueryExt!: EXTDisjointTimerQuery; + vertexArrayObjectExt!: OESVertexArrayObject; - quadPositionsBuffer: WebGLBuffer; - quadTexCoordsBuffer: WebGLBuffer; - quadElementsBuffer: WebGLBuffer; + quadPositionsBuffer!: WebGLBuffer; + quadTexCoordsBuffer!: WebGLBuffer; + quadElementsBuffer!: WebGLBuffer; - atlasRenderingTimerQuery: WebGLQuery; - compositingTimerQuery: WebGLQuery; + atlasRenderingTimerQuery!: WebGLQuery; + compositingTimerQuery!: WebGLQuery; meshes: PathfinderMeshBuffers[]; meshData: PathfinderMeshData[]; @@ -179,6 +180,9 @@ export abstract class DemoView extends PathfinderView implements RenderContext { shaderSources: ShaderMap) { super(); + this.meshes = []; + this.meshData = []; + this.initContext(); const shaderSource = this.compileShaders(commonShaderSource, shaderSources); @@ -266,10 +270,10 @@ export abstract class DemoView extends PathfinderView implements RenderContext { this.gl = expectNotNull(this.canvas.getContext('webgl', { antialias: false, depth: true }), "Failed to initialize WebGL! Check that your browser supports it."); this.colorBufferHalfFloatExt = this.gl.getExtension('EXT_color_buffer_half_float'); - this.instancedArraysExt = this.gl.getExtension('ANGLE_instanced_arrays'); - this.textureHalfFloatExt = this.gl.getExtension('OES_texture_half_float'); + this.instancedArraysExt = unwrapNull(this.gl.getExtension('ANGLE_instanced_arrays')); + this.textureHalfFloatExt = unwrapNull(this.gl.getExtension('OES_texture_half_float')); this.timerQueryExt = this.gl.getExtension('EXT_disjoint_timer_query'); - this.vertexArrayObjectExt = this.gl.getExtension('OES_vertex_array_object'); + this.vertexArrayObjectExt = unwrapNull(this.gl.getExtension('OES_vertex_array_object')); this.gl.getExtension('EXT_frag_depth'); this.gl.getExtension('OES_element_index_uint'); this.gl.getExtension('OES_standard_derivatives'); diff --git a/demo/client/src/xcaa-strategy.ts b/demo/client/src/xcaa-strategy.ts index d123e85d..fc62e67b 100644 --- a/demo/client/src/xcaa-strategy.ts +++ b/demo/client/src/xcaa-strategy.ts @@ -49,8 +49,8 @@ export type TransformType = 'dilation' | 'affine' | '3d'; export abstract class XCAAStrategy extends AntialiasingStrategy { abstract readonly directRenderingMode: DirectRenderingMode; - protected patchVertexBuffer: WebGLBuffer | null; - protected patchIndexBuffer: WebGLBuffer | null; + protected patchVertexBuffer: WebGLBuffer | null = null; + protected patchIndexBuffer: WebGLBuffer | null = null; get passCount(): number { return 1; @@ -69,9 +69,9 @@ export abstract class XCAAStrategy extends AntialiasingStrategy { protected resolveVAO: WebGLVertexArrayObject | null; - protected aaAlphaTexture: WebGLTexture | null; - protected aaDepthTexture: WebGLTexture | null; - protected aaFramebuffer: WebGLFramebuffer | null; + protected aaAlphaTexture: WebGLTexture | null = null; + protected aaDepthTexture: WebGLTexture | null = null; + protected aaFramebuffer: WebGLFramebuffer | null = null; protected abstract get mightUseAAFramebuffer(): boolean; @@ -82,6 +82,8 @@ export abstract class XCAAStrategy extends AntialiasingStrategy { this.supersampledFramebufferSize = glmatrix.vec2.create(); this.destFramebufferSize = glmatrix.vec2.create(); + + this.pathBoundsBufferTextures = []; } init(renderer: Renderer): void {