js-draw 0.18.2 → 0.20.0

package/dist/cjs/src/components/BackgroundComponent.js

@@ -0,0 +1,309 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+const Color4_1 = __importDefault(require("../Color4"));
+const EditorImage_1 = require("../EditorImage");
+const Rect2_1 = __importDefault(require("../math/Rect2"));
+const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
+const RestylableComponent_1 = require("./RestylableComponent");
+const Path_1 = __importStar(require("../math/Path"));
+const Vec2_1 = require("../math/Vec2");
+const Viewport_1 = __importDefault(require("../Viewport"));
+const rounding_1 = require("../math/rounding");
+var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["Grid"] = 1] = "Grid";
+    BackgroundType[BackgroundType["None"] = 2] = "None";
+})(BackgroundType = exports.BackgroundType || (exports.BackgroundType = {}));
+exports.imageBackgroundCSSClassName = 'js-draw-image-background';
+// Class name prefix indicating the size of the background's grid cells (if present).
+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 = {
+    [BackgroundType.Grid]: 'js-draw-image-background-grid',
+    [BackgroundType.SolidColor]: exports.imageBackgroundCSSClassName,
+    [BackgroundType.None]: '',
+};
+// Represents the background of the editor's canvas.
+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;
+    }
+    static ofGrid(backgroundColor, gridSize, gridColor, gridStrokeWidth) {
+        const background = new BackgroundComponent(BackgroundType.Grid, backgroundColor);
+        if (gridSize !== undefined) {
+            background.gridSize = gridSize;
+        }
+        if (gridColor !== undefined) {
+            background.secondaryColor = gridColor;
+        }
+        if (gridStrokeWidth !== undefined) {
+            background.gridStrokeWidth = gridStrokeWidth;
+        }
+        return background;
+    }
+    getBackgroundType() {
+        return this.backgroundType;
+    }
+    // @internal
+    getMainColor() {
+        return this.mainColor;
+    }
+    // @internal
+    getSecondaryColor() {
+        return this.secondaryColor;
+    }
+    // @internal
+    getGridSize() {
+        return this.gridSize;
+    }
+    getStyle() {
+        let color = this.mainColor;
+        if (this.backgroundType === BackgroundType.None) {
+            color = undefined;
+        }
+        return {
+            color,
+        };
+    }
+    updateStyle(style) {
+        return (0, RestylableComponent_1.createRestyleComponentCommand)(this.getStyle(), style, this);
+    }
+    // @internal
+    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) {
+            this.backgroundType = BackgroundType.None;
+        }
+        else if (this.backgroundType === BackgroundType.None) {
+            this.backgroundType = BackgroundType.SolidColor;
+        }
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
+    }
+    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, () => {
+            this.recomputeBBox(image);
+        });
+        this.recomputeBBox(image);
+    }
+    onRemoveFromImage() {
+        var _a;
+        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
+        this.viewportSizeChangeListener = null;
+    }
+    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);
+        }
+    }
+    generateGridPath(visibleRect) {
+        var _a, _b;
+        const 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;
+        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.
+        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;
+        }
+        const startPoint = Vec2_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),
+            });
+            result.push({
+                kind: Path_1.PathCommandType.LineTo,
+                point: Vec2_1.Vec2.of(targetRect.x + targetRect.w, y),
+            });
+        }
+        for (let x = startX; x <= endX; x += this.gridSize) {
+            result.push({
+                kind: Path_1.PathCommandType.MoveTo,
+                point: Vec2_1.Vec2.of(x, targetRect.y),
+            });
+            result.push({
+                kind: Path_1.PathCommandType.LineTo,
+                point: Vec2_1.Vec2.of(x, targetRect.y + targetRect.h)
+            });
+        }
+        return new Path_1.default(startPoint, result);
+    }
+    render(canvas, visibleRect) {
+        if (this.backgroundType === BackgroundType.None) {
+            return;
+        }
+        const clip = true;
+        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) {
+                const intersection = visibleRect.intersection(this.contentBBox);
+                if (intersection) {
+                    canvas.fillRect(intersection, this.mainColor);
+                }
+            }
+            else {
+                canvas.fillRect(this.contentBBox, this.mainColor);
+            }
+        }
+        if (this.backgroundType === BackgroundType.Grid) {
+            let 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));
+            // 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);
+            }
+            const style = {
+                fill: Color4_1.default.transparent,
+                stroke: { width: this.gridStrokeWidth, color: gridColor }
+            };
+            canvas.drawPath(this.generateGridPath(visibleRect).toRenderable(style));
+        }
+        const backgroundTypeCSSClass = exports.backgroundTypeToClassNameMap[this.backgroundType];
+        const classNames = [exports.imageBackgroundCSSClassName];
+        if (backgroundTypeCSSClass !== exports.imageBackgroundCSSClassName) {
+            classNames.push(backgroundTypeCSSClass);
+            const gridSizeStr = (0, rounding_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);
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+    }
+    isSelectable() {
+        return false;
+    }
+    isBackground() {
+        return true;
+    }
+    serializeToJSON() {
+        var _a;
+        return {
+            mainColor: this.mainColor.toHexString(),
+            secondaryColor: (_a = this.secondaryColor) === null || _a === void 0 ? void 0 : _a.toHexString(),
+            backgroundType: this.backgroundType,
+            gridSize: this.gridSize,
+            gridStrokeWidth: this.gridStrokeWidth,
+        };
+    }
+    applyTransformation(_affineTransfm) {
+        // Do nothing — it doesn't make sense to transform the background.
+    }
+    description(localizationTable) {
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+        }
+        else {
+            return localizationTable.emptyBackground;
+        }
+    }
+    createClone() {
+        return new BackgroundComponent(this.backgroundType, this.mainColor);
+    }
+    // @internal
+    static deserializeFromJSON(json) {
+        var _a, _b;
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json.mainColor !== 'string') {
+            throw new Error('Error deserializing — mainColor must be of type string.');
+        }
+        let backgroundType;
+        const jsonBackgroundType = json.backgroundType;
+        if (jsonBackgroundType === BackgroundType.None || jsonBackgroundType === BackgroundType.Grid
+            || jsonBackgroundType === BackgroundType.SolidColor) {
+            backgroundType = jsonBackgroundType;
+        }
+        else {
+            const exhaustivenessCheck = jsonBackgroundType;
+            return exhaustivenessCheck;
+        }
+        const mainColor = Color4_1.default.fromHex(json.mainColor);
+        const secondaryColor = json.secondaryColor ? Color4_1.default.fromHex(json.secondaryColor) : null;
+        const gridSize = (_a = json.gridSize) !== null && _a !== void 0 ? _a : undefined;
+        const gridStrokeWidth = (_b = json.gridStrokeWidth) !== null && _b !== void 0 ? _b : undefined;
+        const result = new BackgroundComponent(backgroundType, mainColor);
+        result.secondaryColor = secondaryColor;
+        if (gridSize) {
+            result.gridSize = gridSize;
+        }
+        if (gridStrokeWidth) {
+            result.gridStrokeWidth = gridStrokeWidth;
+        }
+        return result;
+    }
+}
+exports.default = BackgroundComponent;
+AbstractComponent_1.default.registerComponent('image-background', BackgroundComponent.deserializeFromJSON);

package/dist/cjs/src/components/RestylableComponent.d.ts

@@ -1,16 +1,35 @@
 import Color4 from '../Color4';
 import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
-import TextStyle from '../rendering/TextRenderingStyle';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 export interface ComponentStyle {
     color?: Color4;
-    textStyle?: TextStyle;
+    textStyle?: TextRenderingStyle;
 }
 export declare const createRestyleComponentCommand: (initialStyle: ComponentStyle, newStyle: ComponentStyle, component: RestyleableComponent) => SerializableCommand;
 export declare const isRestylableComponent: (component: AbstractComponent) => component is RestyleableComponent;
+/**
+ * An interface to be implemented by components with a changable color or {@link TextRenderingStyle}.
+ *
+ * All such classes must have a member variable, `isRestylableComponent` that is set to `true`
+ * to allow testing whether the class is a `RestylableComponent` (see {@link isRestylableComponent}).
+ */
 export interface RestyleableComponent extends AbstractComponent {
+    /**
+     * @returns a partial representation of this component's style.
+     */
     getStyle(): ComponentStyle;
+    /**
+     * Returns a {@link Command} that updates portions of this component's style
+     * to the given `style`.
+     *
+     * @example
+     * For some component and editor,
+     * ```ts
+     * editor.dispatch(component.updateStyle({ color: Color4.red }));
+     * ```
+     */
     updateStyle(style: ComponentStyle): SerializableCommand;
     /**
      * Set the style of this component in a way that can't be undone/redone

package/dist/cjs/src/components/Stroke.d.ts

@@ -8,11 +8,43 @@ import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/Abs
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+/**
+ * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
+ *
+ * @example
+ * For some {@link Editor} editor and `Stroke` stroke,
+ *
+ * **Restyling**:
+ * ```ts
+ * editor.dispatch(stroke.updateStyle({ color: Color4.red }));
+ * ```
+ *
+ * **Transforming**:
+ * ```ts
+ * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
+ * ```
+ */
 export default class Stroke extends AbstractComponent implements RestyleableComponent {
     private parts;
     protected contentBBox: Rect2;
     readonly isRestylableComponent: true;
     private approximateRenderingTime;
+    /**
+     * Creates a `Stroke` from the given `parts`. All parts should have the
+     * same color.
+     *
+     * @example
+     * ```ts
+     * // A path that starts at (1,1), moves to the right by (2, 0),
+     * // then moves down and right by (3, 3)
+     * const path = Path.fromString('m1,1 2,0 3,3');
+     *
+     * const stroke = new Stroke([
+     *     // Fill with red
+     *     path.toRenderable({ fill: Color4.red })
+     * ]);
+     * ```
+     */
     constructor(parts: RenderablePathSpec[]);
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
@@ -22,6 +54,9 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
     getProportionalRenderingTime(): number;
     private bboxForPart;
     protected applyTransformation(affineTransfm: Mat33): void;
+    /**
+     * @returns the {@link Path.union} of all paths that make up this stroke.
+     */
     getPath(): Path;
     description(localization: ImageComponentLocalization): string;
     protected createClone(): AbstractComponent;

package/dist/cjs/src/components/Stroke.js

@@ -8,12 +8,43 @@ const Rect2_1 = __importDefault(require("../math/Rect2"));
 const RenderingStyle_1 = require("../rendering/RenderingStyle");
 const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
 const RestylableComponent_1 = require("./RestylableComponent");
+/**
+ * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
+ *
+ * @example
+ * For some {@link Editor} editor and `Stroke` stroke,
+ *
+ * **Restyling**:
+ * ```ts
+ * editor.dispatch(stroke.updateStyle({ color: Color4.red }));
+ * ```
+ *
+ * **Transforming**:
+ * ```ts
+ * editor.dispatch(stroke.transformBy(Mat33.translation(Vec2.of(10, 0))));
+ * ```
+ */
 class Stroke extends AbstractComponent_1.default {
-    // Creates a `Stroke` from the given `parts`. All parts should have the
-    // same color.
+    /**
+     * Creates a `Stroke` from the given `parts`. All parts should have the
+     * same color.
+     *
+     * @example
+     * ```ts
+     * // A path that starts at (1,1), moves to the right by (2, 0),
+     * // then moves down and right by (3, 3)
+     * const path = Path.fromString('m1,1 2,0 3,3');
+     *
+     * const stroke = new Stroke([
+     *     // Fill with red
+     *     path.toRenderable({ fill: Color4.red })
+     * ]);
+     * ```
+     */
     constructor(parts) {
         var _a;
         super('stroke');
+        // @internal
         // eslint-disable-next-line @typescript-eslint/prefer-as-const
         this.isRestylableComponent = true;
         this.approximateRenderingTime = 0;
@@ -99,7 +130,7 @@ class Stroke extends AbstractComponent_1.default {
                 if (!bbox.intersects(visibleRect)) {
                     continue;
                 }
-                const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
+                const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 3 || bbox.size.y > visibleRect.size.y * 3;
                 if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, (_b = (_a = part.style.stroke) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0)) {
                     continue;
                 }
@@ -146,6 +177,9 @@ class Stroke extends AbstractComponent_1.default {
             };
         });
     }
+    /**
+     * @returns the {@link Path.union} of all paths that make up this stroke.
+     */
     getPath() {
         let result = null;
         for (const part of this.parts) {

package/dist/cjs/src/components/TextComponent.d.ts

@@ -4,18 +4,26 @@ import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import Editor from '../Editor';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import { TextStyle } from '../rendering/TextRenderingStyle';
+import { TextRenderingStyle } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+/**
+ * Displays text.
+ */
 export default class TextComponent extends AbstractComponent implements RestyleableComponent {
     protected readonly textObjects: Array<string | TextComponent>;
     private transform;
     private style;
     protected contentBBox: Rect2;
     readonly isRestylableComponent: true;
-    constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextStyle);
-    static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle): void;
+    /**
+     * Creates a new text object from a list of component text or child TextComponents.
+     *
+     * @see {@link fromLines}
+     */
+    constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextRenderingStyle);
+    static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextRenderingStyle): void;
     private static textMeasuringCtx;
     private static estimateTextDimens;
     private static getTextDimens;
@@ -28,19 +36,7 @@ export default class TextComponent extends AbstractComponent implements Restylea
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
     forceStyle(style: ComponentStyle, editor: Editor | null): void;
-    getTextStyle(): {
-        renderingStyle: {
-            fill: import("../Color4").default;
-            stroke: {
-                color: import("../Color4").default;
-                width: number;
-            } | undefined;
-        };
-        size: number;
-        fontFamily: string;
-        fontWeight?: string | undefined;
-        fontVariant?: string | undefined;
-    };
+    getTextStyle(): TextRenderingStyle;
     getBaselinePos(): import("../lib").Vec3;
     getTransform(): Mat33;
     protected applyTransformation(affineTransfm: Mat33): void;
@@ -49,5 +45,19 @@ export default class TextComponent extends AbstractComponent implements Restylea
     description(localizationTable: ImageComponentLocalization): string;
     protected serializeToJSON(): Record<string, any>;
     static deserializeFromString(json: any): TextComponent;
-    static fromLines(lines: string[], transform: Mat33, style: TextStyle): AbstractComponent;
+    /**
+     * Creates a `TextComponent` from `lines`.
+     *
+     * @example
+     * ```ts
+     * const textStyle = {
+     *   size: 12,
+     *   fontFamily: 'serif',
+     *   renderingStyle: { fill: Color4.black },
+     * };
+     *
+     * const text = TextComponent.fromLines('foo\nbar'.split('\n'), Mat33.identity, textStyle);
+     * ```
+     */
+    static fromLines(lines: string[], transform: Mat33, style: TextRenderingStyle): AbstractComponent;
 }

package/dist/cjs/src/components/TextComponent.js

@@ -11,7 +11,15 @@ const TextRenderingStyle_1 = require("../rendering/TextRenderingStyle");
 const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
 const RestylableComponent_1 = require("./RestylableComponent");
 const componentTypeId = 'text';
+/**
+ * Displays text.
+ */
 class TextComponent extends AbstractComponent_1.default {
+    /**
+     * Creates a new text object from a list of component text or child TextComponents.
+     *
+     * @see {@link fromLines}
+     */
     constructor(textObjects, transform, style) {
         super(componentTypeId);
         this.textObjects = textObjects;
@@ -155,7 +163,7 @@ class TextComponent extends AbstractComponent_1.default {
             editor.queueRerender();
         }
     }
-    // See this.getStyle
+    // See {@link getStyle}
     getTextStyle() {
         return (0, TextRenderingStyle_1.cloneTextStyle)(this.style);
     }
@@ -237,6 +245,20 @@ class TextComponent extends AbstractComponent_1.default {
         const transform = new Mat33_1.default(...transformData);
         return new TextComponent(textObjects, transform, style);
     }
+    /**
+     * Creates a `TextComponent` from `lines`.
+     *
+     * @example
+     * ```ts
+     * const textStyle = {
+     *   size: 12,
+     *   fontFamily: 'serif',
+     *   renderingStyle: { fill: Color4.black },
+     * };
+     *
+     * const text = TextComponent.fromLines('foo\nbar'.split('\n'), Mat33.identity, textStyle);
+     * ```
+     */
     static fromLines(lines, transform, style) {
         let lastComponent = null;
         const components = [];

package/dist/cjs/src/components/lib.d.ts

@@ -7,6 +7,7 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-import RestyleableComponent, { createRestyleComponentCommand, isRestylableComponent } from './RestylableComponent';
-import ImageBackground from './ImageBackground';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };
+import RestyleableComponent from './RestylableComponent';
+import { createRestyleComponentCommand, isRestylableComponent, ComponentStyle as RestyleableComponentStyle } from './RestylableComponent';
+import BackgroundComponent from './BackgroundComponent';
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, RestyleableComponentStyle, TextComponent, Stroke as StrokeComponent, BackgroundComponent, ImageComponent, };

package/dist/cjs/src/components/lib.js

@@ -39,5 +39,5 @@ exports.ImageComponent = ImageComponent_1.default;
 const RestylableComponent_1 = require("./RestylableComponent");
 Object.defineProperty(exports, "createRestyleComponentCommand", { enumerable: true, get: function () { return RestylableComponent_1.createRestyleComponentCommand; } });
 Object.defineProperty(exports, "isRestylableComponent", { enumerable: true, get: function () { return RestylableComponent_1.isRestylableComponent; } });
-const ImageBackground_1 = __importDefault(require("./ImageBackground"));
-exports.BackgroundComponent = ImageBackground_1.default;
+const BackgroundComponent_1 = __importDefault(require("./BackgroundComponent"));
+exports.BackgroundComponent = BackgroundComponent_1.default;