From bd4c29eada9d20d5f949256ff7df0b61b6c02b64 Mon Sep 17 00:00:00 2001 From: kfd Date: Mon, 9 Oct 2023 17:52:49 +0800 Subject: [PATCH 1/5] feat: init next for upgrate g to latest --- package.json | 14 +- src/App.tsx | 2 +- src/components/g-audio.tsx | 18 +- src/components/s-line.tsx | 20 +- src/hooks/useAudioImg.ts | 20 +- src/utils/base.ts | 61 +- vite.config.ts | 4 +- yarn.lock | 1158 ++++++++++++++++++++++-------------- 8 files changed, 778 insertions(+), 519 deletions(-) diff --git a/package.json b/package.json index f2151cf..025ce74 100644 --- a/package.json +++ b/package.json @@ -19,18 +19,20 @@ "serve": "vite preview" }, "dependencies": { - "@antv/g-canvas": "^0.5.10", - "@types/d3": "^6.7.0", + "@antv/g": "^5.18.14", + "@antv/g-canvas": "^1.11.17", "d3": "^7.0.0", "react": "^17.0.0", "react-dom": "^17.0.0" }, "devDependencies": { + "@types/d3": "^6.7.0", + "@types/node": "^20.8.3", "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", - "@vitejs/plugin-react-refresh": "^1.3.1", - "sass": "^1.35.0", - "typescript": "^4.3.2", - "vite": "^2.3.7" + "@vitejs/plugin-react": "^4.1.0", + "sass": "^1.69.0", + "typescript": "^5.2.2", + "vite": "^4.4.11" } } diff --git a/src/App.tsx b/src/App.tsx index f5e50d9..1049fa5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React from 'react' import GAudio from './components/g-audio' function App() { diff --git a/src/components/g-audio.tsx b/src/components/g-audio.tsx index c487ac9..ba06d12 100644 --- a/src/components/g-audio.tsx +++ b/src/components/g-audio.tsx @@ -2,18 +2,20 @@ import React, { useEffect, useRef, useState } from "react"; import { MusicVisualizer } from '../plugins/MusicVisualizer' import style from './g-audio.module.scss' import SLine from './s-line' -import SPath from './s-path' -import SPathDot from './s-path-dot' -import SPathFill from './s-path-fill' -import SCircle from './s-circle' -import SPathDouble from './s-path-double' -import SDot from "./s-dot"; -import SPaticle from "./s-particle"; +// import SPath from './s-path' +// import SPathDot from './s-path-dot' +// import SPathFill from './s-path-fill' +// import SCircle from './s-circle' +// import SPathDouble from './s-path-double' +// import SDot from "./s-dot"; +// import SPaticle from "./s-particle"; import { apiURL, DEFAULT_IMG } from '@/global' export const MusicVisualizerCtx = new MusicVisualizer() -const exampleList = [SLine, SPathDouble, SPath, SPathFill, SCircle, SPaticle, SDot, SPathDot] +// const exampleList = [SLine, SPathDouble, SPath, SPathFill, SCircle, SPaticle, SDot, SPathDot] + +const exampleList = [SLine] export default function GAudio() { const audio = useRef(null) diff --git a/src/components/s-line.tsx b/src/components/s-line.tsx index a21f311..3023ec6 100644 --- a/src/components/s-line.tsx +++ b/src/components/s-line.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from "react"; -import { Canvas } from '@antv/g-canvas'; -import { IElement, IShape } from "@antv/g-canvas/lib/types"; +import { Canvas, Image, Rect, DisplayObject } from '@antv/g'; +import { Renderer } from '@antv/g-canvas'; // import { formatToTransit } from '../utils' import { getImageCircle } from '../utils/base' import { X, Y, R } from '../utils/constanst' @@ -13,8 +13,8 @@ export default function SLine(props: SComponentProps) { const RECT_COLOR = '#e9dcf7' const canvas = useRef() - const circle = useRef() - const sArr = useRef([]) + const circle = useRef() + const sArr = useRef([]) function getArray(arr: number[]) { const filterArr = arr.reduce((prev: number[], curr: number, index: number) => { @@ -43,6 +43,7 @@ export default function SLine(props: SComponentProps) { container: 'SLine', width: 2 * X, height: 2 * Y, + renderer: new Renderer() }); circle.current = getImageCircle(canvas.current, { @@ -57,8 +58,9 @@ export default function SLine(props: SComponentProps) { const l = Math.cos(deg * Math.PI / 180) const t = Math.sin(deg * Math.PI / 180) const r = R + OFFSET - return (canvas.current as Canvas).addShape('rect', { - attrs: { + + const rect = new Rect({ + style: { width: RECT_WIDTH, height: RECT_WIDTH, radius: RECT_WIDTH / 2, @@ -66,7 +68,11 @@ export default function SLine(props: SComponentProps) { y: Y + t * r - RECT_WIDTH / 2, fill: RECT_COLOR } - }).rotateAtPoint(X + l * r, Y + t * r, (deg - 90) * Math.PI / 180) + }) + rect.setOrigin(X + l * r, Y + t * r) + rect.rotate(deg - 90) + canvas.current?.appendChild(rect) + return rect }) }, []) diff --git a/src/hooks/useAudioImg.ts b/src/hooks/useAudioImg.ts index 1a1c62b..ddb524f 100644 --- a/src/hooks/useAudioImg.ts +++ b/src/hooks/useAudioImg.ts @@ -1,21 +1,25 @@ -import { ICanvas, IShape } from "@antv/g-canvas"; +import { Canvas, Image } from "@antv/g"; import { useEffect } from "react"; -export default function(canvas: React.MutableRefObject, circle: React.MutableRefObject, isPlaying: boolean, audioImg: string | undefined) { +export default function(canvas: React.MutableRefObject, circle: React.MutableRefObject, isPlaying: boolean, audioImg: string | undefined) { useEffect(() => { setTimeout(() => { - if (isPlaying) { - circle.current?.resumeAnimate() - } else { - circle.current?.pauseAnimate() + const animations = circle.current?.getAnimations() + if (animations && animations.length) { + const an = animations[0] + if (isPlaying) { + an.play() + } else { + an.pause() + } } }) }, [isPlaying]) useEffect(() => { - const imgEl = canvas.current?.findById('audioImg') + const imgEl = canvas.current?.document.querySelector('#audioImg') if (imgEl) { - imgEl.attr('img', audioImg) + imgEl.setAttribute('img', audioImg) } }, [audioImg]) } \ No newline at end of file diff --git a/src/utils/base.ts b/src/utils/base.ts index 365498c..19560d8 100644 --- a/src/utils/base.ts +++ b/src/utils/base.ts @@ -1,7 +1,4 @@ -import { Canvas } from "@antv/g-canvas"; -import { ext } from '@antv/matrix-util'; - -const { transform } = ext +import { Canvas, Circle, Image } from "@antv/g"; type ImageCircleConfig = { x: number; @@ -14,53 +11,45 @@ export function getImageCircle(canvas: Canvas, { x, y, r, shadowColor }: ImageCi shadowColor, shadowBlur: 16 } : {} - canvas.addShape('circle', { - attrs: { - x, - y, + const circle = new Circle({ + style: { + cx: x, + cy: y, r, fill: '#262626', ...shadowConfig } }) - const shape = canvas.addShape('image', { + const image = new Image({ id: 'audioImg', - attrs: { + style: { x: x - r, y: y - r, width: 2 * r, height: 2 * r, - // img: `https://source.unsplash.com/random/${2 * r}x${2 * r}?Nature` - // img: `https://howdz.deno.dev/unsplash/random?keyword=Nature&${2 * r}x${2 * r}` - } - }) - shape.setClip({ - type: 'circle', - attrs: { - x, - y, - r + transformOrigin: 'center', + clipPath: new Circle({ + style: { + cx: x, + cy: y, + r + } + }) } }) - - // 旋转动画 - const matrix = shape.getMatrix() - const radian = 2 * Math.PI - shape.animate((ratio: number) => { - return { - matrix: transform(matrix, [ - ['t', -x, -y], - ['r', radian * ratio], - ['t', x, y], - ]) - } - }, { + canvas.appendChild(circle) + canvas.appendChild(image) + const animation = image.animate([ + { transform: 'rotate(0)' }, + { transform: 'rotate(360deg)' } + ], { duration: 10000, - repeat: true + iterations: Infinity }) + setTimeout(() => { - shape.pauseAnimate() + animation?.pause() }) - return shape + return image } diff --git a/vite.config.ts b/vite.config.ts index a07fd35..7111ce6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,5 @@ import { defineConfig } from 'vite' -import reactRefresh from '@vitejs/plugin-react-refresh' +import react from '@vitejs/plugin-react' import { resolve } from 'path' // https://vitejs.dev/config/ @@ -10,7 +10,7 @@ export default defineConfig({ '@': resolve(__dirname, 'src') } }, - plugins: [reactRefresh()], + plugins: [react()], server: { proxy: { '/api': { diff --git a/yarn.lock b/yarn.lock index 2fd873c..7a88890 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,291 +2,534 @@ # yarn lockfile v1 -"@antv/event-emitter@^0.1.1": - version "0.1.2" - resolved "https://registry.npm.taobao.org/@antv/event-emitter/download/@antv/event-emitter-0.1.2.tgz#a17b7cb86e6d071880dc6bfb232756f88624ecbc" - integrity sha1-oXt8uG5tBxiA3Gv7IydW+IYk7Lw= - -"@antv/g-base@^0.5.3": - version "0.5.9" - resolved "https://registry.nlark.com/@antv/g-base/download/@antv/g-base-0.5.9.tgz?cache=0&sync_timestamp=1619321520277&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40antv%2Fg-base%2Fdownload%2F%40antv%2Fg-base-0.5.9.tgz#58d0e11d85157ada1408fbdf24f4f468f40e59cd" - integrity sha1-WNDhHYUVetoUCPvfJPT0aPQOWc0= - dependencies: - "@antv/event-emitter" "^0.1.1" - "@antv/g-math" "^0.1.6" - "@antv/matrix-util" "^3.1.0-beta.1" - "@antv/path-util" "~2.0.5" - "@antv/util" "~2.0.0" - "@types/d3-timer" "^2.0.0" - d3-ease "^1.0.5" - d3-interpolate "^1.3.2" - d3-timer "^1.0.9" - detect-browser "^5.1.0" - tslib "^2.0.3" - -"@antv/g-canvas@^0.5.10": - version "0.5.10" - resolved "https://registry.nlark.com/@antv/g-canvas/download/@antv/g-canvas-0.5.10.tgz#ad19a1dcd19edd12d29539e1dc5b521585b437c6" - integrity sha1-rRmh3NGe3RLSlTnh3FtSFYW0N8Y= - dependencies: - "@antv/g-base" "^0.5.3" - "@antv/g-math" "^0.1.6" - "@antv/matrix-util" "^3.1.0-beta.1" - "@antv/path-util" "~2.0.5" - "@antv/util" "~2.0.0" - gl-matrix "^3.0.0" - tslib "^2.0.3" - -"@antv/g-math@^0.1.6": - version "0.1.7" - resolved "https://registry.nlark.com/@antv/g-math/download/@antv/g-math-0.1.7.tgz#6ec2769269f7ccb67e58140d5739df74046cc04e" - integrity sha1-bsJ2kmn3zLZ+WBQNVznfdARswE4= - dependencies: - "@antv/util" "~2.0.0" - gl-matrix "^3.0.0" - -"@antv/matrix-util@^3.1.0-beta.1": - version "3.1.0-beta.2" - resolved "https://registry.npm.taobao.org/@antv/matrix-util/download/@antv/matrix-util-3.1.0-beta.2.tgz#b4afafb70dbdf52affca308d3546c8a090fd23ca" - integrity sha1-tK+vtw299Sr/yjCNNUbIoJD9I8o= - dependencies: - "@antv/util" "^2.0.9" +"@ampproject/remapping@^2.2.0": + version "2.2.1" + resolved "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.2.1.tgz#99e8e11851128b8702cd57c33684f1d0f260b630" + integrity sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg== + dependencies: + "@jridgewell/gen-mapping" "^0.3.0" + "@jridgewell/trace-mapping" "^0.3.9" + +"@antv/g-camera-api@1.2.13": + version "1.2.13" + resolved "https://registry.npmmirror.com/@antv/g-camera-api/-/g-camera-api-1.2.13.tgz#87f57017091d285c28df7ac29e3298fab537f902" + integrity sha512-grKT2auGRTm7YzCueP43VNxOhFnlN4KkVaEm2UCGNcu6WIpqoPMmCmCy9FPe7uOqrH+Rwhw1eXPLEczAVaFPkw== + dependencies: + "@antv/g-lite" "1.2.13" + "@antv/util" "^3.3.4" + gl-matrix "^3.4.3" + tslib "^2.5.3" + +"@antv/g-canvas@^1.11.17": + version "1.11.17" + resolved "https://registry.npmmirror.com/@antv/g-canvas/-/g-canvas-1.11.17.tgz#3cb014338c7f3f9286d397a1bab5e5d201c494c3" + integrity sha512-mKV71Zeu3bnZ/havzL3NKZ2nBHEhGHDeVGvY5FTxivNh9/Zbi0T13DRyLk6qHINZAV16jaZacxhTga2qJ+HJLg== + dependencies: + "@antv/g-lite" "1.2.13" + "@antv/g-plugin-canvas-path-generator" "1.3.13" + "@antv/g-plugin-canvas-picker" "1.10.14" + "@antv/g-plugin-canvas-renderer" "1.9.14" + "@antv/g-plugin-dom-interaction" "1.9.13" + "@antv/g-plugin-html-renderer" "1.9.16" + "@antv/g-plugin-image-loader" "1.3.13" + "@antv/util" "^3.3.4" + tslib "^2.5.3" + +"@antv/g-dom-mutation-observer-api@1.2.13": + version "1.2.13" + resolved "https://registry.npmmirror.com/@antv/g-dom-mutation-observer-api/-/g-dom-mutation-observer-api-1.2.13.tgz#70e063e917301c3606e5606b2ea99536eea340d5" + integrity sha512-Ca0MKwRwKMlQS24akfYb9wZDQidW0SRPQmi4N/C0cwYj5dYkr9I4W1bBnyu0sZZFbzDeeLvT+9vx7kLKHEOIUw== + dependencies: + "@antv/g-lite" "1.2.13" + +"@antv/g-lite@1.2.13": + version "1.2.13" + resolved "https://registry.npmmirror.com/@antv/g-lite/-/g-lite-1.2.13.tgz#b33d689aa5ba54db70748e265359db7ab6cfa339" + integrity sha512-UnjyH/tpzjndfD7KxLASknMIJdrJ7O82NrAaN7z3s9REo9d6yb3yv7z38BZ414LiE1QW2T/D1DBOjq+9DI/eEw== + dependencies: + "@antv/g-math" "2.0.2" + "@antv/util" "^3.3.4" + d3-color "^1.4.0" + eventemitter3 "^5.0.1" + gl-matrix "^3.4.3" + rbush "^3.0.1" + tslib "^2.5.3" + +"@antv/g-math@2.0.2": + version "2.0.2" + resolved "https://registry.npmmirror.com/@antv/g-math/-/g-math-2.0.2.tgz#fc37e3e90591a52657553017ddadf55177d18a12" + integrity sha512-uqGU1C+70orjeSUoIzD3TuXjL5dRQCIyjZrBrTmm0FWd6VQJMWHyG5ypuZ2lMiI5MrRajVSE1w+3J4hiNBYSJg== + dependencies: + "@antv/util" "^3.3.4" + gl-matrix "^3.4.3" + tslib "^2.5.3" + +"@antv/g-plugin-canvas-path-generator@1.3.13": + version "1.3.13" + resolved "https://registry.npmmirror.com/@antv/g-plugin-canvas-path-generator/-/g-plugin-canvas-path-generator-1.3.13.tgz#625108337466d4b4ebacc5383324665324dcce5c" + integrity sha512-RqjCIRulMZoe1y5MEgOr1705fHQIXhgHgIrHt1hDuTAVesjWXkHkZe0k+Wp42C4ee5UMU/oKUNxtTx4cdI5w9g== + dependencies: + "@antv/g-lite" "1.2.13" + "@antv/g-math" "2.0.2" + "@antv/util" "^3.3.4" + tslib "^2.5.3" + +"@antv/g-plugin-canvas-picker@1.10.14": + version "1.10.14" + resolved "https://registry.npmmirror.com/@antv/g-plugin-canvas-picker/-/g-plugin-canvas-picker-1.10.14.tgz#af77cd015e3f222f5d9db1c0fe92ce66d2742f98" + integrity sha512-ONuHch6nOHGwyv9T+79ULMrsqa0Ikv6adL1JIVk41ckqMvPpBHNtTW4B33ua49gPTN/lpXcaqsj/EQmfMho8mA== + dependencies: + "@antv/g-lite" "1.2.13" + "@antv/g-math" "2.0.2" + "@antv/g-plugin-canvas-path-generator" "1.3.13" + "@antv/g-plugin-canvas-renderer" "1.9.14" + "@antv/util" "^3.3.4" + gl-matrix "^3.4.3" + tslib "^2.5.3" + +"@antv/g-plugin-canvas-renderer@1.9.14": + version "1.9.14" + resolved "https://registry.npmmirror.com/@antv/g-plugin-canvas-renderer/-/g-plugin-canvas-renderer-1.9.14.tgz#a34d5c4cf3075d19f856cbcd300e23b810279721" + integrity sha512-W9oGq+ZYuPDVIp3qvIMJQvyB8+HtGz3XAWLQ1e5OdRZ/9NhN7fYRCWV/YS5psUSuvpj0bB7iWFoQ4VKBY8ivYQ== + dependencies: + "@antv/g-lite" "1.2.13" + "@antv/g-math" "2.0.2" + "@antv/g-plugin-canvas-path-generator" "1.3.13" + "@antv/g-plugin-image-loader" "1.3.13" + "@antv/util" "^3.3.4" + gl-matrix "^3.4.3" + tslib "^2.5.3" + +"@antv/g-plugin-dom-interaction@1.9.13": + version "1.9.13" + resolved "https://registry.npmmirror.com/@antv/g-plugin-dom-interaction/-/g-plugin-dom-interaction-1.9.13.tgz#91beb030d04e42f114c73d8393cf89e74780023e" + integrity sha512-StGNQv8wCWlRrQ8tYfTggHCSCmEgAhqDGhgkujYrgT0PqTH7nIbTlnVFvMq4afYiuW+2r5Yh1veTY7hunRJ7+w== + dependencies: + "@antv/g-lite" "1.2.13" + tslib "^2.5.3" + +"@antv/g-plugin-html-renderer@1.9.16": + version "1.9.16" + resolved "https://registry.npmmirror.com/@antv/g-plugin-html-renderer/-/g-plugin-html-renderer-1.9.16.tgz#d5e488a4be1cbe5b3d834fe61a1bc7819ba9a42a" + integrity sha512-VdD1ahJejRu7ty9yqLvZPJJM67jz9yWSeSG6Yhm6SU/6oBkMgtjqiF55Vu1AZZ2XpeDD9hEibtwx4encjaT1zA== + dependencies: + "@antv/g-lite" "1.2.13" + "@antv/util" "^3.3.4" + gl-matrix "^3.4.3" + tslib "^2.5.3" + +"@antv/g-plugin-image-loader@1.3.13": + version "1.3.13" + resolved "https://registry.npmmirror.com/@antv/g-plugin-image-loader/-/g-plugin-image-loader-1.3.13.tgz#d20486dcf516ef6083c42948e1c2a86984fb1a27" + integrity sha512-JIT+bADisGoaAmwa9Zq3S4HgkcyYjdiE8uiVGvjWif6uVplOuzxmLaXycIk7v/QevDhypfy0PhsW7n2D7Rh9BQ== + dependencies: + "@antv/g-lite" "1.2.13" + "@antv/util" "^3.3.4" + gl-matrix "^3.4.3" + tslib "^2.5.3" + +"@antv/g-web-animations-api@1.2.13": + version "1.2.13" + resolved "https://registry.npmmirror.com/@antv/g-web-animations-api/-/g-web-animations-api-1.2.13.tgz#5bb0fb9b39b43f4c6c503238291440e33d0b106c" + integrity sha512-wrbGfYvdnHxvlMs2Mi176kE7uydwkMjOSi1n0pVmXM5OHNqnRY8CvKX7WF9HfnHBMGHEgFaw7fZRjIkv+Cyzww== + dependencies: + "@antv/g-lite" "1.2.13" + "@antv/util" "^3.3.4" + tslib "^2.5.3" + +"@antv/g@^5.18.14": + version "5.18.14" + resolved "https://registry.npmmirror.com/@antv/g/-/g-5.18.14.tgz#ee8de254cbd59fd04ada393834c89227d3e5f246" + integrity sha512-y7RX0URkj8DbwAvYE48SjktgOsNSj1oDmn4ShUpltNW85tG8DV8l39JWIioVeMn4k6XQBQbogv0n0r3dE62SPQ== + dependencies: + "@antv/g-camera-api" "1.2.13" + "@antv/g-dom-mutation-observer-api" "1.2.13" + "@antv/g-lite" "1.2.13" + "@antv/g-web-animations-api" "1.2.13" + +"@antv/util@^3.3.4": + version "3.3.5" + resolved "https://registry.npmmirror.com/@antv/util/-/util-3.3.5.tgz#502f924833b37b39c3e4ca59c1982f4ed0e3d4c6" + integrity sha512-bVv1loamL/MgUEN9dNt7VKAsghO4Wgb+kzr8B9TgkM5tHgKk++xiTwi3pejIdgU8DDkzcyaRsO+VTOXJt8jLng== + dependencies: + fast-deep-equal "^3.1.3" + flru "^1.0.2" gl-matrix "^3.3.0" - tslib "^1.10.0" - -"@antv/path-util@~2.0.5": - version "2.0.9" - resolved "https://registry.npm.taobao.org/@antv/path-util/download/@antv/path-util-2.0.9.tgz#976e4a3cfb6219767a602d297b205c88d66d7b2c" - integrity sha1-l25KPPtiGXZ6YC0peyBciNZteyw= - dependencies: - "@antv/util" "^2.0.9" - tslib "^2.0.3" - -"@antv/util@^2.0.9", "@antv/util@~2.0.0": - version "2.0.13" - resolved "https://registry.nlark.com/@antv/util/download/@antv/util-2.0.13.tgz#7c2e701d89527116ec17cf5a400413c5c6afcb4d" - integrity sha1-fC5wHYlScRbsF89aQAQTxcavy00= - dependencies: - tslib "^2.0.3" - -"@babel/code-frame@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/code-frame/download/@babel/code-frame-7.14.5.tgz?cache=0&sync_timestamp=1623280394200&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fcode-frame%2Fdownload%2F%40babel%2Fcode-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb" - integrity sha1-I7CNdA6D9JxeWZRfvxtD6Au/Tts= - dependencies: - "@babel/highlight" "^7.14.5" - -"@babel/compat-data@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/compat-data/download/@babel/compat-data-7.14.5.tgz?cache=0&sync_timestamp=1623280503073&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fcompat-data%2Fdownload%2F%40babel%2Fcompat-data-7.14.5.tgz#8ef4c18e58e801c5c95d3c1c0f2874a2680fadea" - integrity sha1-jvTBjljoAcXJXTwcDyh0omgPreo= - -"@babel/core@^7.12.13": - version "7.14.6" - resolved "https://registry.nlark.com/@babel/core/download/@babel/core-7.14.6.tgz#e0814ec1a950032ff16c13a2721de39a8416fcab" - integrity sha1-4IFOwalQAy/xbBOich3jmoQW/Ks= - dependencies: - "@babel/code-frame" "^7.14.5" - "@babel/generator" "^7.14.5" - "@babel/helper-compilation-targets" "^7.14.5" - "@babel/helper-module-transforms" "^7.14.5" - "@babel/helpers" "^7.14.6" - "@babel/parser" "^7.14.6" - "@babel/template" "^7.14.5" - "@babel/traverse" "^7.14.5" - "@babel/types" "^7.14.5" - convert-source-map "^1.7.0" + tslib "^2.3.1" + +"@babel/code-frame@^7.22.13": + version "7.22.13" + resolved "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e" + integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w== + dependencies: + "@babel/highlight" "^7.22.13" + chalk "^2.4.2" + +"@babel/compat-data@^7.22.9": + version "7.22.20" + resolved "https://registry.npmmirror.com/@babel/compat-data/-/compat-data-7.22.20.tgz#8df6e96661209623f1975d66c35ffca66f3306d0" + integrity sha512-BQYjKbpXjoXwFW5jGqiizJQQT/aC7pFm9Ok1OWssonuguICi264lbgMzRp2ZMmRSlfkX6DsWDDcsrctK8Rwfiw== + +"@babel/core@^7.22.20": + version "7.23.0" + resolved "https://registry.npmmirror.com/@babel/core/-/core-7.23.0.tgz#f8259ae0e52a123eb40f552551e647b506a94d83" + integrity sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ== + dependencies: + "@ampproject/remapping" "^2.2.0" + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.23.0" + "@babel/helper-compilation-targets" "^7.22.15" + "@babel/helper-module-transforms" "^7.23.0" + "@babel/helpers" "^7.23.0" + "@babel/parser" "^7.23.0" + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.23.0" + "@babel/types" "^7.23.0" + convert-source-map "^2.0.0" debug "^4.1.0" gensync "^1.0.0-beta.2" - json5 "^2.1.2" - semver "^6.3.0" - source-map "^0.5.0" + json5 "^2.2.3" + semver "^6.3.1" -"@babel/generator@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/generator/download/@babel/generator-7.14.5.tgz?cache=0&sync_timestamp=1623280360946&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fgenerator%2Fdownload%2F%40babel%2Fgenerator-7.14.5.tgz#848d7b9f031caca9d0cd0af01b063f226f52d785" - integrity sha1-hI17nwMcrKnQzQrwGwY/Im9S14U= +"@babel/generator@^7.23.0": + version "7.23.0" + resolved "https://registry.npmmirror.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420" + integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g== dependencies: - "@babel/types" "^7.14.5" + "@babel/types" "^7.23.0" + "@jridgewell/gen-mapping" "^0.3.2" + "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" - source-map "^0.5.0" - -"@babel/helper-compilation-targets@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-compilation-targets/download/@babel/helper-compilation-targets-7.14.5.tgz?cache=0&sync_timestamp=1623280393577&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-compilation-targets%2Fdownload%2F%40babel%2Fhelper-compilation-targets-7.14.5.tgz#7a99c5d0967911e972fe2c3411f7d5b498498ecf" - integrity sha1-epnF0JZ5Eely/iw0EffVtJhJjs8= - dependencies: - "@babel/compat-data" "^7.14.5" - "@babel/helper-validator-option" "^7.14.5" - browserslist "^4.16.6" - semver "^6.3.0" - -"@babel/helper-function-name@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-function-name/download/@babel/helper-function-name-7.14.5.tgz?cache=0&sync_timestamp=1623280385237&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-function-name%2Fdownload%2F%40babel%2Fhelper-function-name-7.14.5.tgz#89e2c474972f15d8e233b52ee8c480e2cfcd50c4" - integrity sha1-ieLEdJcvFdjiM7Uu6MSA4s/NUMQ= - dependencies: - "@babel/helper-get-function-arity" "^7.14.5" - "@babel/template" "^7.14.5" - "@babel/types" "^7.14.5" - -"@babel/helper-get-function-arity@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-get-function-arity/download/@babel/helper-get-function-arity-7.14.5.tgz?cache=0&sync_timestamp=1623280360950&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-get-function-arity%2Fdownload%2F%40babel%2Fhelper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815" - integrity sha1-Jfv6V5sJN+7h87gF7OTOOYxDGBU= - dependencies: - "@babel/types" "^7.14.5" - -"@babel/helper-hoist-variables@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-hoist-variables/download/@babel/helper-hoist-variables-7.14.5.tgz?cache=0&sync_timestamp=1623280361512&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-hoist-variables%2Fdownload%2F%40babel%2Fhelper-hoist-variables-7.14.5.tgz#e0dd27c33a78e577d7c8884916a3e7ef1f7c7f8d" - integrity sha1-4N0nwzp45XfXyIhJFqPn7x98f40= - dependencies: - "@babel/types" "^7.14.5" - -"@babel/helper-member-expression-to-functions@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-member-expression-to-functions/download/@babel/helper-member-expression-to-functions-7.14.5.tgz?cache=0&sync_timestamp=1623280360948&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-member-expression-to-functions%2Fdownload%2F%40babel%2Fhelper-member-expression-to-functions-7.14.5.tgz#d5c70e4ad13b402c95156c7a53568f504e2fb7b8" - integrity sha1-1ccOStE7QCyVFWx6U1aPUE4vt7g= - dependencies: - "@babel/types" "^7.14.5" - -"@babel/helper-module-imports@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-module-imports/download/@babel/helper-module-imports-7.14.5.tgz?cache=0&sync_timestamp=1623280362184&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-module-imports%2Fdownload%2F%40babel%2Fhelper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3" - integrity sha1-bRpE32o4yVeqfDEtoHZCnxG0IvM= - dependencies: - "@babel/types" "^7.14.5" - -"@babel/helper-module-transforms@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-module-transforms/download/@babel/helper-module-transforms-7.14.5.tgz?cache=0&sync_timestamp=1623280681627&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-module-transforms%2Fdownload%2F%40babel%2Fhelper-module-transforms-7.14.5.tgz#7de42f10d789b423eb902ebd24031ca77cb1e10e" - integrity sha1-feQvENeJtCPrkC69JAMcp3yx4Q4= - dependencies: - "@babel/helper-module-imports" "^7.14.5" - "@babel/helper-replace-supers" "^7.14.5" - "@babel/helper-simple-access" "^7.14.5" - "@babel/helper-split-export-declaration" "^7.14.5" - "@babel/helper-validator-identifier" "^7.14.5" - "@babel/template" "^7.14.5" - "@babel/traverse" "^7.14.5" - "@babel/types" "^7.14.5" - -"@babel/helper-optimise-call-expression@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-optimise-call-expression/download/@babel/helper-optimise-call-expression-7.14.5.tgz?cache=0&sync_timestamp=1623280360981&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-optimise-call-expression%2Fdownload%2F%40babel%2Fhelper-optimise-call-expression-7.14.5.tgz#f27395a8619e0665b3f0364cddb41c25d71b499c" - integrity sha1-8nOVqGGeBmWz8DZM3bQcJdcbSZw= - dependencies: - "@babel/types" "^7.14.5" - -"@babel/helper-plugin-utils@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-plugin-utils/download/@babel/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9" - integrity sha1-WsgizpfuxGdBq3ClF5ceRDpwxak= - -"@babel/helper-replace-supers@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-replace-supers/download/@babel/helper-replace-supers-7.14.5.tgz?cache=0&sync_timestamp=1623280689842&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-replace-supers%2Fdownload%2F%40babel%2Fhelper-replace-supers-7.14.5.tgz#0ecc0b03c41cd567b4024ea016134c28414abb94" - integrity sha1-DswLA8Qc1We0Ak6gFhNMKEFKu5Q= - dependencies: - "@babel/helper-member-expression-to-functions" "^7.14.5" - "@babel/helper-optimise-call-expression" "^7.14.5" - "@babel/traverse" "^7.14.5" - "@babel/types" "^7.14.5" - -"@babel/helper-simple-access@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-simple-access/download/@babel/helper-simple-access-7.14.5.tgz?cache=0&sync_timestamp=1623280360968&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-simple-access%2Fdownload%2F%40babel%2Fhelper-simple-access-7.14.5.tgz#66ea85cf53ba0b4e588ba77fc813f53abcaa41c4" - integrity sha1-ZuqFz1O6C05Yi6d/yBP1OryqQcQ= - dependencies: - "@babel/types" "^7.14.5" - -"@babel/helper-split-export-declaration@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-split-export-declaration/download/@babel/helper-split-export-declaration-7.14.5.tgz?cache=0&sync_timestamp=1623280365934&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-split-export-declaration%2Fdownload%2F%40babel%2Fhelper-split-export-declaration-7.14.5.tgz#22b23a54ef51c2b7605d851930c1976dd0bc693a" - integrity sha1-IrI6VO9RwrdgXYUZMMGXbdC8aTo= - dependencies: - "@babel/types" "^7.14.5" - -"@babel/helper-validator-identifier@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.14.5.tgz?cache=0&sync_timestamp=1623280293264&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelper-validator-identifier%2Fdownload%2F%40babel%2Fhelper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8" - integrity sha1-0PDid8US4Mk4J3+qhaOWjJpEwOg= - -"@babel/helper-validator-option@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/helper-validator-option/download/@babel/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3" - integrity sha1-bnKh//GNXfy4eOHmLxoCHEty1aM= - -"@babel/helpers@^7.14.6": - version "7.14.6" - resolved "https://registry.nlark.com/@babel/helpers/download/@babel/helpers-7.14.6.tgz?cache=0&sync_timestamp=1623708432558&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhelpers%2Fdownload%2F%40babel%2Fhelpers-7.14.6.tgz#5b58306b95f1b47e2a0199434fa8658fa6c21635" - integrity sha1-W1gwa5XxtH4qAZlDT6hlj6bCFjU= - dependencies: - "@babel/template" "^7.14.5" - "@babel/traverse" "^7.14.5" - "@babel/types" "^7.14.5" - -"@babel/highlight@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/highlight/download/@babel/highlight-7.14.5.tgz?cache=0&sync_timestamp=1623280393681&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Fhighlight%2Fdownload%2F%40babel%2Fhighlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9" - integrity sha1-aGGlLwOWZAUAH2qlNKAaJNmejNk= - dependencies: - "@babel/helper-validator-identifier" "^7.14.5" - chalk "^2.0.0" + +"@babel/helper-compilation-targets@^7.22.15": + version "7.22.15" + resolved "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52" + integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw== + dependencies: + "@babel/compat-data" "^7.22.9" + "@babel/helper-validator-option" "^7.22.15" + browserslist "^4.21.9" + lru-cache "^5.1.1" + semver "^6.3.1" + +"@babel/helper-environment-visitor@^7.22.20": + version "7.22.20" + resolved "https://registry.npmmirror.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167" + integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA== + +"@babel/helper-function-name@^7.23.0": + version "7.23.0" + resolved "https://registry.npmmirror.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759" + integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw== + dependencies: + "@babel/template" "^7.22.15" + "@babel/types" "^7.23.0" + +"@babel/helper-hoist-variables@^7.22.5": + version "7.22.5" + resolved "https://registry.npmmirror.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb" + integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw== + dependencies: + "@babel/types" "^7.22.5" + +"@babel/helper-module-imports@^7.22.15": + version "7.22.15" + resolved "https://registry.npmmirror.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0" + integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w== + dependencies: + "@babel/types" "^7.22.15" + +"@babel/helper-module-transforms@^7.23.0": + version "7.23.0" + resolved "https://registry.npmmirror.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e" + integrity sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw== + dependencies: + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-module-imports" "^7.22.15" + "@babel/helper-simple-access" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/helper-validator-identifier" "^7.22.20" + +"@babel/helper-plugin-utils@^7.22.5": + version "7.22.5" + resolved "https://registry.npmmirror.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295" + integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg== + +"@babel/helper-simple-access@^7.22.5": + version "7.22.5" + resolved "https://registry.npmmirror.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de" + integrity sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w== + dependencies: + "@babel/types" "^7.22.5" + +"@babel/helper-split-export-declaration@^7.22.6": + version "7.22.6" + resolved "https://registry.npmmirror.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c" + integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g== + dependencies: + "@babel/types" "^7.22.5" + +"@babel/helper-string-parser@^7.22.5": + version "7.22.5" + resolved "https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f" + integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw== + +"@babel/helper-validator-identifier@^7.22.20": + version "7.22.20" + resolved "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0" + integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A== + +"@babel/helper-validator-option@^7.22.15": + version "7.22.15" + resolved "https://registry.npmmirror.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040" + integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA== + +"@babel/helpers@^7.23.0": + version "7.23.1" + resolved "https://registry.npmmirror.com/@babel/helpers/-/helpers-7.23.1.tgz#44e981e8ce2b9e99f8f0b703f3326a4636c16d15" + integrity sha512-chNpneuK18yW5Oxsr+t553UZzzAs3aZnFm4bxhebsNTeshrC95yA7l5yl7GBAG+JG1rF0F7zzD2EixK9mWSDoA== + dependencies: + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.23.0" + "@babel/types" "^7.23.0" + +"@babel/highlight@^7.22.13": + version "7.22.20" + resolved "https://registry.npmmirror.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54" + integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg== + dependencies: + "@babel/helper-validator-identifier" "^7.22.20" + chalk "^2.4.2" js-tokens "^4.0.0" -"@babel/parser@^7.14.5", "@babel/parser@^7.14.6": - version "7.14.6" - resolved "https://registry.nlark.com/@babel/parser/download/@babel/parser-7.14.6.tgz#d85cc68ca3cac84eae384c06f032921f5227f4b2" - integrity sha1-2FzGjKPKyE6uOEwG8DKSH1In9LI= - -"@babel/plugin-transform-react-jsx-self@^7.12.13": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/plugin-transform-react-jsx-self/download/@babel/plugin-transform-react-jsx-self-7.14.5.tgz#703b5d1edccd342179c2a99ee8c7065c2b4403cc" - integrity sha1-cDtdHtzNNCF5wqme6McGXCtEA8w= - dependencies: - "@babel/helper-plugin-utils" "^7.14.5" - -"@babel/plugin-transform-react-jsx-source@^7.12.13": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/plugin-transform-react-jsx-source/download/@babel/plugin-transform-react-jsx-source-7.14.5.tgz#79f728e60e6dbd31a2b860b0bf6c9765918acf1d" - integrity sha1-efco5g5tvTGiuGCwv2yXZZGKzx0= - dependencies: - "@babel/helper-plugin-utils" "^7.14.5" - -"@babel/template@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/template/download/@babel/template-7.14.5.tgz?cache=0&sync_timestamp=1623280386138&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Ftemplate%2Fdownload%2F%40babel%2Ftemplate-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4" - integrity sha1-qbydizM1T/blWpxg0RCSAKaJdPQ= - dependencies: - "@babel/code-frame" "^7.14.5" - "@babel/parser" "^7.14.5" - "@babel/types" "^7.14.5" - -"@babel/traverse@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/traverse/download/@babel/traverse-7.14.5.tgz#c111b0f58afab4fea3d3385a406f692748c59870" - integrity sha1-wRGw9Yr6tP6j0zhaQG9pJ0jFmHA= - dependencies: - "@babel/code-frame" "^7.14.5" - "@babel/generator" "^7.14.5" - "@babel/helper-function-name" "^7.14.5" - "@babel/helper-hoist-variables" "^7.14.5" - "@babel/helper-split-export-declaration" "^7.14.5" - "@babel/parser" "^7.14.5" - "@babel/types" "^7.14.5" +"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0": + version "7.23.0" + resolved "https://registry.npmmirror.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719" + integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw== + +"@babel/plugin-transform-react-jsx-self@^7.22.5": + version "7.22.5" + resolved "https://registry.npmmirror.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.22.5.tgz#ca2fdc11bc20d4d46de01137318b13d04e481d8e" + integrity sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/plugin-transform-react-jsx-source@^7.22.5": + version "7.22.5" + resolved "https://registry.npmmirror.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.22.5.tgz#49af1615bfdf6ed9d3e9e43e425e0b2b65d15b6c" + integrity sha512-yIiRO6yobeEIaI0RTbIr8iAK9FcBHLtZq0S89ZPjDLQXBA4xvghaKqI0etp/tF3htTM0sazJKKLz9oEiGRtu7w== + dependencies: + "@babel/helper-plugin-utils" "^7.22.5" + +"@babel/template@^7.22.15": + version "7.22.15" + resolved "https://registry.npmmirror.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38" + integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w== + dependencies: + "@babel/code-frame" "^7.22.13" + "@babel/parser" "^7.22.15" + "@babel/types" "^7.22.15" + +"@babel/traverse@^7.23.0": + version "7.23.0" + resolved "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.23.0.tgz#18196ddfbcf4ccea324b7f6d3ada00d8c5a99c53" + integrity sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw== + dependencies: + "@babel/code-frame" "^7.22.13" + "@babel/generator" "^7.23.0" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-function-name" "^7.23.0" + "@babel/helper-hoist-variables" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/parser" "^7.23.0" + "@babel/types" "^7.23.0" debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.14.5": - version "7.14.5" - resolved "https://registry.nlark.com/@babel/types/download/@babel/types-7.14.5.tgz?cache=0&sync_timestamp=1623280355970&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff" - integrity sha1-O7mXuoKaIQTO2yBonEpbgSHTg/8= +"@babel/types@^7.0.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0": + version "7.23.0" + resolved "https://registry.npmmirror.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb" + integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg== dependencies: - "@babel/helper-validator-identifier" "^7.14.5" + "@babel/helper-string-parser" "^7.22.5" + "@babel/helper-validator-identifier" "^7.22.20" to-fast-properties "^2.0.0" +"@esbuild/android-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622" + integrity sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ== + +"@esbuild/android-arm@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.18.20.tgz#fedb265bc3a589c84cc11f810804f234947c3682" + integrity sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw== + +"@esbuild/android-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.18.20.tgz#35cf419c4cfc8babe8893d296cd990e9e9f756f2" + integrity sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg== + +"@esbuild/darwin-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz#08172cbeccf95fbc383399a7f39cfbddaeb0d7c1" + integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA== + +"@esbuild/darwin-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz#d70d5790d8bf475556b67d0f8b7c5bdff053d85d" + integrity sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ== + +"@esbuild/freebsd-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz#98755cd12707f93f210e2494d6a4b51b96977f54" + integrity sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw== + +"@esbuild/freebsd-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz#c1eb2bff03915f87c29cece4c1a7fa1f423b066e" + integrity sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ== + +"@esbuild/linux-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz#bad4238bd8f4fc25b5a021280c770ab5fc3a02a0" + integrity sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA== + +"@esbuild/linux-arm@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz#3e617c61f33508a27150ee417543c8ab5acc73b0" + integrity sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg== + +"@esbuild/linux-ia32@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7" + integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA== + +"@esbuild/linux-loong64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d" + integrity sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg== + +"@esbuild/linux-mips64el@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz#eeff3a937de9c2310de30622a957ad1bd9183231" + integrity sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ== + +"@esbuild/linux-ppc64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz#2f7156bde20b01527993e6881435ad79ba9599fb" + integrity sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA== + +"@esbuild/linux-riscv64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz#6628389f210123d8b4743045af8caa7d4ddfc7a6" + integrity sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A== + +"@esbuild/linux-s390x@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz#255e81fb289b101026131858ab99fba63dcf0071" + integrity sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ== + +"@esbuild/linux-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz#c7690b3417af318a9b6f96df3031a8865176d338" + integrity sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w== + +"@esbuild/netbsd-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz#30e8cd8a3dded63975e2df2438ca109601ebe0d1" + integrity sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A== + +"@esbuild/openbsd-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz#7812af31b205055874c8082ea9cf9ab0da6217ae" + integrity sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg== + +"@esbuild/sunos-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz#d5c275c3b4e73c9b0ecd38d1ca62c020f887ab9d" + integrity sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ== + +"@esbuild/win32-arm64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz#73bc7f5a9f8a77805f357fab97f290d0e4820ac9" + integrity sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg== + +"@esbuild/win32-ia32@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz#ec93cbf0ef1085cc12e71e0d661d20569ff42102" + integrity sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g== + +"@esbuild/win32-x64@0.18.20": + version "0.18.20" + resolved "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz#786c5f41f043b07afb1af37683d7c33668858f6d" + integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ== + +"@jridgewell/gen-mapping@^0.3.0", "@jridgewell/gen-mapping@^0.3.2": + version "0.3.3" + resolved "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098" + integrity sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ== + dependencies: + "@jridgewell/set-array" "^1.0.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.9" + +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.1" + resolved "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721" + integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA== + +"@jridgewell/set-array@^1.0.1": + version "1.1.2" + resolved "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" + integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== + +"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14": + version "1.4.15" + resolved "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32" + integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== + +"@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9": + version "0.3.19" + resolved "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz#f8a3249862f91be48d3127c3cfe992f79b4b8811" + integrity sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw== + dependencies: + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" + +"@types/babel__core@^7.20.2": + version "7.20.2" + resolved "https://registry.npmmirror.com/@types/babel__core/-/babel__core-7.20.2.tgz#215db4f4a35d710256579784a548907237728756" + integrity sha512-pNpr1T1xLUc2l3xJKuPtsEky3ybxN3m4fJkknfIpTCTfIZCDW57oAg+EfCgIIp2rvCe0Wn++/FfodDS4YXxBwA== + dependencies: + "@babel/parser" "^7.20.7" + "@babel/types" "^7.20.7" + "@types/babel__generator" "*" + "@types/babel__template" "*" + "@types/babel__traverse" "*" + +"@types/babel__generator@*": + version "7.6.5" + resolved "https://registry.npmmirror.com/@types/babel__generator/-/babel__generator-7.6.5.tgz#281f4764bcbbbc51fdded0f25aa587b4ce14da95" + integrity sha512-h9yIuWbJKdOPLJTbmSpPzkF67e659PbQDba7ifWm5BJ8xTv+sDmS7rFmywkWOvXedGTivCdeGSIIX8WLcRTz8w== + dependencies: + "@babel/types" "^7.0.0" + +"@types/babel__template@*": + version "7.4.2" + resolved "https://registry.npmmirror.com/@types/babel__template/-/babel__template-7.4.2.tgz#843e9f1f47c957553b0c374481dc4772921d6a6b" + integrity sha512-/AVzPICMhMOMYoSx9MoKpGDKdBRsIXMNByh1PXSZoa+v6ZoLa8xxtsT/uLQ/NJm0XVAWl/BvId4MlDeXJaeIZQ== + dependencies: + "@babel/parser" "^7.1.0" + "@babel/types" "^7.0.0" + +"@types/babel__traverse@*": + version "7.20.2" + resolved "https://registry.npmmirror.com/@types/babel__traverse/-/babel__traverse-7.20.2.tgz#4ddf99d95cfdd946ff35d2b65c978d9c9bf2645d" + integrity sha512-ojlGK1Hsfce93J0+kn3H5R73elidKUaZonirN33GSmgTUMpzI/MIFfSpF3haANe3G1bEBS9/9/QEqwTzwqFsKw== + dependencies: + "@babel/types" "^7.20.7" + "@types/d3-array@*": version "2.12.1" resolved "https://registry.nlark.com/@types/d3-array/download/@types/d3-array-2.12.1.tgz?cache=0&sync_timestamp=1621690630337&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fd3-array%2Fdownload%2F%40types%2Fd3-array-2.12.1.tgz#bee6857b812f1ecfd5e6832fd67f617b667dd024" @@ -446,7 +689,7 @@ resolved "https://registry.nlark.com/@types/d3-time/download/@types/d3-time-2.1.0.tgz#95708e5c92b199959806fd2116eeb3dfa0e9661c" integrity sha1-lXCOXJKxmZWYBv0hFu6z36DpZhw= -"@types/d3-timer@*", "@types/d3-timer@^2.0.0": +"@types/d3-timer@*": version "2.0.0" resolved "https://registry.nlark.com/@types/d3-timer/download/@types/d3-timer-2.0.0.tgz?cache=0&sync_timestamp=1621240847302&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fd3-timer%2Fdownload%2F%40types%2Fd3-timer-2.0.0.tgz#9901bb02af38798764674df17d66b07329705632" integrity sha1-mQG7Aq84eYdkZ03xfWawcylwVjI= @@ -507,6 +750,11 @@ resolved "https://registry.nlark.com/@types/geojson/download/@types/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad" integrity sha1-yPpTK2CgBCIZzfFzyiGpde8GZq0= +"@types/node@^20.8.3": + version "20.8.3" + resolved "https://registry.npmmirror.com/@types/node/-/node-20.8.3.tgz#c4ae2bb1cfab2999ed441a95c122bbbe1567a66d" + integrity sha512-jxiZQFpb+NlH5kjW49vXxvxTjeeqlbsnTAdBTKpzEdPs9itay7MscYXz3Fo9VYFEsfQ6LJFitHad3faerLAjCw== + "@types/prop-types@*": version "15.7.3" resolved "https://registry.nlark.com/@types/prop-types/download/@types/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" @@ -533,15 +781,16 @@ resolved "https://registry.nlark.com/@types/scheduler/download/@types/scheduler-0.16.1.tgz?cache=0&sync_timestamp=1621242658440&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fscheduler%2Fdownload%2F%40types%2Fscheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275" integrity sha1-GIRSBehv8AOFF6q3oYpiprn3EnU= -"@vitejs/plugin-react-refresh@^1.3.1": - version "1.3.3" - resolved "https://registry.nlark.com/@vitejs/plugin-react-refresh/download/@vitejs/plugin-react-refresh-1.3.3.tgz#d5afb3e0463f368a8afadfdd7305fe5c5fe78a6a" - integrity sha1-1a+z4EY/NoqK+t/dcwX+XF/nimo= +"@vitejs/plugin-react@^4.1.0": + version "4.1.0" + resolved "https://registry.npmmirror.com/@vitejs/plugin-react/-/plugin-react-4.1.0.tgz#e4f56f46fd737c5d386bb1f1ade86ba275fe09bd" + integrity sha512-rM0SqazU9iqPUraQ2JlIvReeaxOoRj6n+PzB1C0cBzIbd8qP336nC39/R9yPi3wVcah7E7j/kdU1uCUqMEU4OQ== dependencies: - "@babel/core" "^7.12.13" - "@babel/plugin-transform-react-jsx-self" "^7.12.13" - "@babel/plugin-transform-react-jsx-source" "^7.12.13" - react-refresh "^0.9.0" + "@babel/core" "^7.22.20" + "@babel/plugin-transform-react-jsx-self" "^7.22.5" + "@babel/plugin-transform-react-jsx-source" "^7.22.5" + "@types/babel__core" "^7.20.2" + react-refresh "^0.14.0" ansi-styles@^3.2.1: version "3.2.1" @@ -570,23 +819,22 @@ braces@~3.0.2: dependencies: fill-range "^7.0.1" -browserslist@^4.16.6: - version "4.16.6" - resolved "https://registry.nlark.com/browserslist/download/browserslist-4.16.6.tgz?cache=0&sync_timestamp=1619789101558&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fbrowserslist%2Fdownload%2Fbrowserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2" - integrity sha1-15ASd6WojlVO0wWxg+ybDAj2b6I= +browserslist@^4.21.9: + version "4.22.1" + resolved "https://registry.npmmirror.com/browserslist/-/browserslist-4.22.1.tgz#ba91958d1a59b87dab6fed8dfbcb3da5e2e9c619" + integrity sha512-FEVc202+2iuClEhZhrWy6ZiAcRLvNMyYcxZ8raemul1DYVOVdFsbqckWLdsixQZCpJlwe77Z3UTalE7jsjnKfQ== dependencies: - caniuse-lite "^1.0.30001219" - colorette "^1.2.2" - electron-to-chromium "^1.3.723" - escalade "^3.1.1" - node-releases "^1.1.71" + caniuse-lite "^1.0.30001541" + electron-to-chromium "^1.4.535" + node-releases "^2.0.13" + update-browserslist-db "^1.0.13" -caniuse-lite@^1.0.30001219: - version "1.0.30001237" - resolved "https://registry.nlark.com/caniuse-lite/download/caniuse-lite-1.0.30001237.tgz#4b7783661515b8e7151fc6376cfd97f0e427b9e5" - integrity sha1-S3eDZhUVuOcVH8Y3bP2X8OQnueU= +caniuse-lite@^1.0.30001541: + version "1.0.30001546" + resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001546.tgz#10fdad03436cfe3cc632d3af7a99a0fb497407f0" + integrity sha512-zvtSJwuQFpewSyRrI3AsftF6rM0X80mZkChIt1spBGEvRglCrjTniXvinc8JKRoqTwXAgvqTImaN9igfSMtUBw== -chalk@^2.0.0: +chalk@^2.4.2: version "2.4.2" resolved "https://registry.nlark.com/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1618995367379&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ= @@ -622,22 +870,15 @@ color-name@1.1.3: resolved "https://registry.nlark.com/color-name/download/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -colorette@^1.2.2: - version "1.2.2" - resolved "https://registry.nlark.com/colorette/download/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94" - integrity sha1-y8x51emcrqLb8Q6zom/Ys+as+pQ= - commander@7: version "7.2.0" resolved "https://registry.nlark.com/commander/download/commander-7.2.0.tgz?cache=0&sync_timestamp=1622954231534&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcommander%2Fdownload%2Fcommander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7" integrity sha1-o2y1fQtQHOEI5NIFWaFQo5HZerc= -convert-source-map@^1.7.0: - version "1.7.0" - resolved "https://registry.npm.taobao.org/convert-source-map/download/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" - integrity sha1-F6LLiC1/d9NJBYXizmxSRCSjpEI= - dependencies: - safe-buffer "~5.1.1" +convert-source-map@^2.0.0: + version "2.0.0" + resolved "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" + integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg== csstype@^3.0.2: version "3.0.8" @@ -674,16 +915,16 @@ d3-chord@3: dependencies: d3-path "1 - 3" -d3-color@1: - version "1.4.1" - resolved "https://registry.nlark.com/d3-color/download/d3-color-1.4.1.tgz?cache=0&sync_timestamp=1622917832534&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fd3-color%2Fdownload%2Fd3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a" - integrity sha1-xSACv4hGraRCTVXZeYL+8m6zvIo= - "d3-color@1 - 3", d3-color@3: version "3.0.1" resolved "https://registry.nlark.com/d3-color/download/d3-color-3.0.1.tgz?cache=0&sync_timestamp=1622917832534&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fd3-color%2Fdownload%2Fd3-color-3.0.1.tgz#03316e595955d1fcd39d9f3610ad41bb90194d0a" integrity sha1-AzFuWVlV0fzTnZ82EK1Bu5AZTQo= +d3-color@^1.4.0: + version "1.4.1" + resolved "https://registry.npmmirror.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a" + integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q== + d3-contour@3: version "3.0.1" resolved "https://registry.nlark.com/d3-contour/download/d3-contour-3.0.1.tgz#2c64255d43059599cd0dba8fe4cc3d51ccdd9bbd" @@ -725,11 +966,6 @@ d3-delaunay@6: resolved "https://registry.nlark.com/d3-ease/download/d3-ease-3.0.1.tgz?cache=0&sync_timestamp=1622918263267&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fd3-ease%2Fdownload%2Fd3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4" integrity sha1-llisOKIUDVnTRhYPH2ww/aC9EvQ= -d3-ease@^1.0.5: - version "1.0.7" - resolved "https://registry.nlark.com/d3-ease/download/d3-ease-1.0.7.tgz?cache=0&sync_timestamp=1622918263267&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fd3-ease%2Fdownload%2Fd3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2" - integrity sha1-moNIkO+LiujFWLL+Vb1X9Zk7heI= - d3-fetch@3: version "3.0.1" resolved "https://registry.nlark.com/d3-fetch/download/d3-fetch-3.0.1.tgz#83141bff9856a0edb5e38de89cdcfe63d0a60a22" @@ -770,13 +1006,6 @@ d3-hierarchy@3: dependencies: d3-color "1 - 3" -d3-interpolate@^1.3.2: - version "1.4.0" - resolved "https://registry.nlark.com/d3-interpolate/download/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987" - integrity sha1-Um554tgNqjg/ngwcHH3MDwWD6Yc= - dependencies: - d3-color "1" - "d3-path@1 - 3", d3-path@3: version "3.0.1" resolved "https://registry.nlark.com/d3-path/download/d3-path-3.0.1.tgz?cache=0&sync_timestamp=1622917833000&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fd3-path%2Fdownload%2Fd3-path-3.0.1.tgz#f09dec0aaffd770b7995f1a399152bf93052321e" @@ -847,11 +1076,6 @@ d3-shape@3: resolved "https://registry.nlark.com/d3-timer/download/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0" integrity sha1-YoTSonCChbGrt+IB7aQ4CvNeY7A= -d3-timer@^1.0.9: - version "1.0.10" - resolved "https://registry.nlark.com/d3-timer/download/d3-timer-1.0.10.tgz#dfe76b8a91748831b13b6d9c793ffbd508dd9de5" - integrity sha1-3+dripF0iDGxO22ceT/71QjdneU= - "d3-transition@2 - 3", d3-transition@3: version "3.0.1" resolved "https://registry.nlark.com/d3-transition/download/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f" @@ -924,20 +1148,38 @@ delaunator@5: dependencies: robust-predicates "^3.0.0" -detect-browser@^5.1.0: - version "5.2.0" - resolved "https://registry.npm.taobao.org/detect-browser/download/detect-browser-5.2.0.tgz#c9cd5afa96a6a19fda0bbe9e9be48a6b6e1e9c97" - integrity sha1-yc1a+pamoZ/aC76em+SKa24enJc= - -electron-to-chromium@^1.3.723: - version "1.3.752" - resolved "https://registry.nlark.com/electron-to-chromium/download/electron-to-chromium-1.3.752.tgz?cache=0&sync_timestamp=1623290610685&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09" - integrity sha1-ByhYfxublw7J/62TJJZCmu91DQk= +electron-to-chromium@^1.4.535: + version "1.4.544" + resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.544.tgz#fcb156d83f0ee6e4c9d030c6fedb2a37594f3abf" + integrity sha512-54z7squS1FyFRSUqq/knOFSptjjogLZXbKcYk3B0qkE1KZzvqASwRZnY2KzZQJqIYLVD38XZeoiMRflYSwyO4w== -esbuild@^0.12.5: - version "0.12.8" - resolved "https://registry.nlark.com/esbuild/download/esbuild-0.12.8.tgz?cache=0&sync_timestamp=1623226518413&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fesbuild%2Fdownload%2Fesbuild-0.12.8.tgz#ac90da77cb3bfbf49ab815200bcef7ffe1a3348f" - integrity sha1-rJDad8s7+/SauBUgC873/+GjNI8= +esbuild@^0.18.10: + version "0.18.20" + resolved "https://registry.npmmirror.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6" + integrity sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA== + optionalDependencies: + "@esbuild/android-arm" "0.18.20" + "@esbuild/android-arm64" "0.18.20" + "@esbuild/android-x64" "0.18.20" + "@esbuild/darwin-arm64" "0.18.20" + "@esbuild/darwin-x64" "0.18.20" + "@esbuild/freebsd-arm64" "0.18.20" + "@esbuild/freebsd-x64" "0.18.20" + "@esbuild/linux-arm" "0.18.20" + "@esbuild/linux-arm64" "0.18.20" + "@esbuild/linux-ia32" "0.18.20" + "@esbuild/linux-loong64" "0.18.20" + "@esbuild/linux-mips64el" "0.18.20" + "@esbuild/linux-ppc64" "0.18.20" + "@esbuild/linux-riscv64" "0.18.20" + "@esbuild/linux-s390x" "0.18.20" + "@esbuild/linux-x64" "0.18.20" + "@esbuild/netbsd-x64" "0.18.20" + "@esbuild/openbsd-x64" "0.18.20" + "@esbuild/sunos-x64" "0.18.20" + "@esbuild/win32-arm64" "0.18.20" + "@esbuild/win32-ia32" "0.18.20" + "@esbuild/win32-x64" "0.18.20" escalade@^3.1.1: version "3.1.1" @@ -949,6 +1191,16 @@ escape-string-regexp@^1.0.5: resolved "https://registry.nlark.com/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= +eventemitter3@^5.0.1: + version "5.0.1" + resolved "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4" + integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA== + +fast-deep-equal@^3.1.3: + version "3.1.3" + resolved "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" + integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== + fill-range@^7.0.1: version "7.0.1" resolved "https://registry.nlark.com/fill-range/download/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" @@ -956,26 +1208,36 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +flru@^1.0.2: + version "1.0.2" + resolved "https://registry.npmmirror.com/flru/-/flru-1.0.2.tgz#1ae514c62b8b035ffff9ca9e4563ddcc817f4845" + integrity sha512-kWyh8ADvHBFz6ua5xYOPnUroZTT/bwWfrCeL0Wj1dzG4/YOmOcfJ99W8dOVyyynJN35rZ9aCOtHChqQovV7yog== + fsevents@~2.3.1: version "2.3.2" resolved "https://registry.npm.taobao.org/fsevents/download/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" integrity sha1-ilJveLj99GI7cJ4Ll1xSwkwC/Ro= -function-bind@^1.1.1: - version "1.1.1" - resolved "https://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" - integrity sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0= +fsevents@~2.3.2: + version "2.3.3" + resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== gensync@^1.0.0-beta.2: version "1.0.0-beta.2" resolved "https://registry.npm.taobao.org/gensync/download/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" integrity sha1-MqbudsPX9S1GsrGuXZP+qFgKJeA= -gl-matrix@^3.0.0, gl-matrix@^3.3.0: +gl-matrix@^3.3.0: version "3.3.0" resolved "https://registry.npm.taobao.org/gl-matrix/download/gl-matrix-3.3.0.tgz#232eef60b1c8b30a28cbbe75b2caf6c48fd6358b" integrity sha1-Iy7vYLHIswooy751ssr2xI/WNYs= +gl-matrix@^3.4.3: + version "3.4.3" + resolved "https://registry.npmmirror.com/gl-matrix/-/gl-matrix-3.4.3.tgz#fc1191e8320009fd4d20e9339595c6041ddc22c9" + integrity sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA== + glob-parent@~5.1.0: version "5.1.2" resolved "https://registry.nlark.com/glob-parent/download/glob-parent-5.1.2.tgz?cache=0&sync_timestamp=1620073321855&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fglob-parent%2Fdownload%2Fglob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" @@ -993,13 +1255,6 @@ has-flag@^3.0.0: resolved "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0= -has@^1.0.3: - version "1.0.3" - resolved "https://registry.npm.taobao.org/has/download/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" - integrity sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y= - dependencies: - function-bind "^1.1.1" - iconv-lite@0.6: version "0.6.3" resolved "https://registry.nlark.com/iconv-lite/download/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501" @@ -1007,6 +1262,11 @@ iconv-lite@0.6: dependencies: safer-buffer ">= 2.1.2 < 3.0.0" +immutable@^4.0.0: + version "4.3.4" + resolved "https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f" + integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA== + "internmap@1 - 2": version "2.0.1" resolved "https://registry.nlark.com/internmap/download/internmap-2.0.1.tgz?cache=0&sync_timestamp=1622917359701&other_urls=https%3A%2F%2Fregistry.nlark.com%2Finternmap%2Fdownload%2Finternmap-2.0.1.tgz#33d0fa016185397549fb1a14ea3dbe5a2949d1cd" @@ -1019,13 +1279,6 @@ is-binary-path@~2.1.0: dependencies: binary-extensions "^2.0.0" -is-core-module@^2.2.0: - version "2.4.0" - resolved "https://registry.nlark.com/is-core-module/download/is-core-module-2.4.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fis-core-module%2Fdownload%2Fis-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1" - integrity sha1-jp/I4VAnsBFBgCbpjw5vTYYwXME= - dependencies: - has "^1.0.3" - is-extglob@^2.1.1: version "2.1.1" resolved "https://registry.npm.taobao.org/is-extglob/download/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" @@ -1053,12 +1306,10 @@ jsesc@^2.5.1: resolved "https://registry.nlark.com/jsesc/download/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" integrity sha1-gFZNLkg9rPbo7yCWUKZ98/DCg6Q= -json5@^2.1.2: - version "2.2.0" - resolved "https://registry.npm.taobao.org/json5/download/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3" - integrity sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM= - dependencies: - minimist "^1.2.5" +json5@^2.2.3: + version "2.2.3" + resolved "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" + integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== loose-envify@^1.1.0: version "1.4.0" @@ -1067,25 +1318,27 @@ loose-envify@^1.1.0: dependencies: js-tokens "^3.0.0 || ^4.0.0" -minimist@^1.2.5: - version "1.2.5" - resolved "https://registry.nlark.com/minimist/download/minimist-1.2.5.tgz?cache=0&sync_timestamp=1618847017774&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fminimist%2Fdownload%2Fminimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" - integrity sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI= +lru-cache@^5.1.1: + version "5.1.1" + resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" + integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== + dependencies: + yallist "^3.0.2" ms@2.1.2: version "2.1.2" resolved "https://registry.nlark.com/ms/download/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk= -nanoid@^3.1.23: - version "3.1.23" - resolved "https://registry.nlark.com/nanoid/download/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81" - integrity sha1-90QIbOfCvEfuCoRyV01ceOQYOoE= +nanoid@^3.3.6: + version "3.3.6" + resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" + integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== -node-releases@^1.1.71: - version "1.1.73" - resolved "https://registry.nlark.com/node-releases/download/node-releases-1.1.73.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fnode-releases%2Fdownload%2Fnode-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20" - integrity sha1-3U6B3dUnf/hGuAtSu0DEnt96eyA= +node-releases@^2.0.13: + version "2.0.13" + resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d" + integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ== normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" @@ -1097,24 +1350,36 @@ object-assign@^4.1.1: resolved "https://registry.nlark.com/object-assign/download/object-assign-4.1.1.tgz?cache=0&sync_timestamp=1618847043548&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fobject-assign%2Fdownload%2Fobject-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= -path-parse@^1.0.6: - version "1.0.7" - resolved "https://registry.nlark.com/path-parse/download/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" - integrity sha1-+8EUtgykKzDZ2vWFjkvWi77bZzU= +picocolors@^1.0.0: + version "1.0.0" + resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" + integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== picomatch@^2.0.4, picomatch@^2.2.1: version "2.3.0" resolved "https://registry.nlark.com/picomatch/download/picomatch-2.3.0.tgz?cache=0&sync_timestamp=1621648246651&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fpicomatch%2Fdownload%2Fpicomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" integrity sha1-8fBh3o9qS/AiiS4tEoI0+5gwKXI= -postcss@^8.3.0: - version "8.3.4" - resolved "https://registry.nlark.com/postcss/download/postcss-8.3.4.tgz#41ece1c43f2f7c74dc7d90144047ce052757b822" - integrity sha1-QezhxD8vfHTcfZAUQEfOBSdXuCI= +postcss@^8.4.27: + version "8.4.31" + resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" + integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ== dependencies: - colorette "^1.2.2" - nanoid "^3.1.23" - source-map-js "^0.6.2" + nanoid "^3.3.6" + picocolors "^1.0.0" + source-map-js "^1.0.2" + +quickselect@^2.0.0: + version "2.0.0" + resolved "https://registry.npmmirror.com/quickselect/-/quickselect-2.0.0.tgz#f19680a486a5eefb581303e023e98faaf25dd018" + integrity sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw== + +rbush@^3.0.1: + version "3.0.1" + resolved "https://registry.npmmirror.com/rbush/-/rbush-3.0.1.tgz#5fafa8a79b3b9afdfe5008403a720cc1de882ecf" + integrity sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w== + dependencies: + quickselect "^2.0.0" react-dom@^17.0.0: version "17.0.2" @@ -1125,10 +1390,10 @@ react-dom@^17.0.0: object-assign "^4.1.1" scheduler "^0.20.2" -react-refresh@^0.9.0: - version "0.9.0" - resolved "https://registry.nlark.com/react-refresh/download/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf" - integrity sha1-cYYzN63D5cL4pr/d0Srjv+Mqr78= +react-refresh@^0.14.0: + version "0.14.0" + resolved "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e" + integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ== react@^17.0.0: version "17.0.2" @@ -1145,47 +1410,36 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" -resolve@^1.19.0: - version "1.20.0" - resolved "https://registry.nlark.com/resolve/download/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" - integrity sha1-YpoBP7P3B1XW8LeTXMHCxTeLGXU= - dependencies: - is-core-module "^2.2.0" - path-parse "^1.0.6" - robust-predicates@^3.0.0: version "3.0.1" resolved "https://registry.npm.taobao.org/robust-predicates/download/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a" integrity sha1-7N4HUET38wEYaCvZ+z8SMQlXf5o= -rollup@^2.38.5: - version "2.51.2" - resolved "https://registry.nlark.com/rollup/download/rollup-2.51.2.tgz#6de71e28c833089a0bd745a09671a3e2b92af6b7" - integrity sha1-beceKMgzCJoL10WglnGj4rkq9rc= +rollup@^3.27.1: + version "3.29.4" + resolved "https://registry.npmmirror.com/rollup/-/rollup-3.29.4.tgz#4d70c0f9834146df8705bfb69a9a19c9e1109981" + integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw== optionalDependencies: - fsevents "~2.3.1" + fsevents "~2.3.2" rw@1: version "1.3.3" resolved "https://registry.nlark.com/rw/download/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4" integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q= -safe-buffer@~5.1.1: - version "5.1.2" - resolved "https://registry.npm.taobao.org/safe-buffer/download/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" - integrity sha1-mR7GnSluAxN0fVm9/St0XDX4go0= - "safer-buffer@>= 2.1.2 < 3.0.0": version "2.1.2" resolved "https://registry.nlark.com/safer-buffer/download/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo= -sass@^1.35.0: - version "1.35.0" - resolved "https://registry.nlark.com/sass/download/sass-1.35.0.tgz?cache=0&sync_timestamp=1623718831748&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsass%2Fdownload%2Fsass-1.35.0.tgz#37c39e60eb3f82149488a9ca9ae48f888bf9324d" - integrity sha1-N8OeYOs/ghSUiKnKmuSPiIv5Mk0= +sass@^1.69.0: + version "1.69.0" + resolved "https://registry.npmmirror.com/sass/-/sass-1.69.0.tgz#5195075371c239ed556280cf2f5944d234f42679" + integrity sha512-l3bbFpfTOGgQZCLU/gvm1lbsQ5mC/WnLz3djL2v4WCJBDrWm58PO+jgngcGRNnKUh6wSsdm50YaovTqskZ0xDQ== dependencies: chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" scheduler@^0.20.2: version "0.20.2" @@ -1195,20 +1449,15 @@ scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" -semver@^6.3.0: - version "6.3.0" - resolved "https://registry.nlark.com/semver/download/semver-6.3.0.tgz?cache=0&sync_timestamp=1618847119601&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsemver%2Fdownload%2Fsemver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" - integrity sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0= +semver@^6.3.1: + version "6.3.1" + resolved "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== -source-map-js@^0.6.2: - version "0.6.2" - resolved "https://registry.npm.taobao.org/source-map-js/download/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" - integrity sha1-C7XeYxtBz72mz7qL0FqA79/SOF4= - -source-map@^0.5.0: - version "0.5.7" - resolved "https://registry.nlark.com/source-map/download/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" - integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: + version "1.0.2" + resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== supports-color@^5.3.0: version "5.5.0" @@ -1229,29 +1478,36 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" -tslib@^1.10.0: - version "1.14.1" - resolved "https://registry.nlark.com/tslib/download/tslib-1.14.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" - integrity sha1-zy04vcNKE0vK8QkcQfZhni9nLQA= +tslib@^2.3.1, tslib@^2.5.3: + version "2.6.2" + resolved "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" + integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== -tslib@^2.0.3: - version "2.3.0" - resolved "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e" - integrity sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4= - -typescript@^4.3.2: - version "4.3.2" - resolved "https://registry.nlark.com/typescript/download/typescript-4.3.2.tgz?cache=0&sync_timestamp=1623741575627&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftypescript%2Fdownload%2Ftypescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805" - integrity sha1-OZqxiqxFgC1vJJjeUFT8u+cWqAU= - -vite@^2.3.7: - version "2.3.7" - resolved "https://registry.nlark.com/vite/download/vite-2.3.7.tgz?cache=0&sync_timestamp=1623136852238&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvite%2Fdownload%2Fvite-2.3.7.tgz#3023892419367465e1af1739578f8663d04243b2" - integrity sha1-MCOJJBk2dGXhrxc5V4+GY9BCQ7I= - dependencies: - esbuild "^0.12.5" - postcss "^8.3.0" - resolve "^1.19.0" - rollup "^2.38.5" +typescript@^5.2.2: + version "5.2.2" + resolved "https://registry.npmmirror.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78" + integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w== + +update-browserslist-db@^1.0.13: + version "1.0.13" + resolved "https://registry.npmmirror.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4" + integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg== + dependencies: + escalade "^3.1.1" + picocolors "^1.0.0" + +vite@^4.4.11: + version "4.4.11" + resolved "https://registry.npmmirror.com/vite/-/vite-4.4.11.tgz#babdb055b08c69cfc4c468072a2e6c9ca62102b0" + integrity sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A== + dependencies: + esbuild "^0.18.10" + postcss "^8.4.27" + rollup "^3.27.1" optionalDependencies: - fsevents "~2.3.1" + fsevents "~2.3.2" + +yallist@^3.0.2: + version "3.1.1" + resolved "https://registry.npmmirror.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" + integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== From c9fa8824ef1c1f5b0ed5cc5cedd194d6382974a3 Mon Sep 17 00:00:00 2001 From: kfd Date: Wed, 11 Oct 2023 12:00:34 +0800 Subject: [PATCH 2/5] feat: finish line/path/path-fill/path-double --- src/components/g-audio.tsx | 8 +++--- src/components/s-circle.tsx | 32 ++++++++++++---------- src/components/s-line.tsx | 4 +-- src/components/s-path-double.tsx | 25 ++++++++++------- src/components/s-path-fill.tsx | 46 +++++++++++++++++++------------- src/components/s-path.tsx | 30 +++++++++++++-------- src/utils/base.ts | 2 +- 7 files changed, 87 insertions(+), 60 deletions(-) diff --git a/src/components/g-audio.tsx b/src/components/g-audio.tsx index ba06d12..119b70e 100644 --- a/src/components/g-audio.tsx +++ b/src/components/g-audio.tsx @@ -2,11 +2,11 @@ import React, { useEffect, useRef, useState } from "react"; import { MusicVisualizer } from '../plugins/MusicVisualizer' import style from './g-audio.module.scss' import SLine from './s-line' -// import SPath from './s-path' +import SPath from './s-path' // import SPathDot from './s-path-dot' -// import SPathFill from './s-path-fill' +import SPathFill from './s-path-fill' // import SCircle from './s-circle' -// import SPathDouble from './s-path-double' +import SPathDouble from './s-path-double' // import SDot from "./s-dot"; // import SPaticle from "./s-particle"; import { apiURL, DEFAULT_IMG } from '@/global' @@ -15,7 +15,7 @@ export const MusicVisualizerCtx = new MusicVisualizer() // const exampleList = [SLine, SPathDouble, SPath, SPathFill, SCircle, SPaticle, SDot, SPathDot] -const exampleList = [SLine] +const exampleList = [SLine, SPathDouble, SPath, SPathFill] export default function GAudio() { const audio = useRef(null) diff --git a/src/components/s-circle.tsx b/src/components/s-circle.tsx index 87ecd04..e8232e2 100644 --- a/src/components/s-circle.tsx +++ b/src/components/s-circle.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from "react"; -import { Canvas, IShape } from '@antv/g-canvas'; -import { getCirclePath } from '../utils' +import { Canvas, Image, Circle, Path } from '@antv/g'; +import { Renderer } from '@antv/g-canvas'; import { getImageCircle } from '../utils/base'; import { X, Y, R } from '../utils/constanst' import useAudioImg from "@/hooks/useAudioImg"; @@ -14,10 +14,10 @@ export default function SCircle(props: SComponentProps) { const CIRCLE_SCALE_OFFSET = 80 const canvas = useRef() - const circle = useRef() + const circle = useRef() - const circleArr = useRef([]) - const circleDotArr = useRef([]) + const circleArr = useRef([]) + const circleDotArr = useRef([]) const circleDotDegArr = useRef([]) const circleArrStart = useRef([]) @@ -50,6 +50,7 @@ export default function SCircle(props: SComponentProps) { container: 'SCircle', width: 2 * X, height: 2 * Y, + renderer: new Renderer() }); circle.current = getImageCircle(canvas.current, { @@ -60,23 +61,24 @@ export default function SCircle(props: SComponentProps) { }) const addCircle = () => { - return (canvas.current as Canvas).addShape('circle', { - attrs: { + const circle = new Circle({ + style: { stroke: LINE_COLOR, lineWidth: 2, opacity: 0, - x: X, - y: Y, + cx: X, + cy: Y, r: R - //path: getCirclePath(X, Y, R), } }) + canvas.current?.appendChild(circle) + return circle }; const addCircleDot = () => { - return (canvas.current as Canvas).addShape('circle', { - attrs: { - x: X, - y: Y - R, + const circleDot = new Circle({ + style: { + cx: X, + cy: Y - R, r: DOT_R, fill: LINE_COLOR, shadowColor: DOT_COLOR, @@ -84,6 +86,8 @@ export default function SCircle(props: SComponentProps) { opacity: 0 } }) + canvas.current?.appendChild(circleDot) + return circleDot } const animateOption = { duration: 6000, diff --git a/src/components/s-line.tsx b/src/components/s-line.tsx index 3023ec6..b6c313e 100644 --- a/src/components/s-line.tsx +++ b/src/components/s-line.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef } from "react"; -import { Canvas, Image, Rect, DisplayObject } from '@antv/g'; +import { Canvas, Image, Rect } from '@antv/g'; import { Renderer } from '@antv/g-canvas'; // import { formatToTransit } from '../utils' import { getImageCircle } from '../utils/base' @@ -14,7 +14,7 @@ export default function SLine(props: SComponentProps) { const canvas = useRef() const circle = useRef() - const sArr = useRef([]) + const sArr = useRef([]) function getArray(arr: number[]) { const filterArr = arr.reduce((prev: number[], curr: number, index: number) => { diff --git a/src/components/s-path-double.tsx b/src/components/s-path-double.tsx index 43e290a..e954c15 100644 --- a/src/components/s-path-double.tsx +++ b/src/components/s-path-double.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef } from "react"; -import { Canvas, IShape } from '@antv/g-canvas'; +import { Canvas, Image, Path, Line } from '@antv/g'; +import { Renderer } from '@antv/g-canvas'; import { formatToTransit, getCirclePath } from '../utils' import { line, curveCardinalClosed } from 'd3' import { getImageCircle } from '../utils/base'; @@ -13,10 +14,10 @@ export default function SPath(props: SComponentProps) { // const COLORS = ['#e9dcf7', '#cdd9f5', '#cdf5dd', '#f3dfbb'] const canvas = useRef() - const circle = useRef() + const circle = useRef() - const sPath = useRef() - const lineArr = useRef([]) + const sPath = useRef() + const lineArr = useRef([]) function getArray(arr: number[]) { let _arr: number[] = []; @@ -51,7 +52,9 @@ export default function SPath(props: SComponentProps) { lineArr.current[index].attr('y2', point2[1]) }) const path = line().x((d: [number,number]) => d[0]).y((d: [number, number]) => d[1]).curve(curveCardinalClosed)(pathPointArr) - sPath.current?.attr('path', path) + if (path) { + sPath.current?.attr('path', path) + } } }, [ props.data @@ -62,6 +65,7 @@ export default function SPath(props: SComponentProps) { container: 'SPathDouble', width: 2 * X, height: 2 * Y, + renderer: new Renderer() }); circle.current = getImageCircle(canvas.current, { @@ -71,17 +75,18 @@ export default function SPath(props: SComponentProps) { shadowColor: COLOR }) - sPath.current = canvas.current.addShape('path', { - attrs: { + sPath.current = new Path({ + style: { stroke: COLOR, lineWidth: 1, path: getCirclePath(X, Y, R + OFFSET) } }) + canvas.current.appendChild(sPath.current) lineArr.current = Array.from({length: POINT_NUM}, (item, index) => { - return (canvas.current as Canvas).addShape('line', { - attrs: { + const line = new Line({ + style: { x1: X, y1: Y - R, x2: X, @@ -90,6 +95,8 @@ export default function SPath(props: SComponentProps) { lineWidth: 1 } }) + canvas.current?.appendChild(line) + return line }) }, []) diff --git a/src/components/s-path-fill.tsx b/src/components/s-path-fill.tsx index 03cecfa..533d27b 100644 --- a/src/components/s-path-fill.tsx +++ b/src/components/s-path-fill.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef } from "react"; -import { Canvas, IShape } from '@antv/g-canvas'; +import { Canvas, Image, Path } from '@antv/g'; +import { Renderer } from '@antv/g-canvas'; import { formatToTransit, addColorOpacity } from '../utils' import { line, curveCardinalClosed } from 'd3' import { getImageCircle } from '../utils/base'; @@ -13,9 +14,9 @@ export default function SLine(props: SComponentProps) { const COLORS = ['#81D8F2', '#67A1E0', '#5263C2', '#74E1A5'] const canvas = useRef() - const circle = useRef() + const circle = useRef() - const SPathFillArr = useRef([]) + const SPathFillArr = useRef([]) function getArray(arr: number[]) { let _arr: number[] = []; @@ -43,7 +44,9 @@ export default function SLine(props: SComponentProps) { }) pathArr.map((item,index) => { const path = line().x((d: [number,number]) => d[0]).y((d: [number, number]) => d[1]).curve(curveCardinalClosed)(item) - SPathFillArr.current[index].attr('path', path) + if (path) { + SPathFillArr.current[index].attr('path', path) + } }) } }, [ @@ -55,28 +58,33 @@ export default function SLine(props: SComponentProps) { container: 'SPathFill', width: 2 * X, height: 2 * Y, + renderer: new Renderer() }); - circle.current = getImageCircle(canvas.current, { - x: X, - y: Y, - r: R, - shadowColor: '#ffffff' - }).setZIndex(2) - const PointArr = Array.from({ length: POINT_NUM / 4 }, (item, index: number) => { return getPointByIndex(index * 4) }) const path = line().x((d: [number,number]) => d[0]).y((d: [number, number]) => d[1]).curve(curveCardinalClosed)(PointArr) Array.from({ length: 4 }, (item, index: number) => { - SPathFillArr.current.push((canvas.current as Canvas).addShape('path', { - attrs: { - stroke: COLORS[index], - lineWidth: 1, - path, - fill: addColorOpacity(COLORS[index], 0.2) - } - }).setZIndex(1)) + if (path) { + const pathEl = new Path({ + style: { + stroke: COLORS[index], + lineWidth: 1, + path, + fill: addColorOpacity(COLORS[index], 0.2) + } + }) + canvas.current?.appendChild(pathEl) + SPathFillArr.current.push(pathEl) + } + }) + + circle.current = getImageCircle(canvas.current, { + x: X, + y: Y, + r: R, + shadowColor: '#ffffff' }) }, []) diff --git a/src/components/s-path.tsx b/src/components/s-path.tsx index 7139e8e..498a02c 100644 --- a/src/components/s-path.tsx +++ b/src/components/s-path.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef } from "react"; -import { Canvas, IShape } from '@antv/g-canvas'; +import { Canvas, Image, Path } from '@antv/g'; +import { Renderer } from '@antv/g-canvas'; import { formatToTransit } from '../utils' import { line, curveCardinalClosed } from 'd3' import { getImageCircle } from '../utils/base'; @@ -14,8 +15,8 @@ export default function SPath(props: SComponentProps) { // const COLORS = ['#4E4BD7', '#BB4BD7', '#4BD773', '#D7544B'] const canvas = useRef() - const circle = useRef() - const sPathArr = useRef([]) + const circle = useRef() + const sPathArr = useRef([]) function getArray(arr: number[]) { let _arr: number[] = []; @@ -43,7 +44,9 @@ export default function SPath(props: SComponentProps) { }) pathArr.map((item,index) => { const path = line().x((d: [number,number]) => d[0]).y((d: [number, number]) => d[1]).curve(curveCardinalClosed)(item) - sPathArr.current[index]?.attr('path', path) + if (path) { + sPathArr.current[index]?.attr('path', path) + } }) } }, [ @@ -55,6 +58,7 @@ export default function SPath(props: SComponentProps) { container: 'SPath', width: 2 * X, height: 2 * Y, + renderer: new Renderer() }); circle.current = getImageCircle(canvas.current, { @@ -69,13 +73,17 @@ export default function SPath(props: SComponentProps) { }) const path = line().x((d: [number,number]) => d[0]).y((d: [number, number]) => d[1]).curve(curveCardinalClosed)(PointArr) Array.from({ length: 4 }, (item, index: number) => { - sPathArr.current.push((canvas.current as Canvas).addShape('path', { - attrs: { - stroke: COLORS[index], - lineWidth: 1, - path - } - })) + if (path) { + const pathEl = new Path({ + style: { + stroke: COLORS[index], + lineWidth: 1, + path + } + }) + canvas.current?.appendChild(pathEl) + sPathArr.current.push(pathEl) + } }) }, []) diff --git a/src/utils/base.ts b/src/utils/base.ts index 19560d8..d4cefb2 100644 --- a/src/utils/base.ts +++ b/src/utils/base.ts @@ -43,7 +43,7 @@ export function getImageCircle(canvas: Canvas, { x, y, r, shadowColor }: ImageCi { transform: 'rotate(0)' }, { transform: 'rotate(360deg)' } ], { - duration: 10000, + duration: 12000, iterations: Infinity }) From c41796be7c22fd086773a525dd2708a5791b8e9d Mon Sep 17 00:00:00 2001 From: kfd Date: Fri, 13 Oct 2023 10:49:30 +0800 Subject: [PATCH 3/5] feat: test to upgrate --- src/components/g-audio.tsx | 4 +- src/components/s-circle.tsx | 117 ++++++++++++++++++---------------- src/components/s-dot.tsx | 46 +++++-------- src/components/s-particle.tsx | 8 ++- src/components/s-path-dot.tsx | 36 ++++++----- 5 files changed, 104 insertions(+), 107 deletions(-) diff --git a/src/components/g-audio.tsx b/src/components/g-audio.tsx index 119b70e..0272a81 100644 --- a/src/components/g-audio.tsx +++ b/src/components/g-audio.tsx @@ -7,7 +7,7 @@ import SPath from './s-path' import SPathFill from './s-path-fill' // import SCircle from './s-circle' import SPathDouble from './s-path-double' -// import SDot from "./s-dot"; +import SDot from "./s-dot"; // import SPaticle from "./s-particle"; import { apiURL, DEFAULT_IMG } from '@/global' @@ -15,7 +15,7 @@ export const MusicVisualizerCtx = new MusicVisualizer() // const exampleList = [SLine, SPathDouble, SPath, SPathFill, SCircle, SPaticle, SDot, SPathDot] -const exampleList = [SLine, SPathDouble, SPath, SPathFill] +const exampleList = [SLine, SPathDouble, SPath, SPathFill, SDot] export default function GAudio() { const audio = useRef(null) diff --git a/src/components/s-circle.tsx b/src/components/s-circle.tsx index e8232e2..570641d 100644 --- a/src/components/s-circle.tsx +++ b/src/components/s-circle.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useRef } from "react"; -import { Canvas, Image, Circle, Path } from '@antv/g'; +import { Canvas, Image, Circle, Group } from '@antv/g'; import { Renderer } from '@antv/g-canvas'; import { getImageCircle } from '../utils/base'; import { X, Y, R } from '../utils/constanst' @@ -11,12 +11,12 @@ export default function SCircle(props: SComponentProps) { const DOT_R = 5 const CIRCLE_NUM = 3 const CIRCLE_DELAY = 2000 - const CIRCLE_SCALE_OFFSET = 80 + const CIRCLE_SCALE_RARIO = 2 const canvas = useRef() const circle = useRef() - const circleArr = useRef([]) + const circleArr = useRef([]) const circleDotArr = useRef([]) const circleDotDegArr = useRef([]) const circleArrStart = useRef([]) @@ -65,79 +65,84 @@ export default function SCircle(props: SComponentProps) { style: { stroke: LINE_COLOR, lineWidth: 2, - opacity: 0, + opacity: 1, cx: X, cy: Y, - r: R + r: R, } }) - canvas.current?.appendChild(circle) - return circle - }; - const addCircleDot = () => { - const circleDot = new Circle({ + // const circleDot = new Circle({ + // style: { + // cx: X, + // cy: Y, + // r: DOT_R, + // fill: LINE_COLOR, + // shadowColor: DOT_COLOR, + // shadowBlur: DOT_R, + // opacity: 1, + // transform: `translate(${R}, 0)` + // } + // }) + const group = new Group({ style: { - cx: X, - cy: Y - R, - r: DOT_R, - fill: LINE_COLOR, - shadowColor: DOT_COLOR, - shadowBlur: DOT_R, - opacity: 0 + x: 0, + y: 0 } }) - canvas.current?.appendChild(circleDot) - return circleDot - } + // group.style.transform = `rotate(180deg) scale(1.5)` + group.appendChild(circle) + group.scaleLocal(1) + // group.appendChild(circleDot) + canvas.current?.appendChild(group) + return group + }; const animateOption = { - duration: 6000, - easing: 'easeLinear', - repeat: true + duration: CIRCLE_DELAY * CIRCLE_NUM, + iterations: Infinity } Array.from({ length: CIRCLE_NUM }, (item, index) => { circleArrStart.current.push(false) - // circle circleArr.current.push(addCircle()) - circleArr.current[index].animate((ratio: number) => { - return { - r: R + ratio * CIRCLE_SCALE_OFFSET, - // path: getCirclePath(X, Y, R + ratio * 80), - opacity: ratio > 0.02 && ratio < 0.9 ? 0.8 - ratio * 0.8 : 0 - } - }, animateOption) + // circleArr.current[index].animate( + // [ + // { transform: 'scale(1)', opacity: 0.8 }, + // { transform: `scale(${CIRCLE_SCALE_RARIO})`, opacity: 0 } + // ], + // animateOption + // ) // circle-dot - circleDotArr.current.push(addCircleDot()) - circleDotDegArr.current.push(0) - circleDotArr.current[index].animate((ratio: number) => { - if (props.data && ratio < 0.05 && !circleDotDegArr.current[index]) { - circleDotDegArr.current[index] = pickStartPoint() - } else if (ratio > 0.9) { - circleDotDegArr.current[index] = 0 - } - const deg = circleDotDegArr.current[index] + ratio * 360 - 180 - const l = Math.cos(deg * Math.PI / 180) - const t = Math.sin(deg * Math.PI / 180) - const r = R + ratio * CIRCLE_SCALE_OFFSET - return { - x: X + l * r, - y: Y + t * r, - r: DOT_R * (1 - ratio / 2), - opacity: ratio > 0.05 && ratio < 0.9 ? 0.8 - ratio * 0.8 : 0 - } - }, animateOption) + // circleDotArr.current.push(addCircleDot()) + // circleDotDegArr.current.push(0) + // circleDotArr.current[index].animate((ratio: number) => { + // if (props.data && ratio < 0.05 && !circleDotDegArr.current[index]) { + // circleDotDegArr.current[index] = pickStartPoint() + // } else if (ratio > 0.9) { + // circleDotDegArr.current[index] = 0 + // } + // const deg = circleDotDegArr.current[index] + ratio * 360 - 180 + // const l = Math.cos(deg * Math.PI / 180) + // const t = Math.sin(deg * Math.PI / 180) + // const r = R + ratio * CIRCLE_SCALE_OFFSET + // return { + // x: X + l * r, + // y: Y + t * r, + // r: DOT_R * (1 - ratio / 2), + // opacity: ratio > 0.05 && ratio < 0.9 ? 0.8 - ratio * 0.8 : 0 + // } + // }, animateOption) }) } if (props.isPlaying) { for(let i = 0; i < circleArr.current.length; i++) { if (circleArrStart.current[i]) { - circleArr.current[i].resumeAnimate() - circleDotArr.current[i].resumeAnimate() + // circleArr.current[i].getAnimations()?.[0]?.pause() + // circleDotArr.current[i].resumeAnimate() } else { setTimeout(() => { if (!isPlaying.current) return - circleArr.current[i].resumeAnimate() - circleDotArr.current[i].resumeAnimate() + circleArr.current[i].getAnimations()?.[0]?.play() + // circleDotArr.current[i].resumeAnimate() circleArrStart.current[i] = true }, i * CIRCLE_DELAY) } @@ -145,8 +150,8 @@ export default function SCircle(props: SComponentProps) { } else { setTimeout(() => { for(let i = 0; i < circleArr.current.length; i++) { - circleArr.current[i].pauseAnimate() - circleDotArr.current[i].pauseAnimate() + circleArr.current[i].getAnimations()?.[0]?.pause() + // circleDotArr.current[i].pauseAnimate() } }) } diff --git a/src/components/s-dot.tsx b/src/components/s-dot.tsx index 9e4faf9..5a7abc2 100644 --- a/src/components/s-dot.tsx +++ b/src/components/s-dot.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef } from "react"; -import { Canvas } from '@antv/g-canvas'; +import { Canvas, Image, Circle, Line } from '@antv/g'; +import { Renderer } from '@antv/g-canvas' // import { formatToTransit } from '../utils' -import { IElement, IShape } from "@antv/g-canvas/lib/types"; import { getImageCircle } from '../utils/base'; import { X, Y, R } from '../utils/constanst'; import useAudioImg from "@/hooks/useAudioImg"; @@ -18,10 +18,10 @@ export default function SDot(props: SComponentProps) { const canvas = useRef() - const circle = useRef() + const circle = useRef() - const sArr = useRef([]) - const lArr = useRef([]) + const sArr = useRef([]) + const lArr = useRef([]) function getArray(arr: number[]) { // return formatToTransit(arr, 13, 0.92) @@ -43,8 +43,8 @@ export default function SDot(props: SComponentProps) { if (props.data?.length) { getArray(props.data).map((item,index) => { const [x, y] = getPointByIndex(index, item * item / 65025 * DOT_OFFSET + 4) - sArr.current[index].attr('x', x) - sArr.current[index].attr('y', y) + sArr.current[index].attr('cx', x) + sArr.current[index].attr('cy', y) lArr.current[index].attr('x2', x) lArr.current[index].attr('y2', y) }) @@ -58,6 +58,7 @@ export default function SDot(props: SComponentProps) { container: 'SDot', width: 2 * X, height: 2 * Y, + renderer: new Renderer() }); circle.current = getImageCircle(canvas.current, { @@ -67,36 +68,19 @@ export default function SDot(props: SComponentProps) { shadowColor: DOT_COLOR }) - // sArr.current = Array.from({ length: POINT_NUM }, (item, index: number) => { - // const [x, y, l, t] = getPointByIndex(index) - // const shadowOffsetX = l * SHADOW_OFFSET - // const shadowOffsetY = t * SHADOW_OFFSET - // return (canvas.current as Canvas).addShape('circle', { - // attrs: { - // x, - // y, - // r: DOT_R, - // fill: DOT_COLOR, - // shadowColor: SHADOW_COLOR, - // shadowOffsetX: -shadowOffsetX, - // shadowOffsetY: -shadowOffsetY, - // shadowBlur: SHADOW_BLUR - // } - // }) - // }) Array.from({ length: POINT_NUM }, (item, index: number) => { const [x, y, l, t] = getPointByIndex(index) const deg = ~~(index * (360 / POINT_NUM) + 210) - const dot = (canvas.current as Canvas).addShape('circle', { - attrs: { - x, - y, + const dot = new Circle({ + style: { + cx: x, + cy: y, r: DOT_R, fill: DOT_COLOR } }) - const line = (canvas.current as Canvas).addShape('line', { - attrs: { + const line = new Line({ + style: { x1: x, y1: y, x2: x, @@ -105,6 +89,8 @@ export default function SDot(props: SComponentProps) { stroke: `l(${deg}) 0.3:rgba(255,255,255,0) 1:${DOT_COLOR}` } }) + canvas.current?.appendChild(dot) + canvas.current?.appendChild(line) sArr.current.push(dot) lArr.current.push(line) }) diff --git a/src/components/s-particle.tsx b/src/components/s-particle.tsx index c776c83..4d1ba22 100644 --- a/src/components/s-particle.tsx +++ b/src/components/s-particle.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef } from 'react'; -import { Canvas, IShape } from '@antv/g-canvas'; +import { Canvas, Image, Circle } from '@antv/g'; +import { Renderer } from '@antv/g-canvas' import { getImageCircle } from '../utils/base' import { X, Y, R } from '../utils/constanst' import useAudioImg from "@/hooks/useAudioImg"; @@ -13,9 +14,9 @@ export default function SPaticle(props: SComponentProps) { const POINT_CREATE_DELAY = 4000 const canvas = useRef() - const circle = useRef() + const circle = useRef() - const particleArr = useRef([]) + const particleArr = useRef([]) const particleStartArr = useRef([]) const particleActiveArr = useRef([]) @@ -54,6 +55,7 @@ export default function SPaticle(props: SComponentProps) { container: 'SParticle', width: 2 * X, height: 2 * Y, + renderer: new Renderer() }); circle.current = getImageCircle(canvas.current, { diff --git a/src/components/s-path-dot.tsx b/src/components/s-path-dot.tsx index b7a61f1..08a158b 100644 --- a/src/components/s-path-dot.tsx +++ b/src/components/s-path-dot.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from "react"; -import { Canvas, IShape } from '@antv/g-canvas'; -import { IElement } from "@antv/g-canvas/lib/types"; +import { Canvas, Image, Path, Circle } from '@antv/g'; +import { Renderer } from '@antv/g-canvas' import { line, curveCardinalClosed } from 'd3'; import { getImageCircle } from '../utils/base'; import { X, Y, R } from '../utils/constanst' @@ -19,10 +19,10 @@ export default function SPathDot(props: SComponentProps) { const canvas = useRef() - const circle = useRef() + const circle = useRef() - const sArr = useRef([]) - const fakePath = useRef() + const sArr = useRef([]) + const fakePath = useRef() function getArray(arr: number[]) { return arr @@ -45,12 +45,12 @@ export default function SPathDot(props: SComponentProps) { } return pre }, []) - const path = line().x((d) => d[0]).y((d) => d[1]).curve(curveCardinalClosed)(PointArr) + const path = line().x((d) => d[0]).y((d) => d[1]).curve(curveCardinalClosed)(PointArr) as string fakePath.current.attr('path', path) sArr.current.map((item,index) => { const { x, y } = (fakePath.current as any).getPoint(index / POINT_NUM) - item.attr('x', x) - item.attr('y', y) + item.attr('cx', x) + item.attr('cy', y) }) } }, [ @@ -62,6 +62,7 @@ export default function SPathDot(props: SComponentProps) { container: 'SPathDot', width: 2 * X, height: 2 * Y, + renderer: new Renderer() }); circle.current = getImageCircle(canvas.current, { @@ -74,22 +75,23 @@ export default function SPathDot(props: SComponentProps) { const PointArr = Array.from({ length: POINT_NUM / PACE_NUM }, (item, index: number) => { return getPointByIndex(index * PACE_NUM) }) - const path = line().x((d) => d[0]).y((d) => d[1]).curve(curveCardinalClosed)(PointArr as [number,number][]) - fakePath.current = canvas.current.addShape('path', { - attrs: { + const path = line().x((d) => d[0]).y((d) => d[1]).curve(curveCardinalClosed)(PointArr as [number,number][]) as string + fakePath.current = new Path({ + style: { lineWidth: 1, path } }) + canvas.current?.appendChild(fakePath.current) sArr.current = Array.from({ length: POINT_NUM }, (item, index: number) => { - const { x, y } = (fakePath.current as any).getPoint(index / POINT_NUM) + const { x, y } = (fakePath.current as Path)?.getPoint(index / POINT_NUM) const [, , l, t] = getPointByIndex(index) const shadowOffsetX = l * SHADOW_OFFSET const shadowOffsetY = t * SHADOW_OFFSET - return (canvas.current as Canvas).addShape('circle', { - attrs: { - x, - y, + const circle = new Circle({ + style: { + cx: x, + cy: y, r: DOT_R, fill: DOT_COLOR, shadowColor: SHADOW_COLOR, @@ -98,6 +100,8 @@ export default function SPathDot(props: SComponentProps) { shadowBlur: SHADOW_BLUR } }) + canvas.current?.appendChild(circle) + return circle }) }, []) From df9a5aa211bb2b5182b9812103947aa371e9972d Mon Sep 17 00:00:00 2001 From: kfd Date: Tue, 17 Oct 2023 18:02:04 +0800 Subject: [PATCH 4/5] feat: s-particle --- src/components/g-audio.tsx | 10 ++- src/components/s-circle.tsx | 125 ++++++++++++++++---------------- src/components/s-particle.tsx | 131 +++++++++++++++++++++++----------- src/components/s-path-dot.tsx | 113 ----------------------------- src/utils/base.ts | 10 +-- 5 files changed, 161 insertions(+), 228 deletions(-) delete mode 100644 src/components/s-path-dot.tsx diff --git a/src/components/g-audio.tsx b/src/components/g-audio.tsx index 0272a81..036efc6 100644 --- a/src/components/g-audio.tsx +++ b/src/components/g-audio.tsx @@ -3,19 +3,18 @@ import { MusicVisualizer } from '../plugins/MusicVisualizer' import style from './g-audio.module.scss' import SLine from './s-line' import SPath from './s-path' -// import SPathDot from './s-path-dot' import SPathFill from './s-path-fill' -// import SCircle from './s-circle' +import SCircle from './s-circle' import SPathDouble from './s-path-double' import SDot from "./s-dot"; -// import SPaticle from "./s-particle"; +import SPaticle from "./s-particle"; import { apiURL, DEFAULT_IMG } from '@/global' export const MusicVisualizerCtx = new MusicVisualizer() -// const exampleList = [SLine, SPathDouble, SPath, SPathFill, SCircle, SPaticle, SDot, SPathDot] +// const exampleList = [SLine, SPathDouble, SPath, SPathFill, SCircle, SPaticle, SDot] -const exampleList = [SLine, SPathDouble, SPath, SPathFill, SDot] +const exampleList = [SLine, SPathDouble, SPath, SPathFill, SDot, SCircle, SPaticle ] export default function GAudio() { const audio = useRef(null) @@ -57,7 +56,6 @@ export default function GAudio() { try { const res = await (await fetch(`https://api.injahow.cn/meting/?type=playlist&id=8577182717`)).json() if (res && res.length > 0) { - console.log('res') setPlayList(res) } } catch { diff --git a/src/components/s-circle.tsx b/src/components/s-circle.tsx index 570641d..43b1e0a 100644 --- a/src/components/s-circle.tsx +++ b/src/components/s-circle.tsx @@ -1,13 +1,18 @@ import React, { useEffect, useRef } from "react"; -import { Canvas, Image, Circle, Group } from '@antv/g'; +import { Canvas, Image, Circle, Group, IAnimation } from '@antv/g'; import { Renderer } from '@antv/g-canvas'; import { getImageCircle } from '../utils/base'; import { X, Y, R } from '../utils/constanst' import useAudioImg from "@/hooks/useAudioImg"; +type ICircleItem = { + circle: Circle, + dot: Circle +} + export default function SCircle(props: SComponentProps) { const LINE_COLOR = '#fff' - const DOT_COLOR = '#e9dcf7' + const DOT_COLOR = '#fa7' const DOT_R = 5 const CIRCLE_NUM = 3 const CIRCLE_DELAY = 2000 @@ -16,9 +21,7 @@ export default function SCircle(props: SComponentProps) { const canvas = useRef() const circle = useRef() - const circleArr = useRef([]) - const circleDotArr = useRef([]) - const circleDotDegArr = useRef([]) + const circleArr = useRef([]) const circleArrStart = useRef([]) const realtimeData = useRef([]) @@ -63,38 +66,26 @@ export default function SCircle(props: SComponentProps) { const addCircle = () => { const circle = new Circle({ style: { + cx: X, + cy: Y, stroke: LINE_COLOR, lineWidth: 2, opacity: 1, - cx: X, - cy: Y, - r: R, + r: R } }) - // const circleDot = new Circle({ - // style: { - // cx: X, - // cy: Y, - // r: DOT_R, - // fill: LINE_COLOR, - // shadowColor: DOT_COLOR, - // shadowBlur: DOT_R, - // opacity: 1, - // transform: `translate(${R}, 0)` - // } - // }) - const group = new Group({ + const circleDot = new Circle({ style: { - x: 0, - y: 0 - } + r: DOT_R, + fill: LINE_COLOR, + shadowColor: DOT_COLOR, + shadowBlur: DOT_R, + opacity: 0, + }, }) - // group.style.transform = `rotate(180deg) scale(1.5)` - group.appendChild(circle) - group.scaleLocal(1) - // group.appendChild(circleDot) - canvas.current?.appendChild(group) - return group + canvas.current?.appendChild(circle) + canvas.current?.appendChild(circleDot) + return [circle, circleDot] }; const animateOption = { duration: CIRCLE_DELAY * CIRCLE_NUM, @@ -102,47 +93,28 @@ export default function SCircle(props: SComponentProps) { } Array.from({ length: CIRCLE_NUM }, (item, index) => { circleArrStart.current.push(false) - circleArr.current.push(addCircle()) - // circleArr.current[index].animate( - // [ - // { transform: 'scale(1)', opacity: 0.8 }, - // { transform: `scale(${CIRCLE_SCALE_RARIO})`, opacity: 0 } - // ], - // animateOption - // ) - // circle-dot - // circleDotArr.current.push(addCircleDot()) - // circleDotDegArr.current.push(0) - // circleDotArr.current[index].animate((ratio: number) => { - // if (props.data && ratio < 0.05 && !circleDotDegArr.current[index]) { - // circleDotDegArr.current[index] = pickStartPoint() - // } else if (ratio > 0.9) { - // circleDotDegArr.current[index] = 0 - // } - // const deg = circleDotDegArr.current[index] + ratio * 360 - 180 - // const l = Math.cos(deg * Math.PI / 180) - // const t = Math.sin(deg * Math.PI / 180) - // const r = R + ratio * CIRCLE_SCALE_OFFSET - // return { - // x: X + l * r, - // y: Y + t * r, - // r: DOT_R * (1 - ratio / 2), - // opacity: ratio > 0.05 && ratio < 0.9 ? 0.8 - ratio * 0.8 : 0 - // } - // }, animateOption) + const [circle, dot] = addCircle() + circleArr.current.push({ circle, dot }) + circleArr.current[index].circle.animate( + [ + { transform: 'scale(1)', opacity: 0.8 }, + { transform: `scale(${CIRCLE_SCALE_RARIO})`, opacity: 0 } + ], + animateOption + ) }) } if (props.isPlaying) { for(let i = 0; i < circleArr.current.length; i++) { if (circleArrStart.current[i]) { - // circleArr.current[i].getAnimations()?.[0]?.pause() - // circleDotArr.current[i].resumeAnimate() + circleArr.current[i].circle.getAnimations()?.[0]?.play() + circleArr.current[i].dot.getAnimations()?.[0]?.play() } else { setTimeout(() => { if (!isPlaying.current) return - circleArr.current[i].getAnimations()?.[0]?.play() - // circleDotArr.current[i].resumeAnimate() + circleArr.current[i].circle.getAnimations()?.[0]?.play() + runDotAnimation(circleArr.current[i].dot) circleArrStart.current[i] = true }, i * CIRCLE_DELAY) } @@ -150,8 +122,8 @@ export default function SCircle(props: SComponentProps) { } else { setTimeout(() => { for(let i = 0; i < circleArr.current.length; i++) { - circleArr.current[i].getAnimations()?.[0]?.pause() - // circleDotArr.current[i].pauseAnimate() + circleArr.current[i].circle.getAnimations()?.[0]?.pause() + circleArr.current[i].dot.getAnimations()?.[0]?.pause() } }) } @@ -163,6 +135,31 @@ export default function SCircle(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) + function runDotAnimation(shape: Circle) { + const deg = -135 + pickStartPoint() + const l = Math.cos(deg * Math.PI / 180) + const t = Math.sin(deg * Math.PI / 180) + shape.setAttribute('cx', X + l * R) + shape.setAttribute('cy', Y + t * R) + shape.setAttribute('transformOrigin', `${-l * R + DOT_R}px ${-t * R + DOT_R}px`); + const animation = shape.animate( + [ + { transform: 'rotate(0) translate(0, 0)', opacity: 0, offset: 0.01 }, + { opacity: 0.9, offset: 0.02 }, + { transform: `rotate(360deg) translate(${l * R}, ${t * R})`, opacity: 0 } + ], + { + duration: CIRCLE_DELAY * CIRCLE_NUM + } + ) + if (animation) { + animation.onfinish = () => { + animation.cancel() // release memory?? + runDotAnimation(shape) + } + } + } + return (
) diff --git a/src/components/s-particle.tsx b/src/components/s-particle.tsx index 4d1ba22..76612f2 100644 --- a/src/components/s-particle.tsx +++ b/src/components/s-particle.tsx @@ -1,16 +1,18 @@ import React, { useEffect, useRef } from 'react'; -import { Canvas, Image, Circle } from '@antv/g'; +import { Canvas, Image, Circle, runtime } from '@antv/g'; import { Renderer } from '@antv/g-canvas' import { getImageCircle } from '../utils/base' import { X, Y, R } from '../utils/constanst' import useAudioImg from "@/hooks/useAudioImg"; +runtime.enableDataset = true + export default function SPaticle(props: SComponentProps) { const POINT_NUM = 64 const PARTICLE_NUM = 12 const OFFSET = 0 - const POINT_MOVE_LENGTH = 18 - const POINT_ACTIVE_MOVE_LENGTH = 48 + const POINT_MOVE_LENGTH = 24 + const POINT_ACTIVE_MOVE_LENGTH = 64 const POINT_CREATE_DELAY = 4000 const canvas = useRef() @@ -21,7 +23,7 @@ export default function SPaticle(props: SComponentProps) { const particleActiveArr = useRef([]) const currentActiveIndex = useRef(-1) - const timer = useRef() + const timer = useRef>() const isPlaying = useRef(false) @@ -42,7 +44,7 @@ export default function SPaticle(props: SComponentProps) { // currentActiveIndex.current = ~~(Math.random() * POINT_NUM) currentActiveIndex.current = result - timer.current = 0 + timer.current = undefined clearTimeout(timer.current) }, 300) } @@ -55,7 +57,7 @@ export default function SPaticle(props: SComponentProps) { container: 'SParticle', width: 2 * X, height: 2 * Y, - renderer: new Renderer() + renderer: new Renderer(), }); circle.current = getImageCircle(canvas.current, { @@ -75,46 +77,62 @@ export default function SPaticle(props: SComponentProps) { const x = X + l * r const y = Y + t * r - const particleShape = (canvas.current as Canvas).addShape('circle', { - attrs: { - x, - y, + const particleShape = new Circle({ + style: { + cx: x, + cy: y, r: 0.8, fill: '#fff', opacity: 0, + transformOrigin: `${-l * R + 0.8}px ${-t * R + 0.8}px`, // ⚠开启阴影会掉帧 // shadowColor: '#fcc8d9', // shadowBlur: 1 } }) - particleShape.animate((ratio: number) => { - const deg = index1 * (360 / POINT_NUM) - 150 + Math.sin(ratio * 20) * 4; - const l = Math.cos(deg * Math.PI / 180) - const t = Math.sin(deg * Math.PI / 180) - - const _index = POINT_NUM * index1 + index2 - if (particleActiveArr.current[_index]) { - if (ratio < 0.02) { - particleActiveArr.current[_index] = - index1 >= currentActiveIndex.current - 1 && index1 <= currentActiveIndex.current + 1 - ? POINT_ACTIVE_MOVE_LENGTH - : POINT_MOVE_LENGTH - } else if (ratio > 0.98) { - particleActiveArr.current[_index] = POINT_MOVE_LENGTH - } - } - const offset = particleActiveArr.current[_index] || POINT_MOVE_LENGTH - - return { - x: x + l * ratio * offset, - y: y + t * ratio * offset, - opacity: 1 - ratio - } - }, { - duration: POINT_CREATE_DELAY, - repeat: true, - easing: 'easeSinInOut' - }) + particleShape.dataset.deg = deg + particleShape.dataset.index1 = index1 + canvas.current?.appendChild(particleShape) + // const particleShape = (canvas.current as Canvas).addShape('circle', { + // attrs: { + // x, + // y, + // r: 0.8, + // fill: '#fff', + // opacity: 0, + // // ⚠开启阴影会掉帧 + // // shadowColor: '#fcc8d9', + // // shadowBlur: 1 + // } + // }) + // particleShape.animate((ratio: number) => { + // const deg = index1 * (360 / POINT_NUM) - 150 + Math.sin(ratio * 20) * 4; + // const l = Math.cos(deg * Math.PI / 180) + // const t = Math.sin(deg * Math.PI / 180) + + // const _index = POINT_NUM * index1 + index2 + // if (particleActiveArr.current[_index]) { + // if (ratio < 0.02) { + // particleActiveArr.current[_index] = + // index1 >= currentActiveIndex.current - 1 && index1 <= currentActiveIndex.current + 1 + // ? POINT_ACTIVE_MOVE_LENGTH + // : POINT_MOVE_LENGTH + // } else if (ratio > 0.98) { + // particleActiveArr.current[_index] = POINT_MOVE_LENGTH + // } + // } + // const offset = particleActiveArr.current[_index] || POINT_MOVE_LENGTH + + // return { + // x: x + l * ratio * offset, + // y: y + t * ratio * offset, + // opacity: 1 - ratio + // } + // }, { + // duration: POINT_CREATE_DELAY, + // repeat: true, + // easing: 'easeSinInOut' + // }) particleArr.current.push(particleShape) particleStartArr.current.push(false) particleActiveArr.current.push(POINT_MOVE_LENGTH) @@ -125,11 +143,11 @@ export default function SPaticle(props: SComponentProps) { if (props.isPlaying) { particleArr.current.map((item,index) => { if (particleStartArr.current[index]) { - item.resumeAnimate() + item.getAnimations()?.[0]?.play() } else { setTimeout(() => { if (!isPlaying.current) return - item.resumeAnimate() + runParticleAnimation(item) particleStartArr.current[index] = true }, Math.random() * POINT_CREATE_DELAY) } @@ -137,7 +155,7 @@ export default function SPaticle(props: SComponentProps) { } else { setTimeout(() => { particleArr.current.map(item => { - item.pauseAnimate() + item.getAnimations()?.[0]?.pause() }) }) } @@ -149,6 +167,37 @@ export default function SPaticle(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) + function runParticleAnimation(shape: Circle) { + const deg = ~~shape.dataset.deg + const index1 = ~~shape.dataset.index1 + const l = Math.cos(deg * Math.PI / 180) + const t = Math.sin(deg * Math.PI / 180) + const length = index1 >= currentActiveIndex.current - 1 && index1 <= currentActiveIndex.current + 1 ? POINT_ACTIVE_MOVE_LENGTH : POINT_MOVE_LENGTH + const arr = Array.from({ length: 4 }, (item, index) => { + const randomDeg = Math.random() * 24 + deg + const offset = 0.2 * (index + 1) + const l = Math.cos(randomDeg * Math.PI / 180) + const t = Math.sin(randomDeg * Math.PI / 180) + return { transform: `translate(${l * length * offset }, ${t * length * offset})`, offset} + }) + const animation = shape.animate( + [ + { transform: 'translate(0, 0)', opacity: 1 }, + ...arr, + { transform: `translate(${l * length}, ${t * length})`, opacity: 0 } + ], + { + duration: POINT_CREATE_DELAY + } + ) + if (animation) { + animation.onfinish = () => { + animation.cancel() // release memory?? + runParticleAnimation(shape) + } + } + } + return (
) diff --git a/src/components/s-path-dot.tsx b/src/components/s-path-dot.tsx deleted file mode 100644 index 08a158b..0000000 --- a/src/components/s-path-dot.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import React, { useEffect, useRef } from "react"; -import { Canvas, Image, Path, Circle } from '@antv/g'; -import { Renderer } from '@antv/g-canvas' -import { line, curveCardinalClosed } from 'd3'; -import { getImageCircle } from '../utils/base'; -import { X, Y, R } from '../utils/constanst' -import useAudioImg from "@/hooks/useAudioImg"; - -export default function SPathDot(props: SComponentProps) { - const POINT_NUM = 128 - const PACE_NUM = 8 // 曲率优化跳点数, 2 ** n - const JUME_OFFSET = 36 // 波动幅度 - const OFFSET = 10 - const DOT_R = 1.2 - const DOT_COLOR = '#e9dcf7' - const SHADOW_OFFSET = 5 - const SHADOW_BLUR = 4 - const SHADOW_COLOR = '#22aaff' - - - const canvas = useRef() - const circle = useRef() - - const sArr = useRef([]) - const fakePath = useRef() - - function getArray(arr: number[]) { - return arr - } - - function getPointByIndex(index: number, addHeight = 0) { - const deg = index * (360 / POINT_NUM) - 150; - const l = Math.cos(deg * Math.PI / 180) - const t = Math.sin(deg * Math.PI / 180) - const r = R + OFFSET + addHeight - return [X + l * r, Y + t * r, l, t] - } - - useEffect(() => { - if (props.data?.length && fakePath.current) { - const arr = getArray(props.data) - const PointArr = arr.reduce((pre: any, item ,index) => { - if (index % PACE_NUM) { - return [...pre, getPointByIndex(index, item * item / 65025 * JUME_OFFSET + 4)] - } - return pre - }, []) - const path = line().x((d) => d[0]).y((d) => d[1]).curve(curveCardinalClosed)(PointArr) as string - fakePath.current.attr('path', path) - sArr.current.map((item,index) => { - const { x, y } = (fakePath.current as any).getPoint(index / POINT_NUM) - item.attr('cx', x) - item.attr('cy', y) - }) - } - }, [ - props.data - ]) - - useEffect(() => { - canvas.current = new Canvas({ - container: 'SPathDot', - width: 2 * X, - height: 2 * Y, - renderer: new Renderer() - }); - - circle.current = getImageCircle(canvas.current, { - x: X, - y: Y, - r: R, - shadowColor: DOT_COLOR - }) - - const PointArr = Array.from({ length: POINT_NUM / PACE_NUM }, (item, index: number) => { - return getPointByIndex(index * PACE_NUM) - }) - const path = line().x((d) => d[0]).y((d) => d[1]).curve(curveCardinalClosed)(PointArr as [number,number][]) as string - fakePath.current = new Path({ - style: { - lineWidth: 1, - path - } - }) - canvas.current?.appendChild(fakePath.current) - sArr.current = Array.from({ length: POINT_NUM }, (item, index: number) => { - const { x, y } = (fakePath.current as Path)?.getPoint(index / POINT_NUM) - const [, , l, t] = getPointByIndex(index) - const shadowOffsetX = l * SHADOW_OFFSET - const shadowOffsetY = t * SHADOW_OFFSET - const circle = new Circle({ - style: { - cx: x, - cy: y, - r: DOT_R, - fill: DOT_COLOR, - shadowColor: SHADOW_COLOR, - shadowOffsetX: -shadowOffsetX, - shadowOffsetY: -shadowOffsetY, - shadowBlur: SHADOW_BLUR - } - }) - canvas.current?.appendChild(circle) - return circle - }) - }, []) - - useAudioImg(canvas, circle, props.isPlaying, props.audioImg) - - return ( -
- ) -} \ No newline at end of file diff --git a/src/utils/base.ts b/src/utils/base.ts index d4cefb2..3e7707c 100644 --- a/src/utils/base.ts +++ b/src/utils/base.ts @@ -1,4 +1,5 @@ import { Canvas, Circle, Image } from "@antv/g"; +import { DEFAULT_IMG } from '@/global' type ImageCircleConfig = { x: number; @@ -34,12 +35,13 @@ export function getImageCircle(canvas: Canvas, { x, y, r, shadowColor }: ImageCi cy: y, r } - }) + }), + img: DEFAULT_IMG } }) - canvas.appendChild(circle) - canvas.appendChild(image) - const animation = image.animate([ + canvas?.appendChild(circle) + canvas?.appendChild(image) + const animation = image?.animate([ { transform: 'rotate(0)' }, { transform: 'rotate(360deg)' } ], { From 1ff6b632c3e56939c54dc42098b4cfb042dc19ed Mon Sep 17 00:00:00 2001 From: kfd Date: Wed, 18 Oct 2023 17:20:12 +0800 Subject: [PATCH 5/5] feat: upgrate to latest --- package.json | 2 +- src/components/g-audio.tsx | 2 -- src/components/s-particle.tsx | 60 +++++----------------------------- src/components/s-path-fill.tsx | 8 ++--- src/components/s-path.tsx | 2 +- src/index.scss | 2 +- 6 files changed, 16 insertions(+), 60 deletions(-) diff --git a/package.json b/package.json index 025ce74..c1e21f5 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "licence": "MIT", "scripts": { "dev": "vite", - "build": "tsc && vite build", + "build": "vite build", "serve": "vite preview" }, "dependencies": { diff --git a/src/components/g-audio.tsx b/src/components/g-audio.tsx index 036efc6..0332d67 100644 --- a/src/components/g-audio.tsx +++ b/src/components/g-audio.tsx @@ -12,8 +12,6 @@ import { apiURL, DEFAULT_IMG } from '@/global' export const MusicVisualizerCtx = new MusicVisualizer() -// const exampleList = [SLine, SPathDouble, SPath, SPathFill, SCircle, SPaticle, SDot] - const exampleList = [SLine, SPathDouble, SPath, SPathFill, SDot, SCircle, SPaticle ] export default function GAudio() { diff --git a/src/components/s-particle.tsx b/src/components/s-particle.tsx index 76612f2..1923bff 100644 --- a/src/components/s-particle.tsx +++ b/src/components/s-particle.tsx @@ -15,12 +15,13 @@ export default function SPaticle(props: SComponentProps) { const POINT_ACTIVE_MOVE_LENGTH = 64 const POINT_CREATE_DELAY = 4000 + const DOT_R = 0.5 + const canvas = useRef() const circle = useRef() const particleArr = useRef([]) const particleStartArr = useRef([]) - const particleActiveArr = useRef([]) const currentActiveIndex = useRef(-1) const timer = useRef>() @@ -57,7 +58,7 @@ export default function SPaticle(props: SComponentProps) { container: 'SParticle', width: 2 * X, height: 2 * Y, - renderer: new Renderer(), + renderer: new Renderer() as any, }); circle.current = getImageCircle(canvas.current, { @@ -81,61 +82,17 @@ export default function SPaticle(props: SComponentProps) { style: { cx: x, cy: y, - r: 0.8, + r: DOT_R, fill: '#fff', opacity: 0, - transformOrigin: `${-l * R + 0.8}px ${-t * R + 0.8}px`, - // ⚠开启阴影会掉帧 - // shadowColor: '#fcc8d9', - // shadowBlur: 1 + transformOrigin: `${-l * R + DOT_R}px ${-t * R + DOT_R}px` } }) particleShape.dataset.deg = deg particleShape.dataset.index1 = index1 canvas.current?.appendChild(particleShape) - // const particleShape = (canvas.current as Canvas).addShape('circle', { - // attrs: { - // x, - // y, - // r: 0.8, - // fill: '#fff', - // opacity: 0, - // // ⚠开启阴影会掉帧 - // // shadowColor: '#fcc8d9', - // // shadowBlur: 1 - // } - // }) - // particleShape.animate((ratio: number) => { - // const deg = index1 * (360 / POINT_NUM) - 150 + Math.sin(ratio * 20) * 4; - // const l = Math.cos(deg * Math.PI / 180) - // const t = Math.sin(deg * Math.PI / 180) - - // const _index = POINT_NUM * index1 + index2 - // if (particleActiveArr.current[_index]) { - // if (ratio < 0.02) { - // particleActiveArr.current[_index] = - // index1 >= currentActiveIndex.current - 1 && index1 <= currentActiveIndex.current + 1 - // ? POINT_ACTIVE_MOVE_LENGTH - // : POINT_MOVE_LENGTH - // } else if (ratio > 0.98) { - // particleActiveArr.current[_index] = POINT_MOVE_LENGTH - // } - // } - // const offset = particleActiveArr.current[_index] || POINT_MOVE_LENGTH - - // return { - // x: x + l * ratio * offset, - // y: y + t * ratio * offset, - // opacity: 1 - ratio - // } - // }, { - // duration: POINT_CREATE_DELAY, - // repeat: true, - // easing: 'easeSinInOut' - // }) particleArr.current.push(particleShape) particleStartArr.current.push(false) - particleActiveArr.current.push(POINT_MOVE_LENGTH) }) }) } @@ -172,13 +129,14 @@ export default function SPaticle(props: SComponentProps) { const index1 = ~~shape.dataset.index1 const l = Math.cos(deg * Math.PI / 180) const t = Math.sin(deg * Math.PI / 180) - const length = index1 >= currentActiveIndex.current - 1 && index1 <= currentActiveIndex.current + 1 ? POINT_ACTIVE_MOVE_LENGTH : POINT_MOVE_LENGTH + const isActive = index1 >= currentActiveIndex.current - 1 && index1 <= currentActiveIndex.current + 1 + const length = isActive ? POINT_ACTIVE_MOVE_LENGTH : POINT_MOVE_LENGTH const arr = Array.from({ length: 4 }, (item, index) => { - const randomDeg = Math.random() * 24 + deg const offset = 0.2 * (index + 1) + const randomDeg = deg + Math.sin(offset * 20) * 4 const l = Math.cos(randomDeg * Math.PI / 180) const t = Math.sin(randomDeg * Math.PI / 180) - return { transform: `translate(${l * length * offset }, ${t * length * offset})`, offset} + return { transform: `translate(${l * length * offset }, ${t * length * offset})`, offset } }) const animation = shape.animate( [ diff --git a/src/components/s-path-fill.tsx b/src/components/s-path-fill.tsx index 533d27b..df0e6ad 100644 --- a/src/components/s-path-fill.tsx +++ b/src/components/s-path-fill.tsx @@ -10,8 +10,7 @@ import useAudioImg from "@/hooks/useAudioImg"; export default function SLine(props: SComponentProps) { const POINT_NUM = 64 const POINT_OFFSET = 60 - // const COLORS = ['#cdf5dd', '#e8fdc8', '#dafcf0', '#f3f8c9'] - const COLORS = ['#81D8F2', '#67A1E0', '#5263C2', '#74E1A5'] + const COLORS = ['#90E3F5', '#5C8AF4', '#BEABF0', '#E1A2E1'] const canvas = useRef() const circle = useRef() @@ -70,9 +69,10 @@ export default function SLine(props: SComponentProps) { const pathEl = new Path({ style: { stroke: COLORS[index], - lineWidth: 1, + lineWidth: 2, path, - fill: addColorOpacity(COLORS[index], 0.2) + fill: 'rgba(255,255,255,0.2)' + // fill: addColorOpacity(COLORS[index], 0.3) } }) canvas.current?.appendChild(pathEl) diff --git a/src/components/s-path.tsx b/src/components/s-path.tsx index 498a02c..07fa012 100644 --- a/src/components/s-path.tsx +++ b/src/components/s-path.tsx @@ -10,7 +10,7 @@ import useAudioImg from "@/hooks/useAudioImg"; export default function SPath(props: SComponentProps) { const POINT_NUM = 64 const OFFSET = 4 - const POINT_OFFSET = 30 + const POINT_OFFSET = 42 const COLORS = ['#e9dcf7', '#cdd9f5', '#cdf5dd', '#f3dfbb'] // const COLORS = ['#4E4BD7', '#BB4BD7', '#4BD773', '#D7544B'] diff --git a/src/index.scss b/src/index.scss index e53bf73..5d72aff 100644 --- a/src/index.scss +++ b/src/index.scss @@ -98,7 +98,7 @@ ul, li { right: 0; bottom: 0; z-index: 2; - background: rgba(0,0,0,.3); + background: rgba(0,0,0,.5); } }