js-draw 0.25.0 → 1.0.0

package/dist/mjs/components/ImageComponent.mjs

@@ -1,197 +1,115 @@
-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 __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());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import  Mat33  from '../math/Mat33.mjs';
-import  Rect2  from '../math/shapes/Rect2.mjs';
+import { Rect2, Mat33 } from '@js-draw/math';
 import  { assertIsNumber, assertIsNumberArray }  from '../util/assertions.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
 // Represents a raster image.
-var ImageComponent = /** @class */ (function (_super) {
-    __extends(ImageComponent, _super);
-    function ImageComponent(image) {
-        var _this = this;
-        var _a, _b, _c;
-        _this = _super.call(this, 'image-component') || this;
-        _this.image = __assign(__assign({}, image), { label: (_c = (_b = (_a = image.label) !== null && _a !== void 0 ? _a : image.image.getAttribute('alt')) !== null && _b !== void 0 ? _b : image.image.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : undefined });
-        var isHTMLImageElem = function (elem) {
+export default class ImageComponent extends AbstractComponent {
+    constructor(image) {
+        super('image-component');
+        this.image = {
+            ...image,
+            label: image.label ?? image.image.getAttribute('alt') ?? image.image.getAttribute('aria-label') ?? undefined,
+        };
+        const isHTMLImageElem = (elem) => {
             return elem.getAttribute('src') !== undefined;
         };
         if (isHTMLImageElem(image.image) && !image.image.complete) {
-            image.image.onload = function () { return _this.recomputeBBox(); };
+            image.image.onload = () => this.recomputeBBox();
         }
-        _this.recomputeBBox();
-        return _this;
+        this.recomputeBBox();
     }
-    ImageComponent.prototype.getImageRect = function () {
+    getImageRect() {
         return new Rect2(0, 0, this.image.image.width, this.image.image.height);
-    };
-    ImageComponent.prototype.recomputeBBox = function () {
+    }
+    recomputeBBox() {
         this.contentBBox = this.getImageRect();
         this.contentBBox = this.contentBBox.transformedBoundingBox(this.image.transform);
-    };
+    }
     // Load from an image. Waits for the image to load if incomplete.
-    ImageComponent.fromImage = function (elem, transform) {
-        var _a, _b, _c;
-        return __awaiter(this, void 0, void 0, function () {
-            var width, height, image, url, canvas, ctx;
-            return __generator(this, function (_d) {
-                switch (_d.label) {
-                    case 0:
-                        if (!!elem.complete) return [3 /*break*/, 2];
-                        return [4 /*yield*/, new Promise(function (resolve, reject) {
-                                elem.onload = resolve;
-                                elem.onerror = reject;
-                                elem.onabort = reject;
-                            })];
-                    case 1:
-                        _d.sent();
-                        _d.label = 2;
-                    case 2:
-                        if (typeof elem.width === 'number' && typeof elem.height === 'number'
-                            && elem.width !== 0 && elem.height !== 0) {
-                            width = elem.width;
-                            height = elem.height;
-                        }
-                        else {
-                            width = elem.clientWidth;
-                            height = elem.clientHeight;
-                        }
-                        url = (_a = elem.src) !== null && _a !== void 0 ? _a : '';
-                        if (!url.startsWith('data:image/')) {
-                            canvas = document.createElement('canvas');
-                            canvas.width = width;
-                            canvas.height = height;
-                            ctx = canvas.getContext('2d');
-                            ctx.drawImage(elem, 0, 0, canvas.width, canvas.height);
-                            url = canvas.toDataURL();
-                            image = canvas;
-                        }
-                        else {
-                            image = new Image();
-                            image.src = url;
-                            image.width = width;
-                            image.height = height;
-                        }
-                        image.setAttribute('alt', (_b = elem.getAttribute('alt')) !== null && _b !== void 0 ? _b : '');
-                        image.setAttribute('aria-label', (_c = elem.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : '');
-                        return [2 /*return*/, new ImageComponent({
-                                image: image,
-                                base64Url: url,
-                                transform: transform,
-                            })];
-                }
+    static async fromImage(elem, transform) {
+        if (!elem.complete) {
+            await new Promise((resolve, reject) => {
+                elem.onload = resolve;
+                elem.onerror = reject;
+                elem.onabort = reject;
             });
+        }
+        let width, height;
+        if (typeof elem.width === 'number' && typeof elem.height === 'number'
+            && elem.width !== 0 && elem.height !== 0) {
+            width = elem.width;
+            height = elem.height;
+        }
+        else {
+            width = elem.clientWidth;
+            height = elem.clientHeight;
+        }
+        let image;
+        let url = elem.src ?? '';
+        if (!url.startsWith('data:image/')) {
+            // Convert to a data URL:
+            const canvas = document.createElement('canvas');
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(elem, 0, 0, canvas.width, canvas.height);
+            url = canvas.toDataURL();
+            image = canvas;
+        }
+        else {
+            image = new Image();
+            image.src = url;
+            image.width = width;
+            image.height = height;
+        }
+        image.setAttribute('alt', elem.getAttribute('alt') ?? '');
+        image.setAttribute('aria-label', elem.getAttribute('aria-label') ?? '');
+        return new ImageComponent({
+            image,
+            base64Url: url,
+            transform: transform,
         });
-    };
-    ImageComponent.prototype.render = function (canvas, _visibleRect) {
+    }
+    render(canvas, _visibleRect) {
         canvas.startObject(this.contentBBox);
         canvas.drawImage(this.image);
         canvas.endObject(this.getLoadSaveData());
-    };
-    ImageComponent.prototype.getProportionalRenderingTime = function () {
+    }
+    getProportionalRenderingTime() {
         // Estimate: Equivalent to a stroke with 10 segments.
         return 10;
-    };
-    ImageComponent.prototype.intersects = function (lineSegment) {
-        var _this = this;
-        var rect = this.getImageRect();
-        var edges = rect.getEdges().map(function (edge) { return edge.transformedBy(_this.image.transform); });
-        for (var _i = 0, edges_1 = edges; _i < edges_1.length; _i++) {
-            var edge = edges_1[_i];
+    }
+    intersects(lineSegment) {
+        const rect = this.getImageRect();
+        const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));
+        for (const edge of edges) {
             if (edge.intersects(lineSegment)) {
                 return true;
             }
         }
         return false;
-    };
-    ImageComponent.prototype.applyTransformation = function (affineTransfm) {
+    }
+    applyTransformation(affineTransfm) {
         this.image.transform = affineTransfm.rightMul(this.image.transform);
         this.recomputeBBox();
-    };
-    ImageComponent.prototype.description = function (localizationTable) {
+    }
+    description(localizationTable) {
         return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
-    };
-    ImageComponent.prototype.getAltText = function () {
+    }
+    getAltText() {
         return this.image.label;
-    };
-    ImageComponent.prototype.getURL = function () {
+    }
+    getURL() {
         return this.image.base64Url;
-    };
-    ImageComponent.prototype.getTransformation = function () {
+    }
+    getTransformation() {
         return this.image.transform;
-    };
-    ImageComponent.prototype.createClone = function () {
-        return new ImageComponent(__assign({}, this.image));
-    };
-    ImageComponent.prototype.serializeToJSON = function () {
+    }
+    createClone() {
+        return new ImageComponent({
+            ...this.image,
+        });
+    }
+    serializeToJSON() {
         return {
             src: this.image.base64Url,
             label: this.image.label,
@@ -200,27 +118,25 @@ var ImageComponent = /** @class */ (function (_super) {
             height: this.image.image.height,
             transform: this.image.transform.toArray(),
         };
-    };
-    ImageComponent.deserializeFromJSON = function (data) {
+    }
+    static deserializeFromJSON(data) {
         if (!(typeof data.src === 'string')) {
-            throw new Error("".concat(data, " has invalid format! Expected src property."));
+            throw new Error(`${data} has invalid format! Expected src property.`);
         }
         assertIsNumberArray(data.transform);
         assertIsNumber(data.width);
         assertIsNumber(data.height);
-        var image = new Image();
+        const image = new Image();
         image.src = data.src;
         image.width = data.width;
         image.height = data.height;
-        var transform = new (Mat33.bind.apply(Mat33, __spreadArray([void 0], data.transform, false)))();
+        const transform = new Mat33(...data.transform);
         return new ImageComponent({
             image: image,
             base64Url: data.src,
             label: data.label,
-            transform: transform,
+            transform,
         });
-    };
-    return ImageComponent;
-}(AbstractComponent));
-export default ImageComponent;
+    }
+}
 AbstractComponent.registerComponent('image-component', ImageComponent.deserializeFromJSON);

package/dist/mjs/components/RestylableComponent.d.ts

@@ -1,4 +1,4 @@
-import Color4 from '../Color4';
+import { Color4 } from '@js-draw/math';
 import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';

package/dist/mjs/components/RestylableComponent.mjs

@@ -1,24 +1,9 @@
-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 __());
-    };
-})();
-import  Color4  from '../Color4.mjs';
+import { Color4 } from '@js-draw/math';
 import  SerializableCommand  from '../commands/SerializableCommand.mjs';
 import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
 import  { textStyleFromJSON, textStyleToJSON }  from '../rendering/TextRenderingStyle.mjs';
-var serializeComponentStyle = function (style) {
-    var result = {};
+const serializeComponentStyle = (style) => {
+    const result = {};
     if (style.color) {
         result.color = style.color.toHexString();
     }
@@ -27,21 +12,21 @@ var serializeComponentStyle = function (style) {
     }
     return result;
 };
-var deserializeComponentStyle = function (json) {
-    var color = json.color ? Color4.fromHex(json.color) : undefined;
-    var textStyle = json.textStyle ? textStyleFromJSON(json.textStyle) : undefined;
+const deserializeComponentStyle = (json) => {
+    const color = json.color ? Color4.fromHex(json.color) : undefined;
+    const textStyle = json.textStyle ? textStyleFromJSON(json.textStyle) : undefined;
     return {
-        color: color,
-        textStyle: textStyle,
+        color,
+        textStyle,
     };
 };
 // For internal use by Components implementing `updateStyle`:
-export var createRestyleComponentCommand = function (initialStyle, newStyle, component) {
+export const createRestyleComponentCommand = (initialStyle, newStyle, component) => {
     return new DefaultRestyleComponentCommand(initialStyle, newStyle, component.getId(), component);
 };
 // Returns true if `component` is a `RestylableComponent`.
-export var isRestylableComponent = function (component) {
-    var hasMethods = 'getStyle' in component && 'updateStyle' in component && 'forceStyle' in component;
+export const isRestylableComponent = (component) => {
+    const hasMethods = 'getStyle' in component && 'updateStyle' in component && 'forceStyle' in component;
     if (!hasMethods) {
         return false;
     }
@@ -50,48 +35,45 @@ export var isRestylableComponent = function (component) {
     }
     return true;
 };
-var defaultRestyleComponentCommandId = 'default-restyle-element';
-var DefaultRestyleComponentCommand = /** @class */ (function (_super) {
-    __extends(DefaultRestyleComponentCommand, _super);
-    function DefaultRestyleComponentCommand(originalStyle, newStyle, componentID, component) {
-        var _this = _super.call(this, defaultRestyleComponentCommandId, componentID, component) || this;
-        _this.originalStyle = originalStyle;
-        _this.newStyle = newStyle;
-        return _this;
+const defaultRestyleComponentCommandId = 'default-restyle-element';
+class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
+    constructor(originalStyle, newStyle, componentID, component) {
+        super(defaultRestyleComponentCommandId, componentID, component);
+        this.originalStyle = originalStyle;
+        this.newStyle = newStyle;
     }
-    DefaultRestyleComponentCommand.prototype.getComponent = function (editor) {
+    getComponent(editor) {
         this.resolveComponent(editor.image);
-        var component = this.component;
+        const component = this.component;
         if (!component || !component['forceStyle'] || !component['updateStyle']) {
             throw new Error('this.component is missing forceStyle and/or updateStyle methods!');
         }
         return component;
-    };
-    DefaultRestyleComponentCommand.prototype.apply = function (editor) {
+    }
+    apply(editor) {
         this.getComponent(editor).forceStyle(this.newStyle, editor);
-    };
-    DefaultRestyleComponentCommand.prototype.unapply = function (editor) {
+    }
+    unapply(editor) {
         this.getComponent(editor).forceStyle(this.originalStyle, editor);
-    };
-    DefaultRestyleComponentCommand.prototype.description = function (editor, localizationTable) {
+    }
+    description(editor, localizationTable) {
         return localizationTable.restyledElement(this.getComponent(editor).description(localizationTable));
-    };
-    DefaultRestyleComponentCommand.prototype.serializeToJSON = function () {
+    }
+    serializeToJSON() {
         return {
             id: this.componentID,
             originalStyle: serializeComponentStyle(this.originalStyle),
             newStyle: serializeComponentStyle(this.newStyle),
         };
-    };
-    return DefaultRestyleComponentCommand;
-}(UnresolvedSerializableCommand));
-(function () {
-    SerializableCommand.register(defaultRestyleComponentCommandId, function (json, _editor) {
-        var origStyle = deserializeComponentStyle(json.originalStyle);
-        var newStyle = deserializeComponentStyle(json.newStyle);
-        var id = json.id;
+    }
+}
+(() => {
+    SerializableCommand.register(defaultRestyleComponentCommandId, (json, _editor) => {
+        const origStyle = deserializeComponentStyle(json.originalStyle);
+        const newStyle = deserializeComponentStyle(json.newStyle);
+        const id = json.id;
         if (typeof json.id !== 'string') {
-            throw new Error("json.id is of type ".concat((typeof json.id), ", not string."));
+            throw new Error(`json.id is of type ${(typeof json.id)}, not string.`);
         }
         return new DefaultRestyleComponentCommand(origStyle, newStyle, id);
     });

package/dist/mjs/components/SVGGlobalAttributesObject.d.ts

@@ -1,6 +1,4 @@
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33 from '../math/Mat33';
-import Rect2 from '../math/shapes/Rect2';
+import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';

package/dist/mjs/components/SVGGlobalAttributesObject.mjs

@@ -4,68 +4,49 @@
 // @internal
 // @packageDocumentation
 //
-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 __());
-    };
-})();
-import  Rect2  from '../math/shapes/Rect2.mjs';
+import { Rect2 } from '@js-draw/math';
 import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
-var componentKind = 'svg-global-attributes';
+const componentKind = 'svg-global-attributes';
 // Stores global SVG attributes (e.g. namespace identifiers.)
-var SVGGlobalAttributesObject = /** @class */ (function (_super) {
-    __extends(SVGGlobalAttributesObject, _super);
-    function SVGGlobalAttributesObject(attrs) {
-        var _this = _super.call(this, componentKind) || this;
-        _this.attrs = attrs;
-        _this.contentBBox = Rect2.empty;
-        return _this;
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+    constructor(attrs) {
+        super(componentKind);
+        this.attrs = attrs;
+        this.contentBBox = Rect2.empty;
     }
-    SVGGlobalAttributesObject.prototype.render = function (canvas, _visibleRect) {
+    render(canvas, _visibleRect) {
         if (!(canvas instanceof SVGRenderer)) {
             // Don't draw unrenderable objects if we can't
             return;
         }
-        for (var _i = 0, _a = this.attrs; _i < _a.length; _i++) {
-            var _b = _a[_i], attr = _b[0], value = _b[1];
+        for (const [attr, value] of this.attrs) {
             canvas.setRootSVGAttribute(attr, value);
         }
-    };
-    SVGGlobalAttributesObject.prototype.intersects = function (_lineSegment) {
+    }
+    intersects(_lineSegment) {
         return false;
-    };
-    SVGGlobalAttributesObject.prototype.applyTransformation = function (_affineTransfm) {
-    };
-    SVGGlobalAttributesObject.prototype.isSelectable = function () {
+    }
+    applyTransformation(_affineTransfm) {
+    }
+    isSelectable() {
         return false;
-    };
-    SVGGlobalAttributesObject.prototype.createClone = function () {
+    }
+    createClone() {
         return new SVGGlobalAttributesObject(this.attrs);
-    };
-    SVGGlobalAttributesObject.prototype.description = function (localization) {
+    }
+    description(localization) {
         return localization.svgObject;
-    };
-    SVGGlobalAttributesObject.prototype.serializeToJSON = function () {
+    }
+    serializeToJSON() {
         return JSON.stringify(this.attrs);
-    };
-    SVGGlobalAttributesObject.deserializeFromString = function (data) {
-        var json = JSON.parse(data);
-        var attrs = [];
-        var numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
+    }
+    static deserializeFromString(data) {
+        const json = JSON.parse(data);
+        const attrs = [];
+        const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
         // Don't deserialize all attributes, just those that should be safe.
-        for (var _i = 0, json_1 = json; _i < json_1.length; _i++) {
-            var _a = json_1[_i], key = _a[0], val = _a[1];
+        for (const [key, val] of json) {
             if (key === 'viewBox' || key === 'width' || key === 'height') {
                 if (val && numericAndSpaceContentExp.exec(val)) {
                     attrs.push([key, val]);
@@ -73,8 +54,6 @@ var SVGGlobalAttributesObject = /** @class */ (function (_super) {
             }
         }
         return new SVGGlobalAttributesObject(attrs);
-    };
-    return SVGGlobalAttributesObject;
-}(AbstractComponent));
-export default SVGGlobalAttributesObject;
+    }
+}
 AbstractComponent.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

package/dist/mjs/components/Stroke.d.ts

@@ -1,13 +1,11 @@
 import SerializableCommand from '../commands/SerializableCommand';
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33 from '../math/Mat33';
-import Path from '../math/shapes/Path';
-import Rect2 from '../math/shapes/Rect2';
+import { Mat33, Path, Rect2, LineSegment2 } from '@js-draw/math';
 import Editor from '../Editor';
-import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+import RenderablePathSpec from '../rendering/RenderablePathSpec';
 /**
  * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
  *
@@ -67,7 +65,7 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
             stroke: {
                 color: string;
                 width: number;
-            };
+            } | undefined;
         };
         path: string;
     }[];