js-draw 0.17.4 → 0.18.0

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

@@ -0,0 +1,106 @@
+/**
+ * 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;
+    /**
+     * If `other` is a `Vec3`, multiplies `this` component-wise by `other`. Otherwise,
+     * if `other is a `number`, returns the result of scalar multiplication.
+     *
+     * @example
+     * ```
+     * Vec3.of(1, 2, 3).scale(Vec3.of(2, 4, 6)); // → Vec3(2, 8, 18)
+     * ```
+     */
+    scale(other: Vec3 | number): 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, number, 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/mjs/src/math/lib.mjs

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

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

@@ -0,0 +1,4 @@
+export declare const cleanUpNumber: (text: string) => string;
+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/mjs/src/rendering/Display.d.ts

@@ -0,0 +1,75 @@
+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.
+ *
+ * @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);
+ * ```
+ */
+export default class Display {
+    private editor;
+    private parent;
+    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;
+}

package/dist/{src/rendering/Display.js → mjs/src/rendering/Display.mjs}

@@ -1,10 +1,10 @@
-import CanvasRenderer from './renderers/CanvasRenderer';
-import { EditorEventType } from '../types';
-import DummyRenderer from './renderers/DummyRenderer';
-import { Vec2 } from '../math/Vec2';
-import RenderingCache from './caching/RenderingCache';
-import TextOnlyRenderer from './renderers/TextOnlyRenderer';
-import Color4 from '../Color4';
+import  CanvasRenderer  from './renderers/CanvasRenderer.mjs';
+import  { EditorEventType }  from '../types.mjs';
+import  DummyRenderer  from './renderers/DummyRenderer.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  RenderingCache  from './caching/RenderingCache.mjs';
+import  TextOnlyRenderer  from './renderers/TextOnlyRenderer.mjs';
+import  Color4  from '../Color4.mjs';
 export var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";

package/dist/mjs/src/rendering/RenderingStyle.d.ts

@@ -0,0 +1,31 @@
+import Color4 from '../Color4';
+interface RenderingStyle {
+    fill: Color4;
+    stroke?: {
+        color: Color4;
+        width: number;
+    };
+}
+export default RenderingStyle;
+export declare const cloneStyle: (style: RenderingStyle) => {
+    fill: Color4;
+    stroke: {
+        color: Color4;
+        width: number;
+    } | undefined;
+};
+export declare const stylesEqual: (a: RenderingStyle, b: RenderingStyle) => boolean;
+export declare const styleToJSON: (style: RenderingStyle) => {
+    fill: string;
+    stroke: {
+        color: string;
+        width: number;
+    } | undefined;
+};
+export declare const styleFromJSON: (json: Record<string, any>) => {
+    fill: Color4;
+    stroke: {
+        color: Color4;
+        width: any;
+    } | undefined;
+};

package/dist/{src/rendering/RenderingStyle.js → mjs/src/rendering/RenderingStyle.mjs}

@@ -1,4 +1,4 @@
-import Color4 from '../Color4';
+import  Color4  from '../Color4.mjs';
 export const cloneStyle = (style) => {
     return {
         fill: style.fill,

package/dist/mjs/src/rendering/TextRenderingStyle.d.ts

@@ -0,0 +1,36 @@
+import RenderingStyle from './RenderingStyle';
+export interface TextStyle {
+    size: number;
+    fontFamily: string;
+    fontWeight?: string;
+    fontVariant?: string;
+    renderingStyle: RenderingStyle;
+}
+export default TextStyle;
+export declare const cloneTextStyle: (style: TextStyle) => {
+    renderingStyle: {
+        fill: import("../Color4").default;
+        stroke: {
+            color: import("../Color4").default;
+            width: number;
+        } | undefined;
+    };
+    size: number;
+    fontFamily: string;
+    fontWeight?: string | undefined;
+    fontVariant?: string | undefined;
+};
+export declare const textStyleFromJSON: (json: any) => TextStyle;
+export declare const textStyleToJSON: (style: TextStyle) => {
+    renderingStyle: {
+        fill: string;
+        stroke: {
+            color: string;
+            width: number;
+        } | undefined;
+    };
+    size: number;
+    fontFamily: string;
+    fontWeight?: string | undefined;
+    fontVariant?: string | undefined;
+};

package/dist/{src/rendering/TextRenderingStyle.js → mjs/src/rendering/TextRenderingStyle.mjs}

@@ -1,4 +1,4 @@
-import { cloneStyle, styleFromJSON, styleToJSON } from './RenderingStyle';
+import  { cloneStyle, styleFromJSON, styleToJSON }  from './RenderingStyle.mjs';
 export const cloneTextStyle = (style) => {
     return Object.assign(Object.assign({}, style), { renderingStyle: cloneStyle(style.renderingStyle) });
 };

package/dist/mjs/src/rendering/caching/CacheRecord.d.ts

@@ -0,0 +1,20 @@
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { BeforeDeallocCallback, CacheState } from './types';
+export default class CacheRecord {
+    private onBeforeDeallocCallback;
+    private cacheState;
+    private renderer;
+    private lastUsedCycle;
+    private allocd;
+    allocCount: number;
+    constructor(onBeforeDeallocCallback: BeforeDeallocCallback | null, cacheState: CacheState);
+    startRender(): AbstractRenderer;
+    dealloc(): void;
+    isAllocd(): boolean;
+    realloc(newDeallocCallback: BeforeDeallocCallback): void;
+    getLastUsedCycle(): number;
+    getTransform(drawTo: Rect2): Mat33;
+    setRenderingRegion(drawTo: Rect2): void;
+}

package/dist/{src/rendering/caching/CacheRecord.js → mjs/src/rendering/caching/CacheRecord.mjs}

@@ -1,4 +1,4 @@
-import Mat33 from '../../math/Mat33';
+import  Mat33  from '../../math/Mat33.mjs';
 // Represents a cached renderer/canvas
 // This is not a [CacheNode] -- it handles cached renderers and does not have sub-renderers.
 export default class CacheRecord {

package/dist/mjs/src/rendering/caching/CacheRecordManager.d.ts

@@ -0,0 +1,12 @@
+import { BeforeDeallocCallback, CacheProps, CacheState } from './types';
+import CacheRecord from './CacheRecord';
+import Rect2 from '../../math/Rect2';
+export declare class CacheRecordManager {
+    private cacheRecords;
+    private maxCanvases;
+    private cacheState;
+    constructor(cacheProps: CacheProps);
+    setSharedState(state: CacheState): void;
+    allocCanvas(drawTo: Rect2, onDealloc: BeforeDeallocCallback): CacheRecord;
+    private getLeastRecentlyUsedRecord;
+}

package/dist/{src/rendering/caching/CacheRecordManager.js → mjs/src/rendering/caching/CacheRecordManager.mjs}

@@ -1,4 +1,4 @@
-import CacheRecord from './CacheRecord';
+import  CacheRecord  from './CacheRecord.mjs';
 const debugMode = false;
 export class CacheRecordManager {
     constructor(cacheProps) {

package/dist/mjs/src/rendering/caching/RenderingCache.d.ts

@@ -0,0 +1,11 @@
+import { ImageNode } from '../../EditorImage';
+import Viewport from '../../Viewport';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { CacheProps } from './types';
+export default class RenderingCache {
+    private sharedState;
+    private recordManager;
+    private rootNode;
+    constructor(cacheProps: CacheProps);
+    render(screenRenderer: AbstractRenderer, image: ImageNode, viewport: Viewport): void;
+}

package/dist/{src/rendering/caching/RenderingCache.js → mjs/src/rendering/caching/RenderingCache.mjs}

@@ -1,6 +1,6 @@
-import Rect2 from '../../math/Rect2';
-import RenderingCacheNode from './RenderingCacheNode';
-import { CacheRecordManager } from './CacheRecordManager';
+import  Rect2  from '../../math/Rect2.mjs';
+import  RenderingCacheNode  from './RenderingCacheNode.mjs';
+import  { CacheRecordManager }  from './CacheRecordManager.mjs';
 export default class RenderingCache {
     constructor(cacheProps) {
         this.recordManager = new CacheRecordManager(cacheProps);

package/dist/mjs/src/rendering/caching/RenderingCacheNode.d.ts

@@ -0,0 +1,29 @@
+import { ImageNode } from '../../EditorImage';
+import Rect2 from '../../math/Rect2';
+import Viewport from '../../Viewport';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { CacheState } from './types';
+export default class RenderingCacheNode {
+    readonly region: Rect2;
+    private readonly cacheState;
+    private instantiatedChildren;
+    private parent;
+    private cachedRenderer;
+    private renderedIds;
+    private renderedMaxZIndex;
+    constructor(region: Rect2, cacheState: CacheState);
+    generateParent(): RenderingCacheNode;
+    private generateChildren;
+    private getChildren;
+    smallestChildContaining(rect: Rect2): RenderingCacheNode | null;
+    private renderingWouldBeHighEnoughResolution;
+    private allChildrenCanRender;
+    private computeSortedByLeafIds;
+    private idsOfIntersecting;
+    private allRenderedIdsIn;
+    private renderingIsUpToDate;
+    renderItems(screenRenderer: AbstractRenderer, items: ImageNode[], viewport: Viewport): void;
+    private isEmpty;
+    private onRegionDealloc;
+    private checkRep;
+}

package/dist/{src/rendering/caching/RenderingCacheNode.js → mjs/src/rendering/caching/RenderingCacheNode.mjs}

@@ -1,7 +1,7 @@
 // A cache record with sub-nodes.
-import Color4 from '../../Color4';
-import { sortLeavesByZIndex } from '../../EditorImage';
-import Rect2 from '../../math/Rect2';
+import  Color4  from '../../Color4.mjs';
+import  { sortLeavesByZIndex }  from '../../EditorImage.mjs';
+import  Rect2  from '../../math/Rect2.mjs';
 // 3x3 divisions for each node.
 const cacheDivisionSize = 3;
 // True: Show rendering updates.

package/dist/mjs/src/rendering/caching/testUtils.d.ts

@@ -0,0 +1,9 @@
+import DummyRenderer from '../renderers/DummyRenderer';
+import RenderingCache from './RenderingCache';
+import { CacheProps } from './types';
+type RenderAllocCallback = (renderer: DummyRenderer) => void;
+export declare const createCache: (onRenderAlloc?: RenderAllocCallback, cacheOptions?: Partial<CacheProps>) => {
+    cache: RenderingCache;
+    editor: import("../../Editor").Editor;
+};
+export {};

package/dist/{src/rendering/caching/testUtils.js → mjs/src/rendering/caching/testUtils.mjs}

@@ -1,7 +1,7 @@
-import { Vec2 } from '../../math/Vec2';
-import DummyRenderer from '../renderers/DummyRenderer';
-import createEditor from '../../testing/createEditor';
-import RenderingCache from './RenderingCache';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  DummyRenderer  from '../renderers/DummyRenderer.mjs';
+import  createEditor  from '../../testing/createEditor.mjs';
+import  RenderingCache  from './RenderingCache.mjs';
 // Override any default test options with [cacheOptions]
 export const createCache = (onRenderAlloc, cacheOptions) => {
     const editor = createEditor();

package/dist/mjs/src/rendering/caching/types.d.ts

@@ -0,0 +1,19 @@
+import { Vec2 } from '../../math/Vec2';
+import AbstractRenderer from '../renderers/AbstractRenderer';
+import { CacheRecordManager } from './CacheRecordManager';
+export type CacheAddress = number;
+export type BeforeDeallocCallback = () => void;
+export interface CacheProps {
+    createRenderer(): AbstractRenderer;
+    isOfCorrectType(renderer: AbstractRenderer): boolean;
+    blockResolution: Vec2;
+    cacheSize: number;
+    maxScale: number;
+    minProportionalRenderTimePerCache: number;
+    minProportionalRenderTimeToUseCache: number;
+}
+export interface CacheState {
+    currentRenderingCycle: number;
+    props: CacheProps;
+    recordManager: CacheRecordManager;
+}

package/dist/mjs/src/rendering/caching/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/mjs/src/rendering/lib.mjs

@@ -0,0 +1,5 @@
+export  { default as AbstractRenderer }  from './renderers/AbstractRenderer.mjs';
+export  { default as DummyRenderer }  from './renderers/DummyRenderer.mjs';
+export  { default as SVGRenderer }  from './renderers/SVGRenderer.mjs';
+export  { default as CanvasRenderer }  from './renderers/CanvasRenderer.mjs';
+export  { default as Display }  from './Display.mjs';

package/dist/mjs/src/rendering/localization.d.ts

@@ -0,0 +1,10 @@
+export interface TextRendererLocalization {
+    pathNodeCount(pathCount: number): string;
+    textNodeCount(nodeCount: number): string;
+    imageNodeCount(nodeCount: number): string;
+    textNode(content: string): string;
+    unlabeledImageNode: string;
+    imageNode(label: string): string;
+    rerenderAsText: string;
+}
+export declare const defaultTextRendererLocalization: TextRendererLocalization;

package/dist/mjs/src/rendering/renderers/AbstractRenderer.d.ts

@@ -0,0 +1,68 @@
+import Color4 from '../../Color4';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import Mat33 from '../../math/Mat33';
+import Path, { PathCommand } from '../../math/Path';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Viewport from '../../Viewport';
+import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
+export interface RenderablePathSpec {
+    startPoint: Point2;
+    commands: PathCommand[];
+    style: RenderingStyle;
+    path?: Path;
+}
+export interface RenderableImage {
+    transform: Mat33;
+    image: HTMLImageElement | HTMLCanvasElement;
+    base64Url: string;
+    label?: string;
+}
+export default abstract class AbstractRenderer {
+    private viewport;
+    private selfTransform;
+    private transformStack;
+    protected constructor(viewport: Viewport);
+    protected getViewport(): Viewport;
+    abstract displaySize(): Vec2;
+    abstract clear(): void;
+    protected abstract beginPath(startPoint: Point2): void;
+    protected abstract endPath(style: RenderingStyle): void;
+    protected abstract lineTo(point: Point2): void;
+    protected abstract moveTo(point: Point2): void;
+    protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
+    protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
+    abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
+    abstract drawImage(image: RenderableImage): void;
+    abstract isTooSmallToRender(rect: Rect2): boolean;
+    setDraftMode(_draftMode: boolean): void;
+    protected objectLevel: number;
+    private currentPaths;
+    private flushPath;
+    drawPath(path: RenderablePathSpec): void;
+    drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
+    fillRect(rect: Rect2, fill: Color4): void;
+    startObject(_boundingBox: Rect2, _clip?: boolean): void;
+    /**
+     * Notes the end of an object.
+     * @param _loaderData - a map from strings to JSON-ifyable objects
+     * and contains properties attached to the object by whatever loader loaded the image. This
+     * is used to preserve attributes not supported by js-draw when loading/saving an image.
+     * Renderers may ignore this.
+     *
+     * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
+     * Renderers may ignore this.
+     */
+    endObject(_loaderData?: LoadSaveDataTable, _objectTags?: string[]): void;
+    protected getNestingLevel(): number;
+    abstract drawPoints(...points: Point2[]): void;
+    canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;
+    renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer): void;
+    setTransform(transform: Mat33 | null): void;
+    pushTransform(transform: Mat33): void;
+    popTransform(): void;
+    getCanvasToScreenTransform(): Mat33;
+    canvasToScreen(vec: Vec2): Vec2;
+    getSizeOfCanvasPixelOnScreen(): number;
+}

package/dist/{src/rendering/renderers/AbstractRenderer.js → mjs/src/rendering/renderers/AbstractRenderer.mjs}

@@ -1,6 +1,6 @@
-import Path, { PathCommandType } from '../../math/Path';
-import { Vec2 } from '../../math/Vec2';
-import { stylesEqual } from '../RenderingStyle';
+import  Path, { PathCommandType }  from '../../math/Path.mjs';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  { stylesEqual }  from '../RenderingStyle.mjs';
 export default class AbstractRenderer {
     constructor(viewport) {
         this.viewport = viewport;

package/dist/mjs/src/rendering/renderers/CanvasRenderer.d.ts

@@ -0,0 +1,63 @@
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
+import Viewport from '../../Viewport';
+import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
+/**
+ * Renders onto a `CanvasRenderingContext2D`.
+ *
+ * @example
+ * ```ts
+ * const editor = new Editor(document.body);
+ *
+ * const canvas = document.createElement('canvas');
+ * const ctx = canvas.getContext('2d');
+ *
+ * // Ensure that the canvas can fit the entire rendering
+ * const viewport = editor.image.getImportExportViewport();
+ * canvas.width = viewport.getScreenRectSize().x;
+ * canvas.height = viewport.getScreenRectSize().y;
+ *
+ * // Render editor.image onto the renderer
+ * const renderer = new CanvasRenderer(ctx, viewport);
+ * editor.image.render(renderer, viewport);
+ * ```
+ */
+export default class CanvasRenderer extends AbstractRenderer {
+    private ctx;
+    private ignoreObjectsAboveLevel;
+    private ignoringObject;
+    private currentObjectBBox;
+    private minSquareCurveApproxDist;
+    private minRenderSizeAnyDimen;
+    private minRenderSizeBothDimens;
+    /**
+     * Creates a new `CanvasRenderer` that renders to the given rendering context.
+     * The `viewport` is used to determine the translation/rotation/scaling of the content
+     * to draw.
+     */
+    constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
+    private transformBy;
+    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
+    renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void;
+    setDraftMode(draftMode: boolean): void;
+    displaySize(): Vec2;
+    clear(): void;
+    protected beginPath(startPoint: Point2): void;
+    protected endPath(style: RenderingStyle): void;
+    protected lineTo(point: Point2): void;
+    protected moveTo(point: Point2): void;
+    protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
+    protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
+    drawPath(path: RenderablePathSpec): void;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
+    private clipLevels;
+    startObject(boundingBox: Rect2, clip?: boolean): void;
+    endObject(): void;
+    drawPoints(...points: Point2[]): void;
+    isTooSmallToRender(rect: Rect2): boolean;
+}

package/dist/{src/rendering/renderers/CanvasRenderer.js → mjs/src/rendering/renderers/CanvasRenderer.mjs}

@@ -1,8 +1,8 @@
-import Color4 from '../../Color4';
-import TextComponent from '../../components/TextComponent';
-import Path from '../../math/Path';
-import { Vec2 } from '../../math/Vec2';
-import AbstractRenderer from './AbstractRenderer';
+import  Color4  from '../../Color4.mjs';
+import  TextComponent  from '../../components/TextComponent.mjs';
+import  Path  from '../../math/Path.mjs';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  AbstractRenderer  from './AbstractRenderer.mjs';
 /**
  * Renders onto a `CanvasRenderingContext2D`.
  *