js-draw 0.25.1 → 1.0.0

package/dist/mjs/components/TextComponent.mjs

@@ -1,45 +1,8 @@
-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 __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  { Vec2 }  from '../math/Vec2.mjs';
+import { Vec2, Rect2, Mat33 } from '@js-draw/math';
 import  { cloneTextStyle, textStyleFromJSON, textStyleToJSON }  from '../rendering/TextRenderingStyle.mjs';
 import  AbstractComponent  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
-var componentTypeId = 'text';
+const componentTypeId = 'text';
 export var TextTransformMode;
 (function (TextTransformMode) {
     /** Absolutely positioned in both the X and Y dimensions. */
@@ -54,106 +17,99 @@ export var TextTransformMode;
 /**
  * Displays text.
  */
-var TextComponent = /** @class */ (function (_super) {
-    __extends(TextComponent, _super);
+class TextComponent extends AbstractComponent {
     /**
      * Creates a new text object from a list of component text or child TextComponents.
      *
      * @see {@link fromLines}
      */
-    function TextComponent(textObjects, 
+    constructor(textObjects, 
     // Transformation relative to this component's parent element.
     transform, style, 
     // @internal
-    transformMode) {
-        if (transformMode === void 0) { transformMode = TextTransformMode.ABSOLUTE_XY; }
-        var _this = _super.call(this, componentTypeId) || this;
-        _this.textObjects = textObjects;
-        _this.transform = transform;
-        _this.style = style;
-        _this.transformMode = transformMode;
+    transformMode = TextTransformMode.ABSOLUTE_XY) {
+        super(componentTypeId);
+        this.textObjects = textObjects;
+        this.transform = transform;
+        this.style = style;
+        this.transformMode = transformMode;
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
-        _this.isRestylableComponent = true;
-        _this.recomputeBBox();
+        this.isRestylableComponent = true;
+        this.recomputeBBox();
         // If this has no direct children, choose a style representative of this' content
         // (useful for estimating the style of the TextComponent).
-        var hasDirectContent = textObjects.some(function (obj) { return typeof obj === 'string'; });
+        const hasDirectContent = textObjects.some(obj => typeof obj === 'string');
         if (!hasDirectContent && textObjects.length > 0) {
-            _this.style = textObjects[0].getTextStyle();
+            this.style = textObjects[0].getTextStyle();
         }
-        return _this;
     }
-    TextComponent.applyTextStyles = function (ctx, style) {
-        var _a, _b, _c;
+    static applyTextStyles(ctx, style) {
         // Quote the font family if necessary.
-        var fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+        const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
         ctx.font = [
-            (_a = style.fontStyle) !== null && _a !== void 0 ? _a : '',
-            (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '',
-            ((_c = style.size) !== null && _c !== void 0 ? _c : 12) + 'px',
-            "".concat(fontFamily)
+            style.fontStyle ?? '',
+            style.fontWeight ?? '',
+            (style.size ?? 12) + 'px',
+            `${fontFamily}`
         ].join(' ');
         // TODO: Support RTL
         ctx.textAlign = 'left';
-    };
+    }
     // Roughly estimate the bounding box of `text`. Use if no CanvasRenderingContext2D is available.
-    TextComponent.estimateTextDimens = function (text, style) {
-        var widthEst = text.length * style.size;
-        var heightEst = style.size;
+    static estimateTextDimens(text, style) {
+        const widthEst = text.length * style.size;
+        const heightEst = style.size;
         // Text is drawn with (0, 0) as its baseline. As such, the majority of the text's height should
         // be above (0, 0).
         return new Rect2(0, -heightEst * 2 / 3, widthEst, heightEst);
-    };
+    }
     // Returns a set of TextMetrics for the given text, if a canvas is available.
-    TextComponent.getTextMetrics = function (text, style) {
-        var _a, _b;
-        (_a = TextComponent.textMeasuringCtx) !== null && _a !== void 0 ? _a : (TextComponent.textMeasuringCtx = (_b = document.createElement('canvas').getContext('2d')) !== null && _b !== void 0 ? _b : null);
+    static getTextMetrics(text, style) {
+        TextComponent.textMeasuringCtx ??= document.createElement('canvas').getContext('2d') ?? null;
         if (!TextComponent.textMeasuringCtx) {
             return null;
         }
-        var ctx = TextComponent.textMeasuringCtx;
+        const ctx = TextComponent.textMeasuringCtx;
         TextComponent.applyTextStyles(ctx, style);
         return ctx.measureText(text);
-    };
+    }
     // Returns the bounding box of `text`. This is approximate if no Canvas is available.
-    TextComponent.getTextDimens = function (text, style) {
-        var metrics = this.getTextMetrics(text, style);
+    static getTextDimens(text, style) {
+        const metrics = this.getTextMetrics(text, style);
         if (!metrics) {
             return this.estimateTextDimens(text, style);
         }
         // Text is drawn with (0,0) at the bottom left of the baseline.
-        var textY = -metrics.actualBoundingBoxAscent;
-        var textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+        const textY = -metrics.actualBoundingBoxAscent;
+        const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
         return new Rect2(0, textY, metrics.width, textHeight);
-    };
-    TextComponent.getFontHeight = function (style) {
+    }
+    static getFontHeight(style) {
         return style.size;
-    };
-    TextComponent.prototype.computeUntransformedBBoxOfPart = function (part) {
+    }
+    computeUntransformedBBoxOfPart(part) {
         if (typeof part === 'string') {
             return TextComponent.getTextDimens(part, this.style);
         }
         else {
             return part.contentBBox;
         }
-    };
-    TextComponent.prototype.recomputeBBox = function () {
-        var bbox = null;
-        var cursor = new TextComponent.TextCursor(this.transform, this.style);
-        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
-            var textObject = _a[_i];
-            var transform = cursor.update(textObject);
-            var currentBBox = this.computeUntransformedBBoxOfPart(textObject).transformedBoundingBox(transform);
-            bbox !== null && bbox !== void 0 ? bbox : (bbox = currentBBox);
+    }
+    recomputeBBox() {
+        let bbox = null;
+        const cursor = new TextComponent.TextCursor(this.transform, this.style);
+        for (const textObject of this.textObjects) {
+            const transform = cursor.update(textObject);
+            const currentBBox = this.computeUntransformedBBoxOfPart(textObject).transformedBoundingBox(transform);
+            bbox ??= currentBBox;
             bbox = bbox.union(currentBBox);
         }
-        this.contentBBox = bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
-    };
-    TextComponent.prototype.renderInternal = function (canvas) {
-        var cursor = new TextComponent.TextCursor(this.transform, this.style);
-        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
-            var textObject = _a[_i];
-            var transform = cursor.update(textObject);
+        this.contentBBox = bbox ?? Rect2.empty;
+    }
+    renderInternal(canvas) {
+        const cursor = new TextComponent.TextCursor(this.transform, this.style);
+        for (const textObject of this.textObjects) {
+            const transform = cursor.update(textObject);
             if (typeof textObject === 'string') {
                 canvas.drawText(textObject, transform, this.style);
             }
@@ -163,66 +119,69 @@ var TextComponent = /** @class */ (function (_super) {
                 canvas.popTransform();
             }
         }
-    };
-    TextComponent.prototype.render = function (canvas, _visibleRect) {
+    }
+    render(canvas, _visibleRect) {
         canvas.startObject(this.contentBBox);
         this.renderInternal(canvas);
         canvas.endObject(this.getLoadSaveData());
-    };
-    TextComponent.prototype.getProportionalRenderingTime = function () {
+    }
+    getProportionalRenderingTime() {
         return this.textObjects.length;
-    };
-    TextComponent.prototype.intersects = function (lineSegment) {
-        var cursor = new TextComponent.TextCursor(this.transform, this.style);
-        var _loop_1 = function (subObject) {
+    }
+    intersects(lineSegment) {
+        const cursor = new TextComponent.TextCursor(this.transform, this.style);
+        for (const subObject of this.textObjects) {
             // Convert canvas space to internal space relative to the current object.
-            var invTransform = cursor.update(subObject).inverse();
-            var transformedLine = lineSegment.transformedBy(invTransform);
+            const invTransform = cursor.update(subObject).inverse();
+            const transformedLine = lineSegment.transformedBy(invTransform);
             if (typeof subObject === 'string') {
-                var textBBox = TextComponent.getTextDimens(subObject, this_1.style);
+                const textBBox = TextComponent.getTextDimens(subObject, this.style);
                 // TODO: Use a better intersection check. Perhaps draw the text onto a CanvasElement and
                 // use pixel-testing to check for intersection with its contour.
-                if (textBBox.getEdges().some(function (edge) { return transformedLine.intersection(edge) !== null; })) {
-                    return { value: true };
+                if (textBBox.getEdges().some(edge => transformedLine.intersection(edge) !== null)) {
+                    return true;
                 }
             }
             else {
                 if (subObject.intersects(transformedLine)) {
-                    return { value: true };
+                    return true;
                 }
             }
-        };
-        var this_1 = this;
-        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
-            var subObject = _a[_i];
-            var state_1 = _loop_1(subObject);
-            if (typeof state_1 === "object")
-                return state_1.value;
         }
         return false;
-    };
-    TextComponent.prototype.getStyle = function () {
+    }
+    getStyle() {
         return {
             color: this.style.renderingStyle.fill,
             // Make a copy
-            textStyle: __assign(__assign({}, this.style), { renderingStyle: __assign({}, this.style.renderingStyle) }),
+            textStyle: {
+                ...this.style,
+                renderingStyle: {
+                    ...this.style.renderingStyle,
+                },
+            },
         };
-    };
-    TextComponent.prototype.updateStyle = function (style) {
+    }
+    updateStyle(style) {
         return createRestyleComponentCommand(this.getStyle(), style, this);
-    };
-    TextComponent.prototype.forceStyle = function (style, editor) {
+    }
+    forceStyle(style, editor) {
         if (style.textStyle) {
             this.style = cloneTextStyle(style.textStyle);
         }
         else if (style.color) {
-            this.style = __assign(__assign({}, this.style), { renderingStyle: __assign(__assign({}, this.style.renderingStyle), { fill: style.color }) });
+            this.style = {
+                ...this.style,
+                renderingStyle: {
+                    ...this.style.renderingStyle,
+                    fill: style.color,
+                },
+            };
         }
         else {
             return;
         }
-        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
-            var child = _a[_i];
+        for (const child of this.textObjects) {
             if (child instanceof TextComponent) {
                 child.forceStyle(style, editor);
             }
@@ -231,23 +190,23 @@ var TextComponent = /** @class */ (function (_super) {
             editor.image.queueRerenderOf(this);
             editor.queueRerender();
         }
-    };
+    }
     // See {@link getStyle}
-    TextComponent.prototype.getTextStyle = function () {
+    getTextStyle() {
         return cloneTextStyle(this.style);
-    };
-    TextComponent.prototype.getBaselinePos = function () {
+    }
+    getBaselinePos() {
         return this.transform.transformVec2(Vec2.zero);
-    };
-    TextComponent.prototype.getTransform = function () {
+    }
+    getTransform() {
         return this.transform;
-    };
-    TextComponent.prototype.applyTransformation = function (affineTransfm) {
+    }
+    applyTransformation(affineTransfm) {
         this.transform = affineTransfm.rightMul(this.transform);
         this.recomputeBBox();
-    };
-    TextComponent.prototype.createClone = function () {
-        var clonedTextObjects = this.textObjects.map(function (obj) {
+    }
+    createClone() {
+        const clonedTextObjects = this.textObjects.map(obj => {
             if (typeof obj === 'string') {
                 return obj;
             }
@@ -256,11 +215,10 @@ var TextComponent = /** @class */ (function (_super) {
             }
         });
         return new TextComponent(clonedTextObjects, this.transform, this.style);
-    };
-    TextComponent.prototype.getText = function () {
-        var result = [];
-        for (var _i = 0, _a = this.textObjects; _i < _a.length; _i++) {
-            var textObject = _a[_i];
+    }
+    getText() {
+        const result = [];
+        for (const textObject of this.textObjects) {
             if (typeof textObject === 'string') {
                 result.push(textObject);
             }
@@ -269,17 +227,17 @@ var TextComponent = /** @class */ (function (_super) {
             }
         }
         return result.join('\n');
-    };
-    TextComponent.prototype.description = function (localizationTable) {
+    }
+    description(localizationTable) {
         return localizationTable.text(this.getText());
-    };
+    }
     // Do not rely on the output of `serializeToJSON` taking any particular format.
-    TextComponent.prototype.serializeToJSON = function () {
-        var serializableStyle = textStyleToJSON(this.style);
-        var serializedTextObjects = this.textObjects.map(function (text) {
+    serializeToJSON() {
+        const serializableStyle = textStyleToJSON(this.style);
+        const serializedTextObjects = this.textObjects.map(text => {
             if (typeof text === 'string') {
                 return {
-                    text: text,
+                    text,
                 };
             }
             else {
@@ -293,28 +251,27 @@ var TextComponent = /** @class */ (function (_super) {
             transform: this.transform.toArray(),
             style: serializableStyle,
         };
-    };
+    }
     // @internal
-    TextComponent.deserializeFromString = function (json) {
+    static deserializeFromString(json) {
         if (typeof json === 'string') {
             json = JSON.parse(json);
         }
-        var style = textStyleFromJSON(json.style);
-        var textObjects = json.textObjects.map(function (data) {
-            var _a;
-            if (((_a = data.text) !== null && _a !== void 0 ? _a : null) !== null) {
+        const style = textStyleFromJSON(json.style);
+        const textObjects = json.textObjects.map((data) => {
+            if ((data.text ?? null) !== null) {
                 return data.text;
             }
             return TextComponent.deserializeFromString(data.json);
         });
-        json.transform = json.transform.filter(function (elem) { return typeof elem === 'number'; });
+        json.transform = json.transform.filter((elem) => typeof elem === 'number');
         if (json.transform.length !== 9) {
-            throw new Error("Unable to deserialize transform, ".concat(json.transform, "."));
+            throw new Error(`Unable to deserialize transform, ${json.transform}.`);
         }
-        var transformData = json.transform;
-        var transform = new (Mat33.bind.apply(Mat33, __spreadArray([void 0], transformData, false)))();
+        const transformData = json.transform;
+        const transform = new Mat33(...transformData);
         return new TextComponent(textObjects, transform, style);
-    };
+    }
     /**
      * Creates a `TextComponent` from `lines`.
      *
@@ -329,80 +286,75 @@ var TextComponent = /** @class */ (function (_super) {
      * const text = TextComponent.fromLines('foo\nbar'.split('\n'), Mat33.identity, textStyle);
      * ```
      */
-    TextComponent.fromLines = function (lines, transform, style) {
-        var lastComponent = null;
-        var components = [];
-        var lineMargin = Math.round(this.getFontHeight(style));
-        var position = Vec2.zero;
-        for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
-            var line = lines_1[_i];
+    static fromLines(lines, transform, style) {
+        let lastComponent = null;
+        const components = [];
+        const lineMargin = Math.round(this.getFontHeight(style));
+        let position = Vec2.zero;
+        for (const line of lines) {
             if (lastComponent) {
                 position = position.plus(Vec2.unitY.times(lineMargin));
             }
-            var component = new TextComponent([line], Mat33.translation(position), style);
+            const component = new TextComponent([line], Mat33.translation(position), style);
             components.push(component);
             lastComponent = component;
         }
         return new TextComponent(components, transform, style);
-    };
-    TextComponent.textMeasuringCtx = null;
-    TextComponent.TextCursor = /** @class */ (function () {
-        function class_1(parentTransform, parentStyle) {
-            if (parentTransform === void 0) { parentTransform = Mat33.identity; }
-            this.parentTransform = parentTransform;
-            this.parentStyle = parentStyle;
-            this.transform = Mat33.identity;
+    }
+}
+TextComponent.textMeasuringCtx = null;
+TextComponent.TextCursor = class {
+    constructor(parentTransform = Mat33.identity, parentStyle) {
+        this.parentTransform = parentTransform;
+        this.parentStyle = parentStyle;
+        this.transform = Mat33.identity;
+    }
+    /**
+     * Based on previous calls to `update`, returns the transformation of
+     * the given `element` (including the parentTransform given to this cursor's
+     * constructor).
+     *
+     * The result does not take into account
+     */
+    update(elem) {
+        let elementTransform = Mat33.identity;
+        let elemInternalTransform = Mat33.identity;
+        let textSize;
+        if (typeof (elem) === 'string') {
+            textSize = TextComponent.getTextDimens(elem, this.parentStyle);
         }
-        /**
-         * Based on previous calls to `update`, returns the transformation of
-         * the given `element` (including the parentTransform given to this cursor's
-         * constructor).
-         *
-         * The result does not take into account
-         */
-        class_1.prototype.update = function (elem) {
-            var elementTransform = Mat33.identity;
-            var elemInternalTransform = Mat33.identity;
-            var textSize;
-            if (typeof (elem) === 'string') {
-                textSize = TextComponent.getTextDimens(elem, this.parentStyle);
-            }
-            else {
-                // TODO: Double-check whether we need to take elem.transform into account here.
-                // elementTransform = elem.transform;
-                elemInternalTransform = elem.transform;
-                textSize = elem.getBBox();
-            }
-            var positioning = typeof (elem) === 'string' ? TextTransformMode.RELATIVE_XY : elem.transformMode;
-            if (positioning === TextTransformMode.RELATIVE_XY) {
-                // Position relative to the previous element's transform.
-                elementTransform = this.transform.rightMul(elementTransform);
-            }
-            else if (positioning === TextTransformMode.RELATIVE_X_ABSOLUTE_Y || positioning === TextTransformMode.RELATIVE_Y_ABSOLUTE_X) {
-                // Zero the absolute component of this.transform's translation
-                var transform = this.transform.mapEntries(function (component, _a) {
-                    var row = _a[0], col = _a[1];
-                    if (positioning === TextTransformMode.RELATIVE_X_ABSOLUTE_Y) {
-                        // Zero the y component of this.transform's translation
-                        return row === 1 && col === 2 ? 0 : component;
-                    }
-                    else if (positioning === TextTransformMode.RELATIVE_Y_ABSOLUTE_X) {
-                        // Zero the x component of this.transform's translation
-                        return row === 0 && col === 2 ? 0 : component;
-                    }
-                    throw new Error('Unreachable');
-                    return 0;
-                });
-                elementTransform = transform.rightMul(elementTransform);
-            }
-            // Update this.transform so that future calls to update return correct values.
-            var endShiftTransform = Mat33.translation(Vec2.of(textSize.width, 0));
-            this.transform = elementTransform.rightMul(elemInternalTransform).rightMul(endShiftTransform);
-            return this.parentTransform.rightMul(elementTransform);
-        };
-        return class_1;
-    }());
-    return TextComponent;
-}(AbstractComponent));
+        else {
+            // TODO: Double-check whether we need to take elem.transform into account here.
+            // elementTransform = elem.transform;
+            elemInternalTransform = elem.transform;
+            textSize = elem.getBBox();
+        }
+        const positioning = typeof (elem) === 'string' ? TextTransformMode.RELATIVE_XY : elem.transformMode;
+        if (positioning === TextTransformMode.RELATIVE_XY) {
+            // Position relative to the previous element's transform.
+            elementTransform = this.transform.rightMul(elementTransform);
+        }
+        else if (positioning === TextTransformMode.RELATIVE_X_ABSOLUTE_Y || positioning === TextTransformMode.RELATIVE_Y_ABSOLUTE_X) {
+            // Zero the absolute component of this.transform's translation
+            const transform = this.transform.mapEntries((component, [row, col]) => {
+                if (positioning === TextTransformMode.RELATIVE_X_ABSOLUTE_Y) {
+                    // Zero the y component of this.transform's translation
+                    return row === 1 && col === 2 ? 0 : component;
+                }
+                else if (positioning === TextTransformMode.RELATIVE_Y_ABSOLUTE_X) {
+                    // Zero the x component of this.transform's translation
+                    return row === 0 && col === 2 ? 0 : component;
+                }
+                throw new Error('Unreachable');
+                return 0;
+            });
+            elementTransform = transform.rightMul(elementTransform);
+        }
+        // Update this.transform so that future calls to update return correct values.
+        const endShiftTransform = Mat33.translation(Vec2.of(textSize.width, 0));
+        this.transform = elementTransform.rightMul(elemInternalTransform).rightMul(endShiftTransform);
+        return this.parentTransform.rightMul(elementTransform);
+    }
+};
 export default TextComponent;
-AbstractComponent.registerComponent(componentTypeId, function (data) { return TextComponent.deserializeFromString(data); });
+AbstractComponent.registerComponent(componentTypeId, (data) => TextComponent.deserializeFromString(data));

package/dist/mjs/components/UnknownSVGObject.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';