js-draw 0.25.0 → 1.0.0

package/dist/cjs/components/AbstractComponent.js

@@ -1,42 +1,22 @@
 "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 __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
     if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
     return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
 };
-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));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-var SerializableCommand_1 = require("../commands/SerializableCommand");
-var EditorImage_1 = require("../EditorImage");
-var Mat33_1 = require("../math/Mat33");
-var UnresolvedCommand_1 = require("../commands/UnresolvedCommand");
+const SerializableCommand_1 = __importDefault(require("../commands/SerializableCommand"));
+const EditorImage_1 = __importDefault(require("../EditorImage"));
+const math_1 = require("@js-draw/math");
+const UnresolvedCommand_1 = __importDefault(require("../commands/UnresolvedCommand"));
 /**
  * A base class for everything that can be added to an {@link EditorImage}.
  */
-var AbstractComponent = /** @class */ (function () {
-    function AbstractComponent(
+class AbstractComponent {
+    constructor(
     // A unique identifier for the type of component
     componentKind, initialZIndex) {
         this.componentKind = componentKind;
@@ -50,56 +30,56 @@ var AbstractComponent = /** @class */ (function () {
             this.zIndex = AbstractComponent.zIndexCounter++;
         }
         // Create a unique ID.
-        this.id = "".concat(new Date().getTime(), "-").concat(Math.random());
+        this.id = `${new Date().getTime()}-${Math.random()}`;
         if (AbstractComponent.deserializationCallbacks[componentKind] === undefined) {
-            throw new Error("Component ".concat(componentKind, " has not been registered using AbstractComponent.registerComponent"));
+            throw new Error(`Component ${componentKind} has not been registered using AbstractComponent.registerComponent`);
         }
     }
     // Returns a unique ID for this element.
     // @see { @link EditorImage.lookupElement }
-    AbstractComponent.prototype.getId = function () {
+    getId() {
         return this.id;
-    };
+    }
     // Store the deserialization callback (or lack of it) for [componentKind].
     // If components are registered multiple times (as may be done in automated tests),
     // the most recent deserialization callback is used.
-    AbstractComponent.registerComponent = function (componentKind, deserialize) {
-        this.deserializationCallbacks[componentKind] = deserialize !== null && deserialize !== void 0 ? deserialize : null;
-    };
+    static registerComponent(componentKind, deserialize) {
+        this.deserializationCallbacks[componentKind] = deserialize ?? null;
+    }
     /**
      * Attach data that can be used while exporting the component (e.g. to SVG).
      *
      * This is intended for use by an {@link ImageLoader}.
      */
-    AbstractComponent.prototype.attachLoadSaveData = function (key, data) {
+    attachLoadSaveData(key, data) {
         if (!this.loadSaveData[key]) {
             this.loadSaveData[key] = [];
         }
         this.loadSaveData[key].push(data);
-    };
+    }
     /** See {@link attachLoadSaveData} */
-    AbstractComponent.prototype.getLoadSaveData = function () {
+    getLoadSaveData() {
         return this.loadSaveData;
-    };
-    AbstractComponent.prototype.getZIndex = function () {
+    }
+    getZIndex() {
         return this.zIndex;
-    };
+    }
     /**
      * @returns the bounding box of this. This can be a slight overestimate if doing so
      * 			significantly improves performance.
      */
-    AbstractComponent.prototype.getBBox = function () {
+    getBBox() {
         return this.contentBBox;
-    };
+    }
     /**
      * @returns the bounding box of this. Unlike `getBBox`, this should **not** be a rough estimate.
      */
-    AbstractComponent.prototype.getExactBBox = function () {
+    getExactBBox() {
         return this.getBBox();
-    };
+    }
     /** Called when this component is added to the given image. */
-    AbstractComponent.prototype.onAddToImage = function (_image) { };
-    AbstractComponent.prototype.onRemoveFromImage = function () { };
+    onAddToImage(_image) { }
+    onRemoveFromImage() { }
     /**
      * @returns true if this component intersects `rect` -- it is entirely contained
      *  within the rectangle or one of the rectangle's edges intersects this component.
@@ -109,97 +89,96 @@ var AbstractComponent = /** @class */ (function () {
      * intersects a point in this component. If this is not the case, components must override
      * this function.
      */
-    AbstractComponent.prototype.intersectsRect = function (rect) {
+    intersectsRect(rect) {
         // If this component intersects the given rectangle,
         // it is either contained entirely within rect or intersects one of rect's edges.
-        var _this = this;
         // If contained within,
         if (rect.containsRect(this.getExactBBox())) {
             return true;
         }
         // Otherwise check if it intersects one of the rectangle's edges.
-        var testLines = rect.getEdges();
-        return testLines.some(function (edge) { return _this.intersects(edge); });
-    };
+        const testLines = rect.getEdges();
+        return testLines.some(edge => this.intersects(edge));
+    }
     // Returns a command that, when applied, transforms this by [affineTransfm] and
     // updates the editor.
-    AbstractComponent.prototype.transformBy = function (affineTransfm) {
+    // This also increases the element's z-index so that it is on top.
+    transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
-    };
+    }
     // Returns a command that updates this component's z-index.
-    AbstractComponent.prototype.setZIndex = function (newZIndex) {
-        return new AbstractComponent.TransformElementCommand(Mat33_1.default.identity, this.getId(), this, newZIndex, this.getZIndex());
-    };
+    setZIndex(newZIndex) {
+        return new AbstractComponent.TransformElementCommand(math_1.Mat33.identity, this.getId(), this, newZIndex, this.getZIndex());
+    }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
-    AbstractComponent.prototype.isSelectable = function () {
+    isSelectable() {
         return true;
-    };
+    }
     // @returns true iff this component should be added to the background, rather than the
     // foreground of the image.
-    AbstractComponent.prototype.isBackground = function () {
+    isBackground() {
         return false;
-    };
+    }
     // @returns an approximation of the proportional time it takes to render this component.
     // This is intended to be a rough estimate, but, for example, a stroke with two points sould have
     // a renderingWeight approximately twice that of a stroke with one point.
-    AbstractComponent.prototype.getProportionalRenderingTime = function () {
+    getProportionalRenderingTime() {
         return 1;
-    };
+    }
     // Returns a copy of this component.
-    AbstractComponent.prototype.clone = function () {
-        var clone = this.createClone();
-        for (var attachmentKey in this.loadSaveData) {
-            for (var _i = 0, _a = this.loadSaveData[attachmentKey]; _i < _a.length; _i++) {
-                var val = _a[_i];
+    clone() {
+        const clone = this.createClone();
+        for (const attachmentKey in this.loadSaveData) {
+            for (const val of this.loadSaveData[attachmentKey]) {
                 clone.attachLoadSaveData(attachmentKey, val);
             }
         }
         return clone;
-    };
+    }
     // Convert the component to an object that can be passed to
     // `JSON.stringify`.
     //
     // Do not rely on the output of this function to take a particular form —
     // this function's output can change form without a major version increase.
-    AbstractComponent.prototype.serialize = function () {
-        var data = this.serializeToJSON();
+    serialize() {
+        const data = this.serializeToJSON();
         if (data === null) {
-            throw new Error("".concat(this, " cannot be serialized."));
+            throw new Error(`${this} cannot be serialized.`);
         }
         return {
             name: this.componentKind,
             zIndex: this.zIndex,
             id: this.id,
             loadSaveData: this.loadSaveData,
-            data: data,
+            data,
         };
-    };
+    }
     // Returns true if `data` is not deserializable. May return false even if [data]
     // is not deserializable.
-    AbstractComponent.isNotDeserializable = function (json) {
+    static isNotDeserializable(json) {
         if (typeof json === 'string') {
             json = JSON.parse(json);
         }
         if (typeof json !== 'object') {
             return true;
         }
-        if (!this.deserializationCallbacks[json === null || json === void 0 ? void 0 : json.name]) {
+        if (!this.deserializationCallbacks[json?.name]) {
             return true;
         }
         if (!json.data) {
             return true;
         }
         return false;
-    };
+    }
     // Convert a string or an object produced by `JSON.parse` into an `AbstractComponent`.
-    AbstractComponent.deserialize = function (json) {
+    static deserialize(json) {
         if (typeof json === 'string') {
             json = JSON.parse(json);
         }
         if (AbstractComponent.isNotDeserializable(json)) {
-            throw new Error("Element with data ".concat(json, " cannot be deserialized."));
+            throw new Error(`Element with data ${json} cannot be deserialized.`);
         }
-        var instance = this.deserializationCallbacks[json.name](json.data);
+        const instance = this.deserializationCallbacks[json.name](json.data);
         instance.zIndex = json.zIndex;
         instance.id = json.id;
         // TODO: What should we do with json.loadSaveData?
@@ -207,94 +186,87 @@ var AbstractComponent = /** @class */ (function () {
         //       is often used to store unrecognised attributes so they can be preserved on output.
         //       ...but what if we're deserializing data sent across the network?
         return instance;
-    };
-    var _a;
-    // Topmost z-index
-    AbstractComponent.zIndexCounter = 0;
-    AbstractComponent.deserializationCallbacks = {};
-    AbstractComponent.transformElementCommandId = 'transform-element';
-    AbstractComponent.TransformElementCommand = (_a = /** @class */ (function (_super) {
-            __extends(class_1, _super);
-            // Construct a new TransformElementCommand. `component`, while optional, should
-            // be provided if available. If not provided, it will be fetched from the editor's
-            // document when the command is applied.
-            function class_1(affineTransfm, componentID, component, targetZIndex, origZIndex) {
-                var _this = _super.call(this, AbstractComponent.transformElementCommandId, componentID, component) || this;
-                _this.affineTransfm = affineTransfm;
-                _this.origZIndex = origZIndex;
-                _this.targetZIndex = targetZIndex !== null && targetZIndex !== void 0 ? targetZIndex : AbstractComponent.zIndexCounter++;
-                // Ensure that we keep drawing on top even after changing the z-index.
-                if (_this.targetZIndex >= AbstractComponent.zIndexCounter) {
-                    AbstractComponent.zIndexCounter = _this.targetZIndex + 1;
-                }
-                if (component && origZIndex === undefined) {
-                    _this.origZIndex = component.getZIndex();
-                }
-                return _this;
+    }
+}
+// Topmost z-index
+AbstractComponent.zIndexCounter = 0;
+AbstractComponent.deserializationCallbacks = {};
+AbstractComponent.transformElementCommandId = 'transform-element';
+AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedCommand_1.default {
+        // Construct a new TransformElementCommand. `component`, while optional, should
+        // be provided if available. If not provided, it will be fetched from the editor's
+        // document when the command is applied.
+        constructor(affineTransfm, componentID, component, targetZIndex, origZIndex) {
+            super(AbstractComponent.transformElementCommandId, componentID, component);
+            this.affineTransfm = affineTransfm;
+            this.origZIndex = origZIndex;
+            this.targetZIndex = targetZIndex ?? AbstractComponent.zIndexCounter++;
+            // Ensure that we keep drawing on top even after changing the z-index.
+            if (this.targetZIndex >= AbstractComponent.zIndexCounter) {
+                AbstractComponent.zIndexCounter = this.targetZIndex + 1;
             }
-            class_1.prototype.resolveComponent = function (image) {
-                var _a;
-                if (this.component) {
-                    return;
-                }
-                _super.prototype.resolveComponent.call(this, image);
-                (_a = this.origZIndex) !== null && _a !== void 0 ? _a : (this.origZIndex = this.component.getZIndex());
-            };
-            class_1.prototype.updateTransform = function (editor, newTransfm) {
-                if (!this.component) {
-                    throw new Error('this.component is undefined or null!');
-                }
-                // Any parent should have only one direct child.
-                var parent = editor.image.findParent(this.component);
-                var hadParent = false;
-                if (parent) {
-                    parent.remove();
-                    hadParent = true;
-                }
-                this.component.applyTransformation(newTransfm);
-                this.component.lastChangedTime = (new Date()).getTime();
-                // Add the element back to the document.
-                if (hadParent) {
-                    EditorImage_1.default.addElement(this.component).apply(editor);
-                }
-            };
-            class_1.prototype.apply = function (editor) {
-                this.resolveComponent(editor.image);
-                this.component.zIndex = this.targetZIndex;
-                this.updateTransform(editor, this.affineTransfm);
-                editor.queueRerender();
-            };
-            class_1.prototype.unapply = function (editor) {
-                this.resolveComponent(editor.image);
-                this.component.zIndex = this.origZIndex;
-                this.updateTransform(editor, this.affineTransfm.inverse());
-                editor.queueRerender();
-            };
-            class_1.prototype.description = function (_editor, localizationTable) {
-                return localizationTable.transformedElements(1);
-            };
-            class_1.prototype.serializeToJSON = function () {
-                return {
-                    id: this.componentID,
-                    transfm: this.affineTransfm.toArray(),
-                    targetZIndex: this.targetZIndex,
-                    origZIndex: this.origZIndex,
-                };
+            if (component && origZIndex === undefined) {
+                this.origZIndex = component.getZIndex();
+            }
+        }
+        resolveComponent(image) {
+            if (this.component) {
+                return;
+            }
+            super.resolveComponent(image);
+            this.origZIndex ??= this.component.getZIndex();
+        }
+        updateTransform(editor, newTransfm) {
+            if (!this.component) {
+                throw new Error('this.component is undefined or null!');
+            }
+            // Any parent should have only one direct child.
+            const parent = editor.image.findParent(this.component);
+            let hadParent = false;
+            if (parent) {
+                parent.remove();
+                hadParent = true;
+            }
+            this.component.applyTransformation(newTransfm);
+            this.component.lastChangedTime = (new Date()).getTime();
+            // Add the element back to the document.
+            if (hadParent) {
+                EditorImage_1.default.addElement(this.component).apply(editor);
+            }
+        }
+        apply(editor) {
+            this.resolveComponent(editor.image);
+            this.component.zIndex = this.targetZIndex;
+            this.updateTransform(editor, this.affineTransfm);
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            this.resolveComponent(editor.image);
+            this.component.zIndex = this.origZIndex;
+            this.updateTransform(editor, this.affineTransfm.inverse());
+            editor.queueRerender();
+        }
+        description(_editor, localizationTable) {
+            return localizationTable.transformedElements(1);
+        }
+        serializeToJSON() {
+            return {
+                id: this.componentID,
+                transfm: this.affineTransfm.toArray(),
+                targetZIndex: this.targetZIndex,
+                origZIndex: this.origZIndex,
             };
-            return class_1;
-        }(UnresolvedCommand_1.default)),
-        __setFunctionName(_a, "TransformElementCommand"),
-        (function () {
-            SerializableCommand_1.default.register(AbstractComponent.transformElementCommandId, function (json, editor) {
-                var _a, _b;
-                var elem = (_a = editor.image.lookupElement(json.id)) !== null && _a !== void 0 ? _a : undefined;
-                var transform = new (Mat33_1.default.bind.apply(Mat33_1.default, __spreadArray([void 0], json.transfm, false)))();
-                var targetZIndex = json.targetZIndex;
-                var origZIndex = (_b = json.origZIndex) !== null && _b !== void 0 ? _b : undefined;
-                return new AbstractComponent.TransformElementCommand(transform, json.id, elem, targetZIndex, origZIndex);
-            });
-        })(),
-        _a);
-    return AbstractComponent;
-}());
+        }
+    },
+    __setFunctionName(_a, "TransformElementCommand"),
+    (() => {
+        SerializableCommand_1.default.register(AbstractComponent.transformElementCommandId, (json, editor) => {
+            const elem = editor.image.lookupElement(json.id) ?? undefined;
+            const transform = new math_1.Mat33(...json.transfm);
+            const targetZIndex = json.targetZIndex;
+            const origZIndex = json.origZIndex ?? undefined;
+            return new AbstractComponent.TransformElementCommand(transform, json.id, elem, targetZIndex, origZIndex);
+        });
+    })(),
+    _a);
 exports.default = AbstractComponent;

package/dist/cjs/components/BackgroundComponent.d.ts

@@ -1,10 +1,7 @@
-import Color4 from '../Color4';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import SerializableCommand from '../commands/SerializableCommand';
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33 from '../math/Mat33';
-import Rect2 from '../math/shapes/Rect2';
+import { LineSegment2, Mat33, Rect2, Color4 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
@@ -35,7 +32,7 @@ export default class BackgroundComponent extends AbstractComponent implements Re
     static ofGrid(backgroundColor: Color4, gridSize?: number, gridColor?: Color4, gridStrokeWidth?: number): BackgroundComponent;
     getBackgroundType(): BackgroundType;
     getMainColor(): Color4;
-    getSecondaryColor(): Color4;
+    getSecondaryColor(): Color4 | null;
     getGridSize(): number;
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
@@ -50,7 +47,7 @@ export default class BackgroundComponent extends AbstractComponent implements Re
     isBackground(): boolean;
     protected serializeToJSON(): {
         mainColor: string;
-        secondaryColor: string;
+        secondaryColor: string | undefined;
         backgroundType: BackgroundType;
         gridSize: number;
         gridStrokeWidth: number;