js-draw 0.25.1 → 1.0.1

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

@@ -1,42 +1,18 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderedStylesheetId = void 0;
-var Mat33_1 = require("../../math/Mat33");
-var Path_1 = require("../../math/shapes/Path");
-var rounding_1 = require("../../math/rounding");
-var Vec2_1 = require("../../math/Vec2");
-var SVGLoader_1 = require("../../SVGLoader");
-var RenderingStyle_1 = require("../RenderingStyle");
-var AbstractRenderer_1 = require("./AbstractRenderer");
+const math_1 = require("@js-draw/math");
+const SVGLoader_1 = require("../../SVGLoader");
+const RenderingStyle_1 = require("../RenderingStyle");
+const AbstractRenderer_1 = __importDefault(require("./AbstractRenderer"));
+const RenderablePathSpec_1 = require("../RenderablePathSpec");
+const listPrefixMatch_1 = __importDefault(require("../../util/listPrefixMatch"));
 exports.renderedStylesheetId = 'js-draw-style-sheet';
-var svgNameSpace = 'http://www.w3.org/2000/svg';
-var defaultTextStyle = {
+const svgNameSpace = 'http://www.w3.org/2000/svg';
+const defaultTextStyle = {
     fontWeight: '400',
     fontStyle: 'normal',
 };
@@ -45,41 +21,50 @@ var defaultTextStyle = {
  *
  * @see {@link Editor.toSVG}
  */
-var SVGRenderer = /** @class */ (function (_super) {
-    __extends(SVGRenderer, _super);
+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.
      */
-    function SVGRenderer(elem, viewport, sanitize) {
-        if (sanitize === void 0) { sanitize = false; }
-        var _this = _super.call(this, viewport) || this;
-        _this.elem = elem;
-        _this.sanitize = sanitize;
-        _this.lastPathStyle = null;
-        _this.lastPathString = [];
-        _this.objectElems = null;
-        _this.overwrittenAttrs = {};
-        _this.textContainer = null;
-        _this.textContainerTransform = null;
-        _this.textParentStyle = defaultTextStyle;
-        _this.clear();
-        _this.addStyleSheet();
-        return _this;
+    constructor(elem, viewport, sanitize = false) {
+        super(viewport);
+        this.elem = elem;
+        this.sanitize = sanitize;
+        this.lastPathStyle = null;
+        this.lastPathString = [];
+        this.lastContainerIDList = [];
+        // Elements that make up the current object (as created by startObject)
+        // if any.
+        this.objectElems = null;
+        this.overwrittenAttrs = {};
+        this.textContainer = null;
+        this.textContainerTransform = null;
+        this.textParentStyle = defaultTextStyle;
+        this.clear();
+        this.addStyleSheet();
     }
-    SVGRenderer.prototype.addStyleSheet = function () {
-        if (!this.elem.querySelector("#".concat(exports.renderedStylesheetId))) {
+    addStyleSheet() {
+        if (!this.elem.querySelector(`#${exports.renderedStylesheetId}`)) {
             // Default to rounded strokes.
-            var styleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
-            styleSheet.innerHTML = "\n\t\t\t\tpath {\n\t\t\t\t\tstroke-linecap: round;\n\t\t\t\t\tstroke-linejoin: round;\n\t\t\t\t}\n\n\t\t\t\ttext {\n\t\t\t\t\twhite-space: pre;\n\t\t\t\t}\n\t\t\t".replace(/\s+/g, '');
+            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.
-    SVGRenderer.prototype.setRootSVGAttribute = function (name, value) {
+    setRootSVGAttribute(name, value) {
         if (this.sanitize) {
             return;
         }
@@ -93,16 +78,17 @@ var SVGRenderer = /** @class */ (function (_super) {
         else {
             this.elem.removeAttribute(name);
         }
-    };
-    SVGRenderer.prototype.displaySize = function () {
-        return Vec2_1.Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
-    };
-    SVGRenderer.prototype.clear = function () {
+    }
+    displaySize() {
+        return math_1.Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
+    }
+    clear() {
         this.lastPathString = [];
+        this.lastContainerIDList = [];
         if (!this.sanitize) {
             // Restore all all attributes
-            for (var attrName in this.overwrittenAttrs) {
-                var value = this.overwrittenAttrs[attrName];
+            for (const attrName in this.overwrittenAttrs) {
+                const value = this.overwrittenAttrs[attrName];
                 if (value) {
                     this.elem.setAttribute(attrName, value);
                 }
@@ -112,17 +98,16 @@ var SVGRenderer = /** @class */ (function (_super) {
             }
             this.overwrittenAttrs = {};
         }
-    };
+    }
     // Push `this.fullPath` to the SVG. Returns the path added to the SVG, if any.
     // @internal
-    SVGRenderer.prototype.addPathToSVG = function () {
-        var _a;
+    addPathToSVG() {
         if (!this.lastPathStyle || this.lastPathString.length === 0) {
             return null;
         }
-        var pathElem = document.createElementNS(svgNameSpace, 'path');
+        const pathElem = document.createElementNS(svgNameSpace, 'path');
         pathElem.setAttribute('d', this.lastPathString.join(' '));
-        var style = this.lastPathStyle;
+        const style = this.lastPathStyle;
         if (style.fill.a > 0) {
             pathElem.setAttribute('fill', style.fill.toHexString());
         }
@@ -131,15 +116,15 @@ var SVGRenderer = /** @class */ (function (_super) {
         }
         if (style.stroke) {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
-            pathElem.setAttribute('stroke-width', (0, rounding_1.toRoundedString)(style.stroke.width));
+            pathElem.setAttribute('stroke-width', (0, math_1.toRoundedString)(style.stroke.width));
         }
         this.elem.appendChild(pathElem);
-        (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
+        this.objectElems?.push(pathElem);
         return pathElem;
-    };
-    SVGRenderer.prototype.drawPath = function (pathSpec) {
-        var style = pathSpec.style;
-        var path = Path_1.default.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
+    }
+    drawPath(pathSpec) {
+        const style = pathSpec.style;
+        const path = (0, RenderablePathSpec_1.pathFromRenderable)(pathSpec).transformedBy(this.getCanvasToScreenTransform());
         // Try to extend the previous path, if possible
         if (this.lastPathString.length === 0 || !this.lastPathStyle || !(0, RenderingStyle_1.stylesEqual)(this.lastPathStyle, style)) {
             this.addPathToSVG();
@@ -147,49 +132,48 @@ var SVGRenderer = /** @class */ (function (_super) {
             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`.
-    SVGRenderer.prototype.transformFrom = function (elemTransform, elem, inCanvasSpace, setXY) {
-        if (inCanvasSpace === void 0) { inCanvasSpace = false; }
-        if (setXY === void 0) { setXY = true; }
-        var transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
-        var translation = transform.transformVec2(Vec2_1.Vec2.zero);
+    transformFrom(elemTransform, elem, inCanvasSpace = false, setXY = true) {
+        let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
+        const translation = transform.transformVec2(math_1.Vec2.zero);
         if (setXY) {
-            transform = transform.rightMul(Mat33_1.default.translation(translation.times(-1)));
+            transform = transform.rightMul(math_1.Mat33.translation(translation.times(-1)));
         }
-        if (!transform.eq(Mat33_1.default.identity)) {
-            elem.style.transform = "matrix(\n\t\t\t\t".concat(transform.a1, ", ").concat(transform.b1, ",\n\t\t\t\t").concat(transform.a2, ", ").concat(transform.b2, ",\n\t\t\t\t").concat(transform.a3, ", ").concat(transform.b3, "\n\t\t\t)");
+        if (!transform.eq(math_1.Mat33.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', "".concat((0, rounding_1.toRoundedString)(translation.x)));
-            elem.setAttribute('y', "".concat((0, rounding_1.toRoundedString)(translation.y)));
+            elem.setAttribute('x', `${(0, math_1.toRoundedString)(translation.x)}`);
+            elem.setAttribute('y', `${(0, math_1.toRoundedString)(translation.y)}`);
         }
-    };
-    SVGRenderer.prototype.drawText = function (text, transform, style) {
-        var _this = this;
-        var _a;
-        var applyTextStyles = function (elem, style) {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if (style.fontFamily !== ((_a = _this.textParentStyle) === null || _a === void 0 ? void 0 : _a.fontFamily)) {
+    }
+    drawText(text, transform, style) {
+        const applyTextStyles = (elem, style) => {
+            if (style.fontFamily !== this.textParentStyle?.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.fontVariant !== this.textParentStyle?.fontVariant) {
+                elem.style.fontVariant = style.fontVariant ?? '';
             }
-            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.fontWeight !== this.textParentStyle?.fontWeight) {
+                elem.style.fontWeight = style.fontWeight ?? '';
             }
-            if (style.fontStyle !== ((_f = _this.textParentStyle) === null || _f === void 0 ? void 0 : _f.fontStyle)) {
-                elem.style.fontStyle = (_g = style.fontStyle) !== null && _g !== void 0 ? _g : '';
+            if (style.fontStyle !== this.textParentStyle?.fontStyle) {
+                elem.style.fontStyle = style.fontStyle ?? '';
             }
-            if (style.size !== ((_h = _this.textParentStyle) === null || _h === void 0 ? void 0 : _h.size)) {
+            if (style.size !== this.textParentStyle?.size) {
                 elem.style.fontSize = style.size + 'px';
             }
-            var fillString = style.renderingStyle.fill.toHexString();
+            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();
@@ -197,132 +181,166 @@ var SVGRenderer = /** @class */ (function (_super) {
             elem.style.fill = fillString;
             //}
             if (style.renderingStyle.stroke) {
-                var strokeStyle = 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) {
-            var container = document.createElementNS(svgNameSpace, 'text');
+            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.
-            var setXY = false;
+            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);
+            this.objectElems?.push(container);
             if (this.objectLevel > 0) {
                 this.textContainer = container;
                 this.textContainerTransform = transform;
-                this.textParentStyle = __assign(__assign({}, defaultTextStyle), style);
+                this.textParentStyle = { ...defaultTextStyle, ...style };
             }
         }
         else {
-            var elem = document.createElementNS(svgNameSpace, 'tspan');
+            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:
-            var translation = transform.transformVec2(Vec2_1.Vec2.zero);
-            elem.setAttribute('x', "".concat((0, rounding_1.toRoundedString)(translation.x)));
-            elem.setAttribute('y', "".concat((0, rounding_1.toRoundedString)(translation.y)));
+            const translation = transform.transformVec2(math_1.Vec2.zero);
+            elem.setAttribute('x', `${(0, math_1.toRoundedString)(translation.x)}`);
+            elem.setAttribute('y', `${(0, math_1.toRoundedString)(translation.y)}`);
             applyTextStyles(elem, style);
         }
-    };
-    SVGRenderer.prototype.drawImage = function (image) {
-        var _a, _b, _c, _d, _e, _f;
-        var label = (_b = (_a = image.label) !== null && _a !== void 0 ? _a : image.image.getAttribute('aria-label')) !== null && _b !== void 0 ? _b : '';
+    }
+    drawImage(image) {
+        let label = image.label ?? image.image.getAttribute('aria-label') ?? '';
         if (label === '') {
-            label = (_c = image.image.getAttribute('alt')) !== null && _c !== void 0 ? _c : '';
+            label = image.image.getAttribute('alt') ?? '';
         }
-        var svgImgElem = document.createElementNS(svgNameSpace, 'image');
+        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('width', image.image.getAttribute('width') ?? '');
+        svgImgElem.setAttribute('height', image.image.getAttribute('height') ?? '');
         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);
-    };
-    SVGRenderer.prototype.startObject = function (boundingBox) {
-        _super.prototype.startObject.call(this, boundingBox);
+        this.objectElems?.push(svgImgElem);
+    }
+    startObject(boundingBox) {
+        super.startObject(boundingBox);
         // Only accumulate a path within an object
         this.lastPathString = [];
         this.lastPathStyle = null;
         this.textContainer = null;
         this.textParentStyle = defaultTextStyle;
         this.objectElems = [];
-    };
-    SVGRenderer.prototype.endObject = function (loaderData, elemClassNames) {
-        var _a, _b;
-        var _c;
-        _super.prototype.endObject.call(this, loaderData);
+    }
+    endObject(loaderData, elemClassNames) {
+        super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
+        // If empty/not an object, stop.
+        if (!this.objectElems) {
+            return;
+        }
         if (loaderData && !this.sanitize) {
             // Restore any attributes unsupported by the app.
-            for (var _i = 0, _d = (_c = this.objectElems) !== null && _c !== void 0 ? _c : []; _i < _d.length; _i++) {
-                var elem = _d[_i];
-                var attrs = loaderData[SVGLoader_1.svgAttributesDataKey];
-                var styleAttrs = loaderData[SVGLoader_1.svgStyleAttributesDataKey];
+            for (const elem of this.objectElems) {
+                const attrs = loaderData[SVGLoader_1.svgAttributesDataKey];
+                const styleAttrs = loaderData[SVGLoader_1.svgStyleAttributesDataKey];
                 if (attrs) {
-                    for (var _e = 0, attrs_1 = attrs; _e < attrs_1.length; _e++) {
-                        var _f = attrs_1[_e], attr = _f[0], value = _f[1];
+                    for (const [attr, value] of attrs) {
                         elem.setAttribute(attr, value);
                     }
                 }
                 if (styleAttrs) {
-                    for (var _g = 0, styleAttrs_1 = styleAttrs; _g < styleAttrs_1.length; _g++) {
-                        var attr = styleAttrs_1[_g];
+                    for (const attr of styleAttrs) {
                         elem.style.setProperty(attr.key, attr.value, attr.priority);
                     }
                 }
             }
+            // Update the parent
+            const containerIDData = loaderData[SVGLoader_1.svgLoaderAttributeContainerID];
+            let containerIDList = [];
+            if (containerIDData && containerIDData[0]) {
+                // If a string list,
+                if (containerIDData[0].length) {
+                    containerIDList = containerIDData[0];
+                }
+            }
+            if (containerIDList.length > 0
+                // containerIDList must share a prefix with the last ID list
+                // otherwise, the z order of elements may have been changed from
+                // the original image.
+                // In the case that the z order has been changed, keep the current
+                // element as a child of the root to preserve z order.
+                && (0, listPrefixMatch_1.default)(this.lastContainerIDList, containerIDList)
+                // The component can add at most one more parent than the previous item.
+                && this.lastContainerIDList.length >= containerIDList.length - 1) {
+                // Select the last
+                const containerID = containerIDList[containerIDList.length - 1];
+                const containerCandidates = this.elem.querySelectorAll(`g#${containerID}`);
+                if (containerCandidates.length >= 1) {
+                    const container = containerCandidates[0];
+                    // If this is the first time we're entering the group, the
+                    // group should be empty.
+                    // Otherwise, this may be a case that would break z-ordering.
+                    if (container.children.length === 0 || this.lastContainerIDList.length >= containerIDList.length) {
+                        // Move all objectElems to the found container
+                        for (const elem of this.objectElems) {
+                            elem.remove();
+                            container.appendChild(elem);
+                        }
+                    }
+                    else {
+                        containerIDList = [];
+                    }
+                }
+            }
+            else {
+                containerIDList = [];
+            }
+            this.lastContainerIDList = containerIDList;
         }
         // Add class names to the object, if given.
         if (elemClassNames && this.objectElems) {
             if (this.objectElems.length === 1) {
-                (_a = this.objectElems[0].classList).add.apply(_a, elemClassNames);
+                this.objectElems[0].classList.add(...elemClassNames);
             }
             else {
-                var wrapper = document.createElementNS(svgNameSpace, 'g');
-                (_b = wrapper.classList).add.apply(_b, elemClassNames);
-                for (var _h = 0, _j = this.objectElems; _h < _j.length; _h++) {
-                    var elem = _j[_h];
+                const wrapper = document.createElementNS(svgNameSpace, 'g');
+                wrapper.classList.add(...elemClassNames);
+                for (const elem of this.objectElems) {
                     elem.remove();
                     wrapper.appendChild(elem);
                 }
                 this.elem.appendChild(wrapper);
             }
         }
-    };
+    }
     // Not implemented -- use drawPath instead.
-    SVGRenderer.prototype.unimplementedMessage = function () { throw new Error('Not implemenented!'); };
-    SVGRenderer.prototype.beginPath = function (_startPoint) { this.unimplementedMessage(); };
-    SVGRenderer.prototype.endPath = function (_style) { this.unimplementedMessage(); };
-    SVGRenderer.prototype.lineTo = function (_point) { this.unimplementedMessage(); };
-    SVGRenderer.prototype.moveTo = function (_point) { this.unimplementedMessage(); };
-    SVGRenderer.prototype.traceCubicBezierCurve = function (_controlPoint1, _controlPoint2, _endPoint) { this.unimplementedMessage(); };
-    SVGRenderer.prototype.traceQuadraticBezierCurve = function (_controlPoint, _endPoint) { this.unimplementedMessage(); };
-    SVGRenderer.prototype.drawPoints = function () {
-        var _this = this;
-        var points = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            points[_i] = arguments[_i];
-        }
-        points.map(function (point) {
-            var elem = document.createElementNS(svgNameSpace, 'circle');
-            elem.setAttribute('cx', "".concat(point.x));
-            elem.setAttribute('cy', "".concat(point.y));
+    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);
+            this.elem.appendChild(elem);
         });
-    };
+    }
     // Renders a **copy** of the given element.
-    SVGRenderer.prototype.drawSVGElem = function (elem) {
+    drawSVGElem(elem) {
         if (this.sanitize) {
             return;
         }
@@ -330,28 +348,28 @@ var SVGRenderer = /** @class */ (function (_super) {
         if (elem.tagName.toLowerCase() === 'style' && elem.getAttribute('id') === exports.renderedStylesheetId) {
             return;
         }
-        this.elem.appendChild(elem.cloneNode(true));
-    };
-    SVGRenderer.prototype.isTooSmallToRender = function (_rect) {
+        const elemToDraw = elem.cloneNode(true);
+        this.elem.appendChild(elemToDraw);
+        this.objectElems?.push(elemToDraw);
+    }
+    isTooSmallToRender(_rect) {
         return false;
-    };
+    }
     // Creates a new SVG element and SVGRenerer with attributes set for the given Viewport.
-    SVGRenderer.fromViewport = function (viewport, sanitize) {
-        if (sanitize === void 0) { sanitize = true; }
-        var svgNameSpace = 'http://www.w3.org/2000/svg';
-        var result = document.createElementNS(svgNameSpace, 'svg');
-        var rect = viewport.getScreenRectSize();
+    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(function (part) { return (0, rounding_1.toRoundedString)(part); }).join(' '));
-        result.setAttribute('width', (0, rounding_1.toRoundedString)(rect.x));
-        result.setAttribute('height', (0, rounding_1.toRoundedString)(rect.y));
+        result.setAttribute('viewBox', [0, 0, rect.x, rect.y].map(part => (0, math_1.toRoundedString)(part)).join(' '));
+        result.setAttribute('width', (0, math_1.toRoundedString)(rect.x));
+        result.setAttribute('height', (0, math_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) };
-    };
-    return SVGRenderer;
-}(AbstractRenderer_1.default));
+    }
+}
 exports.default = SVGRenderer;

package/dist/cjs/rendering/renderers/TextOnlyRenderer.d.ts

@@ -1,6 +1,4 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
-import Vec3 from '../../math/Vec3';
+import { Vec3, Rect2, Mat33 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';