js-draw 0.1.11 → 0.2.0

package/dist/src/tools/Pen.js

@@ -20,7 +20,14 @@ export default class Pen extends BaseTool {
     getStrokePoint(pointer) {
         var _a;
         const minPressure = 0.3;
-        const pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 1.0, minPressure);
+        let pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 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/dist/src/tools/PipetteTool.js

@@ -1,3 +1,4 @@
+// @internal @packageDocumentation
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 export default class PipetteTool extends BaseTool {

package/dist/src/tools/SelectionTool.d.ts

@@ -1,8 +1,8 @@
 import Command from '../commands/Command';
 import Editor from '../Editor';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import { Point2, Vec2 } from '../math/Vec2';
 import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';

package/dist/src/tools/SelectionTool.js

@@ -7,17 +7,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import Command from '../commands/Command';
+var _a;
 import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
-import Mat33 from '../geometry/Mat33';
+import Mat33 from '../math/Mat33';
 // import Mat33 from "../geometry/Mat33";
-import Rect2 from '../geometry/Rect2';
-import { Vec2 } from '../geometry/Vec2';
+import Rect2 from '../math/Rect2';
+import { Vec2 } from '../math/Vec2';
 import { EditorEventType } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
+import SerializableCommand from '../commands/SerializableCommand';
 const handleScreenSize = 30;
 const styles = `
 	.handleOverlay {
@@ -118,6 +119,7 @@ const makeDraggable = (element, onDrag, onDragEnd) => {
 };
 // Maximum number of strokes to transform without a re-render.
 const updateChunkSize = 100;
+// @internal
 class Selection {
     constructor(startPoint, editor) {
         this.startPoint = startPoint;
@@ -228,7 +230,7 @@ class Selection {
         this.transform = Mat33.identity;
         this.region = this.region.transformedBoundingBox(inverseTransform);
         // Make the commands undo-able
-        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, currentTransfmCommands, fullTransform, inverseTransform, deltaBoxRotation));
+        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, currentTransfmCommands, fullTransform, deltaBoxRotation));
     }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
@@ -342,7 +344,7 @@ class Selection {
         if (!visibleRect.containsPoint(this.region.center)) {
             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);
+            this.editor.dispatchNoAnnounce(Viewport.transformBy(Mat33.translation(delta.times(-1))), false);
         }
     }
     deleteSelectedObjects() {
@@ -352,37 +354,58 @@ class Selection {
         return new Duplicate(this.selectedElems);
     }
 }
-Selection.ApplyTransformationCommand = class extends Command {
-    constructor(selection, currentTransfmCommands, fullTransform, inverseTransform, deltaBoxRotation) {
-        super();
+_a = Selection;
+(() => {
+    SerializableCommand.register('selection-tool-transform', (json, editor) => {
+        // The selection box is lost when serializing/deserializing. No need to store box rotation
+        const guiBoxRotation = 0;
+        const fullTransform = new Mat33(...json.transform);
+        const commands = json.commands.map(data => SerializableCommand.deserialize(data, editor));
+        return new _a.ApplyTransformationCommand(null, commands, fullTransform, guiBoxRotation);
+    });
+})();
+Selection.ApplyTransformationCommand = class extends SerializableCommand {
+    constructor(selection, currentTransfmCommands, fullTransform, deltaBoxRotation) {
+        super('selection-tool-transform');
         this.selection = selection;
         this.currentTransfmCommands = currentTransfmCommands;
         this.fullTransform = fullTransform;
-        this.inverseTransform = inverseTransform;
         this.deltaBoxRotation = deltaBoxRotation;
     }
     apply(editor) {
+        var _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             // 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();
+            }
             yield editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
-            this.selection.recomputeRegion();
-            this.selection.updateUI();
+            (_b = this.selection) === null || _b === void 0 ? void 0 : _b.recomputeRegion();
+            (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
         });
     }
     unapply(editor) {
+        var _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
-            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();
+            }
             yield editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
-            this.selection.recomputeRegion();
-            this.selection.updateUI();
+            (_b = this.selection) === null || _b === void 0 ? void 0 : _b.recomputeRegion();
+            (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
         });
     }
-    description(localizationTable) {
+    serializeToJSON() {
+        return {
+            commands: this.currentTransfmCommands.map(command => command.serialize()),
+            transform: this.fullTransform.toArray(),
+        };
+    }
+    description(_editor, localizationTable) {
         return localizationTable.transformedElements(this.currentTransfmCommands.length);
     }
 };
@@ -397,9 +420,9 @@ export default class SelectionTool extends BaseTool {
         this.handleOverlay.style.display = 'none';
         this.handleOverlay.classList.add('handleOverlay');
         editor.notifier.on(EditorEventType.ViewportChanged, _data => {
-            var _a, _b;
-            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.recomputeRegion();
-            (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.updateUI();
+            var _b, _c;
+            (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.recomputeRegion();
+            (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.updateUI();
         });
         this.editor.handleKeyEventsFrom(this.handleOverlay);
     }
@@ -447,11 +470,11 @@ export default class SelectionTool extends BaseTool {
         this.onGestureEnd();
     }
     onGestureCancel() {
-        var _a, _b;
+        var _b, _c;
         // Revert to the previous selection, if any.
-        (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.cancelSelection();
+        (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.cancelSelection();
         this.selectionBox = this.prevSelectionBox;
-        (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.appendBackgroundBoxTo(this.handleOverlay);
+        (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.appendBackgroundBoxTo(this.handleOverlay);
     }
     onKeyPress(event) {
         let rotationSteps = 0;
@@ -535,7 +558,7 @@ export default class SelectionTool extends BaseTool {
         this.handleOverlay.style.display = enabled ? 'block' : 'none';
         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/dist/src/tools/TextTool.js

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Text from '../components/Text';
 import EditorImage from '../EditorImage';
-import Mat33 from '../geometry/Mat33';
+import Mat33 from '../math/Mat33';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';

package/dist/src/types.d.ts

@@ -1,12 +1,13 @@
 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 {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
@@ -61,11 +62,13 @@ export declare enum EditorEventType {
     ToolDisabled = 1,
     ToolUpdated = 2,
     UndoRedoStackUpdated = 3,
-    ObjectAdded = 4,
-    ViewportChanged = 5,
-    DisplayResized = 6,
-    ColorPickerToggled = 7,
-    ColorPickerColorSelected = 8
+    CommandDone = 4,
+    CommandUndone = 5,
+    ObjectAdded = 6,
+    ViewportChanged = 7,
+    DisplayResized = 8,
+    ColorPickerToggled = 9,
+    ColorPickerColorSelected = 10
 }
 declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
@@ -90,6 +93,14 @@ export interface EditorUndoStackUpdated {
     readonly undoStackSize: number;
     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;
@@ -98,7 +109,7 @@ export interface ColorPickerColorSelected {
     readonly kind: EditorEventType.ColorPickerColorSelected;
     readonly color: Color4;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled | ColorPickerColorSelected;
+export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected;
 export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
 export declare type ComponentAddedListener = (component: AbstractComponent) => void;
 export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;

package/dist/src/types.js

@@ -15,9 +15,11 @@ export var EditorEventType;
     EditorEventType[EditorEventType["ToolDisabled"] = 1] = "ToolDisabled";
     EditorEventType[EditorEventType["ToolUpdated"] = 2] = "ToolUpdated";
     EditorEventType[EditorEventType["UndoRedoStackUpdated"] = 3] = "UndoRedoStackUpdated";
-    EditorEventType[EditorEventType["ObjectAdded"] = 4] = "ObjectAdded";
-    EditorEventType[EditorEventType["ViewportChanged"] = 5] = "ViewportChanged";
-    EditorEventType[EditorEventType["DisplayResized"] = 6] = "DisplayResized";
-    EditorEventType[EditorEventType["ColorPickerToggled"] = 7] = "ColorPickerToggled";
-    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 8] = "ColorPickerColorSelected";
+    EditorEventType[EditorEventType["CommandDone"] = 4] = "CommandDone";
+    EditorEventType[EditorEventType["CommandUndone"] = 5] = "CommandUndone";
+    EditorEventType[EditorEventType["ObjectAdded"] = 6] = "ObjectAdded";
+    EditorEventType[EditorEventType["ViewportChanged"] = 7] = "ViewportChanged";
+    EditorEventType[EditorEventType["DisplayResized"] = 8] = "DisplayResized";
+    EditorEventType[EditorEventType["ColorPickerToggled"] = 9] = "ColorPickerToggled";
+    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 10] = "ColorPickerColorSelected";
 })(EditorEventType || (EditorEventType = {}));

package/firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "docs",
+    "ignore": [
+      "firebase.json",
+      "src/**",
+      ".husky/**",
+      ".vscode/**",
+      "build_tools/**",
+      "dist/**",
+      "__mocks__/**",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

package/package.json

@@ -1,103 +1,120 @@
 {
-  "name": "js-draw",
-  "version": "0.1.11",
-  "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
-  "main": "dist/src/Editor.js",
-  "types": "dist/src/Editor.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/src/Editor.d.ts",
-      "default": "./dist/src/Editor.js"
-    },
-    "./localizations/getLocalizationTable": {
-      "types": "./dist/src/localizations/getLocalizationTable.d.ts",
-      "default": "./dist/src/localizations/getLocalizationTable.js"
-    },
-    "./getLocalizationTable": {
-      "types": "./dist/src/localizations/getLocalizationTable.d.ts",
-      "default": "./dist/src/localizations/getLocalizationTable.js"
-    },
-    "./styles": {
-      "default": "./src/styles.js"
-    },
-    "./Editor": {
-      "types": "./dist/src/Editor.d.ts",
-      "default": "./dist/src/Editor.js"
-    },
-    "./localization": {
-      "types": "./dist/src/localization.d.ts",
-      "default": "./dist/src/localization.js"
-    },
-    "./toolbar/HTMLToolbar": {
-      "types": "./dist/src/toolbar/HTMLToolbar.d.ts",
-      "default": "./dist/src/toolbar/HTMLToolbar.js"
-    },
-    "./Editor.css": {
-      "default": "./src/Editor.css"
-    },
-    "./toolbar/toolbar.css": {
-      "default": "./src/toolbar/toolbar.css"
-    },
-    "./bundle": {
-      "default": "./dist/bundle.js"
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/personalizedrefrigerator/js-draw.git"
-  },
-  "author": "Henry Heino",
-  "license": "MIT",
-  "private": false,
-  "scripts": {
-    "test": "jest",
-    "build": "rm -rf ./dist; mkdir dist && yarn tsc && ts-node ./build_tools/bundle.ts",
-    "lint": "eslint .",
-    "linter-precommit": "eslint --fix --ext .js --ext .ts",
-    "lint-staged": "lint-staged",
-    "_postinstall": "husky install",
-    "prepack": "yarn build && pinst --disable",
-    "postpack": "pinst --enable"
-  },
-  "dependencies": {
-    "@melloware/coloris": "^0.16.0",
-    "bezier-js": "^6.1.0"
-  },
-  "devDependencies": {
-    "@types/bezier-js": "^4.1.0",
-    "@types/jest": "^28.1.7",
-    "@types/jsdom": "^20.0.0",
-    "@types/node": "^18.7.15",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
-    "css-loader": "^6.7.1",
-    "eslint": "^8.23.0",
-    "husky": "^8.0.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^29.0.2",
-    "jsdom": "^20.0.0",
-    "lint-staged": "^13.0.3",
-    "pinst": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.5",
-    "ts-jest": "^28.0.8",
-    "ts-loader": "^9.3.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.8.2",
-    "webpack": "^5.74.0"
-  },
-  "bugs": {
-    "url": "https://github.com/personalizedrefrigerator/js-draw/issues"
-  },
-  "homepage": "https://github.com/personalizedrefrigerator/js-draw#readme",
-  "directories": {
-    "doc": "docs"
-  },
-  "keywords": [
-    "ink",
-    "drawing",
-    "pen",
-    "freehand",
-    "svg"
-  ]
+	"name": "js-draw",
+	"version": "0.2.0",
+	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
+	"main": "./dist/src/lib.d.ts",
+	"types": "./dist/src/lib.js",
+	"exports": {
+		".": {
+			"types": "./dist/src/lib.d.ts",
+			"default": "./dist/src/lib.js"
+		},
+		"./getLocalizationTable": {
+			"types": "./dist/src/localizations/getLocalizationTable.d.ts",
+			"default": "./dist/src/localizations/getLocalizationTable.js"
+		},
+		"./styles": {
+			"default": "./src/styles.js"
+		},
+		"./Editor": {
+			"types": "./dist/src/Editor.d.ts",
+			"default": "./dist/src/Editor.js"
+		},
+		"./types": {
+			"types": "./dist/src/types.d.ts",
+			"default": "./dist/src/types.js"
+		},
+		"./localization": {
+			"types": "./dist/src/localization.d.ts",
+			"default": "./dist/src/localization.js"
+		},
+		"./toolbar/HTMLToolbar": {
+			"types": "./dist/src/toolbar/HTMLToolbar.d.ts",
+			"default": "./dist/src/toolbar/HTMLToolbar.js"
+		},
+		"./Editor.css": {
+			"default": "./src/Editor.css"
+		},
+		"./math": {
+			"types": "./dist/src/math/lib.d.ts",
+			"default": "./dist/src/math/lib.js"
+		},
+		"./Color4": {
+			"types": "./dist/src/Color4.d.ts",
+			"default": "./dist/src/Color4.js"
+		},
+		"./components": {
+			"types": "./dist/src/components/lib.d.ts",
+			"default": "./dist/src/components/lib.js"
+		},
+		"./commands": {
+			"types": "./dist/src/commands/lib.d.ts",
+			"default": "./dist/src/commands/lib.js"
+		},
+		"./bundle": {
+			"types": "./dist/src/bundle/bundled.d.ts",
+			"default": "./dist/bundle.js"
+		}
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/personalizedrefrigerator/js-draw.git"
+	},
+	"author": "Henry Heino",
+	"license": "MIT",
+	"private": false,
+	"scripts": {
+		"test": "jest",
+		"build": "rm -rf ./dist; mkdir dist && yarn tsc && ts-node ./build_tools/bundle.ts",
+		"doc": "typedoc --options typedoc.json",
+		"watch-docs": "typedoc --watch --options typedoc.json",
+		"lint": "eslint .",
+		"linter-precommit": "eslint --fix --ext .js --ext .ts",
+		"lint-staged": "lint-staged",
+		"prepare": "husky install && yarn build",
+		"prepack": "yarn build && pinst --disable",
+		"postpack": "pinst --enable"
+	},
+	"dependencies": {
+		"@melloware/coloris": "^0.16.0",
+		"bezier-js": "^6.1.0"
+	},
+	"devDependencies": {
+		"@types/bezier-js": "^4.1.0",
+		"@types/jest": "^28.1.7",
+		"@types/jsdom": "^20.0.0",
+		"@types/node": "^18.7.15",
+		"@typescript-eslint/eslint-plugin": "^5.36.2",
+		"@typescript-eslint/parser": "^5.36.2",
+		"css-loader": "^6.7.1",
+		"eslint": "^8.23.0",
+		"husky": "^8.0.1",
+		"jest": "^28.1.3",
+		"jest-environment-jsdom": "^29.0.2",
+		"jsdom": "^20.0.0",
+		"lint-staged": "^13.0.3",
+		"pinst": "^3.0.0",
+		"style-loader": "^3.3.1",
+		"terser-webpack-plugin": "^5.3.5",
+		"ts-jest": "^28.0.8",
+		"ts-loader": "^9.3.1",
+		"ts-node": "^10.9.1",
+		"typedoc": "^0.23.14",
+		"typescript": "^4.8.2",
+		"webpack": "^5.74.0"
+	},
+	"bugs": {
+		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"
+	},
+	"homepage": "https://github.com/personalizedrefrigerator/js-draw#readme",
+	"directories": {
+		"doc": "docs"
+	},
+	"keywords": [
+		"ink",
+		"drawing",
+		"pen",
+		"freehand",
+		"svg"
+	]
 }

package/src/Color4.ts

@@ -1,14 +1,25 @@
 
 export default class Color4 {
 	private constructor(
+		/** Red component. Should be in the range [0, 1]. */
 		public readonly r: number,
+
+		/** Green component. `g` ∈ [0, 1] */
 		public readonly g: number,
+
+		/** Blue component. `b` ∈ [0, 1] */
 		public readonly b: number,
+
+		/** Alpha/transparent component. `a` ∈ [0, 1] */
 		public readonly a: number
 	) {
 	}
 
-	// Each component should be in the range [0, 1]
+	/**
+	 * Create a color from red, green, blue components. The color is fully opaque (`a = 1.0`).
+	 * 
+	 * Each component should be in the range [0, 1].
+	 */
 	public static ofRGB(red: number, green: number, blue: number): Color4 {
 		return Color4.ofRGBA(red, green, blue, 1.0);
 	}
@@ -58,7 +69,7 @@ export default class Color4 {
 		return Color4.ofRGBA(components[0], components[1], components[2], components[3]);
 	}
 
-	// Like fromHex, but can handle additional colors if an HTML5Canvas is available.
+	/** Like fromHex, but can handle additional colors if an `HTMLCanvasElement` is available. */
 	public static fromString(text: string): Color4 {
 		if (text.startsWith('#')) {
 			return Color4.fromHex(text);
@@ -82,6 +93,7 @@ export default class Color4 {
 		}
 	}
 
+	/** @returns true if `this` and `other` are approximately equal. */
 	public eq(other: Color4|null|undefined): boolean {
 		if (other == null) {
 			return false;
@@ -91,6 +103,15 @@ export default class Color4 {
 	}
 
 	private hexString: string|null = null;
+
+	/**
+	 * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
+	 * 
+	 * @example
+	 * ```
+	 * Color4.red.toHexString(); // -> #ff0000ff
+	 * ```
+	 */
 	public toHexString(): string {
 		if (this.hexString) {
 			return this.hexString;