From 9c67c074a08d1cfd08c7b0565ad6a894f28b2d18 Mon Sep 17 00:00:00 2001
From: Heuluck Lu <89375068+Heuluck@users.noreply.github.com>
Date: Mon, 27 May 2024 16:51:41 +0800
Subject: [PATCH] feat: allow to set svg size

---
 README.md                      | 4 +++-
 src/App.css                    | 1 +
 src/App.tsx                    | 5 +++++
 src/components/ball/ball.tsx   | 3 ++-
 src/components/ball/default.ts | 3 +++
 src/components/ball/index.d.ts | 2 ++
 src/index.css                  | 1 +
 7 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index c7fbd5b..3c2f934 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 ![Deploy Status](https://github.com/Heuluck/Wave-Progress-Ball-v2/actions/workflows/node.js.yml/badge.svg)
 
-这是一个基于 React，使用`<svg>`实现的波浪进度球组件。进度球可以自定义颜色、大小、进度等。自定义内容详见[自定义](#参数-props)。
+这是一个基于 React，使用`<svg>`实现的波浪进度球组件。进度球可以自定义颜色、大小、进度、渐变、速度等一系列参数。自定义内容详见[自定义](#参数-props)。
 
 ## 上一版本 Old Version
 
@@ -41,6 +41,7 @@ return <WaveBall value={value} />;
 export function ExampleBall() {
     const [value, setValue] = useState(50);
     const settings = {
+        size: 350,
         circleColor: "#bdc3c7",
         circleLineWidth: 1,
         waveHeight: 30,
@@ -78,6 +79,7 @@ export function ExampleBall() {
 | 参数                | 说明                           | 类型                            | 默认值                                                           | 必填  |
 | ------------------- | ------------------------------ | ------------------------------- | ---------------------------------------------------------------- | ----- |
 | value               | 进度                           | number                          | "-"                                                              | true  |
+| size                | 球的大小                       | number                          | 350                                                              | false |
 | circleColor         | 圆环的颜色                     | string                          | "#bdc3c7"                                                        | false |
 | circleLineWidth     | 圆环线条的宽度                 | number                          | 1                                                                | false |
 | waveHeight          | 波浪的高度                     | number                          | 30                                                               | false |
diff --git a/src/App.css b/src/App.css
index 7b9c7d2..e847ae8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,4 +14,5 @@
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 8px;
+  user-select: text;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 8bf35a0..9d00002 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { QuestionCircleOutlined } from "@ant-design/icons";
 
 function App() {
     const [value, setValue] = useState<number>(50);
+    const [size, setSize] = useState<number>(350);
     const [circleColor, setCircleColor] = useState<string>("#bdc3c7");
     const [circleLineWidth, setCircleLineWidth] = useState<number>(1);
     const [waveHeight, setWaveHeight] = useState<number>(30);
@@ -31,6 +32,7 @@ function App() {
     const [reverseWave, setReverseWave] = useState<boolean>(false);
     const [reverseWaveBg, setReverseWaveBg] = useState<boolean>(false);
     const setting = {
+        size,
         circleColor,
         circleLineWidth,
         waveHeight,
@@ -59,6 +61,9 @@ function App() {
                     <Form.Item label="液面高度">
                         <Slider key="height" defaultValue={value} onChange={setValue} min={0} max={100} step={1} />
                     </Form.Item>
+                    <Form.Item label="球的大小">
+                        <Slider key="size" defaultValue={size} onChange={setSize} min={10} max={1000} step={1} />
+                    </Form.Item>
                 </>
             ),
         },
diff --git a/src/components/ball/ball.tsx b/src/components/ball/ball.tsx
index 0933c75..048e8e4 100644
--- a/src/components/ball/ball.tsx
+++ b/src/components/ball/ball.tsx
@@ -5,6 +5,7 @@ import "./ball.css";
 export default function WaveBall(props: BallProps) {
     const {
         value,
+        size = defaultSetting.size,
         circleColor = defaultSetting.circleColor,
         circleLineWidth = defaultSetting.circleLineWidth,
         waveHeight = defaultSetting.waveHeight,
@@ -25,7 +26,7 @@ export default function WaveBall(props: BallProps) {
     } = props;
     return (
         <>
-            <svg width={350} height={350} xmlns="http://www.w3.org/2000/svg">
+            <svg width={size} height={size} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 350">
                 <circle
                     cx="175"
                     cy="175"
diff --git a/src/components/ball/default.ts b/src/components/ball/default.ts
index 8363213..c3df20c 100644
--- a/src/components/ball/default.ts
+++ b/src/components/ball/default.ts
@@ -1,4 +1,7 @@
 export const defaultSetting = {
+    size: 350,
+    width: 350,
+    height: 350,
     circleColor: "#bdc3c7",
     circleLineWidth: 1,
     waveHeight: 30,
diff --git a/src/components/ball/index.d.ts b/src/components/ball/index.d.ts
index a3d727d..c66c09b 100644
--- a/src/components/ball/index.d.ts
+++ b/src/components/ball/index.d.ts
@@ -4,6 +4,8 @@ interface BallProps extends BallSetting {
 }
 
 interface BallSetting {
+    /** 圆环的半径 */
+    size?: number;
     /** 圆环的颜色 */
     circleColor?: string;
     /** 圆环线条的宽度 */
diff --git a/src/index.css b/src/index.css
index 0d75474..edb614e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,6 +13,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  user-select: none;
 }
 
 h1 {