@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.
@@ -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
@@ -1,9 +1,257 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.initParticlesJS = void 0;
4
+ const engine_1 = require("@tsparticles/engine");
5
+ const defaultPjsOptions = {
6
+ particles: {
7
+ number: {
8
+ value: 400,
9
+ density: {
10
+ enable: true,
11
+ value_area: 800,
12
+ },
13
+ },
14
+ color: {
15
+ value: "#fff",
16
+ },
17
+ shape: {
18
+ type: "circle",
19
+ stroke: {
20
+ width: 0,
21
+ color: "#ff0000",
22
+ },
23
+ polygon: {
24
+ nb_sides: 5,
25
+ },
26
+ image: {
27
+ src: "",
28
+ width: 100,
29
+ height: 100,
30
+ },
31
+ },
32
+ opacity: {
33
+ value: 1,
34
+ random: false,
35
+ anim: {
36
+ enable: false,
37
+ speed: 2,
38
+ opacity_min: 0,
39
+ sync: false,
40
+ },
41
+ },
42
+ size: {
43
+ value: 20,
44
+ random: false,
45
+ anim: {
46
+ enable: false,
47
+ speed: 20,
48
+ size_min: 0,
49
+ sync: false,
50
+ },
51
+ },
52
+ line_linked: {
53
+ enable: true,
54
+ distance: 100,
55
+ color: "#fff",
56
+ opacity: 1,
57
+ width: 1,
58
+ },
59
+ move: {
60
+ enable: true,
61
+ speed: 2,
62
+ direction: "none",
63
+ random: false,
64
+ straight: false,
65
+ out_mode: "out",
66
+ bounce: false,
67
+ attract: {
68
+ enable: false,
69
+ rotateX: 3000,
70
+ rotateY: 3000,
71
+ },
72
+ },
73
+ },
74
+ interactivity: {
75
+ detect_on: "canvas",
76
+ events: {
77
+ onhover: {
78
+ enable: true,
79
+ mode: "grab",
80
+ },
81
+ onclick: {
82
+ enable: true,
83
+ mode: "push",
84
+ },
85
+ resize: true,
86
+ },
87
+ modes: {
88
+ grab: {
89
+ distance: 100,
90
+ line_linked: {
91
+ opacity: 1,
92
+ },
93
+ },
94
+ bubble: {
95
+ distance: 200,
96
+ size: 80,
97
+ duration: 0.4,
98
+ opacity: 1,
99
+ speed: 3,
100
+ },
101
+ repulse: {
102
+ distance: 200,
103
+ duration: 0.4,
104
+ },
105
+ push: {
106
+ particles_nb: 4,
107
+ },
108
+ remove: {
109
+ particles_nb: 2,
110
+ },
111
+ },
112
+ },
113
+ retina_detect: false,
114
+ };
4
115
  const initParticlesJS = (engine) => {
5
116
  const particlesJS = (tagId, options) => {
6
- return engine.load({ id: tagId, options });
117
+ const fixedOptions = (0, engine_1.deepExtend)(defaultPjsOptions, options);
118
+ return engine.load({
119
+ id: tagId,
120
+ options: {
121
+ fullScreen: {
122
+ enable: false,
123
+ },
124
+ detectRetina: fixedOptions.retina_detect,
125
+ smooth: true,
126
+ interactivity: {
127
+ detectsOn: fixedOptions.interactivity.detect_on,
128
+ events: {
129
+ onHover: {
130
+ enable: fixedOptions.interactivity.events.onhover.enable,
131
+ mode: fixedOptions.interactivity.events.onhover.mode,
132
+ },
133
+ onClick: {
134
+ enable: fixedOptions.interactivity.events.onclick.enable,
135
+ mode: fixedOptions.interactivity.events.onclick.mode,
136
+ },
137
+ resize: {
138
+ enable: fixedOptions.interactivity.events.resize,
139
+ },
140
+ },
141
+ modes: {
142
+ grab: {
143
+ distance: fixedOptions.interactivity.modes.grab.distance,
144
+ links: {
145
+ opacity: fixedOptions.interactivity.modes.grab.line_linked.opacity,
146
+ },
147
+ },
148
+ bubble: {
149
+ distance: fixedOptions.interactivity.modes.bubble.distance,
150
+ size: fixedOptions.interactivity.modes.bubble.size,
151
+ duration: fixedOptions.interactivity.modes.bubble.duration,
152
+ opacity: fixedOptions.interactivity.modes.bubble.opacity,
153
+ speed: fixedOptions.interactivity.modes.bubble.speed,
154
+ },
155
+ repulse: {
156
+ distance: fixedOptions.interactivity.modes.repulse.distance,
157
+ duration: fixedOptions.interactivity.modes.repulse.duration,
158
+ },
159
+ push: {
160
+ quantity: fixedOptions.interactivity.modes.push.particles_nb,
161
+ },
162
+ remove: {
163
+ quantity: fixedOptions.interactivity.modes.remove.particles_nb,
164
+ },
165
+ },
166
+ },
167
+ particles: {
168
+ collisions: {
169
+ enable: fixedOptions.particles.move.bounce,
170
+ },
171
+ number: {
172
+ value: fixedOptions.particles.number.value,
173
+ density: {
174
+ enable: fixedOptions.particles.number.density.enable,
175
+ width: fixedOptions.particles.number.density.value_area,
176
+ },
177
+ },
178
+ color: {
179
+ value: fixedOptions.particles.color.value,
180
+ },
181
+ stroke: {
182
+ width: fixedOptions.particles.shape.stroke.width,
183
+ color: {
184
+ value: fixedOptions.particles.shape.stroke.color,
185
+ },
186
+ },
187
+ shape: {
188
+ type: fixedOptions.particles.shape.type,
189
+ options: {
190
+ polygon: {
191
+ sides: fixedOptions.particles.shape.polygon.nb_sides,
192
+ },
193
+ image: {
194
+ src: fixedOptions.particles.shape.image.src,
195
+ width: fixedOptions.particles.shape.image.width,
196
+ height: fixedOptions.particles.shape.image.height,
197
+ },
198
+ },
199
+ },
200
+ opacity: {
201
+ value: fixedOptions.particles.opacity.random
202
+ ? {
203
+ min: fixedOptions.particles.opacity.anim.enable
204
+ ? fixedOptions.particles.opacity.anim.opacity_min
205
+ : 0,
206
+ max: fixedOptions.particles.opacity.value,
207
+ }
208
+ : fixedOptions.particles.opacity.value,
209
+ animation: {
210
+ enable: fixedOptions.particles.opacity.anim.enable,
211
+ speed: fixedOptions.particles.opacity.anim.speed,
212
+ sync: fixedOptions.particles.opacity.anim.sync,
213
+ },
214
+ },
215
+ size: {
216
+ value: fixedOptions.particles.size.random
217
+ ? {
218
+ min: fixedOptions.particles.size.anim.enable
219
+ ? fixedOptions.particles.size.anim.size_min
220
+ : 0,
221
+ max: fixedOptions.particles.size.value,
222
+ }
223
+ : fixedOptions.particles.size.value,
224
+ animation: {
225
+ enable: fixedOptions.particles.size.anim.enable,
226
+ speed: fixedOptions.particles.size.anim.speed,
227
+ sync: fixedOptions.particles.size.anim.sync,
228
+ },
229
+ },
230
+ links: {
231
+ enable: fixedOptions.particles.line_linked.enable,
232
+ distance: fixedOptions.particles.line_linked.distance,
233
+ color: fixedOptions.particles.line_linked.color,
234
+ opacity: fixedOptions.particles.line_linked.opacity,
235
+ width: fixedOptions.particles.line_linked.width,
236
+ },
237
+ move: {
238
+ enable: fixedOptions.particles.move.enable,
239
+ speed: fixedOptions.particles.move.speed / 3,
240
+ direction: fixedOptions.particles.move.direction,
241
+ random: fixedOptions.particles.move.random,
242
+ straight: fixedOptions.particles.move.straight,
243
+ outModes: fixedOptions.particles.move.out_mode,
244
+ attract: {
245
+ enable: fixedOptions.particles.move.attract.enable,
246
+ rotate: {
247
+ x: fixedOptions.particles.move.attract.rotateX,
248
+ y: fixedOptions.particles.move.attract.rotateY,
249
+ },
250
+ },
251
+ },
252
+ },
253
+ },
254
+ });
7
255
  };
8
256
  particlesJS.load = (tagId, pathConfigJson, callback) => {
9
257
  engine