1

I am using planetaryjs inside an angular directive.

The planetary rotation animation is working fine when the page first loads, but after switching the views and coming back to the planetary animation, it starts to jerk.

Here is a Plunker showing the problem.

any idea how to solve this?

Michelle Tilley
  • 157,729
  • 40
  • 374
  • 311
François Romain
  • 13,617
  • 17
  • 89
  • 123

1 Answers1

2

I believe each time you go back and forth to planetary view, view-planetary.html unloads and loads again but the plantery.js event (planet.draw(canvas)) in your link function still remains in memory and hence it flickers because of multiple instances of planet.draw running. To get rid of this issue (which is a most common thing people forget to do especially when they bind external events angular is unaware of), we need to watch for the $destroy event on the element (canvas). Put below code inside a link method of planetary directive.

  element.on('$destroy', function() {
     // I did not find the destroy method to unload the planet in planetary.js
     // If you find it then put it here
     // For example, planet.destroy(canvas);
  });
codef0rmer
  • 10,284
  • 9
  • 53
  • 76
  • 2
    +1; he can solve the problem if he put the instantiation of the planet (var planet = planetaryjs.planet(); and the rest of the code) complete inside the link function. – michael Jan 26 '14 at 16:44
  • @michael well, it's better, but it's still not perfect. now the animation starts to jerk after 10 clicks instead of three… I updated the plunker with your suggestion – François Romain Jan 26 '14 at 16:56
  • @michael yes, I can see the problem with Chrome… with your improvement, it needs about ten clicks to start to jerk. – François Romain Jan 26 '14 at 17:44
  • 1
    @desgnl I believe codef0rmer and Michael are correct; the planet needs to be destroyed, as the timers for the "old" planets created by the directive are still running. Unfortunately, I did not think to add such an API to Planetary.js; I will correct this soon. Keep an eye on https://github.com/BinaryMuse/planetary.js/issues/8. – Michelle Tilley Jan 26 '14 at 17:56
  • A quick-and-dirty solution would be to instantiate your planet in the controller, and pass it into the directive with two-way data binding (that way you only ever create one planet, with one draw loop). It's non-idea, but may help until issue #8 is fixed. – Michelle Tilley Jan 26 '14 at 17:57
  • Planetary.js v1.1.0 adds a `stop` method that you can use to fix this issue. See the directive here: http://plnkr.co/edit/fqWRIE?p=preview – Michelle Tilley Feb 03 '14 at 08:21