@cos-design/fireworks 3.5.4 → 3.5.5

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./index.css');var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c,1);let l=require("@cos-design/shared"),u=require("react/jsx-runtime");var d={fireworks:`cos-fireworks-fsSqL`,canvas:`cos-canvas-spL8G`,hint:`cos-hint-5XDRH`},f=[`#ff6b6b`,`#ffd93d`,`#6bcb77`,`#4d96ff`,`#a66cff`,`#ff85c0`],p=.12,m=240,h=()=>f[Math.floor(Math.random()*f.length)],g=(e,t,n)=>{let r=60+Math.floor(Math.random()*30);return Array.from({length:r},()=>{let r=Math.random()*Math.PI*2,i=Math.random()*4+2;return{x:e,y:t,vx:Math.cos(r)*i,vy:Math.sin(r)*i,alpha:1,color:Math.random()>.3?n:h(),decay:Math.random()*.015+.01}})},_=(0,c.forwardRef)((e,t)=>{let{width:n=800,height:r=500,auto:i=!0,hint:a=`点击画布燃放烟花`,onComplete:o}=e,s=(0,c.useRef)(null),f=(0,c.useRef)([]),_=(0,c.useRef)(0),v=(0,c.useRef)(!1),y=(0,c.useRef)(o);(0,c.useEffect)(()=>{y.current=o},[o]);let b=(0,c.useCallback)(e=>{let t=e??Math.random()*n*.6+n*.2;f.current.push({x:t,y:r,vy:-(Math.random()*4+6),targetY:Math.random()*r*.35+r*.15,color:h(),exploded:!1,particles:[],age:0}),v.current=!0},[r,n]);return(0,c.useImperativeHandle)(t,()=>({launch:b}),[b]),(0,c.useEffect)(()=>{let e=s.current;if(!e)return;let t=window.devicePixelRatio||1;e.width=n*t,e.height=r*t;let a=e.getContext(`2d`);if(!a)return;a.setTransform(t,0,0,t,0,0);let o=0,c=document.hidden,u=(0,l.prefersReducedMotion)(),d=(0,l.bindVisibilityPause)(e=>{c=e}),h=(0,l.bindPrefersReducedMotion)(e=>{u=e}),x=()=>{if(_.current=requestAnimationFrame(x),!c){if(a.fillStyle=`rgb(15 23 42 / 25%)`,a.fillRect(0,0,n,r),u){v.current&&f.current.length===0&&(v.current=!1,y.current?.());return}f.current=f.current.filter(e=>{if(!e.exploded){e.age+=1,e.y+=e.vy,e.vy+=p,a.beginPath(),a.arc(e.x,e.y,2.5,0,Math.PI*2),a.fillStyle=e.color,a.fill();let t=e.vy>=0,n=e.y<=e.targetY,r=e.y<0,i=e.age>=m;return(t||n||r||i)&&(e.exploded=!0,e.particles=g(e.x,e.y,e.color)),!0}return e.particles=e.particles.filter(e=>(e.x+=e.vx,e.y+=e.vy,e.vy+=.06,e.alpha-=e.decay,e.alpha<=0?!1:(a.beginPath(),a.arc(e.x,e.y,2,0,Math.PI*2),a.fillStyle=e.color,a.globalAlpha=e.alpha,a.fill(),a.globalAlpha=1,!0))),e.particles.length>0}),v.current&&f.current.length===0&&(v.current=!1,y.current?.())}};return x(),i&&!u?o=window.setInterval(()=>b(),1200):i&&u&&b(),()=>{cancelAnimationFrame(_.current),clearInterval(o),d(),h()}},[i,r,b,n]),(0,u.jsxs)(`div`,{className:d.fireworks,style:{width:n,height:r},children:[(0,u.jsx)(`canvas`,{ref:s,className:d.canvas,style:{width:n,height:r,touchAction:`none`},onPointerDown:e=>{let t=(0,l.getRelativePointerPosition)(e.currentTarget,e.nativeEvent);t&&b(t.x)}}),(0,u.jsx)(`p`,{className:d.hint,children:a})]})});_.displayName=`Fireworks`,exports.Fireworks=_,exports.default=_;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});require('./index.css');var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c,1);let l=require("@cos-design/shared"),u=require("react/jsx-runtime");var d={fireworks:`cos-fireworks-fsSqL`,canvas:`cos-canvas-spL8G`,hint:`cos-hint-5XDRH`},f=[`#ff6b6b`,`#ffd93d`,`#6bcb77`,`#4d96ff`,`#a66cff`,`#ff85c0`],p=.12,m=240,h=()=>f[Math.floor(Math.random()*f.length)],g=(e,t,n)=>{let r=60+Math.floor(Math.random()*30);return Array.from({length:r},()=>{let r=Math.random()*Math.PI*2,i=Math.random()*4+2;return{x:e,y:t,vx:Math.cos(r)*i,vy:Math.sin(r)*i,alpha:1,color:Math.random()>.3?n:h(),decay:Math.random()*.015+.01}})},_=(0,c.forwardRef)((e,t)=>{let{width:n,height:r,fill:i=!1,auto:a=!0,hint:o=`点击画布燃放烟花`,onComplete:s}=e,f=(0,c.useRef)(null),{width:_,height:v}=(0,l.resolveCanvasBoxSize)({fill:i,width:n,height:r,defaultWidth:800,defaultHeight:500,measured:(0,l.useElementSize)(f,{enabled:i})}),y=(0,c.useRef)(null),b=(0,c.useRef)([]),x=(0,c.useRef)(0),S=(0,c.useRef)(!1),C=(0,c.useRef)(s);(0,c.useEffect)(()=>{C.current=s},[s]);let w=(0,c.useCallback)(e=>{let t=e??Math.random()*_*.6+_*.2;b.current.push({x:t,y:v,vy:-(Math.random()*4+6),targetY:Math.random()*v*.35+v*.15,color:h(),exploded:!1,particles:[],age:0}),S.current=!0},[v,_]);return(0,c.useImperativeHandle)(t,()=>({launch:w}),[w]),(0,c.useEffect)(()=>{let e=y.current;if(!e)return;let t=window.devicePixelRatio||1;e.width=_*t,e.height=v*t;let n=e.getContext(`2d`);if(!n)return;n.setTransform(t,0,0,t,0,0);let r=0,i=document.hidden,o=(0,l.prefersReducedMotion)(),s=(0,l.bindVisibilityPause)(e=>{i=e}),c=(0,l.bindPrefersReducedMotion)(e=>{o=e}),u=()=>{if(x.current=requestAnimationFrame(u),!i){if(n.fillStyle=`rgb(15 23 42 / 25%)`,n.fillRect(0,0,_,v),o){S.current&&b.current.length===0&&(S.current=!1,C.current?.());return}b.current=b.current.filter(e=>{if(!e.exploded){e.age+=1,e.y+=e.vy,e.vy+=p,n.beginPath(),n.arc(e.x,e.y,2.5,0,Math.PI*2),n.fillStyle=e.color,n.fill();let t=e.vy>=0,r=e.y<=e.targetY,i=e.y<0,a=e.age>=m;return(t||r||i||a)&&(e.exploded=!0,e.particles=g(e.x,e.y,e.color)),!0}return e.particles=e.particles.filter(e=>(e.x+=e.vx,e.y+=e.vy,e.vy+=.06,e.alpha-=e.decay,e.alpha<=0?!1:(n.beginPath(),n.arc(e.x,e.y,2,0,Math.PI*2),n.fillStyle=e.color,n.globalAlpha=e.alpha,n.fill(),n.globalAlpha=1,!0))),e.particles.length>0}),S.current&&b.current.length===0&&(S.current=!1,C.current?.())}};return u(),a&&!o?r=window.setInterval(()=>w(),1200):a&&o&&w(),()=>{cancelAnimationFrame(x.current),clearInterval(r),s(),c()}},[a,v,w,_]),(0,u.jsxs)(`div`,{ref:f,className:d.fireworks,style:i?{width:`100%`,height:`100%`}:{width:_,height:v},children:[(0,u.jsx)(`canvas`,{ref:y,className:d.canvas,style:{width:_,height:v,touchAction:`none`},onPointerDown:e=>{let t=(0,l.getRelativePointerPosition)(e.currentTarget,e.nativeEvent);t&&w(t.x)}}),(0,u.jsx)(`p`,{className:d.hint,children:o})]})});_.displayName=`Fireworks`,exports.Fireworks=_,exports.default=_;

package/dist/index.js

@@ -1,18 +1,18 @@
 import { forwardRef as e, useCallback as t, useEffect as n, useImperativeHandle as r, useRef as i } from "react";
-import { bindPrefersReducedMotion as a, bindVisibilityPause as o, getRelativePointerPosition as s, prefersReducedMotion as c } from "@cos-design/shared";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import './index.css';var d = {
+import { bindPrefersReducedMotion as a, bindVisibilityPause as o, getRelativePointerPosition as s, prefersReducedMotion as c, resolveCanvasBoxSize as l, useElementSize as u } from "@cos-design/shared";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import './index.css';var p = {
 	fireworks: "cos-fireworks-fsSqL",
 	canvas: "cos-canvas-spL8G",
 	hint: "cos-hint-5XDRH"
-}, f = [
+}, m = [
 	"#ff6b6b",
 	"#ffd93d",
 	"#6bcb77",
 	"#4d96ff",
 	"#a66cff",
 	"#ff85c0"
-], p = .12, m = 240, h = () => f[Math.floor(Math.random() * f.length)], g = (e, t, n) => {
+], h = .12, g = 240, _ = () => m[Math.floor(Math.random() * m.length)], v = (e, t, n) => {
 	let r = 60 + Math.floor(Math.random() * 30);
 	return Array.from({ length: r }, () => {
 		let r = Math.random() * Math.PI * 2, i = Math.random() * 4 + 2;
@@ -22,33 +22,40 @@ import './index.css';var d = {
 			vx: Math.cos(r) * i,
 			vy: Math.sin(r) * i,
 			alpha: 1,
-			color: Math.random() > .3 ? n : h(),
+			color: Math.random() > .3 ? n : _(),
 			decay: Math.random() * .015 + .01
 		};
 	});
-}, _ = e((e, f) => {
-	let { width: _ = 800, height: v = 500, auto: y = !0, hint: b = "点击画布燃放烟花", onComplete: x } = e, S = i(null), C = i([]), w = i(0), T = i(!1), E = i(x);
+}, y = e((e, m) => {
+	let { width: y, height: b, fill: x = !1, auto: S = !0, hint: C = "点击画布燃放烟花", onComplete: w } = e, T = i(null), { width: E, height: D } = l({
+		fill: x,
+		width: y,
+		height: b,
+		defaultWidth: 800,
+		defaultHeight: 500,
+		measured: u(T, { enabled: x })
+	}), O = i(null), k = i([]), A = i(0), j = i(!1), M = i(w);
 	n(() => {
-		E.current = x;
-	}, [x]);
-	let D = t((e) => {
-		let t = e ?? Math.random() * _ * .6 + _ * .2;
-		C.current.push({
+		M.current = w;
+	}, [w]);
+	let N = t((e) => {
+		let t = e ?? Math.random() * E * .6 + E * .2;
+		k.current.push({
 			x: t,
-			y: v,
+			y: D,
 			vy: -(Math.random() * 4 + 6),
-			targetY: Math.random() * v * .35 + v * .15,
-			color: h(),
+			targetY: Math.random() * D * .35 + D * .15,
+			color: _(),
 			exploded: !1,
 			particles: [],
 			age: 0
-		}), T.current = !0;
-	}, [v, _]);
-	return r(f, () => ({ launch: D }), [D]), n(() => {
-		let e = S.current;
+		}), j.current = !0;
+	}, [D, E]);
+	return r(m, () => ({ launch: N }), [N]), n(() => {
+		let e = O.current;
 		if (!e) return;
 		let t = window.devicePixelRatio || 1;
-		e.width = _ * t, e.height = v * t;
+		e.width = E * t, e.height = D * t;
 		let n = e.getContext("2d");
 		if (!n) return;
 		n.setTransform(t, 0, 0, t, 0, 0);
@@ -57,53 +64,57 @@ import './index.css';var d = {
 		}), u = a((e) => {
 			s = e;
 		}), d = () => {
-			if (w.current = requestAnimationFrame(d), !i) {
-				if (n.fillStyle = "rgb(15 23 42 / 25%)", n.fillRect(0, 0, _, v), s) {
-					T.current && C.current.length === 0 && (T.current = !1, E.current?.());
+			if (A.current = requestAnimationFrame(d), !i) {
+				if (n.fillStyle = "rgb(15 23 42 / 25%)", n.fillRect(0, 0, E, D), s) {
+					j.current && k.current.length === 0 && (j.current = !1, M.current?.());
 					return;
 				}
-				C.current = C.current.filter((e) => {
+				k.current = k.current.filter((e) => {
 					if (!e.exploded) {
-						e.age += 1, e.y += e.vy, e.vy += p, n.beginPath(), n.arc(e.x, e.y, 2.5, 0, Math.PI * 2), n.fillStyle = e.color, n.fill();
-						let t = e.vy >= 0, r = e.y <= e.targetY, i = e.y < 0, a = e.age >= m;
-						return (t || r || i || a) && (e.exploded = !0, e.particles = g(e.x, e.y, e.color)), !0;
+						e.age += 1, e.y += e.vy, e.vy += h, n.beginPath(), n.arc(e.x, e.y, 2.5, 0, Math.PI * 2), n.fillStyle = e.color, n.fill();
+						let t = e.vy >= 0, r = e.y <= e.targetY, i = e.y < 0, a = e.age >= g;
+						return (t || r || i || a) && (e.exploded = !0, e.particles = v(e.x, e.y, e.color)), !0;
 					}
 					return e.particles = e.particles.filter((e) => (e.x += e.vx, e.y += e.vy, e.vy += .06, e.alpha -= e.decay, e.alpha <= 0 ? !1 : (n.beginPath(), n.arc(e.x, e.y, 2, 0, Math.PI * 2), n.fillStyle = e.color, n.globalAlpha = e.alpha, n.fill(), n.globalAlpha = 1, !0))), e.particles.length > 0;
-				}), T.current && C.current.length === 0 && (T.current = !1, E.current?.());
+				}), j.current && k.current.length === 0 && (j.current = !1, M.current?.());
 			}
 		};
-		return d(), y && !s ? r = window.setInterval(() => D(), 1200) : y && s && D(), () => {
-			cancelAnimationFrame(w.current), clearInterval(r), l(), u();
+		return d(), S && !s ? r = window.setInterval(() => N(), 1200) : S && s && N(), () => {
+			cancelAnimationFrame(A.current), clearInterval(r), l(), u();
 		};
 	}, [
-		y,
-		v,
+		S,
 		D,
-		_
-	]), /* @__PURE__ */ u("div", {
-		className: d.fireworks,
-		style: {
-			width: _,
-			height: v
+		N,
+		E
+	]), /* @__PURE__ */ f("div", {
+		ref: T,
+		className: p.fireworks,
+		style: x ? {
+			width: "100%",
+			height: "100%"
+		} : {
+			width: E,
+			height: D
 		},
-		children: [/* @__PURE__ */ l("canvas", {
-			ref: S,
-			className: d.canvas,
+		children: [/* @__PURE__ */ d("canvas", {
+			ref: O,
+			className: p.canvas,
 			style: {
-				width: _,
-				height: v,
+				width: E,
+				height: D,
 				touchAction: "none"
 			},
 			onPointerDown: (e) => {
 				let t = s(e.currentTarget, e.nativeEvent);
-				t && D(t.x);
+				t && N(t.x);
 			}
-		}), /* @__PURE__ */ l("p", {
-			className: d.hint,
-			children: b
+		}), /* @__PURE__ */ d("p", {
+			className: p.hint,
+			children: C
 		})]
 	});
 });
-_.displayName = "Fireworks";
+y.displayName = "Fireworks";
 //#endregion
-export { _ as Fireworks, _ as default };
+export { y as Fireworks, y as default };

package/dist/packages/shared/src/index.d.ts

@@ -6,3 +6,5 @@ export type { ElementSize } from './size';
 export { getRelativePointerPosition } from './pointer';
 export type { PointerPosition } from './pointer';
 export type { PhotoItem, PhotoIndexChangeHandler, PhotoFaceChangeHandler } from './photo';
+export { useElementSize, resolveCanvasBoxSize } from './use-element-size';
+export type { UseElementSizeOptions, CanvasBoxSizeInput, CanvasBoxSize } from './use-element-size';

package/dist/packages/shared/src/use-element-size.d.ts

@@ -0,0 +1,25 @@
+import { RefObject } from 'react';
+import { ElementSize } from './size';
+export interface UseElementSizeOptions {
+    /** 为 false 时不观察 */
+    enabled?: boolean;
+}
+/** 观察元素尺寸（clientWidth / clientHeight） */
+export declare const useElementSize: <T extends Element>(ref: RefObject<T | null>, options?: UseElementSizeOptions) => ElementSize;
+export interface CanvasBoxSizeInput {
+    /** 为 true 时跟随父容器尺寸（需父级有明确高度） */
+    fill?: boolean;
+    width?: number;
+    height?: number;
+    defaultWidth: number;
+    defaultHeight: number;
+    measured: ElementSize;
+}
+export interface CanvasBoxSize {
+    width: number;
+    height: number;
+    /** 是否处于 fill 模式且尚未量到有效尺寸 */
+    pending: boolean;
+}
+/** 根据 fill / 显式宽高 / 测量结果解析画布逻辑尺寸 */
+export declare const resolveCanvasBoxSize: ({ fill, width, height, defaultWidth, defaultHeight, measured }: CanvasBoxSizeInput) => CanvasBoxSize;

package/dist/src/components/fireworks/index.d.ts

@@ -2,6 +2,8 @@ import { default as React } from 'react';
 export interface FireworksProps {
     width?: number;
     height?: number;
+    /** 为 true 时铺满父容器（父级需有明确高度） */
+    fill?: boolean;
     /** 是否自动燃放，默认 true */
     auto?: boolean;
     /** 画布操作提示 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cos-design/fireworks",
-  "version": "3.5.4",
+  "version": "3.5.5",
   "description": "Fireworks component from cos-design",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -52,6 +52,6 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "@cos-design/shared": "3.5.4"
+    "@cos-design/shared": "3.5.5"
   }
 }