[WIP] feat(math): Add Ellipse Component

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>

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'

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
 

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) {