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

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

@@ -1,3 +1,10 @@
-/** 注册 visibilitychange，页面隐藏时暂停动画循环 */
-export declare const bindVisibilityPause: (onChange: (paused: boolean) => void) => () => void;
-export declare const clamp: (value: number, min: number, max: number) => number;
+export { clamp } from './math';
+export { bindVisibilityPause } from './visibility';
+export { prefersReducedMotion, bindPrefersReducedMotion } from './reduced-motion';
+export { observeElementSize } from './size';
+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/math.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

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

@@ -0,0 +1,15 @@
+/** 图片预览组件通用照片项 */
+export interface PhotoItem {
+    /** 图片地址 */
+    src: string;
+    /** 图片替代文本 */
+    alt?: string;
+    /** 照片标题 */
+    title?: string;
+    /** 照片说明 */
+    description?: string;
+}
+/** 线性浏览：当前索引变化（相册 / 胶卷 / 晾绳等） */
+export type PhotoIndexChangeHandler<T = PhotoItem> = (index: number, photo: T) => void;
+/** 环形浏览：正对镜头的面变化（走马灯 / 旋转木马等） */
+export type PhotoFaceChangeHandler<T = PhotoItem> = (index: number, photo?: T) => void;

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

@@ -0,0 +1,14 @@
+export interface PointerPosition {
+    x: number;
+    y: number;
+}
+type PointLike = {
+    clientX: number;
+    clientY: number;
+};
+/** 相对元素左上角的指针坐标（兼容 mouse / touch / pointer） */
+export declare const getRelativePointerPosition: (element: Element, event: PointLike | {
+    touches?: ArrayLike<PointLike>;
+    changedTouches?: ArrayLike<PointLike>;
+}) => PointerPosition | null;
+export {};

package/dist/packages/shared/src/reduced-motion.d.ts

@@ -0,0 +1,4 @@
+/** 当前是否偏好减少动效 */
+export declare const prefersReducedMotion: () => boolean;
+/** 监听 prefers-reduced-motion 变化；返回取消订阅函数 */
+export declare const bindPrefersReducedMotion: (onChange: (reduced: boolean) => void) => () => void;

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

@@ -0,0 +1,8 @@
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+/** 观察元素内容尺寸；返回取消订阅函数 */
+export declare const observeElementSize: (element: Element, onChange: (size: ElementSize) => void, options?: {
+    box?: ResizeObserverBoxOptions;
+}) => () => void;

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/packages/shared/src/visibility.d.ts

@@ -0,0 +1,2 @@
+/** 注册 visibilitychange，页面隐藏时暂停动画循环 */
+export declare const bindVisibilityPause: (onChange: (paused: boolean) => void) => () => void;

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

@@ -2,8 +2,14 @@ import { default as React } from 'react';
 export interface FireworksProps {
     width?: number;
     height?: number;
+    /** 为 true 时铺满父容器（父级需有明确高度） */
+    fill?: boolean;
     /** 是否自动燃放，默认 true */
     auto?: boolean;
+    /** 画布操作提示 */
+    hint?: string;
+    /** 画面空闲（无火箭/粒子）时回调 */
+    onComplete?: () => void;
 }
 export interface FireworksHandle {
     /** 手动燃放烟花，可指定 x 坐标 */

package/package.json

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