js-draw 0.17.3 → 0.18.0

package/dist/cjs/src/commands/uniteCommands.js

@@ -0,0 +1,121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Command_1 = __importDefault(require("./Command"));
+const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
+class NonSerializableUnion extends Command_1.default {
+    constructor(commands, applyChunkSize) {
+        super();
+        this.commands = commands;
+        this.applyChunkSize = applyChunkSize;
+    }
+    static waitForAll(commands) {
+        // If any are Promises...
+        if (commands.some(command => command && command['then'])) {
+            console.log('waiting...');
+            // Wait for all commands to finish.
+            return Promise.all(commands)
+                // Ensure we return a Promise<void> and not a Promise<void[]>
+                .then(() => { });
+        }
+        return;
+    }
+    apply(editor) {
+        if (this.applyChunkSize === undefined) {
+            const results = this.commands.map(cmd => cmd.apply(editor));
+            return NonSerializableUnion.waitForAll(results);
+        }
+        else {
+            return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
+        }
+    }
+    unapply(editor) {
+        const commands = [...this.commands];
+        commands.reverse();
+        if (this.applyChunkSize === undefined) {
+            const results = commands.map(cmd => cmd.unapply(editor));
+            return NonSerializableUnion.waitForAll(results);
+        }
+        else {
+            return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
+        }
+    }
+    description(editor, localizationTable) {
+        const descriptions = [];
+        let lastDescription = null;
+        let duplicateDescriptionCount = 0;
+        for (const part of this.commands) {
+            const description = part.description(editor, localizationTable);
+            if (description !== lastDescription && lastDescription !== null) {
+                descriptions.push(localizationTable.unionOf(lastDescription, duplicateDescriptionCount));
+                lastDescription = null;
+                duplicateDescriptionCount = 0;
+            }
+            duplicateDescriptionCount++;
+            lastDescription !== null && lastDescription !== void 0 ? lastDescription : (lastDescription = description);
+        }
+        if (duplicateDescriptionCount > 1) {
+            descriptions.push(localizationTable.unionOf(lastDescription, duplicateDescriptionCount));
+        }
+        else if (duplicateDescriptionCount === 1) {
+            descriptions.push(lastDescription);
+        }
+        return descriptions.join(', ');
+    }
+}
+class SerializableUnion extends SerializableCommand_1.default {
+    constructor(commands, applyChunkSize) {
+        super('union');
+        this.commands = commands;
+        this.applyChunkSize = applyChunkSize;
+        this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
+    }
+    serializeToJSON() {
+        return {
+            applyChunkSize: this.applyChunkSize,
+            data: this.commands.map(command => command.serialize()),
+        };
+    }
+    apply(editor) {
+        return this.nonserializableCommand.apply(editor);
+    }
+    unapply(editor) {
+        return this.nonserializableCommand.unapply(editor);
+    }
+    description(editor, localizationTable) {
+        return this.nonserializableCommand.description(editor, localizationTable);
+    }
+}
+const uniteCommands = (commands, applyChunkSize) => {
+    let allSerializable = true;
+    for (const command of commands) {
+        if (!(command instanceof SerializableCommand_1.default)) {
+            allSerializable = false;
+            break;
+        }
+    }
+    if (!allSerializable) {
+        return new NonSerializableUnion(commands, applyChunkSize);
+    }
+    else {
+        const castedCommands = commands;
+        return new SerializableUnion(castedCommands, applyChunkSize);
+    }
+};
+SerializableCommand_1.default.register('union', (data, editor) => {
+    if (typeof data.data.length !== 'number') {
+        throw new Error('Unions of commands must serialize to lists of serialization data.');
+    }
+    const applyChunkSize = data.applyChunkSize;
+    if (typeof applyChunkSize !== 'number' && applyChunkSize !== undefined) {
+        throw new Error('serialized applyChunkSize is neither undefined nor a number.');
+    }
+    const commands = [];
+    for (const part of data.data) {
+        commands.push(SerializableCommand_1.default.deserialize(part, editor));
+    }
+    return uniteCommands(commands, applyChunkSize);
+});
+exports.default = uniteCommands;

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

@@ -0,0 +1,258 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+const SerializableCommand_1 = __importDefault(require("../commands/SerializableCommand"));
+const EditorImage_1 = __importDefault(require("../EditorImage"));
+const Mat33_1 = __importDefault(require("../math/Mat33"));
+const UnresolvedCommand_1 = __importDefault(require("../commands/UnresolvedCommand"));
+/**
+ * A base class for everything that can be added to an {@link EditorImage}.
+ */
+class AbstractComponent {
+    constructor(
+    // A unique identifier for the type of component
+    componentKind, initialZIndex) {
+        this.componentKind = componentKind;
+        // Stores data attached by a loader.
+        this.loadSaveData = {};
+        this.lastChangedTime = (new Date()).getTime();
+        if (initialZIndex !== undefined) {
+            this.zIndex = initialZIndex;
+        }
+        else {
+            this.zIndex = AbstractComponent.zIndexCounter++;
+        }
+        // Create a unique ID.
+        this.id = `${new Date().getTime()}-${Math.random()}`;
+        if (AbstractComponent.deserializationCallbacks[componentKind] === undefined) {
+            throw new Error(`Component ${componentKind} has not been registered using AbstractComponent.registerComponent`);
+        }
+    }
+    // Returns a unique ID for this element.
+    // @see { @link lib!EditorImage.lookupElement }
+    getId() {
+        return this.id;
+    }
+    // Store the deserialization callback (or lack of it) for [componentKind].
+    // If components are registered multiple times (as may be done in automated tests),
+    // the most recent deserialization callback is used.
+    static registerComponent(componentKind, deserialize) {
+        this.deserializationCallbacks[componentKind] = deserialize !== null && deserialize !== void 0 ? deserialize : null;
+    }
+    /**
+     * Attach data that can be used while exporting the component (e.g. to SVG).
+     *
+     * This is intended for use by a {@link ImageLoader}.
+     */
+    attachLoadSaveData(key, data) {
+        if (!this.loadSaveData[key]) {
+            this.loadSaveData[key] = [];
+        }
+        this.loadSaveData[key].push(data);
+    }
+    /** See {@link attachLoadSaveData} */
+    getLoadSaveData() {
+        return this.loadSaveData;
+    }
+    getZIndex() {
+        return this.zIndex;
+    }
+    /** @returns the bounding box of  */
+    getBBox() {
+        return this.contentBBox;
+    }
+    /** Called when this component is added to the given image. */
+    onAddToImage(_image) { }
+    onRemoveFromImage() { }
+    /**
+     * @returns true if this component intersects `rect` -- it is entirely contained
+     *  within the rectangle or one of the rectangle's edges intersects this component.
+     */
+    intersectsRect(rect) {
+        // If this component intersects rect,
+        // it is either contained entirely within rect or intersects one of rect's edges.
+        // If contained within,
+        if (rect.containsRect(this.getBBox())) {
+            return true;
+        }
+        // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+        // As such, test with more lines than just the rect's edges.
+        const testLines = [];
+        for (const subregion of rect.divideIntoGrid(2, 2)) {
+            testLines.push(...subregion.getEdges());
+        }
+        return testLines.some(edge => this.intersects(edge));
+    }
+    // Returns a command that, when applied, transforms this by [affineTransfm] and
+    // updates the editor.
+    transformBy(affineTransfm) {
+        return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
+    }
+    // Returns a command that updates this component's z-index.
+    setZIndex(newZIndex) {
+        return new AbstractComponent.TransformElementCommand(Mat33_1.default.identity, this.getId(), this, newZIndex, this.getZIndex());
+    }
+    // @returns true iff this component can be selected (e.g. by the selection tool.)
+    isSelectable() {
+        return true;
+    }
+    // @returns true iff this component should be added to the background, rather than the
+    // foreground of the image.
+    isBackground() {
+        return false;
+    }
+    // @returns an approximation of the proportional time it takes to render this component.
+    // This is intended to be a rough estimate, but, for example, a stroke with two points sould have
+    // a renderingWeight approximately twice that of a stroke with one point.
+    getProportionalRenderingTime() {
+        return 1;
+    }
+    // Returns a copy of this component.
+    clone() {
+        const clone = this.createClone();
+        for (const attachmentKey in this.loadSaveData) {
+            for (const val of this.loadSaveData[attachmentKey]) {
+                clone.attachLoadSaveData(attachmentKey, val);
+            }
+        }
+        return clone;
+    }
+    // Convert the component to an object that can be passed to
+    // `JSON.stringify`.
+    //
+    // Do not rely on the output of this function to take a particular form —
+    // this function's output can change form without a major version increase.
+    serialize() {
+        const data = this.serializeToJSON();
+        if (data === null) {
+            throw new Error(`${this} cannot be serialized.`);
+        }
+        return {
+            name: this.componentKind,
+            zIndex: this.zIndex,
+            id: this.id,
+            loadSaveData: this.loadSaveData,
+            data,
+        };
+    }
+    // Returns true if `data` is not deserializable. May return false even if [data]
+    // is not deserializable.
+    static isNotDeserializable(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json !== 'object') {
+            return true;
+        }
+        if (!this.deserializationCallbacks[json === null || json === void 0 ? void 0 : json.name]) {
+            return true;
+        }
+        if (!json.data) {
+            return true;
+        }
+        return false;
+    }
+    // Convert a string or an object produced by `JSON.parse` into an `AbstractComponent`.
+    static deserialize(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (AbstractComponent.isNotDeserializable(json)) {
+            throw new Error(`Element with data ${json} cannot be deserialized.`);
+        }
+        const instance = this.deserializationCallbacks[json.name](json.data);
+        instance.zIndex = json.zIndex;
+        instance.id = json.id;
+        // TODO: What should we do with json.loadSaveData?
+        //       If we attach it to [instance], we create a potential security risk — loadSaveData
+        //       is often used to store unrecognised attributes so they can be preserved on output.
+        //       ...but what if we're deserializing data sent across the network?
+        return instance;
+    }
+}
+exports.default = AbstractComponent;
+// Topmost z-index
+AbstractComponent.zIndexCounter = 0;
+AbstractComponent.deserializationCallbacks = {};
+AbstractComponent.transformElementCommandId = 'transform-element';
+AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedCommand_1.default {
+        // Construct a new TransformElementCommand. `component`, while optional, should
+        // be provided if available. If not provided, it will be fetched from the editor's
+        // document when the command is applied.
+        constructor(affineTransfm, componentID, component, targetZIndex, origZIndex) {
+            super(AbstractComponent.transformElementCommandId, componentID, component);
+            this.affineTransfm = affineTransfm;
+            this.origZIndex = origZIndex;
+            this.targetZIndex = targetZIndex !== null && targetZIndex !== void 0 ? targetZIndex : AbstractComponent.zIndexCounter++;
+            // Ensure that we keep drawing on top even after changing the z-index.
+            if (this.targetZIndex >= AbstractComponent.zIndexCounter) {
+                AbstractComponent.zIndexCounter = this.targetZIndex + 1;
+            }
+            if (component && origZIndex === undefined) {
+                this.origZIndex = component.getZIndex();
+            }
+        }
+        resolveComponent(image) {
+            var _a;
+            if (this.component) {
+                return;
+            }
+            super.resolveComponent(image);
+            (_a = this.origZIndex) !== null && _a !== void 0 ? _a : (this.origZIndex = this.component.getZIndex());
+        }
+        updateTransform(editor, newTransfm) {
+            if (!this.component) {
+                throw new Error('this.component is undefined or null!');
+            }
+            // Any parent should have only one direct child.
+            const parent = editor.image.findParent(this.component);
+            let hadParent = false;
+            if (parent) {
+                parent.remove();
+                hadParent = true;
+            }
+            this.component.applyTransformation(newTransfm);
+            this.component.lastChangedTime = (new Date()).getTime();
+            // Add the element back to the document.
+            if (hadParent) {
+                EditorImage_1.default.addElement(this.component).apply(editor);
+            }
+        }
+        apply(editor) {
+            this.resolveComponent(editor.image);
+            this.component.zIndex = this.targetZIndex;
+            this.updateTransform(editor, this.affineTransfm);
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            this.resolveComponent(editor.image);
+            this.component.zIndex = this.origZIndex;
+            this.updateTransform(editor, this.affineTransfm.inverse());
+            editor.queueRerender();
+        }
+        description(_editor, localizationTable) {
+            return localizationTable.transformedElements(1);
+        }
+        serializeToJSON() {
+            return {
+                id: this.componentID,
+                transfm: this.affineTransfm.toArray(),
+                targetZIndex: this.targetZIndex,
+                origZIndex: this.origZIndex,
+            };
+        }
+    },
+    (() => {
+        SerializableCommand_1.default.register(AbstractComponent.transformElementCommandId, (json, editor) => {
+            var _a, _b;
+            const elem = (_a = editor.image.lookupElement(json.id)) !== null && _a !== void 0 ? _a : undefined;
+            const transform = new Mat33_1.default(...json.transfm);
+            const targetZIndex = json.targetZIndex;
+            const origZIndex = (_b = json.origZIndex) !== null && _b !== void 0 ? _b : undefined;
+            return new AbstractComponent.TransformElementCommand(transform, json.id, elem, targetZIndex, origZIndex);
+        });
+    })(),
+    _a);

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

@@ -0,0 +1,146 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["None"] = 1] = "None";
+})(BackgroundType = exports.BackgroundType || (exports.BackgroundType = {}));
+exports.imageBackgroundCSSClassName = 'js-draw-image-background';
+// Represents the background of an image in the editor.
+class ImageBackground extends AbstractComponent_1.default {
+    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_1.default.empty;
+    }
+    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;
+        if (fill.eq(Color4_1.default.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(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);
+        }
+    }
+    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(), [exports.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_1.default.fromHex(json.mainColor);
+        return new ImageBackground(backgroundType, mainColor);
+    }
+}
+exports.default = ImageBackground;
+AbstractComponent_1.default.registerComponent('image-background', ImageBackground.deserializeFromJSON);

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

@@ -0,0 +1,152 @@
+"use strict";
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Mat33_1 = __importDefault(require("../math/Mat33"));
+const Rect2_1 = __importDefault(require("../math/Rect2"));
+const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
+// Represents a raster image.
+class ImageComponent extends AbstractComponent_1.default {
+    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_1.default(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_1.default(...data.transform),
+        });
+    }
+}
+exports.default = ImageComponent;
+AbstractComponent_1.default.registerComponent('image-component', ImageComponent.deserializeFromJSON);