js-draw 0.1.1 → 0.1.4

package/dist/src/geometry/Mat33.js

@@ -186,5 +186,35 @@ export default class Mat33 {
         // Translate such that [center] goes to (0, 0)
         return result.rightMul(Mat33.translation(center.times(-1)));
     }
+    // Converts a CSS-form matrix(a, b, c, d, e, f) to a Mat33.
+    static fromCSSMatrix(cssString) {
+        if (cssString === '' || cssString === 'none') {
+            return Mat33.identity;
+        }
+        const numberExp = '([-]?\\d*(?:\\.\\d*)?(?:[eE][-]?\\d+)?)';
+        const numberSepExp = '[, \\t\\n]';
+        const regExpSource = `^\\s*matrix\\s*\\(${[
+            // According to MDN, matrix(a,b,c,d,e,f) has form:
+            // 		⎡ a c e ⎤
+            // 		⎢ b d f ⎥
+            // 		⎣ 0 0 1 ⎦
+            numberExp, numberExp, numberExp,
+            numberExp, numberExp, numberExp, // b, d, f
+        ].join(`${numberSepExp}+`)}${numberSepExp}*\\)\\s*$`;
+        const matrixExp = new RegExp(regExpSource, 'i');
+        const match = matrixExp.exec(cssString);
+        if (!match) {
+            throw new Error(`Unsupported transformation: ${cssString}`);
+        }
+        const matrixData = match.slice(1).map(entry => parseFloat(entry));
+        const a = matrixData[0];
+        const b = matrixData[1];
+        const c = matrixData[2];
+        const d = matrixData[3];
+        const e = matrixData[4];
+        const f = matrixData[5];
+        const transform = new Mat33(a, c, e, b, d, f, 0, 0, 1);
+        return transform;
+    }
 }
 Mat33.identity = new Mat33(1, 0, 0, 0, 1, 0, 0, 0, 1);

package/dist/src/geometry/Path.js

@@ -220,6 +220,7 @@ export default class Path {
                 const lastDigit = parseInt(text.charAt(text.length - 1), 10);
                 const postDecimal = parseInt(roundingDownMatch[3], 10);
                 const preDecimal = parseInt(roundingDownMatch[2], 10);
+                const origPostDecimalString = roundingDownMatch[3];
                 let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
                 let carry = 0;
                 if (newPostDecimal.length > postDecimal.toString().length) {
@@ -227,11 +228,17 @@ export default class Path {
                     newPostDecimal = newPostDecimal.substring(1);
                     carry = 1;
                 }
+                // parseInt(...).toString() removes leading zeroes. Add them back.
+                while (newPostDecimal.length < origPostDecimalString.length) {
+                    newPostDecimal = carry.toString(10) + newPostDecimal;
+                    carry = 0;
+                }
                 text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
             }
             text = text.replace(fixRoundingUpExp, '$1');
             // Remove trailing zeroes
-            text = text.replace(/([.][^0]*)0+$/, '$1');
+            text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+            text = text.replace(/[.]0+$/, '.');
             // Remove trailing period
             return text.replace(/[.]$/, '');
         };
@@ -275,10 +282,12 @@ export default class Path {
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
         // and
         // https://www.w3.org/TR/SVG2/paths.html
+        var _a;
         // Remove linebreaks
         pathString = pathString.split('\n').join(' ');
         let lastPos = Vec2.zero;
         let firstPos = null;
+        let startPos = null;
         let isFirstCommand = true;
         const commands = [];
         const moveTo = (point) => {
@@ -317,15 +326,61 @@ export default class Path {
                 endPoint,
             });
         };
+        const commandArgCounts = {
+            'm': 1,
+            'l': 1,
+            'c': 3,
+            'q': 2,
+            'z': 0,
+            'h': 1,
+            'v': 1,
+        };
         // Each command: Command character followed by anything that isn't a command character
-        const commandExp = /([MmZzLlHhVvCcSsQqTtAa])\s*([^a-zA-Z]*)/g;
+        const commandExp = /([MZLHVCSQTA])\s*([^MZLHVCSQTA]*)/ig;
         let current;
         while ((current = commandExp.exec(pathString)) !== null) {
-            const argParts = current[2].trim().split(/[^0-9.-]/).filter(part => part.length > 0);
-            const numericArgs = argParts.map(arg => parseFloat(arg));
-            const commandChar = current[1];
-            const uppercaseCommand = commandChar !== commandChar.toLowerCase();
-            const args = numericArgs.reduce((accumulator, current, index, parts) => {
+            const argParts = current[2].trim().split(/[^0-9Ee.-]/).filter(part => part.length > 0).reduce((accumualtor, current) => {
+                // As of 09/2022, iOS Safari doesn't support support lookbehind in regular
+                // expressions. As such, we need an alternative.
+                // Because '-' can be used as a path separator, unless preceeded by an 'e' (as in 1e-5),
+                // we need special cases:
+                current = current.replace(/([^eE])[-]/g, '$1 -');
+                const parts = current.split(' -');
+                if (parts[0] !== '') {
+                    accumualtor.push(parts[0]);
+                }
+                accumualtor.push(...parts.slice(1).map(part => `-${part}`));
+                return accumualtor;
+            }, []);
+            let numericArgs = argParts.map(arg => parseFloat(arg));
+            let commandChar = current[1].toLowerCase();
+            let uppercaseCommand = current[1] !== commandChar;
+            // Convert commands that don't take points into commands that do.
+            if (commandChar === 'v' || commandChar === 'h') {
+                numericArgs = numericArgs.reduce((accumulator, current) => {
+                    if (commandChar === 'v') {
+                        return accumulator.concat(uppercaseCommand ? lastPos.x : 0, current);
+                    }
+                    else {
+                        return accumulator.concat(current, uppercaseCommand ? lastPos.y : 0);
+                    }
+                }, []);
+                commandChar = 'l';
+            }
+            else if (commandChar === 'z') {
+                if (firstPos) {
+                    numericArgs = [firstPos.x, firstPos.y];
+                    firstPos = lastPos;
+                }
+                else {
+                    continue;
+                }
+                // 'z' always acts like an uppercase lineTo(startPos)
+                uppercaseCommand = true;
+                commandChar = 'l';
+            }
+            const commandArgCount = (_a = commandArgCounts[commandChar]) !== null && _a !== void 0 ? _a : 0;
+            const allArgs = numericArgs.reduce((accumulator, current, index, parts) => {
                 if (index % 2 !== 0) {
                     const currentAsFloat = current;
                     const prevAsFloat = parts[index - 1];
@@ -334,76 +389,59 @@ export default class Path {
                 else {
                     return accumulator;
                 }
-            }, []).map((coordinate) => {
+            }, []).map((coordinate, index) => {
                 // Lowercase commands are relative, uppercase commands use absolute
                 // positioning
+                let newPos;
                 if (uppercaseCommand) {
-                    lastPos = coordinate;
-                    return coordinate;
+                    newPos = coordinate;
                 }
                 else {
-                    lastPos = lastPos.plus(coordinate);
-                    return lastPos;
+                    newPos = lastPos.plus(coordinate);
+                }
+                if ((index + 1) % commandArgCount === 0) {
+                    lastPos = newPos;
                 }
+                return newPos;
             });
-            let expectedPointArgCount;
-            switch (commandChar.toLowerCase()) {
-                case 'm':
-                    expectedPointArgCount = 1;
-                    moveTo(args[0]);
-                    break;
-                case 'l':
-                    expectedPointArgCount = 1;
-                    lineTo(args[0]);
-                    break;
-                case 'z':
-                    expectedPointArgCount = 0;
-                    // firstPos can be null if the stroke data is just 'z'.
-                    if (firstPos) {
-                        lineTo(firstPos);
-                    }
-                    break;
-                case 'c':
-                    expectedPointArgCount = 3;
-                    cubicBezierTo(args[0], args[1], args[2]);
-                    break;
-                case 'q':
-                    expectedPointArgCount = 2;
-                    quadraticBeierTo(args[0], args[1]);
-                    break;
-                // Horizontal line
-                case 'h':
-                    expectedPointArgCount = 0;
-                    if (uppercaseCommand) {
-                        lineTo(Vec2.of(numericArgs[0], lastPos.y));
-                    }
-                    else {
-                        lineTo(lastPos.plus(Vec2.of(numericArgs[0], 0)));
-                    }
-                    break;
-                // Vertical line
-                case 'v':
-                    expectedPointArgCount = 0;
-                    if (uppercaseCommand) {
-                        lineTo(Vec2.of(lastPos.x, numericArgs[1]));
-                    }
-                    else {
-                        lineTo(lastPos.plus(Vec2.of(0, numericArgs[1])));
-                    }
-                    break;
-                default:
-                    throw new Error(`Unknown path command ${commandChar}`);
+            if (allArgs.length % commandArgCount !== 0) {
+                throw new Error([
+                    `Incorrect number of arguments: got ${JSON.stringify(allArgs)} with a length of ${allArgs.length} ≠ ${commandArgCount}k, k ∈ ℤ.`,
+                    `The number of arguments to ${commandChar} must be a multiple of ${commandArgCount}!`,
+                    `Command: ${current[0]}`,
+                ].join('\n'));
             }
-            if (args.length !== expectedPointArgCount) {
-                throw new Error(`
-					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
-				`.trim());
+            for (let argPos = 0; argPos < allArgs.length; argPos += commandArgCount) {
+                const args = allArgs.slice(argPos, argPos + commandArgCount);
+                switch (commandChar.toLowerCase()) {
+                    case 'm':
+                        if (argPos === 0) {
+                            moveTo(args[0]);
+                        }
+                        else {
+                            lineTo(args[0]);
+                        }
+                        break;
+                    case 'l':
+                        lineTo(args[0]);
+                        break;
+                    case 'c':
+                        cubicBezierTo(args[0], args[1], args[2]);
+                        break;
+                    case 'q':
+                        quadraticBeierTo(args[0], args[1]);
+                        break;
+                    default:
+                        throw new Error(`Unknown path command ${commandChar}`);
+                }
+                isFirstCommand = false;
             }
-            if (args.length > 0) {
-                firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = args[0]);
+            if (allArgs.length > 0) {
+                firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = allArgs[0]);
+                startPos !== null && startPos !== void 0 ? startPos : (startPos = firstPos);
+                lastPos = allArgs[allArgs.length - 1];
             }
-            isFirstCommand = false;
         }
-        return new Path(firstPos !== null && firstPos !== void 0 ? firstPos : Vec2.zero, commands);
+        return new Path(startPos !== null && startPos !== void 0 ? startPos : Vec2.zero, commands);
     }
 }

package/dist/src/geometry/Rect2.d.ts

@@ -34,6 +34,8 @@ export default class Rect2 {
     get maxDimension(): number;
     get topRight(): import("./Vec3").default;
     get bottomLeft(): import("./Vec3").default;
+    get width(): number;
+    get height(): number;
     getEdges(): LineSegment2[];
     transformedBoundingBox(affineTransform: Mat33): Rect2;
     /** @return true iff this is equal to [other] ± fuzz */

package/dist/src/geometry/Rect2.js

@@ -126,6 +126,12 @@ export default class Rect2 {
     get bottomLeft() {
         return this.topLeft.plus(Vec2.of(0, this.h));
     }
+    get width() {
+        return this.w;
+    }
+    get height() {
+        return this.h;
+    }
     // Returns edges in the order
     // [ rightEdge, topEdge, leftEdge, bottomEdge ]
     getEdges() {

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,4 +1,6 @@
 import Color4 from '../../Color4';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import { PathCommand } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
@@ -19,6 +21,7 @@ export interface RenderablePathSpec {
 export default abstract class AbstractRenderer {
     private viewport;
     private selfTransform;
+    private transformStack;
     protected constructor(viewport: Viewport);
     protected getViewport(): Viewport;
     abstract displaySize(): Vec2;
@@ -29,6 +32,7 @@ export default abstract class AbstractRenderer {
     protected abstract moveTo(point: Point2): void;
     protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
+    abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;
     protected objectLevel: number;
@@ -37,12 +41,14 @@ export default abstract class AbstractRenderer {
     drawPath(path: RenderablePathSpec): void;
     drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
     startObject(_boundingBox: Rect2, _clip?: boolean): void;
-    endObject(): void;
+    endObject(_loaderData?: LoadSaveDataTable): void;
     protected getNestingLevel(): number;
     abstract drawPoints(...points: Point2[]): void;
     canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer): void;
     setTransform(transform: Mat33 | null): void;
+    pushTransform(transform: Mat33): void;
+    popTransform(): void;
     getCanvasToScreenTransform(): Mat33;
     canvasToScreen(vec: Vec2): Vec2;
     getSizeOfCanvasPixelOnScreen(): number;

package/dist/src/rendering/renderers/AbstractRenderer.js

@@ -11,6 +11,7 @@ export default class AbstractRenderer {
         this.viewport = viewport;
         // If null, this' transformation is linked to the Viewport
         this.selfTransform = null;
+        this.transformStack = [];
         this.objectLevel = 0;
         this.currentPaths = null;
     }
@@ -79,7 +80,7 @@ export default class AbstractRenderer {
         this.currentPaths = [];
         this.objectLevel++;
     }
-    endObject() {
+    endObject(_loaderData) {
         // Render the paths all at once
         this.flushPath();
         this.currentPaths = null;
@@ -104,6 +105,17 @@ export default class AbstractRenderer {
     setTransform(transform) {
         this.selfTransform = transform;
     }
+    pushTransform(transform) {
+        this.transformStack.push(this.selfTransform);
+        this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+    }
+    popTransform() {
+        var _a;
+        if (this.transformStack.length === 0) {
+            throw new Error('Unable to pop more transforms than have been pushed!');
+        }
+        this.setTransform((_a = this.transformStack.pop()) !== null && _a !== void 0 ? _a : null);
+    }
     // Get the matrix that transforms a vector on the canvas to a vector on this'
     // rendering target.
     getCanvasToScreenTransform() {

package/dist/src/rendering/renderers/CanvasRenderer.d.ts

@@ -1,3 +1,4 @@
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -12,6 +13,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     private minRenderSizeAnyDimen;
     private minRenderSizeBothDimens;
     constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
+    private transformBy;
     canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
     renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void;
     setDraftMode(draftMode: boolean): void;
@@ -24,6 +26,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip: boolean): void;
     endObject(): void;

package/dist/src/rendering/renderers/CanvasRenderer.js

@@ -1,4 +1,5 @@
 import Color4 from '../../Color4';
+import Text from '../../components/Text';
 import { Vec2 } from '../../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
@@ -10,6 +11,16 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.clipLevels = [];
         this.setDraftMode(false);
     }
+    transformBy(transformBy) {
+        // From MDN, transform(a,b,c,d,e,f)
+        // takes input such that
+        // ⎡ a c e ⎤
+        // ⎢ b d f ⎥ transforms content drawn to [ctx].
+        // ⎣ 0 0 1 ⎦
+        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
+        transformBy.a2, transformBy.b2, // c, d
+        transformBy.a3, transformBy.b3);
+    }
     canRenderFromWithoutDataLoss(other) {
         return other instanceof CanvasRenderer;
     }
@@ -19,14 +30,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
         this.ctx.save();
-        // From MDN, transform(a,b,c,d,e,f)
-        // takes input such that
-        // ⎡ a c e ⎤
-        // ⎢ b d f ⎥ transforms content drawn to [ctx].
-        // ⎣ 0 0 1 ⎦
-        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
-        transformBy.a2, transformBy.b2, // c, d
-        transformBy.a3, transformBy.b3);
+        this.transformBy(transformBy);
         this.ctx.drawImage(other.ctx.canvas, 0, 0);
         this.ctx.restore();
     }
@@ -105,6 +109,22 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         super.drawPath(path);
     }
+    drawText(text, transform, style) {
+        this.ctx.save();
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        this.transformBy(transform);
+        Text.applyTextStyles(this.ctx, style);
+        if (style.renderingStyle.fill.a !== 0) {
+            this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
+            this.ctx.fillText(text, 0, 0);
+        }
+        if (style.renderingStyle.stroke) {
+            this.ctx.strokeStyle = style.renderingStyle.stroke.color.toHexString();
+            this.ctx.lineWidth = style.renderingStyle.stroke.width;
+            this.ctx.strokeText(text, 0, 0);
+        }
+        this.ctx.restore();
+    }
     startObject(boundingBox, clip) {
         if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();

package/dist/src/rendering/renderers/DummyRenderer.d.ts

@@ -1,3 +1,4 @@
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -10,6 +11,7 @@ export default class DummyRenderer extends AbstractRenderer {
     lastFillStyle: RenderingStyle | null;
     lastPoint: Point2 | null;
     objectNestingLevel: number;
+    lastText: string | null;
     pointBuffer: Point2[];
     constructor(viewport: Viewport);
     displaySize(): Vec2;
@@ -21,6 +23,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
+    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
     isTooSmallToRender(_rect: Rect2): boolean;

package/dist/src/rendering/renderers/DummyRenderer.js

@@ -10,6 +10,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.lastFillStyle = null;
         this.lastPoint = null;
         this.objectNestingLevel = 0;
+        this.lastText = null;
         // List of points drawn since the last clear.
         this.pointBuffer = [];
     }
@@ -28,6 +29,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.clearedCount++;
         this.renderedPathCount = 0;
         this.pointBuffer = [];
+        this.lastText = null;
         // Ensure all objects finished rendering
         if (this.objectNestingLevel > 0) {
             throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
@@ -68,6 +70,9 @@ export default class DummyRenderer extends AbstractRenderer {
         // drawPoints is intended for debugging.
         // As such, it is unlikely to be the target of automated tests.
     }
+    drawText(text, _transform, _style) {
+        this.lastText = text;
+    }
     startObject(boundingBox, _clip) {
         super.startObject(boundingBox);
         this.objectNestingLevel += 1;

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -1,3 +1,6 @@
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Viewport from '../../Viewport';
@@ -9,7 +12,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private lastPathStyle;
     private lastPath;
     private lastPathStart;
-    private mainGroup;
+    private objectElems;
     private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport);
     setRootSVGAttribute(name: string, value: string | null): void;
@@ -18,8 +21,9 @@ export default class SVGRenderer extends AbstractRenderer {
     protected beginPath(startPoint: Point2): void;
     protected endPath(style: RenderingStyle): void;
     private addPathToSVG;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
     startObject(boundingBox: Rect2): void;
-    endObject(): void;
+    endObject(loaderData?: LoadSaveDataTable): void;
     protected lineTo(point: Point2): void;
     protected moveTo(point: Point2): void;
     protected traceCubicBezierCurve(controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2): void;

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -1,11 +1,13 @@
 import Path, { PathCommandType } from '../../geometry/Path';
 import { Vec2 } from '../../geometry/Vec2';
+import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
     constructor(elem, viewport) {
         super(viewport);
         this.elem = elem;
+        this.objectElems = null;
         this.overwrittenAttrs = {};
         this.clear();
     }
@@ -26,7 +28,6 @@ export default class SVGRenderer extends AbstractRenderer {
         return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
     }
     clear() {
-        this.mainGroup = document.createElementNS(svgNameSpace, 'g');
         // Restore all alltributes
         for (const attrName in this.overwrittenAttrs) {
             const value = this.overwrittenAttrs[attrName];
@@ -38,8 +39,6 @@ export default class SVGRenderer extends AbstractRenderer {
             }
         }
         this.overwrittenAttrs = {};
-        // Remove all children
-        this.elem.replaceChildren(this.mainGroup);
     }
     beginPath(startPoint) {
         var _a;
@@ -72,6 +71,7 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Push [this.fullPath] to the SVG
     addPathToSVG() {
+        var _a;
         if (!this.lastPathStyle || !this.lastPath) {
             return;
         }
@@ -83,7 +83,31 @@ export default class SVGRenderer extends AbstractRenderer {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
             pathElem.setAttribute('stroke-width', style.stroke.width.toString());
         }
-        this.mainGroup.appendChild(pathElem);
+        this.elem.appendChild(pathElem);
+        (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
+    }
+    drawText(text, transform, style) {
+        var _a, _b, _c;
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        const textElem = document.createElementNS(svgNameSpace, 'text');
+        textElem.appendChild(document.createTextNode(text));
+        textElem.style.transform = `matrix(
+			${transform.a1}, ${transform.b1},
+			${transform.a2}, ${transform.b2},
+			${transform.a3}, ${transform.b3}
+		)`;
+        textElem.style.fontFamily = style.fontFamily;
+        textElem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
+        textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
+        textElem.style.fontSize = style.size + 'px';
+        textElem.style.fill = style.renderingStyle.fill.toHexString();
+        if (style.renderingStyle.stroke) {
+            const strokeStyle = style.renderingStyle.stroke;
+            textElem.style.stroke = strokeStyle.color.toHexString();
+            textElem.style.strokeWidth = strokeStyle.width + 'px';
+        }
+        this.elem.appendChild(textElem);
+        (_c = this.objectElems) === null || _c === void 0 ? void 0 : _c.push(textElem);
     }
     startObject(boundingBox) {
         super.startObject(boundingBox);
@@ -91,11 +115,30 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPath = null;
         this.lastPathStart = null;
         this.lastPathStyle = null;
+        this.objectElems = [];
     }
-    endObject() {
-        super.endObject();
+    endObject(loaderData) {
+        var _a;
+        super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
+        if (loaderData) {
+            // Restore any attributes unsupported by the app.
+            for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
+                const attrs = loaderData[svgAttributesDataKey];
+                const styleAttrs = loaderData[svgStyleAttributesDataKey];
+                if (attrs) {
+                    for (const [attr, value] of attrs) {
+                        elem.setAttribute(attr, value);
+                    }
+                }
+                if (styleAttrs) {
+                    for (const attr of styleAttrs) {
+                        elem.style.setProperty(attr.key, attr.value, attr.priority);
+                    }
+                }
+            }
+        }
     }
     lineTo(point) {
         point = this.canvasToScreen(point);
@@ -137,7 +180,7 @@ export default class SVGRenderer extends AbstractRenderer {
             elem.setAttribute('cx', `${point.x}`);
             elem.setAttribute('cy', `${point.y}`);
             elem.setAttribute('r', '15');
-            this.mainGroup.appendChild(elem);
+            this.elem.appendChild(elem);
         });
     }
     // Renders a **copy** of the given element.

package/dist/src/testing/loadExpectExtensions.js

@@ -15,10 +15,7 @@ export const loadExpectExtensions = () => {
             return {
                 pass,
                 message: () => {
-                    if (pass) {
-                        return `Expected ${expected} not to .eq ${actual}. Options(${eqArgs})`;
-                    }
-                    return `Expected ${expected} to .eq ${actual}. Options(${eqArgs})`;
+                    return `Expected ${pass ? '!' : ''}(${actual}).eq(${expected}). Options(${eqArgs})`;
                 },
             };
         },

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -1,5 +1,6 @@
 import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
+import { ActionButtonIcon } from './types';
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
@@ -7,7 +8,7 @@ export default class HTMLToolbar {
     private penTypes;
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
-    addActionButton(text: string, command: () => void, parent?: Element): HTMLButtonElement;
+    addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;
     private addUndoRedoButtons;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;