@castlenine/svelte-canvas-confetti 0.1.0 → 1.1.0

package/{LICENSE → LICENSE.md}

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright (c) 2024 Alexandre "Castlenine"
+Copyright (c) 2024–present Alex "Castlenine"
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,16 +2,16 @@
 
 # `@castlenine/svelte-canvas-confetti`
 
-[![npm.badge]][npm] [![download.badge]][download]
+[![npm.badge]][npm] [![download.badge]][download] [![contribution.badge]][contribution]
 
-Canvas-based confetti for Svelte 🎉, without dependencies
+Canvas-based confetti for Svelte 🎉, with no dependencies.
 </div>
 
 ## Features
 
 * Uses a single canvas to render full-screen confetti.
 * Supports image-based confetti.
-* Allows full customization of confetti behavior using `onCreate` and `onUpdate` hooks.
+* Allows full customization of confetti behavior using the `onCreate` and `onUpdate` hooks.
 
 ## Examples
 
@@ -21,9 +21,11 @@ Canvas-based confetti for Svelte 🎉, without dependencies
 
 [Advanced Demo](https://svelte.dev/repl/5cefe21763c445d986c6e23ddea1327a?version=3.50.1)
 
-## Installing
+## Installation
 
-```bash
+Use your package manager to install:
+
+```shell
 npm i @castlenine/svelte-canvas-confetti
 ```
 
@@ -45,7 +47,7 @@ Adds confetti falling from the top of the screen.
 
 ### ConfettiBurst
 
-Adds a confetti burst anywhere on the screen. It requires an origin position.
+Adds a confetti burst anywhere on the screen. Requires an origin position.
 
 ```svelte
 <script>
@@ -57,7 +59,7 @@ Adds a confetti burst anywhere on the screen. It requires an origin position.
 
 ### ConfettiCannon
 
-Adds a confetti cannon that can shoot out directional confetti. It requires an origin position.
+Adds a confetti cannon that can shoot directional confetti. Requires an origin position.
 
 ```svelte
 <script>
@@ -69,9 +71,9 @@ Adds a confetti cannon that can shoot out directional confetti. It requires an o
 
 ### Confetti
 
-Adds any type of confetti. This is the main component that the other three are just simple wrappers around.
+Adds any type of confetti. This is the main component, and the other three are simple wrappers around it.
 
-If no properties are passed in, it will create the same result as **FallingConfetti**.
+If no properties are passed in, it will behave the same as **FallingConfetti**.
 
 ```svelte
 <script>
@@ -85,7 +87,7 @@ If no properties are passed in, it will create the same result as **FallingConfe
 
 ### particleCount
 
-Number of particles to create.
+The number of particles to create.
 
 **Type:** `number`
 **Default value:** `50`
@@ -97,10 +99,10 @@ Number of particles to create.
 
 ### styles
 
-A list of styles used to render particles. Can be any valid HTML color or an HTMLImageElement.
+A list of styles used to render particles. Can be any valid HTML color or an `HTMLImageElement`.
 
-**Type:** `Array<string | HTMLImageElement>`
-**Default value:** `['hotpink','gold','dodgerblue','tomato','rebeccapurple','lightgreen','turquoise']`
+**Type:** `ParticleStyle[]`
+**Default value:** `['hotpink', 'gold', 'dodgerblue', 'tomato', 'rebeccapurple', 'lightgreen', 'turquoise']`
 **Example:**
 
 ```svelte
@@ -109,9 +111,9 @@ A list of styles used to render particles. Can be any valid HTML color or an HTM
 
 ### origin
 
-The origin of the particles. If this is not used, the particles will fall from the top of the screen.
+The origin of the particles. If this is not provided, the particles will fall from the top of the screen.
 
-**Type:** `[number, number]`
+**Type:** `Position`
 **Default value:** `undefined`
 **Example:**
 
@@ -133,7 +135,7 @@ The initial force used to shoot out confetti. This has no effect if `origin` is
 
 ### angle
 
-The angle used to shoot out confetti. This has no effect if `origin` is not used. It can be combined with `spread` to create a "cannon".
+The angle used to shoot out confetti. This has no effect if `origin` is not used. Can be combined with `spread` to create a "cannon" effect.
 
 **Type:** `number`
 **Default value:** 0
@@ -145,7 +147,7 @@ The angle used to shoot out confetti. This has no effect if `origin` is not used
 
 ### spread
 
-The spread used when creating each particles initial direction. The particle's initial direction will be a value between `angle - spread / 2` and `angle + spread / 2`. This has no effect if `origin` is not used.
+The spread used when creating each particle’s initial direction. The particle's initial direction will be a value between `angle - spread / 2` and `angle + spread / 2`. This has no effect if `origin` is not used.
 
 **Type:** `number`
 **Default value:** 360
@@ -160,7 +162,7 @@ The spread used when creating each particles initial direction. The particle's i
 This can be used to override the properties of each particle at creation time.
 
 **Type:** `(particle) => particle`
-**Default value:** undefined
+**Default value:** `undefined`
 **Example:**
 
 ```svelte
@@ -178,12 +180,12 @@ This can be used to override the properties of each particle at creation time.
 This can be used to override the properties of each particle at update time.
 
 **Type:** `(particle, deltaTime) => void`
-**Default value:** undefined
+**Default value:** `undefined`
 **Example:**
 
 ```svelte
 <Confetti
-  onCreate={(particle) => {
+  onUpdate={(particle) => {
     particle.x += Math.random() * 5;
   }}
 />
@@ -193,7 +195,7 @@ This can be used to override the properties of each particle at update time.
 
 ```typescript
 export type Particle = {
-  // Stop updating/rendering the particle once it is "dead" (ie off screen)
+  // Stop updating/rendering the particle once it is "dead" (i.e., off screen)
   dead: boolean;
 
   // The total time since the particle was created.
@@ -229,7 +231,7 @@ export type Particle = {
   // Vertical gravity.
   gy: number;
 
-  // The "width" of the falling motion. The falling motion is calculated as Math.sin(life * xw)
+  // The "width" of the falling motion. The falling motion is calculated as Math.sin(life * xw).
   xw: number;
 
   // The style of the particle. Either an HTML color or an HTMLImageElement.
@@ -237,6 +239,22 @@ export type Particle = {
 };
 ```
 
+## Exported Types
+
+The following types are exported from the package:
+
+```typescript
+import type { Particle, ParticleStyle, Position, OnCreateParticle, OnUpdateParticle } from '@castlenine/svelte-canvas-confetti';
+```
+
+| Type | Description |
+| --- | --- |
+| `Particle` | The particle object used in `onCreate` and `onUpdate` callbacks. |
+| `ParticleStyle` | `string \| HTMLImageElement` — a valid HTML color or an image element. |
+| `Position` | `[number, number]` — an `[x, y]` coordinate tuple. |
+| `OnCreateParticle` | `(p: Particle) => Particle` — callback to customize particles at creation. |
+| `OnUpdateParticle` | `(p: Particle, dt: number) => void` — callback to modify particles each frame. |
+
 ---
 
 Forked from [andreasmcdermott/svelte-canvas-confetti](https://github.com/andreasmcdermott/svelte-canvas-confetti)
@@ -245,3 +263,5 @@ Forked from [andreasmcdermott/svelte-canvas-confetti](https://github.com/andreas
 [npm.badge]: https://img.shields.io/npm/v/@castlenine/svelte-canvas-confetti
 [download]: https://www.npmjs.com/package/@castlenine/svelte-canvas-confetti
 [download.badge]: https://img.shields.io/npm/d18m/@castlenine/svelte-canvas-confetti
+[contribution]: https://github.com/Castlenine/svelte-aoe
+[contribution.badge]: https://img.shields.io/badge/contributions-welcome-green

package/dist/Confetti.svelte

@@ -3,10 +3,14 @@ import { createParticle, isOutOfBounds, renderParticle, updateParticle } from ".
 const renderParticles = (context, particles) => {
     context.clearRect(0, 0, context.canvas.width, context.canvas.height);
     for (let i = 0; i < particles.length; ++i) {
-        renderParticle(context, particles[i]);
+        const P = particles[i];
+        if (!P.dead && P.life >= P.delay)
+            renderParticle(context, P);
     }
 };
 const updateParticles = (context, particles, dt, onUpdate) => {
+    const CW = context.canvas.width;
+    const CH = context.canvas.height;
     let livingParticles = particles.length;
     for (let i = 0; i < particles.length; ++i) {
         const P = particles[i];
@@ -15,7 +19,7 @@ const updateParticles = (context, particles, dt, onUpdate) => {
         }
         else {
             updateParticle(P, dt);
-            if (isOutOfBounds(context, P))
+            if (isOutOfBounds(P, CW, CH))
                 P.dead = true;
             if (onUpdate)
                 onUpdate(P, dt);
@@ -32,7 +36,8 @@ const start = (canvas, onCompleted, particleCount, origin, force, angle, spread,
     let t;
     const run = (_t) => {
         renderParticles(CONTEXT, PARTICLES);
-        const STILL_RUNNING = updateParticles(CONTEXT, PARTICLES, (_t - t) / 1e3, onUpdate);
+        const DT = Math.min((_t - t) / 1e3, 0.1);
+        const STILL_RUNNING = updateParticles(CONTEXT, PARTICLES, DT, onUpdate);
         if (STILL_RUNNING) {
             t = _t;
             frameId = requestAnimationFrame(run);

package/dist/Confetti.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Confetti.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/Confetti.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAY,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA2Q5G,QAAA,MAAM,SAAS;;QA7Ef;;;;;;;;eAQI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI,UAAS,QAAQ,GAAG,SAAS;QACjC;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACY,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Confetti.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Confetti.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAY,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA+Q5G,QAAA,MAAM,SAAS;;QA7Ef;;;;;;;;eAQI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI,UAAS,QAAQ,GAAG,SAAS;QACjC;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACc,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/ConfettiBurst.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfettiBurst.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ConfettiBurst.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA8HjG,QAAA,MAAM,SAAS;;QArDf;;;;;;;eAOI;QACJ;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACY,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}
+{"version":3,"file":"ConfettiBurst.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ConfettiBurst.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA8HjG,QAAA,MAAM,SAAS;;QArDf;;;;;;;eAOI;QACJ;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACc,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/ConfettiCannon.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfettiCannon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ConfettiCannon.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAiLjG,QAAA,MAAM,SAAS;;QA7Ef;;;;;;;eAOI;QACJ;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACY,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}
+{"version":3,"file":"ConfettiCannon.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ConfettiCannon.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAiLjG,QAAA,MAAM,SAAS;;QA7Ef;;;;;;;eAOI;QACJ;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACc,CAAC;AAC1D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/FallingConfetti.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FallingConfetti.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/FallingConfetti.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AA6GvF,QAAA,MAAM,SAAS;;QA7Cf;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACY,CAAC;AACxD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"FallingConfetti.svelte.d.ts","sourceRoot":"","sources":["../src/lib/FallingConfetti.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AA6GvF,QAAA,MAAM,SAAS;;QA7Cf;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACc,CAAC;AAC1D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { Particle, OnCreateParticle, OnUpdateParticle } from './utils/types';
+export type { Particle, ParticleStyle, Position, OnCreateParticle, OnUpdateParticle } from './utils/types';
 export { default as FallingConfetti } from './FallingConfetti.svelte';
 export { default as ConfettiBurst } from './ConfettiBurst.svelte';
 export { default as ConfettiCannon } from './ConfettiCannon.svelte';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE3G,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,cAAc,gBAAgB,CAAC"}

package/dist/utils/constants.d.ts

@@ -1,6 +1,6 @@
-export declare const DEG_TO_RAD: number;
-export declare const ROTATION_SPEED = 2;
-export declare const MOVEMENT_SPEED = 1;
-export declare const BOUNDARY = 20;
-export declare const COLORS: string[];
+declare const DEG_TO_RAD: number;
+declare const ROTATION_SPEED = 2;
+declare const BOUNDARY = 20;
+declare const COLORS: string[];
+export { DEG_TO_RAD, ROTATION_SPEED, BOUNDARY, COLORS };
 //# sourceMappingURL=constants.d.ts.map

package/dist/utils/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,QAAgB,CAAC;AAExC,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,eAAO,MAAM,MAAM,UAA0F,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/lib/utils/constants.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,UAAU,QAAgB,CAAC;AACjC,QAAA,MAAM,cAAc,IAAI,CAAC;AACzB,QAAA,MAAM,QAAQ,KAAK,CAAC;AACpB,QAAA,MAAM,MAAM,UAA0F,CAAC;AAEvG,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC"}

package/dist/utils/constants.js

@@ -1,5 +1,5 @@
-export const DEG_TO_RAD = Math.PI / 180;
-export const ROTATION_SPEED = 2;
-export const MOVEMENT_SPEED = 1;
-export const BOUNDARY = 20;
-export const COLORS = ['hotpink', 'gold', 'dodgerblue', 'tomato', 'rebeccapurple', 'lightgreen', 'turquoise'];
+const DEG_TO_RAD = Math.PI / 180;
+const ROTATION_SPEED = 2;
+const BOUNDARY = 20;
+const COLORS = ['hotpink', 'gold', 'dodgerblue', 'tomato', 'rebeccapurple', 'lightgreen', 'turquoise'];
+export { DEG_TO_RAD, ROTATION_SPEED, BOUNDARY, COLORS };

package/dist/utils/particle.d.ts

@@ -1,6 +1,7 @@
-import type { OnCreateParticle, Particle, Position } from './types';
-export declare const createParticle: (context: CanvasRenderingContext2D, origin: Position | undefined, force: number, angle: number, spread: number, styles: (HTMLImageElement | string)[], onCreate?: OnCreateParticle) => Particle;
-export declare const renderParticle: (context: CanvasRenderingContext2D, p: Particle) => void;
-export declare const updateParticle: (p: Particle, dt: number) => void;
-export declare const isOutOfBounds: (context: CanvasRenderingContext2D, p: Particle) => boolean;
+import type { OnCreateParticle, Particle, ParticleStyle, Position } from './types';
+declare const createParticle: (context: CanvasRenderingContext2D, origin: Position | undefined, force: number, angle: number, spread: number, styles: ParticleStyle[], onCreate?: OnCreateParticle) => Particle;
+declare const renderParticle: (context: CanvasRenderingContext2D, p: Particle) => void;
+declare const updateParticle: (p: Particle, dt: number) => void;
+declare const isOutOfBounds: (p: Particle, canvasWidth: number, canvasHeight: number) => boolean;
+export { createParticle, renderParticle, updateParticle, isOutOfBounds };
 //# sourceMappingURL=particle.d.ts.map

package/dist/utils/particle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"particle.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/particle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKpE,eAAO,MAAM,cAAc,YACjB,wBAAwB,UACzB,QAAQ,GAAG,SAAS,SACrB,MAAM,SACN,MAAM,UACL,MAAM,UACN,CAAC,gBAAgB,GAAG,MAAM,CAAC,EAAE,aAC1B,gBAAgB,aAqD3B,CAAC;AAEF,eAAO,MAAM,cAAc,YAAa,wBAAwB,KAAK,QAAQ,SAc5E,CAAC;AAEF,eAAO,MAAM,cAAc,MAAO,QAAQ,MAAM,MAAM,SAUrD,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,wBAAwB,KAAK,QAAQ,YACuB,CAAC"}
+{"version":3,"file":"particle.d.ts","sourceRoot":"","sources":["../../src/lib/utils/particle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKnF,QAAA,MAAM,cAAc,YACV,wBAAwB,UACzB,QAAQ,GAAG,SAAS,SACrB,MAAM,SACN,MAAM,UACL,MAAM,UACN,aAAa,EAAE,aACZ,gBAAgB,aAiD3B,CAAC;AAEF,QAAA,MAAM,cAAc,YAAa,wBAAwB,KAAK,QAAQ,SAYrE,CAAC;AAEF,QAAA,MAAM,cAAc,MAAO,QAAQ,MAAM,MAAM,SAY9C,CAAC;AAEF,QAAA,MAAM,aAAa,MAAO,QAAQ,eAAe,MAAM,gBAAgB,MAAM,YAE5E,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC"}

package/dist/utils/particle.js

@@ -1,17 +1,15 @@
-import { BOUNDARY, DEG_TO_RAD, MOVEMENT_SPEED, ROTATION_SPEED } from './constants';
+import { BOUNDARY, DEG_TO_RAD, ROTATION_SPEED } from './constants';
 import { random } from './random';
-export const createParticle = (context, origin, force, angle, spread, styles, onCreate) => {
+const createParticle = (context, origin, force, angle, spread, styles, onCreate) => {
     let dir;
     let x;
     let y;
     let vx;
     let vy;
-    let dx;
-    let dy;
-    const style = styles[Math.floor(random(styles.length))];
+    const STYLE = styles[Math.floor(random(styles.length))];
     let da = random(90, -90);
     if (origin) {
-        // When we have an origin, we create a confetti burst
+        // Generate a confetti burst effect using the provided origin coordinates
         x = origin[0];
         y = origin[1];
         vx = random(force, 5);
@@ -20,17 +18,15 @@ export const createParticle = (context, origin, force, angle, spread, styles, on
         da *= 2;
     }
     else {
-        // Otherwise we drop confetti from the top of the screen
+        // If no origin is provided, confetti falls from the top edge of the canvas
         x = random(context.canvas.width);
         y = random(-BOUNDARY);
         vx = random(5);
         vy = random(5, 1);
         dir = random(180) * DEG_TO_RAD;
     }
-    // eslint-disable-next-line prefer-const
-    dx = Math.cos(dir);
-    // eslint-disable-next-line prefer-const
-    dy = Math.sin(dir);
+    const DX = Math.cos(dir);
+    const DY = Math.sin(dir);
     let particle = {
         dead: false,
         life: 0,
@@ -39,45 +35,47 @@ export const createParticle = (context, origin, force, angle, spread, styles, on
         y,
         angle: random(360),
         da,
-        dx: dx * vx,
-        dy: dy * vy,
+        dx: DX * vx,
+        dy: DY * vy,
         w: random(18, 10),
         h: random(6, 4),
         gy: random(4.5, 2),
         xw: random(6, 1),
-        style,
+        style: STYLE,
     };
     if (onCreate)
         particle = onCreate(particle);
     return particle;
 };
-export const renderParticle = (context, p) => {
-    if (p.dead || p.life < p.delay)
-        return;
-    context.save();
-    context.translate(p.x, p.y);
-    context.rotate(p.angle * DEG_TO_RAD);
+const renderParticle = (context, p) => {
+    const ANGLE_IN_RADIANS = p.angle * DEG_TO_RAD;
+    const COS = Math.cos(ANGLE_IN_RADIANS);
+    const SIN = Math.sin(ANGLE_IN_RADIANS);
+    context.setTransform(COS, SIN, -SIN, COS, p.x, p.y);
     if (p.style instanceof HTMLImageElement) {
         context.drawImage(p.style, -p.style.width / 2, -p.style.height / 2);
     }
     else {
         context.fillStyle = p.style;
-        context.beginPath();
-        context.rect(p.w * -0.5, p.h * -0.5, p.w, p.h);
-        context.fill();
+        context.fillRect(p.w * -0.5, p.h * -0.5, p.w, p.h);
     }
-    context.restore();
+    context.setTransform(1, 0, 0, 1, 0, 0);
 };
-export const updateParticle = (p, dt) => {
+const updateParticle = (p, dt) => {
     p.life += dt;
     if (p.dead || p.life < p.delay)
         return;
+    const FRAME_SCALE = dt * 60;
     p.angle += p.da * dt * ROTATION_SPEED;
     p.dy += p.gy * dt * ROTATION_SPEED;
-    p.dx += random(4, 2) * Math.sin(p.life * p.xw) * dt;
-    p.dx *= 0.98;
-    p.dy *= 0.98;
-    p.x += p.dx * MOVEMENT_SPEED;
-    p.y += p.dy * MOVEMENT_SPEED;
+    p.dx += (3 * Math.sin(p.life * p.xw) + Math.sin(p.life * p.xw * 2.3)) * dt;
+    const DRAG = Math.pow(0.98, FRAME_SCALE);
+    p.dx *= DRAG;
+    p.dy *= DRAG;
+    p.x += p.dx * FRAME_SCALE;
+    p.y += p.dy * FRAME_SCALE;
+};
+const isOutOfBounds = (p, canvasWidth, canvasHeight) => {
+    return p.x < -BOUNDARY || p.x > canvasWidth + BOUNDARY || p.y > canvasHeight + BOUNDARY;
 };
-export const isOutOfBounds = (context, p) => p.x < -BOUNDARY || p.x > context.canvas.width + BOUNDARY || p.y > context.canvas.height + BOUNDARY;
+export { createParticle, renderParticle, updateParticle, isOutOfBounds };

package/dist/utils/random.d.ts

@@ -1,3 +1,4 @@
-export declare const random: (max: number, min?: number) => number;
-export declare const coinFlip: () => boolean;
+declare const random: (max: number, min?: number) => number;
+declare const coinFlip: () => boolean;
+export { random, coinFlip };
 //# sourceMappingURL=random.d.ts.map

package/dist/utils/random.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"random.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/random.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,QAAS,MAAM,yBAA+C,CAAC;AAElF,eAAO,MAAM,QAAQ,eAA6B,CAAC"}
+{"version":3,"file":"random.d.ts","sourceRoot":"","sources":["../../src/lib/utils/random.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,MAAM,QAAS,MAAM,yBAA+C,CAAC;AAE3E,QAAA,MAAM,QAAQ,eAA6B,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC"}

package/dist/utils/random.js

@@ -1,2 +1,3 @@
-export const random = (max, min = 0) => Math.random() * (max - min) + min;
-export const coinFlip = () => Math.random() >= 0.5;
+const random = (max, min = 0) => Math.random() * (max - min) + min;
+const coinFlip = () => Math.random() >= 0.5;
+export { random, coinFlip };

package/dist/utils/types.d.ts

@@ -1,6 +1,6 @@
-export type ParticleStyle = string | HTMLImageElement;
-export type Position = [number, number];
-export type Particle = {
+type ParticleStyle = string | HTMLImageElement;
+type Position = [number, number];
+type Particle = {
     dead: boolean;
     life: number;
     delay: number;
@@ -16,6 +16,7 @@ export type Particle = {
     xw: number;
     style: ParticleStyle;
 };
-export type OnCreateParticle = (p: Particle) => Particle;
-export type OnUpdateParticle = (p: Particle, dt: number) => void;
+type OnCreateParticle = (p: Particle) => Particle;
+type OnUpdateParticle = (p: Particle, dt: number) => void;
+export type { ParticleStyle, Position, Particle, OnCreateParticle, OnUpdateParticle };
 //# sourceMappingURL=types.d.ts.map

package/dist/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,gBAAgB,CAAC;AAEtD,MAAM,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAExC,MAAM,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/utils/types.ts"],"names":[],"mappings":"AAAA,KAAK,aAAa,GAAG,MAAM,GAAG,gBAAgB,CAAC;AAE/C,KAAK,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEjC,KAAK,QAAQ,GAAG;IACf,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,KAAK,gBAAgB,GAAG,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC;AAElD,KAAK,gBAAgB,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;AAE1D,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@castlenine/svelte-canvas-confetti",
-	"version": "0.1.0",
-	"description": "Canvas-based confetti for Svelte, without dependencies",
+	"version": "1.1.0",
+	"description": "Canvas-based confetti for Svelte, with no dependencies",
 	"license": "MIT",
 	"keywords": [
 		"svelte",
@@ -10,7 +10,7 @@
 		"canvas"
 	],
 	"author": {
-		"name": "Alexandre Castlenine",
+		"name": "Alex Castlenine",
 		"url": "https://github.com/Castlenine"
 	},
 	"homepage": "https://github.com/castlenine/svelte-canvas-confetti",
@@ -28,8 +28,9 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
 			"import": "./dist/index.js",
-			"svelte": "./dist/index.js"
+			"default": "./dist/index.js"
 		}
 	},
 	"files": [
@@ -40,7 +41,7 @@
 		"build": "npm run check && vite build",
 		"preview": "vite preview",
 		"package": "npm run remove-dist-folder && svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
+		"prepublish-only": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"eslint": "eslint --ignore-path ./.eslintignore .",
@@ -58,26 +59,26 @@
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.30.4",
-		"@sveltejs/package": "^2.3.1",
-		"@typescript-eslint/eslint-plugin": "^7.8.0",
-		"@typescript-eslint/parser": "^7.8.0",
-		"eslint": "^8.57.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-import-resolver-typescript": "^3.6.1",
-		"eslint-plugin-html": "^8.1.1",
-		"eslint-plugin-import": "^2.29.1",
+		"@sveltejs/package": "^2.5.8",
+		"@typescript-eslint/eslint-plugin": "^7.18.0",
+		"@typescript-eslint/parser": "^7.18.0",
+		"eslint": "^8.57.1",
+		"eslint-config-prettier": "^9.1.2",
+		"eslint-import-resolver-typescript": "^3.10.1",
+		"eslint-plugin-html": "^8.1.4",
+		"eslint-plugin-import": "^2.32.0",
 		"eslint-plugin-no-loops": "^0.3.0",
-		"eslint-plugin-only-warn": "^1.1.0",
-		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-only-warn": "^1.2.1",
+		"eslint-plugin-prettier": "^5.5.6",
 		"eslint-plugin-security": "^1.7.1",
-		"eslint-plugin-svelte": "^2.38.0",
-		"prettier": "^3.2.5",
-		"prettier-eslint": "^16.3.0",
+		"eslint-plugin-svelte": "^2.46.1",
+		"prettier": "^3.8.3",
+		"prettier-eslint": "^16.4.2",
 		"prettier-eslint-cli": "^8.0.1",
-		"prettier-plugin-svelte": "^3.2.3",
+		"prettier-plugin-svelte": "^3.5.2",
 		"prettier-stylelint": "^0.4.2",
-		"publint": "^0.2.7",
-		"rimraf": "^5.0.5",
+		"publint": "^0.3.21",
+		"rimraf": "^6.1.3",
 		"stylelint": "^15.11.0",
 		"stylelint-config-html": "^1.1.0",
 		"stylelint-config-standard": "^34.0.0",
@@ -85,12 +86,12 @@
 		"stylelint-order": "^6.0.4",
 		"stylelint-scss": "^5.3.2",
 		"stylelint-selector-bem-pattern": "^3.0.1",
-		"svelte": "^4.2.15",
-		"svelte-check": "^3.7.1",
-		"svelte-eslint-parser": "^0.35.0",
+		"svelte": "^4.2.20",
+		"svelte-check": "^3.8.6",
+		"svelte-eslint-parser": "^0.43.0",
 		"svelte-preprocess": "^5.1.4",
-		"tslib": "^2.6.2",
-		"typescript": "^5.4.5",
-		"vite": "^4.5.3"
+		"tslib": "^2.8.1",
+		"typescript": "^4.9.5",
+		"vite": "^4.5.14"
 	}
-}
+}