From ff07d7a7d86a5ff417b4a42d185eee2d969f04f5 Mon Sep 17 00:00:00 2001
From: Dylan Su <87633881+xs10l3@users.noreply.github.com>
Date: Sun, 10 Nov 2024 15:57:30 +0800
Subject: [PATCH] feat(math): Add Ellipse Component - Implemented a new Ellipse
 Component for drawing ellipse shapes in the Math Extension - The component
 supports custom properties such as center point, long axis, and short axis -
 Use the definitions and properties of the Vue Motion library to implement
 component functionality

---
 extensions/math/src/conic_section/ellipse.vue | 25 +++++++++++++++++++
 extensions/math/src/index.ts                  |  1 +
 extensions/math/src/math-function.vue         |  2 +-
 packages/core/src/widget.ts                   |  2 +-
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 extensions/math/src/conic_section/ellipse.vue

diff --git a/extensions/math/src/conic_section/ellipse.vue b/extensions/math/src/conic_section/ellipse.vue
new file mode 100644
index 0000000..d3700e4
--- /dev/null
+++ b/extensions/math/src/conic_section/ellipse.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import {Growable, WidgetOptions} from "@vue-motion/lib";
+import { widget } from "@vue-motion/lib";
+
+import { defineWidget } from "@vue-motion/core";
+// import { computed } from "vue";
+
+export interface EllipseOptions extends WidgetOptions, Growable {
+  center: [number, number];
+  a: number,
+  b: number,
+  wid: string,
+  fillColor?: string
+}
+
+// const standardEquation = computed(() => {})
+const props = defineProps<EllipseOptions>();
+const options = defineWidget<EllipseOptions>(props);
+</script>
+
+<template>
+  <g v-bind="widget(options)">
+    <circle :id="options.wid" :cx="options.center[0]*100" :cy="options.center[1]*100" r="100" :fill="props.fillColor" stroke="none" :style="{ transform: `matrix(${options.a}, 0, 0, ${options.b}, 0, 0)` }" />
+  </g>
+</template>
diff --git a/extensions/math/src/index.ts b/extensions/math/src/index.ts
index b3db12a..87b1603 100644
--- a/extensions/math/src/index.ts
+++ b/extensions/math/src/index.ts
@@ -8,3 +8,4 @@ export { default as Tex } from './tex.vue'
 export { default as PolarPlane } from './polar-plane.vue'
 export type { PolarPlaneOptions } from './polar-plane.vue'
 export type { TexOptions } from './tex.vue'
+export { default as Ellipse} from './conic_section/ellipse.vue'
diff --git a/extensions/math/src/math-function.vue b/extensions/math/src/math-function.vue
index e429fe9..cd1a1fb 100644
--- a/extensions/math/src/math-function.vue
+++ b/extensions/math/src/math-function.vue
@@ -30,7 +30,7 @@ function generateSvgPath(mathFunc: (x: number) => number, domain: {
   for (let x = xMin; x <= xMax; x += step) {
     const y = mathFunc(x)
     
-    // Convert the values ​​of a mathematical function to SVG coordinates
+    // Convert the values of a mathematical function to SVG coordinates
     const svgX = (x - xMin) * scaleX
     const svgY = (yMax - y) * scaleY // Invert the y-axis to conform to the SVG coordinate system
     
diff --git a/packages/core/src/widget.ts b/packages/core/src/widget.ts
index b457a39..4a32653 100644
--- a/packages/core/src/widget.ts
+++ b/packages/core/src/widget.ts
@@ -61,7 +61,7 @@ export function defineWidget<T extends Widget>(props: Reactive<T>, methods?: Rec
     }
   })
 
-  return widget
+  return reactive(widget)
 }
 
 export function useWidget<T extends Widget>(wid: string) {