@nightshadeui/particle-system 2.16.0 → 2.17.0

package/dist/ParticleSystemController.d.ts

@@ -5,6 +5,7 @@ export declare class ParticleSystemController {
     paused: Event<void>;
     resumed: Event<void>;
     finished: Event<void>;
+    updated: Event<void>;
     particles: import('vue').Reactive<ParticleState[]>;
     config: {
         seed: number;
@@ -27,6 +28,7 @@ export declare class ParticleSystemController {
         rotationOverTime: import('./types.js').NumberValue;
         turbulence: import('./types.js').NumberValue;
         noiseScale: import('./types.js').NumberValue;
+        update: import('./types.js').ParticleUpdate;
     };
     private index;
     private spawnAccumulator;

package/dist/ParticleSystemController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParticleSystemController.d.ts","sourceRoot":"","sources":["../src/ParticleSystemController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAUlC,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAItE,qBAAa,wBAAwB;IAEjC,OAAO,cAAqB;IAC5B,MAAM,cAAqB;IAC3B,OAAO,cAAqB;IAC5B,QAAQ,cAAqB;IAE7B,SAAS,0CAAiC;IAC1C,MAAM;;;;;;;;;;;;;;;;;;;;;MAA2B;IAEjC,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAEV;gBAES,MAAM,GAAE,oBAAyB;IAI7C,IAAI,SAAS,YAEZ;IAED,IAAI,SAAS,YAEZ;IAED,IAAI,QAAQ,YAEX;IAED,SAAS,CAAC,MAAM,GAAE,oBAAyB;IAS3C,KAAK;IAKL,OAAO;IAKP,KAAK,CAAC,QAAQ,UAAgB;IAc9B,KAAK;IAQL,MAAM;IAUN,IAAI;IAIJ,MAAM;IASN,IAAI,CAAC,IAAI,SAAoB;IAY7B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,KAAK;IAUb,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,IAAI;IAUZ,OAAO,CAAC,eAAe;CAM1B"}
+{"version":3,"file":"ParticleSystemController.d.ts","sourceRoot":"","sources":["../src/ParticleSystemController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAUlC,OAAO,KAAK,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAItE,qBAAa,wBAAwB;IAEjC,OAAO,cAAqB;IAC5B,MAAM,cAAqB;IAC3B,OAAO,cAAqB;IAC5B,QAAQ,cAAqB;IAC7B,OAAO,cAAqB;IAE5B,SAAS,0CAAiC;IAC1C,MAAM;;;;;;;;;;;;;;;;;;;;;;MAA2B;IAEjC,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAEV;gBAES,MAAM,GAAE,oBAAyB;IAI7C,IAAI,SAAS,YAEZ;IAED,IAAI,SAAS,YAEZ;IAED,IAAI,QAAQ,YAEX;IAED,SAAS,CAAC,MAAM,GAAE,oBAAyB;IAS3C,KAAK;IAKL,OAAO;IAKP,KAAK,CAAC,QAAQ,UAAgB;IAe9B,KAAK;IAQL,MAAM;IAUN,IAAI;IAIJ,MAAM;IASN,IAAI,CAAC,IAAI,SAAoB;IAa7B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,KAAK;IAUb,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,IAAI;IAWZ,OAAO,CAAC,eAAe;CAM1B"}

package/dist/components/ParticleCanvas.vue.d.ts

@@ -0,0 +1,79 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    controller: {
+        type: ObjectConstructor;
+    };
+    config: {
+        type: ObjectConstructor;
+    };
+    draw: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    clear: {
+        type: FunctionConstructor;
+    };
+    beforeDraw: {
+        type: FunctionConstructor;
+    };
+    afterDraw: {
+        type: FunctionConstructor;
+    };
+    pixelRatio: {
+        type: NumberConstructor;
+    };
+}>, {}, {
+    localController: null;
+    resizeObserver: null;
+}, {
+    particleController(): Record<string, any> | null;
+    isRunning(): any;
+    isPaused(): any;
+    canvasStyle(): {
+        display: string;
+        width: string;
+        height: string;
+    };
+}, {
+    mountCanvas(): void;
+    unmountCanvas(): void;
+    mountController(controller: any): void;
+    unmountController(controller: any): void;
+    reset(): void;
+    pause(): void;
+    resume(): void;
+    stop(): void;
+    resizeCanvas(): void;
+    drawFrame(): void;
+    clearFrame(ctx: any, canvas: any): void;
+    getPixelRatio(): number;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("started" | "paused" | "resumed" | "finished")[], "started" | "paused" | "resumed" | "finished", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    controller: {
+        type: ObjectConstructor;
+    };
+    config: {
+        type: ObjectConstructor;
+    };
+    draw: {
+        type: FunctionConstructor;
+        required: true;
+    };
+    clear: {
+        type: FunctionConstructor;
+    };
+    beforeDraw: {
+        type: FunctionConstructor;
+    };
+    afterDraw: {
+        type: FunctionConstructor;
+    };
+    pixelRatio: {
+        type: NumberConstructor;
+    };
+}>> & Readonly<{
+    onStarted?: ((...args: any[]) => any) | undefined;
+    onPaused?: ((...args: any[]) => any) | undefined;
+    onResumed?: ((...args: any[]) => any) | undefined;
+    onFinished?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, "isPaused" | "reset" | "pause" | "resume" | "stop" | "drawFrame" | "isRunning", import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=ParticleCanvas.vue.d.ts.map

package/dist/components/ParticleCanvas.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleCanvas.vue.d.ts","sourceRoot":"","sources":["../../src/components/ParticleCanvas.vue"],"names":[],"mappings":"AAMA;"}

package/dist/components/ParticleSystem.vue.d.ts

@@ -5,21 +5,24 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     config: {
         type: ObjectConstructor;
     };
+    tagName: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, {}, {
     localController: null;
-    eventCleanups: never[];
 }, {
     particleController(): Record<string, any> | null;
     isRunning(): any;
     isPaused(): any;
 }, {
     mountController(controller: any): void;
-    unmountController(): void;
+    unmountController(controller: any): void;
     reset(): void;
     pause(): void;
     resume(): void;
     stop(): void;
-    getParticleStyle(particle: any): {
+    getHtmlStyle(particle: any): {
         position: string;
         top: number;
         left: number;
@@ -30,6 +33,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         'transform-origin': string;
         'will-change': string;
     };
+    getSvgStyle(particle: any): {
+        opacity: any;
+        transform: string;
+        'transform-origin': string;
+        'transform-box': string;
+        'will-change': string;
+    };
+    getTransform(particle: any): string;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("started" | "paused" | "resumed" | "finished")[], "started" | "paused" | "resumed" | "finished", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     controller: {
         type: ObjectConstructor;
@@ -37,11 +48,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     config: {
         type: ObjectConstructor;
     };
+    tagName: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{
     onStarted?: ((...args: any[]) => any) | undefined;
     onPaused?: ((...args: any[]) => any) | undefined;
     onResumed?: ((...args: any[]) => any) | undefined;
     onFinished?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, "isPaused" | "reset" | "pause" | "resume" | "stop" | "isRunning", import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {
+    tagName: string;
+}, {}, {}, {}, "isPaused" | "reset" | "pause" | "resume" | "stop" | "isRunning", import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=ParticleSystem.vue.d.ts.map

package/dist/components/ParticleSystem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ParticleSystem.vue.d.ts","sourceRoot":"","sources":["../../src/components/ParticleSystem.vue"],"names":[],"mappings":"AAWA;"}
+{"version":3,"file":"ParticleSystem.vue.d.ts","sourceRoot":"","sources":["../../src/components/ParticleSystem.vue"],"names":[],"mappings":"AAeA;"}

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+import { default as ParticleCanvas } from './components/ParticleCanvas.vue';
 import { default as ParticleSystem } from './components/ParticleSystem.vue';
 export * from './particles.js';
 export * from './ParticleSystemController.js';
 export * from './types.js';
-export { ParticleSystem, };
+export { ParticleCanvas, ParticleSystem, };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAE7D,cAAc,gBAAgB,CAAC;AAC/B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,YAAY,CAAC;AAE3B,OAAO,EACH,cAAc,GACjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAC7D,OAAO,cAAc,MAAM,iCAAiC,CAAC;AAE7D,cAAc,gBAAgB,CAAC;AAC/B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,YAAY,CAAC;AAE3B,OAAO,EACH,cAAc,EACd,cAAc,GACjB,CAAC"}

package/dist/particle-system.mjs

@@ -1,5 +1,5 @@
-import { reactive as E, openBlock as N, createElementBlock as j, Fragment as H, renderList as J, renderSlot as K, normalizeStyle as W } from "vue";
-class O {
+import { reactive as E, openBlock as I, createElementBlock as q, normalizeStyle as K, createBlock as W, resolveDynamicComponent as Z, withCtx as tt, Fragment as et, renderList as st, renderSlot as it } from "vue";
+class w {
   constructor() {
     this._groups = /* @__PURE__ */ new Map();
   }
@@ -26,23 +26,23 @@ class O {
         i(e);
   }
 }
-function c(t, e) {
+function h(t, e) {
   return [t, e];
 }
-function X(t) {
+function B(t) {
   return Math.hypot(t[0], t[1]);
 }
-function Z(t) {
-  const e = X(t);
-  return e === 0 ? c(0, 0) : c(t[0] / e, t[1] / e);
+function nt(t) {
+  const e = B(t);
+  return e === 0 ? h(0, 0) : h(t[0] / e, t[1] / e);
 }
-function q(t, e) {
-  return c(t[0] + e[0], t[1] + e[1]);
+function L(t, e) {
+  return h(t[0] + e[0], t[1] + e[1]);
 }
 function U(t, e) {
-  return c(t[0] * e, t[1] * e);
+  return h(t[0] * e, t[1] * e);
 }
-const B = /* @__PURE__ */ Math.sqrt(3), tt = 0.5 * (B - 1), A = (3 - B) / 6, k = (t) => Math.floor(t) | 0, G = /* @__PURE__ */ new Float64Array([
+const X = /* @__PURE__ */ Math.sqrt(3), rt = 0.5 * (X - 1), x = (3 - X) / 6, j = (t) => Math.floor(t) | 0, k = /* @__PURE__ */ new Float64Array([
   1,
   1,
   -1,
@@ -68,33 +68,33 @@ const B = /* @__PURE__ */ Math.sqrt(3), tt = 0.5 * (B - 1), A = (3 - B) / 6, k =
   0,
   -1
 ]);
-function et(t = Math.random) {
-  const e = st(t), s = new Float64Array(e).map((n) => G[n % 12 * 2]), i = new Float64Array(e).map((n) => G[n % 12 * 2 + 1]);
+function ot(t = Math.random) {
+  const e = at(t), s = new Float64Array(e).map((n) => k[n % 12 * 2]), i = new Float64Array(e).map((n) => k[n % 12 * 2 + 1]);
   return function(r, o) {
-    let m = 0, f = 0, d = 0;
-    const P = (r + o) * tt, _ = k(r + P), S = k(o + P), R = (_ + S) * A, Q = _ - R, Y = S - R, h = r - Q, u = o - Y;
-    let w, x;
-    h > u ? (w = 1, x = 0) : (w = 0, x = 1);
-    const M = h - w + A, b = u - x + A, z = h - 1 + 2 * A, F = u - 1 + 2 * A, V = _ & 255, $ = S & 255;
-    let p = 0.5 - h * h - u * u;
+    let m = 0, d = 0, f = 0;
+    const P = (r + o) * rt, O = j(r + P), S = j(o + P), N = (O + S) * x, Y = O - N, J = S - N, c = r - Y, u = o - J;
+    let T, b;
+    c > u ? (T = 1, b = 0) : (T = 0, b = 1);
+    const _ = c - T + x, F = u - b + x, z = c - 1 + 2 * x, M = u - 1 + 2 * x, R = O & 255, $ = S & 255;
+    let p = 0.5 - c * c - u * u;
     if (p >= 0) {
-      const l = V + e[$], v = s[l], C = i[l];
-      p *= p, m = p * p * (v * h + C * u);
+      const l = R + e[$], v = s[l], C = i[l];
+      p *= p, m = p * p * (v * c + C * u);
     }
-    let y = 0.5 - M * M - b * b;
-    if (y >= 0) {
-      const l = V + w + e[$ + x], v = s[l], C = i[l];
-      y *= y, f = y * y * (v * M + C * b);
-    }
-    let g = 0.5 - z * z - F * F;
+    let g = 0.5 - _ * _ - F * F;
     if (g >= 0) {
-      const l = V + 1 + e[$ + 1], v = s[l], C = i[l];
-      g *= g, d = g * g * (v * z + C * F);
+      const l = R + T + e[$ + b], v = s[l], C = i[l];
+      g *= g, d = g * g * (v * _ + C * F);
+    }
+    let y = 0.5 - z * z - M * M;
+    if (y >= 0) {
+      const l = R + 1 + e[$ + 1], v = s[l], C = i[l];
+      y *= y, f = y * y * (v * z + C * M);
     }
-    return 70 * (m + f + d);
+    return 70 * (m + d + f);
   };
 }
-function st(t) {
+function at(t) {
   const s = new Uint8Array(512);
   for (let i = 0; i < 512 / 2; i++)
     s[i] = i;
@@ -106,7 +106,7 @@ function st(t) {
     s[i] = s[i - 256];
   return s;
 }
-const it = {
+const lt = {
   seed: 1,
   isPaused: !1,
   startCount: 24,
@@ -126,15 +126,17 @@ const it = {
   rotation: 0,
   rotationOverTime: 0,
   turbulence: 0,
-  noiseScale: 0.01
+  noiseScale: 0.01,
+  update: () => {
+  }
 };
-function L(t = {}) {
+function G(t = {}) {
   return {
-    ...it,
+    ...lt,
     ...t
   };
 }
-function I(t) {
+function D(t) {
   let e = t >>> 0;
   return () => {
     e += 1831565813;
@@ -142,27 +144,27 @@ function I(t) {
     return s = Math.imul(s ^ s >>> 15, s | 1), s ^= s + Math.imul(s ^ s >>> 7, s | 61), ((s ^ s >>> 14) >>> 0) / 4294967296;
   };
 }
-function nt(t, e, s) {
-  const i = T(e.shape, s), n = s() * Math.PI * 2, r = Math.sqrt(s()), o = c(
+function ht(t, e, s) {
+  const i = A(e.shape, s), n = s() * Math.PI * 2, r = Math.sqrt(s()), o = h(
     Math.cos(n) * r * i[0],
     Math.sin(n) * r * i[1]
-  ), m = X(o) === 0 ? c(Math.cos(n), Math.sin(n)) : Z(o), f = T(e.linearVelocity, s), d = a(e.radialVelocity, s), P = U(m, d);
+  ), m = B(o) === 0 ? h(Math.cos(n), Math.sin(n)) : nt(o), d = A(e.linearVelocity, s), f = a(e.radialVelocity, s), P = U(m, f);
   return {
     index: t,
     age: 0,
     lifetime: Math.max(1e-3, a(e.lifetime, s)),
     position: o,
-    velocity: f,
-    effectiveVelocity: q(f, P),
+    velocity: d,
+    effectiveVelocity: L(d, P),
     radialDirection: m,
     size: a(e.size, s),
     sizeOverTime: a(e.sizeOverTime, s),
-    scale: T(e.scale, s),
-    scaleOverTime: T(e.scaleOverTime, s),
+    scale: A(e.scale, s),
+    scaleOverTime: A(e.scaleOverTime, s),
     opacity: a(e.opacity, s),
     opacityOverTime: a(e.opacityOverTime, s),
-    linearAcceleration: T(e.linearAcceleration, s),
-    radialVelocity: d,
+    linearAcceleration: A(e.linearAcceleration, s),
+    radialVelocity: f,
     radialAcceleration: a(e.radialAcceleration, s),
     rotation: a(e.rotation, s),
     rotationOverTime: a(e.rotationOverTime, s),
@@ -171,7 +173,7 @@ function nt(t, e, s) {
     t: 0
   };
 }
-function rt(t, e, s) {
+function ct(t, e, s) {
   t.age += e, t.radialVelocity += t.radialAcceleration * e, t.velocity[0] += (t.linearAcceleration[0] + s(
     t.position[0] * t.noiseScale,
     t.position[1] * t.noiseScale
@@ -180,31 +182,31 @@ function rt(t, e, s) {
     t.position[1] * t.noiseScale - 100
   ) * t.turbulence) * e;
   const i = U(t.radialDirection, t.radialVelocity);
-  t.effectiveVelocity = q(t.velocity, i), t.position[0] += t.effectiveVelocity[0] * e, t.position[1] += t.effectiveVelocity[1] * e, t.size += t.sizeOverTime * e, t.scale[0] += t.scaleOverTime[0] * e, t.scale[1] += t.scaleOverTime[1] * e, t.opacity += t.opacityOverTime * e, t.rotation += t.rotationOverTime * e, t.t = Math.min(1, t.age / t.lifetime);
+  t.effectiveVelocity = L(t.velocity, i), t.position[0] += t.effectiveVelocity[0] * e, t.position[1] += t.effectiveVelocity[1] * e, t.size += t.sizeOverTime * e, t.scale[0] += t.scaleOverTime[0] * e, t.scale[1] += t.scaleOverTime[1] * e, t.opacity += t.opacityOverTime * e, t.rotation += t.rotationOverTime * e, t.t = Math.min(1, t.age / t.lifetime);
 }
-function D(t) {
-  return et(t);
+function V(t) {
+  return ot(t);
 }
 function a(t, e) {
   return Array.isArray(t) ? t[0] + (t[1] - t[0]) * e() : t;
 }
-function T(t, e) {
-  if (ot(t)) {
+function A(t, e) {
+  if (ut(t)) {
     const [s, i] = t;
-    return c(
+    return h(
       s[0] + (i[0] - s[0]) * e(),
       s[1] + (i[1] - s[1]) * e()
     );
   }
-  return c(t[0], t[1]);
+  return h(t[0], t[1]);
 }
-function ot(t) {
+function ut(t) {
   return Array.isArray(t[0]);
 }
-const at = Number.MAX_SAFE_INTEGER;
-class lt {
+const mt = Number.MAX_SAFE_INTEGER;
+class H {
   constructor(e = {}) {
-    this.started = new O(), this.paused = new O(), this.resumed = new O(), this.finished = new O(), this.particles = E([]), this.config = L(), this.index = 0, this.spawnAccumulator = 0, this.random = I(this.config.seed), this.noise = D(this.random), this.lastTime = 0, this.frame = 0, this.mounted = !1, this.state = E({
+    this.started = new w(), this.paused = new w(), this.resumed = new w(), this.finished = new w(), this.updated = new w(), this.particles = E([]), this.config = G(), this.index = 0, this.spawnAccumulator = 0, this.random = D(this.config.seed), this.noise = V(this.random), this.lastTime = 0, this.frame = 0, this.mounted = !1, this.state = E({
       isPaused: this.config.isPaused
     }), this.setConfig(e);
   }
@@ -219,7 +221,7 @@ class lt {
   }
   setConfig(e = {}) {
     const s = this.config.seed;
-    this.config = L(e), this.config.seed !== s && (this.random = I(this.config.seed), this.noise = D(this.random));
+    this.config = G(e), this.config.seed !== s && (this.random = D(this.config.seed), this.noise = V(this.random));
   }
   mount() {
     this.mounted = !0, this.reset(this.config.isPaused);
@@ -228,7 +230,7 @@ class lt {
     this.mounted = !1, cancelAnimationFrame(this.frame);
   }
   reset(e = this.isPaused) {
-    this.particles.splice(0), this.index = 0, this.spawnAccumulator = 0, this.lastTime = performance.now(), this.state.isPaused = e, this.random = I(this.config.seed), this.noise = D(this.random), this.spawn(this.config.startCount), this.started.emit(), this.finishIfDrained(), this.startFrame();
+    this.particles.splice(0), this.index = 0, this.spawnAccumulator = 0, this.lastTime = performance.now(), this.state.isPaused = e, this.random = D(this.config.seed), this.noise = V(this.random), this.spawn(this.config.startCount), this.updated.emit(), this.started.emit(), this.finishIfDrained(), this.startFrame();
   }
   pause() {
     this.isPaused || (this.state.isPaused = !0, this.paused.emit());
@@ -248,7 +250,7 @@ class lt {
       return;
     }
     const s = Math.min(0.05, Math.max(0, (e - this.lastTime) / 1e3));
-    this.lastTime = e, this.spawnOverTime(s), this.step(s), this.finishIfDrained();
+    this.lastTime = e, this.spawnOverTime(s), this.step(s), this.updated.emit(), this.finishIfDrained();
   }
   startFrame() {
     !this.mounted || this.isPaused || (cancelAnimationFrame(this.frame), this.frame = requestAnimationFrame((e) => {
@@ -262,7 +264,7 @@ class lt {
   }
   spawn(e) {
     for (let s = 0; s < e; s++)
-      this.particles.push(nt(
+      this.particles.push(ht(
         this.nextIndex(),
         this.config,
         this.random
@@ -270,27 +272,32 @@ class lt {
   }
   nextIndex() {
     const e = this.index;
-    return this.index = e === at ? 0 : e + 1, e;
+    return this.index = e === mt ? 0 : e + 1, e;
   }
   step(e) {
     for (let s = this.particles.length - 1; s >= 0; s--) {
       const i = this.particles[s];
-      rt(i, e, this.noise), i.age >= i.lifetime && this.particles.splice(s, 1);
+      ct(i, e, this.noise), this.config.update(i, e), i.age >= i.lifetime && this.particles.splice(s, 1);
     }
   }
   finishIfDrained() {
     this.isRunning && this.isDrained && this.finish();
   }
 }
-const ct = (t, e) => {
+const Q = (t, e) => {
   const s = t.__vccOpts || t;
   for (const [i, n] of e)
     s[i] = n;
   return s;
-}, ht = {
+}, dt = {
   props: {
     controller: { type: Object },
-    config: { type: Object }
+    config: { type: Object },
+    draw: { type: Function, required: !0 },
+    clear: { type: Function },
+    beforeDraw: { type: Function },
+    afterDraw: { type: Function },
+    pixelRatio: { type: Number }
   },
   emits: [
     "started",
@@ -303,13 +310,139 @@ const ct = (t, e) => {
     "pause",
     "resume",
     "stop",
+    "drawFrame",
     "isRunning",
     "isPaused"
   ],
   data() {
     return {
       localController: null,
-      eventCleanups: []
+      resizeObserver: null
+    };
+  },
+  computed: {
+    particleController() {
+      return this.controller ?? this.localController;
+    },
+    isRunning() {
+      return this.particleController.isRunning;
+    },
+    isPaused() {
+      return this.particleController.isPaused;
+    },
+    canvasStyle() {
+      return {
+        display: "block",
+        width: "100%",
+        height: "100%"
+      };
+    }
+  },
+  watch: {
+    config: {
+      deep: !0,
+      handler(t) {
+        t != null && this.particleController?.setConfig(t);
+      }
+    },
+    controller(t, e) {
+      this.unmountController(e ?? this.localController), this.mountController(t ?? this.localController), this.drawFrame();
+    }
+  },
+  created() {
+    this.localController = new H(this.config ?? {});
+  },
+  mounted() {
+    this.mountCanvas(), this.mountController(this.particleController);
+  },
+  beforeUnmount() {
+    this.unmountController(this.particleController), this.unmountCanvas();
+  },
+  methods: {
+    mountCanvas() {
+      this.resizeObserver = new ResizeObserver(() => this.resizeCanvas()), this.resizeObserver.observe(this.$refs.canvas), this.resizeCanvas();
+    },
+    unmountCanvas() {
+      this.resizeObserver?.disconnect(), this.resizeObserver = null;
+    },
+    mountController(t) {
+      this.config != null && t.setConfig(this.config), t.started.on(() => this.$emit("started"), this), t.paused.on(() => this.$emit("paused"), this), t.resumed.on(() => this.$emit("resumed"), this), t.finished.on(() => this.$emit("finished"), this), t.updated.on(() => this.drawFrame(), this), t.mount();
+    },
+    unmountController(t) {
+      t && (t.started.removeAll(this), t.paused.removeAll(this), t.resumed.removeAll(this), t.finished.removeAll(this), t.updated.removeAll(this), t.unmount());
+    },
+    reset() {
+      this.particleController.reset();
+    },
+    pause() {
+      this.particleController.pause();
+    },
+    resume() {
+      this.particleController.resume();
+    },
+    stop() {
+      this.particleController.stop();
+    },
+    resizeCanvas() {
+      const t = this.$refs.canvas, e = t.getBoundingClientRect(), s = this.getPixelRatio(), i = Math.max(1, Math.round(e.width * s)), n = Math.max(1, Math.round(e.height * s));
+      t.width !== i && (t.width = i), t.height !== n && (t.height = n), this.drawFrame();
+    },
+    drawFrame() {
+      const t = this.$refs.canvas;
+      if (!t)
+        return;
+      const e = t.getContext("2d"), s = this.particleController.particles;
+      if (!e)
+        return;
+      const i = this.getPixelRatio();
+      e.setTransform(i, 0, 0, i, 0, 0), this.clearFrame(e, t), this.beforeDraw?.(e, s, t);
+      for (const n of s)
+        this.draw(e, n, t);
+      this.afterDraw?.(e, s, t);
+    },
+    clearFrame(t, e) {
+      if (this.clear) {
+        this.clear(t, e);
+        return;
+      }
+      const s = this.getPixelRatio();
+      t.clearRect(0, 0, e.width / s, e.height / s);
+    },
+    getPixelRatio() {
+      return Math.max(1, this.pixelRatio ?? window.devicePixelRatio ?? 1);
+    }
+  }
+};
+function ft(t, e, s, i, n, r) {
+  return I(), q("canvas", {
+    ref: "canvas",
+    class: "ParticleCanvas",
+    style: K(r.canvasStyle)
+  }, null, 4);
+}
+const vt = /* @__PURE__ */ Q(dt, [["render", ft]]), pt = {
+  props: {
+    controller: { type: Object },
+    config: { type: Object },
+    tagName: { type: String, default: "div" }
+  },
+  emits: [
+    "started",
+    "paused",
+    "resumed",
+    "finished"
+  ],
+  expose: [
+    "reset",
+    "pause",
+    "resume",
+    "stop",
+    "isRunning",
+    "isPaused"
+  ],
+  data() {
+    return {
+      localController: null
     };
   },
   computed: {
@@ -331,24 +464,24 @@ const ct = (t, e) => {
       }
     },
     controller(t, e) {
-      e?.unmount(), this.unmountController(), this.mountController(t ?? this.localController);
+      this.unmountController(e ?? this.localController), this.mountController(t ?? this.localController);
     }
   },
   created() {
-    this.localController = new lt(this.config ?? {});
+    this.localController = new H(this.config ?? {});
   },
   mounted() {
     this.mountController(this.particleController);
   },
   beforeUnmount() {
-    this.unmountController();
+    this.unmountController(this.particleController);
   },
   methods: {
     mountController(t) {
       this.config != null && t.setConfig(this.config), t.started.on(() => this.$emit("started"), this), t.paused.on(() => this.$emit("paused"), this), t.resumed.on(() => this.$emit("resumed"), this), t.finished.on(() => this.$emit("finished"), this), t.mount();
     },
-    unmountController() {
-      this.particleController && (this.particleController.started.removeAll(this), this.particleController.paused.removeAll(this), this.particleController.resumed.removeAll(this), this.particleController.finished.removeAll(this), this.particleController.unmount());
+    unmountController(t) {
+      t && (t.started.removeAll(this), t.paused.removeAll(this), t.resumed.removeAll(this), t.finished.removeAll(this), t.unmount());
     },
     reset() {
       this.particleController.reset();
@@ -362,7 +495,7 @@ const ct = (t, e) => {
     stop() {
       this.particleController.stop();
     },
-    getParticleStyle(t) {
+    getHtmlStyle(t) {
       const e = Math.max(0, t.size);
       return {
         position: "absolute",
@@ -371,30 +504,50 @@ const ct = (t, e) => {
         width: `${e}px`,
         height: `${e}px`,
         opacity: t.opacity,
-        transform: `translate(${t.position[0]}px, ${t.position[1]}px) rotate(${t.rotation}deg) scale(${t.scale[0]}, ${t.scale[1]})`,
+        transform: this.getTransform(t),
         "transform-origin": "center",
         "will-change": "transform, opacity"
       };
+    },
+    getSvgStyle(t) {
+      return {
+        opacity: t.opacity,
+        transform: this.getTransform(t),
+        "transform-origin": "center",
+        "transform-box": "fill-box",
+        "will-change": "transform, opacity"
+      };
+    },
+    getTransform(t) {
+      return `translate(${t.position[0]}px, ${t.position[1]}px) rotate(${t.rotation}deg) scale(${t.scale[0]}, ${t.scale[1]})`;
     }
   }
-}, ut = { class: "ParticleSystem" };
-function mt(t, e, s, i, n, r) {
-  return N(), j("div", ut, [
-    (N(!0), j(H, null, J(r.particleController.particles, (o) => K(t.$slots, "default", {
-      key: o.index,
-      particle: o,
-      style: W(r.getParticleStyle(o))
-    }, void 0, !0)), 128))
-  ]);
+};
+function gt(t, e, s, i, n, r) {
+  return I(), W(Z(s.tagName), {
+    class: "ParticleSystem",
+    style: { position: "relative" }
+  }, {
+    default: tt(() => [
+      (I(!0), q(et, null, st(r.particleController.particles, (o) => it(t.$slots, "default", {
+        key: o.index,
+        particle: o,
+        htmlStyle: r.getHtmlStyle(o),
+        svgStyle: r.getSvgStyle(o)
+      })), 128))
+    ]),
+    _: 3
+  });
 }
-const dt = /* @__PURE__ */ ct(ht, [["render", mt], ["__scopeId", "data-v-47a4e782"]]);
+const Ct = /* @__PURE__ */ Q(pt, [["render", gt]]);
 export {
-  it as DEFAULT_PARTICLE_CONFIG,
-  dt as ParticleSystem,
-  lt as ParticleSystemController,
-  D as createNoise,
-  nt as createParticle,
-  I as createRandom,
-  L as resolveParticleConfig,
-  rt as stepParticle
+  lt as DEFAULT_PARTICLE_CONFIG,
+  vt as ParticleCanvas,
+  Ct as ParticleSystem,
+  H as ParticleSystemController,
+  V as createNoise,
+  ht as createParticle,
+  D as createRandom,
+  G as resolveParticleConfig,
+  ct as stepParticle
 };

package/dist/particles.d.ts

@@ -23,6 +23,7 @@ export declare function resolveParticleConfig(config?: ParticleSystemConfig): {
     rotationOverTime: NumberValue;
     turbulence: NumberValue;
     noiseScale: NumberValue;
+    update: import('./types.js').ParticleUpdate;
 };
 export declare function createRandom(seed: number): () => number;
 export declare function createParticle(index: number, config: ReturnType<typeof resolveParticleConfig>, random: () => number): ParticleState;

package/dist/particles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"particles.d.ts","sourceRoot":"","sources":["../src/particles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EACR,WAAW,EACX,aAAa,EACb,oBAAoB,EAEpB,YAAY,EACf,MAAM,YAAY,CAAC;AAEpB,MAAM,MAAM,4BAA4B,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAE1E,eAAO,MAAM,uBAAuB,EAAE,4BAqBrC,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,MAAM,GAAE,oBAAyB;;;;;;;;;;;;;;;;;;;;;EAKtE;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,gBASxC;AAED,wBAAgB,cAAc,CAC1B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,EAChD,MAAM,EAAE,MAAM,MAAM,GACrB,aAAa,CAqCf;AAED,wBAAgB,YAAY,CACxB,QAAQ,EAAE,aAAa,EACvB,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,QA4B1C;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,MAAM,2CAE/C"}
+{"version":3,"file":"particles.d.ts","sourceRoot":"","sources":["../src/particles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EACR,WAAW,EACX,aAAa,EACb,oBAAoB,EAEpB,YAAY,EACf,MAAM,YAAY,CAAC;AAEpB,MAAM,MAAM,4BAA4B,GAAG,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAE1E,eAAO,MAAM,uBAAuB,EAAE,4BAsBrC,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,MAAM,GAAE,oBAAyB;;;;;;;;;;;;;;;;;;;;;;EAKtE;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,gBASxC;AAED,wBAAgB,cAAc,CAC1B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,UAAU,CAAC,OAAO,qBAAqB,CAAC,EAChD,MAAM,EAAE,MAAM,MAAM,GACrB,aAAa,CAqCf;AAED,wBAAgB,YAAY,CACxB,QAAQ,EAAE,aAAa,EACvB,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,UAAU,CAAC,OAAO,aAAa,CAAC,QA4B1C;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,MAAM,2CAE/C"}

package/dist/types.d.ts

@@ -3,6 +3,7 @@ export type NumberRange = [number, number];
 export type Vector2Range = [Vector2, Vector2];
 export type NumberValue = number | NumberRange;
 export type Vector2Value = Vector2 | Vector2Range;
+export type ParticleUpdate = (particle: ParticleState, dt: number) => void;
 export interface ParticleSystemConfig {
     seed?: number;
     isPaused?: boolean;
@@ -24,6 +25,7 @@ export interface ParticleSystemConfig {
     rotationOverTime?: NumberValue;
     turbulence?: NumberValue;
     noiseScale?: NumberValue;
+    update?: ParticleUpdate;
 }
 export interface ParticleState {
     index: number;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,CAAC;AAC/C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,YAAY,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAClC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;CACb"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AAE9C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,CAAC;AAC/C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,YAAY,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;AAE3E,MAAM,WAAW,oBAAoB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAClC,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAC/B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,MAAM,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,OAAO,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;CACb"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nightshadeui/particle-system",
-    "version": "2.16.0",
+    "version": "2.17.0",
     "description": "Nightshade particle system component",
     "author": "Boris Okunskiy",
     "license": "ISC",
@@ -10,7 +10,6 @@
             "types": "./dist/index.d.ts",
             "import": "./dist/particle-system.mjs"
         },
-        "./css": "./dist/particle-system.css",
         "./src": "./src/index.ts"
     },
     "files": [
@@ -24,7 +23,7 @@
         "vue": "^3.5.22"
     },
     "dependencies": {
-        "@nightshadeui/util": "2.16.0",
+        "@nightshadeui/util": "2.17.0",
         "nanoevent": "^1.0.0",
         "simplex-noise": "^4.0.3"
     }

package/dist/particle-system.css

@@ -1 +0,0 @@
-@layer nightshade-components{.ParticleSystem[data-v-47a4e782]{position:relative}}