1 | import { ConfettiOptions } from "./ConfettiOptions";
|
2 | import { loadAngleUpdater } from "tsparticles-updater-angle";
|
3 | import { loadBaseMover } from "tsparticles-move-base";
|
4 | import { loadCardsShape } from "tsparticles-shape-cards";
|
5 | import { loadCircleShape } from "tsparticles-shape-circle";
|
6 | import { loadColorUpdater } from "tsparticles-updater-color";
|
7 | import { loadEmittersPlugin } from "tsparticles-plugin-emitters";
|
8 | import { loadHeartShape } from "tsparticles-shape-heart";
|
9 | import { loadImageShape } from "tsparticles-shape-image";
|
10 | import { loadLifeUpdater } from "tsparticles-updater-life";
|
11 | import { loadMotionPlugin } from "tsparticles-plugin-motion";
|
12 | import { loadOpacityUpdater } from "tsparticles-updater-opacity";
|
13 | import { loadOutModesUpdater } from "tsparticles-updater-out-modes";
|
14 | import { loadPolygonShape } from "tsparticles-shape-polygon";
|
15 | import { loadRollUpdater } from "tsparticles-updater-roll";
|
16 | import { loadSizeUpdater } from "tsparticles-updater-size";
|
17 | import { loadSquareShape } from "tsparticles-shape-square";
|
18 | import { loadStarShape } from "tsparticles-shape-star";
|
19 | import { loadTextShape } from "tsparticles-shape-text";
|
20 | import { loadTiltUpdater } from "tsparticles-updater-tilt";
|
21 | import { loadWobbleUpdater } from "tsparticles-updater-wobble";
|
22 | import { tsParticles } from "tsparticles-engine";
|
23 | let initialized = false;
|
24 | let initializing = false;
|
25 | const ids = new Map();
|
26 | async function initPlugins() {
|
27 | if (initialized) {
|
28 | return;
|
29 | }
|
30 | if (initializing) {
|
31 | return new Promise((resolve) => {
|
32 | const interval = setInterval(() => {
|
33 | if (initialized) {
|
34 | clearInterval(interval);
|
35 | resolve();
|
36 | }
|
37 | }, 100);
|
38 | });
|
39 | }
|
40 | initializing = true;
|
41 | await loadBaseMover(tsParticles);
|
42 | await loadEmittersPlugin(tsParticles);
|
43 | await loadMotionPlugin(tsParticles);
|
44 | await loadCardsShape(tsParticles);
|
45 | await loadCircleShape(tsParticles);
|
46 | await loadHeartShape(tsParticles);
|
47 | await loadImageShape(tsParticles);
|
48 | await loadPolygonShape(tsParticles);
|
49 | await loadSquareShape(tsParticles);
|
50 | await loadStarShape(tsParticles);
|
51 | await loadTextShape(tsParticles);
|
52 | await loadAngleUpdater(tsParticles);
|
53 | await loadColorUpdater(tsParticles);
|
54 | await loadLifeUpdater(tsParticles);
|
55 | await loadOpacityUpdater(tsParticles);
|
56 | await loadOutModesUpdater(tsParticles);
|
57 | await loadRollUpdater(tsParticles);
|
58 | await loadSizeUpdater(tsParticles);
|
59 | await loadTiltUpdater(tsParticles);
|
60 | await loadWobbleUpdater(tsParticles);
|
61 | initializing = false;
|
62 | initialized = true;
|
63 | }
|
64 | async function setConfetti(params) {
|
65 | const actualOptions = new ConfettiOptions();
|
66 | actualOptions.load(params.options);
|
67 | let container;
|
68 | if (ids.has(params.id)) {
|
69 | container = ids.get(params.id);
|
70 | if (container && !container.destroyed) {
|
71 | const alias = container;
|
72 | if (alias.addEmitter) {
|
73 | alias.addEmitter({
|
74 | startCount: actualOptions.count,
|
75 | position: actualOptions.position,
|
76 | size: {
|
77 | width: 0,
|
78 | height: 0,
|
79 | },
|
80 | rate: {
|
81 | delay: 0,
|
82 | quantity: 0,
|
83 | },
|
84 | life: {
|
85 | duration: 0.1,
|
86 | count: 1,
|
87 | },
|
88 | particles: {
|
89 | color: {
|
90 | value: actualOptions.colors,
|
91 | },
|
92 | shape: {
|
93 | type: actualOptions.shapes,
|
94 | options: actualOptions.shapeOptions,
|
95 | },
|
96 | size: {
|
97 | value: 5 * actualOptions.scalar,
|
98 | },
|
99 | life: {
|
100 | duration: {
|
101 | value: actualOptions.ticks / 60,
|
102 | },
|
103 | },
|
104 | move: {
|
105 | angle: {
|
106 | value: actualOptions.spread,
|
107 | offset: 0,
|
108 | },
|
109 | drift: {
|
110 | min: -actualOptions.drift,
|
111 | max: actualOptions.drift,
|
112 | },
|
113 | gravity: {
|
114 | acceleration: actualOptions.gravity * 9.81,
|
115 | },
|
116 | speed: actualOptions.startVelocity * 3,
|
117 | decay: 1 - actualOptions.decay,
|
118 | direction: -actualOptions.angle,
|
119 | },
|
120 | },
|
121 | });
|
122 | return;
|
123 | }
|
124 | }
|
125 | }
|
126 | const particlesOptions = {
|
127 | fullScreen: {
|
128 | enable: !params.canvas,
|
129 | zIndex: actualOptions.zIndex,
|
130 | },
|
131 | fpsLimit: 120,
|
132 | particles: {
|
133 | number: {
|
134 | value: 0,
|
135 | },
|
136 | color: {
|
137 | value: actualOptions.colors,
|
138 | },
|
139 | shape: {
|
140 | type: actualOptions.shapes,
|
141 | options: actualOptions.shapeOptions,
|
142 | },
|
143 | opacity: {
|
144 | value: { min: 0, max: 1 },
|
145 | animation: {
|
146 | enable: true,
|
147 | speed: 0.5,
|
148 | startValue: "max",
|
149 | destroy: "min",
|
150 | },
|
151 | },
|
152 | size: {
|
153 | value: 5 * actualOptions.scalar,
|
154 | },
|
155 | links: {
|
156 | enable: false,
|
157 | },
|
158 | life: {
|
159 | duration: {
|
160 | sync: true,
|
161 | value: actualOptions.ticks / 60,
|
162 | },
|
163 | count: 1,
|
164 | },
|
165 | move: {
|
166 | angle: {
|
167 | value: actualOptions.spread,
|
168 | offset: 0,
|
169 | },
|
170 | drift: {
|
171 | min: -actualOptions.drift,
|
172 | max: actualOptions.drift,
|
173 | },
|
174 | enable: true,
|
175 | gravity: {
|
176 | enable: true,
|
177 | acceleration: actualOptions.gravity * 9.81,
|
178 | },
|
179 | speed: actualOptions.startVelocity * 3,
|
180 | decay: 1 - actualOptions.decay,
|
181 | direction: -actualOptions.angle,
|
182 | random: true,
|
183 | straight: false,
|
184 | outModes: {
|
185 | default: "none",
|
186 | bottom: "destroy",
|
187 | },
|
188 | },
|
189 | rotate: {
|
190 | value: {
|
191 | min: 0,
|
192 | max: 360,
|
193 | },
|
194 | direction: "random",
|
195 | animation: {
|
196 | enable: true,
|
197 | speed: 60,
|
198 | },
|
199 | },
|
200 | tilt: {
|
201 | direction: "random",
|
202 | enable: true,
|
203 | value: {
|
204 | min: 0,
|
205 | max: 360,
|
206 | },
|
207 | animation: {
|
208 | enable: true,
|
209 | speed: 60,
|
210 | },
|
211 | },
|
212 | roll: {
|
213 | darken: {
|
214 | enable: true,
|
215 | value: 25,
|
216 | },
|
217 | enable: true,
|
218 | speed: {
|
219 | min: 15,
|
220 | max: 25,
|
221 | },
|
222 | },
|
223 | wobble: {
|
224 | distance: 30,
|
225 | enable: true,
|
226 | speed: {
|
227 | min: -15,
|
228 | max: 15,
|
229 | },
|
230 | },
|
231 | },
|
232 | detectRetina: true,
|
233 | motion: {
|
234 | disable: actualOptions.disableForReducedMotion,
|
235 | },
|
236 | emitters: {
|
237 | name: "confetti",
|
238 | startCount: actualOptions.count,
|
239 | position: actualOptions.position,
|
240 | size: {
|
241 | width: 0,
|
242 | height: 0,
|
243 | },
|
244 | rate: {
|
245 | delay: 0,
|
246 | quantity: 0,
|
247 | },
|
248 | life: {
|
249 | duration: 0.1,
|
250 | count: 1,
|
251 | },
|
252 | },
|
253 | };
|
254 | if (params.id) {
|
255 | container = await tsParticles.load(params.id, particlesOptions);
|
256 | }
|
257 | else if (params.canvas) {
|
258 | container = await tsParticles.set(params.id, params.canvas, particlesOptions);
|
259 | }
|
260 | ids.set(params.id, container);
|
261 | return container;
|
262 | }
|
263 | export async function confetti(idOrOptions, confettiOptions) {
|
264 | await initPlugins();
|
265 | let options;
|
266 | let id;
|
267 | if (typeof idOrOptions === "string") {
|
268 | id = idOrOptions;
|
269 | options = confettiOptions !== null && confettiOptions !== void 0 ? confettiOptions : {};
|
270 | }
|
271 | else {
|
272 | id = "confetti";
|
273 | options = idOrOptions;
|
274 | }
|
275 | return setConfetti({
|
276 | id,
|
277 | options,
|
278 | });
|
279 | }
|
280 | confetti.create = async (canvas, options) => {
|
281 | if (!canvas) {
|
282 | return confetti;
|
283 | }
|
284 | await initPlugins();
|
285 | const id = canvas.getAttribute("id") || "confetti";
|
286 | canvas.setAttribute("id", id);
|
287 | return async (idOrOptions, confettiOptions) => {
|
288 | let subOptions;
|
289 | let subId;
|
290 | if (typeof idOrOptions === "string") {
|
291 | subId = idOrOptions;
|
292 | subOptions = confettiOptions !== null && confettiOptions !== void 0 ? confettiOptions : options;
|
293 | }
|
294 | else {
|
295 | subId = id;
|
296 | subOptions = idOrOptions;
|
297 | }
|
298 | return setConfetti({
|
299 | id: subId,
|
300 | canvas,
|
301 | options: subOptions,
|
302 | });
|
303 | };
|
304 | };
|