@aurigma/design-atoms/ItemHandlers/ImageContainer.js

Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.

export class ImageContainer {
    constructor(onLoadedDelegate) {
        this._isDisposed = false;
        this._src = null;
        this._canvas = null;
        this._onLoadedDelegate = (e) => {
            if (!e.target) {
                throw new Error('"e.target" is null.');
            }
            this._onLoaded(e.target);
            onLoadedDelegate();
        };
        this._image = this._createImageObject(this._onLoadedDelegate);
        this._tmpImage = this._createImageObject(this._onLoadedDelegate);
    }
    get isLoaded() {
        return this._loaded;
    }
    set isLoaded(value) {
        this._loaded = value;
    }
    get isLoading() {
        return this._loading;
    }
    set isLoading(value) {
        this._loading = value;
    }
    get image() {
        return this._image;
    }
    get canvas() {
        return this._canvas;
    }
    set source(src) {
        if (this._src === src || this._isDisposed) {
            return;
        }
        this._loaded = false;
        this._src = src;
        this._image.src = this._src == null ? "" : src;
    }
    get source() {
        return this._src;
    }
    updateCanvas(canvas) {
        if (this._isDisposed)
            return;
        this._clearCanvas();
        this._canvas = canvas;
        this._onLoadedDelegate({ target: this._canvas });
    }
    updateUrl(url) {
        this._loaded = false;
        if (this._isDisposed) {
            return;
        }
        if (this._tmpImage.src === url) {
            this._onLoadedDelegate({ target: this._tmpImage });
            return;
        }
        this._loading = true;
        this._tmpImage.src = url;
        this._src = url;
    }
    clear() {
        this._clearCanvas();
        this.source = null;
    }
    dispose() {
        this._tmpImage.removeEventListener("load", this._onLoadedDelegate);
        this._tmpImage = null;
        this._image.removeEventListener("load", this._onLoadedDelegate);
        this._image = null;
        this._isDisposed = true;
        this._clearCanvas();
    }
    _clearCanvas() {
        if (!this._canvas)
            return;
        this._canvas.parentNode.removeChild(this._canvas);
        this._canvas = null;
    }
    _onLoaded(target) {
        if (target === this._tmpImage) {
            this._tmpImage = this._image;
            this._image = target;
            this._src = target.src;
        }
        this._loaded = true;
        this._loading = false;
    }
    _createImageObject(loadedEventDelegate) {
        const img = new Image();
        img.crossOrigin = "anonymous";
        if (typeof (loadedEventDelegate) === "function") {
            img.addEventListener("load", loadedEventDelegate);
        }
        return img;
    }
}
//# sourceMappingURL=ImageContainer.js.map