js-draw 0.0.9 → 0.1.1

package/dist/src/Editor.d.ts

@@ -6,8 +6,8 @@ import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
 import { Point2 } from './geometry/Vec2';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import { RenderablePathSpec } from './rendering/AbstractRenderer';
-import Display, { RenderingMode } from './Display';
+import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import Display, { RenderingMode } from './rendering/Display';
 import Pointer from './Pointer';
 import Rect2 from './geometry/Rect2';
 import { EditorLocalization } from './localization';

package/dist/src/Editor.js

@@ -16,8 +16,8 @@ import EventDispatcher from './EventDispatcher';
 import { Vec2 } from './geometry/Vec2';
 import Vec3 from './geometry/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import Display, { RenderingMode } from './Display';
-import SVGRenderer from './rendering/SVGRenderer';
+import Display, { RenderingMode } from './rendering/Display';
+import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
@@ -234,6 +234,7 @@ export class Editor {
     // has been applied.
     asyncApplyOrUnapplyCommands(commands, apply, updateChunkSize) {
         return __awaiter(this, void 0, void 0, function* () {
+            this.display.setDraftMode(true);
             for (let i = 0; i < commands.length; i += updateChunkSize) {
                 this.showLoadingWarning(i / commands.length);
                 for (let j = i; j < commands.length && j < i + updateChunkSize; j++) {
@@ -253,6 +254,7 @@ export class Editor {
                     });
                 }
             }
+            this.display.setDraftMode(false);
             this.hideLoadingWarning();
         });
     }
@@ -280,7 +282,8 @@ export class Editor {
             const exportRectStrokeWidth = 12;
             renderer.drawRect(this.importExportViewport.visibleRect, exportRectStrokeWidth, exportRectFill);
         }
-        this.image.render(renderer, this.viewport);
+        //this.image.render(renderer, this.viewport);
+        this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
         this.rerenderQueued = false;
     }
     drawWetInk(...path) {
@@ -342,20 +345,25 @@ export class Editor {
     loadFrom(loader) {
         return __awaiter(this, void 0, void 0, function* () {
             this.showLoadingWarning(0);
-            const imageRect = yield loader.start((component) => {
+            this.display.setDraftMode(true);
+            yield loader.start((component) => {
                 (new EditorImage.AddElementCommand(component)).apply(this);
             }, (countProcessed, totalToProcess) => {
-                if (countProcessed % 100 === 0) {
+                if (countProcessed % 500 === 0) {
                     this.showLoadingWarning(countProcessed / totalToProcess);
-                    this.rerender(false);
+                    this.rerender();
                     return new Promise(resolve => {
                         requestAnimationFrame(() => resolve());
                     });
                 }
                 return null;
+            }, (importExportRect) => {
+                this.setImportExportRect(importExportRect).apply(this);
+                this.viewport.zoomTo(importExportRect).apply(this);
             });
             this.hideLoadingWarning();
-            this.setImportExportRect(imageRect).apply(this);
+            this.display.setDraftMode(false);
+            this.queueRerender();
         });
     }
     // Returns the size of the visible region of the output SVG

package/dist/src/EditorImage.d.ts

@@ -1,16 +1,18 @@
 import Editor from './Editor';
-import AbstractRenderer from './rendering/AbstractRenderer';
+import AbstractRenderer from './rendering/renderers/AbstractRenderer';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
 import { EditorLocalization } from './localization';
+import RenderingCache from './rendering/caching/RenderingCache';
+export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
 export default class EditorImage {
     private root;
     constructor();
     private addElement;
     findParent(elem: AbstractComponent): ImageNode | null;
-    private sortLeaves;
-    render(renderer: AbstractRenderer, viewport: Viewport, minFraction?: number): void;
+    renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport): void;
+    render(renderer: AbstractRenderer, viewport: Viewport): void;
     renderAll(renderer: AbstractRenderer): void;
     getElementsIntersectingRegion(region: Rect2): AbstractComponent[];
     static AddElementCommand: {
@@ -24,23 +26,29 @@ export default class EditorImage {
     };
 }
 export declare type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
+declare type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 export declare class ImageNode {
     private parent;
     private content;
     private bbox;
     private children;
     private targetChildCount;
-    private minZIndex;
-    private maxZIndex;
+    private id;
+    private static idCounter;
     constructor(parent?: ImageNode | null);
+    getId(): number;
+    onContentChange(): void;
     getContent(): AbstractComponent | null;
     getParent(): ImageNode | null;
-    private getChildrenInRegion;
-    getLeavesInRegion(region: Rect2, minFractionOfRegion?: number): ImageNode[];
+    private getChildrenIntersectingRegion;
+    getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
+    getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
     getLeaves(): ImageNode[];
     addLeaf(leaf: AbstractComponent): ImageNode;
     getBBox(): Rect2;
     recomputeBBox(bubbleUp: boolean): void;
     private rebalance;
     remove(): void;
+    render(renderer: AbstractRenderer, visibleRect: Rect2): void;
 }
+export {};

package/dist/src/EditorImage.js

@@ -11,6 +11,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _element, _applyByFlattening, _a;
 import Rect2 from './geometry/Rect2';
+export const sortLeavesByZIndex = (leaves) => {
+    leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
+};
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
     constructor() {
@@ -21,7 +24,7 @@ export default class EditorImage {
     }
     // Returns the parent of the given element, if it exists.
     findParent(elem) {
-        const candidates = this.root.getLeavesInRegion(elem.getBBox());
+        const candidates = this.root.getLeavesIntersectingRegion(elem.getBBox());
         for (const candidate of candidates) {
             if (candidate.getContent() === elem) {
                 return candidate;
@@ -29,29 +32,23 @@ export default class EditorImage {
         }
         return null;
     }
-    sortLeaves(leaves) {
-        leaves.sort((a, b) => a.getContent().zIndex - b.getContent().zIndex);
+    renderWithCache(screenRenderer, cache, viewport) {
+        cache.render(screenRenderer, this.root, viewport);
     }
-    render(renderer, viewport, minFraction = 0.001) {
-        // Don't render components that are < 0.1% of the viewport.
-        const leaves = this.root.getLeavesInRegion(viewport.visibleRect, minFraction);
-        this.sortLeaves(leaves);
-        for (const leaf of leaves) {
-            // Leaves by definition have content
-            leaf.getContent().render(renderer, viewport.visibleRect);
-        }
+    render(renderer, viewport) {
+        this.root.render(renderer, viewport.visibleRect);
     }
     // Renders all nodes, even ones not within the viewport
     renderAll(renderer) {
         const leaves = this.root.getLeaves();
-        this.sortLeaves(leaves);
+        sortLeavesByZIndex(leaves);
         for (const leaf of leaves) {
             leaf.getContent().render(renderer, leaf.getBBox());
         }
     }
     getElementsIntersectingRegion(region) {
-        const leaves = this.root.getLeavesInRegion(region);
-        this.sortLeaves(leaves);
+        const leaves = this.root.getLeavesIntersectingRegion(region);
+        sortLeavesByZIndex(leaves);
         return leaves.map(leaf => leaf.getContent());
     }
 }
@@ -88,6 +85,7 @@ EditorImage.AddElementCommand = (_a = class {
     _element = new WeakMap(),
     _applyByFlattening = new WeakMap(),
     _a);
+// TODO: Assign leaf nodes to CacheNodes. When leaf nodes are modified, the corresponding CacheNodes can be updated.
 export class ImageNode {
     constructor(parent = null) {
         this.parent = parent;
@@ -95,8 +93,13 @@ export class ImageNode {
         this.children = [];
         this.bbox = Rect2.empty;
         this.content = null;
-        this.minZIndex = null;
-        this.maxZIndex = null;
+        this.id = ImageNode.idCounter++;
+    }
+    getId() {
+        return this.id;
+    }
+    onContentChange() {
+        this.id = ImageNode.idCounter++;
     }
     getContent() {
         return this.content;
@@ -104,24 +107,30 @@ export class ImageNode {
     getParent() {
         return this.parent;
     }
-    getChildrenInRegion(region) {
+    getChildrenIntersectingRegion(region) {
         return this.children.filter(child => {
             return child.getBBox().intersects(region);
         });
     }
+    getChildrenOrSelfIntersectingRegion(region) {
+        if (this.content) {
+            return [this];
+        }
+        return this.getChildrenIntersectingRegion(region);
+    }
     // Returns a list of `ImageNode`s with content (and thus no children).
-    getLeavesInRegion(region, minFractionOfRegion = 0) {
+    getLeavesIntersectingRegion(region, isTooSmall) {
         const result = [];
         // Don't render if too small
-        if (this.bbox.maxDimension / region.maxDimension <= minFractionOfRegion) {
+        if (isTooSmall === null || isTooSmall === void 0 ? void 0 : isTooSmall(this.bbox)) {
             return [];
         }
         if (this.content !== null && this.getBBox().intersects(region)) {
             result.push(this);
         }
-        const children = this.getChildrenInRegion(region);
+        const children = this.getChildrenIntersectingRegion(region);
         for (const child of children) {
-            result.push(...child.getLeavesInRegion(region, minFractionOfRegion));
+            result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
         }
         return result;
     }
@@ -138,6 +147,7 @@ export class ImageNode {
         return result;
     }
     addLeaf(leaf) {
+        this.onContentChange();
         if (this.content === null && this.children.length === 0) {
             this.content = leaf;
             this.recomputeBBox(true);
@@ -186,17 +196,13 @@ export class ImageNode {
     // this' ancestors bounding boxes. This also re-computes this' bounding box
     // in the z-direction (z-indicies).
     recomputeBBox(bubbleUp) {
-        var _a, _b, _c;
+        var _a;
         const oldBBox = this.bbox;
         if (this.content !== null) {
             this.bbox = this.content.getBBox();
-            this.minZIndex = this.content.zIndex;
-            this.maxZIndex = this.content.zIndex;
         }
         else {
             this.bbox = Rect2.empty;
-            this.minZIndex = null;
-            this.maxZIndex = null;
             let isFirst = true;
             for (const child of this.children) {
                 if (isFirst) {
@@ -206,18 +212,10 @@ export class ImageNode {
                 else {
                     this.bbox = this.bbox.union(child.getBBox());
                 }
-                (_a = this.minZIndex) !== null && _a !== void 0 ? _a : (this.minZIndex = child.minZIndex);
-                (_b = this.maxZIndex) !== null && _b !== void 0 ? _b : (this.maxZIndex = child.maxZIndex);
-                if (child.minZIndex !== null && this.minZIndex !== null) {
-                    this.minZIndex = Math.min(child.minZIndex, this.minZIndex);
-                }
-                if (child.maxZIndex !== null && this.maxZIndex !== null) {
-                    this.maxZIndex = Math.max(child.maxZIndex, this.maxZIndex);
-                }
             }
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            (_c = this.parent) === null || _c === void 0 ? void 0 : _c.recomputeBBox(true);
+            (_a = this.parent) === null || _a === void 0 ? void 0 : _a.recomputeBBox(true);
         }
     }
     rebalance() {
@@ -243,8 +241,6 @@ export class ImageNode {
     }
     // Remove this node and all of its children
     remove() {
-        this.minZIndex = null;
-        this.maxZIndex = null;
         if (!this.parent) {
             this.content = null;
             this.children = [];
@@ -264,4 +260,14 @@ export class ImageNode {
         this.parent = null;
         this.children = [];
     }
+    render(renderer, visibleRect) {
+        // Don't render components that are < 0.1% of the viewport.
+        const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+        sortLeavesByZIndex(leaves);
+        for (const leaf of leaves) {
+            // Leaves by definition have content
+            leaf.getContent().render(renderer, visibleRect);
+        }
+    }
 }
+ImageNode.idCounter = 0;

package/dist/src/SVGLoader.d.ts

@@ -1,11 +1,12 @@
 import Rect2 from './geometry/Rect2';
-import { ComponentAddedListener, ImageLoader, OnProgressListener } from './types';
+import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 export declare const defaultSVGViewRect: Rect2;
 export default class SVGLoader implements ImageLoader {
     private source;
     private onFinish?;
     private onAddComponent;
     private onProgress;
+    private onDetermineExportRect;
     private processedCount;
     private totalToProcess;
     private rootViewBox;
@@ -18,6 +19,6 @@ export default class SVGLoader implements ImageLoader {
     private updateSVGAttrs;
     private visit;
     private getSourceAttrs;
-    start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener): Promise<Rect2>;
+    start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener | null): Promise<void>;
     static fromString(text: string): SVGLoader;
 }

package/dist/src/SVGLoader.js

@@ -21,6 +21,7 @@ export default class SVGLoader {
         this.onFinish = onFinish;
         this.onAddComponent = null;
         this.onProgress = null;
+        this.onDetermineExportRect = null;
         this.processedCount = 0;
         this.totalToProcess = 0;
     }
@@ -100,6 +101,7 @@ export default class SVGLoader {
         (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, component);
     }
     updateViewBox(node) {
+        var _a;
         const viewBoxAttr = node.getAttribute('viewBox');
         if (this.rootViewBox || !viewBoxAttr) {
             return;
@@ -113,6 +115,7 @@ export default class SVGLoader {
             return;
         }
         this.rootViewBox = new Rect2(x, y, width, height);
+        (_a = this.onDetermineExportRect) === null || _a === void 0 ? void 0 : _a.call(this, this.rootViewBox);
     }
     updateSVGAttrs(node) {
         var _a;
@@ -154,23 +157,22 @@ export default class SVGLoader {
             return [attr, node.getAttribute(attr)];
         });
     }
-    start(onAddComponent, onProgress) {
-        var _a;
+    start(onAddComponent, onProgress, onDetermineExportRect = null) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
             this.onAddComponent = onAddComponent;
             this.onProgress = onProgress;
+            this.onDetermineExportRect = onDetermineExportRect;
             // Estimate the number of tags to process.
             this.totalToProcess = this.source.childElementCount;
             this.processedCount = 0;
             this.rootViewBox = null;
             yield this.visit(this.source);
             const viewBox = this.rootViewBox;
-            let result = defaultSVGViewRect;
-            if (viewBox) {
-                result = Rect2.of(viewBox);
+            if (!viewBox) {
+                (_a = this.onDetermineExportRect) === null || _a === void 0 ? void 0 : _a.call(this, defaultSVGViewRect);
             }
-            (_a = this.onFinish) === null || _a === void 0 ? void 0 : _a.call(this);
-            return result;
+            (_b = this.onFinish) === null || _b === void 0 ? void 0 : _b.call(this);
         });
     }
     // TODO: Handling unsafe data! Tripple-check that this is secure!

package/dist/src/Viewport.d.ts

@@ -1,3 +1,4 @@
+import Command from './commands/Command';
 import { CommandLocalization } from './commands/localization';
 import Editor from './Editor';
 import Mat33 from './geometry/Mat33';
@@ -28,10 +29,13 @@ export declare class Viewport {
     resetTransform(newTransform: Mat33): void;
     get screenToCanvasTransform(): Mat33;
     get canvasToScreenTransform(): Mat33;
+    getResolution(): Vec2;
     getScaleFactor(): number;
+    getSizeOfPixelOnCanvas(): number;
     getRotationAngle(): number;
     static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
     roundPoint(point: Point2): Point2;
+    zoomTo(toMakeVisible: Rect2): Command;
 }
 export declare namespace Viewport {
     type ViewportTransform = typeof Viewport.ViewportTransform.prototype;

package/dist/src/Viewport.js

@@ -50,11 +50,17 @@ export class Viewport {
     get canvasToScreenTransform() {
         return this.transform;
     }
+    getResolution() {
+        return this.screenRect.size;
+    }
     // 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();
     }
+    getSizeOfPixelOnCanvas() {
+        return 1 / this.getScaleFactor();
+    }
     // Returns the angle of the canvas in radians
     getRotationAngle() {
         return this.transform.transformVec3(Vec3.unitX).angle();
@@ -76,6 +82,41 @@ export class Viewport {
     roundPoint(point) {
         return Viewport.roundPoint(point, 1 / this.getScaleFactor());
     }
+    // Returns a Command that transforms the view such that [rect] is visible, and perhaps
+    // centered in the viewport.
+    // Returns null if no transformation is necessary
+    zoomTo(toMakeVisible) {
+        let transform = Mat33.identity;
+        // Try to move the selection within the center 2/3rds of the viewport.
+        const recomputeTargetRect = () => {
+            // transform transforms objects on the canvas. As such, we need to invert it
+            // to transform the viewport.
+            const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
+            return visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
+        };
+        let targetRect = recomputeTargetRect();
+        const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
+        // Ensure that toMakeVisible is at least 1/8th of the visible region.
+        const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
+        if (largerThanTarget || muchSmallerThanTarget) {
+            // If larger than the target, ensure that the longest axis is visible.
+            // If smaller, shrink the visible rectangle as much as possible
+            const multiplier = (largerThanTarget ? Math.max : Math.min)(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);
+            const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
+            const viewportContentTransform = visibleRectTransform.inverse();
+            transform = transform.rightMul(viewportContentTransform);
+        }
+        targetRect = recomputeTargetRect();
+        // Ensure that the center of the region is visible
+        if (!targetRect.containsRect(toMakeVisible)) {
+            // target position - current position
+            const translation = toMakeVisible.center.minus(targetRect.center);
+            const visibleRectTransform = Mat33.translation(translation);
+            const viewportContentTransform = visibleRectTransform.inverse();
+            transform = transform.rightMul(viewportContentTransform);
+        }
+        return new Viewport.ViewportTransform(transform);
+    }
 }
 // Command that translates/scales the viewport.
 Viewport.ViewportTransform = (_a = class {

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

@@ -2,14 +2,15 @@ import Command from '../commands/Command';
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 export default abstract class AbstractComponent {
     protected lastChangedTime: number;
     protected abstract contentBBox: Rect2;
-    zIndex: number;
+    private zIndex;
     private static zIndexCounter;
     protected constructor();
+    getZIndex(): number;
     getBBox(): Rect2;
     abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     abstract intersects(lineSegment: LineSegment2): boolean;

package/dist/src/components/AbstractComponent.js

@@ -4,6 +4,9 @@ export default class AbstractComponent {
         this.lastChangedTime = (new Date()).getTime();
         this.zIndex = AbstractComponent.zIndexCounter++;
     }
+    getZIndex() {
+        return this.zIndex;
+    }
     getBBox() {
         return this.contentBBox;
     }

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

@@ -1,7 +1,7 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 export default class SVGGlobalAttributesObject extends AbstractComponent {

package/dist/src/components/SVGGlobalAttributesObject.js

@@ -1,5 +1,5 @@
 import Rect2 from '../geometry/Rect2';
-import SVGRenderer from '../rendering/SVGRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 // Stores global SVG attributes (e.g. namespace identifiers.)
 export default class SVGGlobalAttributesObject extends AbstractComponent {

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

@@ -1,7 +1,7 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer, { RenderablePathSpec } from '../rendering/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 export default class Stroke extends AbstractComponent {

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

@@ -1,7 +1,7 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 export default class UnknownSVGObject extends AbstractComponent {

package/dist/src/components/UnknownSVGObject.js

@@ -1,5 +1,5 @@
 import Rect2 from '../geometry/Rect2';
-import SVGRenderer from '../rendering/SVGRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 export default class UnknownSVGObject extends AbstractComponent {
     constructor(svgObject) {

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

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';

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

@@ -1,4 +1,4 @@
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import Rect2 from '../../geometry/Rect2';
 import Stroke from '../Stroke';
 import { StrokeDataPoint } from '../../types';

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

@@ -160,7 +160,7 @@ export default class FreehandLineBuilder {
         const upperBoundary = computeBoundaryCurve(1, halfVec);
         const lowerBoundary = computeBoundaryCurve(-1, halfVec);
         // If the boundaries have two intersections, increasing the half vector's length could fix this.
-        if (upperBoundary.intersects(lowerBoundary).length === 2) {
+        if (upperBoundary.intersects(lowerBoundary).length > 0) {
             halfVec = halfVec.times(2);
         }
         const pathCommands = [

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

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';

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

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';

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

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/dist/src/geometry/Mat33.js

@@ -4,6 +4,9 @@ import Vec3 from './Vec3';
 // a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
 // **and** translates while a linear transformation just scales/rotates/shears).
 export default class Mat33 {
+    // ⎡ a1 a2 a3 ⎤
+    // ⎢ b1 b2 b3 ⎥
+    // ⎣ c1 c2 c3 ⎦
     constructor(a1, a2, a3, b1, b2, b3, c1, c2, c3) {
         this.a1 = a1;
         this.a2 = a2;

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

@@ -1,5 +1,5 @@
 import { Bezier } from 'bezier-js';
-import { RenderingStyle, RenderablePathSpec } from '../rendering/AbstractRenderer';
+import { RenderingStyle, RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import LineSegment2 from './LineSegment2';
 import Mat33 from './Mat33';
 import Rect2 from './Rect2';

package/dist/src/geometry/Path.js

@@ -208,8 +208,8 @@ export default class Path {
         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*[1-9.])0{4,}\d$/;
-            const hasRoundingDownExp = /^([-]?)(\d*)\.(\d*9{4,}\d)$/;
+            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;
@@ -230,7 +230,9 @@ export default class Path {
                 text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
             }
             text = text.replace(fixRoundingUpExp, '$1');
-            // Remove trailing period (if it exists)
+            // Remove trailing zeroes
+            text = text.replace(/([.][^0]*)0+$/, '$1');
+            // Remove trailing period
             return text.replace(/[.]$/, '');
         };
         const addCommand = (command, ...points) => {

package/dist/src/geometry/Rect2.d.ts

@@ -27,6 +27,7 @@ export default class Rect2 {
     intersects(other: Rect2): boolean;
     intersection(other: Rect2): Rect2 | null;
     union(other: Rect2): Rect2;
+    divideIntoGrid(columns: number, rows: number): Rect2[];
     grownToPoint(point: Point2, margin?: number): Rect2;
     grownBy(margin: number): Rect2;
     get corners(): Point2[];