js-draw 0.10.0 → 0.10.1

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;

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

@@ -113,7 +113,7 @@ 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) {
@@ -128,7 +128,7 @@ export class StrokeSmoother {
             const p3 = newPoint.pos;
             // Quadratic Bézier curve
             this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
-            this.curveStartWidth = lastPoint.width / 2;
+            this.curveStartWidth = lastPoint.width;
             console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
         }
         // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
@@ -190,7 +190,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,

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

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

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,7 +20,7 @@ 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;

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}

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) {

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

@@ -2,7 +2,7 @@ import Color4 from '../Color4';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-declare type ColorListener = (color: Color4 | null) => void;
+type ColorListener = (color: Color4 | null) => void;
 export default class PipetteTool extends BaseTool {
     private editor;
     private colorPreviewListener;

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

@@ -6,9 +6,9 @@ export declare enum HandleShape {
     Square = 1
 }
 export declare const handleSize = 30;
-export declare type DragStartCallback = (startPoint: Point2) => void;
-export declare type DragUpdateCallback = (canvasPoint: Point2) => void;
-export declare type DragEndCallback = () => void;
+export type DragStartCallback = (startPoint: Point2) => void;
+export type DragUpdateCallback = (canvasPoint: Point2) => void;
+export type DragEndCallback = () => void;
 export default class SelectionHandle {
     readonly shape: HandleShape;
     private readonly parentSide;

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

@@ -1,7 +1,7 @@
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
-declare type KeyPressListener = (event: KeyPressEvent) => boolean;
+type KeyPressListener = (event: KeyPressEvent) => boolean;
 export default class ToolbarShortcutHandler extends BaseTool {
     private listeners;
     constructor(editor: Editor);

package/dist/src/types.d.ts

@@ -68,9 +68,9 @@ export interface PointerMoveEvt extends PointerEvtBase {
 export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
-export declare type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export declare type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
-export declare type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
+export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
+export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 export declare enum EditorEventType {
     ToolEnabled = 0,
     ToolDisabled = 1,
@@ -85,7 +85,7 @@ export declare enum EditorEventType {
     ColorPickerColorSelected = 10,
     ToolbarDropdownShown = 11
 }
-declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
+type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
     readonly kind: EditorToolEventType;
     readonly tool: BaseTool;
@@ -128,10 +128,10 @@ export interface ToolbarDropdownShownEvent {
     readonly kind: EditorEventType.ToolbarDropdownShown;
     readonly parentWidget: BaseWidget;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
-export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
-export declare type ComponentAddedListener = (component: AbstractComponent) => void;
-export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
+export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
+export type ComponentAddedListener = (component: AbstractComponent) => void;
+export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.10.0",
+	"version": "0.10.1",
 	"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/components/builders/FreehandLineBuilder.ts

@@ -55,7 +55,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			fill: Color4.transparent,
 			stroke: {
 				color: this.startPoint.color,
-				width: this.roundDistance(this.averageWidth / 2),
+				width: this.roundDistance(this.averageWidth),
 			}
 		};
 	}
@@ -108,7 +108,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	private getMinFit(): number {
-		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;
@@ -135,7 +135,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				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/src/components/builders/PressureSensitiveFreehandLineBuilder.ts

@@ -290,7 +290,7 @@ export default class PressureSensitiveFreehandLineBuilder implements ComponentBu
 				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/src/components/util/StrokeSmoother.ts

@@ -161,7 +161,7 @@ export class StrokeSmoother {
 		this.lastPoint = newPoint;
 
 		this.buffer.push(newPoint.pos);
-		const pointRadius = newPoint.width / 2;
+		const pointRadius = newPoint.width;
 		const prevEndWidth = this.curveEndWidth;
 		this.curveEndWidth = pointRadius;
 
@@ -182,7 +182,7 @@ export class StrokeSmoother {
 			this.currentCurve = new Bezier(
 				p1.xy, p2.xy, p3.xy
 			);
-			this.curveStartWidth = lastPoint.width / 2;
+			this.curveStartWidth = lastPoint.width;
 			console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
 		}
 
@@ -271,7 +271,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/src/toolbar/IconProvider.ts

@@ -347,7 +347,7 @@ export default class IconProvider {
 		return icon;
 	}
 	
-	public makePenIcon(tipThickness: number, color: string|Color4): IconType {
+	public makePenIcon(tipThickness: number, color: string|Color4, roundedTip?: boolean): IconType {
 		if (color instanceof Color4) {
 			color = color.toHexString();
 		}
@@ -358,8 +358,20 @@ export default class IconProvider {
 		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}

package/src/toolbar/widgets/PenToolWidget.ts

@@ -122,7 +122,9 @@ 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();
 			return this.editor.icons.makeIconFromFactory(this.tool, strokeFactory);

package/src/tools/PanZoom.ts

@@ -143,15 +143,22 @@ export default class PanZoom extends BaseTool {
 	private updateVelocity(currentCenter: Point2) {
 		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;
@@ -230,6 +237,12 @@ export default class PanZoom extends BaseTool {
 				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.
 			this.inertialScroller?.stop();
 
 			this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta: Vec2) => {