js-draw 0.0.9 → 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

@@ -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();
         });
     }

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.9",
+  "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",

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

@@ -311,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);
 
@@ -332,6 +333,7 @@ export class Editor {
 				});
 			}
 		}
+		this.display.setDraftMode(false);
 		this.hideLoadingWarning();
 	}
 

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/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;
 	}

package/src/toolbar/localization.ts

@@ -14,6 +14,7 @@ export interface ToolbarLocalization {
 	touchDrawing: string;
 	thicknessLabel: string;
 	resizeImageToSelection: string;
+	deleteSelection: string;
 	undo: string;
 	redo: string;
 
@@ -29,6 +30,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	resizeImageToSelection: 'Resize image to selection',
+	deleteSelection: 'Delete selection',
 	undo: 'Undo',
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',

package/src/tools/PanZoom.ts

@@ -78,6 +78,7 @@ export default class PanZoom extends BaseTool {
 
 		if (handlingGesture) {
 			this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
+			this.editor.display.setDraftMode(true);
 		}
 
 		return handlingGesture;
@@ -136,11 +137,13 @@ export default class PanZoom extends BaseTool {
 			this.editor.dispatch(this.transform, false);
 		}
 
+		this.editor.display.setDraftMode(false);
 		this.transform = null;
 	}
 
 	public onGestureCancel(): void {
 		this.transform?.unapply(this.editor);
+		this.editor.display.setDraftMode(false);
 		this.transform = null;
 	}
 

package/src/tools/SelectionTool.ts

@@ -1,4 +1,5 @@
 import Command from '../commands/Command';
+import Erase from '../commands/Erase';
 import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import Mat33 from '../geometry/Mat33';
@@ -421,6 +422,10 @@ class Selection {
 		this.backgroundBox.style.transform = `rotate(${rotationDeg}deg)`;
 		this.rotateCircle.style.transform = `rotate(${-rotationDeg}deg)`;
 	}
+
+	public deleteSelectedObjects(): Command {
+		return new Erase(this.selectedElems);
+	}
 }
 
 export default class SelectionTool extends BaseTool {
@@ -542,4 +547,15 @@ export default class SelectionTool extends BaseTool {
 	public getSelection(): Selection|null {
 		return this.selectionBox;
 	}
+
+	public clearSelection() {
+		this.handleOverlay.replaceChildren();
+		this.prevSelectionBox = this.selectionBox;
+		this.selectionBox = null;
+
+		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+			kind: EditorEventType.ToolUpdated,
+			tool: this,
+		});
+	}
 }