From 818881bae9c39cc55f1565899ed9548579802970 Mon Sep 17 00:00:00 2001
From: Acbox liu <850625057@qq.com>
Date: Sat, 30 Nov 2024 13:57:57 +0800
Subject: [PATCH] fix: offset of growing

---
 packages/lib/src/widgets/line.vue  |  9 +++++++--
 packages/lib/src/widgets/widget.ts | 15 +++++++++++++++
 test/src/App.vue                   | 12 +++++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/packages/lib/src/widgets/line.vue b/packages/lib/src/widgets/line.vue
index 93978bf..0252eb7 100644
--- a/packages/lib/src/widgets/line.vue
+++ b/packages/lib/src/widgets/line.vue
@@ -14,6 +14,11 @@ export type LineMixin = LineOptions & FigureMixin;
 
 const props = defineProps<LineOptions>();
 const options = defineWidget(props);
+
+const dx = options.to[0] - options.from[0];
+const dy = options.to[1] - options.from[1];
+const currentX = options.from[0] + dx * (options.progress ?? 1);
+const currentY = options.from[1] + dy * (options.progress ?? 1);
 </script>
 
 <template>
@@ -21,7 +26,7 @@ const options = defineWidget(props);
     v-bind="figure(options)"
     :x1="options.from[0]"
     :y1="options.from[1]"
-    :x2="options.to[0] * (options.progress ?? 1)"
-    :y2="options.to[1] * (options.progress ?? 1)"
+    :x2="currentX"
+    :y2="currentY"
   />
 </template>
diff --git a/packages/lib/src/widgets/widget.ts b/packages/lib/src/widgets/widget.ts
index 122d842..de8cd66 100644
--- a/packages/lib/src/widgets/widget.ts
+++ b/packages/lib/src/widgets/widget.ts
@@ -18,6 +18,7 @@ import {
   type RotatableMixin,
   type Scalable,
   type StrokableMixin,
+  destory,
   grow,
   moveOnFunction,
   moveOnPath,
@@ -335,6 +336,20 @@ export function widget(options: WidgetOptions) {
         });
     },
   );
+  registerAnimation<Growable>("grow", (params?: AnimationParams) => {
+    return (manager) =>
+      manager.animate(grow, {
+        duration: params?.duration ?? defaultDuration,
+        by: params?.by ?? ((x) => x),
+      });
+  });
+  registerAnimation<Growable>("destory", (params?: AnimationParams) => {
+    return (manager) =>
+      manager.animate(destory, {
+        duration: params?.duration ?? defaultDuration,
+        by: params?.by ?? ((x) => x),
+      });
+  });
   registerAnimation<Widget>(
     "animate",
     <A>(
diff --git a/test/src/App.vue b/test/src/App.vue
index b1737a0..de7ec1d 100644
--- a/test/src/App.vue
+++ b/test/src/App.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
 import { usePlayer, useWidget } from "@vue-motion/core";
-import { Motion, Rect, type RectMixin, easeInOutCirc } from "@vue-motion/lib";
+import {
+  LineMixin,
+  Motion,
+  Rect,
+  type RectMixin,
+  easeInOutCirc,
+} from "@vue-motion/lib";
 import { onMounted } from "vue";
 import "@vue-motion/extension-animations";
 
 const rect = useWidget<RectMixin>();
+const line = useWidget<LineMixin>();
 
 const { play } = usePlayer();
 
@@ -36,6 +43,8 @@ onMounted(() => {
     (r) => r.discolorateBorderTo("yellow"),
     (r) => r.move(-200, -200),
   );
+
+  line.grow();
   play();
 });
 </script>
@@ -43,5 +52,6 @@ onMounted(() => {
 <template>
   <Motion :width="1600" :height="900">
     <Rect :widget="rect" :width="100" :height="100" fill-color="red" />
+    <Line :widget="line" :from="[100, 100]" :to="[200, 200]" />
   </Motion>
 </template>