js-draw 0.1.11 → 0.2.0

package/src/toolbar/widgets/SelectionWidget.ts

@@ -1,8 +1,9 @@
 import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool';
 import { EditorEventType } from '../../types';
-import { makeSelectionIcon } from '../icons';
+import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
 
 export class SelectionWidget extends BaseToolWidget {
@@ -10,44 +11,46 @@ export class SelectionWidget extends BaseToolWidget {
 		editor: Editor, private tool: SelectionTool, localization: ToolbarLocalization
 	) {
 		super(editor, tool, localization);
-	}
-
-	protected getTitle(): string {
-		return this.localizationTable.select;
-	}
-
-	protected createIcon(): Element {
-		return makeSelectionIcon();
-	}
 
-	protected fillDropdown(dropdown: HTMLElement): boolean {
-		const container = document.createElement('div');
-		const resizeButton = document.createElement('button');
-		const duplicateButton = document.createElement('button');
-		const deleteButton = document.createElement('button');
-
-		resizeButton.innerText = this.localizationTable.resizeImageToSelection;
-		resizeButton.disabled = true;
-		deleteButton.innerText = this.localizationTable.deleteSelection;
-		deleteButton.disabled = true;
-		duplicateButton.innerText = this.localizationTable.duplicateSelection;
-		duplicateButton.disabled = true;
-
-		resizeButton.onclick = () => {
-			const selection = this.tool.getSelection();
-			this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
-		};
+		const resizeButton = new ActionButtonWidget(
+			editor, localization,
+			makeResizeViewportIcon,
+			this.localizationTable.resizeImageToSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
+			},
+		);
+		const deleteButton = new ActionButtonWidget(
+			editor, localization,
+			makeDeleteSelectionIcon,
+			this.localizationTable.deleteSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(selection!.deleteSelectedObjects());
+				this.tool.clearSelection();
+			},
+		);
+		const duplicateButton = new ActionButtonWidget(
+			editor, localization,
+			makeDuplicateSelectionIcon,
+			this.localizationTable.duplicateSelection,
+			() => {
+				const selection = this.tool.getSelection();
+				this.editor.dispatch(selection!.duplicateSelectedObjects());
+			},
+		);
 
-		deleteButton.onclick = () => {
-			const selection = this.tool.getSelection();
-			this.editor.dispatch(selection!.deleteSelectedObjects());
-			this.tool.clearSelection();
-		};
+		this.addSubWidget(resizeButton);
+		this.addSubWidget(deleteButton);
+		this.addSubWidget(duplicateButton);
 
-		duplicateButton.onclick = () => {
-			const selection = this.tool.getSelection();
-			this.editor.dispatch(selection!.duplicateSelectedObjects());
+		const updateDisabled = (disabled: boolean) => {
+			resizeButton.setDisabled(disabled);
+			deleteButton.setDisabled(disabled);
+			duplicateButton.setDisabled(disabled);
 		};
+		updateDisabled(true);
 
 		// Enable/disable actions based on whether items are selected
 		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
@@ -59,14 +62,16 @@ export class SelectionWidget extends BaseToolWidget {
 				const selection = this.tool.getSelection();
 				const hasSelection = selection && selection.region.area > 0;
 
-				resizeButton.disabled = !hasSelection;
-				deleteButton.disabled = resizeButton.disabled;
-				duplicateButton.disabled = resizeButton.disabled;
+				updateDisabled(!hasSelection);
 			}
 		});
+	}
 
-		container.replaceChildren(resizeButton, duplicateButton, deleteButton);
-		dropdown.appendChild(container);
-		return true;
+	protected getTitle(): string {
+		return this.localizationTable.select;
+	}
+
+	protected createIcon(): Element {
+		return makeSelectionIcon();
 	}
 }

package/src/tools/Eraser.ts

@@ -1,8 +1,8 @@
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
-import { Point2 } from '../geometry/Vec2';
-import LineSegment2 from '../geometry/LineSegment2';
+import { Point2 } from '../math/Vec2';
+import LineSegment2 from '../math/LineSegment2';
 import Erase from '../commands/Erase';
 import { ToolType } from './ToolController';
 import AbstractComponent from '../components/AbstractComponent';

package/src/tools/PanZoom.ts

@@ -1,11 +1,11 @@
 
 import { Editor } from '../Editor';
-import Mat33 from '../geometry/Mat33';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Vec3 from '../geometry/Vec3';
+import Mat33 from '../math/Mat33';
+import { Point2, Vec2 } from '../math/Vec2';
+import Vec3 from '../math/Vec3';
 import Pointer, { PointerDevice } from '../Pointer';
 import { EditorEventType, KeyPressEvent, PointerEvt, WheelEvt } from '../types';
-import { Viewport } from '../Viewport';
+import { Viewport, ViewportTransform } from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 
@@ -16,7 +16,6 @@ interface PinchData {
 	dist: number;
 }
 
-
 export enum PanZoomMode {
 	OneFingerTouchGestures = 0x1,
 	TwoFingerTouchGestures = 0x1 << 1,
@@ -27,7 +26,7 @@ export enum PanZoomMode {
 
 export default class PanZoom extends BaseTool {
 	public readonly kind: ToolType.PanZoom = ToolType.PanZoom;
-	private transform: Viewport.ViewportTransform|null = null;
+	private transform: ViewportTransform|null = null;
 
 	private lastAngle: number;
 	private lastDist: number;
@@ -74,7 +73,7 @@ export default class PanZoom extends BaseTool {
 		}
 
 		if (handlingGesture) {
-			this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
+			this.transform ??= Viewport.transformBy(Mat33.identity);
 			this.editor.display.setDraftMode(true);
 		}
 
@@ -100,14 +99,14 @@ export default class PanZoom extends BaseTool {
 		this.lastScreenCenter = screenCenter;
 		this.lastDist = dist;
 		this.lastAngle = angle;
-		this.transform = new Viewport.ViewportTransform(
+		this.transform = Viewport.transformBy(
 			this.transform!.transform.rightMul(transformUpdate)
 		);
 	}
 
 	private handleOneFingerMove(pointer: Pointer) {
 		const delta = this.getCenterDelta(pointer.screenPos);
-		this.transform = new Viewport.ViewportTransform(
+		this.transform = Viewport.transformBy(
 			this.transform!.transform.rightMul(
 				Mat33.translation(delta)
 			)
@@ -116,7 +115,7 @@ export default class PanZoom extends BaseTool {
 	}
 
 	public onPointerMove({ allPointers }: PointerEvt): void {
-		this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
+		this.transform ??= Viewport.transformBy(Mat33.identity);
 
 		const lastTransform = this.transform;
 		if (allPointers.length === 2) {
@@ -146,21 +145,25 @@ export default class PanZoom extends BaseTool {
 
 	// Applies [transformUpdate] to the editor. This stacks on top of the
 	// current transformation, if it exists.
-	private updateTransform(transformUpdate: Mat33) {
+	private updateTransform(transformUpdate: Mat33, announce: boolean = false) {
 		let newTransform = transformUpdate;
 		if (this.transform) {
 			newTransform = this.transform.transform.rightMul(transformUpdate);
 		}
 
 		this.transform?.unapply(this.editor);
-		this.transform = new Viewport.ViewportTransform(newTransform);
+		this.transform = Viewport.transformBy(newTransform);
 		this.transform.apply(this.editor);
+
+		if (announce) {
+			this.editor.announceForAccessibility(this.transform.description(this.editor, this.editor.localization));
+		}
 	}
 
 	public onWheel({ delta, screenPos }: WheelEvt): boolean {
 		// Reset the transformation -- wheel events are individual events, so we don't
 		// need to unapply/reapply.
-		this.transform = new Viewport.ViewportTransform(Mat33.identity);
+		this.transform = Viewport.transformBy(Mat33.identity);
 
 		const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
 		const toCanvas = this.editor.viewport.screenToCanvasTransform;
@@ -176,7 +179,7 @@ export default class PanZoom extends BaseTool {
 		).rightMul(
 			Mat33.translation(translation)
 		);
-		this.updateTransform(transformUpdate);
+		this.updateTransform(transformUpdate, true);
 
 		return true;
 	}
@@ -187,7 +190,7 @@ export default class PanZoom extends BaseTool {
 		}
 
 		// No need to keep the same the transform for keyboard events.
-		this.transform = new Viewport.ViewportTransform(Mat33.identity);
+		this.transform = Viewport.transformBy(Mat33.identity);
 
 		let translation = Vec2.zero;
 		let scale = 1;
@@ -205,10 +208,12 @@ export default class PanZoom extends BaseTool {
 		case 'ArrowRight':
 			translation = Vec2.of(1, 0);
 			break;
+		case 'q':
 		case 'k':
 		case 'ArrowUp':
 			translation = Vec2.of(0, -1);
 			break;
+		case 'e':
 		case 'j':
 		case 'ArrowDown':
 			translation = Vec2.of(0, 1);
@@ -231,13 +236,19 @@ export default class PanZoom extends BaseTool {
 
 		// For each keypress,
 		translation = translation.times(30); // Move at most 30 units
-		rotation *= Math.PI / 8; // Rotate at most a sixteenth of a rotation
+		rotation *= Math.PI / 8; // Rotate at least a sixteenth of a rotation
 
 		// Transform the canvas, not the viewport:
 		translation = translation.times(-1);
 		rotation = rotation * -1;
 		scale = 1 / scale;
 
+		// Work around an issue that seems to be related to rotation matricies losing precision on inversion.
+		// TODO: Figure out why and implement a better solution.
+		if (rotation !== 0) {
+			rotation += 0.0001;
+		}
+
 		const toCanvas = this.editor.viewport.screenToCanvasTransform;
 
 		// Transform without translating (treat toCanvas as a linear instead of
@@ -253,7 +264,7 @@ export default class PanZoom extends BaseTool {
 		)).rightMul(Mat33.translation(
 			translation
 		));
-		this.updateTransform(transformUpdate);
+		this.updateTransform(transformUpdate, true);
 
 		return true;
 	}

package/src/tools/Pen.ts

@@ -8,7 +8,7 @@ import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 
-interface PenStyle {
+export interface PenStyle {
     color: Color4;
     thickness: number;
 }
@@ -34,7 +34,16 @@ export default class Pen extends BaseTool {
 
 	private getStrokePoint(pointer: Pointer): StrokeDataPoint {
 		const minPressure = 0.3;
-		const pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
+		let pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
+
+		if (!isFinite(pressure)) {
+			console.warn('Non-finite pressure!', pointer);
+			pressure = minPressure;
+		}
+		console.assert(isFinite(pointer.canvasPos.length()), 'Non-finite canvas position!');
+		console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
+		console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
+
 		return {
 			pos: pointer.canvasPos,
 			width: pressure * this.getPressureMultiplier(),

package/src/tools/PipetteTool.ts

@@ -1,3 +1,5 @@
+// @internal @packageDocumentation
+
 import Color4 from '../Color4';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';

package/src/tools/SelectionTool.test.ts

@@ -1,11 +1,9 @@
-/* @jest-environment jsdom */
-
 import Color4 from '../Color4';
 import Stroke from '../components/Stroke';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
-import Path from '../geometry/Path';
-import { Vec2 } from '../geometry/Vec2';
+import Path from '../math/Path';
+import { Vec2 } from '../math/Vec2';
 import { InputEvtType } from '../types';
 import SelectionTool from './SelectionTool';
 import { ToolType } from './ToolController';

package/src/tools/SelectionTool.ts

@@ -3,15 +3,16 @@ import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
 import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
-import Mat33 from '../geometry/Mat33';
+import Mat33 from '../math/Mat33';
 // import Mat33 from "../geometry/Mat33";
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
+import Rect2 from '../math/Rect2';
+import { Point2, Vec2 } from '../math/Vec2';
 import { EditorLocalization } from '../localization';
 import { EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
+import SerializableCommand from '../commands/SerializableCommand';
 
 const handleScreenSize = 30;
 const styles = `
@@ -124,6 +125,7 @@ const makeDraggable = (element: HTMLElement, onDrag: DragCallback, onDragEnd: Dr
 // Maximum number of strokes to transform without a re-render.
 const updateChunkSize = 100;
 
+// @internal
 class Selection {
 	public region: Rect2;
 	private boxRotation: number;
@@ -131,7 +133,7 @@ class Selection {
 	private rotateCircle: HTMLElement;
 	private selectedElems: AbstractComponent[];
 	private transform: Mat33;
-	private transformationCommands: Command[];
+	private transformationCommands: SerializableCommand[];
 
 	public constructor(
 		public startPoint: Point2, private editor: Editor
@@ -230,7 +232,7 @@ class Selection {
 		this.transformPreview(Mat33.zRotation(deltaRotation, this.region.center));
 	}
 
-	private computeTransformCommands() {
+	private computeTransformCommands(): SerializableCommand[] {
 		return this.selectedElems.map(elem => {
 			return elem.transformBy(this.transform);
 		});
@@ -275,42 +277,68 @@ class Selection {
 
 		// Make the commands undo-able
 		this.editor.dispatch(new Selection.ApplyTransformationCommand(
-			this, currentTransfmCommands, fullTransform, inverseTransform, deltaBoxRotation
+			this, currentTransfmCommands, fullTransform, deltaBoxRotation
 		));
 	}
 
-	private static ApplyTransformationCommand = class extends Command {
+	static {
+		SerializableCommand.register('selection-tool-transform', (json: any, editor) => {
+			// The selection box is lost when serializing/deserializing. No need to store box rotation
+			const guiBoxRotation = 0;
+			const fullTransform: Mat33 = new Mat33(...(json.transform as [
+				number, number, number,
+				number, number, number,
+				number, number, number,
+			]));
+			const commands = (json.commands as any[]).map(data => SerializableCommand.deserialize(data, editor));
+
+			return new this.ApplyTransformationCommand(null, commands, fullTransform, guiBoxRotation);
+		});
+	}
+
+	private static ApplyTransformationCommand = class extends SerializableCommand {
 		public constructor(
-			private selection: Selection,
-			private currentTransfmCommands: Command[],
-			private fullTransform: Mat33, private inverseTransform: Mat33,
+			private selection: Selection|null,
+			private currentTransfmCommands: SerializableCommand[],
+			private fullTransform: Mat33,
 			private deltaBoxRotation: number,
 		) {
-			super();
+			super('selection-tool-transform');
 		}
 
 		public async apply(editor: Editor) {
 			// Approximate the new selection
-			this.selection.region = this.selection.region.transformedBoundingBox(this.fullTransform);
-			this.selection.boxRotation += this.deltaBoxRotation;
-			this.selection.updateUI();
+			if (this.selection) {
+				this.selection.region = this.selection.region.transformedBoundingBox(this.fullTransform);
+				this.selection.boxRotation += this.deltaBoxRotation;
+				this.selection.updateUI();
+			}
 
 			await editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
-			this.selection.recomputeRegion();
-			this.selection.updateUI();
+			this.selection?.recomputeRegion();
+			this.selection?.updateUI();
 		}
 
 		public async unapply(editor: Editor) {
-			this.selection.region = this.selection.region.transformedBoundingBox(this.inverseTransform);
-			this.selection.boxRotation -= this.deltaBoxRotation;
-			this.selection.updateUI();
+			if (this.selection) {
+				this.selection.region = this.selection.region.transformedBoundingBox(this.fullTransform.inverse());
+				this.selection.boxRotation -= this.deltaBoxRotation;
+				this.selection.updateUI();
+			}
 
 			await editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
-			this.selection.recomputeRegion();
-			this.selection.updateUI();
+			this.selection?.recomputeRegion();
+			this.selection?.updateUI();
+		}
+
+		protected serializeToJSON() {
+			return {
+				commands: this.currentTransfmCommands.map(command => command.serialize()),
+				transform: this.fullTransform.toArray(),
+			};
 		}
 
-		public description(localizationTable: EditorLocalization) {
+		public description(_editor: Editor, localizationTable: EditorLocalization) {
 			return localizationTable.transformedElements(this.currentTransfmCommands.length);
 		}
 	};
@@ -460,7 +488,7 @@ class Selection {
 			const closestPoint = visibleRect.getClosestPointOnBoundaryTo(this.region.center);
 			const delta = this.region.center.minus(closestPoint);
 			this.editor.dispatchNoAnnounce(
-				new Viewport.ViewportTransform(Mat33.translation(delta.times(-1))), false
+				Viewport.transformBy(Mat33.translation(delta.times(-1))), false
 			);
 		}
 	}
@@ -671,7 +699,7 @@ export default class SelectionTool extends BaseTool {
 
 		if (enabled) {
 			this.handleOverlay.tabIndex = 0;
-			this.handleOverlay.ariaLabel = this.editor.localization.selectionToolKeyboardShortcuts;
+			this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
 		} else {
 			this.handleOverlay.tabIndex = -1;
 		}

package/src/tools/TextTool.ts

@@ -2,8 +2,8 @@ import Color4 from '../Color4';
 import Text, { TextStyle } from '../components/Text';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
-import Mat33 from '../geometry/Mat33';
-import { Vec2 } from '../geometry/Vec2';
+import Mat33 from '../math/Mat33';
+import { Vec2 } from '../math/Vec2';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType, PointerEvt } from '../types';
 import BaseTool from './BaseTool';

package/src/tools/UndoRedoShortcut.test.ts

@@ -3,7 +3,7 @@
 import Color4 from '../Color4';
 import Stroke from '../components/Stroke';
 import EditorImage from '../EditorImage';
-import Path from '../geometry/Path';
+import Path from '../math/Path';
 import createEditor from '../testing/createEditor';
 import { InputEvtType } from '../types';
 

package/src/types.ts

@@ -1,14 +1,15 @@
 // Types related to the image editor
 
 import EventDispatcher from './EventDispatcher';
-import Mat33 from './geometry/Mat33';
-import { Point2, Vec2 } from './geometry/Vec2';
-import Vec3 from './geometry/Vec3';
+import Mat33 from './math/Mat33';
+import { Point2, Vec2 } from './math/Vec2';
+import Vec3 from './math/Vec3';
 import BaseTool from './tools/BaseTool';
 import AbstractComponent from './components/AbstractComponent';
-import Rect2 from './geometry/Rect2';
+import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
+import Command from './commands/Command';
 
 
 export interface PointerEvtListener {
@@ -91,12 +92,17 @@ export enum EditorEventType {
 	ToolEnabled,
 	ToolDisabled,
 	ToolUpdated,
+
 	UndoRedoStackUpdated,
+	CommandDone,
+	CommandUndone,
 	ObjectAdded,
+
 	ViewportChanged,
 	DisplayResized,
+
 	ColorPickerToggled,
-	ColorPickerColorSelected
+	ColorPickerColorSelected,
 }
 
 type EditorToolEventType = EditorEventType.ToolEnabled
@@ -131,6 +137,16 @@ export interface EditorUndoStackUpdated {
 	readonly redoStackSize: number;
 }
 
+export interface CommandDoneEvent {
+	readonly kind: EditorEventType.CommandDone;
+	readonly command: Command;
+}
+
+export interface CommandUndoneEvent {
+	readonly kind: EditorEventType.CommandUndone;
+	readonly command: Command;
+}
+
 export interface ColorPickerToggled {
 	readonly kind: EditorEventType.ColorPickerToggled;
 	readonly open: boolean;
@@ -143,8 +159,8 @@ export interface ColorPickerColorSelected {
 
 export type EditorEventDataType = EditorToolEvent | EditorObjectEvent
 	| EditorViewportChangedEvent | DisplayResizedEvent
-	| EditorUndoStackUpdated
-	| ColorPickerToggled| ColorPickerColorSelected;
+	| EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent
+	| ColorPickerToggled | ColorPickerColorSelected;
 
 
 // Returns a Promise to indicate that the event source should pause until the Promise resolves.

package/tsconfig.json

@@ -24,6 +24,9 @@
 
 		// Files that don't need transpilation
 		"**/*.test.ts",
-		"__mocks__/*"
+		"__mocks__/*",
+
+		// Output files
+		"./dist/**"
 	],
 }

package/typedoc.json

@@ -0,0 +1,20 @@
+{
+	"entryPoints": [
+		"./src/"
+	],
+	"exclude": [
+		"**/*.test.ts"
+	],
+	"excludePrivate": true,
+	"excludeInternal": true,
+	"commentStyle": "all",
+	"readme": "README.md",
+	"entryPointStrategy": "expand",
+	"out": "docs/typedoc/",
+
+	"validation": {
+		"notExported": false,
+		"invalidLink": true,
+		"notDocumented": false
+	}
+}

package/dist/src/geometry/Mat33.d.ts

@@ -1,32 +0,0 @@
-import { Point2, Vec2 } from './Vec2';
-import Vec3 from './Vec3';
-export default class Mat33 {
-    readonly a1: number;
-    readonly a2: number;
-    readonly a3: number;
-    readonly b1: number;
-    readonly b2: number;
-    readonly b3: number;
-    readonly c1: number;
-    readonly c2: number;
-    readonly c3: number;
-    private readonly rows;
-    constructor(a1: number, a2: number, a3: number, b1: number, b2: number, b3: number, c1: number, c2: number, c3: number);
-    static ofRows(r1: Vec3, r2: Vec3, r3: Vec3): Mat33;
-    static identity: Mat33;
-    inverse(): Mat33;
-    invertable(): boolean;
-    private cachedInverse;
-    private computeInverse;
-    transposed(): Mat33;
-    rightMul(other: Mat33): Mat33;
-    transformVec2(other: Vec3): Vec2;
-    transformVec3(other: Vec3): Vec3;
-    eq(other: Mat33, fuzz?: number): boolean;
-    toString(): string;
-    toArray(): number[];
-    static translation(amount: Vec2): Mat33;
-    static zRotation(radians: number, center?: Point2): Mat33;
-    static scaling2D(amount: number | Vec2, center?: Point2): Mat33;
-    static fromCSSMatrix(cssString: string): Mat33;
-}

package/dist/src/geometry/Vec3.d.ts

@@ -1,34 +0,0 @@
-export default class Vec3 {
-    readonly x: number;
-    readonly y: number;
-    readonly z: number;
-    private constructor();
-    get xy(): {
-        x: number;
-        y: number;
-    };
-    static of(x: number, y: number, z: number): Vec3;
-    at(idx: number): number;
-    length(): number;
-    magnitude(): number;
-    magnitudeSquared(): number;
-    angle(): number;
-    normalized(): Vec3;
-    times(c: number): Vec3;
-    plus(v: Vec3): Vec3;
-    minus(v: Vec3): Vec3;
-    dot(other: Vec3): number;
-    cross(other: Vec3): Vec3;
-    orthog(): Vec3;
-    extend(distance: number, direction: Vec3): Vec3;
-    lerp(target: Vec3, fractionTo: number): Vec3;
-    zip(other: Vec3, zip: (componentInThis: number, componentInOther: number) => number): Vec3;
-    map(fn: (component: number) => number): Vec3;
-    asArray(): number[];
-    eq(other: Vec3, fuzz: number): boolean;
-    toString(): string;
-    static unitX: Vec3;
-    static unitY: Vec3;
-    static unitZ: Vec3;
-    static zero: Vec3;
-}