js-draw 0.10.1 → 0.10.3

package/dist/src/components/AbstractComponent.d.ts

@@ -29,6 +29,7 @@ export default abstract class AbstractComponent {
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): SerializableCommand;
     isSelectable(): boolean;
+    getProportionalRenderingTime(): number;
     private static transformElementCommandId;
     private static UnresolvedTransformElementCommand;
     private static TransformElementCommand;

package/dist/src/components/AbstractComponent.js

@@ -52,6 +52,12 @@ export default class AbstractComponent {
     isSelectable() {
         return true;
     }
+    // @returns an approximation of the proportional time it takes to render this component.
+    // This is intended to be a rough estimate, but, for example, a stroke with two points sould have
+    // a renderingWeight approximately twice that of a stroke with one point.
+    getProportionalRenderingTime() {
+        return 1;
+    }
     // Returns a copy of this component.
     clone() {
         const clone = this.createClone();

package/dist/src/components/ImageComponent.d.ts

@@ -12,6 +12,7 @@ export default class ImageComponent extends AbstractComponent {
     private recomputeBBox;
     static fromImage(elem: HTMLImageElement, transform: Mat33): Promise<ImageComponent>;
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
     intersects(lineSegment: LineSegment2): boolean;
     protected serializeToJSON(): {
         src: string;

package/dist/src/components/ImageComponent.js

@@ -80,6 +80,10 @@ export default class ImageComponent extends AbstractComponent {
     render(canvas, _visibleRect) {
         canvas.drawImage(this.image);
     }
+    getProportionalRenderingTime() {
+        // Estimate: Equivalent to a stroke with 10 segments.
+        return 10;
+    }
     intersects(lineSegment) {
         const rect = this.getImageRect();
         const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));

package/dist/src/components/Stroke.d.ts

@@ -8,9 +8,11 @@ import { ImageComponentLocalization } from './localization';
 export default class Stroke extends AbstractComponent {
     private parts;
     protected contentBBox: Rect2;
+    private approximateRenderingTime;
     constructor(parts: RenderablePathSpec[]);
     intersects(line: LineSegment2): boolean;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
     private bboxForPart;
     protected applyTransformation(affineTransfm: Mat33): void;
     getPath(): Path;

package/dist/src/components/Stroke.js

@@ -7,6 +7,7 @@ export default class Stroke extends AbstractComponent {
     constructor(parts) {
         var _a;
         super('stroke');
+        this.approximateRenderingTime = 0;
         this.parts = [];
         for (const section of parts) {
             const path = Path.fromRenderable(section);
@@ -24,6 +25,7 @@ export default class Stroke extends AbstractComponent {
                 style: section.style,
                 commands: path.parts,
             });
+            this.approximateRenderingTime += path.parts.length;
         }
         (_a = this.contentBBox) !== null && _a !== void 0 ? _a : (this.contentBBox = Rect2.empty);
     }
@@ -53,6 +55,9 @@ export default class Stroke extends AbstractComponent {
         }
         canvas.endObject(this.getLoadSaveData());
     }
+    getProportionalRenderingTime() {
+        return this.approximateRenderingTime;
+    }
     // Grows the bounding box for a given stroke part based on that part's style.
     bboxForPart(origBBox, style) {
         if (!style.stroke) {

package/dist/src/components/TextComponent.d.ts

@@ -26,6 +26,7 @@ export default class TextComponent extends AbstractComponent {
     private recomputeBBox;
     private renderInternal;
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
     intersects(lineSegment: LineSegment2): boolean;
     getBaselinePos(): import("../lib").Vec3;
     getTextStyle(): TextStyle;

package/dist/src/components/TextComponent.js

@@ -91,6 +91,9 @@ export default class TextComponent extends AbstractComponent {
         this.renderInternal(canvas);
         canvas.endObject(this.getLoadSaveData());
     }
+    getProportionalRenderingTime() {
+        return this.textObjects.length;
+    }
     intersects(lineSegment) {
         // Convert canvas space to internal space.
         const invTransform = this.transform.inverse();

package/dist/src/components/util/StrokeSmoother.js

@@ -60,6 +60,7 @@ export class StrokeSmoother {
             this.buffer[this.buffer.length - 2], lastPoint,
         ];
         this.currentCurve = null;
+        this.isFirstSegment = false;
     }
     // Returns [upper curve, connector, lower curve]
     currentSegmentToPath() {
@@ -116,20 +117,23 @@ export class StrokeSmoother {
         const pointRadius = newPoint.width;
         const prevEndWidth = this.curveEndWidth;
         this.curveEndWidth = pointRadius;
-        if (this.isFirstSegment) {
-            // The start of a curve often lacks accurate pressure information. Update it.
-            this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
-        }
         // recompute bbox
         this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
+        // If the last curve just ended or it's the first curve,
         if (this.currentCurve === null) {
             const p1 = lastPoint.pos;
             const p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2.unitX);
             const p3 = newPoint.pos;
             // Quadratic Bézier curve
             this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
-            this.curveStartWidth = lastPoint.width;
             console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
+            if (this.isFirstSegment) {
+                // The start of a curve often lacks accurate pressure information. Update it.
+                this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+            }
+            else {
+                this.curveStartWidth = prevEndWidth;
+            }
         }
         // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
         let enteringVec = this.lastExitingVec;

package/dist/src/math/Mat33.d.ts

@@ -69,6 +69,8 @@ export default class Mat33 {
      * This is the standard way of transforming vectors in ℝ³.
      */
     transformVec3(other: Vec3): Vec3;
+    /** @returns true iff this is the identity matrix. */
+    isIdentity(): boolean;
     /** Returns true iff this = other ± fuzz */
     eq(other: Mat33, fuzz?: number): boolean;
     toString(): string;

package/dist/src/math/Mat33.js

@@ -153,6 +153,13 @@ export default class Mat33 {
     transformVec3(other) {
         return Vec3.of(this.rows[0].dot(other), this.rows[1].dot(other), this.rows[2].dot(other));
     }
+    /** @returns true iff this is the identity matrix. */
+    isIdentity() {
+        if (this === Mat33.identity) {
+            return true;
+        }
+        return this.eq(Mat33.identity);
+    }
     /** Returns true iff this = other ± fuzz */
     eq(other, fuzz = 0) {
         for (let i = 0; i < 3; i++) {

package/dist/src/math/Path.js

@@ -179,6 +179,9 @@ export default class Path {
         return new Path(startPoint, newParts);
     }
     transformedBy(affineTransfm) {
+        if (affineTransfm.isIdentity()) {
+            return this;
+        }
         return this.mapPoints(point => affineTransfm.transformVec2(point));
     }
     // Creates a new path by joining [other] to the end of this path

package/dist/src/rendering/Display.js

@@ -73,8 +73,11 @@ export default class Display {
             blockResolution: cacheBlockResolution,
             cacheSize: 600 * 600 * 4 * 90,
             maxScale: 1.4,
-            minComponentsPerCache: 20,
-            minComponentsToUseCache: 105,
+            // Require about 20 strokes with 4 parts each to cache an image in one of the
+            // parts of the cache grid.
+            minProportionalRenderTimePerCache: 20 * 4,
+            // Require about 105 strokes with 4 parts each to use the cache at all.
+            minProportionalRenderTimeToUseCache: 105 * 4,
         });
         this.editor.notifier.on(EditorEventType.DisplayResized, event => {
             var _a;

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

@@ -31,7 +31,11 @@ export default class RenderingCache {
         }
         this.rootNode = (_a = this.rootNode.smallestChildContaining(visibleRect)) !== null && _a !== void 0 ? _a : this.rootNode;
         const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
-        if (visibleLeaves.length > this.sharedState.props.minComponentsToUseCache) {
+        let approxVisibleRenderTime = 0;
+        for (const leaf of visibleLeaves) {
+            approxVisibleRenderTime += leaf.getContent().getProportionalRenderingTime();
+        }
+        if (approxVisibleRenderTime > this.sharedState.props.minProportionalRenderTimeToUseCache) {
             this.rootNode.renderItems(screenRenderer, [image], viewport);
         }
         else {

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

@@ -197,9 +197,12 @@ export default class RenderingCacheNode {
                     }
                     return;
                 }
+                let leafApproxRenderTime = 0;
+                for (const leaf of leavesByIds) {
+                    leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                }
                 // Is it worth it to render the items?
-                // TODO: Consider replacing this with something performace based.
-                if (leavesByIds.length > this.cacheState.props.minComponentsPerCache) {
+                if (leafApproxRenderTime > this.cacheState.props.minProportionalRenderTimePerCache) {
                     let fullRerenderNeeded = true;
                     if (!this.cachedRenderer) {
                         this.cachedRenderer = this.cacheState.recordManager.allocCanvas(this.region, () => this.onRegionDealloc());

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

@@ -12,7 +12,7 @@ export const createCache = (onRenderAlloc, cacheOptions) => {
         },
         isOfCorrectType(renderer) {
             return renderer instanceof DummyRenderer;
-        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minComponentsPerCache: 0, minComponentsToUseCache: 0 }, cacheOptions));
+        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minProportionalRenderTimePerCache: 0, minProportionalRenderTimeToUseCache: 0 }, cacheOptions));
     return {
         cache,
         editor

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

@@ -9,8 +9,8 @@ export interface CacheProps {
     blockResolution: Vec2;
     cacheSize: number;
     maxScale: number;
-    minComponentsPerCache: number;
-    minComponentsToUseCache: number;
+    minProportionalRenderTimePerCache: number;
+    minProportionalRenderTimeToUseCache: number;
 }
 export interface CacheState {
     currentRenderingCycle: number;

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

@@ -25,6 +25,7 @@ export default class IconProvider {
     makePipetteIcon(color?: Color4): IconType;
     makeResizeViewportIcon(): IconType;
     makeDuplicateSelectionIcon(): IconType;
+    makePasteIcon(): IconType;
     makeDeleteSelectionIcon(): IconType;
     makeSaveIcon(): IconType;
 }

package/dist/src/toolbar/IconProvider.js

@@ -433,6 +433,18 @@ export default class IconProvider {
 			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
 		`);
     }
+    makePasteIcon() {
+        const icon = this.makeIconFromPath(`
+			M 50 0 L 50 5 L 35 5 L 40 24.75 L 20 25 L 20 100 L 85 100 L 100 90 L 100 24 L 75.1 24.3 L 80 5 L 65 5 L 65 0 L 50 0 z
+			M 10 15 L 10 115 L 110 115 L 110 15 L 85 15 L 83 20 L 105 20 L 105 110 L 15 110 L 15 20 L 32 20 L 30 15 L 10 15 z
+			M 25 35 L 90 35 L 90 40 L 25 40 L 25 35 z
+			M 25 45 L 90 45 L 90 50 L 25 50 L 25 45 z
+			M 25 55 L 85 55 L 85 60 L 25 60 L 25 55 z
+			M 25 65 L 90 65 L 90 70 L 25 70 L 25 65 z 
+		`);
+        icon.setAttribute('viewBox', '0 0 120 120');
+        return icon;
+    }
     makeDeleteSelectionIcon() {
         const strokeWidth = '5px';
         const strokeColor = 'var(--icon-color)';

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

@@ -26,6 +26,7 @@ export interface ToolbarLocalization {
     zoom: string;
     resetView: string;
     selectionToolKeyboardShortcuts: string;
+    paste: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
     zoomLevel: (zoomPercentage: number) => string;

package/dist/src/toolbar/localization.js

@@ -26,6 +26,7 @@ export const defaultToolbarLocalization = {
     outlinedRectanglePen: 'Outlined rectangle',
     filledRectanglePen: 'Filled rectangle',
     lockRotation: 'Lock rotation',
+    paste: 'Paste',
     dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
     dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
     zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,

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

@@ -25,12 +25,13 @@ export default class PanZoom extends BaseTool {
     private lastDist;
     private lastScreenCenter;
     private lastTimestamp;
+    private lastPointerDownTimestamp;
     private inertialScroller;
     private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
     computePinchData(p1: Pointer, p2: Pointer): PinchData;
     private allPointersAreOfType;
-    onPointerDown({ allPointers: pointers }: PointerEvt): boolean;
+    onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean;
     private updateVelocity;
     private getCenterDelta;
     private handleTwoFingerMove;

package/dist/src/tools/PanZoom.js

@@ -37,19 +37,19 @@ class InertialScroller {
             if (this.running) {
                 return;
             }
-            let currentVelocity = this.initialVelocity;
+            this.currentVelocity = this.initialVelocity;
             let lastTime = (new Date()).getTime();
             this.running = true;
-            const maxSpeed = 8000; // units/s
+            const maxSpeed = 5000; // units/s
             const minSpeed = 200; // units/s
-            if (currentVelocity.magnitude() > maxSpeed) {
-                currentVelocity = currentVelocity.normalized().times(maxSpeed);
+            if (this.currentVelocity.magnitude() > maxSpeed) {
+                this.currentVelocity = this.currentVelocity.normalized().times(maxSpeed);
             }
-            while (this.running && currentVelocity.magnitude() > minSpeed) {
+            while (this.running && this.currentVelocity.magnitude() > minSpeed) {
                 const nowTime = (new Date()).getTime();
                 const dt = (nowTime - lastTime) / 1000;
-                currentVelocity = currentVelocity.times(Math.pow(1 / 8, dt));
-                this.scrollBy(currentVelocity.times(dt));
+                this.currentVelocity = this.currentVelocity.times(Math.pow(1 / 8, dt));
+                this.scrollBy(this.currentVelocity.times(dt));
                 yield untilNextAnimationFrame();
                 lastTime = nowTime;
             }
@@ -58,6 +58,12 @@ class InertialScroller {
             }
         });
     }
+    getCurrentVelocity() {
+        if (!this.running) {
+            return null;
+        }
+        return this.currentVelocity;
+    }
     stop() {
         if (this.running) {
             this.running = false;
@@ -71,6 +77,7 @@ export default class PanZoom extends BaseTool {
         this.editor = editor;
         this.mode = mode;
         this.transform = null;
+        this.lastPointerDownTimestamp = 0;
         this.inertialScroller = null;
         this.velocity = null;
     }
@@ -86,10 +93,13 @@ export default class PanZoom extends BaseTool {
     allPointersAreOfType(pointers, kind) {
         return pointers.every(pointer => pointer.device === kind);
     }
-    onPointerDown({ allPointers: pointers }) {
-        var _a, _b;
+    onPointerDown({ allPointers: pointers, current: currentPointer }) {
+        var _a, _b, _c, _d;
         let handlingGesture = false;
-        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+        const inertialScrollerVelocity = (_b = (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.getCurrentVelocity()) !== null && _b !== void 0 ? _b : Vec2.zero;
+        (_c = this.inertialScroller) === null || _c === void 0 ? void 0 : _c.stop();
+        this.velocity = inertialScrollerVelocity;
+        this.lastPointerDownTimestamp = currentPointer.timeStamp;
         const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
         const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
         if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
@@ -107,22 +117,24 @@ export default class PanZoom extends BaseTool {
         }
         if (handlingGesture) {
             this.lastTimestamp = (new Date()).getTime();
-            (_b = this.transform) !== null && _b !== void 0 ? _b : (this.transform = Viewport.transformBy(Mat33.identity));
+            (_d = this.transform) !== null && _d !== void 0 ? _d : (this.transform = Viewport.transformBy(Mat33.identity));
             this.editor.display.setDraftMode(true);
         }
         return handlingGesture;
     }
     updateVelocity(currentCenter) {
         const deltaPos = currentCenter.minus(this.lastScreenCenter);
-        const deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
-        // We divide by deltaTime. Don't divide by zero.
-        if (deltaTime === 0) {
-            return;
-        }
+        let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
         // Ignore duplicate events, unless there has been enough time between them.
         if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
             return;
         }
+        // We divide by deltaTime. Don't divide by zero.
+        if (deltaTime === 0) {
+            return;
+        }
+        // Don't divide by almost zero, either
+        deltaTime = Math.max(deltaTime, 0.01);
         const currentVelocity = deltaPos.times(1 / deltaTime);
         let smoothedVelocity = currentVelocity;
         if (this.velocity) {
@@ -184,7 +196,11 @@ export default class PanZoom extends BaseTool {
             this.transform = null;
             this.velocity = Vec2.zero;
         };
-        const shouldInertialScroll = event.current.device === PointerDevice.Touch && event.allPointers.length === 1;
+        const minInertialScrollDt = 30;
+        const shouldInertialScroll = event.current.device === PointerDevice.Touch
+            && event.allPointers.length === 1
+            && this.velocity !== null
+            && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
         if (shouldInertialScroll && this.velocity !== null) {
             // If the user drags the screen, then stops, then lifts the pointer,
             // we want the final velocity to reflect the stop at the end (so the velocity

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.10.1",
+	"version": "0.10.3",
 	"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",
@@ -83,26 +83,26 @@
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.2.3",
+		"@types/jest": "^29.2.5",
 		"@types/jsdom": "^20.0.1",
-		"@types/node": "^18.11.9",
+		"@types/node": "^18.11.18",
 		"@typescript-eslint/eslint-plugin": "^5.44.0",
 		"@typescript-eslint/parser": "^5.44.0",
-		"css-loader": "^6.7.2",
-		"eslint": "^8.28.0",
-		"husky": "^8.0.2",
-		"jest": "^29.2.3",
+		"css-loader": "^6.7.3",
+		"eslint": "^8.31.0",
+		"husky": "^8.0.3",
+		"jest": "^29.3.1",
 		"jest-environment-jsdom": "^29.3.1",
 		"jsdom": "^20.0.3",
-		"lint-staged": "^13.0.3",
+		"lint-staged": "^13.1.0",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.1",
 		"terser-webpack-plugin": "^5.3.6",
 		"ts-jest": "^29.0.3",
-		"ts-loader": "^9.4.1",
+		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.21",
-		"typescript": "^4.9.3",
+		"typedoc": "^0.23.23",
+		"typescript": "^4.9.4",
 		"webpack": "^5.75.0"
 	},
 	"bugs": {

package/src/components/AbstractComponent.ts

@@ -70,6 +70,7 @@ export default abstract class AbstractComponent {
 	public getZIndex(): number {
 		return this.zIndex;
 	}
+
 	public getBBox(): Rect2 {
 		return this.contentBBox;
 	}
@@ -94,6 +95,13 @@ export default abstract class AbstractComponent {
 		return true;
 	}
 
+	// @returns an approximation of the proportional time it takes to render this component.
+	// This is intended to be a rough estimate, but, for example, a stroke with two points sould have
+	// a renderingWeight approximately twice that of a stroke with one point.
+	public getProportionalRenderingTime(): number {
+		return 1;
+	}
+
 	private static transformElementCommandId = 'transform-element';
 
 	private static UnresolvedTransformElementCommand = class extends SerializableCommand {

package/src/components/ImageComponent.ts

@@ -88,6 +88,11 @@ export default class ImageComponent extends AbstractComponent {
 		canvas.drawImage(this.image);
 	}
 
+	public getProportionalRenderingTime(): number {
+		// Estimate: Equivalent to a stroke with 10 segments.
+		return 10;
+	}
+
 	public intersects(lineSegment: LineSegment2): boolean {
 		const rect = this.getImageRect();
 		const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));

package/src/components/Stroke.ts

@@ -15,11 +15,16 @@ export default class Stroke extends AbstractComponent {
 	private parts: StrokePart[];
 	protected contentBBox: Rect2;
 
+	// See `getProportionalRenderingTime`
+	private approximateRenderingTime: number;
+
 	// Creates a `Stroke` from the given `parts`.
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 
+		this.approximateRenderingTime = 0;
 		this.parts = [];
+
 		for (const section of parts) {
 			const path = Path.fromRenderable(section);
 			const pathBBox = this.bboxForPart(path.bbox, section.style);
@@ -38,6 +43,8 @@ export default class Stroke extends AbstractComponent {
 				style: section.style,
 				commands: path.parts,
 			});
+
+			this.approximateRenderingTime += path.parts.length;
 		}
 		this.contentBBox ??= Rect2.empty;
 	}
@@ -71,6 +78,10 @@ export default class Stroke extends AbstractComponent {
 		canvas.endObject(this.getLoadSaveData());
 	}
 
+	public getProportionalRenderingTime(): number {
+		return this.approximateRenderingTime;
+	}
+
 	// Grows the bounding box for a given stroke part based on that part's style.
 	private bboxForPart(origBBox: Rect2, style: RenderingStyle) {
 		if (!style.stroke) {

package/src/components/TextComponent.ts

@@ -121,6 +121,10 @@ export default class TextComponent extends AbstractComponent {
 		canvas.endObject(this.getLoadSaveData());
 	}
 
+	public getProportionalRenderingTime(): number {
+		return this.textObjects.length;
+	}
+
 	public intersects(lineSegment: LineSegment2): boolean {
 
 		// Convert canvas space to internal space.

package/src/components/util/StrokeSmoother.ts

@@ -98,6 +98,8 @@ export class StrokeSmoother {
 			this.buffer[this.buffer.length - 2], lastPoint,
 		];
 		this.currentCurve = null;
+
+		this.isFirstSegment = false;
 	}
 
 	// Returns [upper curve, connector, lower curve]
@@ -165,25 +167,26 @@ export class StrokeSmoother {
 		const prevEndWidth = this.curveEndWidth;
 		this.curveEndWidth = pointRadius;
 
-		if (this.isFirstSegment) {
-			// The start of a curve often lacks accurate pressure information. Update it.
-			this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
-		}
-
 		// recompute bbox
 		this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
 
+		// If the last curve just ended or it's the first curve,
 		if (this.currentCurve === null) {
 			const p1 = lastPoint.pos;
 			const p2 = lastPoint.pos.plus(this.lastExitingVec ?? Vec2.unitX);
 			const p3 = newPoint.pos;
 
 			// Quadratic Bézier curve
-			this.currentCurve = new Bezier(
-				p1.xy, p2.xy, p3.xy
-			);
-			this.curveStartWidth = lastPoint.width;
+			this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
 			console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
+
+			if (this.isFirstSegment) {
+				// The start of a curve often lacks accurate pressure information. Update it.
+				this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+			}
+			else {
+				this.curveStartWidth = prevEndWidth;
+			}
 		}
 
 		// If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.

package/src/math/Mat33.ts

@@ -219,6 +219,15 @@ export default class Mat33 {
 		);
 	}
 
+	/** @returns true iff this is the identity matrix. */
+	public isIdentity(): boolean {
+		if (this === Mat33.identity) {
+			return true;
+		}
+
+		return this.eq(Mat33.identity);
+	}
+
 	/** Returns true iff this = other ± fuzz */
 	public eq(other: Mat33, fuzz: number = 0): boolean {
 		for (let i = 0; i < 3; i++) {

package/src/math/Path.ts

@@ -248,6 +248,10 @@ export default class Path {
 	}
 
 	public transformedBy(affineTransfm: Mat33): Path {
+		if (affineTransfm.isIdentity()) {
+			return this;
+		}
+
 		return this.mapPoints(point => affineTransfm.transformVec2(point));
 	}
 

package/src/rendering/Display.ts

@@ -78,8 +78,13 @@ export default class Display {
 			blockResolution: cacheBlockResolution,
 			cacheSize: 600 * 600 * 4 * 90,
 			maxScale: 1.4,
-			minComponentsPerCache: 20,
-			minComponentsToUseCache: 105,
+
+			// Require about 20 strokes with 4 parts each to cache an image in one of the
+			// parts of the cache grid.
+			minProportionalRenderTimePerCache: 20 * 4,
+
+			// Require about 105 strokes with 4 parts each to use the cache at all.
+			minProportionalRenderTimeToUseCache: 105 * 4,
 		});
 
 		this.editor.notifier.on(EditorEventType.DisplayResized, event => {