ngx-particlesjs/esm5/lib/ngx-particles.component.js

[](https://www.npmjs.com/package/ngx-particlesjs) [](https://www.npmjs.com/package/ngx-particlesjs) [![TypeScript](https://img.shields.io/badg

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
 */
import * as tslib_1 from "tslib";
import { Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';
import { Particle } from './particle';
var NgxParticlesComponent = /** @class */ (function () {
    function NgxParticlesComponent() {
        var _this = this;
        this.particles = [];
        this.resizing = false;
        this.total = 100;
        this.stageChange = function () {
            var e_1, _a;
            _this.initStage();
            /** @type {?} */
            var range = [_this.width, _this.height];
            try {
                for (var _b = tslib_1.__values(_this.particles), _c = _b.next(); !_c.done; _c = _b.next()) {
                    var x = _c.value;
                    x.onRange(range);
                }
            }
            catch (e_1_1) { e_1 = { error: e_1_1 }; }
            finally {
                try {
                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                }
                finally { if (e_1) throw e_1.error; }
            }
            _this.resizing = false;
        };
        this.drawContext = function () {
            var e_2, _a;
            _this.ctx.clearRect(0, 0, _this.width, _this.height);
            try {
                for (var _b = tslib_1.__values(_this.particles), _c = _b.next(); !_c.done; _c = _b.next()) {
                    var x = _c.value;
                    x.draw(_this.ctx);
                    x.update();
                }
            }
            catch (e_2_1) { e_2 = { error: e_2_1 }; }
            finally {
                try {
                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                }
                finally { if (e_2) throw e_2.error; }
            }
            _this.mainAnimationFrame = window.requestAnimationFrame(_this.drawContext);
            _this.resizing = false;
        };
    }
    /**
     * @return {?}
     */
    NgxParticlesComponent.prototype.ngAfterViewInit = /**
     * @return {?}
     */
    function () {
        this.canvas = this.stageRef.nativeElement;
        this.ctx = this.canvas.getContext('2d', { alpha: false });
        this.initStage();
        this.initParticle();
        this.drawContext();
    };
    /**
     * @return {?}
     */
    NgxParticlesComponent.prototype.ngOnDestroy = /**
     * @return {?}
     */
    function () {
        this.ctx.clearRect(0, 0, this.width, this.height);
        window.cancelAnimationFrame(this.mainAnimationFrame);
        window.cancelAnimationFrame(this.changeAnimationFrame);
    };
    /**
     * @return {?}
     */
    NgxParticlesComponent.prototype.onResize = /**
     * @return {?}
     */
    function () {
        if (!this.resizing && (!this.default_height || !this.default_width)) {
            this.resizing = true;
            if (window.requestAnimationFrame) {
                window.requestAnimationFrame(this.stageChange);
            }
            else {
                setTimeout(this.stageChange, 66);
            }
        }
    };
    /**
     * @return {?}
     */
    NgxParticlesComponent.prototype.initStage = /**
     * @return {?}
     */
    function () {
        var _a = this.canvas.parentElement, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
        if (this.default_width) {
            this.canvas.width = this.width = this.default_width;
        }
        else {
            this.canvas.width = this.width = clientWidth;
        }
        if (this.default_height) {
            this.canvas.height = this.height = this.default_height;
        }
        else {
            this.canvas.height = this.height = clientHeight;
        }
    };
    /**
     * @return {?}
     */
    NgxParticlesComponent.prototype.initParticle = /**
     * @return {?}
     */
    function () {
        /** @type {?} */
        var range = [this.width, this.height];
        for (var i = 0; i < this.total; i++) {
            this.particles[i] = new Particle(range, (this.args && this.args.speed) ? this.args.speed : 'normal', (this.args && this.args.size) ? this.args.size : 1.5);
        }
    };
    NgxParticlesComponent.decorators = [
        { type: Component, args: [{
                    selector: 'ngx-particle',
                    template: "\n    <div id=\"stage\">\n      <canvas #stageRef></canvas>\n    </div>\n  ",
                    styles: ["\n    #stage {\n      height: 100%;\n      width: 100%;\n      will-change: all;\n    }\n  "]
                }] }
    ];
    NgxParticlesComponent.propDecorators = {
        stageRef: [{ type: ViewChild, args: ['stageRef',] }],
        total: [{ type: Input }],
        default_width: [{ type: Input }],
        default_height: [{ type: Input }],
        args: [{ type: Input }],
        onResize: [{ type: HostListener, args: ['window:resize',] }]
    };
    return NgxParticlesComponent;
}());
export { NgxParticlesComponent };
if (false) {
    /** @type {?} */
    NgxParticlesComponent.prototype.stageRef;
    /** @type {?} */
    NgxParticlesComponent.prototype.canvas;
    /** @type {?} */
    NgxParticlesComponent.prototype.ctx;
    /** @type {?} */
    NgxParticlesComponent.prototype.width;
    /** @type {?} */
    NgxParticlesComponent.prototype.height;
    /** @type {?} */
    NgxParticlesComponent.prototype.particles;
    /** @type {?} */
    NgxParticlesComponent.prototype.mainAnimationFrame;
    /** @type {?} */
    NgxParticlesComponent.prototype.changeAnimationFrame;
    /** @type {?} */
    NgxParticlesComponent.prototype.resizing;
    /** @type {?} */
    NgxParticlesComponent.prototype.total;
    /** @type {?} */
    NgxParticlesComponent.prototype.default_width;
    /** @type {?} */
    NgxParticlesComponent.prototype.default_height;
    /** @type {?} */
    NgxParticlesComponent.prototype.args;
    /** @type {?} */
    NgxParticlesComponent.prototype.stageChange;
    /** @type {?} */
    NgxParticlesComponent.prototype.drawContext;
}

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXBhcnRpY2xlcy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtcGFydGljbGVzanMvIiwic291cmNlcyI6WyJsaWIvbmd4LXBhcnRpY2xlcy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQWdCLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBYSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDOUcsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLFlBQVksQ0FBQzs7Ozt5QkF5QkYsRUFBRTt3QkFHVixLQUFLO3FCQUVaLEdBQUc7MkJBd0RFOztZQUNwQixLQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7O1lBQ2pCLElBQU0sS0FBSyxHQUFHLENBQUMsS0FBSSxDQUFDLEtBQUssRUFBRSxLQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7O2dCQUN4QyxLQUFnQixJQUFBLEtBQUEsaUJBQUEsS0FBSSxDQUFDLFNBQVMsQ0FBQSxnQkFBQSw0QkFBRTtvQkFBM0IsSUFBTSxDQUFDLFdBQUE7b0JBQ1YsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztpQkFDbEI7Ozs7Ozs7OztZQUNELEtBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1NBQ3ZCOzJCQUVxQjs7WUFDcEIsS0FBSSxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxLQUFJLENBQUMsS0FBSyxFQUFFLEtBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQzs7Z0JBQ2xELEtBQWdCLElBQUEsS0FBQSxpQkFBQSxLQUFJLENBQUMsU0FBUyxDQUFBLGdCQUFBLDRCQUFFO29CQUEzQixJQUFNLENBQUMsV0FBQTtvQkFDVixDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztvQkFDakIsQ0FBQyxDQUFDLE1BQU0sRUFBRSxDQUFDO2lCQUNaOzs7Ozs7Ozs7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LENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FDckQsQ0FBQztTQUNIOzs7Z0JBaEZKLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsY0FBYztvQkFDeEIsUUFBUSxFQUFFLDZFQUlUOzZCQUNRLDZGQU1SO2lCQUNGOzs7MkJBRUUsU0FBUyxTQUFDLFVBQVU7d0JBV3BCLEtBQUs7Z0NBQ0wsS0FBSztpQ0FDTCxLQUFLO3VCQUNMLEtBQUs7MkJBZ0JMLFlBQVksU0FBQyxlQUFlOztnQ0FsRC9COztTQW1CYSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0FmdGVyVmlld0luaXQsIENvbXBvbmVudCwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25EZXN0cm95LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtQYXJ0aWNsZX0gZnJvbSAnLi9wYXJ0aWNsZSc7XG5pbXBvcnQge1BhcnRpY2xlQXJnc30gZnJvbSAnLi9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtcGFydGljbGUnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgaWQ9XCJzdGFnZVwiPlxuICAgICAgPGNhbnZhcyAjc3RhZ2VSZWY+PC9jYW52YXM+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlczogW2BcbiAgICAjc3RhZ2Uge1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICB3aWxsLWNoYW5nZTogYWxsO1xuICAgIH1cbiAgYF1cbn0pXG5leHBvcnQgY2xhc3MgTmd4UGFydGljbGVzQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgQFZpZXdDaGlsZCgnc3RhZ2VSZWYnKSBzdGFnZVJlZjogRWxlbWVudFJlZjtcblxuICBwcml2YXRlIGNhbnZhczogSFRNTENhbnZhc0VsZW1lbnQ7XG4gIHByaXZhdGUgY3R4OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQ7XG4gIHByaXZhdGUgd2lkdGg6IG51bWJlcjtcbiAgcHJpdmF0ZSBoZWlnaHQ6IG51bWJlcjtcbiAgcHJpdmF0ZSBwYXJ0aWNsZXM6IFBhcnRpY2xlW10gPSBbXTtcbiAgcHJpdmF0ZSBtYWluQW5pbWF0aW9uRnJhbWU6IGFueTtcbiAgcHJpdmF0ZSBjaGFuZ2VBbmltYXRpb25GcmFtZTogYW55O1xuICBwcml2YXRlIHJlc2l6aW5nOiBhbnkgPSBmYWxzZTtcblxuICBASW5wdXQoKSB0b3RhbCA9IDEwMDtcbiAgQElucHV0KCkgZGVmYXVsdF93aWR0aDogbnVtYmVyO1xuICBASW5wdXQoKSBkZWZhdWx0X2hlaWdodDogbnVtYmVyO1xuICBASW5wdXQoKSBhcmdzPzogUGFydGljbGVBcmdzO1xuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLmNhbnZhcyA9IHRoaXMuc3RhZ2VSZWYubmF0aXZlRWxlbWVudDtcbiAgICB0aGlzLmN0eCA9IHRoaXMuY2FudmFzLmdldENvbnRleHQoJzJkJywge2FscGhhOiBmYWxzZX0pO1xuICAgIHRoaXMuaW5pdFN0YWdlKCk7XG4gICAgdGhpcy5pbml0UGFydGljbGUoKTtcbiAgICB0aGlzLmRyYXdDb250ZXh0KCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmN0eC5jbGVhclJlY3QoMCwgMCwgdGhpcy53aWR0aCwgdGhpcy5oZWlnaHQpO1xuICAgIHdpbmRvdy5jYW5jZWxBbmltYXRpb25GcmFtZSh0aGlzLm1haW5BbmltYXRpb25GcmFtZSk7XG4gICAgd2luZG93LmNhbmNlbEFuaW1hdGlvbkZyYW1lKHRoaXMuY2hhbmdlQW5pbWF0aW9uRnJhbWUpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScpXG4gIG9uUmVzaXplKCkge1xuICAgIGlmICghdGhpcy5yZXNpemluZyAmJiAoIXRoaXMuZGVmYXVsdF9oZWlnaHQgfHwgIXRoaXMuZGVmYXVsdF93aWR0aCkpIHtcbiAgICAgIHRoaXMucmVzaXppbmcgPSB0cnVlO1xuICAgICAgaWYgKHdpbmRvdy5yZXF1ZXN0QW5pbWF0aW9uRnJhbWUpIHtcbiAgICAgICAgd2luZG93LnJlcXVlc3RBbmltYXRpb25GcmFtZSh0aGlzLnN0YWdlQ2hhbmdlKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHNldFRpbWVvdXQodGhpcy5zdGFnZUNoYW5nZSwgNjYpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgaW5pdFN0YWdlKCkge1xuICAgIGNvbnN0IHtjbGllbnRXaWR0aCwgY2xpZW50SGVpZ2h0fSA9IHRoaXMuY2FudmFzLnBhcmVudEVsZW1lbnQ7XG4gICAgaWYgKHRoaXMuZGVmYXVsdF93aWR0aCkge1xuICAgICAgdGhpcy5jYW52YXMud2lkdGggPSB0aGlzLndpZHRoID0gdGhpcy5kZWZhdWx0X3dpZHRoO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmNhbnZhcy53aWR0aCA9IHRoaXMud2lkdGggPSBjbGllbnRXaWR0aDtcbiAgICB9XG4gICAgaWYgKHRoaXMuZGVmYXVsdF9oZWlnaHQpIHtcbiAgICAgIHRoaXMuY2FudmFzLmhlaWdodCA9IHRoaXMuaGVpZ2h0ID0gdGhpcy5kZWZhdWx0X2hlaWdodDtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5jYW52YXMuaGVpZ2h0ID0gdGhpcy5oZWlnaHQgPSBjbGllbnRIZWlnaHQ7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBpbml0UGFydGljbGUoKSB7XG4gICAgY29uc3QgcmFuZ2UgPSBbdGhpcy53aWR0aCwgdGhpcy5oZWlnaHRdO1xuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgdGhpcy50b3RhbDsgaSsrKSB7XG4gICAgICB0aGlzLnBhcnRpY2xlc1tpXSA9IG5ldyBQYXJ0aWNsZShcbiAgICAgICAgcmFuZ2UsXG4gICAgICAgICh0aGlzLmFyZ3MgJiYgdGhpcy5hcmdzLnNwZWVkKSA/IHRoaXMuYXJncy5zcGVlZCA6ICdub3JtYWwnLFxuICAgICAgICAodGhpcy5hcmdzICYmIHRoaXMuYXJncy5zaXplKSA/IHRoaXMuYXJncy5zaXplIDogMS41XG4gICAgICApO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgc3RhZ2VDaGFuZ2UgPSAoKSA9PiB7XG4gICAgdGhpcy5pbml0U3RhZ2UoKTtcbiAgICBjb25zdCByYW5nZSA9IFt0aGlzLndpZHRoLCB0aGlzLmhlaWdodF07XG4gICAgZm9yIChjb25zdCB4IG9mIHRoaXMucGFydGljbGVzKSB7XG4gICAgICB4Lm9uUmFuZ2UocmFuZ2UpO1xuICAgIH1cbiAgICB0aGlzLnJlc2l6aW5nID0gZmFsc2U7XG4gIH07XG5cbiAgcHJpdmF0ZSBkcmF3Q29udGV4dCA9ICgpID0+IHtcbiAgICB0aGlzLmN0eC5jbGVhclJlY3QoMCwgMCwgdGhpcy53aWR0aCwgdGhpcy5oZWlnaHQpO1xuICAgIGZvciAoY29uc3QgeCBvZiB0aGlzLnBhcnRpY2xlcykge1xuICAgICAgeC5kcmF3KHRoaXMuY3R4KTtcbiAgICAgIHgudXBkYXRlKCk7XG4gICAgfVxuICAgIHRoaXMubWFpbkFuaW1hdGlvbkZyYW1lID0gd2luZG93LnJlcXVlc3RBbmltYXRpb25GcmFtZSh0aGlzLmRyYXdDb250ZXh0KTtcbiAgICB0aGlzLnJlc2l6aW5nID0gZmFsc2U7XG4gIH07XG59XG4iXX0=