@cos-design/fireworks 3.5.5 → 3.5.6

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,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=_;
+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`,canvasPassthrough:`cos-canvasPassthrough-jCNke`,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,interactive:o,hint:s=`点击画布燃放烟花`,onComplete:f}=e,_=o??a,v=(0,c.useRef)(null),{width:y,height:b}=(0,l.resolveCanvasBoxSize)({fill:i,width:n,height:r,defaultWidth:800,defaultHeight:500,measured:(0,l.useElementSize)(v,{enabled:i})}),x=(0,c.useRef)(null),S=(0,c.useRef)([]),C=(0,c.useRef)(0),w=(0,c.useRef)(!1),T=(0,c.useRef)(f);(0,c.useEffect)(()=>{T.current=f},[f]);let E=(0,c.useCallback)(e=>{let t=e??Math.random()*y*.6+y*.2;S.current.push({x:t,y:b,vy:-(Math.random()*4+6),targetY:Math.random()*b*.35+b*.15,color:h(),exploded:!1,particles:[],age:0}),w.current=!0},[b,y]);return(0,c.useImperativeHandle)(t,()=>({launch:E}),[E]),(0,c.useEffect)(()=>{let e=x.current;if(!e)return;let t=window.devicePixelRatio||1;e.width=y*t,e.height=b*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(C.current=requestAnimationFrame(u),!i){if(n.fillStyle=`rgb(15 23 42 / 25%)`,n.fillRect(0,0,y,b),o){w.current&&S.current.length===0&&(w.current=!1,T.current?.());return}S.current=S.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}),w.current&&S.current.length===0&&(w.current=!1,T.current?.())}};return u(),a&&!o?r=window.setInterval(()=>E(),1200):a&&o&&E(),()=>{cancelAnimationFrame(C.current),clearInterval(r),s(),c()}},[a,b,E,y]),(0,u.jsxs)(`div`,{ref:v,className:d.fireworks,style:i?{width:`100%`,height:`100%`}:{width:y,height:b},children:[(0,u.jsx)(`canvas`,{ref:x,className:`${d.canvas} ${_?``:d.canvasPassthrough}`,style:{width:y,height:b,touchAction:_?`none`:`auto`},onPointerDown:_?e=>{let t=(0,l.getRelativePointerPosition)(e.currentTarget,e.nativeEvent);t&&E(t.x)}:void 0}),_&&s?(0,u.jsx)(`p`,{className:d.hint,children:s}):null]})});_.displayName=`Fireworks`,exports.Fireworks=_,exports.default=_;

package/dist/index.css

@@ -1 +1 @@
-.cos-fireworks-fsSqL{background:#0f172a;border-radius:12px;position:relative;overflow:hidden}.cos-canvas-spL8G{cursor:crosshair;display:block}.cos-hint-5XDRH{color:#94a3b8cc;pointer-events:none;margin:0;font-size:13px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}
+.cos-fireworks-fsSqL{background:#0f172a;border-radius:12px;position:relative;overflow:hidden}.cos-canvas-spL8G{cursor:crosshair;display:block}.cos-canvasPassthrough-jCNke{cursor:default;pointer-events:none}.cos-hint-5XDRH{color:#94a3b8cc;pointer-events:none;margin:0;font-size:13px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}

package/dist/index.js

@@ -4,6 +4,7 @@ import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import './index.css';var p = {
 	fireworks: "cos-fireworks-fsSqL",
 	canvas: "cos-canvas-spL8G",
+	canvasPassthrough: "cos-canvasPassthrough-jCNke",
 	hint: "cos-hint-5XDRH"
 }, m = [
 	"#ff6b6b",
@@ -27,35 +28,35 @@ import './index.css';var p = {
 		};
 	});
 }, 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({
+	let { width: y, height: b, fill: x = !1, auto: S = !0, interactive: C, hint: w = "点击画布燃放烟花", onComplete: T } = e, E = C ?? S, D = i(null), { width: O, height: k } = 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);
+		measured: u(D, { enabled: x })
+	}), A = i(null), j = i([]), M = i(0), N = i(!1), P = i(T);
 	n(() => {
-		M.current = w;
-	}, [w]);
-	let N = t((e) => {
-		let t = e ?? Math.random() * E * .6 + E * .2;
-		k.current.push({
+		P.current = T;
+	}, [T]);
+	let F = t((e) => {
+		let t = e ?? Math.random() * O * .6 + O * .2;
+		j.current.push({
 			x: t,
-			y: D,
+			y: k,
 			vy: -(Math.random() * 4 + 6),
-			targetY: Math.random() * D * .35 + D * .15,
+			targetY: Math.random() * k * .35 + k * .15,
 			color: _(),
 			exploded: !1,
 			particles: [],
 			age: 0
-		}), j.current = !0;
-	}, [D, E]);
-	return r(m, () => ({ launch: N }), [N]), n(() => {
-		let e = O.current;
+		}), N.current = !0;
+	}, [k, O]);
+	return r(m, () => ({ launch: F }), [F]), n(() => {
+		let e = A.current;
 		if (!e) return;
 		let t = window.devicePixelRatio || 1;
-		e.width = E * t, e.height = D * t;
+		e.width = O * t, e.height = k * t;
 		let n = e.getContext("2d");
 		if (!n) return;
 		n.setTransform(t, 0, 0, t, 0, 0);
@@ -64,55 +65,55 @@ import './index.css';var p = {
 		}), u = a((e) => {
 			s = e;
 		}), d = () => {
-			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?.());
+			if (M.current = requestAnimationFrame(d), !i) {
+				if (n.fillStyle = "rgb(15 23 42 / 25%)", n.fillRect(0, 0, O, k), s) {
+					N.current && j.current.length === 0 && (N.current = !1, P.current?.());
 					return;
 				}
-				k.current = k.current.filter((e) => {
+				j.current = j.current.filter((e) => {
 					if (!e.exploded) {
 						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;
-				}), j.current && k.current.length === 0 && (j.current = !1, M.current?.());
+				}), N.current && j.current.length === 0 && (N.current = !1, P.current?.());
 			}
 		};
-		return d(), S && !s ? r = window.setInterval(() => N(), 1200) : S && s && N(), () => {
-			cancelAnimationFrame(A.current), clearInterval(r), l(), u();
+		return d(), S && !s ? r = window.setInterval(() => F(), 1200) : S && s && F(), () => {
+			cancelAnimationFrame(M.current), clearInterval(r), l(), u();
 		};
 	}, [
 		S,
-		D,
-		N,
-		E
+		k,
+		F,
+		O
 	]), /* @__PURE__ */ f("div", {
-		ref: T,
+		ref: D,
 		className: p.fireworks,
 		style: x ? {
 			width: "100%",
 			height: "100%"
 		} : {
-			width: E,
-			height: D
+			width: O,
+			height: k
 		},
 		children: [/* @__PURE__ */ d("canvas", {
-			ref: O,
-			className: p.canvas,
+			ref: A,
+			className: `${p.canvas} ${E ? "" : p.canvasPassthrough}`,
 			style: {
-				width: E,
-				height: D,
-				touchAction: "none"
+				width: O,
+				height: k,
+				touchAction: E ? "none" : "auto"
 			},
-			onPointerDown: (e) => {
+			onPointerDown: E ? (e) => {
 				let t = s(e.currentTarget, e.nativeEvent);
-				t && N(t.x);
-			}
-		}), /* @__PURE__ */ d("p", {
+				t && F(t.x);
+			} : void 0
+		}), E && w ? /* @__PURE__ */ d("p", {
 			className: p.hint,
-			children: C
-		})]
+			children: w
+		}) : null]
 	});
 });
 y.displayName = "Fireworks";

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

@@ -6,5 +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';
+export { useElementSize, resolveCanvasBoxSize, useCanvasBox } from './use-element-size';
+export type { UseElementSizeOptions, CanvasBoxSizeInput, CanvasBoxSize, UseCanvasBoxOptions, UseCanvasBoxResult } from './use-element-size';

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

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { CSSProperties, RefObject } from 'react';
 import { ElementSize } from './size';
 export interface UseElementSizeOptions {
     /** 为 false 时不观察 */
@@ -23,3 +23,23 @@ export interface CanvasBoxSize {
 }
 /** 根据 fill / 显式宽高 / 测量结果解析画布逻辑尺寸 */
 export declare const resolveCanvasBoxSize: ({ fill, width, height, defaultWidth, defaultHeight, measured }: CanvasBoxSizeInput) => CanvasBoxSize;
+export interface UseCanvasBoxOptions {
+    /** 为 true 时铺满父容器（父级需有明确高度） */
+    fill?: boolean;
+    width?: number;
+    height?: number;
+    defaultWidth: number;
+    defaultHeight: number;
+}
+export interface UseCanvasBoxResult {
+    hostRef: RefObject<HTMLDivElement | null>;
+    width: number;
+    height: number;
+    /** 挂到宿主容器的样式（fill 时为 100%×100%） */
+    hostStyle: CSSProperties;
+    fill: boolean;
+    /** 是否处于 fill 模式且尚未量到有效尺寸 */
+    pending: boolean;
+}
+/** 画布/效果宿主尺寸：fill 时跟随父容器，否则用显式宽高或默认值 */
+export declare const useCanvasBox: ({ fill, width: widthProp, height: heightProp, defaultWidth, defaultHeight }: UseCanvasBoxOptions) => UseCanvasBoxResult;

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

@@ -6,7 +6,11 @@ export interface FireworksProps {
     fill?: boolean;
     /** 是否自动燃放，默认 true */
     auto?: boolean;
-    /** 画布操作提示 */
+    /**
+     * 是否响应点击燃放；默认跟随 auto（auto=false 时不拦截指针）
+     */
+    interactive?: boolean;
+    /** 画布操作提示；非 interactive 时不展示 */
     hint?: string;
     /** 画面空闲（无火箭/粒子）时回调 */
     onComplete?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cos-design/fireworks",
-  "version": "3.5.5",
+  "version": "3.5.6",
   "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.5"
+    "@cos-design/shared": "3.5.6"
   }
 }