@cos-design/smoke-fog 3.5.1 → 3.5.3

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={smokeFog:`cos-smokeFog-SYlts`,canvas:`cos-canvas-iOJV7`},f=({width:e=800,height:t=500,density:n=.5})=>{let r=(0,c.useRef)(null),i=(0,c.useRef)([]),a=(0,c.useRef)(0);return(0,c.useEffect)(()=>{let r=Math.floor(20+n*40);i.current=Array.from({length:r},()=>({x:Math.random()*e,y:Math.random()*t,radius:Math.random()*80+40,vx:(Math.random()-.5)*.4,vy:(Math.random()-.5)*.3-.1,alpha:Math.random()*.15+.05}))},[n,t,e]),(0,c.useEffect)(()=>{let n=r.current;if(!n)return;let o=window.devicePixelRatio||1;n.width=e*o,n.height=t*o;let s=n.getContext(`2d`);if(!s)return;s.setTransform(o,0,0,o,0,0);let c=0,u=document.hidden,d=(0,l.bindVisibilityPause)(e=>{u=e}),f=()=>{if(a.current=requestAnimationFrame(f),u)return;c+=.008,s.fillStyle=`#1a1a2e`,s.fillRect(0,0,e,t);let n=s.createRadialGradient(e*.5,t*.3,0,e*.5,t*.5,e*.7);n.addColorStop(0,`#2d2d44`),n.addColorStop(1,`#1a1a2e`),s.fillStyle=n,s.fillRect(0,0,e,t),i.current.forEach((n,r)=>{n.x+=n.vx+Math.sin(c+r)*.15,n.y+=n.vy+Math.cos(c*.7+r*.5)*.1,n.x<-n.radius&&(n.x=e+n.radius),n.x>e+n.radius&&(n.x=-n.radius),n.y<-n.radius&&(n.y=t+n.radius),n.y>t+n.radius&&(n.y=-n.radius);let i=s.createRadialGradient(n.x,n.y,0,n.x,n.y,n.radius);i.addColorStop(0,`rgb(200 200 210 / ${n.alpha})`),i.addColorStop(.5,`rgb(160 160 175 / ${n.alpha*.5})`),i.addColorStop(1,`rgb(160 160 175 / 0)`),s.fillStyle=i,s.beginPath(),s.arc(n.x,n.y,n.radius,0,Math.PI*2),s.fill()})};return f(),()=>{cancelAnimationFrame(a.current),d()}},[t,e]),(0,u.jsx)(`div`,{className:d.smokeFog,style:{width:e,height:t},children:(0,u.jsx)(`canvas`,{ref:r,className:d.canvas,style:{width:e,height:t}})})};exports.SmokeFog=f,exports.default=f;
+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={smokeFog:`cos-smokeFog-SYlts`,canvas:`cos-canvas-iOJV7`},f=(e,t)=>{let n=Math.random()*80+40,r=(Math.random()-.5)*.4,i=(Math.random()-.5)*.3-.1,a=Math.random()*.15+.05;return{x:Math.random()*e,y:Math.random()*t,radius:n,baseRadius:n,vx:r,vy:i,baseVx:r,baseVy:i,alpha:a,baseAlpha:a,mass:.55+(n-40)/80*.9,receptivity:.45+Math.random()*.9,phase:Math.random()*Math.PI*2}},p=(e,t,n,r)=>{let i=Math.cos(-n),a=Math.sin(-n),o=e*i-t*a,s=e*a+t*i;return Math.hypot(o/r,s*r)},m=({width:e=800,height:t=500,density:n=.5})=>{let r=(0,c.useRef)(null),i=(0,c.useRef)([]),a=(0,c.useRef)([]),o=(0,c.useRef)(0);(0,c.useEffect)(()=>{let r=Math.floor(20+n*40);i.current=Array.from({length:r},()=>f(e,t))},[n,t,e]);let s=(0,c.useCallback)((n,i)=>{let o=r.current;if(!o)return;let s=o.getBoundingClientRect(),c=(n-s.left)/s.width*e,l=(i-s.top)/s.height*t;a.current.push({x:c,y:l,life:1,windAngle:Math.random()*Math.PI*2,swirl:Math.random()<.5?-1:1,stretch:1.15+Math.random()*.55,radius:Math.min(e,t)*(.28+Math.random()*.12)})},[t,e]);return(0,c.useEffect)(()=>{let e=r.current;if(!e)return;let t=e=>s(e.clientX,e.clientY),n=e=>{let t=e.touches[0];t&&s(t.clientX,t.clientY)};return e.addEventListener(`click`,t),e.addEventListener(`touchstart`,n,{passive:!0}),()=>{e.removeEventListener(`click`,t),e.removeEventListener(`touchstart`,n)}},[s]),(0,c.useEffect)(()=>{let n=r.current;if(!n)return;let s=window.devicePixelRatio||1;n.width=e*s,n.height=t*s;let c=n.getContext(`2d`);if(!c)return;c.setTransform(s,0,0,s,0,0);let u=0,d=document.hidden,f=(0,l.bindVisibilityPause)(e=>{d=e}),m=()=>{if(o.current=requestAnimationFrame(m),d)return;u+=.008,c.fillStyle=`#1a1a2e`,c.fillRect(0,0,e,t);let n=c.createRadialGradient(e*.5,t*.3,0,e*.5,t*.5,e*.7);n.addColorStop(0,`#2d2d44`),n.addColorStop(1,`#1a1a2e`),c.fillStyle=n,c.fillRect(0,0,e,t);let r=i.current,s=a.current;for(let e=s.length-1;e>=0;e--){let t=s[e],n=t.life*t.life,i=t.life>.92?1:.22;for(let e of r){let r=e.x-t.x,a=e.y-t.y,o=p(r,a,t.windAngle,t.stretch);if(o>t.radius)continue;let s=(1-o/t.radius)**1.6,c=.55+.7*Math.sin(e.phase*3.1+o*.05+u*1.7),l=s*e.receptivity*c*i;if(l<.06)continue;let d=Math.hypot(r,a)||1,f=r/d,m=a/d,h=-m*t.swirl,g=f*t.swirl,_=Math.cos(t.windAngle),v=Math.sin(t.windAngle),y=1/e.mass,b=Math.sin(e.phase*5.3+u*3.2+o*.03),x=Math.cos(e.phase*2.7-u*2.1+o*.02),S=l*n*(2.4+b*.8)*y,C=l*n*(1.6+x*1.1)*y,w=l*n*(1.2+b*.6)*y,T=b*l*n*1.2*y,E=x*l*n*1.2*y;e.vx+=f*S+h*C+_*w+T,e.vy+=m*S+g*C+v*w+E,e.alpha*=1-l*n*(.28+Math.abs(b)*.18),e.radius+=e.baseRadius*l*n*(.1+Math.abs(x)*.16)}t.life*=.88,t.radius*=1.01,t.life<.05&&s.splice(e,1)}r.forEach((n,r)=>{n.x+=n.vx+Math.sin(u+r+n.phase)*.15,n.y+=n.vy+Math.cos(u*.7+r*.5+n.phase)*.1;let i=.014+n.mass*.01;n.vx+=(n.baseVx-n.vx)*i,n.vy+=(n.baseVy-n.vy)*i,n.alpha+=(n.baseAlpha-n.alpha)*.01,n.radius+=(n.baseRadius-n.radius)*.012,n.x<-n.radius&&(n.x=e+n.radius),n.x>e+n.radius&&(n.x=-n.radius),n.y<-n.radius&&(n.y=t+n.radius),n.y>t+n.radius&&(n.y=-n.radius);let a=c.createRadialGradient(n.x,n.y,0,n.x,n.y,n.radius);a.addColorStop(0,`rgb(200 200 210 / ${n.alpha})`),a.addColorStop(.5,`rgb(160 160 175 / ${n.alpha*.5})`),a.addColorStop(1,`rgb(160 160 175 / 0)`),c.fillStyle=a,c.beginPath(),c.arc(n.x,n.y,n.radius,0,Math.PI*2),c.fill()})};return m(),()=>{cancelAnimationFrame(o.current),f()}},[t,e]),(0,u.jsx)(`div`,{className:d.smokeFog,style:{width:e,height:t},children:(0,u.jsx)(`canvas`,{ref:r,className:d.canvas,style:{width:e,height:t}})})};exports.SmokeFog=m,exports.default=m;

package/dist/index.css

@@ -1 +1 @@
-.cos-smokeFog-SYlts{background:#1a1a2e;border-radius:12px;overflow:hidden}.cos-canvas-iOJV7{display:block}
+.cos-smokeFog-SYlts{background:#1a1a2e;border-radius:12px;overflow:hidden}.cos-canvas-iOJV7{cursor:pointer;touch-action:manipulation;display:block}

package/dist/index.js

@@ -1,63 +1,117 @@
-import { useEffect as e, useRef as t } from "react";
-import { bindVisibilityPause as n } from "@cos-design/shared";
-import { jsx as r } from "react/jsx-runtime";
-import './index.css';var i = {
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+import { bindVisibilityPause as r } from "@cos-design/shared";
+import { jsx as i } from "react/jsx-runtime";
+import './index.css';var a = {
 	smokeFog: "cos-smokeFog-SYlts",
 	canvas: "cos-canvas-iOJV7"
-}, a = ({ width: a = 800, height: o = 500, density: s = .5 }) => {
-	let c = t(null), l = t([]), u = t(0);
-	return e(() => {
-		let e = Math.floor(20 + s * 40);
-		l.current = Array.from({ length: e }, () => ({
-			x: Math.random() * a,
-			y: Math.random() * o,
-			radius: Math.random() * 80 + 40,
-			vx: (Math.random() - .5) * .4,
-			vy: (Math.random() - .5) * .3 - .1,
-			alpha: Math.random() * .15 + .05
-		}));
+}, o = (e, t) => {
+	let n = Math.random() * 80 + 40, r = (Math.random() - .5) * .4, i = (Math.random() - .5) * .3 - .1, a = Math.random() * .15 + .05;
+	return {
+		x: Math.random() * e,
+		y: Math.random() * t,
+		radius: n,
+		baseRadius: n,
+		vx: r,
+		vy: i,
+		baseVx: r,
+		baseVy: i,
+		alpha: a,
+		baseAlpha: a,
+		mass: .55 + (n - 40) / 80 * .9,
+		receptivity: .45 + Math.random() * .9,
+		phase: Math.random() * Math.PI * 2
+	};
+}, s = (e, t, n, r) => {
+	let i = Math.cos(-n), a = Math.sin(-n), o = e * i - t * a, s = e * a + t * i;
+	return Math.hypot(o / r, s * r);
+}, c = ({ width: c = 800, height: l = 500, density: u = .5 }) => {
+	let d = n(null), f = n([]), p = n([]), m = n(0);
+	t(() => {
+		let e = Math.floor(20 + u * 40);
+		f.current = Array.from({ length: e }, () => o(c, l));
 	}, [
-		s,
-		o,
-		a
-	]), e(() => {
-		let e = c.current;
+		u,
+		l,
+		c
+	]);
+	let h = e((e, t) => {
+		let n = d.current;
+		if (!n) return;
+		let r = n.getBoundingClientRect(), i = (e - r.left) / r.width * c, a = (t - r.top) / r.height * l;
+		p.current.push({
+			x: i,
+			y: a,
+			life: 1,
+			windAngle: Math.random() * Math.PI * 2,
+			swirl: Math.random() < .5 ? -1 : 1,
+			stretch: 1.15 + Math.random() * .55,
+			radius: Math.min(c, l) * (.28 + Math.random() * .12)
+		});
+	}, [l, c]);
+	return t(() => {
+		let e = d.current;
+		if (!e) return;
+		let t = (e) => h(e.clientX, e.clientY), n = (e) => {
+			let t = e.touches[0];
+			t && h(t.clientX, t.clientY);
+		};
+		return e.addEventListener("click", t), e.addEventListener("touchstart", n, { passive: !0 }), () => {
+			e.removeEventListener("click", t), e.removeEventListener("touchstart", n);
+		};
+	}, [h]), t(() => {
+		let e = d.current;
 		if (!e) return;
 		let t = window.devicePixelRatio || 1;
-		e.width = a * t, e.height = o * t;
-		let r = e.getContext("2d");
-		if (!r) return;
-		r.setTransform(t, 0, 0, t, 0, 0);
-		let i = 0, s = document.hidden, d = n((e) => {
-			s = e;
-		}), f = () => {
-			if (u.current = requestAnimationFrame(f), s) return;
-			i += .008, r.fillStyle = "#1a1a2e", r.fillRect(0, 0, a, o);
-			let e = r.createRadialGradient(a * .5, o * .3, 0, a * .5, o * .5, a * .7);
-			e.addColorStop(0, "#2d2d44"), e.addColorStop(1, "#1a1a2e"), r.fillStyle = e, r.fillRect(0, 0, a, o), l.current.forEach((e, t) => {
-				e.x += e.vx + Math.sin(i + t) * .15, e.y += e.vy + Math.cos(i * .7 + t * .5) * .1, e.x < -e.radius && (e.x = a + e.radius), e.x > a + e.radius && (e.x = -e.radius), e.y < -e.radius && (e.y = o + e.radius), e.y > o + e.radius && (e.y = -e.radius);
-				let n = r.createRadialGradient(e.x, e.y, 0, e.x, e.y, e.radius);
-				n.addColorStop(0, `rgb(200 200 210 / ${e.alpha})`), n.addColorStop(.5, `rgb(160 160 175 / ${e.alpha * .5})`), n.addColorStop(1, "rgb(160 160 175 / 0)"), r.fillStyle = n, r.beginPath(), r.arc(e.x, e.y, e.radius, 0, Math.PI * 2), r.fill();
+		e.width = c * t, e.height = l * t;
+		let n = e.getContext("2d");
+		if (!n) return;
+		n.setTransform(t, 0, 0, t, 0, 0);
+		let i = 0, a = document.hidden, o = r((e) => {
+			a = e;
+		}), u = () => {
+			if (m.current = requestAnimationFrame(u), a) return;
+			i += .008, n.fillStyle = "#1a1a2e", n.fillRect(0, 0, c, l);
+			let e = n.createRadialGradient(c * .5, l * .3, 0, c * .5, l * .5, c * .7);
+			e.addColorStop(0, "#2d2d44"), e.addColorStop(1, "#1a1a2e"), n.fillStyle = e, n.fillRect(0, 0, c, l);
+			let t = f.current, r = p.current;
+			for (let e = r.length - 1; e >= 0; e--) {
+				let n = r[e], a = n.life * n.life, o = n.life > .92 ? 1 : .22;
+				for (let e of t) {
+					let t = e.x - n.x, r = e.y - n.y, c = s(t, r, n.windAngle, n.stretch);
+					if (c > n.radius) continue;
+					let l = (1 - c / n.radius) ** 1.6, u = .55 + .7 * Math.sin(e.phase * 3.1 + c * .05 + i * 1.7), d = l * e.receptivity * u * o;
+					if (d < .06) continue;
+					let f = Math.hypot(t, r) || 1, p = t / f, m = r / f, h = -m * n.swirl, g = p * n.swirl, _ = Math.cos(n.windAngle), v = Math.sin(n.windAngle), y = 1 / e.mass, b = Math.sin(e.phase * 5.3 + i * 3.2 + c * .03), x = Math.cos(e.phase * 2.7 - i * 2.1 + c * .02), S = d * a * (2.4 + b * .8) * y, C = d * a * (1.6 + x * 1.1) * y, w = d * a * (1.2 + b * .6) * y, T = b * d * a * 1.2 * y, E = x * d * a * 1.2 * y;
+					e.vx += p * S + h * C + _ * w + T, e.vy += m * S + g * C + v * w + E, e.alpha *= 1 - d * a * (.28 + Math.abs(b) * .18), e.radius += e.baseRadius * d * a * (.1 + Math.abs(x) * .16);
+				}
+				n.life *= .88, n.radius *= 1.01, n.life < .05 && r.splice(e, 1);
+			}
+			t.forEach((e, t) => {
+				e.x += e.vx + Math.sin(i + t + e.phase) * .15, e.y += e.vy + Math.cos(i * .7 + t * .5 + e.phase) * .1;
+				let r = .014 + e.mass * .01;
+				e.vx += (e.baseVx - e.vx) * r, e.vy += (e.baseVy - e.vy) * r, e.alpha += (e.baseAlpha - e.alpha) * .01, e.radius += (e.baseRadius - e.radius) * .012, e.x < -e.radius && (e.x = c + e.radius), e.x > c + e.radius && (e.x = -e.radius), e.y < -e.radius && (e.y = l + e.radius), e.y > l + e.radius && (e.y = -e.radius);
+				let a = n.createRadialGradient(e.x, e.y, 0, e.x, e.y, e.radius);
+				a.addColorStop(0, `rgb(200 200 210 / ${e.alpha})`), a.addColorStop(.5, `rgb(160 160 175 / ${e.alpha * .5})`), a.addColorStop(1, "rgb(160 160 175 / 0)"), n.fillStyle = a, n.beginPath(), n.arc(e.x, e.y, e.radius, 0, Math.PI * 2), n.fill();
 			});
 		};
-		return f(), () => {
-			cancelAnimationFrame(u.current), d();
+		return u(), () => {
+			cancelAnimationFrame(m.current), o();
 		};
-	}, [o, a]), /* @__PURE__ */ r("div", {
-		className: i.smokeFog,
+	}, [l, c]), /* @__PURE__ */ i("div", {
+		className: a.smokeFog,
 		style: {
-			width: a,
-			height: o
+			width: c,
+			height: l
 		},
-		children: /* @__PURE__ */ r("canvas", {
-			ref: c,
-			className: i.canvas,
+		children: /* @__PURE__ */ i("canvas", {
+			ref: d,
+			className: a.canvas,
 			style: {
-				width: a,
-				height: o
+				width: c,
+				height: l
 			}
 		})
 	});
 };
 //#endregion
-export { a as SmokeFog, a as default };
+export { c as SmokeFog, c as default };

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

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 export interface SmokeFogProps {
     width?: number;
     height?: number;
-    /** 雾气密度 0~1，默认 0.5 */
+    /** 雾气密度 0~1，默认 0.5；点击/触摸画面可使雾气向外散开 */
     density?: number;
 }
 declare const SmokeFog: React.FC<SmokeFogProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cos-design/smoke-fog",
-  "version": "3.5.1",
+  "version": "3.5.3",
   "description": "SmokeFog 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.1"
+    "@cos-design/shared": "3.5.3"
   }
 }