angular-particle icon indicating copy to clipboard operation
angular-particle copied to clipboard

Typ image doesn't work

Open mwinner-cc opened this issue 7 years ago • 5 comments

Thanks for the typeScript implementation but when I try to set an image for the type, I get an error: ERROR TypeError: Cannot read property 'params' of undefined at loadImg (index.js:216) at ParticlesDirective.webpackJsonp.../../../../angular-particle/index.js.ParticlesDirective.ngAfterViewInit (index.js:1231) at callProviderLifecycles (core.es5.js:11182) at callElementProvidersLifecycles (core.es5.js:11157) at callLifecycleHooksChildrenFirst (core.es5.js:11141) at checkAndUpdateView (core.es5.js:12246) at callViewAction (core.es5.js:12603) at execComponentViewsAction (core.es5.js:12535) at checkAndUpdateView (core.es5.js:12244) at callViewAction (core.es5.js:12603)

myParams: shape: { type: 'image', stroke: { width: 2, color: '#f0f8f5' }, image: { src: 'IMAGE PATH HERE' } },

mwinner-cc avatar Aug 14 '17 12:08 mwinner-cc

+1

michaelfreund avatar Dec 10 '17 08:12 michaelfreund

There are a few issues with how things are currently working:

in utils.ts loadImg()

let { particles } = this.params; should be: let { particles } = params;

additionally loadImg() makes an XHR request, ParticlesDirective calls loadImg() and doesn't wait for a response:

If you're trying to load an SVG Image, in ParticlesDirective.ngAfterViewInit():

if (isInArray('image', this._params.particles.shape.type)) {
	this._tmpParams.img_type = this._params.particles.shape.image.src.substr(this._params.particles.shape.image.src.length - 3);
	loadImg(this._params, this._tmpParams);
}

this._canvasManager = new CanvasManager(this._canvasParams, this._params, this._tmpParams);
this._canvasManager.draw();

the CanavasManager will execute the draw() method, prior to completion of the XHR request. Values, such as:

tmp.source_svg = data.currentTarget.response;

Will not exist when, in the constructor for Particle:

this._setupAnimation()

is called:

            if (this._tmpParams.img_type == 'svg' && this._tmpParams.source_svg != undefined) {
                createSvgImg(this, this._tmpParams);
                if (this._tmpParams.pushing) {
                    this.img.loaded = false;
                }
            }

Critical values for createSvgImg(store in this._tmpParams) will be missing.

        this._canvasManager = new CanvasManager(this._canvasParams, this._params, this._tmpParams);
        this._canvasManager.draw();

I think loadImg should be handled differently than it currently is. Ideally the XHR request is removed and updated to work more appropriately within Angular.

chriskyndrid avatar Dec 31 '17 18:12 chriskyndrid

Is there an update for this?

AaronLavers avatar Jun 07 '18 03:06 AaronLavers

Pull request: #16

nemolovich avatar Oct 09 '18 13:10 nemolovich

Is there an update? When PR will be accepted?

fucazu avatar Nov 28 '18 16:11 fucazu