angular-particle
angular-particle copied to clipboard
Typ image doesn't work
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' } },
+1
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.
Is there an update for this?
Pull request: #16
Is there an update? When PR will be accepted?