@cos-design/fireworks 3.5.2 → 3.5.4

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=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=_;

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 } from "@cos-design/shared";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import './index.css';var d = {
 	fireworks: "cos-fireworks-fsSqL",
 	canvas: "cos-canvas-spL8G",
 	hint: "cos-hint-5XDRH"
-}, l = [
+}, f = [
 	"#ff6b6b",
 	"#ffd93d",
 	"#6bcb77",
 	"#4d96ff",
 	"#a66cff",
 	"#ff85c0"
-], u = .12, d = 240, f = () => l[Math.floor(Math.random() * l.length)], p = (e, t, n) => {
+], 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;
@@ -22,75 +22,88 @@ 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 : h(),
 			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,
+}, _ = 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);
+	n(() => {
+		E.current = x;
+	}, [x]);
+	let D = t((e) => {
+		let t = e ?? Math.random() * _ * .6 + _ * .2;
+		C.current.push({
+			x: t,
+			y: v,
 			vy: -(Math.random() * 4 + 6),
-			targetY: Math.random() * l * .35 + l * .15,
-			color: f(),
+			targetY: Math.random() * v * .35 + v * .15,
+			color: h(),
 			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;
+		}), T.current = !0;
+	}, [v, _]);
+	return r(f, () => ({ launch: D }), [D]), n(() => {
+		let e = S.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, s = c(), l = o((e) => {
+			i = e;
+		}), 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?.());
+					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;
-			}));
+				C.current = C.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;
+				}), T.current && C.current.length === 0 && (T.current = !1, E.current?.());
+			}
 		};
-		return c(), m && (i = window.setInterval(() => y(), 1200)), () => {
-			cancelAnimationFrame(v.current), clearInterval(i), s();
+		return d(), y && !s ? r = window.setInterval(() => D(), 1200) : y && s && D(), () => {
+			cancelAnimationFrame(w.current), clearInterval(r), l(), u();
 		};
 	}, [
-		m,
-		l,
 		y,
-		e
-	]), /* @__PURE__ */ s("div", {
-		className: c.fireworks,
+		v,
+		D,
+		_
+	]), /* @__PURE__ */ u("div", {
+		className: d.fireworks,
 		style: {
-			width: e,
-			height: l
+			width: _,
+			height: v
 		},
-		children: [/* @__PURE__ */ o("canvas", {
-			ref: g,
-			className: c.canvas,
+		children: [/* @__PURE__ */ l("canvas", {
+			ref: S,
+			className: d.canvas,
 			style: {
-				width: e,
-				height: l
+				width: _,
+				height: v,
+				touchAction: "none"
 			},
-			onClick: (e) => {
-				let t = e.currentTarget.getBoundingClientRect();
-				y(e.clientX - t.left);
+			onPointerDown: (e) => {
+				let t = s(e.currentTarget, e.nativeEvent);
+				t && D(t.x);
 			}
-		}), /* @__PURE__ */ o("p", {
-			className: c.hint,
-			children: "点击画布燃放烟花"
+		}), /* @__PURE__ */ l("p", {
+			className: d.hint,
+			children: b
 		})]
 	});
 });
-m.displayName = "Fireworks";
+_.displayName = "Fireworks";
 //#endregion
-export { m as Fireworks, m as default };
+export { _ as Fireworks, _ as default };

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

@@ -1,3 +1,8 @@
-/** 注册 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';

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/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

@@ -4,6 +4,10 @@ export interface FireworksProps {
     height?: number;
     /** 是否自动燃放，默认 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.2",
+  "version": "3.5.4",
   "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.2"
+    "@cos-design/shared": "3.5.4"
   }
 }