@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.

var ImageContainer = /** @class */ (function () {
    function ImageContainer(onLoadedDelegate) {
        var _this = this;
        this._isDisposed = false;
        this._src = null;
        this._canvas = null;
        this._onLoadedDelegate = function (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);
    }
    Object.defineProperty(ImageContainer.prototype, "isLoaded", {
        get: function () {
            return this._loaded;
        },
        set: function (value) {
            this._loaded = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ImageContainer.prototype, "isLoading", {
        get: function () {
            return this._loading;
        },
        set: function (value) {
            this._loading = value;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ImageContainer.prototype, "image", {
        get: function () {
            return this._image;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ImageContainer.prototype, "canvas", {
        get: function () {
            return this._canvas;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(ImageContainer.prototype, "source", {
        get: function () {
            return this._src;
        },
        set: function (src) {
            if (this._src === src || this._isDisposed) {
                return;
            }
            this._loaded = false;
            this._src = src;
            this._image.src = this._src == null ? "" : src;
        },
        enumerable: true,
        configurable: true
    });
    ImageContainer.prototype.updateCanvas = function (canvas) {
        if (this._isDisposed)
            return;
        this._clearCanvas();
        this._canvas = canvas;
        this._onLoadedDelegate({ target: this._canvas });
    };
    ImageContainer.prototype.updateUrl = function (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;
    };
    ImageContainer.prototype.clear = function () {
        this._clearCanvas();
        this.source = null;
    };
    ImageContainer.prototype.dispose = function () {
        this._tmpImage.removeEventListener("load", this._onLoadedDelegate);
        this._tmpImage = null;
        this._image.removeEventListener("load", this._onLoadedDelegate);
        this._image = null;
        this._isDisposed = true;
        this._clearCanvas();
    };
    ImageContainer.prototype._clearCanvas = function () {
        if (!this._canvas)
            return;
        this._canvas.parentNode.removeChild(this._canvas);
        this._canvas = null;
    };
    ImageContainer.prototype._onLoaded = function (target) {
        if (target === this._tmpImage) {
            this._tmpImage = this._image;
            this._image = target;
            this._src = target.src;
        }
        this._loaded = true;
        this._loading = false;
    };
    ImageContainer.prototype._createImageObject = function (loadedEventDelegate) {
        var img = new Image();
        img.crossOrigin = "anonymous";
        if (typeof (loadedEventDelegate) === "function") {
            img.addEventListener("load", loadedEventDelegate);
        }
        return img;
    };
    return ImageContainer;
}());
export { ImageContainer };
//# sourceMappingURL=ImageContainer.js.map