js-draw 0.1.11 → 0.2.0

package/dist/src/{geometry → math}/Path.js

@@ -1,4 +1,5 @@
 import { Bezier } from 'bezier-js';
+import { toRoundedString, toStringOfSamePrecision } from './rounding';
 import LineSegment2 from './LineSegment2';
 import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
@@ -109,8 +110,8 @@ export default class Path {
         }
         return result;
     }
-    transformedBy(affineTransfm) {
-        const startPoint = affineTransfm.transformVec2(this.startPoint);
+    mapPoints(mapping) {
+        const startPoint = mapping(this.startPoint);
         const newParts = [];
         let exhaustivenessCheck;
         for (const part of this.parts) {
@@ -119,22 +120,22 @@ export default class Path {
                 case PathCommandType.LineTo:
                     newParts.push({
                         kind: part.kind,
-                        point: affineTransfm.transformVec2(part.point),
+                        point: mapping(part.point),
                     });
                     break;
                 case PathCommandType.CubicBezierTo:
                     newParts.push({
                         kind: part.kind,
-                        controlPoint1: affineTransfm.transformVec2(part.controlPoint1),
-                        controlPoint2: affineTransfm.transformVec2(part.controlPoint2),
-                        endPoint: affineTransfm.transformVec2(part.endPoint),
+                        controlPoint1: mapping(part.controlPoint1),
+                        controlPoint2: mapping(part.controlPoint2),
+                        endPoint: mapping(part.endPoint),
                     });
                     break;
                 case PathCommandType.QuadraticBezierTo:
                     newParts.push({
                         kind: part.kind,
-                        controlPoint: affineTransfm.transformVec2(part.controlPoint),
-                        endPoint: affineTransfm.transformVec2(part.endPoint),
+                        controlPoint: mapping(part.controlPoint),
+                        endPoint: mapping(part.endPoint),
                     });
                     break;
                 default:
@@ -144,6 +145,9 @@ export default class Path {
         }
         return new Path(startPoint, newParts);
     }
+    transformedBy(affineTransfm) {
+        return this.mapPoints(point => affineTransfm.transformVec2(point));
+    }
     // Creates a new path by joining [other] to the end of this path
     union(other) {
         if (!other) {
@@ -201,58 +205,61 @@ export default class Path {
         };
     }
     toString() {
-        return Path.toString(this.startPoint, this.parts);
+        // Hueristic: Try to determine whether converting absolute to relative commands is worth it.
+        //            If we're near (0, 0), it probably isn't worth it and if bounding boxes are large,
+        //            it also probably isn't worth it.
+        const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.size.x) < 2
+            && Math.abs(this.bbox.topLeft.y) > 10 && Math.abs(this.bbox.size.y) < 2;
+        return Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
     }
     serialize() {
         return this.toString();
     }
-    static toString(startPoint, parts) {
+    // @param onlyAbsCommands - True if we should avoid converting absolute coordinates to relative offsets -- such
+    //   conversions can lead to smaller output strings, but also take time.
+    static toString(startPoint, parts, onlyAbsCommands = true) {
         const result = [];
-        const toRoundedString = (num) => {
-            // Try to remove rounding errors. If the number ends in at least three/four zeroes
-            // (or nines) just one or two digits, it's probably a rounding error.
-            const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d$/;
-            const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,}\d)$/;
-            let text = num.toString();
-            if (text.indexOf('.') === -1) {
-                return text;
-            }
-            const roundingDownMatch = hasRoundingDownExp.exec(text);
-            if (roundingDownMatch) {
-                const negativeSign = roundingDownMatch[1];
-                const lastDigit = parseInt(text.charAt(text.length - 1), 10);
-                const postDecimal = parseInt(roundingDownMatch[3], 10);
-                const preDecimal = parseInt(roundingDownMatch[2], 10);
-                const origPostDecimalString = roundingDownMatch[3];
-                let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
-                let carry = 0;
-                if (newPostDecimal.length > postDecimal.toString().length) {
-                    // Left-shift
-                    newPostDecimal = newPostDecimal.substring(1);
-                    carry = 1;
+        let prevPoint;
+        const addCommand = (command, ...points) => {
+            const absoluteCommandParts = [];
+            const relativeCommandParts = [];
+            const makeAbsCommand = !prevPoint || onlyAbsCommands;
+            const roundedPrevX = prevPoint ? toRoundedString(prevPoint.x) : '';
+            const roundedPrevY = prevPoint ? toRoundedString(prevPoint.y) : '';
+            for (const point of points) {
+                // Relative commands are often shorter as strings than absolute commands.
+                if (!makeAbsCommand) {
+                    const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint.x, roundedPrevX, roundedPrevY);
+                    const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint.y, roundedPrevX, roundedPrevY);
+                    // No need for an additional separator if it starts with a '-'
+                    if (yComponentRelative.charAt(0) === '-') {
+                        relativeCommandParts.push(`${xComponentRelative}${yComponentRelative}`);
+                    }
+                    else {
+                        relativeCommandParts.push(`${xComponentRelative},${yComponentRelative}`);
+                    }
                 }
-                // parseInt(...).toString() removes leading zeroes. Add them back.
-                while (newPostDecimal.length < origPostDecimalString.length) {
-                    newPostDecimal = carry.toString(10) + newPostDecimal;
-                    carry = 0;
+                else {
+                    const xComponent = toRoundedString(point.x);
+                    const yComponent = toRoundedString(point.y);
+                    absoluteCommandParts.push(`${xComponent},${yComponent}`);
                 }
-                text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
             }
-            text = text.replace(fixRoundingUpExp, '$1');
-            // Remove trailing zeroes
-            text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
-            text = text.replace(/[.]0+$/, '.');
-            // Remove trailing period
-            return text.replace(/[.]$/, '');
-        };
-        const addCommand = (command, ...points) => {
-            const parts = [];
-            for (const point of points) {
-                const xComponent = toRoundedString(point.x);
-                const yComponent = toRoundedString(point.y);
-                parts.push(`${xComponent},${yComponent}`);
+            let commandString;
+            if (makeAbsCommand) {
+                commandString = `${command}${absoluteCommandParts.join(' ')}`;
+            }
+            else {
+                commandString = `${command.toLowerCase()}${relativeCommandParts.join(' ')}`;
+            }
+            // Don't add no-ops.
+            if (commandString === 'l0,0') {
+                return;
+            }
+            result.push(commandString);
+            if (points.length > 0) {
+                prevPoint = points[points.length - 1];
             }
-            result.push(`${command}${parts.join(' ')}`);
         };
         addCommand('M', startPoint);
         let exhaustivenessCheck;
@@ -279,7 +286,7 @@ export default class Path {
     }
     // Create a Path from a SVG path specification.
     // TODO: Support a larger subset of SVG paths.
-    // TODO: Support s,t shorthands.
+    // TODO: Support `s`,`t` commands shorthands.
     static fromString(pathString) {
         // See the MDN reference:
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

package/dist/src/{geometry → math}/Rect2.d.ts

@@ -1,7 +1,8 @@
 import LineSegment2 from './LineSegment2';
 import Mat33 from './Mat33';
 import { Point2, Vec2 } from './Vec2';
-interface RectTemplate {
+/** An object that can be converted to a Rect2. */
+export interface RectTemplate {
     x: number;
     y: number;
     w?: number;
@@ -48,4 +49,3 @@ export default class Rect2 {
     static empty: Rect2;
     static unitSquare: Rect2;
 }
-export {};

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

@@ -0,0 +1,96 @@
+/**
+ * A vector with three components. Can also be used to represent a two-component vector.
+ *
+ * A `Vec3` is immutable.
+ */
+export default class Vec3 {
+    readonly x: number;
+    readonly y: number;
+    readonly z: number;
+    private constructor();
+    /** Returns the x, y components of this. */
+    get xy(): {
+        x: number;
+        y: number;
+    };
+    static of(x: number, y: number, z: number): Vec3;
+    /** Returns this' `idx`th component. For example, `Vec3.of(1, 2, 3).at(1) → 2`. */
+    at(idx: number): number;
+    /** Alias for this.magnitude. */
+    length(): number;
+    magnitude(): number;
+    magnitudeSquared(): number;
+    /**
+     * Return this' angle in the XY plane (treats this as a Vec2).
+     *
+     * This is equivalent to `Math.atan2(vec.y, vec.x)`.
+     */
+    angle(): number;
+    /**
+     * Returns a unit vector in the same direction as this.
+     *
+     * If `this` has zero length, the resultant vector has `NaN` components.
+     */
+    normalized(): Vec3;
+    /** @returns A copy of `this` multiplied by a scalar. */
+    times(c: number): Vec3;
+    plus(v: Vec3): Vec3;
+    minus(v: Vec3): Vec3;
+    dot(other: Vec3): number;
+    cross(other: Vec3): Vec3;
+    /**
+     * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
+     * 90 degrees counter-clockwise.
+     */
+    orthog(): Vec3;
+    /** Returns this plus a vector of length `distance` in `direction`. */
+    extend(distance: number, direction: Vec3): Vec3;
+    /** Returns a vector `fractionTo` of the way to target from this. */
+    lerp(target: Vec3, fractionTo: number): Vec3;
+    /**
+     * `zip` Maps a component of this and a corresponding component of
+     * `other` to a component of the output vector.
+     *
+     * @example
+     * ```
+     * const a = Vec3.of(1, 2, 3);
+     * const b = Vec3.of(0.5, 2.1, 2.9);
+     *
+     * const zipped = a.zip(b, (aComponent, bComponent) => {
+     *   return Math.min(aComponent, bComponent);
+     * });
+     *
+     * console.log(zipped.toString()); // → Vec(0.5, 2, 2.9)
+     * ```
+     */
+    zip(other: Vec3, zip: (componentInThis: number, componentInOther: number) => number): Vec3;
+    /**
+     * Returns a vector with each component acted on by `fn`.
+     *
+     * @example
+     * ```
+     * console.log(Vec3.of(1, 2, 3).map(val => val + 1)); // → Vec(2, 3, 4)
+     * ```
+     */
+    map(fn: (component: number, index: number) => number): Vec3;
+    asArray(): number[];
+    /**
+     * [fuzz] The maximum difference between two components for this and [other]
+     * to be considered equal.
+     *
+     * @example
+     * ```
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 100);  // → true
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 0.1);  // → false
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 3);    // → true
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 3.01); // → true
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 2.99); // → false
+     * ```
+     */
+    eq(other: Vec3, fuzz: number): boolean;
+    toString(): string;
+    static unitX: Vec3;
+    static unitY: Vec3;
+    static unitZ: Vec3;
+    static zero: Vec3;
+}

package/dist/src/{geometry → math}/Vec3.js

@@ -1,11 +1,15 @@
-// A vector with three components. Can also be used to represent a two-component vector
+/**
+ * A vector with three components. Can also be used to represent a two-component vector.
+ *
+ * A `Vec3` is immutable.
+ */
 export default class Vec3 {
     constructor(x, y, z) {
         this.x = x;
         this.y = y;
         this.z = z;
     }
-    // Returns the x, y components of this
+    /** Returns the x, y components of this. */
     get xy() {
         // Useful for APIs that behave differently if .z is present.
         return {
@@ -16,7 +20,7 @@ export default class Vec3 {
     static of(x, y, z) {
         return new Vec3(x, y, z);
     }
-    // Returns this' [idx]th component
+    /** Returns this' `idx`th component. For example, `Vec3.of(1, 2, 3).at(1) → 2`. */
     at(idx) {
         if (idx === 0)
             return this.x;
@@ -26,7 +30,7 @@ export default class Vec3 {
             return this.z;
         throw new Error(`${idx} out of bounds!`);
     }
-    // Alias for this.magnitude
+    /** Alias for this.magnitude. */
     length() {
         return this.magnitude();
     }
@@ -36,14 +40,24 @@ export default class Vec3 {
     magnitudeSquared() {
         return this.dot(this);
     }
-    // Return this' angle in the XY plane (treats this as a Vec2)
+    /**
+     * Return this' angle in the XY plane (treats this as a Vec2).
+     *
+     * This is equivalent to `Math.atan2(vec.y, vec.x)`.
+     */
     angle() {
         return Math.atan2(this.y, this.x);
     }
+    /**
+     * Returns a unit vector in the same direction as this.
+     *
+     * If `this` has zero length, the resultant vector has `NaN` components.
+     */
     normalized() {
         const norm = this.magnitude();
         return Vec3.of(this.x / norm, this.y / norm, this.z / norm);
     }
+    /** @returns A copy of `this` multiplied by a scalar. */
     times(c) {
         return Vec3.of(this.x * c, this.y * c, this.z * c);
     }
@@ -62,8 +76,10 @@ export default class Vec3 {
         // | x2 y2 z2|
         return Vec3.of(this.y * other.z - other.y * this.z, other.x * this.z - this.x * other.z, this.x * other.y - other.x * this.y);
     }
-    // Returns a vector orthogonal to this. If this is a Vec2, returns [this] rotated
-    // 90 degrees counter-clockwise.
+    /**
+     * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
+     * 90 degrees counter-clockwise.
+     */
     orthog() {
         // If parallel to the z-axis
         if (this.dot(Vec3.unitX) === 0 && this.dot(Vec3.unitY) === 0) {
@@ -71,28 +87,60 @@ export default class Vec3 {
         }
         return this.cross(Vec3.unitZ.times(-1)).normalized();
     }
-    // Returns this plus a vector of length [distance] in [direction]
+    /** Returns this plus a vector of length `distance` in `direction`. */
     extend(distance, direction) {
         return this.plus(direction.normalized().times(distance));
     }
-    // Returns a vector [fractionTo] of the way to target from this.
+    /** Returns a vector `fractionTo` of the way to target from this. */
     lerp(target, fractionTo) {
         return this.times(1 - fractionTo).plus(target.times(fractionTo));
     }
-    // [zip] Maps a component of this and a corresponding component of
-    // [other] to a component of the output vector.
+    /**
+     * `zip` Maps a component of this and a corresponding component of
+     * `other` to a component of the output vector.
+     *
+     * @example
+     * ```
+     * const a = Vec3.of(1, 2, 3);
+     * const b = Vec3.of(0.5, 2.1, 2.9);
+     *
+     * const zipped = a.zip(b, (aComponent, bComponent) => {
+     *   return Math.min(aComponent, bComponent);
+     * });
+     *
+     * console.log(zipped.toString()); // → Vec(0.5, 2, 2.9)
+     * ```
+     */
     zip(other, zip) {
         return Vec3.of(zip(other.x, this.x), zip(other.y, this.y), zip(other.z, this.z));
     }
-    // Returns a vector with each component acted on by [fn]
+    /**
+     * Returns a vector with each component acted on by `fn`.
+     *
+     * @example
+     * ```
+     * console.log(Vec3.of(1, 2, 3).map(val => val + 1)); // → Vec(2, 3, 4)
+     * ```
+     */
     map(fn) {
-        return Vec3.of(fn(this.x), fn(this.y), fn(this.z));
+        return Vec3.of(fn(this.x, 0), fn(this.y, 1), fn(this.z, 2));
     }
     asArray() {
         return [this.x, this.y, this.z];
     }
-    // [fuzz] The maximum difference between two components for this and [other]
-    // to be considered equal.
+    /**
+     * [fuzz] The maximum difference between two components for this and [other]
+     * to be considered equal.
+     *
+     * @example
+     * ```
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 100);  // → true
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 0.1);  // → false
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 3);    // → true
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 3.01); // → true
+     * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 2.99); // → false
+     * ```
+     */
     eq(other, fuzz) {
         for (let i = 0; i < 3; i++) {
             if (Math.abs(other.at(i) - this.at(i)) > fuzz) {

package/dist/src/math/lib.d.ts

@@ -0,0 +1,7 @@
+import LineSegment2 from './LineSegment2';
+import Mat33 from './Mat33';
+import Path from './Path';
+import Rect2 from './Rect2';
+import { Vec2 } from './Vec2';
+import Vec3 from './Vec3';
+export { LineSegment2, Mat33, Path, Rect2, Vec3, Vec2, };

package/dist/src/math/lib.js

@@ -0,0 +1,7 @@
+import LineSegment2 from './LineSegment2';
+import Mat33 from './Mat33';
+import Path from './Path';
+import Rect2 from './Rect2';
+import { Vec2 } from './Vec2';
+import Vec3 from './Vec3';
+export { LineSegment2, Mat33, Path, Rect2, Vec3, Vec2, };

package/dist/src/math/rounding.d.ts

@@ -0,0 +1,3 @@
+export declare const toRoundedString: (num: number) => string;
+export declare const getLenAfterDecimal: (numberAsString: string) => number;
+export declare const toStringOfSamePrecision: (num: number, ...references: string[]) => string;

package/dist/src/math/rounding.js

@@ -0,0 +1,121 @@
+// @packageDocumentation @internal
+// Clean up stringified numbers
+const cleanUpNumber = (text) => {
+    // Regular expression substitions can be somewhat expensive. Only do them
+    // if necessary.
+    const lastChar = text.charAt(text.length - 1);
+    if (lastChar === '0' || lastChar === '.') {
+        // Remove trailing zeroes
+        text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+        text = text.replace(/[.]0+$/, '.');
+        // Remove trailing period
+        text = text.replace(/[.]$/, '');
+        if (text === '-0') {
+            return '0';
+        }
+    }
+    const firstChar = text.charAt(0);
+    if (firstChar === '0' || firstChar === '-') {
+        // Remove unnecessary leading zeroes.
+        text = text.replace(/^(0+)[.]/, '.');
+        text = text.replace(/^-(0+)[.]/, '-.');
+    }
+    return text;
+};
+export const toRoundedString = (num) => {
+    // Try to remove rounding errors. If the number ends in at least three/four zeroes
+    // (or nines) just one or two digits, it's probably a rounding error.
+    const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,2}$/;
+    const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,2}$/;
+    let text = num.toString(10);
+    if (text.indexOf('.') === -1) {
+        return text;
+    }
+    const roundingDownMatch = hasRoundingDownExp.exec(text);
+    if (roundingDownMatch) {
+        const negativeSign = roundingDownMatch[1];
+        const postDecimalString = roundingDownMatch[3];
+        const lastDigit = parseInt(postDecimalString.charAt(postDecimalString.length - 1), 10);
+        const postDecimal = parseInt(postDecimalString, 10);
+        const preDecimal = parseInt(roundingDownMatch[2], 10);
+        const origPostDecimalString = roundingDownMatch[3];
+        let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
+        let carry = 0;
+        if (newPostDecimal.length > postDecimal.toString().length) {
+            // Left-shift
+            newPostDecimal = newPostDecimal.substring(1);
+            carry = 1;
+        }
+        // parseInt(...).toString() removes leading zeroes. Add them back.
+        while (newPostDecimal.length < origPostDecimalString.length) {
+            newPostDecimal = carry.toString(10) + newPostDecimal;
+            carry = 0;
+        }
+        text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
+    }
+    text = text.replace(fixRoundingUpExp, '$1');
+    return cleanUpNumber(text);
+};
+const numberExp = /^([-]?)(\d*)[.](\d+)$/;
+export const getLenAfterDecimal = (numberAsString) => {
+    const numberMatch = numberExp.exec(numberAsString);
+    if (!numberMatch) {
+        // If not a match, either the number is exponential notation (or is something
+        // like NaN or Infinity)
+        if (numberAsString.search(/[eE]/) !== -1 || /^[a-zA-Z]+$/.exec(numberAsString)) {
+            return -1;
+            // Or it has no decimal point
+        }
+        else {
+            return 0;
+        }
+    }
+    const afterDecimalLen = numberMatch[3].length;
+    return afterDecimalLen;
+};
+// [reference] should be a string representation of a base-10 number (no exponential (e.g. 10e10))
+export const toStringOfSamePrecision = (num, ...references) => {
+    const text = num.toString(10);
+    const textMatch = numberExp.exec(text);
+    if (!textMatch) {
+        return text;
+    }
+    let decimalPlaces = -1;
+    for (const reference of references) {
+        decimalPlaces = Math.max(getLenAfterDecimal(reference), decimalPlaces);
+    }
+    if (decimalPlaces === -1) {
+        return toRoundedString(num);
+    }
+    // Make text's after decimal length match [afterDecimalLen].
+    let postDecimal = textMatch[3].substring(0, decimalPlaces);
+    let preDecimal = textMatch[2];
+    const nextDigit = textMatch[3].charAt(decimalPlaces);
+    if (nextDigit !== '') {
+        const asNumber = parseInt(nextDigit, 10);
+        if (asNumber >= 5) {
+            // Don't attempt to parseInt() an empty string.
+            if (postDecimal.length > 0) {
+                const leadingZeroMatch = /^(0+)(\d*)$/.exec(postDecimal);
+                let leadingZeroes = '';
+                let postLeading = postDecimal;
+                if (leadingZeroMatch) {
+                    leadingZeroes = leadingZeroMatch[1];
+                    postLeading = leadingZeroMatch[2];
+                }
+                postDecimal = (parseInt(postDecimal) + 1).toString();
+                // If postDecimal got longer, remove leading zeroes if possible
+                if (postDecimal.length > postLeading.length && leadingZeroes.length > 0) {
+                    leadingZeroes = leadingZeroes.substring(1);
+                }
+                postDecimal = leadingZeroes + postDecimal;
+            }
+            if (postDecimal.length === 0 || postDecimal.length > decimalPlaces) {
+                preDecimal = (parseInt(preDecimal) + 1).toString();
+                postDecimal = postDecimal.substring(1);
+            }
+        }
+    }
+    const negativeSign = textMatch[1];
+    return cleanUpNumber(`${negativeSign}${preDecimal}.${postDecimal}`);
+};

package/dist/src/rendering/Display.d.ts

@@ -1,6 +1,20 @@
+/**
+ * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
+ *
+ * @example
+ * ```
+ * const editor = new Editor(document.body);
+ * const w = editor.display.width;
+ * const h = editor.display.height;
+ * const center = Vec2.of(w / 2, h / 2);
+ * const colorAtCenter = editor.display.getColorAt(center);
+ * ```
+ *
+ * @packageDocumentation
+ */
 import AbstractRenderer from './renderers/AbstractRenderer';
 import { Editor } from '../Editor';
-import { Point2 } from '../geometry/Vec2';
+import { Point2 } from '../math/Vec2';
 import RenderingCache from './caching/RenderingCache';
 import Color4 from '../Color4';
 export declare enum RenderingMode {
@@ -13,19 +27,51 @@ export default class Display {
     private dryInkRenderer;
     private wetInkRenderer;
     private textRenderer;
+    private textRerenderOutput;
     private cache;
     private resizeSurfacesCallback?;
     private flattenCallback?;
+    /** @internal */
     constructor(editor: Editor, mode: RenderingMode, parent: HTMLElement | null);
+    /**
+     * @returns the visible width of the display (e.g. how much
+     * space the display's element takes up in the x direction
+     * in the DOM).
+     */
     get width(): number;
     get height(): number;
+    /** @internal */
     getCache(): RenderingCache;
+    /**
+     * @returns the color at the given point on the dry ink renderer, or `null` if `screenPos`
+     * 	is not on the display.
+     */
     getColorAt: (_screenPos: Point2) => Color4 | null;
     private initializeCanvasRendering;
     private initializeTextRendering;
+    /**
+     * Rerenders the text-based display.
+     * The text-based display is intended for screen readers and can be navigated to by pressing `tab`.
+     */
+    rerenderAsText(): void;
+    /**
+     * Clears the drawing surfaces and otherwise prepares for a rerender.
+     *
+     * @returns the dry ink renderer.
+     */
     startRerender(): AbstractRenderer;
+    /**
+     * If `draftMode`, the dry ink renderer is configured to render
+     * low-quality output.
+     */
     setDraftMode(draftMode: boolean): void;
+    /** @internal */
     getDryInkRenderer(): AbstractRenderer;
+    /**
+     * @returns The renderer used for showing action previews (e.g. an unfinished stroke).
+     * The `wetInkRenderer`'s surface is stacked above the `dryInkRenderer`'s.
+     */
     getWetInkRenderer(): AbstractRenderer;
+    /** Re-renders the contents of the wetInkRenderer onto the dryInkRenderer. */
     flatten(): void;
 }