js-draw 0.0.8 → 0.1.0

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

@@ -0,0 +1,20 @@
+import { Vec2 } from '../../geometry/Vec2';
+import DummyRenderer from '../renderers/DummyRenderer';
+import createEditor from '../../testing/createEditor';
+import RenderingCache from './RenderingCache';
+// Override any default test options with [cacheOptions]
+export const createCache = (onRenderAlloc, cacheOptions) => {
+    const editor = createEditor();
+    const cache = new RenderingCache(Object.assign({ createRenderer() {
+            const renderer = new DummyRenderer(editor.viewport);
+            onRenderAlloc === null || onRenderAlloc === void 0 ? void 0 : onRenderAlloc(renderer);
+            return renderer;
+        },
+        isOfCorrectType(renderer) {
+            return renderer instanceof DummyRenderer;
+        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minComponentsPerCache: 0 }, cacheOptions));
+    return {
+        cache,
+        editor
+    };
+};

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

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

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,13 +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;
-    private objectLevel;
+    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;
-    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,15 @@ 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) {
             return;
@@ -67,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++;
     }
@@ -83,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,13 +1,20 @@
-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;
     private ignoreObjectsAboveLevel;
     private ignoringObject;
+    private minSquareCurveApproxDist;
+    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;
     protected beginPath(startPoint: Point2): void;
@@ -17,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/renderers/CanvasRenderer.js

@@ -0,0 +1,164 @@
+import Color4 from '../../Color4';
+import { Vec2 } from '../../geometry/Vec2';
+import AbstractRenderer from './AbstractRenderer';
+export default class CanvasRenderer extends AbstractRenderer {
+    constructor(ctx, viewport) {
+        super(viewport);
+        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) {
+            this.minSquareCurveApproxDist = 64;
+            this.minRenderSizeBothDimens = 8;
+            this.minRenderSizeAnyDimen = 2;
+        }
+        else {
+            this.minSquareCurveApproxDist = 1;
+            this.minRenderSizeBothDimens = 1;
+            this.minRenderSizeAnyDimen = 0;
+        }
+    }
+    displaySize() {
+        return Vec2.of(this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight);
+    }
+    clear() {
+        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    }
+    beginPath(startPoint) {
+        startPoint = this.canvasToScreen(startPoint);
+        this.ctx.beginPath();
+        this.ctx.moveTo(startPoint.x, startPoint.y);
+    }
+    endPath(style) {
+        this.ctx.fillStyle = style.fill.toHexString();
+        this.ctx.fill();
+        if (style.stroke) {
+            this.ctx.strokeStyle = style.stroke.color.toHexString();
+            this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
+            this.ctx.stroke();
+        }
+        this.ctx.closePath();
+    }
+    lineTo(point) {
+        point = this.canvasToScreen(point);
+        this.ctx.lineTo(point.x, point.y);
+    }
+    moveTo(point) {
+        point = this.canvasToScreen(point);
+        this.ctx.moveTo(point.x, point.y);
+    }
+    traceCubicBezierCurve(p1, p2, 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);
+        if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist
+            && delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
+            this.ctx.lineTo(p3.x, p3.y);
+        }
+        else {
+            this.ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
+        }
+    }
+    traceQuadraticBezierCurve(controlPoint, 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) {
+            this.ctx.lineTo(endPoint.x, endPoint.y);
+        }
+        else {
+            this.ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
+        }
+    }
+    drawPath(path) {
+        if (this.ignoringObject) {
+            return;
+        }
+        super.drawPath(path);
+    }
+    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) {
+            this.ignoreObjectsAboveLevel = null;
+            this.ignoringObject = false;
+        }
+    }
+    drawPoints(...points) {
+        const pointRadius = 10;
+        for (let i = 0; i < points.length; 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();
+            this.ctx.fill();
+            this.ctx.stroke();
+            this.ctx.closePath();
+            this.ctx.textAlign = 'center';
+            this.ctx.textBaseline = 'middle';
+            this.ctx.fillStyle = 'black';
+            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.d.ts

@@ -0,0 +1,3 @@
+import Editor from '../Editor';
+declare const _default: () => Editor;
+export default _default;

package/dist/src/testing/createEditor.js

@@ -0,0 +1,3 @@
+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';
@@ -192,12 +192,20 @@ class SelectionWidget extends ToolbarWidget {
     fillDropdown(dropdown) {
         const container = document.createElement('div');
         const resizeButton = document.createElement('button');
+        const deleteButton = document.createElement('button');
         resizeButton.innerText = this.localizationTable.resizeImageToSelection;
         resizeButton.disabled = true;
+        deleteButton.innerText = this.localizationTable.deleteSelection;
+        deleteButton.disabled = true;
         resizeButton.onclick = () => {
             const selection = this.tool.getSelection();
             this.editor.dispatch(this.editor.setImportExportRect(selection.region));
         };
+        deleteButton.onclick = () => {
+            const selection = this.tool.getSelection();
+            this.editor.dispatch(selection.deleteSelectedObjects());
+            this.tool.clearSelection();
+        };
         // Enable/disable actions based on whether items are selected
         this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolUpdated) {
@@ -207,9 +215,10 @@ class SelectionWidget extends ToolbarWidget {
                 const selection = this.tool.getSelection();
                 const hasSelection = selection && selection.region.area > 0;
                 resizeButton.disabled = !hasSelection;
+                deleteButton.disabled = resizeButton.disabled;
             }
         });
-        container.replaceChildren(resizeButton);
+        container.replaceChildren(resizeButton, deleteButton);
         dropdown.appendChild(container);
         return true;
     }

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

@@ -12,6 +12,7 @@ export interface ToolbarLocalization {
     touchDrawing: string;
     thicknessLabel: string;
     resizeImageToSelection: string;
+    deleteSelection: string;
     undo: string;
     redo: string;
     dropdownShown: (toolName: string) => string;

package/dist/src/toolbar/localization.js

@@ -6,6 +6,7 @@ export const defaultToolbarLocalization = {
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
     resizeImageToSelection: 'Resize image to selection',
+    deleteSelection: 'Delete selection',
     undo: 'Undo',
     redo: 'Redo',
     selectObjectType: 'Object type: ',

package/dist/src/tools/BaseTool.js

@@ -6,6 +6,10 @@ export default class BaseTool {
         this.enabled = true;
         this.group = null;
     }
+    onPointerDown(_event) { return false; }
+    onPointerMove(_event) { }
+    onPointerUp(_event) { }
+    onGestureCancel() { }
     onWheel(_event) {
         return false;
     }

package/dist/src/tools/PanZoom.js

@@ -56,6 +56,7 @@ export default class PanZoom extends BaseTool {
         }
         if (handlingGesture) {
             (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = new Viewport.ViewportTransform(Mat33.identity));
+            this.editor.display.setDraftMode(true);
         }
         return handlingGesture;
     }
@@ -100,11 +101,13 @@ export default class PanZoom extends BaseTool {
             this.transform.unapply(this.editor);
             this.editor.dispatch(this.transform, false);
         }
+        this.editor.display.setDraftMode(false);
         this.transform = null;
     }
     onGestureCancel() {
         var _a;
         (_a = this.transform) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
+        this.editor.display.setDraftMode(false);
         this.transform = null;
     }
     // Applies [transformUpdate] to the editor. This stacks on top of the