js-draw 0.9.3 → 0.10.1

package/dist/src/tools/PanZoom.js

@@ -1,8 +1,18 @@
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import Mat33 from '../math/Mat33';
 import { Vec2 } from '../math/Vec2';
 import Vec3 from '../math/Vec3';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType } from '../types';
+import untilNextAnimationFrame from '../util/untilNextAnimationFrame';
 import { Viewport } from '../Viewport';
 import BaseTool from './BaseTool';
 export var PanZoomMode;
@@ -14,12 +24,55 @@ export var PanZoomMode;
     PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
     PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
 })(PanZoomMode || (PanZoomMode = {}));
+class InertialScroller {
+    constructor(initialVelocity, scrollBy, onComplete) {
+        this.initialVelocity = initialVelocity;
+        this.scrollBy = scrollBy;
+        this.onComplete = onComplete;
+        this.running = false;
+        this.start();
+    }
+    start() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.running) {
+                return;
+            }
+            let currentVelocity = this.initialVelocity;
+            let lastTime = (new Date()).getTime();
+            this.running = true;
+            const maxSpeed = 8000; // units/s
+            const minSpeed = 200; // units/s
+            if (currentVelocity.magnitude() > maxSpeed) {
+                currentVelocity = currentVelocity.normalized().times(maxSpeed);
+            }
+            while (this.running && 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));
+                yield untilNextAnimationFrame();
+                lastTime = nowTime;
+            }
+            if (this.running) {
+                this.stop();
+            }
+        });
+    }
+    stop() {
+        if (this.running) {
+            this.running = false;
+            this.onComplete();
+        }
+    }
+}
 export default class PanZoom extends BaseTool {
     constructor(editor, mode, description) {
         super(editor.notifier, description);
         this.editor = editor;
         this.mode = mode;
         this.transform = null;
+        this.inertialScroller = null;
+        this.velocity = null;
     }
     // Returns information about the pointers in a gesture
     computePinchData(p1, p2) {
@@ -34,8 +87,9 @@ export default class PanZoom extends BaseTool {
         return pointers.every(pointer => pointer.device === kind);
     }
     onPointerDown({ allPointers: pointers }) {
-        var _a;
+        var _a, _b;
         let handlingGesture = false;
+        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
         const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
         const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
         if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
@@ -52,11 +106,30 @@ export default class PanZoom extends BaseTool {
             handlingGesture = true;
         }
         if (handlingGesture) {
-            (_a = this.transform) !== null && _a !== void 0 ? _a : (this.transform = Viewport.transformBy(Mat33.identity));
+            this.lastTimestamp = (new Date()).getTime();
+            (_b = this.transform) !== null && _b !== void 0 ? _b : (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;
+        }
+        // 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(currentVelocity, 0.5);
+        }
+        this.velocity = smoothedVelocity;
+    }
     // Returns the change in position of the center of the given group of pointers.
     // Assumes this.lastScreenCenter has been set appropriately.
     getCenterDelta(screenCenter) {
@@ -71,6 +144,7 @@ export default class PanZoom extends BaseTool {
         if (this.isRotationLocked()) {
             rotation = 0;
         }
+        this.updateVelocity(screenCenter);
         const transformUpdate = Mat33.translation(delta)
             .rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
             .rightMul(Mat33.zRotation(rotation, canvasCenter));
@@ -82,6 +156,7 @@ export default class PanZoom extends BaseTool {
     handleOneFingerMove(pointer) {
         const delta = this.getCenterDelta(pointer.screenPos);
         this.transform = Viewport.transformBy(this.transform.transform.rightMul(Mat33.translation(delta)));
+        this.updateVelocity(pointer.screenPos);
         this.lastScreenCenter = pointer.screenPos;
     }
     onPointerMove({ allPointers }) {
@@ -96,18 +171,47 @@ export default class PanZoom extends BaseTool {
         }
         lastTransform.unapply(this.editor);
         this.transform.apply(this.editor);
+        this.lastTimestamp = (new Date()).getTime();
     }
-    onPointerUp(_event) {
-        if (this.transform) {
-            this.transform.unapply(this.editor);
-            this.editor.dispatch(this.transform, false);
+    onPointerUp(event) {
+        var _a;
+        const onComplete = () => {
+            if (this.transform) {
+                this.transform.unapply(this.editor);
+                this.editor.dispatch(this.transform, false);
+            }
+            this.editor.display.setDraftMode(false);
+            this.transform = null;
+            this.velocity = Vec2.zero;
+        };
+        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) {
+                    return;
+                }
+                const canvasDelta = this.editor.viewport.screenToCanvasTransform.transformVec3(scrollDelta);
+                // Scroll by scrollDelta
+                this.transform.unapply(this.editor);
+                this.transform = Viewport.transformBy(this.transform.transform.rightMul(Mat33.translation(canvasDelta)));
+                this.transform.apply(this.editor);
+            }, onComplete);
+        }
+        else {
+            onComplete();
         }
-        this.editor.display.setDraftMode(false);
-        this.transform = null;
     }
     onGestureCancel() {
-        var _a;
-        (_a = this.transform) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
+        var _a, _b;
+        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
+        this.velocity = Vec2.zero;
+        (_b = this.transform) === null || _b === void 0 ? void 0 : _b.unapply(this.editor);
         this.editor.display.setDraftMode(false);
         this.transform = null;
     }
@@ -127,6 +231,8 @@ export default class PanZoom extends BaseTool {
         }
     }
     onWheel({ delta, screenPos }) {
+        var _a;
+        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
         // Reset the transformation -- wheel events are individual events, so we don't
         // need to unapply/reapply.
         this.transform = Viewport.transformBy(Mat33.identity);
@@ -140,6 +246,8 @@ export default class PanZoom extends BaseTool {
         return true;
     }
     onKeyPress({ key, ctrlKey, altKey }) {
+        var _a;
+        (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
         if (!(this.mode & PanZoomMode.Keyboard)) {
             return false;
         }

package/dist/src/tools/SelectionTool/SelectionHandle.js

@@ -1,4 +1,4 @@
-import { assertUnreachable } from '../../language/assertions';
+import { assertUnreachable } from '../../util/assertions';
 import { Vec2 } from '../../math/Vec2';
 import { cssPrefix } from './SelectionTool';
 export var HandleShape;

package/dist/src/{language → util}/assertions.js

@@ -1,5 +1,6 @@
 // Compile-time assertion that a branch of code is unreachable.
 // See https://stackoverflow.com/a/39419171/17055750
+// @internal
 export const assertUnreachable = (key) => {
     throw new Error(`Should be unreachable. Key: ${key}.`);
 };

package/dist/src/util/untilNextAnimationFrame.d.ts

@@ -0,0 +1,3 @@
+/** @internal */
+declare const untilNextAnimationFrame: () => Promise<void>;
+export default untilNextAnimationFrame;

package/dist/src/util/untilNextAnimationFrame.js

@@ -0,0 +1,7 @@
+/** @internal */
+const untilNextAnimationFrame = () => {
+    return new Promise((resolve) => {
+        requestAnimationFrame(() => resolve());
+    });
+};
+export default untilNextAnimationFrame;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.9.3",
+	"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/Color4.test.ts

@@ -9,4 +9,11 @@ describe('Color4', () => {
 	it('should create #RRGGBBAA-format hex strings when there is an alpha component', () => {
 		expect(Color4.ofRGBA(1, 1, 1, 0.5).toHexString()).toBe('#ffffff80');
 	});
+
+	it('should parse rgb and rgba-format strings', () => {
+		expect(Color4.fromString('rgb(0, 0, 0)')).objEq(Color4.black);
+		expect(Color4.fromString('rgb ( 255, 0,\t 0)')).objEq(Color4.ofRGBA(1, 0, 0, 1));
+		expect(Color4.fromString('rgba ( 255, 0,\t 0, 0.5)')).objEq(Color4.ofRGBA(1, 0, 0, 0.5));
+		expect(Color4.fromString('rgba( 0, 0, 128, 0)')).objEq(Color4.ofRGBA(0, 0, 128/255, 0));
+	});
 });

package/src/Color4.ts

@@ -73,26 +73,51 @@ export default class Color4 {
 	public static fromString(text: string): Color4 {
 		if (text.startsWith('#')) {
 			return Color4.fromHex(text);
-		} else if (text === 'none' || text === 'transparent') {
+		} 
+		
+		if (text === 'none' || text === 'transparent') {
 			return Color4.transparent;
-		} else {
-			// Otherwise, try to use an HTML5Canvas to determine the color
-			const canvas = document.createElement('canvas');
-			canvas.width = 1;
-			canvas.height = 1;
-
-			const ctx = canvas.getContext('2d')!;
-			ctx.fillStyle = text;
-			ctx.fillRect(0, 0, 1, 1);
-
-			const data = ctx.getImageData(0, 0, 1, 1);
-			const red = data.data[0] / 255;
-			const green = data.data[1] / 255;
-			const blue = data.data[2] / 255;
-			const alpha = data.data[3] / 255;
-
-			return Color4.ofRGBA(red, green, blue, alpha);
 		}
+
+		// rgba?: Match both rgb and rgba strings.
+		// ([,0-9.]+): Match any string of only numeric, '.' and ',' characters.
+		const rgbRegex = /^rgba?\(([,0-9.]+)\)$/i;
+		const rgbMatch = text.replace(/\s*/g, '').match(rgbRegex);
+
+		if (rgbMatch) {
+			const componentsListStr = rgbMatch[1];
+			const componentsList = JSON.parse(`[ ${componentsListStr} ]`);
+
+			if (componentsList.length === 3) {
+				return Color4.ofRGB(
+					componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255
+				);
+			} else if (componentsList.length === 4) {
+				return Color4.ofRGBA(
+					componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255, componentsList[3]
+				);
+			} else {
+				throw new Error(`RGB string, ${text}, has wrong number of components: ${componentsList.length}`);
+			}
+		}
+		
+		// Otherwise, try to use an HTMLCanvasElement to determine the color.
+		// Note: We may be unable to create an HTMLCanvasElement if running as a unit test.
+		const canvas = document.createElement('canvas');
+		canvas.width = 1;
+		canvas.height = 1;
+
+		const ctx = canvas.getContext('2d')!;
+		ctx.fillStyle = text;
+		ctx.fillRect(0, 0, 1, 1);
+
+		const data = ctx.getImageData(0, 0, 1, 1);
+		const red = data.data[0] / 255;
+		const green = data.data[1] / 255;
+		const blue = data.data[2] / 255;
+		const alpha = data.data[3] / 255;
+
+		return Color4.ofRGBA(red, green, blue, alpha);
 	}
 
 	/** @returns true if `this` and `other` are approximately equal. */
@@ -139,6 +164,10 @@ export default class Color4 {
 		return this.hexString;
 	}
 
+	public toString() {
+		return this.toHexString();
+	}
+
 	public static transparent = Color4.ofRGBA(0, 0, 0, 0);
 	public static red = Color4.ofRGB(1.0, 0.0, 0.0);
 	public static green = Color4.ofRGB(0.0, 1.0, 0.0);

package/src/Editor.toSVG.test.ts

@@ -1,5 +1,6 @@
 import { TextStyle } from './components/TextComponent';
 import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2 } from './lib';
+import SVGLoader from './SVGLoader';
 import createEditor from './testing/createEditor';
 
 describe('Editor.toSVG', () => {
@@ -23,5 +24,88 @@ describe('Editor.toSVG', () => {
 		expect(allTSpans).toHaveLength(1);
 		expect(allTSpans[0].getAttribute('x')).toBe('0');
 		expect(allTSpans[0].getAttribute('y')).toBe('100');
+		expect(allTSpans[0].style.transform).toBe('');
+	});
+
+	it('should preserve empty tspans', async () => {
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+				<style id="js-draw-style-sheet">
+					path {
+						stroke-linecap:round;
+						stroke-linejoin:round;
+					}
+				</style>
+				<text style="transform: matrix(1, 0, 0, 1, 12, 35); font-family: sans-serif; font-size: 32px; fill: rgb(128, 51, 128);">Testing...<tspan x="3" y="40" style="font-family: sans-serif; font-size: 33px; fill: rgb(128, 51, 128);"></tspan><tspan x="3" y="70">Test 2. ☺</tspan></text>
+			</svg>
+		`, true));
+
+		const textNodesInImage = editor.image.getAllElements().filter(elem => elem instanceof TextComponent);
+		expect(
+			textNodesInImage
+		).toHaveLength(1);
+
+		const asSVG = editor.toSVG();
+		const textObject = asSVG.querySelector('text');
+
+		if (!textObject) {
+			throw new Error('No text object found');
+		}
+
+		const childTextNodes = textObject.querySelectorAll('tspan');
+		expect(childTextNodes).toHaveLength(2);
+	});
+
+	it('should preserve text child size/placement while not saving additional properties', async () => {
+		const secondLineText = 'This is a test of a thing that has been known to break. Will this test catch the issue?';
+		const thirdLineText = 'This is a test of saving/loading multi-line text...';
+
+		const editor = createEditor();
+		await editor.loadFrom(SVGLoader.fromString(`
+			<svg viewBox="0 0 500 500" width="500" height="500" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
+				<style id="js-draw-style-sheet">
+					path {
+						stroke-linecap:round;
+						stroke-linejoin:round;
+					}
+				</style>
+				<text style="transform: matrix(1, 0, 0, 1, 12, 35); font-family: sans-serif; font-size: 32px; fill: rgb(128, 51, 128);">Testing...<tspan x="3" y="40" style="font-family: sans-serif; font-size: 33px; fill: rgb(128, 51, 128);">${secondLineText}</tspan><tspan x="0" y="72" style="font-family: sans-serif; font-size: 32px; fill: rgb(128, 51, 128);">${thirdLineText}</tspan><tspan x="0" y="112" style="font-family: sans-serif; font-size: 32px; fill: rgb(128, 51, 128);">Will it pass or fail?</tspan></text>
+			</svg>
+		`, true));
+
+		expect(
+			editor.image.getAllElements().filter(elem => elem instanceof TextComponent)
+		).toHaveLength(1);
+
+		const asSVG = editor.toSVG();
+		const textObject = asSVG.querySelector('text');
+
+		if (!textObject) {
+			throw new Error('No text object found');
+		}
+
+		expect(textObject.style.transform.replace(/\s+/g, '')).toBe('matrix(1,0,0,1,12,35)');
+		expect(textObject.style.fontFamily).toBe('sans-serif');
+		expect(textObject.style.fontSize).toBe('32px');
+
+		const childTextNodes = textObject.querySelectorAll('tspan');
+		expect(childTextNodes).toHaveLength(3);
+		const firstChild = childTextNodes[0];
+
+		expect(firstChild.textContent).toBe(secondLineText);
+		expect(firstChild.style.transform).toBe('');
+		expect(firstChild.style.fontSize).toBe('33px');
+		expect(firstChild.getAttribute('x')).toBe('3');
+		expect(firstChild.getAttribute('y')).toBe('40');
+
+		// Should not save a fontSize when not necessary (same fill as parent text node)
+		const secondChild = childTextNodes[1];
+		expect(secondChild.style.fontSize ?? '').toBe('');
+
+		// Should not save additional "style" attributes when not necessary
+		// TODO: Uncomment before some future major version release. Currently a "fill" is set for every
+		//  tspan to work around a loading bug.
+		//expect(secondChild.outerHTML).toBe(`<tspan x="0" y="72">${thirdLineText}</tspan>`);
 	});
 });

package/src/Editor.ts

@@ -40,6 +40,7 @@ import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
 import CanvasRenderer from './rendering/renderers/CanvasRenderer';
+import untilNextAnimationFrame from './util/untilNextAnimationFrame';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -888,9 +889,7 @@ export class Editor {
 			if (countProcessed % 500 === 0) {
 				this.showLoadingWarning(countProcessed / totalToProcess);
 				this.rerender();
-				return new Promise(resolve => {
-					requestAnimationFrame(() => resolve());
-				});
+				return untilNextAnimationFrame();
 			}
 
 			return null;

package/src/SVGLoader.ts

@@ -44,12 +44,14 @@ export default class SVGLoader implements ImageLoader {
 		private source: SVGSVGElement, private onFinish?: OnFinishListener, private readonly storeUnknown: boolean = true) {
 	}
 
-	private getStyle(node: SVGElement) {
+	// If [computedStyles] is given, it is preferred to directly accessing node's style object.
+	private getStyle(node: SVGElement, computedStyles?: CSSStyleDeclaration) {
 		const style: RenderingStyle = {
 			fill: Color4.transparent,
 		};
 
-		const fillAttribute = node.getAttribute('fill') ?? node.style.fill;
+		// If possible, use computedStyles (allows property inheritance).
+		const fillAttribute = node.getAttribute('fill') ?? computedStyles?.fill ?? node.style.fill;
 		if (fillAttribute) {
 			try {
 				style.fill = Color4.fromString(fillAttribute);
@@ -58,19 +60,23 @@ export default class SVGLoader implements ImageLoader {
 			}
 		}
 
-		const strokeAttribute = node.getAttribute('stroke') ?? node.style.stroke;
-		const strokeWidthAttr = node.getAttribute('stroke-width') ?? node.style.strokeWidth;
-		if (strokeAttribute) {
+		const strokeAttribute = node.getAttribute('stroke') ?? computedStyles?.stroke ?? node.style.stroke;
+		const strokeWidthAttr = node.getAttribute('stroke-width') ?? computedStyles?.strokeWidth ?? node.style.strokeWidth;
+		if (strokeAttribute && strokeWidthAttr) {
 			try {
 				let width = parseFloat(strokeWidthAttr ?? '1');
 				if (!isFinite(width)) {
 					width = 0;
 				}
 
-				style.stroke = {
-					width,
-					color: Color4.fromString(strokeAttribute),
-				};
+				const strokeColor = Color4.fromString(strokeAttribute);
+
+				if (strokeColor.a > 0) {
+					style.stroke = {
+						width,
+						color: strokeColor,
+					};
+				}
 			} catch (e) {
 				console.error('Error parsing stroke data:', e);
 			}
@@ -230,6 +236,11 @@ export default class SVGLoader implements ImageLoader {
 			}
 		}
 
+		// If no content, the content is an empty string.
+		if (contentList.length === 0) {
+			contentList.push('');
+		}
+
 		// Compute styles.
 		const computedStyles = window.getComputedStyle(elem);
 		const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
@@ -247,7 +258,7 @@ export default class SVGLoader implements ImageLoader {
 		const style: TextStyle = {
 			size: fontSize,
 			fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
-			renderingStyle: this.getStyle(elem),
+			renderingStyle: this.getStyle(elem, computedStyles),
 		};
 
 		const supportedAttrs: string[] = [];
@@ -354,6 +365,9 @@ export default class SVGLoader implements ImageLoader {
 			this.updateViewBox(node as SVGSVGElement);
 			this.updateSVGAttrs(node as SVGSVGElement);
 			break;
+		case 'style':
+			this.addUnknownNode(node as SVGStyleElement);
+			break;
 		default:
 			console.warn('Unknown SVG element,', node);
 			if (!(node instanceof SVGElement)) {
@@ -432,6 +446,8 @@ export default class SVGLoader implements ImageLoader {
 			<html>
 				<head>
 					<title>SVG Loading Sandbox</title>
+					<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>
+					<meta charset='utf-8'/>
 				</head>
 				<body>
 					<script>

package/src/components/builders/FreehandLineBuilder.ts

@@ -108,7 +108,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	private getMinFit(): number {
-		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
+		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 / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
+			// 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

@@ -205,7 +205,7 @@ export default class PressureSensitiveFreehandLineBuilder implements ComponentBu
 	}
 
 	private roundPoint(point: Point2): Point2 {
-		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 2);
+		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 3);
 
 		if (minFit < 1e-10) {
 			minFit = this.minFitAllowed;
@@ -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/rendering/renderers/SVGRenderer.ts

@@ -150,13 +150,29 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	private textContainer: SVGTextElement|null = null;
 	private textContainerTransform: Mat33|null = null;
+	private textParentStyle: TextStyle|null = null;
 	public drawText(text: string, transform: Mat33, style: TextStyle): void {
 		const applyTextStyles = (elem: SVGTextElement|SVGTSpanElement, style: TextStyle) => {
-			elem.style.fontFamily = style.fontFamily;
-			elem.style.fontVariant = style.fontVariant ?? '';
-			elem.style.fontWeight = style.fontWeight ?? '';
-			elem.style.fontSize = style.size + 'px';
-			elem.style.fill = style.renderingStyle.fill.toHexString();
+			if (style.fontFamily !== this.textParentStyle?.fontFamily) {
+				elem.style.fontFamily = style.fontFamily;
+			}
+			if (style.fontVariant !== this.textParentStyle?.fontVariant) {
+				elem.style.fontVariant = style.fontVariant ?? '';
+			}
+			if (style.fontWeight !== this.textParentStyle?.fontWeight) {
+				elem.style.fontWeight = style.fontWeight ?? '';
+			}
+			if (style.size !== this.textParentStyle?.size) {
+				elem.style.fontSize = style.size + 'px';
+			}
+			
+			const fillString = style.renderingStyle.fill.toHexString();
+			// TODO: Uncomment at some future major version release --- currently causes incompatibility due
+			//       to an SVG parsing bug in older versions.
+			//const parentFillString = this.textParentStyle?.renderingStyle?.fill?.toHexString();
+			//if (fillString !== parentFillString) {
+			elem.style.fill = fillString;
+			//}
 
 			if (style.renderingStyle.stroke) {
 				const strokeStyle = style.renderingStyle.stroke;
@@ -181,6 +197,7 @@ export default class SVGRenderer extends AbstractRenderer {
 			if (this.objectLevel > 0) {
 				this.textContainer = container;
 				this.textContainerTransform = transform;
+				this.textParentStyle = style;
 			}
 		} else {
 			const elem = document.createElementNS(svgNameSpace, 'tspan');
@@ -218,6 +235,7 @@ export default class SVGRenderer extends AbstractRenderer {
 		this.lastPathString = [];
 		this.lastPathStyle = null;
 		this.textContainer = null;
+		this.textParentStyle = null;
 		this.objectElems = [];
 	}