js-draw 0.0.10 → 0.1.0

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

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

package/dist/src/rendering/{AbstractRenderer.d.ts → renderers/AbstractRenderer.d.ts}

@@ -1,8 +1,9 @@
-import Color4 from '../Color4';
-import { PathCommand } from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Viewport from '../Viewport';
+import Color4 from '../../Color4';
+import Mat33 from '../../geometry/Mat33';
+import { PathCommand } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
 export interface RenderingStyle {
     fill: Color4;
     stroke?: {
@@ -16,8 +17,10 @@ export interface RenderablePathSpec {
     style: RenderingStyle;
 }
 export default abstract class AbstractRenderer {
-    protected viewport: Viewport;
+    private viewport;
+    private selfTransform;
     protected constructor(viewport: Viewport);
+    protected getViewport(): Viewport;
     abstract displaySize(): Vec2;
     abstract clear(): void;
     protected abstract beginPath(startPoint: Point2): void;
@@ -26,14 +29,21 @@ export default abstract class AbstractRenderer {
     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 isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;
-    private objectLevel;
+    protected objectLevel: number;
     private currentPaths;
     private flushPath;
     drawPath(path: RenderablePathSpec): void;
     drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
-    startObject(_boundingBox: Rect2): void;
+    startObject(_boundingBox: Rect2, _clip?: boolean): void;
     endObject(): void;
     protected getNestingLevel(): number;
     abstract drawPoints(...points: Point2[]): void;
+    canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;
+    renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer): void;
+    setTransform(transform: Mat33 | null): void;
+    getCanvasToScreenTransform(): Mat33;
+    canvasToScreen(vec: Vec2): Vec2;
+    getSizeOfCanvasPixelOnScreen(): number;
 }

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

@@ -1,4 +1,5 @@
-import Path, { PathCommandType } from '../geometry/Path';
+import Path, { PathCommandType } from '../../geometry/Path';
+import { Vec2 } from '../../geometry/Vec2';
 const stylesEqual = (a, b) => {
     var _a, _b, _c, _d, _e;
     return a === b || (a.fill.eq(b.fill)
@@ -8,9 +9,14 @@ const stylesEqual = (a, b) => {
 export default class AbstractRenderer {
     constructor(viewport) {
         this.viewport = viewport;
+        // If null, this' transformation is linked to the Viewport
+        this.selfTransform = null;
         this.objectLevel = 0;
         this.currentPaths = null;
     }
+    // this.canvasToScreen, etc. should be used instead of the corresponding
+    // methods on Viewport.
+    getViewport() { return this.viewport; }
     setDraftMode(_draftMode) { }
     flushPath() {
         if (!this.currentPaths) {
@@ -68,7 +74,8 @@ export default class AbstractRenderer {
         this.drawPath(path.toRenderable(lineFill));
     }
     // Note the start/end of an object with the given bounding box.
-    startObject(_boundingBox) {
+    // Renderers are not required to support [clip]
+    startObject(_boundingBox, _clip) {
         this.currentPaths = [];
         this.objectLevel++;
     }
@@ -84,4 +91,31 @@ export default class AbstractRenderer {
     getNestingLevel() {
         return this.objectLevel;
     }
+    // Returns true iff other can be rendered onto this without data loss.
+    canRenderFromWithoutDataLoss(_other) {
+        return false;
+    }
+    // MUST throw if other and this are not of the same base class.
+    renderFromOtherOfSameType(_renderTo, other) {
+        throw new Error(`Unable to render from ${other}: Not implemented`);
+    }
+    // Set a transformation to apply to things before rendering,
+    // replacing the viewport's transform.
+    setTransform(transform) {
+        this.selfTransform = transform;
+    }
+    // Get the matrix that transforms a vector on the canvas to a vector on this'
+    // rendering target.
+    getCanvasToScreenTransform() {
+        if (this.selfTransform) {
+            return this.selfTransform;
+        }
+        return this.viewport.canvasToScreenTransform;
+    }
+    canvasToScreen(vec) {
+        return this.getCanvasToScreenTransform().transformVec2(vec);
+    }
+    getSizeOfCanvasPixelOnScreen() {
+        return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
+    }
 }

package/dist/src/rendering/{CanvasRenderer.d.ts → renderers/CanvasRenderer.d.ts}

@@ -1,7 +1,8 @@
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Vec3 from '../geometry/Vec3';
-import Viewport from '../Viewport';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
@@ -11,6 +12,8 @@ export default class CanvasRenderer extends AbstractRenderer {
     private minRenderSizeAnyDimen;
     private minRenderSizeBothDimens;
     constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
+    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
+    renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void;
     setDraftMode(draftMode: boolean): void;
     displaySize(): Vec2;
     clear(): void;
@@ -21,7 +24,9 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
-    startObject(boundingBox: Rect2): void;
+    private clipLevels;
+    startObject(boundingBox: Rect2, clip: boolean): void;
     endObject(): void;
     drawPoints(...points: Point2[]): void;
+    isTooSmallToRender(rect: Rect2): boolean;
 }

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

@@ -1,5 +1,5 @@
-import Color4 from '../Color4';
-import { Vec2 } from '../geometry/Vec2';
+import Color4 from '../../Color4';
+import { Vec2 } from '../../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     constructor(ctx, viewport) {
@@ -7,8 +7,29 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx = ctx;
         this.ignoreObjectsAboveLevel = null;
         this.ignoringObject = false;
+        this.clipLevels = [];
         this.setDraftMode(false);
     }
+    canRenderFromWithoutDataLoss(other) {
+        return other instanceof CanvasRenderer;
+    }
+    renderFromOtherOfSameType(transformBy, other) {
+        if (!(other instanceof CanvasRenderer)) {
+            throw new Error(`${other} cannot be rendered onto ${this}`);
+        }
+        transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
+        this.ctx.save();
+        // From MDN, transform(a,b,c,d,e,f)
+        // takes input such that
+        // ⎡ a c e ⎤
+        // ⎢ b d f ⎥ transforms content drawn to [ctx].
+        // ⎣ 0 0 1 ⎦
+        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
+        transformBy.a2, transformBy.b2, // c, d
+        transformBy.a3, transformBy.b3);
+        this.ctx.drawImage(other.ctx.canvas, 0, 0);
+        this.ctx.restore();
+    }
     // Set parameters for lower/higher quality rendering
     setDraftMode(draftMode) {
         if (draftMode) {
@@ -29,7 +50,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
     }
     beginPath(startPoint) {
-        startPoint = this.viewport.canvasToScreen(startPoint);
+        startPoint = this.canvasToScreen(startPoint);
         this.ctx.beginPath();
         this.ctx.moveTo(startPoint.x, startPoint.y);
     }
@@ -38,23 +59,23 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx.fill();
         if (style.stroke) {
             this.ctx.strokeStyle = style.stroke.color.toHexString();
-            this.ctx.lineWidth = this.viewport.getScaleFactor() * style.stroke.width;
+            this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
             this.ctx.stroke();
         }
         this.ctx.closePath();
     }
     lineTo(point) {
-        point = this.viewport.canvasToScreen(point);
+        point = this.canvasToScreen(point);
         this.ctx.lineTo(point.x, point.y);
     }
     moveTo(point) {
-        point = this.viewport.canvasToScreen(point);
+        point = this.canvasToScreen(point);
         this.ctx.moveTo(point.x, point.y);
     }
     traceCubicBezierCurve(p1, p2, p3) {
-        p1 = this.viewport.canvasToScreen(p1);
-        p2 = this.viewport.canvasToScreen(p2);
-        p3 = this.viewport.canvasToScreen(p3);
+        p1 = this.canvasToScreen(p1);
+        p2 = this.canvasToScreen(p2);
+        p3 = this.canvasToScreen(p3);
         // Approximate the curve if small enough.
         const delta1 = p2.minus(p1);
         const delta2 = p3.minus(p2);
@@ -67,8 +88,8 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
     }
     traceQuadraticBezierCurve(controlPoint, endPoint) {
-        controlPoint = this.viewport.canvasToScreen(controlPoint);
-        endPoint = this.viewport.canvasToScreen(endPoint);
+        controlPoint = this.canvasToScreen(controlPoint);
+        endPoint = this.canvasToScreen(endPoint);
         // Approximate the curve with a line if small enough
         const delta = controlPoint.minus(endPoint);
         if (delta.magnitudeSquared() < this.minSquareCurveApproxDist) {
@@ -84,20 +105,30 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         super.drawPath(path);
     }
-    startObject(boundingBox) {
-        // Should we ignore all objects within this object's bbox?
-        const diagonal = this.viewport.canvasToScreenTransform.transformVec3(boundingBox.size);
-        const bothDimenMinSize = this.minRenderSizeBothDimens;
-        const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
-        const anyDimenMinSize = this.minRenderSizeAnyDimen;
-        const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
-        if (bothTooSmall || anyTooSmall) {
+    startObject(boundingBox, clip) {
+        if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();
             this.ignoringObject = true;
         }
         super.startObject(boundingBox);
+        if (!this.ignoringObject && clip) {
+            this.clipLevels.push(this.objectLevel);
+            this.ctx.save();
+            this.ctx.beginPath();
+            for (const corner of boundingBox.corners) {
+                const screenCorner = this.canvasToScreen(corner);
+                this.ctx.lineTo(screenCorner.x, screenCorner.y);
+            }
+            this.ctx.clip();
+        }
     }
     endObject() {
+        if (!this.ignoringObject && this.clipLevels.length > 0) {
+            if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+                this.ctx.restore();
+                this.clipLevels.pop();
+            }
+        }
         super.endObject();
         // If exiting an object with a too-small-to-draw bounding box,
         if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
@@ -108,7 +139,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     drawPoints(...points) {
         const pointRadius = 10;
         for (let i = 0; i < points.length; i++) {
-            const point = this.viewport.canvasToScreen(points[i]);
+            const point = this.canvasToScreen(points[i]);
             this.ctx.beginPath();
             this.ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
             this.ctx.fillStyle = Color4.ofRGBA(0.5 + Math.sin(i) / 2, 1.0, 0.5 + Math.cos(i * 0.2) / 4, 0.5).toHexString();
@@ -121,4 +152,13 @@ export default class CanvasRenderer extends AbstractRenderer {
             this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
         }
     }
+    isTooSmallToRender(rect) {
+        // Should we ignore all objects within this object's bbox?
+        const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
+        const bothDimenMinSize = this.minRenderSizeBothDimens;
+        const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
+        const anyDimenMinSize = this.minRenderSizeAnyDimen;
+        const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
+        return bothTooSmall || anyTooSmall;
+    }
 }

package/dist/src/rendering/{DummyRenderer.d.ts → renderers/DummyRenderer.d.ts}

@@ -1,7 +1,8 @@
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Vec3 from '../geometry/Vec3';
-import Viewport from '../Viewport';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;
@@ -20,6 +21,9 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
-    startObject(boundingBox: Rect2): void;
+    startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
+    isTooSmallToRender(_rect: Rect2): boolean;
+    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
+    renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void;
 }

package/dist/src/rendering/{DummyRenderer.js → renderers/DummyRenderer.js}

@@ -1,5 +1,5 @@
 // Renderer that outputs nothing. Useful for automated tests.
-import { Vec2 } from '../geometry/Vec2';
+import { Vec2 } from '../../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     constructor(viewport) {
@@ -14,8 +14,15 @@ export default class DummyRenderer extends AbstractRenderer {
         this.pointBuffer = [];
     }
     displaySize() {
-        // Return a dummy
-        return Vec2.of(640, 480);
+        // Do we have a stored viewport size?
+        const viewportSize = this.getViewport().getResolution();
+        // Don't use a 0x0 viewport — DummyRenderer is often used
+        // for tests that run without a display, so pretend we have a
+        // reasonable-sized display.
+        if (viewportSize.x === 0 || viewportSize.y === 0) {
+            return Vec2.of(640, 480);
+        }
+        return viewportSize;
     }
     clear() {
         this.clearedCount++;
@@ -35,18 +42,25 @@ export default class DummyRenderer extends AbstractRenderer {
         this.lastFillStyle = style;
     }
     lineTo(point) {
+        point = this.canvasToScreen(point);
         this.lastPoint = point;
         this.pointBuffer.push(point);
     }
     moveTo(point) {
+        point = this.canvasToScreen(point);
         this.lastPoint = point;
         this.pointBuffer.push(point);
     }
     traceCubicBezierCurve(p1, p2, p3) {
+        p1 = this.canvasToScreen(p1);
+        p2 = this.canvasToScreen(p2);
+        p3 = this.canvasToScreen(p3);
         this.lastPoint = p3;
         this.pointBuffer.push(p1, p2, p3);
     }
     traceQuadraticBezierCurve(controlPoint, endPoint) {
+        controlPoint = this.canvasToScreen(controlPoint);
+        endPoint = this.canvasToScreen(endPoint);
         this.lastPoint = endPoint;
         this.pointBuffer.push(controlPoint, endPoint);
     }
@@ -54,7 +68,7 @@ export default class DummyRenderer extends AbstractRenderer {
         // drawPoints is intended for debugging.
         // As such, it is unlikely to be the target of automated tests.
     }
-    startObject(boundingBox) {
+    startObject(boundingBox, _clip) {
         super.startObject(boundingBox);
         this.objectNestingLevel += 1;
     }
@@ -62,4 +76,21 @@ export default class DummyRenderer extends AbstractRenderer {
         super.endObject();
         this.objectNestingLevel -= 1;
     }
+    isTooSmallToRender(_rect) {
+        return false;
+    }
+    canRenderFromWithoutDataLoss(other) {
+        return other instanceof DummyRenderer;
+    }
+    renderFromOtherOfSameType(transform, other) {
+        if (!(other instanceof DummyRenderer)) {
+            throw new Error(`${other} cannot be rendered onto ${this}`);
+        }
+        this.renderedPathCount += other.renderedPathCount;
+        this.lastFillStyle = other.lastFillStyle;
+        this.lastPoint = other.lastPoint;
+        this.pointBuffer.push(...other.pointBuffer.map(point => {
+            return transform.transformVec2(point);
+        }));
+    }
 }

package/dist/src/rendering/{SVGRenderer.d.ts → renderers/SVGRenderer.d.ts}

@@ -1,6 +1,6 @@
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Viewport from '../Viewport';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
@@ -26,4 +26,5 @@ export default class SVGRenderer extends AbstractRenderer {
     protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
     drawPoints(...points: Point2[]): void;
     drawSVGElem(elem: SVGElement): void;
+    isTooSmallToRender(_rect: Rect2): boolean;
 }

package/dist/src/rendering/{SVGRenderer.js → renderers/SVGRenderer.js}

@@ -1,5 +1,5 @@
-import Path, { PathCommandType } from '../geometry/Path';
-import { Vec2 } from '../geometry/Vec2';
+import Path, { PathCommandType } from '../../geometry/Path';
+import { Vec2 } from '../../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
@@ -44,7 +44,7 @@ export default class SVGRenderer extends AbstractRenderer {
     beginPath(startPoint) {
         var _a;
         this.currentPath = [];
-        this.pathStart = this.viewport.canvasToScreen(startPoint);
+        this.pathStart = this.canvasToScreen(startPoint);
         (_a = this.lastPathStart) !== null && _a !== void 0 ? _a : (this.lastPathStart = this.pathStart);
     }
     endPath(style) {
@@ -98,23 +98,23 @@ export default class SVGRenderer extends AbstractRenderer {
         this.addPathToSVG();
     }
     lineTo(point) {
-        point = this.viewport.canvasToScreen(point);
+        point = this.canvasToScreen(point);
         this.currentPath.push({
             kind: PathCommandType.LineTo,
             point,
         });
     }
     moveTo(point) {
-        point = this.viewport.canvasToScreen(point);
+        point = this.canvasToScreen(point);
         this.currentPath.push({
             kind: PathCommandType.MoveTo,
             point,
         });
     }
     traceCubicBezierCurve(controlPoint1, controlPoint2, endPoint) {
-        controlPoint1 = this.viewport.canvasToScreen(controlPoint1);
-        controlPoint2 = this.viewport.canvasToScreen(controlPoint2);
-        endPoint = this.viewport.canvasToScreen(endPoint);
+        controlPoint1 = this.canvasToScreen(controlPoint1);
+        controlPoint2 = this.canvasToScreen(controlPoint2);
+        endPoint = this.canvasToScreen(endPoint);
         this.currentPath.push({
             kind: PathCommandType.CubicBezierTo,
             controlPoint1,
@@ -123,8 +123,8 @@ export default class SVGRenderer extends AbstractRenderer {
         });
     }
     traceQuadraticBezierCurve(controlPoint, endPoint) {
-        controlPoint = this.viewport.canvasToScreen(controlPoint);
-        endPoint = this.viewport.canvasToScreen(endPoint);
+        controlPoint = this.canvasToScreen(controlPoint);
+        endPoint = this.canvasToScreen(endPoint);
         this.currentPath.push({
             kind: PathCommandType.QuadraticBezierTo,
             controlPoint,
@@ -140,8 +140,11 @@ export default class SVGRenderer extends AbstractRenderer {
             this.mainGroup.appendChild(elem);
         });
     }
-    // Renders a copy of the given element.
+    // Renders a **copy** of the given element.
     drawSVGElem(elem) {
         this.elem.appendChild(elem.cloneNode(true));
     }
+    isTooSmallToRender(_rect) {
+        return false;
+    }
 }

package/dist/src/testing/createEditor.js

@@ -1,3 +1,3 @@
-import { RenderingMode } from '../Display';
+import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });

package/dist/src/toolbar/HTMLToolbar.js

@@ -7,7 +7,7 @@ import Eraser from '../tools/Eraser';
 import SelectionTool from '../tools/SelectionTool';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
 import { Vec2 } from '../geometry/Vec2';
-import SVGRenderer from '../rendering/SVGRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Viewport from '../Viewport';
 import EventDispatcher from '../EventDispatcher';
 import { makeArrowBuilder } from '../components/builders/ArrowBuilder';

package/dist/src/tools/SelectionTool.js

@@ -13,7 +13,6 @@ import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import { Vec2 } from '../geometry/Vec2';
 import { EditorEventType } from '../types';
-import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 const handleScreenSize = 30;
@@ -115,7 +114,7 @@ const makeDraggable = (element, onDrag, onDragEnd) => {
     element.addEventListener('pointercancel', onPointerEnd);
 };
 // Maximum number of strokes to transform without a re-render.
-const updateChunkSize = 50;
+const updateChunkSize = 100;
 class Selection {
     constructor(startPoint, editor) {
         this.startPoint = startPoint;
@@ -285,10 +284,13 @@ class Selection {
             if (this.region.containsRect(elem.getBBox())) {
                 return true;
             }
-            else if (this.region.getEdges().some(edge => elem.intersects(edge))) {
-                return true;
+            // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+            // As such, test with more lines than just this' edges.
+            const testLines = [];
+            for (const subregion of this.region.divideIntoGrid(2, 2)) {
+                testLines.push(...subregion.getEdges());
             }
-            return false;
+            return testLines.some(edge => elem.intersects(edge));
         });
         // Find the bounding box of all selected elements.
         if (!this.recomputeRegion()) {
@@ -392,26 +394,9 @@ export default class SelectionTool extends BaseTool {
             tool: this,
         });
         if (hasSelection) {
-            const visibleRect = this.editor.viewport.visibleRect;
-            const selectionRect = this.selectionBox.region;
             this.editor.announceForAccessibility(this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount()));
-            // Try to move the selection within the center 2/3rds of the viewport.
-            const targetRect = visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
-            // Ensure that the selection fits within the target
-            if (targetRect.w < selectionRect.w || targetRect.h < selectionRect.h) {
-                const multiplier = Math.max(selectionRect.w / targetRect.w, selectionRect.h / targetRect.h);
-                const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
-                const viewportContentTransform = visibleRectTransform.inverse();
-                (new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
-            }
-            // Ensure that the top left is visible
-            if (!targetRect.containsRect(selectionRect)) {
-                // target position - current position
-                const translation = selectionRect.center.minus(targetRect.center);
-                const visibleRectTransform = Mat33.translation(translation);
-                const viewportContentTransform = visibleRectTransform.inverse();
-                (new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
-            }
+            const selectionRect = this.selectionBox.region;
+            this.editor.viewport.zoomTo(selectionRect).apply(this.editor);
         }
     }
     onPointerUp(event) {

package/dist/src/types.d.ts

@@ -89,8 +89,9 @@ export interface ColorPickerToggled {
 export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled;
 export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
 export declare type ComponentAddedListener = (component: AbstractComponent) => void;
+export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;
 export interface ImageLoader {
-    start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener): Promise<Rect2>;
+    start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }
 export interface StrokeDataPoint {
     pos: Point2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.ts

@@ -9,9 +9,9 @@ import EventDispatcher from './EventDispatcher';
 import { Point2, Vec2 } from './geometry/Vec2';
 import Vec3 from './geometry/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import { RenderablePathSpec } from './rendering/AbstractRenderer';
-import Display, { RenderingMode } from './Display';
-import SVGRenderer from './rendering/SVGRenderer';
+import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import Display, { RenderingMode } from './rendering/Display';
+import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
@@ -380,7 +380,8 @@ export class Editor {
 			);
 		}
 
-		this.image.render(renderer, this.viewport);
+		//this.image.render(renderer, this.viewport);
+		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
 		this.rerenderQueued = false;
 	}
 
@@ -463,22 +464,28 @@ export class Editor {
 
 	public async loadFrom(loader: ImageLoader) {
 		this.showLoadingWarning(0);
-		const imageRect = await loader.start((component) => {
+		this.display.setDraftMode(true);
+
+		await loader.start((component) => {
 			(new EditorImage.AddElementCommand(component)).apply(this);
 		}, (countProcessed: number, totalToProcess: number) => {
-			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: Rect2) => {
+			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/src/EditorImage.test.ts

@@ -5,8 +5,8 @@ import Stroke from './components/Stroke';
 import { Vec2 } from './geometry/Vec2';
 import Path, { PathCommandType } from './geometry/Path';
 import Color4 from './Color4';
-import DummyRenderer from './rendering/DummyRenderer';
-import { RenderingStyle } from './rendering/AbstractRenderer';
+import DummyRenderer from './rendering/renderers/DummyRenderer';
+import { RenderingStyle } from './rendering/renderers/AbstractRenderer';
 import createEditor from './testing/createEditor';
 
 describe('EditorImage', () => {