js-draw 0.25.0 → 1.0.0

package/dist/cjs/components/BackgroundComponent.js

@@ -1,31 +1,15 @@
 "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 _a;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.backgroundTypeToClassNameMap = exports.imageBackgroundNonAutomaticSecondaryColorCSSClassName = exports.imageBackgroundGridSizeCSSPrefix = exports.imageBackgroundCSSClassName = exports.BackgroundType = void 0;
-var Color4_1 = require("../Color4");
-var EditorImage_1 = require("../EditorImage");
-var Rect2_1 = require("../math/shapes/Rect2");
-var AbstractComponent_1 = require("./AbstractComponent");
-var RestylableComponent_1 = require("./RestylableComponent");
-var Path_1 = require("../math/shapes/Path");
-var Vec2_1 = require("../math/Vec2");
-var Viewport_1 = require("../Viewport");
-var rounding_1 = require("../math/rounding");
+const EditorImage_1 = require("../EditorImage");
+const math_1 = require("@js-draw/math");
+const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
+const RestylableComponent_1 = require("./RestylableComponent");
+const Viewport_1 = __importDefault(require("../Viewport"));
+const RenderablePathSpec_1 = require("../rendering/RenderablePathSpec");
 var BackgroundType;
 (function (BackgroundType) {
     BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
@@ -38,29 +22,27 @@ exports.imageBackgroundGridSizeCSSPrefix = 'js-draw-image-background-grid-';
 // Flag included in rendered SVGs (etc) that indicates that the secondary color of the
 // background has been manually set.
 exports.imageBackgroundNonAutomaticSecondaryColorCSSClassName = 'js-draw-image-background-non-automatic-secondary-color';
-exports.backgroundTypeToClassNameMap = (_a = {},
-    _a[BackgroundType.Grid] = 'js-draw-image-background-grid',
-    _a[BackgroundType.SolidColor] = exports.imageBackgroundCSSClassName,
-    _a[BackgroundType.None] = '',
-    _a);
+exports.backgroundTypeToClassNameMap = {
+    [BackgroundType.Grid]: 'js-draw-image-background-grid',
+    [BackgroundType.SolidColor]: exports.imageBackgroundCSSClassName,
+    [BackgroundType.None]: '',
+};
 // Represents the background of the editor's canvas.
-var BackgroundComponent = /** @class */ (function (_super) {
-    __extends(BackgroundComponent, _super);
-    function BackgroundComponent(backgroundType, mainColor) {
-        var _this = _super.call(this, 'image-background', 0) || this;
-        _this.backgroundType = backgroundType;
-        _this.mainColor = mainColor;
-        _this.viewportSizeChangeListener = null;
-        _this.gridSize = Viewport_1.default.getGridSize(2);
-        _this.gridStrokeWidth = 0.7;
-        _this.secondaryColor = null;
+class BackgroundComponent extends AbstractComponent_1.default {
+    constructor(backgroundType, mainColor) {
+        super('image-background', 0);
+        this.backgroundType = backgroundType;
+        this.mainColor = mainColor;
+        this.viewportSizeChangeListener = null;
+        this.gridSize = Viewport_1.default.getGridSize(2);
+        this.gridStrokeWidth = 0.7;
+        this.secondaryColor = null;
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
-        _this.isRestylableComponent = true;
-        _this.contentBBox = Rect2_1.default.empty;
-        return _this;
+        this.isRestylableComponent = true;
+        this.contentBBox = math_1.Rect2.empty;
     }
-    BackgroundComponent.ofGrid = function (backgroundColor, gridSize, gridColor, gridStrokeWidth) {
-        var background = new BackgroundComponent(BackgroundType.Grid, backgroundColor);
+    static ofGrid(backgroundColor, gridSize, gridColor, gridStrokeWidth) {
+        const background = new BackgroundComponent(BackgroundType.Grid, backgroundColor);
         if (gridSize !== undefined) {
             background.gridSize = gridSize;
         }
@@ -71,43 +53,43 @@ var BackgroundComponent = /** @class */ (function (_super) {
             background.gridStrokeWidth = gridStrokeWidth;
         }
         return background;
-    };
-    BackgroundComponent.prototype.getBackgroundType = function () {
+    }
+    getBackgroundType() {
         return this.backgroundType;
-    };
+    }
     // @internal
-    BackgroundComponent.prototype.getMainColor = function () {
+    getMainColor() {
         return this.mainColor;
-    };
+    }
     // @internal
-    BackgroundComponent.prototype.getSecondaryColor = function () {
+    getSecondaryColor() {
         return this.secondaryColor;
-    };
+    }
     // @internal
-    BackgroundComponent.prototype.getGridSize = function () {
+    getGridSize() {
         return this.gridSize;
-    };
-    BackgroundComponent.prototype.getStyle = function () {
-        var color = this.mainColor;
+    }
+    getStyle() {
+        let color = this.mainColor;
         if (this.backgroundType === BackgroundType.None) {
             color = undefined;
         }
         return {
-            color: color,
+            color,
         };
-    };
-    BackgroundComponent.prototype.updateStyle = function (style) {
+    }
+    updateStyle(style) {
         return (0, RestylableComponent_1.createRestyleComponentCommand)(this.getStyle(), style, this);
-    };
+    }
     // @internal
-    BackgroundComponent.prototype.forceStyle = function (style, editor) {
-        var fill = style.color;
+    forceStyle(style, editor) {
+        const fill = style.color;
         if (!fill) {
             return;
         }
         this.mainColor = fill;
         // A solid background and transparent fill is equivalent to no background.
-        if (fill.eq(Color4_1.default.transparent) && this.backgroundType === BackgroundType.SolidColor) {
+        if (fill.eq(math_1.Color4.transparent) && this.backgroundType === BackgroundType.SolidColor) {
             this.backgroundType = BackgroundType.None;
         }
         else if (this.backgroundType === BackgroundType.None) {
@@ -117,87 +99,83 @@ var BackgroundComponent = /** @class */ (function (_super) {
             editor.image.queueRerenderOf(this);
             editor.queueRerender();
         }
-    };
-    BackgroundComponent.prototype.onAddToImage = function (image) {
-        var _this = this;
+    }
+    onAddToImage(image) {
         if (this.viewportSizeChangeListener) {
             console.warn('onAddToImage called when background is already in an image');
             this.onRemoveFromImage();
         }
-        this.viewportSizeChangeListener = image.notifier.on(EditorImage_1.EditorImageEventType.ExportViewportChanged, function () {
-            _this.recomputeBBox(image);
+        this.viewportSizeChangeListener = image.notifier.on(EditorImage_1.EditorImageEventType.ExportViewportChanged, () => {
+            this.recomputeBBox(image);
         });
         this.recomputeBBox(image);
-    };
-    BackgroundComponent.prototype.onRemoveFromImage = function () {
-        var _a;
-        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+    onRemoveFromImage() {
+        this.viewportSizeChangeListener?.remove();
         this.viewportSizeChangeListener = null;
-    };
-    BackgroundComponent.prototype.recomputeBBox = function (image) {
-        var importExportRect = image.getImportExportViewport().visibleRect;
+    }
+    recomputeBBox(image) {
+        const importExportRect = image.getImportExportViewport().visibleRect;
         if (!this.contentBBox.eq(importExportRect)) {
             this.contentBBox = importExportRect;
             // Re-render this if already added to the EditorImage.
             image.queueRerenderOf(this);
         }
-    };
-    BackgroundComponent.prototype.generateGridPath = function (visibleRect) {
-        var _this = this;
-        var _a, _b;
-        var targetRect = (_b = (_a = visibleRect === null || visibleRect === void 0 ? void 0 : visibleRect.grownBy(this.gridStrokeWidth)) === null || _a === void 0 ? void 0 : _a.intersection(this.contentBBox)) !== null && _b !== void 0 ? _b : this.contentBBox;
-        var roundDownToGrid = function (coord) { return Math.floor(coord / _this.gridSize) * _this.gridSize; };
-        var roundUpToGrid = function (coord) { return Math.ceil(coord / _this.gridSize) * _this.gridSize; };
-        var startY = roundUpToGrid(targetRect.y);
-        var endY = roundDownToGrid(targetRect.y + targetRect.h);
-        var startX = roundUpToGrid(targetRect.x);
-        var endX = roundDownToGrid(targetRect.x + targetRect.w);
-        var result = [];
+    }
+    generateGridPath(visibleRect) {
+        const targetRect = visibleRect?.grownBy(this.gridStrokeWidth)?.intersection(this.contentBBox) ?? this.contentBBox;
+        const roundDownToGrid = (coord) => Math.floor(coord / this.gridSize) * this.gridSize;
+        const roundUpToGrid = (coord) => Math.ceil(coord / this.gridSize) * this.gridSize;
+        const startY = roundUpToGrid(targetRect.y);
+        const endY = roundDownToGrid(targetRect.y + targetRect.h);
+        const startX = roundUpToGrid(targetRect.x);
+        const endX = roundDownToGrid(targetRect.x + targetRect.w);
+        const result = [];
         // Don't generate grids with a huge number of rows/columns -- such grids
         // take a long time to render and are likely invisible due to the number of
         // cells.
-        var rowCount = (endY - startY) / this.gridSize;
-        var colCount = (endX - startX) / this.gridSize;
-        var maxGridCols = 1000;
-        var maxGridRows = 1000;
+        const rowCount = (endY - startY) / this.gridSize;
+        const colCount = (endX - startX) / this.gridSize;
+        const maxGridCols = 1000;
+        const maxGridRows = 1000;
         if (rowCount > maxGridRows || colCount > maxGridCols) {
-            return Path_1.default.empty;
+            return math_1.Path.empty;
         }
-        var startPoint = Vec2_1.Vec2.of(targetRect.x, startY);
-        for (var y = startY; y <= endY; y += this.gridSize) {
+        const startPoint = math_1.Vec2.of(targetRect.x, startY);
+        for (let y = startY; y <= endY; y += this.gridSize) {
             result.push({
-                kind: Path_1.PathCommandType.MoveTo,
-                point: Vec2_1.Vec2.of(targetRect.x, y),
+                kind: math_1.PathCommandType.MoveTo,
+                point: math_1.Vec2.of(targetRect.x, y),
             });
             result.push({
-                kind: Path_1.PathCommandType.LineTo,
-                point: Vec2_1.Vec2.of(targetRect.x + targetRect.w, y),
+                kind: math_1.PathCommandType.LineTo,
+                point: math_1.Vec2.of(targetRect.x + targetRect.w, y),
             });
         }
-        for (var x = startX; x <= endX; x += this.gridSize) {
+        for (let x = startX; x <= endX; x += this.gridSize) {
             result.push({
-                kind: Path_1.PathCommandType.MoveTo,
-                point: Vec2_1.Vec2.of(x, targetRect.y),
+                kind: math_1.PathCommandType.MoveTo,
+                point: math_1.Vec2.of(x, targetRect.y),
             });
             result.push({
-                kind: Path_1.PathCommandType.LineTo,
-                point: Vec2_1.Vec2.of(x, targetRect.y + targetRect.h)
+                kind: math_1.PathCommandType.LineTo,
+                point: math_1.Vec2.of(x, targetRect.y + targetRect.h)
             });
         }
-        return new Path_1.default(startPoint, result);
-    };
-    BackgroundComponent.prototype.render = function (canvas, visibleRect) {
+        return new math_1.Path(startPoint, result);
+    }
+    render(canvas, visibleRect) {
         if (this.backgroundType === BackgroundType.None) {
             return;
         }
-        var clip = this.backgroundType === BackgroundType.Grid;
+        const clip = this.backgroundType === BackgroundType.Grid;
         canvas.startObject(this.contentBBox, clip);
         if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
             // If the rectangle for this region contains the visible rect,
             // we can fill the entire visible rectangle (which may be more efficient than
             // filling the entire region for this.)
             if (visibleRect) {
-                var intersection = visibleRect.intersection(this.contentBBox);
+                const intersection = visibleRect.intersection(this.contentBBox);
                 if (intersection) {
                     canvas.fillRect(intersection, this.mainColor);
                 }
@@ -207,54 +185,53 @@ var BackgroundComponent = /** @class */ (function (_super) {
             }
         }
         if (this.backgroundType === BackgroundType.Grid) {
-            var gridColor = this.secondaryColor;
-            gridColor !== null && gridColor !== void 0 ? gridColor : (gridColor = Color4_1.default.ofRGBA(1 - this.mainColor.r, 1 - this.mainColor.g, 1 - this.mainColor.b, 0.2));
+            let gridColor = this.secondaryColor;
+            gridColor ??= math_1.Color4.ofRGBA(1 - this.mainColor.r, 1 - this.mainColor.g, 1 - this.mainColor.b, 0.2);
             // If the background fill is completely transparent, ensure visibility on otherwise light
             // and dark backgrounds.
             if (this.mainColor.a === 0) {
-                gridColor = Color4_1.default.ofRGBA(0.5, 0.5, 0.5, 0.2);
+                gridColor = math_1.Color4.ofRGBA(0.5, 0.5, 0.5, 0.2);
             }
-            var style = {
-                fill: Color4_1.default.transparent,
+            const style = {
+                fill: math_1.Color4.transparent,
                 stroke: { width: this.gridStrokeWidth, color: gridColor }
             };
-            canvas.drawPath(this.generateGridPath(visibleRect).toRenderable(style));
+            canvas.drawPath((0, RenderablePathSpec_1.pathToRenderable)(this.generateGridPath(visibleRect), style));
         }
-        var backgroundTypeCSSClass = exports.backgroundTypeToClassNameMap[this.backgroundType];
-        var classNames = [exports.imageBackgroundCSSClassName];
+        const backgroundTypeCSSClass = exports.backgroundTypeToClassNameMap[this.backgroundType];
+        const classNames = [exports.imageBackgroundCSSClassName];
         if (backgroundTypeCSSClass !== exports.imageBackgroundCSSClassName) {
             classNames.push(backgroundTypeCSSClass);
-            var gridSizeStr = (0, rounding_1.toRoundedString)(this.gridSize).replace(/[.]/g, 'p');
+            const gridSizeStr = (0, math_1.toRoundedString)(this.gridSize).replace(/[.]/g, 'p');
             classNames.push(exports.imageBackgroundGridSizeCSSPrefix + gridSizeStr);
         }
         if (this.secondaryColor !== null) {
             classNames.push(exports.imageBackgroundNonAutomaticSecondaryColorCSSClassName);
         }
         canvas.endObject(this.getLoadSaveData(), classNames);
-    };
-    BackgroundComponent.prototype.intersects = function (lineSegment) {
-        return this.contentBBox.getEdges().some(function (edge) { return edge.intersects(lineSegment); });
-    };
-    BackgroundComponent.prototype.isSelectable = function () {
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+    }
+    isSelectable() {
         return false;
-    };
-    BackgroundComponent.prototype.isBackground = function () {
+    }
+    isBackground() {
         return true;
-    };
-    BackgroundComponent.prototype.serializeToJSON = function () {
-        var _a;
+    }
+    serializeToJSON() {
         return {
             mainColor: this.mainColor.toHexString(),
-            secondaryColor: (_a = this.secondaryColor) === null || _a === void 0 ? void 0 : _a.toHexString(),
+            secondaryColor: this.secondaryColor?.toHexString(),
             backgroundType: this.backgroundType,
             gridSize: this.gridSize,
             gridStrokeWidth: this.gridStrokeWidth,
         };
-    };
-    BackgroundComponent.prototype.applyTransformation = function (_affineTransfm) {
+    }
+    applyTransformation(_affineTransfm) {
         // Do nothing — it doesn't make sense to transform the background.
-    };
-    BackgroundComponent.prototype.description = function (localizationTable) {
+    }
+    description(localizationTable) {
         if (this.backgroundType === BackgroundType.SolidColor) {
             return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
         }
@@ -265,37 +242,36 @@ var BackgroundComponent = /** @class */ (function (_super) {
             return localizationTable.gridBackground;
         }
         else {
-            var exhaustivenessCheck = this.backgroundType;
+            const exhaustivenessCheck = this.backgroundType;
             return exhaustivenessCheck;
         }
-    };
-    BackgroundComponent.prototype.createClone = function () {
+    }
+    createClone() {
         return new BackgroundComponent(this.backgroundType, this.mainColor);
-    };
+    }
     // @internal
-    BackgroundComponent.deserializeFromJSON = function (json) {
-        var _a, _b;
+    static deserializeFromJSON(json) {
         if (typeof json === 'string') {
             json = JSON.parse(json);
         }
         if (typeof json.mainColor !== 'string') {
             throw new Error('Error deserializing — mainColor must be of type string.');
         }
-        var backgroundType;
-        var jsonBackgroundType = json.backgroundType;
+        let backgroundType;
+        const jsonBackgroundType = json.backgroundType;
         if (jsonBackgroundType === BackgroundType.None || jsonBackgroundType === BackgroundType.Grid
             || jsonBackgroundType === BackgroundType.SolidColor) {
             backgroundType = jsonBackgroundType;
         }
         else {
-            var exhaustivenessCheck = jsonBackgroundType;
+            const exhaustivenessCheck = jsonBackgroundType;
             return exhaustivenessCheck;
         }
-        var mainColor = Color4_1.default.fromHex(json.mainColor);
-        var secondaryColor = json.secondaryColor ? Color4_1.default.fromHex(json.secondaryColor) : null;
-        var gridSize = (_a = json.gridSize) !== null && _a !== void 0 ? _a : undefined;
-        var gridStrokeWidth = (_b = json.gridStrokeWidth) !== null && _b !== void 0 ? _b : undefined;
-        var result = new BackgroundComponent(backgroundType, mainColor);
+        const mainColor = math_1.Color4.fromHex(json.mainColor);
+        const secondaryColor = json.secondaryColor ? math_1.Color4.fromHex(json.secondaryColor) : null;
+        const gridSize = json.gridSize ?? undefined;
+        const gridStrokeWidth = json.gridStrokeWidth ?? undefined;
+        const result = new BackgroundComponent(backgroundType, mainColor);
         result.secondaryColor = secondaryColor;
         if (gridSize) {
             result.gridSize = gridSize;
@@ -304,8 +280,7 @@ var BackgroundComponent = /** @class */ (function (_super) {
             result.gridStrokeWidth = gridStrokeWidth;
         }
         return result;
-    };
-    return BackgroundComponent;
-}(AbstractComponent_1.default));
+    }
+}
 exports.default = BackgroundComponent;
 AbstractComponent_1.default.registerComponent('image-background', BackgroundComponent.deserializeFromJSON);

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

@@ -1,6 +1,4 @@
-import LineSegment2 from '../math/shapes/LineSegment2';
-import Mat33, { Mat33Array } from '../math/Mat33';
-import Rect2 from '../math/shapes/Rect2';
+import { Mat33Array, Rect2, Mat33, LineSegment2 } from '@js-draw/math';
 import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
@@ -16,13 +14,13 @@ export default class ImageComponent extends AbstractComponent {
     intersects(lineSegment: LineSegment2): boolean;
     protected applyTransformation(affineTransfm: Mat33): void;
     description(localizationTable: ImageComponentLocalization): string;
-    getAltText(): string;
+    getAltText(): string | undefined;
     getURL(): string;
     getTransformation(): Mat33;
     protected createClone(): AbstractComponent;
     protected serializeToJSON(): {
         src: string;
-        label: string;
+        label: string | undefined;
         width: number;
         height: number;
         transform: Mat33Array;