@tsparticles/confetti 3.0.2 → 3.1.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,4 +1,4 @@
1
- import { deepExtend, isArray, } from "@tsparticles/engine";
1
+ import { deepExtend, isArray, percentDenominator, } from "@tsparticles/engine";
2
2
  export class ConfettiOptions {
3
3
  constructor() {
4
4
  this.angle = 90;
@@ -23,13 +23,13 @@ export class ConfettiOptions {
23
23
  }
24
24
  get origin() {
25
25
  return {
26
- x: this.position.x / 100,
27
- y: this.position.y / 100,
26
+ x: this.position.x / percentDenominator,
27
+ y: this.position.y / percentDenominator,
28
28
  };
29
29
  }
30
30
  set origin(value) {
31
- this.position.x = value.x * 100;
32
- this.position.y = value.y * 100;
31
+ this.position.x = value.x * percentDenominator;
32
+ this.position.y = value.y * percentDenominator;
33
33
  }
34
34
  get particleCount() {
35
35
  return this.count;
@@ -72,8 +72,8 @@ export class ConfettiOptions {
72
72
  const origin = data.origin;
73
73
  if (origin && !data.position) {
74
74
  data.position = {
75
- x: origin.x !== undefined ? origin.x * 100 : undefined,
76
- y: origin.y !== undefined ? origin.y * 100 : undefined,
75
+ x: origin.x !== undefined ? origin.x * percentDenominator : undefined,
76
+ y: origin.y !== undefined ? origin.y * percentDenominator : undefined,
77
77
  };
78
78
  }
79
79
  const position = data.position;
@@ -1,8 +1,8 @@
1
- import { isSsr, isString, tsParticles, } from "@tsparticles/engine";
1
+ import { isSsr, isString, millisecondsToSeconds, tsParticles, } from "@tsparticles/engine";
2
+ import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
2
3
  import { ConfettiOptions } from "./ConfettiOptions.js";
3
4
  import { loadBasic } from "@tsparticles/basic";
4
5
  import { loadCardsShape } from "@tsparticles/shape-cards";
5
- import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
6
6
  import { loadEmojiShape } from "@tsparticles/shape-emoji";
7
7
  import { loadHeartShape } from "@tsparticles/shape-heart";
8
8
  import { loadImageShape } from "@tsparticles/shape-image";
@@ -15,6 +15,7 @@ import { loadSquareShape } from "@tsparticles/shape-square";
15
15
  import { loadStarShape } from "@tsparticles/shape-star";
16
16
  import { loadTiltUpdater } from "@tsparticles/updater-tilt";
17
17
  import { loadWobbleUpdater } from "@tsparticles/updater-wobble";
18
+ const defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0;
18
19
  let initialized = false;
19
20
  let initializing = false;
20
21
  const ids = new Map();
@@ -24,13 +25,13 @@ async function initPlugins(engine) {
24
25
  }
25
26
  if (initializing) {
26
27
  return new Promise((resolve) => {
27
- const interval = setInterval(() => {
28
+ const timeout = 100, interval = setInterval(() => {
28
29
  if (!initialized) {
29
30
  return;
30
31
  }
31
32
  clearInterval(interval);
32
33
  resolve();
33
- }, 100);
34
+ }, timeout);
34
35
  });
35
36
  }
36
37
  initializing = true;
@@ -56,13 +57,13 @@ async function setConfetti(params) {
56
57
  const actualOptions = new ConfettiOptions();
57
58
  actualOptions.load(params.options);
58
59
  let container;
59
- const fpsLimit = 120, opacitySpeed = (actualOptions.ticks * 1000) / (3600 * fpsLimit);
60
+ const fpsLimit = 120, fpsLimitFactor = 3.6, opacitySpeed = (actualOptions.ticks * millisecondsToSeconds) / (fpsLimitFactor * millisecondsToSeconds * fpsLimit);
60
61
  if (ids.has(params.id)) {
61
62
  container = ids.get(params.id);
62
63
  if (container && !container.destroyed) {
63
64
  const alias = container;
64
65
  if (alias.addEmitter) {
65
- alias.addEmitter({
66
+ await alias.addEmitter({
66
67
  startCount: actualOptions.count,
67
68
  position: actualOptions.position,
68
69
  size: {
@@ -99,7 +100,7 @@ async function setConfetti(params) {
99
100
  },
100
101
  },
101
102
  size: {
102
- value: 5 * actualOptions.scalar,
103
+ value: sizeFactor * actualOptions.scalar,
103
104
  },
104
105
  move: {
105
106
  angle: {
@@ -111,10 +112,10 @@ async function setConfetti(params) {
111
112
  max: actualOptions.drift,
112
113
  },
113
114
  gravity: {
114
- acceleration: actualOptions.gravity * 9.81,
115
+ acceleration: actualOptions.gravity * defaultGravity,
115
116
  },
116
- speed: actualOptions.startVelocity * 3,
117
- decay: 1 - actualOptions.decay,
117
+ speed: actualOptions.startVelocity * speedFactor,
118
+ decay: decayOffset - actualOptions.decay,
118
119
  direction: -actualOptions.angle,
119
120
  },
120
121
  },
@@ -151,7 +152,7 @@ async function setConfetti(params) {
151
152
  },
152
153
  },
153
154
  size: {
154
- value: 5 * actualOptions.scalar,
155
+ value: sizeFactor * actualOptions.scalar,
155
156
  },
156
157
  links: {
157
158
  enable: false,
@@ -171,10 +172,10 @@ async function setConfetti(params) {
171
172
  enable: true,
172
173
  gravity: {
173
174
  enable: true,
174
- acceleration: actualOptions.gravity * 9.81,
175
+ acceleration: actualOptions.gravity * defaultGravity,
175
176
  },
176
- speed: actualOptions.startVelocity * 3,
177
- decay: 1 - actualOptions.decay,
177
+ speed: actualOptions.startVelocity * speedFactor,
178
+ decay: decayOffset - actualOptions.decay,
178
179
  direction: -actualOptions.angle,
179
180
  random: true,
180
181
  straight: false,
@@ -185,7 +186,7 @@ async function setConfetti(params) {
185
186
  },
186
187
  rotate: {
187
188
  value: actualOptions.flat
188
- ? 0
189
+ ? disableRotate
189
190
  : {
190
191
  min: 0,
191
192
  max: 360,
@@ -200,7 +201,7 @@ async function setConfetti(params) {
200
201
  direction: "random",
201
202
  enable: !actualOptions.flat,
202
203
  value: actualOptions.flat
203
- ? 0
204
+ ? disableTilt
204
205
  : {
205
206
  min: 0,
206
207
  max: 360,
@@ -278,7 +279,7 @@ confetti.create = async (canvas, options) => {
278
279
  return confetti;
279
280
  }
280
281
  await initPlugins(tsParticles);
281
- const id = canvas.getAttribute("id") || "confetti";
282
+ const id = canvas.getAttribute("id") ?? "confetti";
282
283
  canvas.setAttribute("id", id);
283
284
  return async (idOrOptions, confettiOptions) => {
284
285
  let subOptions;
@@ -26,13 +26,13 @@ class ConfettiOptions {
26
26
  }
27
27
  get origin() {
28
28
  return {
29
- x: this.position.x / 100,
30
- y: this.position.y / 100,
29
+ x: this.position.x / engine_1.percentDenominator,
30
+ y: this.position.y / engine_1.percentDenominator,
31
31
  };
32
32
  }
33
33
  set origin(value) {
34
- this.position.x = value.x * 100;
35
- this.position.y = value.y * 100;
34
+ this.position.x = value.x * engine_1.percentDenominator;
35
+ this.position.y = value.y * engine_1.percentDenominator;
36
36
  }
37
37
  get particleCount() {
38
38
  return this.count;
@@ -75,8 +75,8 @@ class ConfettiOptions {
75
75
  const origin = data.origin;
76
76
  if (origin && !data.position) {
77
77
  data.position = {
78
- x: origin.x !== undefined ? origin.x * 100 : undefined,
79
- y: origin.y !== undefined ? origin.y * 100 : undefined,
78
+ x: origin.x !== undefined ? origin.x * engine_1.percentDenominator : undefined,
79
+ y: origin.y !== undefined ? origin.y * engine_1.percentDenominator : undefined,
80
80
  };
81
81
  }
82
82
  const position = data.position;
package/cjs/confetti.js CHANGED
@@ -2,10 +2,10 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.confetti = void 0;
4
4
  const engine_1 = require("@tsparticles/engine");
5
+ const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
5
6
  const ConfettiOptions_js_1 = require("./ConfettiOptions.js");
6
7
  const basic_1 = require("@tsparticles/basic");
7
8
  const shape_cards_1 = require("@tsparticles/shape-cards");
8
- const plugin_emitters_1 = require("@tsparticles/plugin-emitters");
9
9
  const shape_emoji_1 = require("@tsparticles/shape-emoji");
10
10
  const shape_heart_1 = require("@tsparticles/shape-heart");
11
11
  const shape_image_1 = require("@tsparticles/shape-image");
@@ -18,6 +18,7 @@ const shape_square_1 = require("@tsparticles/shape-square");
18
18
  const shape_star_1 = require("@tsparticles/shape-star");
19
19
  const updater_tilt_1 = require("@tsparticles/updater-tilt");
20
20
  const updater_wobble_1 = require("@tsparticles/updater-wobble");
21
+ const defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0;
21
22
  let initialized = false;
22
23
  let initializing = false;
23
24
  const ids = new Map();
@@ -27,13 +28,13 @@ async function initPlugins(engine) {
27
28
  }
28
29
  if (initializing) {
29
30
  return new Promise((resolve) => {
30
- const interval = setInterval(() => {
31
+ const timeout = 100, interval = setInterval(() => {
31
32
  if (!initialized) {
32
33
  return;
33
34
  }
34
35
  clearInterval(interval);
35
36
  resolve();
36
- }, 100);
37
+ }, timeout);
37
38
  });
38
39
  }
39
40
  initializing = true;
@@ -59,13 +60,13 @@ async function setConfetti(params) {
59
60
  const actualOptions = new ConfettiOptions_js_1.ConfettiOptions();
60
61
  actualOptions.load(params.options);
61
62
  let container;
62
- const fpsLimit = 120, opacitySpeed = (actualOptions.ticks * 1000) / (3600 * fpsLimit);
63
+ const fpsLimit = 120, fpsLimitFactor = 3.6, opacitySpeed = (actualOptions.ticks * engine_1.millisecondsToSeconds) / (fpsLimitFactor * engine_1.millisecondsToSeconds * fpsLimit);
63
64
  if (ids.has(params.id)) {
64
65
  container = ids.get(params.id);
65
66
  if (container && !container.destroyed) {
66
67
  const alias = container;
67
68
  if (alias.addEmitter) {
68
- alias.addEmitter({
69
+ await alias.addEmitter({
69
70
  startCount: actualOptions.count,
70
71
  position: actualOptions.position,
71
72
  size: {
@@ -102,7 +103,7 @@ async function setConfetti(params) {
102
103
  },
103
104
  },
104
105
  size: {
105
- value: 5 * actualOptions.scalar,
106
+ value: sizeFactor * actualOptions.scalar,
106
107
  },
107
108
  move: {
108
109
  angle: {
@@ -114,10 +115,10 @@ async function setConfetti(params) {
114
115
  max: actualOptions.drift,
115
116
  },
116
117
  gravity: {
117
- acceleration: actualOptions.gravity * 9.81,
118
+ acceleration: actualOptions.gravity * defaultGravity,
118
119
  },
119
- speed: actualOptions.startVelocity * 3,
120
- decay: 1 - actualOptions.decay,
120
+ speed: actualOptions.startVelocity * speedFactor,
121
+ decay: decayOffset - actualOptions.decay,
121
122
  direction: -actualOptions.angle,
122
123
  },
123
124
  },
@@ -154,7 +155,7 @@ async function setConfetti(params) {
154
155
  },
155
156
  },
156
157
  size: {
157
- value: 5 * actualOptions.scalar,
158
+ value: sizeFactor * actualOptions.scalar,
158
159
  },
159
160
  links: {
160
161
  enable: false,
@@ -174,10 +175,10 @@ async function setConfetti(params) {
174
175
  enable: true,
175
176
  gravity: {
176
177
  enable: true,
177
- acceleration: actualOptions.gravity * 9.81,
178
+ acceleration: actualOptions.gravity * defaultGravity,
178
179
  },
179
- speed: actualOptions.startVelocity * 3,
180
- decay: 1 - actualOptions.decay,
180
+ speed: actualOptions.startVelocity * speedFactor,
181
+ decay: decayOffset - actualOptions.decay,
181
182
  direction: -actualOptions.angle,
182
183
  random: true,
183
184
  straight: false,
@@ -188,7 +189,7 @@ async function setConfetti(params) {
188
189
  },
189
190
  rotate: {
190
191
  value: actualOptions.flat
191
- ? 0
192
+ ? disableRotate
192
193
  : {
193
194
  min: 0,
194
195
  max: 360,
@@ -203,7 +204,7 @@ async function setConfetti(params) {
203
204
  direction: "random",
204
205
  enable: !actualOptions.flat,
205
206
  value: actualOptions.flat
206
- ? 0
207
+ ? disableTilt
207
208
  : {
208
209
  min: 0,
209
210
  max: 360,
@@ -282,7 +283,7 @@ confetti.create = async (canvas, options) => {
282
283
  return confetti;
283
284
  }
284
285
  await initPlugins(engine_1.tsParticles);
285
- const id = canvas.getAttribute("id") || "confetti";
286
+ const id = canvas.getAttribute("id") ?? "confetti";
286
287
  canvas.setAttribute("id", id);
287
288
  return async (idOrOptions, confettiOptions) => {
288
289
  let subOptions;
@@ -1,4 +1,4 @@
1
- import { deepExtend, isArray, } from "@tsparticles/engine";
1
+ import { deepExtend, isArray, percentDenominator, } from "@tsparticles/engine";
2
2
  export class ConfettiOptions {
3
3
  constructor() {
4
4
  this.angle = 90;
@@ -23,13 +23,13 @@ export class ConfettiOptions {
23
23
  }
24
24
  get origin() {
25
25
  return {
26
- x: this.position.x / 100,
27
- y: this.position.y / 100,
26
+ x: this.position.x / percentDenominator,
27
+ y: this.position.y / percentDenominator,
28
28
  };
29
29
  }
30
30
  set origin(value) {
31
- this.position.x = value.x * 100;
32
- this.position.y = value.y * 100;
31
+ this.position.x = value.x * percentDenominator;
32
+ this.position.y = value.y * percentDenominator;
33
33
  }
34
34
  get particleCount() {
35
35
  return this.count;
@@ -72,8 +72,8 @@ export class ConfettiOptions {
72
72
  const origin = data.origin;
73
73
  if (origin && !data.position) {
74
74
  data.position = {
75
- x: origin.x !== undefined ? origin.x * 100 : undefined,
76
- y: origin.y !== undefined ? origin.y * 100 : undefined,
75
+ x: origin.x !== undefined ? origin.x * percentDenominator : undefined,
76
+ y: origin.y !== undefined ? origin.y * percentDenominator : undefined,
77
77
  };
78
78
  }
79
79
  const position = data.position;
package/esm/confetti.js CHANGED
@@ -1,8 +1,8 @@
1
- import { isSsr, isString, tsParticles, } from "@tsparticles/engine";
1
+ import { isSsr, isString, millisecondsToSeconds, tsParticles, } from "@tsparticles/engine";
2
+ import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
2
3
  import { ConfettiOptions } from "./ConfettiOptions.js";
3
4
  import { loadBasic } from "@tsparticles/basic";
4
5
  import { loadCardsShape } from "@tsparticles/shape-cards";
5
- import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
6
6
  import { loadEmojiShape } from "@tsparticles/shape-emoji";
7
7
  import { loadHeartShape } from "@tsparticles/shape-heart";
8
8
  import { loadImageShape } from "@tsparticles/shape-image";
@@ -15,6 +15,7 @@ import { loadSquareShape } from "@tsparticles/shape-square";
15
15
  import { loadStarShape } from "@tsparticles/shape-star";
16
16
  import { loadTiltUpdater } from "@tsparticles/updater-tilt";
17
17
  import { loadWobbleUpdater } from "@tsparticles/updater-wobble";
18
+ const defaultGravity = 9.81, sizeFactor = 5, speedFactor = 3, decayOffset = 1, disableRotate = 0, disableTilt = 0;
18
19
  let initialized = false;
19
20
  let initializing = false;
20
21
  const ids = new Map();
@@ -24,13 +25,13 @@ async function initPlugins(engine) {
24
25
  }
25
26
  if (initializing) {
26
27
  return new Promise((resolve) => {
27
- const interval = setInterval(() => {
28
+ const timeout = 100, interval = setInterval(() => {
28
29
  if (!initialized) {
29
30
  return;
30
31
  }
31
32
  clearInterval(interval);
32
33
  resolve();
33
- }, 100);
34
+ }, timeout);
34
35
  });
35
36
  }
36
37
  initializing = true;
@@ -56,13 +57,13 @@ async function setConfetti(params) {
56
57
  const actualOptions = new ConfettiOptions();
57
58
  actualOptions.load(params.options);
58
59
  let container;
59
- const fpsLimit = 120, opacitySpeed = (actualOptions.ticks * 1000) / (3600 * fpsLimit);
60
+ const fpsLimit = 120, fpsLimitFactor = 3.6, opacitySpeed = (actualOptions.ticks * millisecondsToSeconds) / (fpsLimitFactor * millisecondsToSeconds * fpsLimit);
60
61
  if (ids.has(params.id)) {
61
62
  container = ids.get(params.id);
62
63
  if (container && !container.destroyed) {
63
64
  const alias = container;
64
65
  if (alias.addEmitter) {
65
- alias.addEmitter({
66
+ await alias.addEmitter({
66
67
  startCount: actualOptions.count,
67
68
  position: actualOptions.position,
68
69
  size: {
@@ -99,7 +100,7 @@ async function setConfetti(params) {
99
100
  },
100
101
  },
101
102
  size: {
102
- value: 5 * actualOptions.scalar,
103
+ value: sizeFactor * actualOptions.scalar,
103
104
  },
104
105
  move: {
105
106
  angle: {
@@ -111,10 +112,10 @@ async function setConfetti(params) {
111
112
  max: actualOptions.drift,
112
113
  },
113
114
  gravity: {
114
- acceleration: actualOptions.gravity * 9.81,
115
+ acceleration: actualOptions.gravity * defaultGravity,
115
116
  },
116
- speed: actualOptions.startVelocity * 3,
117
- decay: 1 - actualOptions.decay,
117
+ speed: actualOptions.startVelocity * speedFactor,
118
+ decay: decayOffset - actualOptions.decay,
118
119
  direction: -actualOptions.angle,
119
120
  },
120
121
  },
@@ -151,7 +152,7 @@ async function setConfetti(params) {
151
152
  },
152
153
  },
153
154
  size: {
154
- value: 5 * actualOptions.scalar,
155
+ value: sizeFactor * actualOptions.scalar,
155
156
  },
156
157
  links: {
157
158
  enable: false,
@@ -171,10 +172,10 @@ async function setConfetti(params) {
171
172
  enable: true,
172
173
  gravity: {
173
174
  enable: true,
174
- acceleration: actualOptions.gravity * 9.81,
175
+ acceleration: actualOptions.gravity * defaultGravity,
175
176
  },
176
- speed: actualOptions.startVelocity * 3,
177
- decay: 1 - actualOptions.decay,
177
+ speed: actualOptions.startVelocity * speedFactor,
178
+ decay: decayOffset - actualOptions.decay,
178
179
  direction: -actualOptions.angle,
179
180
  random: true,
180
181
  straight: false,
@@ -185,7 +186,7 @@ async function setConfetti(params) {
185
186
  },
186
187
  rotate: {
187
188
  value: actualOptions.flat
188
- ? 0
189
+ ? disableRotate
189
190
  : {
190
191
  min: 0,
191
192
  max: 360,
@@ -200,7 +201,7 @@ async function setConfetti(params) {
200
201
  direction: "random",
201
202
  enable: !actualOptions.flat,
202
203
  value: actualOptions.flat
203
- ? 0
204
+ ? disableTilt
204
205
  : {
205
206
  min: 0,
206
207
  max: 360,
@@ -278,7 +279,7 @@ confetti.create = async (canvas, options) => {
278
279
  return confetti;
279
280
  }
280
281
  await initPlugins(tsParticles);
281
- const id = canvas.getAttribute("id") || "confetti";
282
+ const id = canvas.getAttribute("id") ?? "confetti";
282
283
  canvas.setAttribute("id", id);
283
284
  return async (idOrOptions, confettiOptions) => {
284
285
  let subOptions;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/confetti",
3
- "version": "3.0.2",
3
+ "version": "3.1.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,22 +99,22 @@
99
99
  "./package.json": "./package.json"
100
100
  },
101
101
  "dependencies": {
102
- "@tsparticles/basic": "^3.0.2",
103
- "@tsparticles/engine": "^3.0.2",
104
- "@tsparticles/plugin-emitters": "^3.0.2",
105
- "@tsparticles/plugin-motion": "^3.0.2",
106
- "@tsparticles/shape-cards": "^3.0.2",
107
- "@tsparticles/shape-emoji": "^3.0.2",
108
- "@tsparticles/shape-heart": "^3.0.2",
109
- "@tsparticles/shape-image": "^3.0.2",
110
- "@tsparticles/shape-polygon": "^3.0.2",
111
- "@tsparticles/shape-square": "^3.0.2",
112
- "@tsparticles/shape-star": "^3.0.2",
113
- "@tsparticles/updater-life": "^3.0.2",
114
- "@tsparticles/updater-roll": "^3.0.2",
115
- "@tsparticles/updater-rotate": "^3.0.2",
116
- "@tsparticles/updater-tilt": "^3.0.2",
117
- "@tsparticles/updater-wobble": "^3.0.2"
102
+ "@tsparticles/basic": "^3.1.0",
103
+ "@tsparticles/engine": "^3.1.0",
104
+ "@tsparticles/plugin-emitters": "^3.1.0",
105
+ "@tsparticles/plugin-motion": "^3.1.0",
106
+ "@tsparticles/shape-cards": "^3.1.0",
107
+ "@tsparticles/shape-emoji": "^3.1.0",
108
+ "@tsparticles/shape-heart": "^3.1.0",
109
+ "@tsparticles/shape-image": "^3.1.0",
110
+ "@tsparticles/shape-polygon": "^3.1.0",
111
+ "@tsparticles/shape-square": "^3.1.0",
112
+ "@tsparticles/shape-star": "^3.1.0",
113
+ "@tsparticles/updater-life": "^3.1.0",
114
+ "@tsparticles/updater-roll": "^3.1.0",
115
+ "@tsparticles/updater-rotate": "^3.1.0",
116
+ "@tsparticles/updater-tilt": "^3.1.0",
117
+ "@tsparticles/updater-wobble": "^3.1.0"
118
118
  },
119
119
  "publishConfig": {
120
120
  "access": "public"