@tsparticles/pjs 3.0.0-beta.4 → 3.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (13) hide show
  1. package/browser/VincentGarreau/particles.js +249 -1
  2. package/cjs/VincentGarreau/particles.js +249 -1
  3. package/esm/VincentGarreau/particles.js +249 -1
  4. package/package.json +2 -2
  5. package/report.html +3 -3
  6. package/tsparticles.pjs.bundle.js +282 -24
  7. package/tsparticles.pjs.bundle.min.js +1 -1
  8. package/tsparticles.pjs.bundle.min.js.LICENSE.txt +1 -1
  9. package/tsparticles.pjs.js +239 -2
  10. package/tsparticles.pjs.min.js +1 -1
  11. package/tsparticles.pjs.min.js.LICENSE.txt +1 -1
  12. package/types/VincentGarreau/IParticlesJS.d.ts +113 -2
  13. package/umd/VincentGarreau/particles.js +250 -2
package/esm/VincentGarreau/particles.js CHANGED
@@ -1,6 +1,254 @@
1
+ import { deepExtend } from "@tsparticles/engine";
2
+ const defaultPjsOptions = {
3
+ particles: {
4
+ number: {
5
+ value: 400,
6
+ density: {
7
+ enable: true,
8
+ value_area: 800,
9
+ },
10
+ },
11
+ color: {
12
+ value: "#fff",
13
+ },
14
+ shape: {
15
+ type: "circle",
16
+ stroke: {
17
+ width: 0,
18
+ color: "#ff0000",
19
+ },
20
+ polygon: {
21
+ nb_sides: 5,
22
+ },
23
+ image: {
24
+ src: "",
25
+ width: 100,
26
+ height: 100,
27
+ },
28
+ },
29
+ opacity: {
30
+ value: 1,
31
+ random: false,
32
+ anim: {
33
+ enable: false,
34
+ speed: 2,
35
+ opacity_min: 0,
36
+ sync: false,
37
+ },
38
+ },
39
+ size: {
40
+ value: 20,
41
+ random: false,
42
+ anim: {
43
+ enable: false,
44
+ speed: 20,
45
+ size_min: 0,
46
+ sync: false,
47
+ },
48
+ },
49
+ line_linked: {
50
+ enable: true,
51
+ distance: 100,
52
+ color: "#fff",
53
+ opacity: 1,
54
+ width: 1,
55
+ },
56
+ move: {
57
+ enable: true,
58
+ speed: 2,
59
+ direction: "none",
60
+ random: false,
61
+ straight: false,
62
+ out_mode: "out",
63
+ bounce: false,
64
+ attract: {
65
+ enable: false,
66
+ rotateX: 3000,
67
+ rotateY: 3000,
68
+ },
69
+ },
70
+ },
71
+ interactivity: {
72
+ detect_on: "canvas",
73
+ events: {
74
+ onhover: {
75
+ enable: true,
76
+ mode: "grab",
77
+ },
78
+ onclick: {
79
+ enable: true,
80
+ mode: "push",
81
+ },
82
+ resize: true,
83
+ },
84
+ modes: {
85
+ grab: {
86
+ distance: 100,
87
+ line_linked: {
88
+ opacity: 1,
89
+ },
90
+ },
91
+ bubble: {
92
+ distance: 200,
93
+ size: 80,
94
+ duration: 0.4,
95
+ opacity: 1,
96
+ speed: 3,
97
+ },
98
+ repulse: {
99
+ distance: 200,
100
+ duration: 0.4,
101
+ },
102
+ push: {
103
+ particles_nb: 4,
104
+ },
105
+ remove: {
106
+ particles_nb: 2,
107
+ },
108
+ },
109
+ },
110
+ retina_detect: false,
111
+ };
1
112
  const initParticlesJS = (engine) => {
2
113
  const particlesJS = (tagId, options) => {
3
- return engine.load({ id: tagId, options });
114
+ const fixedOptions = deepExtend(defaultPjsOptions, options);
115
+ return engine.load({
116
+ id: tagId,
117
+ options: {
118
+ fullScreen: {
119
+ enable: false,
120
+ },
121
+ detectRetina: fixedOptions.retina_detect,
122
+ smooth: true,
123
+ interactivity: {
124
+ detectsOn: fixedOptions.interactivity.detect_on,
125
+ events: {
126
+ onHover: {
127
+ enable: fixedOptions.interactivity.events.onhover.enable,
128
+ mode: fixedOptions.interactivity.events.onhover.mode,
129
+ },
130
+ onClick: {
131
+ enable: fixedOptions.interactivity.events.onclick.enable,
132
+ mode: fixedOptions.interactivity.events.onclick.mode,
133
+ },
134
+ resize: {
135
+ enable: fixedOptions.interactivity.events.resize,
136
+ },
137
+ },
138
+ modes: {
139
+ grab: {
140
+ distance: fixedOptions.interactivity.modes.grab.distance,
141
+ links: {
142
+ opacity: fixedOptions.interactivity.modes.grab.line_linked.opacity,
143
+ },
144
+ },
145
+ bubble: {
146
+ distance: fixedOptions.interactivity.modes.bubble.distance,
147
+ size: fixedOptions.interactivity.modes.bubble.size,
148
+ duration: fixedOptions.interactivity.modes.bubble.duration,
149
+ opacity: fixedOptions.interactivity.modes.bubble.opacity,
150
+ speed: fixedOptions.interactivity.modes.bubble.speed,
151
+ },
152
+ repulse: {
153
+ distance: fixedOptions.interactivity.modes.repulse.distance,
154
+ duration: fixedOptions.interactivity.modes.repulse.duration,
155
+ },
156
+ push: {
157
+ quantity: fixedOptions.interactivity.modes.push.particles_nb,
158
+ },
159
+ remove: {
160
+ quantity: fixedOptions.interactivity.modes.remove.particles_nb,
161
+ },
162
+ },
163
+ },
164
+ particles: {
165
+ collisions: {
166
+ enable: fixedOptions.particles.move.bounce,
167
+ },
168
+ number: {
169
+ value: fixedOptions.particles.number.value,
170
+ density: {
171
+ enable: fixedOptions.particles.number.density.enable,
172
+ width: fixedOptions.particles.number.density.value_area,
173
+ },
174
+ },
175
+ color: {
176
+ value: fixedOptions.particles.color.value,
177
+ },
178
+ stroke: {
179
+ width: fixedOptions.particles.shape.stroke.width,
180
+ color: {
181
+ value: fixedOptions.particles.shape.stroke.color,
182
+ },
183
+ },
184
+ shape: {
185
+ type: fixedOptions.particles.shape.type,
186
+ options: {
187
+ polygon: {
188
+ sides: fixedOptions.particles.shape.polygon.nb_sides,
189
+ },
190
+ image: {
191
+ src: fixedOptions.particles.shape.image.src,
192
+ width: fixedOptions.particles.shape.image.width,
193
+ height: fixedOptions.particles.shape.image.height,
194
+ },
195
+ },
196
+ },
197
+ opacity: {
198
+ value: fixedOptions.particles.opacity.random
199
+ ? {
200
+ min: fixedOptions.particles.opacity.anim.enable
201
+ ? fixedOptions.particles.opacity.anim.opacity_min
202
+ : 0,
203
+ max: fixedOptions.particles.opacity.value,
204
+ }
205
+ : fixedOptions.particles.opacity.value,
206
+ animation: {
207
+ enable: fixedOptions.particles.opacity.anim.enable,
208
+ speed: fixedOptions.particles.opacity.anim.speed,
209
+ sync: fixedOptions.particles.opacity.anim.sync,
210
+ },
211
+ },
212
+ size: {
213
+ value: fixedOptions.particles.size.random
214
+ ? {
215
+ min: fixedOptions.particles.size.anim.enable
216
+ ? fixedOptions.particles.size.anim.size_min
217
+ : 0,
218
+ max: fixedOptions.particles.size.value,
219
+ }
220
+ : fixedOptions.particles.size.value,
221
+ animation: {
222
+ enable: fixedOptions.particles.size.anim.enable,
223
+ speed: fixedOptions.particles.size.anim.speed,
224
+ sync: fixedOptions.particles.size.anim.sync,
225
+ },
226
+ },
227
+ links: {
228
+ enable: fixedOptions.particles.line_linked.enable,
229
+ distance: fixedOptions.particles.line_linked.distance,
230
+ color: fixedOptions.particles.line_linked.color,
231
+ opacity: fixedOptions.particles.line_linked.opacity,
232
+ width: fixedOptions.particles.line_linked.width,
233
+ },
234
+ move: {
235
+ enable: fixedOptions.particles.move.enable,
236
+ speed: fixedOptions.particles.move.speed / 3,
237
+ direction: fixedOptions.particles.move.direction,
238
+ random: fixedOptions.particles.move.random,
239
+ straight: fixedOptions.particles.move.straight,
240
+ outModes: fixedOptions.particles.move.out_mode,
241
+ attract: {
242
+ enable: fixedOptions.particles.move.attract.enable,
243
+ rotate: {
244
+ x: fixedOptions.particles.move.attract.rotateX,
245
+ y: fixedOptions.particles.move.attract.rotateY,
246
+ },
247
+ },
248
+ },
249
+ },
250
+ },
251
+ });
4
252
  };
5
253
  particlesJS.load = (tagId, pathConfigJson, callback) => {
6
254
  engine
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/pjs",
3
- "version": "3.0.0-beta.4",
3
+ "version": "3.0.0",
4
4
  "description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -99,7 +99,7 @@
99
99
  "./package.json": "./package.json"
100
100
  },
101
101
  "dependencies": {
102
- "@tsparticles/engine": "^3.0.0-beta.4"
102
+ "@tsparticles/engine": "^3.0.0"
103
103
  },
104
104
  "publishConfig": {
105
105
  "access": "public"