@cos-design/rope-chain 3.5.1

package/LICENSE

@@ -0,0 +1,22 @@
+MIT LICENSE
+
+Copyright (c) 2021-present jiaxiantao
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/index.cjs

@@ -0,0 +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={ropeChain:`cos-ropeChain-gYaSK`,canvas:`cos-canvas-5i95N`},f=({width:e=400,height:t=400,segments:n=16,color:r=`#38bdf8`,gravity:i=.4})=>{let a=(0,c.useRef)(null),o=(0,c.useRef)([]),s=(0,c.useRef)({active:!1,index:-1});return(0,c.useEffect)(()=>{let r=Math.max(4,Math.min(n,30)),i=t*.7/r,a=e/2,s=t*.08;o.current=Array.from({length:r+1},(e,t)=>({x:a,y:s+t*i,prevX:a,prevY:s+t*i,pinned:t===0}))},[t,n,e]),(0,c.useEffect)(()=>{let c=a.current;if(!c)return;let u=window.devicePixelRatio||1;c.width=e*u,c.height=t*u;let d=c.getContext(`2d`);if(!d)return;d.setTransform(u,0,0,u,0,0);let f=Math.max(4,Math.min(n,30)),p=t*.7/f,m=(e,t)=>{let n=o.current,r=-1,i=30;return n.forEach((n,a)=>{let o=Math.hypot(n.x-e,n.y-t);o<i&&(i=o,r=a)}),r},h=(e,t)=>{let n=c.getBoundingClientRect(),r=e-n.left,i=t-n.top,a=m(r,i);if(a>=0){s.current={active:!0,index:a};let e=o.current[a];e.x=r,e.y=i,e.prevX=r,e.prevY=i}},g=(e,t)=>{if(!s.current.active)return;let n=c.getBoundingClientRect(),r=o.current[s.current.index];r.x=e-n.left,r.y=t-n.top},_=()=>{s.current={active:!1,index:-1}},v=e=>h(e.clientX,e.clientY),y=e=>g(e.clientX,e.clientY),b=e=>{e.touches[0]&&h(e.touches[0].clientX,e.touches[0].clientY)},x=e=>{e.touches[0]&&g(e.touches[0].clientX,e.touches[0].clientY)};c.addEventListener(`mousedown`,v),c.addEventListener(`mousemove`,y),window.addEventListener(`mouseup`,_),c.addEventListener(`touchstart`,b,{passive:!0}),c.addEventListener(`touchmove`,x,{passive:!0}),window.addEventListener(`touchend`,_);let S=0,C=document.hidden,w=(0,l.bindVisibilityPause)(e=>{C=e}),T=()=>{if(S=requestAnimationFrame(T),C)return;let n=o.current,a=s.current;for(let e of n){if(e.pinned||a.active&&n.indexOf(e)===a.index)continue;let t=(e.x-e.prevX)*.99,r=(e.y-e.prevY)*.99;e.prevX=e.x,e.prevY=e.y,e.x+=t,e.y+=r,e.y+=i}for(let e=0;e<6;e++)for(let e=0;e<n.length-1;e++){let t=n[e],r=n[e+1],i=r.x-t.x,o=r.y-t.y,s=Math.hypot(i,o)||.001,c=(s-p)/s,l=i*c*.5,u=o*c*.5;!t.pinned&&!(a.active&&e===a.index)&&(t.x+=l,t.y+=u),!r.pinned&&!(a.active&&e+1===a.index)&&(r.x-=l,r.y-=u)}d.fillStyle=`#0f172a`,d.fillRect(0,0,e,t),d.beginPath(),n.forEach((e,t)=>t===0?d.moveTo(e.x,e.y):d.lineTo(e.x,e.y)),d.strokeStyle=r,d.lineWidth=3,d.lineCap=`round`,d.lineJoin=`round`,d.shadowColor=r,d.shadowBlur=8,d.stroke(),d.shadowBlur=0,n.forEach((e,t)=>{(t===0||t===n.length-1||t%4==0)&&(d.beginPath(),d.arc(e.x,e.y,t===0?6:4,0,Math.PI*2),d.fillStyle=t===0?`#94a3b8`:r,d.fill())})};return T(),()=>{cancelAnimationFrame(S),w(),c.removeEventListener(`mousedown`,v),c.removeEventListener(`mousemove`,y),window.removeEventListener(`mouseup`,_),c.removeEventListener(`touchstart`,b),c.removeEventListener(`touchmove`,x),window.removeEventListener(`touchend`,_)}},[r,i,t,n,e]),(0,u.jsx)(`div`,{className:d.ropeChain,style:{width:e,height:t},children:(0,u.jsx)(`canvas`,{ref:a,className:d.canvas,style:{width:e,height:t}})})};exports.RopeChain=f,exports.default=f;

package/dist/index.css

@@ -0,0 +1 @@
+.cos-ropeChain-gYaSK{cursor:grab;background:#0f172a;border-radius:12px;overflow:hidden}.cos-ropeChain-gYaSK:active{cursor:grabbing}.cos-canvas-5i95N{display:block}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './src/components/ropeChain/index';
+export { default as RopeChain } from './src/components/ropeChain/index';
+export type * from './src/components/ropeChain/index';

package/dist/index.js

@@ -0,0 +1,108 @@
+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 = {
+	ropeChain: "cos-ropeChain-gYaSK",
+	canvas: "cos-canvas-5i95N"
+}, a = ({ width: a = 400, height: o = 400, segments: s = 16, color: c = "#38bdf8", gravity: l = .4 }) => {
+	let u = t(null), d = t([]), f = t({
+		active: !1,
+		index: -1
+	});
+	return e(() => {
+		let e = Math.max(4, Math.min(s, 30)), t = o * .7 / e, n = a / 2, r = o * .08;
+		d.current = Array.from({ length: e + 1 }, (e, i) => ({
+			x: n,
+			y: r + i * t,
+			prevX: n,
+			prevY: r + i * t,
+			pinned: i === 0
+		}));
+	}, [
+		o,
+		s,
+		a
+	]), e(() => {
+		let e = u.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 = Math.max(4, Math.min(s, 30)), p = o * .7 / i, m = (e, t) => {
+			let n = d.current, r = -1, i = 30;
+			return n.forEach((n, a) => {
+				let o = Math.hypot(n.x - e, n.y - t);
+				o < i && (i = o, r = a);
+			}), r;
+		}, h = (t, n) => {
+			let r = e.getBoundingClientRect(), i = t - r.left, a = n - r.top, o = m(i, a);
+			if (o >= 0) {
+				f.current = {
+					active: !0,
+					index: o
+				};
+				let e = d.current[o];
+				e.x = i, e.y = a, e.prevX = i, e.prevY = a;
+			}
+		}, g = (t, n) => {
+			if (!f.current.active) return;
+			let r = e.getBoundingClientRect(), i = d.current[f.current.index];
+			i.x = t - r.left, i.y = n - r.top;
+		}, _ = () => {
+			f.current = {
+				active: !1,
+				index: -1
+			};
+		}, v = (e) => h(e.clientX, e.clientY), y = (e) => g(e.clientX, e.clientY), b = (e) => {
+			e.touches[0] && h(e.touches[0].clientX, e.touches[0].clientY);
+		}, x = (e) => {
+			e.touches[0] && g(e.touches[0].clientX, e.touches[0].clientY);
+		};
+		e.addEventListener("mousedown", v), e.addEventListener("mousemove", y), window.addEventListener("mouseup", _), e.addEventListener("touchstart", b, { passive: !0 }), e.addEventListener("touchmove", x, { passive: !0 }), window.addEventListener("touchend", _);
+		let S = 0, C = document.hidden, w = n((e) => {
+			C = e;
+		}), T = () => {
+			if (S = requestAnimationFrame(T), C) return;
+			let e = d.current, t = f.current;
+			for (let n of e) {
+				if (n.pinned || t.active && e.indexOf(n) === t.index) continue;
+				let r = (n.x - n.prevX) * .99, i = (n.y - n.prevY) * .99;
+				n.prevX = n.x, n.prevY = n.y, n.x += r, n.y += i, n.y += l;
+			}
+			for (let n = 0; n < 6; n++) for (let n = 0; n < e.length - 1; n++) {
+				let r = e[n], i = e[n + 1], a = i.x - r.x, o = i.y - r.y, s = Math.hypot(a, o) || .001, c = (s - p) / s, l = a * c * .5, u = o * c * .5;
+				!r.pinned && !(t.active && n === t.index) && (r.x += l, r.y += u), !i.pinned && !(t.active && n + 1 === t.index) && (i.x -= l, i.y -= u);
+			}
+			r.fillStyle = "#0f172a", r.fillRect(0, 0, a, o), r.beginPath(), e.forEach((e, t) => t === 0 ? r.moveTo(e.x, e.y) : r.lineTo(e.x, e.y)), r.strokeStyle = c, r.lineWidth = 3, r.lineCap = "round", r.lineJoin = "round", r.shadowColor = c, r.shadowBlur = 8, r.stroke(), r.shadowBlur = 0, e.forEach((t, n) => {
+				(n === 0 || n === e.length - 1 || n % 4 == 0) && (r.beginPath(), r.arc(t.x, t.y, n === 0 ? 6 : 4, 0, Math.PI * 2), r.fillStyle = n === 0 ? "#94a3b8" : c, r.fill());
+			});
+		};
+		return T(), () => {
+			cancelAnimationFrame(S), w(), e.removeEventListener("mousedown", v), e.removeEventListener("mousemove", y), window.removeEventListener("mouseup", _), e.removeEventListener("touchstart", b), e.removeEventListener("touchmove", x), window.removeEventListener("touchend", _);
+		};
+	}, [
+		c,
+		l,
+		o,
+		s,
+		a
+	]), /* @__PURE__ */ r("div", {
+		className: i.ropeChain,
+		style: {
+			width: a,
+			height: o
+		},
+		children: /* @__PURE__ */ r("canvas", {
+			ref: u,
+			className: i.canvas,
+			style: {
+				width: a,
+				height: o
+			}
+		})
+	});
+};
+//#endregion
+export { a as RopeChain, a as default };

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

@@ -0,0 +1,3 @@
+export { default } from '../../../src/components/ropeChain';
+export { default as RopeChain } from '../../../src/components/ropeChain';
+export type * from '../../../src/components/ropeChain';

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

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

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface RopeChainProps {
+    width?: number;
+    height?: number;
+    segments?: number;
+    color?: string;
+    gravity?: number;
+}
+declare const RopeChain: React.FC<RopeChainProps>;
+export default RopeChain;

package/dist/src/vite-env.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="vite/client" />
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.mp3' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  import type { FC, SVGProps } from 'react';
+
+  export const ReactComponent: FC<SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@cos-design/rope-chain",
+  "version": "3.5.1",
+  "description": "RopeChain component from cos-design",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.less"
+  ],
+  "keywords": [
+    "cos-design",
+    "react",
+    "ropeChain",
+    "RopeChain"
+  ],
+  "homepage": "https://jiaxiantao.github.io/cos-design/",
+  "bugs": {
+    "url": "https://github.com/jiaxiantao/cos-design/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jiaxiantao/cos-design.git",
+    "directory": "packages/ropeChain"
+  },
+  "author": "jiaxiantao <jiaxiantao@souche.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "dependencies": {
+    "@cos-design/shared": "3.5.1"
+  }
+}