js-draw 0.9.2 → 0.10.0

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,25 @@ 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;
+        const currentVelocity = deltaPos.times(1 / deltaTime);
+        let smoothedVelocity = currentVelocity;
+        if (deltaTime === 0) {
+            return;
+        }
+        if (this.velocity) {
+            smoothedVelocity = this.velocity.lerp(smoothedVelocity, 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 +139,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 +151,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 +166,42 @@ 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) {
+            (_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 +221,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 +236,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/tools/TextTool.js

@@ -108,8 +108,10 @@ export default class TextTool extends BaseTool {
         this.textInputElem.style.margin = '0';
         this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
         this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
+        // Get the ascent based on the font, using a character that is tall in most fonts.
+        const tallCharacter = '⎢';
+        const ascent = this.getTextAscent(tallCharacter, this.textStyle);
         const rotation = this.textRotation + viewport.getRotationAngle();
-        const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
         const scale = this.getTextScaleMatrix();
         this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
         this.textInputElem.style.transformOrigin = 'top left';
@@ -171,7 +173,11 @@ export default class TextTool extends BaseTool {
             const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
             const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
-            const targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
+            let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
+            // Don't try to edit text nodes that contain the viewport (this allows us
+            // to zoom in on text nodes and add text on top of them.)
+            const visibleRect = this.editor.viewport.visibleRect;
+            targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
             // End any TextNodes we're currently editing.
             this.flushInput();
             if (targetTextNodes.length > 0) {

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.2",
+	"version": "0.10.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",
@@ -83,27 +83,27 @@
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.0.3",
-		"@types/jsdom": "^20.0.0",
-		"@types/node": "^18.7.23",
-		"@typescript-eslint/eslint-plugin": "^5.38.1",
-		"@typescript-eslint/parser": "^5.38.1",
-		"css-loader": "^6.7.1",
-		"eslint": "^8.24.0",
-		"husky": "^8.0.1",
-		"jest": "^29.0.3",
-		"jest-environment-jsdom": "^29.0.3",
-		"jsdom": "^20.0.0",
+		"@types/jest": "^29.2.3",
+		"@types/jsdom": "^20.0.1",
+		"@types/node": "^18.11.9",
+		"@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",
+		"jest-environment-jsdom": "^29.3.1",
+		"jsdom": "^20.0.3",
 		"lint-staged": "^13.0.3",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.1",
 		"terser-webpack-plugin": "^5.3.6",
-		"ts-jest": "^29.0.2",
+		"ts-jest": "^29.0.3",
 		"ts-loader": "^9.4.1",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.15",
-		"typescript": "^4.8.3",
-		"webpack": "^5.74.0"
+		"typedoc": "^0.23.21",
+		"typescript": "^4.9.3",
+		"webpack": "^5.75.0"
 	},
 	"bugs": {
 		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"

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

@@ -55,7 +55,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 			fill: Color4.transparent,
 			stroke: {
 				color: this.startPoint.color,
-				width: this.averageWidth,
+				width: this.roundDistance(this.averageWidth / 2),
 			}
 		};
 	}
@@ -107,16 +107,26 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		return this.previewStroke()!;
 	}
 
-	private roundPoint(point: Point2): Point2 {
-		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 2);
+	private getMinFit(): number {
+		let minFit = Math.min(this.minFitAllowed, this.averageWidth / 5);
 
 		if (minFit < 1e-10) {
 			minFit = this.minFitAllowed;
 		}
+		
+		return minFit;
+	}
 
+	private roundPoint(point: Point2): Point2 {
+		const minFit = this.getMinFit();
 		return Viewport.roundPoint(point, minFit);
 	}
 
+	private roundDistance(dist: number): number {
+		const minFit = this.getMinFit();
+		return Viewport.roundPoint(dist, minFit);
+	}
+
 	private curveToPathCommands(curve: Curve|null): PathCommand[] {
 		// Case where no points have been added
 		if (!curve) {
@@ -125,7 +135,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				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 / 9, Math.min(this.minFitAllowed, this.startPoint.width / 5));
 			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;