js-draw 0.2.2 → 0.3.0

package/dist/src/tools/Pen.js

@@ -3,7 +3,6 @@ import { PointerDevice } from '../Pointer';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 export default class Pen extends BaseTool {
     constructor(editor, description, style) {
         super(editor.notifier, description);
@@ -12,12 +11,12 @@ export default class Pen extends BaseTool {
         this.builder = null;
         this.builderFactory = makeFreehandLineBuilder;
         this.lastPoint = null;
-        this.kind = ToolType.Pen;
     }
     getPressureMultiplier() {
         return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
     }
-    getStrokePoint(pointer) {
+    // Converts a `pointer` to a `StrokeDataPoint`.
+    toStrokePoint(pointer) {
         var _a;
         const minPressure = 0.3;
         let pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 1.0, minPressure);
@@ -35,11 +34,13 @@ export default class Pen extends BaseTool {
             time: pointer.timeStamp,
         };
     }
+    // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
     previewStroke() {
         var _a;
         this.editor.clearWetInk();
         (_a = this.builder) === null || _a === void 0 ? void 0 : _a.preview(this.editor.display.getWetInkRenderer());
     }
+    // Throws if no stroke builder exists.
     addPointToStroke(point) {
         if (!this.builder) {
             throw new Error('No stroke is currently being generated.');
@@ -49,17 +50,22 @@ export default class Pen extends BaseTool {
         this.previewStroke();
     }
     onPointerDown({ current, allPointers }) {
-        if (current.device === PointerDevice.Eraser) {
-            return false;
+        const isEraser = current.device === PointerDevice.Eraser;
+        let anyDeviceIsStylus = false;
+        for (const pointer of allPointers) {
+            if (pointer.device === PointerDevice.Pen) {
+                anyDeviceIsStylus = true;
+                break;
+            }
         }
-        if (allPointers.length === 1 || current.device === PointerDevice.Pen) {
-            this.builder = this.builderFactory(this.getStrokePoint(current), this.editor.viewport);
+        if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
+            this.builder = this.builderFactory(this.toStrokePoint(current), this.editor.viewport);
             return true;
         }
         return false;
     }
     onPointerMove({ current }) {
-        this.addPointToStroke(this.getStrokePoint(current));
+        this.addPointToStroke(this.toStrokePoint(current));
     }
     onPointerUp({ current }) {
         var _a, _b;
@@ -67,7 +73,7 @@ export default class Pen extends BaseTool {
             return;
         }
         // onPointerUp events can have zero pressure. Use the last pressure instead.
-        const currentPoint = this.getStrokePoint(current);
+        const currentPoint = this.toStrokePoint(current);
         const strokePoint = Object.assign(Object.assign({}, currentPoint), { width: (_b = (_a = this.lastPoint) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : currentPoint.width });
         this.addPointToStroke(strokePoint);
         if (this.builder && current.isPrimary) {

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

@@ -2,11 +2,9 @@ import Color4 from '../Color4';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 declare type ColorListener = (color: Color4 | null) => void;
 export default class PipetteTool extends BaseTool {
     private editor;
-    kind: ToolType;
     private colorPreviewListener;
     private colorSelectListener;
     constructor(editor: Editor, description: string);

package/dist/src/tools/PipetteTool.js

@@ -1,11 +1,9 @@
 // @internal @packageDocumentation
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 export default class PipetteTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
-        this.kind = ToolType.Pipette;
         this.colorPreviewListener = null;
         this.colorSelectListener = null;
     }

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

@@ -5,7 +5,6 @@ import Rect2 from '../math/Rect2';
 import { Point2, Vec2 } from '../math/Vec2';
 import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 declare class Selection {
     startPoint: Point2;
     private editor;
@@ -43,7 +42,6 @@ export default class SelectionTool extends BaseTool {
     private handleOverlay;
     private prevSelectionBox;
     private selectionBox;
-    readonly kind: ToolType;
     constructor(editor: Editor, description: string);
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;

package/dist/src/tools/SelectionTool.js

@@ -1,3 +1,6 @@
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+// @packageDocumentation
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -11,13 +14,11 @@ var _a;
 import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
 import Mat33 from '../math/Mat33';
-// import Mat33 from "../geometry/Mat33";
 import Rect2 from '../math/Rect2';
 import { Vec2 } from '../math/Vec2';
 import { EditorEventType } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 import SerializableCommand from '../commands/SerializableCommand';
 const handleScreenSize = 30;
 const styles = `
@@ -409,11 +410,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         return localizationTable.transformedElements(this.currentTransfmCommands.length);
     }
 };
+// {@inheritDoc SelectionTool!}
 export default class SelectionTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
-        this.kind = ToolType.Selection;
         this.handleOverlay = document.createElement('div');
         editor.createHTMLOverlay(this.handleOverlay);
         editor.addStyleSheet(styles);

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

@@ -4,11 +4,9 @@ import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
-import { ToolType } from './ToolController';
 export default class TextTool extends BaseTool {
     private editor;
     private localizationTable;
-    kind: ToolType;
     private textStyle;
     private textEditOverlay;
     private textInputElem;

package/dist/src/tools/TextTool.js

@@ -5,14 +5,12 @@ import Mat33 from '../math/Mat33';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 const overlayCssClass = 'textEditorOverlay';
 export default class TextTool extends BaseTool {
     constructor(editor, description, localizationTable) {
         super(editor.notifier, description);
         this.editor = editor;
         this.localizationTable = localizationTable;
-        this.kind = ToolType.Text;
         this.textInputElem = null;
         this.textTargetPosition = null;
         this.textMeasuringCtx = null;

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

@@ -1,21 +1,17 @@
 import { InputEvt } from '../types';
 import Editor from '../Editor';
 import BaseTool from './BaseTool';
+import ToolEnabledGroup from './ToolEnabledGroup';
 import { ToolLocalization } from './localization';
-export declare enum ToolType {
-    Pen = 0,
-    Selection = 1,
-    Eraser = 2,
-    PanZoom = 3,
-    Text = 4,
-    UndoRedoShortcut = 5,
-    Pipette = 6,
-    Other = 7
-}
 export default class ToolController {
     private tools;
     private activeTool;
+    private primaryToolGroup;
+    /** @internal */
     constructor(editor: Editor, localization: ToolLocalization);
+    setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
+    addPrimaryTool(tool: BaseTool): void;
+    addTool(tool: BaseTool): void;
     dispatchInputEvent(event: InputEvt): boolean;
-    getMatchingTools(kind: ToolType): BaseTool[];
+    getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];
 }

package/dist/src/tools/ToolController.js

@@ -8,20 +8,12 @@ import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
-export var ToolType;
-(function (ToolType) {
-    ToolType[ToolType["Pen"] = 0] = "Pen";
-    ToolType[ToolType["Selection"] = 1] = "Selection";
-    ToolType[ToolType["Eraser"] = 2] = "Eraser";
-    ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
-    ToolType[ToolType["Text"] = 4] = "Text";
-    ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
-    ToolType[ToolType["Pipette"] = 6] = "Pipette";
-    ToolType[ToolType["Other"] = 7] = "Other";
-})(ToolType || (ToolType = {}));
 export default class ToolController {
+    /** @internal */
     constructor(editor, localization) {
-        const primaryToolEnabledGroup = new ToolEnabledGroup();
+        this.activeTool = null;
+        const primaryToolGroup = new ToolEnabledGroup();
+        this.primaryToolGroup = primaryToolGroup;
         const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
         const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
         const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
@@ -30,7 +22,7 @@ export default class ToolController {
             new Eraser(editor, localization.eraserTool),
             // Three pens
             primaryPenTool,
-            new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 8 }),
+            new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
             // Highlighter-like pen with width=64
             new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
             new TextTool(editor, localization.textTool, localization),
@@ -42,7 +34,7 @@ export default class ToolController {
             keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
         ];
-        primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
+        primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);
         primaryPenTool.setEnabled(true);
         editor.notifier.on(EditorEventType.ToolEnabled, event => {
@@ -57,6 +49,26 @@ export default class ToolController {
         });
         this.activeTool = null;
     }
+    // Replaces the current set of tools with `tools`. This should only be done before
+    // the creation of the app's toolbar (if using `HTMLToolbar`).
+    setTools(tools, primaryToolGroup) {
+        this.tools = tools;
+        this.primaryToolGroup = primaryToolGroup !== null && primaryToolGroup !== void 0 ? primaryToolGroup : new ToolEnabledGroup();
+    }
+    // Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
+    // This should be called before creating the app's toolbar.
+    addPrimaryTool(tool) {
+        tool.setToolGroup(this.primaryToolGroup);
+        if (tool.isEnabled()) {
+            this.primaryToolGroup.notifyEnabled(tool);
+        }
+        this.addTool(tool);
+    }
+    // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
+    // This should be called before creating the app's toolbar.
+    addTool(tool) {
+        this.tools.push(tool);
+    }
     // Returns true if the event was handled
     dispatchInputEvent(event) {
         var _a, _b;
@@ -116,7 +128,7 @@ export default class ToolController {
         }
         return handled;
     }
-    getMatchingTools(kind) {
-        return this.tools.filter(tool => tool.kind === kind);
+    getMatchingTools(type) {
+        return this.tools.filter(tool => tool instanceof type);
     }
 }

package/dist/src/tools/ToolEnabledGroup.js

@@ -1,4 +1,4 @@
-// Connects a group of tools -- at most one tool in the group must be enabled.
+// Connects a group of tools -- at most one tool in the group can be enabled.
 export default class ToolEnabledGroup {
     constructor() { }
     notifyEnabled(tool) {

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

@@ -1,10 +1,8 @@
 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

@@ -1,10 +1,11 @@
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
+// @packageDocumentation
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
+// {@inheritDoc UndoRedoShortcut!}
 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 }) {

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

@@ -0,0 +1,12 @@
+/**
+ * @packageDocumentation
+ */
+export { default as BaseTool } from './BaseTool';
+export { default as ToolController } from './ToolController';
+export { default as ToolEnabledGroup } from './ToolEnabledGroup';
+export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as PanZoomTool, PanZoomMode } from './PanZoom';
+export { default as PenTool, PenStyle } from './Pen';
+export { default as TextTool } from './TextTool';
+export { default as SelectionTool } from './SelectionTool';
+export { default as EraserTool } from './Eraser';

package/dist/src/tools/lib.js

@@ -0,0 +1,12 @@
+/**
+ * @packageDocumentation
+ */
+export { default as BaseTool } from './BaseTool';
+export { default as ToolController } from './ToolController';
+export { default as ToolEnabledGroup } from './ToolEnabledGroup';
+export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as PanZoomTool, PanZoomMode } from './PanZoom';
+export { default as PenTool } from './Pen';
+export { default as TextTool } from './TextTool';
+export { default as SelectionTool } from './SelectionTool';
+export { default as EraserTool } from './Eraser';

package/package.json

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

package/src/EditorImage.ts

@@ -388,7 +388,6 @@ export class ImageNode {
 	}
 
 	public render(renderer: AbstractRenderer, visibleRect: Rect2) {
-		// Don't render components that are < 0.1% of the viewport.
 		const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
 		sortLeavesByZIndex(leaves);
 

package/src/components/builders/FreehandLineBuilder.ts

@@ -2,7 +2,7 @@ import { Bezier } from 'bezier-js';
 import AbstractRenderer, { RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Rect2 from '../../math/Rect2';
-import { LinePathCommand, PathCommandType, QuadraticBezierPathCommand } from '../../math/Path';
+import { LinePathCommand, PathCommand, PathCommandType, QuadraticBezierPathCommand } from '../../math/Path';
 import LineSegment2 from '../../math/LineSegment2';
 import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
@@ -13,9 +13,8 @@ import RenderingStyle from '../../rendering/RenderingStyle';
 export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
 	// Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
 	// less than ± 2 px from the curve.
-	const canvasTransform = viewport.screenToCanvasTransform;
-	const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
-	const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
+	const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
+	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 2;
 
 	return new FreehandLineBuilder(
 		initialPoint, minSmoothingDist, maxSmoothingDist
@@ -24,16 +23,16 @@ export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: S
 
 type CurrentSegmentToPathResult = {
 	upperCurve: QuadraticBezierPathCommand,
-	lowerToUpperConnector: LinePathCommand,
-	upperToLowerConnector: LinePathCommand,
+	lowerToUpperConnector: PathCommand,
+	upperToLowerConnector: PathCommand,
 	lowerCurve: QuadraticBezierPathCommand,
 };
 
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 export default class FreehandLineBuilder implements ComponentBuilder {
 	private isFirstSegment: boolean = true;
-	private pathStartConnector: LinePathCommand|null = null;
-	private mostRecentConnector: LinePathCommand|null = null;
+	private pathStartConnector: PathCommand|null = null;
+	private mostRecentConnector: PathCommand|null = null;
 
 	//    Beginning of the list of lower parts
 	//        ↓
@@ -53,7 +52,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 
 	private buffer: Point2[];
 	private lastPoint: StrokeDataPoint;
-	private lastExitingVec: Vec2;
+	private lastExitingVec: Vec2|null = null;
 	private currentCurve: Bezier|null = null;
 	private curveStartWidth: number;
 	private curveEndWidth: number;
@@ -79,6 +78,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		this.buffer = [this.startPoint.pos];
 		this.momentum = Vec2.zero;
 		this.currentCurve = null;
+		this.curveStartWidth = startPoint.width;
 
 		this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
 	}
@@ -96,8 +96,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	private previewPath(): RenderablePathSpec|null {
 		let upperPath: QuadraticBezierPathCommand[];
 		let lowerPath: QuadraticBezierPathCommand[];
-		let lowerToUpperCap: LinePathCommand;
-		let pathStartConnector: LinePathCommand;
+		let lowerToUpperCap: PathCommand;
+		let pathStartConnector: PathCommand;
 		if (this.currentCurve) {
 			const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
 			upperPath = this.upperSegments.concat(upperCurve);
@@ -180,7 +180,13 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	private roundPoint(point: Point2): Point2 {
-		return Viewport.roundPoint(point, this.minFitAllowed);
+		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 2);
+
+		if (minFit < 1e-10) {
+			minFit = this.minFitAllowed;
+		}
+
+		return Viewport.roundPoint(point, minFit);
 	}
 
 	private finalizeCurrentCurve() {
@@ -317,11 +323,14 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			);
 		};
 
-		const upperBoundary = computeBoundaryCurve(1, halfVec);
-		const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+		const boundariesIntersect = () => {
+			const upperBoundary = computeBoundaryCurve(1, halfVec);
+			const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+			return upperBoundary.intersects(lowerBoundary).length > 0;
+		};
 
 		// If the boundaries have two intersections, increasing the half vector's length could fix this.
-		if (upperBoundary.intersects(lowerBoundary).length > 0) {
+		if (boundariesIntersect()) {
 			halfVec = halfVec.times(2);
 		}
 
@@ -372,7 +381,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				return;
 			}
 			
-			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
+			const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
 			const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
 				&& this.isFirstSegment;
 			
@@ -493,7 +502,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			return true;
 		};
 
-		if (this.buffer.length > 3) {
+		const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
+		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 2) {
 			if (!curveMatchesPoints(this.currentCurve)) {
 				// Use a curve that better fits the points
 				this.currentCurve = prevCurve;

package/src/components/lib.ts

@@ -1,3 +1,6 @@
+export * from './builders/types';
+export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
+
 import AbstractComponent from './AbstractComponent';
 import Stroke from './Stroke';
 import Text from './Text';

package/src/lib.ts

@@ -14,7 +14,8 @@
  */
 
 import Editor from './Editor';
-export { EditorEventType } from './types';
+export { default as EditorImage } from './EditorImage';
+export * from './types';
 export { default as getLocalizationTable } from './localizations/getLocalizationTable';
 export * from './localization';
 
@@ -22,6 +23,9 @@ export { default as Color4 } from './Color4';
 export * from './math/lib';
 export * from './components/lib';
 export * from './commands/lib';
+export * from './tools/lib';
+export * from './toolbar/lib';
+export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
 
 export { Editor };

package/src/rendering/Display.ts

@@ -76,8 +76,8 @@ export default class Display {
 				return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
 			},
 			blockResolution: cacheBlockResolution,
-			cacheSize: 500 * 500 * 4 * 150,
-			maxScale: 1.5,
+			cacheSize: 600 * 600 * 4 * 120,
+			maxScale: 1.4,
 			minComponentsPerCache: 45,
 			minComponentsToUseCache: 105,
 		});

package/src/rendering/caching/RenderingCacheNode.ts

@@ -221,11 +221,13 @@ export default class RenderingCacheNode {
 			}
 		} else {
 			// Determine whether we already have rendered the items
+			const tooSmallToRender = (rect: Rect2) => rect.w / this.region.w < 1 / this.cacheState.props.blockResolution.x;
+
 			const leaves = [];
 			for (const item of items) {
 				leaves.push(
 					...item.getLeavesIntersectingRegion(
-						this.region, rect => rect.w / this.region.w < 2 / this.cacheState.props.blockResolution.x,
+						this.region, tooSmallToRender,
 					)
 				);
 			}

package/src/rendering/renderers/CanvasRenderer.ts

@@ -59,13 +59,13 @@ export default class CanvasRenderer extends AbstractRenderer {
 	// Set parameters for lower/higher quality rendering
 	public setDraftMode(draftMode: boolean) {
 		if (draftMode) {
-			this.minSquareCurveApproxDist = 64;
-			this.minRenderSizeBothDimens = 8;
-			this.minRenderSizeAnyDimen = 2;
+			this.minSquareCurveApproxDist = 9;
+			this.minRenderSizeBothDimens = 2;
+			this.minRenderSizeAnyDimen = 0.5;
 		} else {
-			this.minSquareCurveApproxDist = 1;
-			this.minRenderSizeBothDimens = 0.5;
-			this.minRenderSizeAnyDimen = 0;
+			this.minSquareCurveApproxDist = 0.5;
+			this.minRenderSizeBothDimens = 0.3;
+			this.minRenderSizeAnyDimen = 1e-5;
 		}
 	}