js-draw 0.25.1 → 1.0.0

package/dist/mjs/components/BackgroundComponent.mjs

@@ -1,63 +1,42 @@
-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;
-import  Color4  from '../Color4.mjs';
 import  { EditorImageEventType }  from '../EditorImage.mjs';
-import  Rect2  from '../math/shapes/Rect2.mjs';
+import { Rect2, Color4, toRoundedString, Path, PathCommandType, Vec2 } from '@js-draw/math';
 import  AbstractComponent  from './AbstractComponent.mjs';
 import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
-import  Path, { PathCommandType }  from '../math/shapes/Path.mjs';
-import  { Vec2 }  from '../math/Vec2.mjs';
 import  Viewport  from '../Viewport.mjs';
-import  { toRoundedString }  from '../math/rounding.mjs';
+import  { pathToRenderable }  from '../rendering/RenderablePathSpec.mjs';
 export var BackgroundType;
 (function (BackgroundType) {
     BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
     BackgroundType[BackgroundType["Grid"] = 1] = "Grid";
     BackgroundType[BackgroundType["None"] = 2] = "None";
 })(BackgroundType || (BackgroundType = {}));
-export var imageBackgroundCSSClassName = 'js-draw-image-background';
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
 // Class name prefix indicating the size of the background's grid cells (if present).
-export var imageBackgroundGridSizeCSSPrefix = 'js-draw-image-background-grid-';
+export const 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.
-export var imageBackgroundNonAutomaticSecondaryColorCSSClassName = 'js-draw-image-background-non-automatic-secondary-color';
-export var backgroundTypeToClassNameMap = (_a = {},
-    _a[BackgroundType.Grid] = 'js-draw-image-background-grid',
-    _a[BackgroundType.SolidColor] = imageBackgroundCSSClassName,
-    _a[BackgroundType.None] = '',
-    _a);
+export const imageBackgroundNonAutomaticSecondaryColorCSSClassName = 'js-draw-image-background-non-automatic-secondary-color';
+export const backgroundTypeToClassNameMap = {
+    [BackgroundType.Grid]: 'js-draw-image-background-grid',
+    [BackgroundType.SolidColor]: 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.getGridSize(2);
-        _this.gridStrokeWidth = 0.7;
-        _this.secondaryColor = null;
+export default class BackgroundComponent extends AbstractComponent {
+    constructor(backgroundType, mainColor) {
+        super('image-background', 0);
+        this.backgroundType = backgroundType;
+        this.mainColor = mainColor;
+        this.viewportSizeChangeListener = null;
+        this.gridSize = Viewport.getGridSize(2);
+        this.gridStrokeWidth = 0.7;
+        this.secondaryColor = null;
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
-        _this.isRestylableComponent = true;
-        _this.contentBBox = Rect2.empty;
-        return _this;
+        this.isRestylableComponent = true;
+        this.contentBBox = 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;
         }
@@ -68,37 +47,37 @@ 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 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;
         }
@@ -114,54 +93,50 @@ 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(EditorImageEventType.ExportViewportChanged, function () {
-            _this.recomputeBBox(image);
+        this.viewportSizeChangeListener = image.notifier.on(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.empty;
         }
-        var startPoint = Vec2.of(targetRect.x, startY);
-        for (var y = startY; y <= endY; y += this.gridSize) {
+        const startPoint = Vec2.of(targetRect.x, startY);
+        for (let y = startY; y <= endY; y += this.gridSize) {
             result.push({
                 kind: PathCommandType.MoveTo,
                 point: Vec2.of(targetRect.x, y),
@@ -171,7 +146,7 @@ var BackgroundComponent = /** @class */ (function (_super) {
                 point: 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: PathCommandType.MoveTo,
                 point: Vec2.of(x, targetRect.y),
@@ -182,19 +157,19 @@ var BackgroundComponent = /** @class */ (function (_super) {
             });
         }
         return new Path(startPoint, result);
-    };
-    BackgroundComponent.prototype.render = function (canvas, visibleRect) {
+    }
+    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);
                 }
@@ -204,54 +179,53 @@ var BackgroundComponent = /** @class */ (function (_super) {
             }
         }
         if (this.backgroundType === BackgroundType.Grid) {
-            var gridColor = this.secondaryColor;
-            gridColor !== null && gridColor !== void 0 ? gridColor : (gridColor = Color4.ofRGBA(1 - this.mainColor.r, 1 - this.mainColor.g, 1 - this.mainColor.b, 0.2));
+            let gridColor = this.secondaryColor;
+            gridColor ??= 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.ofRGBA(0.5, 0.5, 0.5, 0.2);
             }
-            var style = {
+            const style = {
                 fill: Color4.transparent,
                 stroke: { width: this.gridStrokeWidth, color: gridColor }
             };
-            canvas.drawPath(this.generateGridPath(visibleRect).toRenderable(style));
+            canvas.drawPath(pathToRenderable(this.generateGridPath(visibleRect), style));
         }
-        var backgroundTypeCSSClass = backgroundTypeToClassNameMap[this.backgroundType];
-        var classNames = [imageBackgroundCSSClassName];
+        const backgroundTypeCSSClass = backgroundTypeToClassNameMap[this.backgroundType];
+        const classNames = [imageBackgroundCSSClassName];
         if (backgroundTypeCSSClass !== imageBackgroundCSSClassName) {
             classNames.push(backgroundTypeCSSClass);
-            var gridSizeStr = toRoundedString(this.gridSize).replace(/[.]/g, 'p');
+            const gridSizeStr = toRoundedString(this.gridSize).replace(/[.]/g, 'p');
             classNames.push(imageBackgroundGridSizeCSSPrefix + gridSizeStr);
         }
         if (this.secondaryColor !== null) {
             classNames.push(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());
         }
@@ -262,37 +236,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.fromHex(json.mainColor);
-        var secondaryColor = json.secondaryColor ? Color4.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 = Color4.fromHex(json.mainColor);
+        const secondaryColor = json.secondaryColor ? 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;
@@ -301,8 +274,6 @@ var BackgroundComponent = /** @class */ (function (_super) {
             result.gridStrokeWidth = gridStrokeWidth;
         }
         return result;
-    };
-    return BackgroundComponent;
-}(AbstractComponent));
-export default BackgroundComponent;
+    }
+}
 AbstractComponent.registerComponent('image-background', BackgroundComponent.deserializeFromJSON);

package/dist/mjs/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;