@cos-design/fireworks 3.5.4 → 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=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`,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

@@ -1,18 +1,19 @@
 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",
+	canvasPassthrough: "cos-canvasPassthrough-jCNke",
 	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 +23,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, 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(D, { enabled: x })
+	}), A = i(null), j = i([]), M = i(0), N = i(!1), P = i(T);
 	n(() => {
-		E.current = x;
-	}, [x]);
-	let D = t((e) => {
-		let t = e ?? Math.random() * _ * .6 + _ * .2;
-		C.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: v,
+			y: k,
 			vy: -(Math.random() * 4 + 6),
-			targetY: Math.random() * v * .35 + v * .15,
-			color: h(),
+			targetY: Math.random() * k * .35 + k * .15,
+			color: _(),
 			exploded: !1,
 			particles: [],
 			age: 0
-		}), T.current = !0;
-	}, [v, _]);
-	return r(f, () => ({ launch: D }), [D]), n(() => {
-		let e = S.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 = _ * t, e.height = v * 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);
@@ -57,53 +65,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 (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;
 				}
-				C.current = C.current.filter((e) => {
+				j.current = j.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?.());
+				}), N.current && j.current.length === 0 && (N.current = !1, P.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(() => F(), 1200) : S && s && F(), () => {
+			cancelAnimationFrame(M.current), clearInterval(r), l(), u();
 		};
 	}, [
-		y,
-		v,
-		D,
-		_
-	]), /* @__PURE__ */ u("div", {
-		className: d.fireworks,
-		style: {
-			width: _,
-			height: v
+		S,
+		k,
+		F,
+		O
+	]), /* @__PURE__ */ f("div", {
+		ref: D,
+		className: p.fireworks,
+		style: x ? {
+			width: "100%",
+			height: "100%"
+		} : {
+			width: O,
+			height: k
 		},
-		children: [/* @__PURE__ */ l("canvas", {
-			ref: S,
-			className: d.canvas,
+		children: [/* @__PURE__ */ d("canvas", {
+			ref: A,
+			className: `${p.canvas} ${E ? "" : p.canvasPassthrough}`,
 			style: {
-				width: _,
-				height: v,
-				touchAction: "none"
+				width: O,
+				height: k,
+				touchAction: E ? "none" : "auto"
 			},
-			onPointerDown: (e) => {
+			onPointerDown: E ? (e) => {
 				let t = s(e.currentTarget, e.nativeEvent);
-				t && D(t.x);
-			}
-		}), /* @__PURE__ */ l("p", {
-			className: d.hint,
-			children: b
-		})]
+				t && F(t.x);
+			} : void 0
+		}), E && w ? /* @__PURE__ */ d("p", {
+			className: p.hint,
+			children: w
+		}) : null]
 	});
 });
-_.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, 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

@@ -0,0 +1,45 @@
+import { CSSProperties, 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;
+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

@@ -2,9 +2,15 @@ import { default as React } from 'react';
 export interface FireworksProps {
     width?: number;
     height?: number;
+    /** 为 true 时铺满父容器（父级需有明确高度） */
+    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.4",
+  "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.4"
+    "@cos-design/shared": "3.5.6"
   }
 }