Merge pull request #10 from N3ROO/version-1-2

Version 1 2
lilgallon · Feb 3, 2019 · f85c3b4 · f85c3b4
2 parents 19a2911 + 3fc6520
commit f85c3b4
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,4 +18,10 @@
 - Fix #5 : The canvas does tear anymore when resizing the window
 - Fix #4 : The canvas now fits perfectly the parent container & resizes automatically
 - Fix #2 : The default particle amount has been lowered
-- Small fix : mouse events are now not added to event list if an error occurred during initialization
+- Small fix : mouse events are now not added to event list if an error occurred during initialization
+
+## Version 1.2 : 03/02/19
+
+- Fix #6 : The mouse event now listen to the parent container, and not the canvas
+- Fix #9 : The spawning position automatically adjusts with the new canvas size if the size changed
+- Add : Troubleshoot guide if the canvas is not initially sized correctly
diff --git a/README.md b/README.md
@@ -57,6 +57,7 @@ start()|If first call : it initializes the particles with the settings (if set),
 stop()|It stops the loop (all the particles are frozen).
 setMultiplierIn(multiplierIn)|Change multiplier when the mouse is in the canvas.
 setMultiplierOut(multiplierOut)|Change multiplier when the mouse out of the canvas.
+onResize()|Force canvas to resize with parent container
 
 - Go to the [github wiki](https://github.com/N3ROO/particles.js/wiki) for more details.
 
@@ -146,6 +147,35 @@ Everything will be written in your browser console. If an error occurred, everyt
 }
 ```
 
+**My canvas is initially not adjusted to its parent container:** This is probably due to the fact that you are generating elements dynamically. The canvas retrieve the parent size before the addition of these new elements, so the size is bad. To fix it you can either :
+- Call `particlesHandler.onResize()` once that the new elements are set up in the parent container,
+- Initialize `particlesHandler` once that the new elements are set up in the parent container.
+
+To be sure that everything is loaded you can use :
+- A Javascript event listener :
+```javascript
+window.addEventListener('load', function() {
+    // Init particles handler here, or call onResize()
+});
+```
+So your code should look like this :
+```html
+<body>
+<!-- HTML code ... -->
+    <script>
+        (function() {
+            window.addEventListener('load', function() {
+                let settings = {
+                    // put your customizations here if you changed anything
+                };
+                let particlesHandler = new ParticlesHandler("particles-canvas", settings);
+                particlesHandler.start();
+            });
+        })();
+    </script>
+</body>
+```
+
 *More help will be provided in the future...*
 
 ## Contribution

diff --git a/js/particles-min.js b/js/particles-min.js
diff --git a/js/particles.js b/js/particles.js
@@ -1,6 +1,6 @@
 /**
  * particles.js
- * Current version : 1.1
+ * Current version : 1.2
  * Author(s) : Lilian Gallon (N3ROO)
  * Troubleshooting : Instructions are available on the github page.
  * Contribute here : https://github.com/N3ROO/particles.js
@@ -10,7 +10,7 @@
  /**
   * It sets up the environment, and handle all the particles.
   */
-class ParticlesHandler{
+ class ParticlesHandler{
 
     /**
      * It creates a graph is the specified canvas.
@@ -169,8 +169,8 @@ class ParticlesHandler{
 
         // Set up mouse event listeners
         let self = this;
-        this.canvas.addEventListener("mouseover", self.mouseOver.bind(this), false);
-        this.canvas.addEventListener("mouseout", self.mouseOut.bind(this), false);
+        this.canvas.parentElement.addEventListener("mouseover", self.mouseOver.bind(this), false);
+        this.canvas.parentElement.addEventListener("mouseout", self.mouseOut.bind(this), false);
 
         // Resize event listener
         window.addEventListener('resize', self.onResize.bind(this));
@@ -373,12 +373,19 @@ class ParticlesHandler{
      * Called when the window is resized.
      */
     onResize(){
+        let oldWidth = this.canvas.width;
+        let oldHeight = this.canvas.height;
+
         // Resize canvas
         this.canvas.width = window.getComputedStyle(this.canvas.parentNode).getPropertyValue("width").replace("px", "");
         this.canvas.height = window.getComputedStyle(this.canvas.parentNode).getPropertyValue("height").replace("px", "");
         this.canvas.style.width = window.getComputedStyle(this.canvas.parentNode).getPropertyValue("width");
         this.canvas.style.height = window.getComputedStyle(this.canvas.parentNode).getPropertyValue("height");
 
+        // Fix particles spawning position with new size
+        this.settings.positionXMax += this.canvas.width - oldWidth;
+        this.settings.positionYMax += this.canvas.height- oldHeight;
+
         // Recreate particles list
         this.initParticleList();
     }