js-draw 0.10.0 → 0.10.2

package/dist/src/Editor.d.ts

@@ -29,8 +29,8 @@ import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
-declare type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
-declare type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
+type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;

package/dist/src/EditorImage.d.ts

@@ -27,7 +27,7 @@ export default class EditorImage {
     static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
     private static AddElementCommand;
 }
-declare type TooSmallToRenderCheck = (rect: Rect2) => boolean;
+type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 /** Part of the Editor's image. @internal */
 export declare class ImageNode {
     private parent;

package/dist/src/EventDispatcher.d.ts

@@ -15,7 +15,7 @@
  *
  * @packageDocumentation
  */
-declare type CallbackHandler<EventType> = (data: EventType) => void;
+type CallbackHandler<EventType> = (data: EventType) => void;
 export default class EventDispatcher<EventKeyType extends string | symbol | number, EventMessageType> {
     private listeners;
     constructor();

package/dist/src/SVGLoader.d.ts

@@ -3,8 +3,8 @@ import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnP
 export declare const defaultSVGViewRect: Rect2;
 export declare const svgAttributesDataKey = "svgAttrs";
 export declare const svgStyleAttributesDataKey = "svgStyleAttrs";
-export declare type SVGLoaderUnknownAttribute = [string, string];
-export declare type SVGLoaderUnknownStyleAttribute = {
+export type SVGLoaderUnknownAttribute = [string, string];
+export type SVGLoaderUnknownStyleAttribute = {
     key: string;
     value: string;
     priority?: string;

package/dist/src/UndoRedoHistory.d.ts

@@ -1,7 +1,7 @@
 import Editor from './Editor';
 import Command from './commands/Command';
-declare type AnnounceRedoCallback = (command: Command) => void;
-declare type AnnounceUndoCallback = (command: Command) => void;
+type AnnounceRedoCallback = (command: Command) => void;
+type AnnounceUndoCallback = (command: Command) => void;
 declare class UndoRedoHistory {
     private readonly editor;
     private announceRedoCallback;

package/dist/src/Viewport.d.ts

@@ -4,7 +4,7 @@ import Rect2 from './math/Rect2';
 import { Point2, Vec2 } from './math/Vec2';
 import { StrokeDataPoint } from './types';
 import { EditorNotifier } from './types';
-declare type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
+type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
 export declare abstract class ViewportTransform extends Command {
     abstract readonly transform: Mat33;
 }

package/dist/src/commands/SerializableCommand.d.ts

@@ -1,6 +1,6 @@
 import Editor from '../Editor';
 import Command from './Command';
-export declare type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
+export type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
 export default abstract class SerializableCommand extends Command {
     private commandTypeId;
     constructor(commandTypeId: string);

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

@@ -4,9 +4,9 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
-export declare type LoadSaveData = (string[] | Record<symbol, string | number>);
-export declare type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
-export declare type DeserializeCallback = (data: string) => AbstractComponent;
+export type LoadSaveData = (string[] | Record<symbol, string | number>);
+export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
+export type DeserializeCallback = (data: string) => AbstractComponent;
 export default abstract class AbstractComponent {
     private readonly componentKind;
     protected lastChangedTime: number;
@@ -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/SVGGlobalAttributesObject.d.ts

@@ -4,7 +4,7 @@ import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
-declare type GlobalAttrsList = Array<[string, string | null]>;
+type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
     private readonly attrs;
     protected contentBBox: Rect2;

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/builders/FreehandLineBuilder.js

@@ -33,7 +33,7 @@ export default class FreehandLineBuilder {
             fill: Color4.transparent,
             stroke: {
                 color: this.startPoint.color,
-                width: this.roundDistance(this.averageWidth / 2),
+                width: this.roundDistance(this.averageWidth),
             }
         };
     }
@@ -77,7 +77,7 @@ export default class FreehandLineBuilder {
         return this.previewStroke();
     }
     getMinFit() {
-        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 5);
+        let minFit = Math.min(this.minFitAllowed, this.averageWidth / 3);
         if (minFit < 1e-10) {
             minFit = this.minFitAllowed;
         }
@@ -98,7 +98,8 @@ export default class FreehandLineBuilder {
             if (!this.isFirstSegment) {
                 return [];
             }
-            const width = Viewport.roundPoint(this.startPoint.width / 9, Math.min(this.minFitAllowed, this.startPoint.width / 5));
+            // Make the circle small -- because of the stroke style, we'll be drawing a stroke around it.
+            const width = Viewport.roundPoint(this.averageWidth / 10, Math.min(this.minFitAllowed, this.averageWidth / 10));
             const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |

package/dist/src/components/builders/PressureSensitiveFreehandLineBuilder.js

@@ -209,7 +209,7 @@ export default class PressureSensitiveFreehandLineBuilder {
             if (!this.isFirstSegment) {
                 return;
             }
-            const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+            const width = Viewport.roundPoint(this.startPoint.width / 2.2, Math.min(this.minFitAllowed, this.startPoint.width / 4));
             const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |

package/dist/src/components/builders/types.d.ts

@@ -9,4 +9,4 @@ export interface ComponentBuilder {
     preview(renderer: AbstractRenderer): void;
     addPoint(point: StrokeDataPoint): void;
 }
-export declare type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;
+export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;

package/dist/src/components/util/StrokeSmoother.d.ts

@@ -8,7 +8,7 @@ export interface Curve {
     endWidth: number;
     endPoint: Vec2;
 }
-declare type OnCurveAddedCallback = (curve: Curve | null) => void;
+type OnCurveAddedCallback = (curve: Curve | null) => void;
 export declare class StrokeSmoother {
     private startPoint;
     private minFitAllowed;

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() {
@@ -113,23 +114,26 @@ export class StrokeSmoother {
         const lastPoint = (_a = this.lastPoint) !== null && _a !== void 0 ? _a : newPoint;
         this.lastPoint = newPoint;
         this.buffer.push(newPoint.pos);
-        const pointRadius = newPoint.width / 2;
+        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 / 2;
             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;
@@ -190,7 +194,7 @@ export class StrokeSmoother {
             }
             return true;
         };
-        if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth) {
+        if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth / 2) {
             if (!curveMatchesPoints(this.currentCurve)) {
                 // Use a curve that better fits the points
                 this.currentCurve = prevCurve;

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

@@ -1,6 +1,6 @@
 import { Point2, Vec2 } from './Vec2';
 import Vec3 from './Vec3';
-export declare type Mat33Array = [
+export type Mat33Array = [
     number,
     number,
     number,
@@ -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.d.ts

@@ -30,7 +30,7 @@ export interface MoveToPathCommand {
     kind: PathCommandType.MoveTo;
     point: Point2;
 }
-export declare type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
+export type PathCommand = CubicBezierPathCommand | LinePathCommand | QuadraticBezierPathCommand | MoveToPathCommand;
 interface IntersectionResult {
     curve: LineSegment2 | Bezier;
     parameterValue: number;

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/math/Vec2.d.ts

@@ -9,5 +9,5 @@ export declare namespace Vec2 {
     const unitY: Vec3;
     const zero: Vec3;
 }
-export declare type Point2 = Vec3;
-export declare type Vec2 = Vec3;
+export type Point2 = Vec3;
+export type Vec2 = Vec3;

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

@@ -1,7 +1,7 @@
 import DummyRenderer from '../renderers/DummyRenderer';
 import RenderingCache from './RenderingCache';
 import { CacheProps } from './types';
-declare type RenderAllocCallback = (renderer: DummyRenderer) => void;
+type RenderAllocCallback = (renderer: DummyRenderer) => void;
 export declare const createCache: (onRenderAlloc?: RenderAllocCallback, cacheOptions?: Partial<CacheProps>) => {
     cache: RenderingCache;
     editor: import("../../Editor").Editor;

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

@@ -1,16 +1,16 @@
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheRecordManager } from './CacheRecordManager';
-export declare type CacheAddress = number;
-export declare type BeforeDeallocCallback = () => void;
+export type CacheAddress = number;
+export type BeforeDeallocCallback = () => void;
 export interface CacheProps {
     createRenderer(): AbstractRenderer;
     isOfCorrectType(renderer: AbstractRenderer): boolean;
     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

@@ -2,7 +2,7 @@ import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
 import { TextStyle } from '../components/TextComponent';
 import Pen from '../tools/Pen';
-declare type IconType = SVGSVGElement | HTMLImageElement;
+type IconType = SVGSVGElement | HTMLImageElement;
 export default class IconProvider {
     makeUndoIcon(): IconType;
     makeRedoIcon(mirror?: boolean): IconType;
@@ -20,11 +20,12 @@ export default class IconProvider {
     makeZoomIcon(): IconType;
     makeRotationLockIcon(): IconType;
     makeTextIcon(textStyle: TextStyle): IconType;
-    makePenIcon(tipThickness: number, color: string | Color4): IconType;
+    makePenIcon(tipThickness: number, color: string | Color4, roundedTip?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
     makePipetteIcon(color?: Color4): IconType;
     makeResizeViewportIcon(): IconType;
     makeDuplicateSelectionIcon(): IconType;
+    makePasteIcon(): IconType;
     makeDeleteSelectionIcon(): IconType;
     makeSaveIcon(): IconType;
 }

package/dist/src/toolbar/IconProvider.js

@@ -302,7 +302,7 @@ export default class IconProvider {
         icon.appendChild(textNode);
         return icon;
     }
-    makePenIcon(tipThickness, color) {
+    makePenIcon(tipThickness, color, roundedTip) {
         if (color instanceof Color4) {
             color = color.toHexString();
         }
@@ -310,8 +310,16 @@ export default class IconProvider {
         icon.setAttribute('viewBox', '0 0 100 100');
         const halfThickness = tipThickness / 2;
         // Draw a pen-like shape
-        const primaryStrokeTipPath = `M14,63 L${50 - halfThickness},95 L${50 + halfThickness},90 L88,60 Z`;
-        const backgroundStrokeTipPath = `M14,63 L${50 - halfThickness},85 L${50 + halfThickness},83 L88,60 Z`;
+        const penTipLeft = 50 - halfThickness;
+        const penTipRight = 50 + halfThickness;
+        let tipCenterPrimaryPath = `L${penTipLeft},95 L${penTipRight},90`;
+        let tipCenterBackgroundPath = `L${penTipLeft},85 L${penTipRight},83`;
+        if (roundedTip) {
+            tipCenterPrimaryPath = `L${penTipLeft},95 q${halfThickness},10 ${2 * halfThickness},-5`;
+            tipCenterBackgroundPath = `L${penTipLeft},87 q${halfThickness},10 ${2 * halfThickness},-3`;
+        }
+        const primaryStrokeTipPath = `M14,63 ${tipCenterPrimaryPath} L88,60 Z`;
+        const backgroundStrokeTipPath = `M14,63 ${tipCenterBackgroundPath} L88,60 Z`;
         icon.innerHTML = `
 		<defs>
 			${checkerboardPatternDef}
@@ -425,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/toolbar/makeColorInput.d.ts

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
-declare type OnColorChangeListener = (color: Color4) => void;
-declare type SetColorCallback = (color: Color4 | string) => void;
+type OnColorChangeListener = (color: Color4) => void;
+type SetColorCallback = (color: Color4 | string) => void;
 export declare const makeColorInput: (editor: Editor, onColorChange: OnColorChangeListener) => [HTMLInputElement, HTMLElement, SetColorCallback];
 export default makeColorInput;

package/dist/src/toolbar/widgets/BaseWidget.d.ts

@@ -1,7 +1,7 @@
 import Editor from '../../Editor';
 import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
-export declare type SavedToolbuttonState = Record<string, any>;
+export type SavedToolbuttonState = Record<string, any>;
 export default abstract class BaseWidget {
     #private;
     protected editor: Editor;

package/dist/src/toolbar/widgets/PenToolWidget.js

@@ -87,7 +87,8 @@ export default class PenToolWidget extends BaseToolWidget {
             // Use a square-root scale to prevent the pen's tip from overflowing.
             const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
             const color = this.tool.getColor();
-            return this.editor.icons.makePenIcon(scale, color.toHexString());
+            const roundedTip = strokeFactory === makeFreehandLineBuilder;
+            return this.editor.icons.makePenIcon(scale, color.toHexString(), roundedTip);
         }
         else {
             const strokeFactory = this.tool.getStrokeFactory();

package/dist/src/tools/BaseTool.js

@@ -1,15 +1,15 @@
 import { EditorEventType } from '../types';
 export default class BaseTool {
+    onPointerDown(_event) { return false; }
+    onPointerMove(_event) { }
+    onPointerUp(_event) { }
+    onGestureCancel() { }
     constructor(notifier, description) {
         this.notifier = notifier;
         this.description = description;
         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

@@ -115,13 +115,18 @@ export default class PanZoom extends BaseTool {
     updateVelocity(currentCenter) {
         const deltaPos = currentCenter.minus(this.lastScreenCenter);
         const deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
-        const currentVelocity = deltaPos.times(1 / deltaTime);
-        let smoothedVelocity = currentVelocity;
+        // We divide by deltaTime. Don't divide by zero.
         if (deltaTime === 0) {
             return;
         }
+        // Ignore duplicate events, unless there has been enough time between them.
+        if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
+            return;
+        }
+        const currentVelocity = deltaPos.times(1 / deltaTime);
+        let smoothedVelocity = currentVelocity;
         if (this.velocity) {
-            smoothedVelocity = this.velocity.lerp(smoothedVelocity, 0.5);
+            smoothedVelocity = this.velocity.lerp(currentVelocity, 0.5);
         }
         this.velocity = smoothedVelocity;
     }
@@ -181,6 +186,11 @@ export default class PanZoom extends BaseTool {
         };
         const shouldInertialScroll = event.current.device === PointerDevice.Touch && event.allPointers.length === 1;
         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
+            // should be near zero). Handle this:
+            this.updateVelocity(event.current.screenPos);
+            // Cancel any ongoing inertial scrolling.
             (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
             this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta) => {
                 if (!this.transform) {