js-draw 0.17.3 → 0.18.0

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

@@ -0,0 +1,236 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Color4_1 = __importDefault(require("../../Color4"));
+const TextComponent_1 = __importDefault(require("../../components/TextComponent"));
+const Path_1 = __importDefault(require("../../math/Path"));
+const Vec2_1 = require("../../math/Vec2");
+const AbstractRenderer_1 = __importDefault(require("./AbstractRenderer"));
+/**
+ * Renders onto a `CanvasRenderingContext2D`.
+ *
+ * @example
+ * ```ts
+ * const editor = new Editor(document.body);
+ *
+ * const canvas = document.createElement('canvas');
+ * const ctx = canvas.getContext('2d');
+ *
+ * // Ensure that the canvas can fit the entire rendering
+ * const viewport = editor.image.getImportExportViewport();
+ * canvas.width = viewport.getScreenRectSize().x;
+ * canvas.height = viewport.getScreenRectSize().y;
+ *
+ * // Render editor.image onto the renderer
+ * const renderer = new CanvasRenderer(ctx, viewport);
+ * editor.image.render(renderer, viewport);
+ * ```
+ */
+class CanvasRenderer extends AbstractRenderer_1.default {
+    /**
+     * Creates a new `CanvasRenderer` that renders to the given rendering context.
+     * The `viewport` is used to determine the translation/rotation/scaling of the content
+     * to draw.
+     */
+    constructor(ctx, viewport) {
+        super(viewport);
+        this.ctx = ctx;
+        this.ignoreObjectsAboveLevel = null;
+        this.ignoringObject = false;
+        this.currentObjectBBox = null;
+        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;
+    }
+    renderFromOtherOfSameType(transformBy, other) {
+        if (!(other instanceof CanvasRenderer)) {
+            throw new Error(`${other} cannot be rendered onto ${this}`);
+        }
+        transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
+        this.ctx.save();
+        this.transformBy(transformBy);
+        this.ctx.drawImage(other.ctx.canvas, 0, 0);
+        this.ctx.restore();
+    }
+    // Set parameters for lower/higher quality rendering
+    setDraftMode(draftMode) {
+        if (draftMode) {
+            this.minSquareCurveApproxDist = 9;
+            this.minRenderSizeBothDimens = 2;
+            this.minRenderSizeAnyDimen = 0.5;
+        }
+        else {
+            this.minSquareCurveApproxDist = 0.5;
+            this.minRenderSizeBothDimens = 0.2;
+            this.minRenderSizeAnyDimen = 1e-6;
+        }
+    }
+    displaySize() {
+        return Vec2_1.Vec2.of(this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight);
+    }
+    clear() {
+        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    }
+    beginPath(startPoint) {
+        startPoint = this.canvasToScreen(startPoint);
+        this.ctx.beginPath();
+        this.ctx.moveTo(startPoint.x, startPoint.y);
+    }
+    endPath(style) {
+        this.ctx.fillStyle = style.fill.toHexString();
+        this.ctx.fill();
+        if (style.stroke) {
+            this.ctx.strokeStyle = style.stroke.color.toHexString();
+            this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
+            this.ctx.lineCap = 'round';
+            this.ctx.lineJoin = 'round';
+            this.ctx.stroke();
+        }
+        this.ctx.closePath();
+    }
+    lineTo(point) {
+        point = this.canvasToScreen(point);
+        this.ctx.lineTo(point.x, point.y);
+    }
+    moveTo(point) {
+        point = this.canvasToScreen(point);
+        this.ctx.moveTo(point.x, point.y);
+    }
+    traceCubicBezierCurve(p1, p2, p3) {
+        p1 = this.canvasToScreen(p1);
+        p2 = this.canvasToScreen(p2);
+        p3 = this.canvasToScreen(p3);
+        // Approximate the curve if small enough.
+        const delta1 = p2.minus(p1);
+        const delta2 = p3.minus(p2);
+        if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist
+            && delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
+            this.ctx.lineTo(p3.x, p3.y);
+        }
+        else {
+            this.ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
+        }
+    }
+    traceQuadraticBezierCurve(controlPoint, endPoint) {
+        controlPoint = this.canvasToScreen(controlPoint);
+        endPoint = this.canvasToScreen(endPoint);
+        // Approximate the curve with a line if small enough
+        const delta = controlPoint.minus(endPoint);
+        if (delta.magnitudeSquared() < this.minSquareCurveApproxDist) {
+            this.ctx.lineTo(endPoint.x, endPoint.y);
+        }
+        else {
+            this.ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
+        }
+    }
+    drawPath(path) {
+        var _a;
+        if (this.ignoringObject) {
+            return;
+        }
+        // If part of a huge object, it might be worth trimming the path
+        if ((_a = this.currentObjectBBox) === null || _a === void 0 ? void 0 : _a.containsRect(this.getViewport().visibleRect)) {
+            // Try to trim/remove parts of the path outside of the bounding box.
+            path = Path_1.default.visualEquivalent(path, this.getViewport().visibleRect);
+        }
+        super.drawPath(path);
+    }
+    drawText(text, transform, style) {
+        this.ctx.save();
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        this.transformBy(transform);
+        TextComponent_1.default.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();
+    }
+    drawImage(image) {
+        this.ctx.save();
+        const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
+        this.transformBy(transform);
+        this.ctx.drawImage(image.image, 0, 0);
+        this.ctx.restore();
+    }
+    startObject(boundingBox, clip) {
+        if (this.isTooSmallToRender(boundingBox)) {
+            this.ignoreObjectsAboveLevel = this.getNestingLevel();
+            this.ignoringObject = true;
+        }
+        super.startObject(boundingBox);
+        this.currentObjectBBox = boundingBox;
+        if (!this.ignoringObject && clip) {
+            this.clipLevels.push(this.objectLevel);
+            this.ctx.save();
+            this.ctx.beginPath();
+            for (const corner of boundingBox.corners) {
+                const screenCorner = this.canvasToScreen(corner);
+                this.ctx.lineTo(screenCorner.x, screenCorner.y);
+            }
+            this.ctx.clip();
+        }
+    }
+    endObject() {
+        if (!this.ignoringObject && this.clipLevels.length > 0) {
+            if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+                this.ctx.restore();
+                this.clipLevels.pop();
+            }
+        }
+        this.currentObjectBBox = null;
+        super.endObject();
+        // If exiting an object with a too-small-to-draw bounding box,
+        if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
+            this.ignoreObjectsAboveLevel = null;
+            this.ignoringObject = false;
+        }
+    }
+    // @internal
+    drawPoints(...points) {
+        const pointRadius = 10;
+        for (let i = 0; i < points.length; i++) {
+            const point = this.canvasToScreen(points[i]);
+            this.ctx.beginPath();
+            this.ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
+            this.ctx.fillStyle = Color4_1.default.ofRGBA(0.5 + Math.sin(i) / 2, 1.0, 0.5 + Math.cos(i * 0.2) / 4, 0.5).toHexString();
+            this.ctx.fill();
+            this.ctx.stroke();
+            this.ctx.closePath();
+            this.ctx.textAlign = 'center';
+            this.ctx.textBaseline = 'middle';
+            this.ctx.fillStyle = 'black';
+            this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
+        }
+    }
+    // @internal
+    isTooSmallToRender(rect) {
+        // Should we ignore all objects within this object's bbox?
+        const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
+        const bothDimenMinSize = this.minRenderSizeBothDimens;
+        const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
+        const anyDimenMinSize = this.minRenderSizeAnyDimen;
+        const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
+        return bothTooSmall || anyTooSmall;
+    }
+}
+exports.default = CanvasRenderer;

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

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Vec2_1 = require("../../math/Vec2");
+const AbstractRenderer_1 = __importDefault(require("./AbstractRenderer"));
+// Renderer that outputs almost nothing. Useful for automated tests.
+class DummyRenderer extends AbstractRenderer_1.default {
+    constructor(viewport) {
+        super(viewport);
+        // Variables that track the state of what's been rendered
+        this.clearedCount = 0;
+        this.renderedPathCount = 0;
+        this.lastFillStyle = null;
+        this.lastPoint = null;
+        this.objectNestingLevel = 0;
+        this.lastText = null;
+        this.lastImage = null;
+        // List of points drawn since the last clear.
+        this.pointBuffer = [];
+    }
+    displaySize() {
+        // Do we have a stored viewport size?
+        const viewportSize = this.getViewport().getScreenRectSize();
+        // Don't use a 0x0 viewport — DummyRenderer is often used
+        // for tests that run without a display, so pretend we have a
+        // reasonable-sized display.
+        if (viewportSize.x === 0 || viewportSize.y === 0) {
+            return Vec2_1.Vec2.of(640, 480);
+        }
+        return viewportSize;
+    }
+    clear() {
+        this.clearedCount++;
+        this.renderedPathCount = 0;
+        this.pointBuffer = [];
+        this.lastText = null;
+        this.lastImage = null;
+        // Ensure all objects finished rendering
+        if (this.objectNestingLevel > 0) {
+            throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
+        }
+    }
+    beginPath(startPoint) {
+        this.lastPoint = startPoint;
+        this.pointBuffer.push(startPoint);
+    }
+    endPath(style) {
+        this.renderedPathCount++;
+        this.lastFillStyle = style;
+    }
+    lineTo(point) {
+        point = this.canvasToScreen(point);
+        this.lastPoint = point;
+        this.pointBuffer.push(point);
+    }
+    moveTo(point) {
+        point = this.canvasToScreen(point);
+        this.lastPoint = point;
+        this.pointBuffer.push(point);
+    }
+    traceCubicBezierCurve(p1, p2, p3) {
+        p1 = this.canvasToScreen(p1);
+        p2 = this.canvasToScreen(p2);
+        p3 = this.canvasToScreen(p3);
+        this.lastPoint = p3;
+        this.pointBuffer.push(p1, p2, p3);
+    }
+    traceQuadraticBezierCurve(controlPoint, endPoint) {
+        controlPoint = this.canvasToScreen(controlPoint);
+        endPoint = this.canvasToScreen(endPoint);
+        this.lastPoint = endPoint;
+        this.pointBuffer.push(controlPoint, endPoint);
+    }
+    drawPoints(..._points) {
+        // drawPoints is intended for debugging.
+        // As such, it is unlikely to be the target of automated tests.
+    }
+    drawText(text, _transform, _style) {
+        this.lastText = text;
+    }
+    drawImage(image) {
+        this.lastImage = image;
+    }
+    startObject(boundingBox, _clip) {
+        super.startObject(boundingBox);
+        this.objectNestingLevel += 1;
+    }
+    endObject() {
+        super.endObject();
+        this.objectNestingLevel -= 1;
+    }
+    isTooSmallToRender(_rect) {
+        return false;
+    }
+    canRenderFromWithoutDataLoss(other) {
+        return other instanceof DummyRenderer;
+    }
+    renderFromOtherOfSameType(transform, other) {
+        if (!(other instanceof DummyRenderer)) {
+            throw new Error(`${other} cannot be rendered onto ${this}`);
+        }
+        this.renderedPathCount += other.renderedPathCount;
+        this.lastFillStyle = other.lastFillStyle;
+        this.lastPoint = other.lastPoint;
+        this.pointBuffer.push(...other.pointBuffer.map(point => {
+            return transform.transformVec2(point);
+        }));
+    }
+}
+exports.default = DummyRenderer;

package/dist/{src → cjs/src}/rendering/renderers/SVGRenderer.d.ts

@@ -7,6 +7,11 @@ import RenderingStyle from '../RenderingStyle';
 import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export declare const renderedStylesheetId = "js-draw-style-sheet";
+/**
+ * Renders onto an `SVGElement`.
+ *
+ * @see {@link Editor.toSVG}
+ */
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
     private sanitize;
@@ -14,6 +19,12 @@ export default class SVGRenderer extends AbstractRenderer {
     private lastPathString;
     private objectElems;
     private overwrittenAttrs;
+    /**
+     * Creates a renderer that renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+     *
+     * `viewport` is used to determine the translation/rotation/scaling/output size of the rendered
+     * data.
+     */
     constructor(elem: SVGSVGElement, viewport: Viewport, sanitize?: boolean);
     private addStyleSheet;
     setRootSVGAttribute(name: string, value: string | null): void;
@@ -39,4 +50,8 @@ export default class SVGRenderer extends AbstractRenderer {
     drawPoints(...points: Point2[]): void;
     drawSVGElem(elem: SVGElement): void;
     isTooSmallToRender(_rect: Rect2): boolean;
+    static fromViewport(viewport: Viewport, sanitize?: boolean): {
+        element: SVGSVGElement;
+        renderer: SVGRenderer;
+    };
 }

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

@@ -0,0 +1,311 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderedStylesheetId = void 0;
+const Mat33_1 = __importDefault(require("../../math/Mat33"));
+const Path_1 = __importDefault(require("../../math/Path"));
+const rounding_1 = require("../../math/rounding");
+const Vec2_1 = require("../../math/Vec2");
+const SVGLoader_1 = require("../../SVGLoader");
+const AbstractRenderer_1 = __importDefault(require("./AbstractRenderer"));
+exports.renderedStylesheetId = 'js-draw-style-sheet';
+const svgNameSpace = 'http://www.w3.org/2000/svg';
+/**
+ * Renders onto an `SVGElement`.
+ *
+ * @see {@link Editor.toSVG}
+ */
+class SVGRenderer extends AbstractRenderer_1.default {
+    /**
+     * Creates a renderer that renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+     *
+     * `viewport` is used to determine the translation/rotation/scaling/output size of the rendered
+     * data.
+     */
+    constructor(elem, viewport, sanitize = false) {
+        super(viewport);
+        this.elem = elem;
+        this.sanitize = sanitize;
+        this.lastPathStyle = null;
+        this.lastPathString = [];
+        this.objectElems = null;
+        this.overwrittenAttrs = {};
+        this.textContainer = null;
+        this.textContainerTransform = null;
+        this.textParentStyle = null;
+        this.clear();
+        this.addStyleSheet();
+    }
+    addStyleSheet() {
+        if (!this.elem.querySelector(`#${exports.renderedStylesheetId}`)) {
+            // Default to rounded strokes.
+            const styleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+            styleSheet.innerHTML = `
+				path {
+					stroke-linecap: round;
+					stroke-linejoin: round;
+				}
+
+				text {
+					white-space: pre;
+				}
+			`.replace(/\s+/g, '');
+            styleSheet.setAttribute('id', exports.renderedStylesheetId);
+            this.elem.appendChild(styleSheet);
+        }
+    }
+    // Sets an attribute on the root SVG element.
+    setRootSVGAttribute(name, value) {
+        if (this.sanitize) {
+            return;
+        }
+        // Make the original value of the attribute restorable on clear
+        if (!(name in this.overwrittenAttrs)) {
+            this.overwrittenAttrs[name] = this.elem.getAttribute(name);
+        }
+        if (value !== null) {
+            this.elem.setAttribute(name, value);
+        }
+        else {
+            this.elem.removeAttribute(name);
+        }
+    }
+    displaySize() {
+        return Vec2_1.Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
+    }
+    clear() {
+        this.lastPathString = [];
+        if (!this.sanitize) {
+            // Restore all all attributes
+            for (const attrName in this.overwrittenAttrs) {
+                const value = this.overwrittenAttrs[attrName];
+                if (value) {
+                    this.elem.setAttribute(attrName, value);
+                }
+                else {
+                    this.elem.removeAttribute(attrName);
+                }
+            }
+            this.overwrittenAttrs = {};
+        }
+    }
+    // Push [this.fullPath] to the SVG
+    addPathToSVG() {
+        var _a;
+        if (!this.lastPathStyle || this.lastPathString.length === 0) {
+            return;
+        }
+        const pathElem = document.createElementNS(svgNameSpace, 'path');
+        pathElem.setAttribute('d', this.lastPathString.join(' '));
+        const style = this.lastPathStyle;
+        if (style.fill.a > 0) {
+            pathElem.setAttribute('fill', style.fill.toHexString());
+        }
+        else {
+            pathElem.setAttribute('fill', 'none');
+        }
+        if (style.stroke) {
+            pathElem.setAttribute('stroke', style.stroke.color.toHexString());
+            pathElem.setAttribute('stroke-width', (0, rounding_1.toRoundedString)(style.stroke.width));
+        }
+        this.elem.appendChild(pathElem);
+        (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
+    }
+    drawPath(pathSpec) {
+        var _a;
+        const style = pathSpec.style;
+        const path = Path_1.default.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
+        // Try to extend the previous path, if possible
+        if (!style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) || this.lastPathString.length === 0) {
+            this.addPathToSVG();
+            this.lastPathStyle = style;
+            this.lastPathString = [];
+        }
+        this.lastPathString.push(path.toString());
+    }
+    // Apply [elemTransform] to [elem]. Uses both a `matrix` and `.x`, `.y` properties if `setXY` is true.
+    // Otherwise, just uses a `matrix`.
+    transformFrom(elemTransform, elem, inCanvasSpace = false, setXY = true) {
+        let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
+        const translation = transform.transformVec2(Vec2_1.Vec2.zero);
+        if (setXY) {
+            transform = transform.rightMul(Mat33_1.default.translation(translation.times(-1)));
+        }
+        if (!transform.eq(Mat33_1.default.identity)) {
+            elem.style.transform = `matrix(
+				${transform.a1}, ${transform.b1},
+				${transform.a2}, ${transform.b2},
+				${transform.a3}, ${transform.b3}
+			)`;
+        }
+        else {
+            elem.style.transform = '';
+        }
+        if (setXY) {
+            elem.setAttribute('x', `${(0, rounding_1.toRoundedString)(translation.x)}`);
+            elem.setAttribute('y', `${(0, rounding_1.toRoundedString)(translation.y)}`);
+        }
+    }
+    drawText(text, transform, style) {
+        var _a;
+        const applyTextStyles = (elem, style) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (style.fontFamily !== ((_a = this.textParentStyle) === null || _a === void 0 ? void 0 : _a.fontFamily)) {
+                elem.style.fontFamily = style.fontFamily;
+            }
+            if (style.fontVariant !== ((_b = this.textParentStyle) === null || _b === void 0 ? void 0 : _b.fontVariant)) {
+                elem.style.fontVariant = (_c = style.fontVariant) !== null && _c !== void 0 ? _c : '';
+            }
+            if (style.fontWeight !== ((_d = this.textParentStyle) === null || _d === void 0 ? void 0 : _d.fontWeight)) {
+                elem.style.fontWeight = (_e = style.fontWeight) !== null && _e !== void 0 ? _e : '';
+            }
+            if (style.size !== ((_f = this.textParentStyle) === null || _f === void 0 ? void 0 : _f.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;
+                elem.style.stroke = strokeStyle.color.toHexString();
+                elem.style.strokeWidth = strokeStyle.width + 'px';
+            }
+        };
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        if (!this.textContainer) {
+            const container = document.createElementNS(svgNameSpace, 'text');
+            container.appendChild(document.createTextNode(text));
+            // Don't set .x/.y properties (just use .style.transform).
+            // Child nodes aren't translated by .x/.y properties, but are by .style.transform.
+            const setXY = false;
+            this.transformFrom(transform, container, true, setXY);
+            applyTextStyles(container, style);
+            this.elem.appendChild(container);
+            (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(container);
+            if (this.objectLevel > 0) {
+                this.textContainer = container;
+                this.textContainerTransform = transform;
+                this.textParentStyle = style;
+            }
+        }
+        else {
+            const elem = document.createElementNS(svgNameSpace, 'tspan');
+            elem.appendChild(document.createTextNode(text));
+            this.textContainer.appendChild(elem);
+            // Make .x/.y relative to the parent.
+            transform = this.textContainerTransform.inverse().rightMul(transform);
+            // .style.transform does nothing to tspan elements. As such, we need to set x/y:
+            const translation = transform.transformVec2(Vec2_1.Vec2.zero);
+            elem.setAttribute('x', `${(0, rounding_1.toRoundedString)(translation.x)}`);
+            elem.setAttribute('y', `${(0, rounding_1.toRoundedString)(translation.y)}`);
+            applyTextStyles(elem, style);
+        }
+    }
+    drawImage(image) {
+        var _a, _b, _c, _d, _e, _f;
+        let label = (_b = (_a = image.label) !== null && _a !== void 0 ? _a : image.image.getAttribute('aria-label')) !== null && _b !== void 0 ? _b : '';
+        if (label === '') {
+            label = (_c = image.image.getAttribute('alt')) !== null && _c !== void 0 ? _c : '';
+        }
+        const svgImgElem = document.createElementNS(svgNameSpace, 'image');
+        svgImgElem.setAttribute('href', image.base64Url);
+        svgImgElem.setAttribute('width', (_d = image.image.getAttribute('width')) !== null && _d !== void 0 ? _d : '');
+        svgImgElem.setAttribute('height', (_e = image.image.getAttribute('height')) !== null && _e !== void 0 ? _e : '');
+        svgImgElem.setAttribute('aria-label', label);
+        this.transformFrom(image.transform, svgImgElem);
+        this.elem.appendChild(svgImgElem);
+        (_f = this.objectElems) === null || _f === void 0 ? void 0 : _f.push(svgImgElem);
+    }
+    startObject(boundingBox) {
+        super.startObject(boundingBox);
+        // Only accumulate a path within an object
+        this.lastPathString = [];
+        this.lastPathStyle = null;
+        this.textContainer = null;
+        this.textParentStyle = null;
+        this.objectElems = [];
+    }
+    endObject(loaderData, elemClassNames) {
+        var _a, _b;
+        super.endObject(loaderData);
+        // Don't extend paths across objects
+        this.addPathToSVG();
+        if (loaderData && !this.sanitize) {
+            // Restore any attributes unsupported by the app.
+            for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
+                const attrs = loaderData[SVGLoader_1.svgAttributesDataKey];
+                const styleAttrs = loaderData[SVGLoader_1.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);
+                    }
+                }
+            }
+        }
+        // Add class names to the object, if given.
+        if (elemClassNames) {
+            for (const elem of (_b = this.objectElems) !== null && _b !== void 0 ? _b : []) {
+                elem.classList.add(...elemClassNames);
+            }
+        }
+    }
+    // Not implemented -- use drawPath instead.
+    unimplementedMessage() { throw new Error('Not implemenented!'); }
+    beginPath(_startPoint) { this.unimplementedMessage(); }
+    endPath(_style) { this.unimplementedMessage(); }
+    lineTo(_point) { this.unimplementedMessage(); }
+    moveTo(_point) { this.unimplementedMessage(); }
+    traceCubicBezierCurve(_controlPoint1, _controlPoint2, _endPoint) { this.unimplementedMessage(); }
+    traceQuadraticBezierCurve(_controlPoint, _endPoint) { this.unimplementedMessage(); }
+    drawPoints(...points) {
+        points.map(point => {
+            const elem = document.createElementNS(svgNameSpace, 'circle');
+            elem.setAttribute('cx', `${point.x}`);
+            elem.setAttribute('cy', `${point.y}`);
+            elem.setAttribute('r', '15');
+            this.elem.appendChild(elem);
+        });
+    }
+    // Renders a **copy** of the given element.
+    drawSVGElem(elem) {
+        if (this.sanitize) {
+            return;
+        }
+        // Don't add multiple copies of the default stylesheet.
+        if (elem.tagName.toLowerCase() === 'style' && elem.getAttribute('id') === exports.renderedStylesheetId) {
+            return;
+        }
+        this.elem.appendChild(elem.cloneNode(true));
+    }
+    isTooSmallToRender(_rect) {
+        return false;
+    }
+    // Creates a new SVG element and SVGRenerer with attributes set for the given Viewport.
+    static fromViewport(viewport, sanitize = true) {
+        const svgNameSpace = 'http://www.w3.org/2000/svg';
+        const result = document.createElementNS(svgNameSpace, 'svg');
+        const rect = viewport.getScreenRectSize();
+        // rect.x -> size of rect in x direction, rect.y -> size of rect in y direction.
+        result.setAttribute('viewBox', [0, 0, rect.x, rect.y].map(part => (0, rounding_1.toRoundedString)(part)).join(' '));
+        result.setAttribute('width', (0, rounding_1.toRoundedString)(rect.x));
+        result.setAttribute('height', (0, rounding_1.toRoundedString)(rect.y));
+        // Ensure the image can be identified as an SVG if downloaded.
+        // See https://jwatt.org/svg/authoring/
+        result.setAttribute('version', '1.1');
+        result.setAttribute('baseProfile', 'full');
+        result.setAttribute('xmlns', svgNameSpace);
+        return { element: result, renderer: new SVGRenderer(result, viewport, sanitize) };
+    }
+}
+exports.default = SVGRenderer;