js-draw 0.0.7 → 0.0.10

package/dist/src/Display.d.ts

@@ -16,6 +16,7 @@ export default class Display {
     get height(): number;
     private initializeCanvasRendering;
     startRerender(): AbstractRenderer;
+    setDraftMode(draftMode: boolean): void;
     getDryInkRenderer(): AbstractRenderer;
     getWetInkRenderer(): AbstractRenderer;
     flatten(): void;

package/dist/src/Display.js

@@ -82,6 +82,9 @@ export default class Display {
         this.dryInkRenderer.clear();
         return this.dryInkRenderer;
     }
+    setDraftMode(draftMode) {
+        this.dryInkRenderer.setDraftMode(draftMode);
+    }
     getDryInkRenderer() {
         return this.dryInkRenderer;
     }

package/dist/src/Editor.js

@@ -175,6 +175,7 @@ export class Editor {
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.KeyPressEvent,
                 key: evt.key,
+                ctrlKey: evt.ctrlKey,
             })) {
                 evt.preventDefault();
             }
@@ -233,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++) {
@@ -252,6 +254,7 @@ export class Editor {
                     });
                 }
             }
+            this.display.setDraftMode(false);
             this.hideLoadingWarning();
         });
     }
@@ -331,7 +334,6 @@ export class Editor {
         result.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.w} ${rect.h}`);
         result.setAttribute('width', `${rect.w}`);
         result.setAttribute('height', `${rect.h}`);
-        console.log('res', result);
         // Ensure the image can be identified as an SVG if downloaded.
         // See https://jwatt.org/svg/authoring/
         result.setAttribute('version', '1.1');

package/dist/src/UndoRedoHistory.d.ts

@@ -13,5 +13,7 @@ declare class UndoRedoHistory {
     push(command: Command, apply?: boolean): void;
     undo(): void;
     redo(): void;
+    get undoStackSize(): number;
+    get redoStackSize(): number;
 }
 export default UndoRedoHistory;

package/dist/src/UndoRedoHistory.js

@@ -42,5 +42,11 @@ class UndoRedoHistory {
         }
         this.fireUpdateEvent();
     }
+    get undoStackSize() {
+        return this.undoStack.length;
+    }
+    get redoStackSize() {
+        return this.redoStack.length;
+    }
 }
 export default UndoRedoHistory;

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

@@ -26,6 +26,7 @@ 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;
+    setDraftMode(_draftMode: boolean): void;
     private objectLevel;
     private currentPaths;
     private flushPath;

package/dist/src/rendering/AbstractRenderer.js

@@ -11,6 +11,7 @@ export default class AbstractRenderer {
         this.objectLevel = 0;
         this.currentPaths = null;
     }
+    setDraftMode(_draftMode) { }
     flushPath() {
         if (!this.currentPaths) {
             return;

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

@@ -7,7 +7,11 @@ export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
     private ignoreObjectsAboveLevel;
     private ignoringObject;
+    private minSquareCurveApproxDist;
+    private minRenderSizeAnyDimen;
+    private minRenderSizeBothDimens;
     constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
+    setDraftMode(draftMode: boolean): void;
     displaySize(): Vec2;
     clear(): void;
     protected beginPath(startPoint: Point2): void;

package/dist/src/rendering/CanvasRenderer.js

@@ -1,13 +1,26 @@
 import Color4 from '../Color4';
 import { Vec2 } from '../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
-const minSquareCurveApproxDist = 25;
 export default class CanvasRenderer extends AbstractRenderer {
     constructor(ctx, viewport) {
         super(viewport);
         this.ctx = ctx;
         this.ignoreObjectsAboveLevel = null;
         this.ignoringObject = false;
+        this.setDraftMode(false);
+    }
+    // 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);
@@ -45,8 +58,8 @@ export default class CanvasRenderer extends AbstractRenderer {
         // Approximate the curve if small enough.
         const delta1 = p2.minus(p1);
         const delta2 = p3.minus(p2);
-        if (delta1.magnitudeSquared() < minSquareCurveApproxDist
-            && delta2.magnitudeSquared() < minSquareCurveApproxDist) {
+        if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist
+            && delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
             this.ctx.lineTo(p3.x, p3.y);
         }
         else {
@@ -58,7 +71,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         endPoint = this.viewport.canvasToScreen(endPoint);
         // Approximate the curve with a line if small enough
         const delta = controlPoint.minus(endPoint);
-        if (delta.magnitudeSquared() < minSquareCurveApproxDist) {
+        if (delta.magnitudeSquared() < this.minSquareCurveApproxDist) {
             this.ctx.lineTo(endPoint.x, endPoint.y);
         }
         else {
@@ -74,8 +87,11 @@ export default class CanvasRenderer extends AbstractRenderer {
     startObject(boundingBox) {
         // Should we ignore all objects within this object's bbox?
         const diagonal = this.viewport.canvasToScreenTransform.transformVec3(boundingBox.size);
-        const minRenderSize = 4;
-        if (Math.abs(diagonal.x) < minRenderSize && Math.abs(diagonal.y) < minRenderSize) {
+        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) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();
             this.ignoringObject = true;
         }

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 '../Display';
+import Editor from '../Editor';
+export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });

package/dist/src/toolbar/HTMLToolbar.js

@@ -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.d.ts

@@ -6,10 +6,10 @@ export default abstract class BaseTool implements PointerEvtListener {
     readonly description: string;
     private enabled;
     private group;
-    abstract onPointerDown(event: PointerEvt): boolean;
-    abstract onPointerMove(event: PointerEvt): void;
-    abstract onPointerUp(event: PointerEvt): void;
-    abstract onGestureCancel(): void;
+    onPointerDown(_event: PointerEvt): boolean;
+    onPointerMove(_event: PointerEvt): void;
+    onPointerUp(_event: PointerEvt): void;
+    onGestureCancel(): void;
     abstract readonly kind: ToolType;
     protected constructor(notifier: EditorNotifier, description: string);
     onWheel(_event: WheelEvt): boolean;

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

package/dist/src/tools/SelectionTool.d.ts

@@ -1,3 +1,4 @@
+import Command from '../commands/Command';
 import Editor from '../Editor';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
@@ -30,6 +31,7 @@ declare class Selection {
     private recomputeBoxRotation;
     getSelectedItemCount(): number;
     updateUI(): void;
+    deleteSelectedObjects(): Command;
 }
 export default class SelectionTool extends BaseTool {
     private editor;
@@ -45,5 +47,6 @@ export default class SelectionTool extends BaseTool {
     onGestureCancel(): void;
     setEnabled(enabled: boolean): void;
     getSelection(): Selection | null;
+    clearSelection(): void;
 }
 export {};

package/dist/src/tools/SelectionTool.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import Erase from '../commands/Erase';
 import Mat33 from '../geometry/Mat33';
 // import Mat33 from "../geometry/Mat33";
 import Rect2 from '../geometry/Rect2';
@@ -344,6 +345,9 @@ class Selection {
         this.backgroundBox.style.transform = `rotate(${rotationDeg}deg)`;
         this.rotateCircle.style.transform = `rotate(${-rotationDeg}deg)`;
     }
+    deleteSelectedObjects() {
+        return new Erase(this.selectedElems);
+    }
 }
 export default class SelectionTool extends BaseTool {
     constructor(editor, description) {
@@ -434,4 +438,13 @@ export default class SelectionTool extends BaseTool {
     getSelection() {
         return this.selectionBox;
     }
+    clearSelection() {
+        this.handleOverlay.replaceChildren();
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = null;
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
 }

package/dist/src/tools/ToolController.d.ts

@@ -7,7 +7,8 @@ export declare enum ToolType {
     Pen = 1,
     Selection = 2,
     Eraser = 3,
-    PanZoom = 4
+    PanZoom = 4,
+    UndoRedoShortcut = 5
 }
 export default class ToolController {
     private tools;

package/dist/src/tools/ToolController.js

@@ -5,6 +5,7 @@ import ToolEnabledGroup from './ToolEnabledGroup';
 import Eraser from './Eraser';
 import SelectionTool from './SelectionTool';
 import Color4 from '../Color4';
+import UndoRedoShortcut from './UndoRedoShortcut';
 export var ToolType;
 (function (ToolType) {
     ToolType[ToolType["TouchPanZoom"] = 0] = "TouchPanZoom";
@@ -12,6 +13,7 @@ export var ToolType;
     ToolType[ToolType["Selection"] = 2] = "Selection";
     ToolType[ToolType["Eraser"] = 3] = "Eraser";
     ToolType[ToolType["PanZoom"] = 4] = "PanZoom";
+    ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
 })(ToolType || (ToolType = {}));
 export default class ToolController {
     constructor(editor, localization) {
@@ -31,6 +33,7 @@ export default class ToolController {
             touchPanZoom,
             ...primaryTools,
             new PanZoom(editor, PanZoomMode.TwoFingerGestures | PanZoomMode.AnyDevice, localization.twoFingerPanZoomTool),
+            new UndoRedoShortcut(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
         touchPanZoom.setEnabled(false);

package/dist/src/tools/UndoRedoShortcut.d.ts

@@ -0,0 +1,10 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+export default class UndoRedoShortcut extends BaseTool {
+    private editor;
+    kind: ToolType.UndoRedoShortcut;
+    constructor(editor: Editor);
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+}

package/dist/src/tools/UndoRedoShortcut.js

@@ -0,0 +1,23 @@
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+export default class UndoRedoShortcut extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.undoRedoTool);
+        this.editor = editor;
+        this.kind = ToolType.UndoRedoShortcut;
+    }
+    // Activate undo/redo
+    onKeyPress({ key, ctrlKey }) {
+        if (ctrlKey) {
+            if (key === 'z') {
+                this.editor.history.undo();
+                return true;
+            }
+            else if (key === 'Z') {
+                this.editor.history.redo();
+                return true;
+            }
+        }
+        return false;
+    }
+}

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

@@ -4,6 +4,7 @@ export interface ToolLocalization {
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
+    undoRedoTool: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/tools/localization.js

@@ -4,6 +4,7 @@ export const defaultToolLocalization = {
     eraserTool: 'Eraser',
     touchPanTool: 'Touch Panning',
     twoFingerPanZoomTool: 'Panning and Zooming',
+    undoRedoTool: 'Undo/Redo',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/dist/src/types.d.ts

@@ -29,6 +29,7 @@ export interface WheelEvt {
 export interface KeyPressEvent {
     readonly kind: InputEvtType.KeyPressEvent;
     readonly key: string;
+    readonly ctrlKey: boolean;
 }
 export interface GestureCancelEvt {
     readonly kind: InputEvtType.GestureCancelEvt;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "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",
@@ -48,7 +48,7 @@
     "linter-precommit": "eslint --fix --ext .js --ext .ts",
     "lint-staged": "lint-staged",
     "_postinstall": "husky install",
-    "prepack": "pinst --disable",
+    "prepack": "yarn build && pinst --disable",
     "postpack": "pinst --enable"
   },
   "dependencies": {

package/src/Display.ts

@@ -105,6 +105,10 @@ export default class Display {
 		return this.dryInkRenderer;
 	}
 
+	public setDraftMode(draftMode: boolean) {
+		this.dryInkRenderer.setDraftMode(draftMode);
+	}
+
 	public getDryInkRenderer(): AbstractRenderer {
 		return this.dryInkRenderer;
 	}

package/src/Editor.ts

@@ -238,6 +238,7 @@ export class Editor {
 			if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.KeyPressEvent,
 				key: evt.key,
+				ctrlKey: evt.ctrlKey,
 			})) {
 				evt.preventDefault();
 			}
@@ -310,6 +311,7 @@ export class Editor {
 	private async asyncApplyOrUnapplyCommands(
 		commands: Command[], apply: boolean, updateChunkSize: number
 	) {
+		this.display.setDraftMode(true);
 		for (let i = 0; i < commands.length; i += updateChunkSize) {
 			this.showLoadingWarning(i / commands.length);
 
@@ -331,6 +333,7 @@ export class Editor {
 				});
 			}
 		}
+		this.display.setDraftMode(false);
 		this.hideLoadingWarning();
 	}
 
@@ -447,7 +450,6 @@ export class Editor {
 		result.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.w} ${rect.h}`);
 		result.setAttribute('width', `${rect.w}`);
 		result.setAttribute('height', `${rect.h}`);
-		console.log('res', result);
 
 		// Ensure the image can be identified as an SVG if downloaded.
 		// See https://jwatt.org/svg/authoring/

package/src/EditorImage.test.ts

@@ -5,12 +5,9 @@ import Stroke from './components/Stroke';
 import { Vec2 } from './geometry/Vec2';
 import Path, { PathCommandType } from './geometry/Path';
 import Color4 from './Color4';
-import Editor from './Editor';
-import { RenderingMode } from './Display';
 import DummyRenderer from './rendering/DummyRenderer';
 import { RenderingStyle } from './rendering/AbstractRenderer';
-
-const createEditor = () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+import createEditor from './testing/createEditor';
 
 describe('EditorImage', () => {
 	const testStroke = new Stroke([

package/src/UndoRedoHistory.ts

@@ -56,6 +56,14 @@ class UndoRedoHistory {
 		}
 		this.fireUpdateEvent();
 	}
+
+	public get undoStackSize(): number {
+		return this.undoStack.length;
+	}
+
+	public get redoStackSize(): number {
+		return this.redoStack.length;
+	}
 }
 
 export default UndoRedoHistory;

package/src/rendering/AbstractRenderer.ts

@@ -43,6 +43,8 @@ export default abstract class AbstractRenderer {
 		controlPoint: Point2, endPoint: Point2,
 	): void;
 
+	public setDraftMode(_draftMode: boolean) { }
+
 	private objectLevel: number = 0;
 	private currentPaths: RenderablePathSpec[]|null = null;
 	private flushPath() {

package/src/rendering/CanvasRenderer.ts

@@ -5,13 +5,37 @@ import Vec3 from '../geometry/Vec3';
 import Viewport from '../Viewport';
 import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from './AbstractRenderer';
 
-const minSquareCurveApproxDist = 25;
 export default class CanvasRenderer extends AbstractRenderer {
 	private ignoreObjectsAboveLevel: number|null = null;
 	private ignoringObject: boolean = false;
 
+	// Minimum square distance of a control point from the line between the end points
+	// for the curve not to be drawn as a line.
+	// For example, if [minSquareCurveApproxDist] = 25 = 5², then a control point on a quadratic
+	// bezier curve needs to be at least 5 units away from the line between the curve's end points
+	// for the curve to be drawn as a Bezier curve (and not a line).
+	private minSquareCurveApproxDist: number;
+
+	// Minimum size of an object (in pixels) for it to be rendered.
+	private minRenderSizeAnyDimen: number;
+	private minRenderSizeBothDimens: number;
+
 	public constructor(private ctx: CanvasRenderingContext2D, viewport: Viewport) {
 		super(viewport);
+		this.setDraftMode(false);
+	}
+
+	// Set parameters for lower/higher quality rendering
+	public setDraftMode(draftMode: boolean) {
+		if (draftMode) {
+			this.minSquareCurveApproxDist = 64;
+			this.minRenderSizeBothDimens = 8;
+			this.minRenderSizeAnyDimen = 2;
+		} else {
+			this.minSquareCurveApproxDist = 1;
+			this.minRenderSizeBothDimens = 1;
+			this.minRenderSizeAnyDimen = 0;
+		}
 	}
 
 	public displaySize(): Vec2 {
@@ -63,8 +87,8 @@ export default class CanvasRenderer extends AbstractRenderer {
 		// Approximate the curve if small enough.
 		const delta1 = p2.minus(p1);
 		const delta2 = p3.minus(p2);
-		if (delta1.magnitudeSquared() < minSquareCurveApproxDist
-			&& delta2.magnitudeSquared() < minSquareCurveApproxDist) {
+		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);
@@ -77,7 +101,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 
 		// Approximate the curve with a line if small enough
 		const delta = controlPoint.minus(endPoint);
-		if (delta.magnitudeSquared() < minSquareCurveApproxDist) {
+		if (delta.magnitudeSquared() < this.minSquareCurveApproxDist) {
 			this.ctx.lineTo(endPoint.x, endPoint.y);
 		} else {
 			this.ctx.quadraticCurveTo(
@@ -97,8 +121,13 @@ export default class CanvasRenderer extends AbstractRenderer {
 	public startObject(boundingBox: Rect2) {
 		// Should we ignore all objects within this object's bbox?
 		const diagonal = this.viewport.canvasToScreenTransform.transformVec3(boundingBox.size);
-		const minRenderSize = 4;
-		if (Math.abs(diagonal.x) < minRenderSize && Math.abs(diagonal.y) < minRenderSize) {
+
+		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) {
 			this.ignoreObjectsAboveLevel = this.getNestingLevel();
 			this.ignoringObject = true;
 		}

package/src/testing/createEditor.ts

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

package/src/toolbar/HTMLToolbar.ts

@@ -245,15 +245,24 @@ class SelectionWidget extends ToolbarWidget {
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		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) {
@@ -263,11 +272,13 @@ class SelectionWidget extends ToolbarWidget {
 			if (toolEvt.tool === this.tool) {
 				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;
 	}