js-draw 0.15.0 → 0.15.2

package/dist/src/components/ImageBackground.js

@@ -0,0 +1,132 @@
+import Color4 from '../Color4';
+import { EditorImageEventType } from '../EditorImage';
+import Rect2 from '../math/Rect2';
+import AbstractComponent from './AbstractComponent';
+import { createRestyleComponentCommand } from './RestylableComponent';
+export var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["None"] = 1] = "None";
+})(BackgroundType || (BackgroundType = {}));
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+// Represents the background of an image in the editor.
+export default class ImageBackground extends AbstractComponent {
+    constructor(backgroundType, mainColor) {
+        super('image-background', 0);
+        this.backgroundType = backgroundType;
+        this.mainColor = mainColor;
+        this.viewportSizeChangeListener = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
+        this.contentBBox = Rect2.empty;
+    }
+    getStyle() {
+        let color = this.mainColor;
+        if (this.backgroundType === BackgroundType.None) {
+            color = undefined;
+        }
+        return {
+            color,
+        };
+    }
+    updateStyle(style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    }
+    // @internal
+    forceStyle(style, _editor) {
+        const fill = style.color;
+        if (!fill) {
+            return;
+        }
+        this.mainColor = fill;
+        if (fill.eq(Color4.transparent)) {
+            this.backgroundType = BackgroundType.None;
+        }
+        else {
+            this.backgroundType = BackgroundType.SolidColor;
+        }
+    }
+    onAddToImage(image) {
+        if (this.viewportSizeChangeListener) {
+            console.warn('onAddToImage called when background is already in an image');
+            this.onRemoveFromImage();
+        }
+        this.viewportSizeChangeListener = image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
+            this.recomputeBBox(image);
+        });
+        this.recomputeBBox(image);
+    }
+    onRemoveFromImage() {
+        var _a;
+        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
+        this.viewportSizeChangeListener = null;
+    }
+    recomputeBBox(image) {
+        const importExportRect = image.getImportExportViewport().visibleRect;
+        if (!this.contentBBox.eq(importExportRect)) {
+            this.contentBBox = importExportRect;
+            // Re-render this if already added to the EditorImage.
+            image.queueRerenderOf(this);
+        }
+    }
+    render(canvas, visibleRect) {
+        if (this.backgroundType === BackgroundType.None) {
+            return;
+        }
+        canvas.startObject(this.contentBBox);
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            // If the rectangle for this region contains the visible rect,
+            // we can fill the entire visible rectangle (which may be more efficient than
+            // filling the entire region for this.)
+            if (visibleRect) {
+                const intersection = visibleRect.intersection(this.contentBBox);
+                if (intersection) {
+                    canvas.fillRect(intersection, this.mainColor);
+                }
+            }
+            else {
+                canvas.fillRect(this.contentBBox, this.mainColor);
+            }
+        }
+        canvas.endObject(this.getLoadSaveData(), [imageBackgroundCSSClassName]);
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+    }
+    isSelectable() {
+        return false;
+    }
+    serializeToJSON() {
+        return {
+            mainColor: this.mainColor.toHexString(),
+            backgroundType: this.backgroundType,
+        };
+    }
+    applyTransformation(_affineTransfm) {
+        // Do nothing — it doesn't make sense to transform the background.
+    }
+    description(localizationTable) {
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+        }
+        else {
+            return localizationTable.emptyBackground;
+        }
+    }
+    createClone() {
+        return new ImageBackground(this.backgroundType, this.mainColor);
+    }
+    // @internal
+    static deserializeFromJSON(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json.mainColor !== 'string') {
+            throw new Error('Error deserializing — mainColor must be of type string.');
+        }
+        const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
+        const mainColor = Color4.fromHex(json.mainColor);
+        return new ImageBackground(backgroundType, mainColor);
+    }
+}
+AbstractComponent.registerComponent('image-background', ImageBackground.deserializeFromJSON);

package/dist/src/components/ImageComponent.js

@@ -80,7 +80,9 @@ export default class ImageComponent extends AbstractComponent {
         });
     }
     render(canvas, _visibleRect) {
+        canvas.startObject(this.contentBBox);
         canvas.drawImage(this.image);
+        canvas.endObject(this.getLoadSaveData());
     }
     getProportionalRenderingTime() {
         // Estimate: Equivalent to a stroke with 10 segments.

package/dist/src/components/builders/ArrowBuilder.d.ts

@@ -1,13 +1,15 @@
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 export declare const makeArrowBuilder: ComponentBuilderFactory;
 export default class ArrowBuilder implements ComponentBuilder {
     private readonly startPoint;
+    private readonly viewport;
     private endPoint;
-    constructor(startPoint: StrokeDataPoint);
+    constructor(startPoint: StrokeDataPoint, viewport: Viewport);
     private getLineWidth;
     getBBox(): Rect2;
     private buildPreview;

package/dist/src/components/builders/ArrowBuilder.js

@@ -1,11 +1,12 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Stroke from '../Stroke';
-export const makeArrowBuilder = (initialPoint, _viewport) => {
-    return new ArrowBuilder(initialPoint);
+export const makeArrowBuilder = (initialPoint, viewport) => {
+    return new ArrowBuilder(initialPoint, viewport);
 };
 export default class ArrowBuilder {
-    constructor(startPoint) {
+    constructor(startPoint, viewport) {
         this.startPoint = startPoint;
+        this.viewport = viewport;
         this.endPoint = startPoint;
     }
     getLineWidth() {
@@ -16,10 +17,10 @@ export default class ArrowBuilder {
         return preview.getBBox();
     }
     buildPreview() {
-        const startPoint = this.startPoint.pos;
+        const lineStartPoint = this.startPoint.pos;
         const endPoint = this.endPoint.pos;
-        const toEnd = endPoint.minus(startPoint).normalized();
-        const arrowLength = endPoint.minus(startPoint).length();
+        const toEnd = endPoint.minus(lineStartPoint).normalized();
+        const arrowLength = endPoint.minus(lineStartPoint).length();
         // Ensure that the arrow tip is smaller than the arrow.
         const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
         const startSize = this.startPoint.width / 2;
@@ -29,41 +30,43 @@ export default class ArrowBuilder {
         const lineNormal = toEnd.orthog();
         const scaledStartNormal = lineNormal.times(startSize);
         const scaledBaseNormal = lineNormal.times(endSize);
+        const path = new Path(arrowTipBase.minus(scaledBaseNormal), [
+            // Stem
+            {
+                kind: PathCommandType.LineTo,
+                point: lineStartPoint.minus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: lineStartPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.plus(scaledBaseNormal),
+            },
+            // Head
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal)),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: endPoint.plus(toEnd.times(endSize)),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: arrowTipBase.minus(scaledBaseNormal),
+            },
+            // Round all points in the arrow (to remove unnecessary decimal places)
+        ]).mapPoints(point => this.viewport.roundPoint(point));
         const preview = new Stroke([
             {
-                startPoint: arrowTipBase.minus(scaledBaseNormal),
-                commands: [
-                    // Stem
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: startPoint.minus(scaledStartNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: startPoint.plus(scaledStartNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: arrowTipBase.plus(scaledBaseNormal),
-                    },
-                    // Head
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal))
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: endPoint.plus(toEnd.times(endSize)),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: arrowTipBase.minus(scaledBaseNormal),
-                    },
-                ],
+                startPoint: path.startPoint,
+                commands: path.parts,
                 style: {
                     fill: this.startPoint.color,
                 }

package/dist/src/components/builders/LineBuilder.d.ts

@@ -1,13 +1,15 @@
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 export declare const makeLineBuilder: ComponentBuilderFactory;
 export default class LineBuilder implements ComponentBuilder {
     private readonly startPoint;
+    private readonly viewport;
     private endPoint;
-    constructor(startPoint: StrokeDataPoint);
+    constructor(startPoint: StrokeDataPoint, viewport: Viewport);
     getBBox(): Rect2;
     private buildPreview;
     build(): AbstractComponent;

package/dist/src/components/builders/LineBuilder.js

@@ -1,11 +1,12 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Stroke from '../Stroke';
-export const makeLineBuilder = (initialPoint, _viewport) => {
-    return new LineBuilder(initialPoint);
+export const makeLineBuilder = (initialPoint, viewport) => {
+    return new LineBuilder(initialPoint, viewport);
 };
 export default class LineBuilder {
-    constructor(startPoint) {
+    constructor(startPoint, viewport) {
         this.startPoint = startPoint;
+        this.viewport = viewport;
         this.endPoint = startPoint;
     }
     getBBox() {
@@ -21,31 +22,27 @@ export default class LineBuilder {
         const lineNormal = toEnd.orthog();
         const scaledStartNormal = lineNormal.times(startSize);
         const scaledEndNormal = lineNormal.times(endSize);
-        const preview = new Stroke([
+        const strokeStartPoint = startPoint.minus(scaledStartNormal);
+        const path = new Path(strokeStartPoint, [
+            {
+                kind: PathCommandType.LineTo,
+                point: startPoint.plus(scaledStartNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: endPoint.plus(scaledEndNormal),
+            },
             {
-                startPoint: startPoint.minus(scaledStartNormal),
-                commands: [
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: startPoint.plus(scaledStartNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: endPoint.plus(scaledEndNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: endPoint.minus(scaledEndNormal),
-                    },
-                    {
-                        kind: PathCommandType.LineTo,
-                        point: startPoint.minus(scaledStartNormal),
-                    },
-                ],
-                style: {
-                    fill: this.startPoint.color,
-                }
-            }
+                kind: PathCommandType.LineTo,
+                point: endPoint.minus(scaledEndNormal),
+            },
+            {
+                kind: PathCommandType.LineTo,
+                point: startPoint.minus(scaledStartNormal),
+            },
+        ]).mapPoints(point => this.viewport.roundPoint(point));
+        const preview = new Stroke([
+            path.toRenderable({ fill: this.startPoint.color })
         ]);
         return preview;
     }

package/dist/src/components/builders/RectangleBuilder.js

@@ -30,7 +30,7 @@ export default class RectangleBuilder {
         const rect = Rect2.fromCorners(startPoint, endPoint);
         const path = Path.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
         // Rotate the canvas rectangle so that its rotation matches the screen
-        rotationMat);
+        rotationMat).mapPoints(point => this.viewport.roundPoint(point));
         const preview = new Stroke([
             path.toRenderable({
                 fill: this.endPoint.color

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

@@ -8,4 +8,5 @@ import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageComponent, };
+import ImageBackground from './ImageBackground';
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };

package/dist/src/components/lib.js

@@ -8,4 +8,5 @@ import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import { createRestyleComponentCommand } from './RestylableComponent';
-export { Stroke, TextComponent as Text, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageComponent, };
+import ImageBackground from './ImageBackground';
+export { Stroke, TextComponent as Text, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };

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

@@ -4,6 +4,8 @@ export interface ImageComponentLocalization {
     imageNode: (description: string) => string;
     stroke: string;
     svgObject: string;
+    emptyBackground: string;
+    filledBackgroundWithColor: (color: string) => string;
     restyledElements: string;
 }
 export declare const defaultComponentLocalization: ImageComponentLocalization;

package/dist/src/components/localization.js

@@ -3,6 +3,8 @@ export const defaultComponentLocalization = {
     stroke: 'Stroke',
     svgObject: 'SVG Object',
     restyledElements: 'Restyled elements',
+    emptyBackground: 'Empty background',
+    filledBackgroundWithColor: (color) => `Filled background (${color})`,
     text: (text) => `Text object: ${text}`,
     imageNode: (description) => `Image: ${description}`,
 };

package/dist/src/math/Mat33.js

@@ -170,11 +170,46 @@ export default class Mat33 {
         return true;
     }
     toString() {
-        return `
-⎡ ${this.a1},\t ${this.a2},\t ${this.a3}\t ⎤
-⎢ ${this.b1},\t ${this.b2},\t ${this.b3}\t ⎥
-⎣ ${this.c1},\t ${this.c2},\t ${this.c3}\t ⎦
-		`.trimEnd().trimStart();
+        let result = '';
+        const maxColumnLens = [0, 0, 0];
+        // Determine the longest item in each column so we can pad the others to that
+        // length.
+        for (const row of this.rows) {
+            for (let i = 0; i < 3; i++) {
+                maxColumnLens[i] = Math.max(maxColumnLens[0], `${row.at(i)}`.length);
+            }
+        }
+        for (let i = 0; i < 3; i++) {
+            if (i === 0) {
+                result += '⎡ ';
+            }
+            else if (i === 1) {
+                result += '⎢ ';
+            }
+            else {
+                result += '⎣ ';
+            }
+            // Add each component of the ith row (after padding it)
+            for (let j = 0; j < 3; j++) {
+                const val = this.rows[i].at(j).toString();
+                let padding = '';
+                for (let i = val.length; i < maxColumnLens[j]; i++) {
+                    padding += ' ';
+                }
+                result += val + ', ' + padding;
+            }
+            if (i === 0) {
+                result += ' ⎤';
+            }
+            else if (i === 1) {
+                result += ' ⎥';
+            }
+            else {
+                result += ' ⎦';
+            }
+            result += '\n';
+        }
+        return result.trimEnd();
     }
     /**
      * ```
@@ -219,6 +254,9 @@ export default class Mat33 {
         return new Mat33(1, 0, amount.x, 0, 1, amount.y, 0, 0, 1);
     }
     static zRotation(radians, center = Vec2.zero) {
+        if (radians === 0) {
+            return Mat33.identity;
+        }
         const cos = Math.cos(radians);
         const sin = Math.sin(radians);
         // Translate everything so that rotation is about the origin

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

@@ -47,6 +47,7 @@ export default class Path {
     polylineApproximation(): LineSegment2[];
     static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2;
     intersection(line: LineSegment2): IntersectionResult[];
+    private static mapPathCommand;
     mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;
     union(other: Path | null): Path;
@@ -56,6 +57,10 @@ export default class Path {
     static fromRect(rect: Rect2, lineWidth?: number | null): Path;
     static fromRenderable(renderable: RenderablePathSpec): Path;
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
+    /**
+     * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+     */
+    static visualEquivalent(renderablePath: RenderablePathSpec, visibleRect: Rect2): RenderablePathSpec;
     private cachedStringVersion;
     toString(useNonAbsCommands?: boolean): string;
     serialize(): string;

package/dist/src/math/Path.js

@@ -1,6 +1,7 @@
 import { Bezier } from 'bezier-js';
 import { toRoundedString, toStringOfSamePrecision } from './rounding';
 import LineSegment2 from './LineSegment2';
+import Mat33 from './Mat33';
 import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
 export var PathCommandType;
@@ -143,38 +144,39 @@ export default class Path {
         }
         return result;
     }
+    static mapPathCommand(part, mapping) {
+        switch (part.kind) {
+            case PathCommandType.MoveTo:
+            case PathCommandType.LineTo:
+                return {
+                    kind: part.kind,
+                    point: mapping(part.point),
+                };
+                break;
+            case PathCommandType.CubicBezierTo:
+                return {
+                    kind: part.kind,
+                    controlPoint1: mapping(part.controlPoint1),
+                    controlPoint2: mapping(part.controlPoint2),
+                    endPoint: mapping(part.endPoint),
+                };
+                break;
+            case PathCommandType.QuadraticBezierTo:
+                return {
+                    kind: part.kind,
+                    controlPoint: mapping(part.controlPoint),
+                    endPoint: mapping(part.endPoint),
+                };
+                break;
+        }
+        const exhaustivenessCheck = part;
+        return exhaustivenessCheck;
+    }
     mapPoints(mapping) {
         const startPoint = mapping(this.startPoint);
         const newParts = [];
-        let exhaustivenessCheck;
         for (const part of this.parts) {
-            switch (part.kind) {
-                case PathCommandType.MoveTo:
-                case PathCommandType.LineTo:
-                    newParts.push({
-                        kind: part.kind,
-                        point: mapping(part.point),
-                    });
-                    break;
-                case PathCommandType.CubicBezierTo:
-                    newParts.push({
-                        kind: part.kind,
-                        controlPoint1: mapping(part.controlPoint1),
-                        controlPoint2: mapping(part.controlPoint2),
-                        endPoint: mapping(part.endPoint),
-                    });
-                    break;
-                case PathCommandType.QuadraticBezierTo:
-                    newParts.push({
-                        kind: part.kind,
-                        controlPoint: mapping(part.controlPoint),
-                        endPoint: mapping(part.endPoint),
-                    });
-                    break;
-                default:
-                    exhaustivenessCheck = part;
-                    return exhaustivenessCheck;
-            }
+            newParts.push(Path.mapPathCommand(part, mapping));
         }
         return new Path(startPoint, newParts);
     }
@@ -329,6 +331,56 @@ export default class Path {
             path: this,
         };
     }
+    /**
+     * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+     */
+    static visualEquivalent(renderablePath, visibleRect) {
+        var _a, _b;
+        const path = Path.fromRenderable(renderablePath);
+        const strokeWidth = (_b = (_a = renderablePath.style.stroke) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0;
+        const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+        // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
+        const expandedRect = visibleRect.grownBy(strokeWidth)
+            .transformedBoundingBox(Mat33.scaling2D(2, visibleRect.center));
+        // TODO: Handle simplifying very small paths.
+        if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+            return renderablePath;
+        }
+        const parts = [];
+        let startPoint = path.startPoint;
+        for (const part of path.parts) {
+            const partBBox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+            let endPoint;
+            if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+                endPoint = part.point;
+            }
+            else {
+                endPoint = part.endPoint;
+            }
+            const intersectsVisible = partBBox.intersects(visibleRect);
+            if (intersectsVisible) {
+                // TODO: Can we trim parts of paths that intersect the visible rectangle?
+                parts.push(part);
+            }
+            else if (onlyStroked || part.kind === PathCommandType.MoveTo) {
+                // We're stroking (not filling) and the path doesn't intersect the bounding box.
+                // Don't draw it, but preserve the endpoints.
+                parts.push({
+                    kind: PathCommandType.MoveTo,
+                    point: endPoint,
+                });
+            }
+            else {
+                // Otherwise, we may be filling. Try to roughly preserve the filled region.
+                parts.push({
+                    kind: PathCommandType.LineTo,
+                    point: endPoint,
+                });
+            }
+            startPoint = endPoint;
+        }
+        return new Path(path.startPoint, parts).toRenderable(renderablePath.style);
+    }
     toString(useNonAbsCommands) {
         if (this.cachedStringVersion) {
             return this.cachedStringVersion;

package/dist/src/math/Vec3.js

@@ -65,7 +65,7 @@ export default class Vec3 {
         return Vec3.of(this.x + v.x, this.y + v.y, this.z + v.z);
     }
     minus(v) {
-        return this.plus(v.times(-1));
+        return Vec3.of(this.x - v.x, this.y - v.y, this.z - v.z);
     }
     dot(other) {
         return this.x * other.x + this.y * other.y + this.z * other.z;

package/dist/src/rendering/Display.js

@@ -70,7 +70,7 @@ export default class Display {
             },
             blockResolution: cacheBlockResolution,
             cacheSize: 600 * 600 * 4 * 90,
-            maxScale: 1.4,
+            maxScale: 1.3,
             // Require about 20 strokes with 4 parts each to cache an image in one of the
             // parts of the cache grid.
             minProportionalRenderTimePerCache: 20 * 4,

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

@@ -1,3 +1,4 @@
+import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand } from '../../math/Path';
@@ -41,8 +42,19 @@ export default abstract class AbstractRenderer {
     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;
-    endObject(_loaderData?: LoadSaveDataTable): 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;