js-draw 0.18.1 → 0.19.0

package/dist/mjs/src/components/ImageBackground.mjs

@@ -0,0 +1,139 @@
+import  Color4  from '../Color4.mjs';
+import  { EditorImageEventType }  from '../EditorImage.mjs';
+import  Rect2  from '../math/Rect2.mjs';
+import  AbstractComponent  from './AbstractComponent.mjs';
+import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
+export var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["None"] = 1] = "None";
+})(BackgroundType || (BackgroundType = {}));
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+// Represents the background of the editor's canvas.
+export default class ImageBackground extends AbstractComponent {
+    constructor(backgroundType, mainColor) {
+        super('image-background', 0);
+        this.backgroundType = backgroundType;
+        this.mainColor = mainColor;
+        this.viewportSizeChangeListener = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
+        this.contentBBox = Rect2.empty;
+    }
+    getStyle() {
+        let color = this.mainColor;
+        if (this.backgroundType === BackgroundType.None) {
+            color = undefined;
+        }
+        return {
+            color,
+        };
+    }
+    updateStyle(style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    }
+    // @internal
+    forceStyle(style, editor) {
+        const fill = style.color;
+        if (!fill) {
+            return;
+        }
+        this.mainColor = fill;
+        if (fill.eq(Color4.transparent)) {
+            this.backgroundType = BackgroundType.None;
+        }
+        else {
+            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(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);
+        }
+    }
+    render(canvas, visibleRect) {
+        if (this.backgroundType === BackgroundType.None) {
+            return;
+        }
+        canvas.startObject(this.contentBBox);
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            // 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);
+            }
+        }
+        canvas.endObject(this.getLoadSaveData(), [imageBackgroundCSSClassName]);
+    }
+    intersects(lineSegment) {
+        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+    }
+    isSelectable() {
+        return false;
+    }
+    isBackground() {
+        return true;
+    }
+    serializeToJSON() {
+        return {
+            mainColor: this.mainColor.toHexString(),
+            backgroundType: this.backgroundType,
+        };
+    }
+    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 ImageBackground(this.backgroundType, this.mainColor);
+    }
+    // @internal
+    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.');
+        }
+        const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
+        const mainColor = Color4.fromHex(json.mainColor);
+        return new ImageBackground(backgroundType, mainColor);
+    }
+}
+AbstractComponent.registerComponent('image-background', ImageBackground.deserializeFromJSON);

package/dist/mjs/src/components/ImageComponent.d.ts

@@ -0,0 +1,31 @@
+import LineSegment2 from '../math/LineSegment2';
+import Mat33, { Mat33Array } from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+export default class ImageComponent extends AbstractComponent {
+    protected contentBBox: Rect2;
+    private image;
+    constructor(image: RenderableImage);
+    private getImageRect;
+    private recomputeBBox;
+    static fromImage(elem: HTMLImageElement, transform: Mat33): Promise<ImageComponent>;
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
+    intersects(lineSegment: LineSegment2): boolean;
+    protected serializeToJSON(): {
+        src: string;
+        label: string | undefined;
+        width: number;
+        height: number;
+        transform: Mat33Array;
+    };
+    protected applyTransformation(affineTransfm: Mat33): void;
+    description(localizationTable: ImageComponentLocalization): string;
+    getAltText(): string | undefined;
+    getURL(): string;
+    getTransformation(): Mat33;
+    protected createClone(): AbstractComponent;
+    static deserializeFromJSON(data: any): ImageComponent;
+}

package/dist/mjs/src/components/ImageComponent.mjs

@@ -0,0 +1,146 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import  Mat33  from '../math/Mat33.mjs';
+import  Rect2  from '../math/Rect2.mjs';
+import  AbstractComponent  from './AbstractComponent.mjs';
+// Represents a raster image.
+export default class ImageComponent extends AbstractComponent {
+    constructor(image) {
+        var _a, _b, _c;
+        super('image-component');
+        this.image = Object.assign(Object.assign({}, image), { label: (_c = (_b = (_a = image.label) !== null && _a !== void 0 ? _a : image.image.getAttribute('alt')) !== null && _b !== void 0 ? _b : image.image.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : undefined });
+        const isHTMLImageElem = (elem) => {
+            return elem.getAttribute('src') !== undefined;
+        };
+        if (isHTMLImageElem(image.image) && !image.image.complete) {
+            image.image.onload = () => this.recomputeBBox();
+        }
+        this.recomputeBBox();
+    }
+    getImageRect() {
+        return new Rect2(0, 0, this.image.image.width, this.image.image.height);
+    }
+    recomputeBBox() {
+        this.contentBBox = this.getImageRect();
+        this.contentBBox = this.contentBBox.transformedBoundingBox(this.image.transform);
+    }
+    // Load from an image. Waits for the image to load if incomplete.
+    static fromImage(elem, transform) {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!elem.complete) {
+                yield new Promise((resolve, reject) => {
+                    elem.onload = resolve;
+                    elem.onerror = reject;
+                    elem.onabort = reject;
+                });
+            }
+            let width, height;
+            if (typeof elem.width === 'number' && typeof elem.height === 'number'
+                && elem.width !== 0 && elem.height !== 0) {
+                width = elem.width;
+                height = elem.height;
+            }
+            else {
+                width = elem.clientWidth;
+                height = elem.clientHeight;
+            }
+            let image;
+            let url = (_a = elem.src) !== null && _a !== void 0 ? _a : '';
+            if (!url.startsWith('data:image/')) {
+                // Convert to a data URL:
+                const canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(elem, 0, 0, canvas.width, canvas.height);
+                url = canvas.toDataURL();
+                image = canvas;
+            }
+            else {
+                image = new Image();
+                image.src = url;
+                image.width = width;
+                image.height = height;
+            }
+            image.setAttribute('alt', (_b = elem.getAttribute('alt')) !== null && _b !== void 0 ? _b : '');
+            image.setAttribute('aria-label', (_c = elem.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : '');
+            return new ImageComponent({
+                image,
+                base64Url: url,
+                transform: transform,
+            });
+        });
+    }
+    render(canvas, _visibleRect) {
+        canvas.startObject(this.contentBBox);
+        canvas.drawImage(this.image);
+        canvas.endObject(this.getLoadSaveData());
+    }
+    getProportionalRenderingTime() {
+        // Estimate: Equivalent to a stroke with 10 segments.
+        return 10;
+    }
+    intersects(lineSegment) {
+        const rect = this.getImageRect();
+        const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));
+        for (const edge of edges) {
+            if (edge.intersects(lineSegment)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    serializeToJSON() {
+        return {
+            src: this.image.base64Url,
+            label: this.image.label,
+            // Store the width and height for bounding box computations while the image is loading.
+            width: this.image.image.width,
+            height: this.image.image.height,
+            transform: this.image.transform.toArray(),
+        };
+    }
+    applyTransformation(affineTransfm) {
+        this.image.transform = affineTransfm.rightMul(this.image.transform);
+        this.recomputeBBox();
+    }
+    description(localizationTable) {
+        return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
+    }
+    getAltText() {
+        return this.image.label;
+    }
+    getURL() {
+        return this.image.base64Url;
+    }
+    getTransformation() {
+        return this.image.transform;
+    }
+    createClone() {
+        return new ImageComponent(Object.assign({}, this.image));
+    }
+    static deserializeFromJSON(data) {
+        if (!(typeof data.src === 'string')) {
+            throw new Error(`${data} has invalid format! Expected src property.`);
+        }
+        const image = new Image();
+        image.src = data.src;
+        image.width = data.width;
+        image.height = data.height;
+        return new ImageComponent({
+            image: image,
+            base64Url: image.src,
+            label: data.label,
+            transform: new Mat33(...data.transform),
+        });
+    }
+}
+AbstractComponent.registerComponent('image-component', ImageComponent.deserializeFromJSON);

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

@@ -0,0 +1,43 @@
+import Color4 from '../Color4';
+import SerializableCommand from '../commands/SerializableCommand';
+import Editor from '../Editor';
+import TextRenderingStyle from '../rendering/TextRenderingStyle';
+import AbstractComponent from './AbstractComponent';
+export interface ComponentStyle {
+    color?: Color4;
+    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
+     * (does not create a command).
+     *
+     * Prefer `updateStyle(style).apply(editor)`.
+     */
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
+    isRestylableComponent: true;
+}
+export default RestyleableComponent;

package/dist/mjs/src/components/RestylableComponent.mjs

@@ -0,0 +1,80 @@
+import  Color4  from '../Color4.mjs';
+import  SerializableCommand  from '../commands/SerializableCommand.mjs';
+import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
+import  { textStyleFromJSON, textStyleToJSON }  from '../rendering/TextRenderingStyle.mjs';
+const serializeComponentStyle = (style) => {
+    const result = {};
+    if (style.color) {
+        result.color = style.color.toHexString();
+    }
+    if (style.textStyle) {
+        result.textStyle = textStyleToJSON(style.textStyle);
+    }
+    return result;
+};
+const deserializeComponentStyle = (json) => {
+    const color = json.color ? Color4.fromHex(json.color) : undefined;
+    const textStyle = json.textStyle ? textStyleFromJSON(json.textStyle) : undefined;
+    return {
+        color,
+        textStyle,
+    };
+};
+// For internal use by Components implementing `updateStyle`:
+export const createRestyleComponentCommand = (initialStyle, newStyle, component) => {
+    return new DefaultRestyleComponentCommand(initialStyle, newStyle, component.getId(), component);
+};
+// Returns true if `component` is a `RestylableComponent`.
+export const isRestylableComponent = (component) => {
+    const hasMethods = 'getStyle' in component && 'updateStyle' in component && 'forceStyle' in component;
+    if (!hasMethods) {
+        return false;
+    }
+    if (!('isRestylableComponent' in component) || !component['isRestylableComponent']) {
+        return false;
+    }
+    return true;
+};
+const defaultRestyleComponentCommandId = 'default-restyle-element';
+class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
+    constructor(originalStyle, newStyle, componentID, component) {
+        super(defaultRestyleComponentCommandId, componentID, component);
+        this.originalStyle = originalStyle;
+        this.newStyle = newStyle;
+    }
+    getComponent(editor) {
+        this.resolveComponent(editor.image);
+        const component = this.component;
+        if (!component || !component['forceStyle'] || !component['updateStyle']) {
+            throw new Error('this.component is missing forceStyle and/or updateStyle methods!');
+        }
+        return component;
+    }
+    apply(editor) {
+        this.getComponent(editor).forceStyle(this.newStyle, editor);
+    }
+    unapply(editor) {
+        this.getComponent(editor).forceStyle(this.originalStyle, editor);
+    }
+    description(editor, localizationTable) {
+        return localizationTable.restyledElement(this.getComponent(editor).description(localizationTable));
+    }
+    serializeToJSON() {
+        return {
+            id: this.componentID,
+            originalStyle: serializeComponentStyle(this.originalStyle),
+            newStyle: serializeComponentStyle(this.newStyle),
+        };
+    }
+}
+(() => {
+    SerializableCommand.register(defaultRestyleComponentCommandId, (json, _editor) => {
+        const origStyle = deserializeComponentStyle(json.originalStyle);
+        const newStyle = deserializeComponentStyle(json.newStyle);
+        const id = json.id;
+        if (typeof json.id !== 'string') {
+            throw new Error(`json.id is of type ${(typeof json.id)}, not string.`);
+        }
+        return new DefaultRestyleComponentCommand(origStyle, newStyle, id);
+    });
+})();

package/dist/mjs/src/components/SVGGlobalAttributesObject.d.ts

@@ -0,0 +1,21 @@
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+type GlobalAttrsList = Array<[string, string | null]>;
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+    private readonly attrs;
+    protected contentBBox: Rect2;
+    constructor(attrs: GlobalAttrsList);
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    intersects(_lineSegment: LineSegment2): boolean;
+    protected applyTransformation(_affineTransfm: Mat33): void;
+    isSelectable(): boolean;
+    protected createClone(): SVGGlobalAttributesObject;
+    description(localization: ImageComponentLocalization): string;
+    protected serializeToJSON(): string | null;
+    static deserializeFromString(data: string): AbstractComponent;
+}
+export {};

package/dist/mjs/src/components/SVGGlobalAttributesObject.mjs

@@ -0,0 +1,59 @@
+//
+// Used by `SVGLoader`s to store unrecognised global attributes
+// (e.g. unrecognised XML namespace declarations).
+// @internal
+// @packageDocumentation
+//
+import  Rect2  from '../math/Rect2.mjs';
+import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
+import  AbstractComponent  from './AbstractComponent.mjs';
+const componentKind = 'svg-global-attributes';
+// Stores global SVG attributes (e.g. namespace identifiers.)
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+    constructor(attrs) {
+        super(componentKind);
+        this.attrs = attrs;
+        this.contentBBox = Rect2.empty;
+    }
+    render(canvas, _visibleRect) {
+        if (!(canvas instanceof SVGRenderer)) {
+            // Don't draw unrenderable objects if we can't
+            return;
+        }
+        for (const [attr, value] of this.attrs) {
+            canvas.setRootSVGAttribute(attr, value);
+        }
+    }
+    intersects(_lineSegment) {
+        return false;
+    }
+    applyTransformation(_affineTransfm) {
+    }
+    isSelectable() {
+        return false;
+    }
+    createClone() {
+        return new SVGGlobalAttributesObject(this.attrs);
+    }
+    description(localization) {
+        return localization.svgObject;
+    }
+    serializeToJSON() {
+        return JSON.stringify(this.attrs);
+    }
+    static deserializeFromString(data) {
+        const json = JSON.parse(data);
+        const attrs = [];
+        const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
+        // Don't deserialize all attributes, just those that should be safe.
+        for (const [key, val] of json) {
+            if (key === 'viewBox' || key === 'width' || key === 'height') {
+                if (val && numericAndSpaceContentExp.exec(val)) {
+                    attrs.push([key, val]);
+                }
+            }
+        }
+        return new SVGGlobalAttributesObject(attrs);
+    }
+}
+AbstractComponent.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

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

@@ -0,0 +1,75 @@
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Path from '../math/Path';
+import Rect2 from '../math/Rect2';
+import Editor from '../Editor';
+import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
+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;
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
+    intersects(line: LineSegment2): boolean;
+    render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
+    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;
+    protected serializeToJSON(): {
+        style: {
+            fill: string;
+            stroke: {
+                color: string;
+                width: number;
+            } | undefined;
+        };
+        path: string;
+    }[];
+    /** @internal */
+    static deserializeFromJSON(json: any): Stroke;
+}