js-draw 0.12.0 → 0.13.0

package/dist/src/Color4.d.ts

@@ -20,6 +20,18 @@ export default class Color4 {
     static fromString(text: string): Color4;
     /** @returns true if `this` and `other` are approximately equal. */
     eq(other: Color4 | null | undefined): boolean;
+    /**
+     * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
+     * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
+     *
+     * @returns a color `fractionTo` of the way from this color to `other`.
+     *
+     * @example
+     * ```ts
+     * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
+     * ```
+     */
+    mix(other: Color4, fractionTo: number): Color4;
     private hexString;
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.

package/dist/src/Color4.js

@@ -105,6 +105,22 @@ export default class Color4 {
         }
         return this.toHexString() === other.toHexString();
     }
+    /**
+     * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
+     * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
+     *
+     * @returns a color `fractionTo` of the way from this color to `other`.
+     *
+     * @example
+     * ```ts
+     * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
+     * ```
+     */
+    mix(other, fractionTo) {
+        fractionTo = Math.min(Math.max(fractionTo, 0), 1);
+        const fractionOfThis = 1 - fractionTo;
+        return new Color4(this.r * fractionOfThis + other.r * fractionTo, this.g * fractionOfThis + other.g * fractionTo, this.b * fractionOfThis + other.b * fractionTo, this.a * fractionOfThis + other.a * fractionTo);
+    }
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
      *

package/dist/src/Editor.d.ts

@@ -1,20 +1,3 @@
-/**
- * The main entrypoint for the full editor.
- *
- * @example
- * To create an editor with a toolbar,
- * ```
- * const editor = new Editor(document.body);
- *
- * const toolbar = editor.addToolbar();
- * toolbar.addActionButton('Save', () => {
- *   const saveData = editor.toSVG().outerHTML;
- *   // Do something with saveData...
- * });
- * ```
- *
- * @packageDocumentation
- */
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
 import { InputEvtType, EditorNotifier, ImageLoader } from './types';
@@ -48,9 +31,25 @@ export interface EditorSettings {
     maxZoom: number;
     iconProvider: IconProvider;
 }
+/**
+ * The main entrypoint for the full editor.
+ *
+ * @example
+ * To create an editor with a toolbar,
+ * ```
+ * const editor = new Editor(document.body);
+ *
+ * const toolbar = editor.addToolbar();
+ * toolbar.addActionButton('Save', () => {
+ *   const saveData = editor.toSVG().outerHTML;
+ *   // Do something with saveData...
+ * });
+ * ```
+ */
 export declare class Editor {
     private container;
     private renderingRegion;
+    /** Manages drawing surfaces/{@link lib!AbstractRenderer}s. */
     display: Display;
     /**
      * Handles undo/redo.
@@ -87,10 +86,20 @@ export declare class Editor {
     readonly image: EditorImage;
     /** Viewport for the exported/imported image. */
     private importExportViewport;
+    /**
+     * Allows transforming the view and querying information about
+     * what is currently visible.
+     */
+    readonly viewport: Viewport;
     /** @internal */
     readonly localization: EditorLocalization;
+    /** {@link lib!EditorSettings.iconProvider} */
     readonly icons: IconProvider;
-    readonly viewport: Viewport;
+    /**
+     * Controls the list of tools. See
+     * [the custom tool example](https://github.com/personalizedrefrigerator/js-draw/tree/main/docs/example-custom-tools)
+     * for more.
+     */
     readonly toolController: ToolController;
     /**
      * Global event dispatcher/subscriber.
@@ -196,7 +205,13 @@ export declare class Editor {
      */
     queueRerender(): Promise<void>;
     rerender(showImageBounds?: boolean): void;
+    /**
+     * @see {@link Display.getWetInkRenderer} {@link Display.flatten}
+     */
     drawWetInk(...path: RenderablePathSpec[]): void;
+    /**
+     * @see {@link Display.getWetInkRenderer}
+     */
     clearWetInk(): void;
     focus(): void;
     createHTMLOverlay(overlay: HTMLElement): {

package/dist/src/Editor.js

@@ -1,20 +1,3 @@
-/**
- * The main entrypoint for the full editor.
- *
- * @example
- * To create an editor with a toolbar,
- * ```
- * const editor = new Editor(document.body);
- *
- * const toolbar = editor.addToolbar();
- * toolbar.addActionButton('Save', () => {
- *   const saveData = editor.toSVG().outerHTML;
- *   // Do something with saveData...
- * });
- * ```
- *
- * @packageDocumentation
- */
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -48,7 +31,21 @@ import untilNextAnimationFrame from './util/untilNextAnimationFrame';
 import fileToBase64 from './util/fileToBase64';
 import uniteCommands from './commands/uniteCommands';
 import SelectionTool from './tools/SelectionTool/SelectionTool';
-// { @inheritDoc Editor! }
+/**
+ * The main entrypoint for the full editor.
+ *
+ * @example
+ * To create an editor with a toolbar,
+ * ```
+ * const editor = new Editor(document.body);
+ *
+ * const toolbar = editor.addToolbar();
+ * toolbar.addActionButton('Save', () => {
+ *   const saveData = editor.toSVG().outerHTML;
+ *   // Do something with saveData...
+ * });
+ * ```
+ */
 export class Editor {
     /**
      * @example
@@ -582,11 +579,17 @@ export class Editor {
         this.nextRerenderListeners.forEach(listener => listener());
         this.nextRerenderListeners = [];
     }
+    /**
+     * @see {@link Display.getWetInkRenderer} {@link Display.flatten}
+     */
     drawWetInk(...path) {
         for (const part of path) {
             this.display.getWetInkRenderer().drawPath(part);
         }
     }
+    /**
+     * @see {@link Display.getWetInkRenderer}
+     */
     clearWetInk() {
         this.display.getWetInkRenderer().clear();
     }
@@ -681,7 +684,7 @@ export class Editor {
     // The export resolution is the same as the size of the drawing canvas.
     toDataURL(format = 'image/png') {
         const canvas = document.createElement('canvas');
-        const resolution = this.importExportViewport.getResolution();
+        const resolution = this.importExportViewport.getScreenRectSize();
         canvas.width = resolution.x;
         canvas.height = resolution.y;
         const ctx = canvas.getContext('2d');

package/dist/src/EditorImage.d.ts

@@ -22,8 +22,20 @@ export default class EditorImage {
     getElementsIntersectingRegion(region: Rect2): AbstractComponent[];
     /** @internal */
     onDestroyElement(elem: AbstractComponent): void;
+    /**
+     * @returns the AbstractComponent with `id`, if it exists.
+     *
+     * @see {@link AbstractComponent.getId}
+     */
     lookupElement(id: string): AbstractComponent | null;
     private addElementDirectly;
+    /**
+     * Returns a command that adds the given element to the `EditorImage`.
+     * If `applyByFlattening` is true, the content of the wet ink renderer is
+     * rendered onto the main rendering canvas instead of doing a full re-render.
+     *
+     * @see {@link Display.flatten}
+     */
     static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
     private static AddElementCommand;
 }

package/dist/src/EditorImage.js

@@ -55,6 +55,11 @@ export default class EditorImage {
     onDestroyElement(elem) {
         delete this.componentsById[elem.getId()];
     }
+    /**
+     * @returns the AbstractComponent with `id`, if it exists.
+     *
+     * @see {@link AbstractComponent.getId}
+     */
     lookupElement(id) {
         var _a;
         return (_a = this.componentsById[id]) !== null && _a !== void 0 ? _a : null;
@@ -63,6 +68,13 @@ export default class EditorImage {
         this.componentsById[elem.getId()] = elem;
         return this.root.addLeaf(elem);
     }
+    /**
+     * Returns a command that adds the given element to the `EditorImage`.
+     * If `applyByFlattening` is true, the content of the wet ink renderer is
+     * rendered onto the main rendering canvas instead of doing a full re-render.
+     *
+     * @see {@link Display.flatten}
+     */
     static addElement(elem, applyByFlattening = false) {
         return new EditorImage.AddElementCommand(elem, applyByFlattening);
     }

package/dist/src/Pointer.d.ts

@@ -18,6 +18,7 @@ export default class Pointer {
     readonly id: number;
     readonly timeStamp: number;
     private constructor();
+    snappedToGrid(viewport: Viewport): Pointer;
     static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer;
     static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null): Pointer;
 }

package/dist/src/Pointer.js

@@ -31,6 +31,14 @@ export default class Pointer {
         this.id = id;
         this.timeStamp = timeStamp;
     }
+    // Snaps this pointer to the nearest grid point (rounds the coordinates of this
+    // pointer based on the current zoom). Returns a new Pointer and does not modify
+    // this.
+    snappedToGrid(viewport) {
+        const snappedCanvasPos = viewport.snapToGrid(this.canvasPos);
+        const snappedScreenPos = viewport.canvasToScreen(snappedCanvasPos);
+        return new Pointer(snappedScreenPos, snappedCanvasPos, this.pressure, this.isPrimary, this.down, this.device, this.id, this.timeStamp);
+    }
     // Creates a Pointer from a DOM event. If `relativeTo` is given, (0, 0) in screen coordinates is
     // considered the top left of `relativeTo`.
     static ofEvent(evt, isDown, viewport, relativeTo) {

package/dist/src/SVGLoader.d.ts

@@ -34,5 +34,10 @@ export default class SVGLoader implements ImageLoader {
     private visit;
     private getSourceAttrs;
     start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener | null): Promise<void>;
+    /**
+     * @see {@link Editor.loadFrom}
+     * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
+     * @param sanitize - if `true`, don't store unknown attributes.
+     */
     static fromString(text: string, sanitize?: boolean): SVGLoader;
 }

package/dist/src/SVGLoader.js

@@ -23,6 +23,7 @@ export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 export const svgAttributesDataKey = 'svgAttrs';
 export const svgStyleAttributesDataKey = 'svgStyleAttrs';
 const supportedStrokeFillStyleAttrs = ['stroke', 'fill', 'stroke-width'];
+// Handles loading images from SVG.
 export default class SVGLoader {
     constructor(source, onFinish, storeUnknown = true) {
         this.source = source;
@@ -359,7 +360,11 @@ export default class SVGLoader {
             (_b = this.onFinish) === null || _b === void 0 ? void 0 : _b.call(this);
         });
     }
-    // @param sanitize - if `true`, don't store unknown attributes.
+    /**
+     * @see {@link Editor.loadFrom}
+     * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
+     * @param sanitize - if `true`, don't store unknown attributes.
+     */
     static fromString(text, sanitize = false) {
         var _a, _b;
         const sandbox = document.createElement('iframe');

package/dist/src/Viewport.d.ts

@@ -2,6 +2,7 @@ import Command from './commands/Command';
 import Mat33 from './math/Mat33';
 import Rect2 from './math/Rect2';
 import { Point2, Vec2 } from './math/Vec2';
+import Vec3 from './math/Vec3';
 import { StrokeDataPoint } from './types';
 import { EditorNotifier } from './types';
 type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
@@ -16,17 +17,45 @@ export declare class Viewport {
     private screenRect;
     constructor(notifier: EditorNotifier);
     updateScreenSize(screenSize: Vec2): void;
+    /** Get the screen's visible region transformed into canvas space. */
     get visibleRect(): Rect2;
+    /** @returns the given point, but in canvas coordinates */
     screenToCanvas(screenPoint: Point2): Point2;
+    /** @returns the given point transformed into screen coordinates. */
     canvasToScreen(canvasPoint: Point2): Point2;
+    /** @returns a command that transforms the canvas by `transform`. */
     static transformBy(transform: Mat33): ViewportTransform;
+    /**
+     * Updates the transformation directly. Using `transformBy` is preferred.
+     * @param newTransform - should map from canvas coordinates to screen coordinates.
+     */
     resetTransform(newTransform?: Mat33): void;
     get screenToCanvasTransform(): Mat33;
     get canvasToScreenTransform(): Mat33;
-    getResolution(): Vec2;
+    /** @returns the size of the visible region in pixels. */
+    getScreenRectSize(): Vec2;
+    /** Alias for `getScreenRectSize`. @deprecated */
+    getResolution(): Vec3;
+    /** @returns the amount a vector on the canvas is scaled to become a vector on the screen. */
     getScaleFactor(): number;
+    /**
+     * @returns `getScaleFactor()` rounded to the nearest power of 10.
+     * For example, if `getScaleFactor()` returns 101, `getScaleFactorToNearestPowerOfTen()`
+     * should return `100` because `100` is the nearest power of 10 to 101.
+     */
+    getScaleFactorToNearestPowerOfTen(): number;
+    snapToGrid(canvasPos: Point2): Vec3;
+    /** Returns the size of one screen pixel in canvas units. */
     getSizeOfPixelOnCanvas(): number;
+    /**
+     * @returns the angle of the canvas in radians.
+     * This is the angle by which the canvas is rotated relative to the screen.
+     */
     getRotationAngle(): number;
+    /**
+     * Rounds the given `point` to a multiple of 10 such that it is within `tolerance` of
+     * its original location. This is useful for preparing data for base-10 conversion.
+     */
     static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
     roundPoint(point: Point2): Point2;
     static roundScaleRatio(scaleRatio: number, roundAmount?: number): number;

package/dist/src/Viewport.js

@@ -29,22 +29,26 @@ export class Viewport {
     updateScreenSize(screenSize) {
         this.screenRect = this.screenRect.resizedTo(screenSize);
     }
-    // Get the screen's visible region transformed into canvas space.
+    /** Get the screen's visible region transformed into canvas space. */
     get visibleRect() {
         return this.screenRect.transformedBoundingBox(this.inverseTransform);
     }
-    // the given point, but in canvas coordinates
+    /** @returns the given point, but in canvas coordinates */
     screenToCanvas(screenPoint) {
         return this.inverseTransform.transformVec2(screenPoint);
     }
+    /** @returns the given point transformed into screen coordinates. */
     canvasToScreen(canvasPoint) {
         return this.transform.transformVec2(canvasPoint);
     }
+    /** @returns a command that transforms the canvas by `transform`. */
     static transformBy(transform) {
         return new Viewport.ViewportTransform(transform);
     }
-    // Updates the transformation directly. Using `transformBy` is preferred.
-    // [newTransform] should map from canvas coordinates to screen coordinates.
+    /**
+     * Updates the transformation directly. Using `transformBy` is preferred.
+     * @param newTransform - should map from canvas coordinates to screen coordinates.
+     */
     resetTransform(newTransform = Mat33.identity) {
         const oldTransform = this.transform;
         this.transform = newTransform;
@@ -61,20 +65,46 @@ export class Viewport {
     get canvasToScreenTransform() {
         return this.transform;
     }
-    getResolution() {
+    /** @returns the size of the visible region in pixels. */
+    getScreenRectSize() {
         return this.screenRect.size;
     }
-    // Returns the amount a vector on the canvas is scaled to become a vector on the screen.
+    /** Alias for `getScreenRectSize`. @deprecated */
+    getResolution() {
+        return this.getScreenRectSize();
+    }
+    /** @returns the amount a vector on the canvas is scaled to become a vector on the screen. */
     getScaleFactor() {
         // Use transformVec3 to avoid translating the vector
         return this.transform.transformVec3(Vec3.unitX).magnitude();
     }
-    // Returns the size of one screen pixel in canvas units.
+    /**
+     * @returns `getScaleFactor()` rounded to the nearest power of 10.
+     * For example, if `getScaleFactor()` returns 101, `getScaleFactorToNearestPowerOfTen()`
+     * should return `100` because `100` is the nearest power of 10 to 101.
+     */
+    getScaleFactorToNearestPowerOfTen() {
+        const scaleFactor = this.getScaleFactor();
+        return Math.pow(10, Math.round(Math.log10(scaleFactor)));
+    }
+    snapToGrid(canvasPos) {
+        const snapCoordinate = (coordinate) => {
+            const scaleFactor = this.getScaleFactorToNearestPowerOfTen();
+            const roundFactor = scaleFactor / 100;
+            const snapped = Math.round(coordinate * roundFactor) / roundFactor;
+            return snapped;
+        };
+        const snappedCanvasPos = Vec2.of(snapCoordinate(canvasPos.x), snapCoordinate(canvasPos.y));
+        return snappedCanvasPos;
+    }
+    /** Returns the size of one screen pixel in canvas units. */
     getSizeOfPixelOnCanvas() {
         return 1 / this.getScaleFactor();
     }
-    // Returns the angle of the canvas in radians.
-    // This is the angle by which the canvas is rotated relative to the screen.
+    /**
+     * @returns the angle of the canvas in radians.
+     * This is the angle by which the canvas is rotated relative to the screen.
+     */
     getRotationAngle() {
         return this.transform.transformVec3(Vec3.unitX).angle();
     }

package/dist/src/commands/invertCommand.js

@@ -1,6 +1,6 @@
 import Command from './Command';
 import SerializableCommand from './SerializableCommand';
-// Returns a command taht does the opposite of the given command --- `result.apply()` calls
+// Returns a command that does the opposite of the given command --- `result.apply()` calls
 // `command.unapply()` and `result.unapply()` calls `command.apply()`.
 const invertCommand = (command) => {
     if (command instanceof SerializableCommand) {

package/dist/src/components/AbstractComponent.d.ts

@@ -7,6 +7,9 @@ import { ImageComponentLocalization } from './localization';
 export type LoadSaveData = (string[] | Record<symbol, string | number>);
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
 export type DeserializeCallback = (data: string) => AbstractComponent;
+/**
+ * A base class for everything that can be added to an {@link EditorImage}.
+ */
 export default abstract class AbstractComponent {
     private readonly componentKind;
     protected lastChangedTime: number;
@@ -19,12 +22,24 @@ export default abstract class AbstractComponent {
     private static deserializationCallbacks;
     static registerComponent(componentKind: string, deserialize: DeserializeCallback | null): void;
     private loadSaveData;
+    /**
+     * Attach data that can be used while exporting the component (e.g. to SVG).
+     *
+     * This is intended for use by a {@link ImageLoader}.
+     */
     attachLoadSaveData(key: string, data: LoadSaveData): void;
+    /** See {@link attachLoadSaveData} */
     getLoadSaveData(): LoadSaveDataTable;
     getZIndex(): number;
+    /** @returns the bounding box of  */
     getBBox(): Rect2;
     abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
+    /** @return true if `lineSegment` intersects this component. */
     abstract intersects(lineSegment: LineSegment2): boolean;
+    /**
+     * @returns true if this component intersects `rect` -- it is entirely contained
+     *  within the rectangle or one of the rectangle's edges intersects this component.
+     */
     intersectsRect(rect: Rect2): boolean;
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
@@ -35,6 +50,10 @@ export default abstract class AbstractComponent {
     private static transformElementCommandId;
     private static UnresolvedTransformElementCommand;
     private static TransformElementCommand;
+    /**
+     * @return a description that could be read by a screen reader
+     *     (e.g. when adding/erasing the component)
+     */
     abstract description(localizationTable: ImageComponentLocalization): string;
     protected abstract createClone(): AbstractComponent;
     clone(): AbstractComponent;

package/dist/src/components/AbstractComponent.js

@@ -2,12 +2,15 @@ var _a;
 import SerializableCommand from '../commands/SerializableCommand';
 import EditorImage from '../EditorImage';
 import Mat33 from '../math/Mat33';
+/**
+ * A base class for everything that can be added to an {@link EditorImage}.
+ */
 export default class AbstractComponent {
     constructor(
     // A unique identifier for the type of component
     componentKind) {
         this.componentKind = componentKind;
-        // Get and manage data attached by a loader.
+        // Stores data attached by a loader.
         this.loadSaveData = {};
         this.lastChangedTime = (new Date()).getTime();
         this.zIndex = AbstractComponent.zIndexCounter++;
@@ -18,7 +21,7 @@ export default class AbstractComponent {
         }
     }
     // Returns a unique ID for this element.
-    // @see { @link EditorImage!default.lookupElement }
+    // @see { @link lib!EditorImage.lookupElement }
     getId() {
         return this.id;
     }
@@ -28,21 +31,32 @@ export default class AbstractComponent {
     static registerComponent(componentKind, deserialize) {
         this.deserializationCallbacks[componentKind] = deserialize !== null && deserialize !== void 0 ? deserialize : null;
     }
+    /**
+     * Attach data that can be used while exporting the component (e.g. to SVG).
+     *
+     * This is intended for use by a {@link ImageLoader}.
+     */
     attachLoadSaveData(key, data) {
         if (!this.loadSaveData[key]) {
             this.loadSaveData[key] = [];
         }
         this.loadSaveData[key].push(data);
     }
+    /** See {@link attachLoadSaveData} */
     getLoadSaveData() {
         return this.loadSaveData;
     }
     getZIndex() {
         return this.zIndex;
     }
+    /** @returns the bounding box of  */
     getBBox() {
         return this.contentBBox;
     }
+    /**
+     * @returns true if this component intersects `rect` -- it is entirely contained
+     *  within the rectangle or one of the rectangle's edges intersects this component.
+     */
     intersectsRect(rect) {
         // If this component intersects rect,
         // it is either contained entirely within rect or intersects one of rect's edges.
@@ -198,6 +212,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
                 hadParent = true;
             }
             this.component.applyTransformation(newTransfm);
+            this.component.lastChangedTime = (new Date()).getTime();
             // Add the element back to the document.
             if (hadParent) {
                 EditorImage.addElement(this.component).apply(editor);

package/dist/src/lib.d.ts

@@ -8,22 +8,25 @@
  * ```
  *
  * @see
- * {@link Editor!}
+ * {@link Editor}
  *
  * @packageDocumentation
  */
-import Editor from './Editor';
+import Editor, { EditorSettings } from './Editor';
 export { default as EditorImage } from './EditorImage';
 export * from './types';
 export { default as getLocalizationTable } from './localizations/getLocalizationTable';
 export * from './localization';
 export { default as Color4 } from './Color4';
+export { default as SVGLoader } from './SVGLoader';
+export { default as Viewport } from './Viewport';
 export * from './math/lib';
 export * from './components/lib';
 export * from './commands/lib';
 export * from './tools/lib';
 export * from './toolbar/lib';
+export * from './rendering/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
-export { Editor };
+export { Editor, EditorSettings };
 export default Editor;

package/dist/src/lib.js

@@ -8,7 +8,7 @@
  * ```
  *
  * @see
- * {@link Editor!}
+ * {@link Editor}
  *
  * @packageDocumentation
  */
@@ -18,11 +18,14 @@ export * from './types';
 export { default as getLocalizationTable } from './localizations/getLocalizationTable';
 export * from './localization';
 export { default as Color4 } from './Color4';
+export { default as SVGLoader } from './SVGLoader';
+export { default as Viewport } from './Viewport';
 export * from './math/lib';
 export * from './components/lib';
 export * from './commands/lib';
 export * from './tools/lib';
 export * from './toolbar/lib';
+export * from './rendering/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
 export { Editor };

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

@@ -102,7 +102,7 @@ export default class Mat33 {
     static translation(amount: Vec2): Mat33;
     static zRotation(radians: number, center?: Point2): Mat33;
     static scaling2D(amount: number | Vec2, center?: Point2): Mat33;
-    /** @see {@link !fromCSSMatrix} */
+    /** @see {@link fromCSSMatrix} */
     toCSSMatrix(): string;
     /**
      * Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33.

package/dist/src/math/Mat33.js

@@ -241,7 +241,7 @@ export default class Mat33 {
         // Translate such that [center] goes to (0, 0)
         return result.rightMul(Mat33.translation(center.times(-1)));
     }
-    /** @see {@link !fromCSSMatrix} */
+    /** @see {@link fromCSSMatrix} */
     toCSSMatrix() {
         return `matrix(${this.a1},${this.b1},${this.a2},${this.b2},${this.a3},${this.b3})`;
     }

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

@@ -1,3 +1,12 @@
+import AbstractRenderer from './renderers/AbstractRenderer';
+import { Editor } from '../Editor';
+import { Point2 } from '../math/Vec2';
+import RenderingCache from './caching/RenderingCache';
+import Color4 from '../Color4';
+export declare enum RenderingMode {
+    DummyRenderer = 0,
+    CanvasRenderer = 1
+}
 /**
  * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
  *
@@ -9,18 +18,7 @@
  * 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 '../math/Vec2';
-import RenderingCache from './caching/RenderingCache';
-import Color4 from '../Color4';
-export declare enum RenderingMode {
-    DummyRenderer = 0,
-    CanvasRenderer = 1
-}
 export default class Display {
     private editor;
     private parent;