js-draw 0.9.3 → 0.10.0

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

@@ -24,15 +24,19 @@ export default class PanZoom extends BaseTool {
     private lastAngle;
     private lastDist;
     private lastScreenCenter;
+    private lastTimestamp;
+    private inertialScroller;
+    private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
     computePinchData(p1: Pointer, p2: Pointer): PinchData;
     private allPointersAreOfType;
     onPointerDown({ allPointers: pointers }: PointerEvt): boolean;
+    private updateVelocity;
     private getCenterDelta;
     private handleTwoFingerMove;
     private handleOneFingerMove;
     onPointerMove({ allPointers }: PointerEvt): void;
-    onPointerUp(_event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
     private updateTransform;
     onWheel({ delta, screenPos }: WheelEvt): boolean;

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

@@ -2,7 +2,7 @@ import Color4 from '../Color4';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-type ColorListener = (color: Color4 | null) => void;
+declare 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 type DragStartCallback = (startPoint: Point2) => void;
-export type DragUpdateCallback = (canvasPoint: Point2) => void;
-export type DragEndCallback = () => void;
+export declare type DragStartCallback = (startPoint: Point2) => void;
+export declare type DragUpdateCallback = (canvasPoint: Point2) => void;
+export declare type DragEndCallback = () => void;
 export default class SelectionHandle {
     readonly shape: HandleShape;
     private readonly parentSide;

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

@@ -1,7 +1,7 @@
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
-type KeyPressListener = (event: KeyPressEvent) => boolean;
+declare 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 type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
-export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
+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 declare enum EditorEventType {
     ToolEnabled = 0,
     ToolDisabled = 1,
@@ -85,7 +85,7 @@ export declare enum EditorEventType {
     ColorPickerColorSelected = 10,
     ToolbarDropdownShown = 11
 }
-type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
+declare 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 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 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 interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;
 }

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.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",

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>