@tsparticles/pjs 3.0.0-beta.4 → 3.0.0

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.
@@ -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"