feat(math): add rad unit for number-plane

Bug-Duck · Oct 6, 2024 · 1807e81 · 1807e81
1 parent 5feb955
commit 1807e81
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 77 deletions.
diff --git a/extensions/math/src/math-function.vue b/extensions/math/src/math-function.vue
@@ -30,6 +30,10 @@ function generateSvgPath(mathFunc: (x: number) => number, ranges: {
   for (let x = xMin; x <= xMax; x += step) {
     const y = mathFunc(x)
     // 将数学函数的值转换为SVG坐标
+    if (y > 30 || y < -30) {
+      console.info(`Math function returned infinity or negative infinity at x=${x}. Skipping this point.`)
+      path.push('Z')
+    }
     const svgX = (x - xMin) * scaleX
     const svgY = (yMax - y) * scaleY // 反转 y 轴以符合 SVG 坐标系统
     path.push(`${x === xMin ? 'M' : 'L'} ${svgX} ${svgY}`)

diff --git a/extensions/math/src/number-axis.vue b/extensions/math/src/number-axis.vue
@@ -4,6 +4,7 @@ import { defineWidget } from '@vue-motion/core'
 import type { Growable, WidgetOptions } from '@vue-motion/lib'
 
 export interface NumberAxisOptions extends WidgetOptions, Growable {
+  baseUnit?: 'number' | 'radian' | 'degree'
   interval?: number
   trend?: (count: number) => string
   tip?: string // Arrow tip color or 'none'
@@ -18,41 +19,43 @@ const options = defineWidget<NumberAxisOptions>(props)
 </script>
 
 <template>
-  <g v-bind="widget(options)">
-    <Line
-      :from="[options.ranges[0] * (options.interval ?? 100) * (options.progress ?? 1), 0]"
+  <g v-if="options.baseUnit === 'radian'" v-bind="widget(options)">
+    <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]) + 1"
-      :from="[i * (options.interval ?? 100), -10]"
-      :to="[i * (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] - 1 + i) * (options.interval ?? 100)"
-      :y="20"
-      :rotation="-(options.rotation ?? 0)"
-      align="start"
-      :font-size="20"
-    >
+      :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"
+      :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">
+      {{ (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" />
+  </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]"
+      :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">
       {{ (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>
diff --git a/extensions/math/src/number-plane.vue b/extensions/math/src/number-plane.vue
@@ -19,7 +19,7 @@ export interface NumberPlaneOptions extends WidgetOptions, Growable {
   fontColorY?: string // Font color
   fontSizeY?: number // Font size
   rangesY: [number, number]
-
+  baseUnit?: 'number' | 'radian' | 'degree'
   grid?: boolean
   gridColor?: string
   gridWidth?: number
@@ -31,54 +31,26 @@ const options = defineWidget<NumberPlaneOptions>(props)
 
 <template>
   <g v-bind="widget(options)">
-    <NumberAxis
-      :interval="options.intervalX ?? 100"
-      :trend="(x => x === 0 ? '' : (options.trendY ?? (x => x.toString()))(x))"
-      :tip="options.tipX ?? 'white'"
-      :trim="options.trimX ?? 'white'"
-      :font-color="options.fontColorX ?? 'white'"
-      :font-size="options.fontSizeX"
-      :ranges="options.rangesX"
-      :progress="options.progress ?? 1"
-    />
-    <NumberAxis
-      :interval="options.intervalY ?? 100"
-      :tip="options.tipY ?? 'white'"
-      :trim="options.trimY ?? 'white'"
-      :font-color="options.fontColorY ?? 'white'"
-      :font-size="options.fontSizeY"
-      :ranges="options.rangesY"
-      :rotation="-90"
-      :trend="(x => x === 0 ? '' : (options.trendY ?? (x => x.toString()))(x))"
-      :progress="options.progress ?? 1"
-    />
-    <Text
-      :fill-color="options.fontColorX ?? 'white'"
-      :font-size="20"
-      :x="20"
-      :y="20"
-    >
+    <NumberAxis :base-unit="options.baseUnit" :interval="options.intervalX"
+      :trend="(x => x === 0 ? '' : (options.trendY ?? (x => x.toString()))(x))" :tip="options.tipX ?? 'white'"
+      :trim="options.trimX ?? 'white'" :font-color="options.fontColorX ?? 'white'" :font-size="options.fontSizeX"
+      :ranges="options.rangesX" :progress="options.progress ?? 1" />
+    <NumberAxis :interval="options.intervalY ?? 100" :tip="options.tipY ?? 'white'" :trim="options.trimY ?? 'white'"
+      :font-color="options.fontColorY ?? 'white'" :font-size="options.fontSizeY" :ranges="options.rangesY"
+      :rotation="-90" :trend="(x => x === 0 ? '' : (options.trendY ?? (x => x.toString()))(x))"
+      :progress="options.progress ?? 1" />
+    <Text :fill-color="options.fontColorX ?? 'white'" :font-size="20" :x="20" :y="20">
       0
     </Text>
-    <Line
-      v-if="options.grid"
-      v-for="i in Math.abs(options.rangesX[1] - options.rangesX[0]) + 1"
+    <Line v-if="options.grid" v-for="i in Math.abs(options.rangesX[1] - options.rangesX[0]) + 1"
       :from="[i * (options.intervalX ?? 100), options.rangesY[0] * (options.intervalY ?? 100)]"
       :to="[i * (options.intervalX ?? 100), options.rangesY[1] * (options.intervalY ?? 100)]"
-      :border-color="options.gridColor ?? 'white'"
-      :border-width="options.gridWidth ?? 1"
-      :x="(options.rangesX[0] - 1) * (options.intervalX ?? 100)"
-      :progress="options.progress ?? 1"
-    />
-    <Line
-      v-if="options.grid"
-      v-for="i in Math.abs(options.rangesY[1] - options.rangesY[0]) + 1"
+      :border-color="options.gridColor ?? 'white'" :border-width="options.gridWidth ?? 1"
+      :x="(options.rangesX[0] - 1) * (options.intervalX ?? 100)" :progress="options.progress ?? 1" />
+    <Line v-if="options.grid" v-for="i in Math.abs(options.rangesY[1] - options.rangesY[0]) + 1"
       :from="[options.rangesX[0] * (options.intervalX ?? 100), i * (options.intervalY ?? 100)]"
       :to="[options.rangesX[1] * (options.intervalX ?? 100), i * (options.intervalY ?? 100)]"
-      :border-color="options.gridColor ?? 'white'"
-      :border-width="options.gridWidth ?? 1"
-      :y="(options.rangesY[0] - 1) * (options.intervalY ?? 100)"
-      :progress="options.progress ?? 1"
-    />
+      :border-color="options.gridColor ?? 'white'" :border-width="options.gridWidth ?? 1"
+      :y="(options.rangesY[0] - 1) * (options.intervalY ?? 100)" :progress="options.progress ?? 1" />
   </g>
 </template>