canvasparticles-js 3.6.0 → 3.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/canvasParticles.js +47 -37
  2. package/canvasParticles.mjs +47 -37
  3. package/package.json +1 -1
package/canvasParticles.js CHANGED
@@ -9,7 +9,7 @@
9
9
  typeof self !== 'undefined' ? self : this,
10
10
  () =>
11
11
  class CanvasParticles {
12
- static version = '3.6.0'
12
+ static version = '3.6.3'
13
13
 
14
14
  // Mouse interaction with the particles.
15
15
  static interactionType = Object.freeze({
@@ -24,8 +24,10 @@
24
24
  const canvas = change.target
25
25
  const instance = canvas.instance // The 'CanvasParticles' instance bound to 'canvas'.
26
26
 
27
- if ((canvas.inViewbox = change.isIntersecting)) instance.options.animation.startOnEnter && instance.start({ auto: true })
28
- else instance.options.animation.stopOnLeave && instance.stop({ auto: true, clear: false })
27
+ if (!instance.options?.animation) return
28
+
29
+ if ((canvas.inViewbox = change.isIntersecting)) instance.options.animation?.startOnEnter && instance.start({ auto: true })
30
+ else instance.options.animation?.stopOnLeave && instance.stop({ auto: true, clear: false })
29
31
  })
30
32
  })
31
33
 
@@ -56,49 +58,49 @@
56
58
 
57
59
  CanvasParticles.canvasIntersectionObserver.observe(this.canvas)
58
60
 
59
- this.#setupEventHandlers()
60
- }
61
+ // Setup event handlers
62
+ this.resizeCanvas = this.resizeCanvas.bind(this)
63
+ this.updateMousePos = this.updateMousePos.bind(this)
61
64
 
62
- #setupEventHandlers() {
63
- const updateMousePos = event => {
64
- if (!this.enableAnimating) return
65
+ window.addEventListener('resize', this.resizeCanvas)
66
+ this.resizeCanvas()
65
67
 
66
- if (event instanceof MouseEvent) {
67
- this.clientX = event.clientX
68
- this.clientY = event.clientY
69
- }
68
+ window.addEventListener('mousemove', this.updateMousePos)
69
+ window.addEventListener('scroll', this.updateMousePos)
70
+ }
70
71
 
71
- // On scroll, the mouse position remains the same, but since the canvas position changes, 'left' and 'top' must be recalculated.
72
- const { left, top } = this.canvas.getBoundingClientRect()
73
- this.mouseX = this.clientX - left
74
- this.mouseY = this.clientY - top
75
- }
72
+ resizeCanvas() {
73
+ this.canvas.width = this.canvas.offsetWidth
74
+ this.canvas.height = this.canvas.offsetHeight
76
75
 
77
- const resizeCanvas = () => {
78
- this.canvas.width = this.canvas.offsetWidth
79
- this.canvas.height = this.canvas.offsetHeight
76
+ // Prevent the mouse acting like it's at (x: 0, y: 0) before the user moved it.
77
+ this.mouseX = Infinity
78
+ this.mouseY = Infinity
80
79
 
81
- // Prevent the mouse acting like it's at (x: 0, y: 0) before it has moved.
82
- this.mouseX = Infinity
83
- this.mouseY = Infinity
80
+ this.updateCount = Infinity
81
+ this.width = this.canvas.width + this.options.particles.connectDist * 2
82
+ this.height = this.canvas.height + this.options.particles.connectDist * 2
83
+ this.offX = (this.canvas.width - this.width) / 2
84
+ this.offY = (this.canvas.height - this.height) / 2
84
85
 
85
- this.updateCount = Infinity
86
- this.width = this.canvas.width + this.options.particles.connectDist * 2
87
- this.height = this.canvas.height + this.options.particles.connectDist * 2
88
- this.offX = (this.canvas.width - this.width) / 2
89
- this.offY = (this.canvas.height - this.height) / 2
86
+ if (this.options.particles.regenerateOnResize || this.particles.length === 0) this.newParticles()
87
+ else this.matchParticleCount()
90
88
 
91
- if (this.options.particles.regenerateOnResize || this.particles.length === 0) this.newParticles()
92
- else this.matchParticleCount()
89
+ this.#updateParticleBounds()
90
+ }
93
91
 
94
- this.#updateParticleBounds()
95
- }
92
+ updateMousePos(event) {
93
+ if (!this.enableAnimating) return
96
94
 
97
- window.addEventListener('resize', resizeCanvas)
98
- resizeCanvas()
95
+ if (event instanceof MouseEvent) {
96
+ this.clientX = event.clientX
97
+ this.clientY = event.clientY
98
+ }
99
99
 
100
- window.addEventListener('mousemove', updateMousePos)
101
- window.addEventListener('scroll', updateMousePos)
100
+ // On scroll, the mouse position remains the same, but since the canvas position changes, 'left' and 'top' must be recalculated.
101
+ const { left, top } = this.canvas.getBoundingClientRect()
102
+ this.mouseX = this.clientX - left
103
+ this.mouseY = this.clientY - top
102
104
  }
103
105
 
104
106
  /**
@@ -513,7 +515,15 @@
513
515
  */
514
516
  destroy() {
515
517
  this.stop()
516
- this.canvas.remove()
518
+
519
+ CanvasParticles.canvasIntersectionObserver.unobserve(this.canvas)
520
+
521
+ window.removeEventListener('resize', this.resizeCanvas)
522
+ window.removeEventListener('mousemove', this.updateMousePos)
523
+ window.removeEventListener('scroll', this.updateMousePos)
524
+
525
+ this.canvas?.remove()
526
+
517
527
  Object.keys(this).forEach(key => delete this[key]) // Remove references to help GC.
518
528
  }
519
529
 
package/canvasParticles.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  // https://github.com/Khoeckman/canvasparticles-js/blob/main/LICENSE
3
3
 
4
4
  export default class CanvasParticles {
5
- static version = '3.6.0'
5
+ static version = '3.6.3'
6
6
 
7
7
  // Mouse interaction with the particles.
8
8
  static interactionType = Object.freeze({
@@ -17,8 +17,10 @@ export default class CanvasParticles {
17
17
  const canvas = change.target
18
18
  const instance = canvas.instance // The 'CanvasParticles' instance bound to 'canvas'.
19
19
 
20
- if ((canvas.inViewbox = change.isIntersecting)) instance.options.animation.startOnEnter && instance.start({ auto: true })
21
- else instance.options.animation.stopOnLeave && instance.stop({ auto: true, clear: false })
20
+ if (!instance.options?.animation) return
21
+
22
+ if ((canvas.inViewbox = change.isIntersecting)) instance.options.animation?.startOnEnter && instance.start({ auto: true })
23
+ else instance.options.animation?.stopOnLeave && instance.stop({ auto: true, clear: false })
22
24
  })
23
25
  })
24
26
 
@@ -49,49 +51,49 @@ export default class CanvasParticles {
49
51
 
50
52
  CanvasParticles.canvasIntersectionObserver.observe(this.canvas)
51
53
 
52
- this.#setupEventHandlers()
53
- }
54
+ // Setup event handlers
55
+ this.resizeCanvas = this.resizeCanvas.bind(this)
56
+ this.updateMousePos = this.updateMousePos.bind(this)
54
57
 
55
- #setupEventHandlers() {
56
- const updateMousePos = event => {
57
- if (!this.enableAnimating) return
58
+ window.addEventListener('resize', this.resizeCanvas)
59
+ this.resizeCanvas()
58
60
 
59
- if (event instanceof MouseEvent) {
60
- this.clientX = event.clientX
61
- this.clientY = event.clientY
62
- }
61
+ window.addEventListener('mousemove', this.updateMousePos)
62
+ window.addEventListener('scroll', this.updateMousePos)
63
+ }
63
64
 
64
- // On scroll, the mouse position remains the same, but since the canvas position changes, 'left' and 'top' must be recalculated.
65
- const { left, top } = this.canvas.getBoundingClientRect()
66
- this.mouseX = this.clientX - left
67
- this.mouseY = this.clientY - top
68
- }
65
+ resizeCanvas() {
66
+ this.canvas.width = this.canvas.offsetWidth
67
+ this.canvas.height = this.canvas.offsetHeight
69
68
 
70
- const resizeCanvas = () => {
71
- this.canvas.width = this.canvas.offsetWidth
72
- this.canvas.height = this.canvas.offsetHeight
69
+ // Prevent the mouse acting like it's at (x: 0, y: 0) before the user moved it.
70
+ this.mouseX = Infinity
71
+ this.mouseY = Infinity
73
72
 
74
- // Prevent the mouse acting like it's at (x: 0, y: 0) before it has moved.
75
- this.mouseX = Infinity
76
- this.mouseY = Infinity
73
+ this.updateCount = Infinity
74
+ this.width = this.canvas.width + this.options.particles.connectDist * 2
75
+ this.height = this.canvas.height + this.options.particles.connectDist * 2
76
+ this.offX = (this.canvas.width - this.width) / 2
77
+ this.offY = (this.canvas.height - this.height) / 2
77
78
 
78
- this.updateCount = Infinity
79
- this.width = this.canvas.width + this.options.particles.connectDist * 2
80
- this.height = this.canvas.height + this.options.particles.connectDist * 2
81
- this.offX = (this.canvas.width - this.width) / 2
82
- this.offY = (this.canvas.height - this.height) / 2
79
+ if (this.options.particles.regenerateOnResize || this.particles.length === 0) this.newParticles()
80
+ else this.matchParticleCount()
83
81
 
84
- if (this.options.particles.regenerateOnResize || this.particles.length === 0) this.newParticles()
85
- else this.matchParticleCount()
82
+ this.#updateParticleBounds()
83
+ }
86
84
 
87
- this.#updateParticleBounds()
88
- }
85
+ updateMousePos(event) {
86
+ if (!this.enableAnimating) return
89
87
 
90
- window.addEventListener('resize', resizeCanvas)
91
- resizeCanvas()
88
+ if (event instanceof MouseEvent) {
89
+ this.clientX = event.clientX
90
+ this.clientY = event.clientY
91
+ }
92
92
 
93
- window.addEventListener('mousemove', updateMousePos)
94
- window.addEventListener('scroll', updateMousePos)
93
+ // On scroll, the mouse position remains the same, but since the canvas position changes, 'left' and 'top' must be recalculated.
94
+ const { left, top } = this.canvas.getBoundingClientRect()
95
+ this.mouseX = this.clientX - left
96
+ this.mouseY = this.clientY - top
95
97
  }
96
98
 
97
99
  /**
@@ -506,7 +508,15 @@ export default class CanvasParticles {
506
508
  */
507
509
  destroy() {
508
510
  this.stop()
509
- this.canvas.remove()
511
+
512
+ CanvasParticles.canvasIntersectionObserver.unobserve(this.canvas)
513
+
514
+ window.removeEventListener('resize', this.resizeCanvas)
515
+ window.removeEventListener('mousemove', this.updateMousePos)
516
+ window.removeEventListener('scroll', this.updateMousePos)
517
+
518
+ this.canvas?.remove()
519
+
510
520
  Object.keys(this).forEach(key => delete this[key]) // Remove references to help GC.
511
521
  }
512
522
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "canvasparticles-js",
3
- "version": "3.6.0",
3
+ "version": "3.6.3",
4
4
  "description": "In an HTML canvas, a bunch of interactive particles connected with lines when they approach each other.",
5
5
  "main": "canvasParticles.js",
6
6
  "module": "canvasParticles.mjs",