From cd43ddea83b9b5d252a3b6a9ce54b13f593c4878 Mon Sep 17 00:00:00 2001
From: Acbox liu <850625057@qq.com>
Date: Sun, 6 Oct 2024 16:22:49 +0800
Subject: [PATCH] release(extension-math): v0.5.1

---
 extensions/math/package.json          |  2 +-
 extensions/math/src/math-function.vue |  7 +--
 extensions/math/src/number-axis.vue   | 68 +++++++++++++++++----------
 3 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/extensions/math/package.json b/extensions/math/package.json
index 13b50d9..5f95bce 100644
--- a/extensions/math/package.json
+++ b/extensions/math/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vue-motion/extension-math",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "The components and hooks of vue-motion",
   "author": "BugDuck Team",
   "license": "Apache-2.0",
diff --git a/extensions/math/src/math-function.vue b/extensions/math/src/math-function.vue
index 9f4ed2a..297e2c7 100644
--- a/extensions/math/src/math-function.vue
+++ b/extensions/math/src/math-function.vue
@@ -8,7 +8,7 @@ import { defineWidget } from '@vue-motion/core'
 export interface MathFunctionOptions extends FigureOptions, Growable {
   fn: (x: number) => number
   ranges: [number, number]
-  domain: [number, number]
+  domain?: [number, number]
   divisionX?: number
   divisionY?: number
   color?: string
@@ -44,13 +44,14 @@ function generateSvgPath(mathFunc: (x: number) => number, ranges: {
 
 const path = ref('')
 
-watch(props, () => {
+watch(props.fn, () => {
   path.value = generateSvgPath(options.fn, {
     x: options.ranges,
-    y: options.domain ?? [ 0, 0],
+    y: options.domain ?? [0, 0],
   }, options.divisionX ?? 100, options.divisionY ?? 100)
 }, {
   immediate: true,
+  deep: true,
 })
 </script>
 
diff --git a/extensions/math/src/number-axis.vue b/extensions/math/src/number-axis.vue
index be03b3c..a8567bd 100644
--- a/extensions/math/src/number-axis.vue
+++ b/extensions/math/src/number-axis.vue
@@ -20,42 +20,58 @@ const options = defineWidget<NumberAxisOptions>(props)
 
 <template>
   <g v-if="options.baseUnit === 'radian'" v-bind="widget(options)">
-    <Line :from="[options.ranges[0] * (options.interval ?? 100) * (options.progress ?? 1), 0]"
+    <Line
+      :from="[options.ranges[0] * (options.interval ?? 100) * (options.progress ?? 1), 0]"
       :to="[options.ranges[1] * (options.interval ?? 100) * (options.progress ?? 1), 0]"
-      :border-color="trim ?? 'white'" />
-    <Line v-for="i in Math.floor(Math.abs(options.ranges[1] - options.ranges[0]) / Math.PI * 2)"
+      :border-color="trim ?? 'white'"
+    />
+    <Line
+      v-for="i in Math.floor(Math.abs(options.ranges[1] - options.ranges[0]) / Math.PI * 2)"
       :from="[(i + 1) * (options.interval ?? Math.PI * 50), -10]" :to="[(i + 1) * (options.interval ?? Math.PI * 50), 10]"
-      :border-color="trim ?? 'white'" :x="(options.ranges[0] - 1) * (options.interval ?? Math.PI * 50)" />
-    <Text v-for="i in Math.floor(Math.abs(options.ranges[1] - options.ranges[0]) / Math.PI * 2)" border-color="none"
+      :border-color="trim ?? 'white'" :x="(options.ranges[0] - 1) * (options.interval ?? Math.PI * 50)"
+    />
+    <Text
+      v-for="i in Math.floor(Math.abs(options.ranges[1] - options.ranges[0]) / Math.PI * 2)" border-color="none"
       :fill-color="options.fontColor ?? 'white'" :x="(options.ranges[0] + i) * (options.interval ?? Math.PI * 50)" :y="20"
-      :rotation="-(options.rotation ?? 0)" align="start" :font-size="20">
+      :rotation="-(options.rotation ?? 0)" align="start" :font-size="20"
+    >
       {{ (options.trend ?? (x => (x).toString()))((i + options.ranges[0]) / 2) }} π
     </Text>
-    <Polygon :points="[
-      [0, -10],
-      [0, 10],
-      [Math.sqrt(300), 0],
-    ]" :border-color="options.tip ?? 'white'" :fill-color="options.tip ?? 'white'"
-      :x="options.ranges[1] * (options.interval ?? 100)" :y="0" />
+    <Polygon
+      :points="[
+        [0, -10],
+        [0, 10],
+        [Math.sqrt(300), 0],
+      ]" :border-color="options.tip ?? 'white'" :fill-color="options.tip ?? 'white'"
+      :x="options.ranges[1] * (options.interval ?? 100)" :y="0"
+    />
   </g>
   <!-- ToDo: Add support for degree -->
   <g v-else v-bind="widget(options)">
-    <Line :from="[options.ranges[0] * (options.interval ?? 100) * (options.progress ?? 1), 0]"
+    <Line
+      :from="[options.ranges[0] * (options.interval ?? 100) * (options.progress ?? 1), 0]"
       :to="[options.ranges[1] * (options.interval ?? 100) * (options.progress ?? 1), 0]"
-      :border-color="trim ?? 'white'" />
-    <Line v-for="i in Math.abs(options.ranges[1] - options.ranges[0])" :from="[(i+1) * (options.interval ?? 100), -10]"
-      :to="[(i+1) * (options.interval ?? 100), 10]" :border-color="trim ?? 'white'"
-      :x="(options.ranges[0] - 1) * (options.interval ?? 100)" />
-    <Text v-for="i in Math.abs(options.ranges[1] - options.ranges[0]+1)" border-color="none"
-      :fill-color="options.fontColor ?? 'white'" :x="(options.ranges[0] + i -1) * (options.interval ?? 100)" :y="20"
-      :rotation="-(options.rotation ?? 0)" align="start" :font-size="20">
+      :border-color="trim ?? 'white'"
+    />
+    <Line
+      v-for="i in Math.abs(options.ranges[1] - options.ranges[0])" :from="[(i + 1) * (options.interval ?? 100), -10]"
+      :to="[(i + 1) * (options.interval ?? 100), 10]" :border-color="trim ?? 'white'"
+      :x="(options.ranges[0] - 1) * (options.interval ?? 100)"
+    />
+    <Text
+      v-for="i in Math.abs(options.ranges[1] - options.ranges[0] + 1)" border-color="none"
+      :fill-color="options.fontColor ?? 'white'" :x="(options.ranges[0] + i - 1) * (options.interval ?? 100)" :y="20"
+      :rotation="-(options.rotation ?? 0)" align="start" :font-size="20"
+    >
       {{ (options.trend ?? (x => x.toString()))(i + options.ranges[0] - 1) }}
     </Text>
-    <Polygon :points="[
-      [0, -10],
-      [0, 10],
-      [Math.sqrt(300), 0],
-    ]" :border-color="options.tip ?? 'white'" :fill-color="options.tip ?? 'white'"
-      :x="options.ranges[1] * (options.interval ?? 100)" :y="0" />
+    <Polygon
+      :points="[
+        [0, -10],
+        [0, 10],
+        [Math.sqrt(300), 0],
+      ]" :border-color="options.tip ?? 'white'" :fill-color="options.tip ?? 'white'"
+      :x="options.ranges[1] * (options.interval ?? 100)" :y="0"
+    />
   </g>
 </template>