标线动画问题修复

Author: Linho1219

src/consts.ts

@@ -1,7 +1,4 @@
-import type {
-  FunctionPlotAnnotation,
-  FunctionPlotDatum,
-} from "function-plot";
+import type { FunctionPlotAnnotation, FunctionPlotDatum } from "function-plot";
 import { cloneDeep } from "lodash-es";
 
 export type ValueLabel = { value: string; label: string; default?: boolean };
@@ -399,6 +396,7 @@ export type InternalAnnotation = {
   axis: "x" | "y";
   value: string;
   text: string;
+  key: number;
 };
 
 export function toOriginalAnnotation(items: InternalAnnotation[]) {
@@ -419,6 +417,7 @@ export function toInternalAnnotation(items: FunctionPlotAnnotation[]) {
       axis,
       value,
       text: item.text ?? "",
+      key: Math.random(),
     });
   });
   return cloned;

src/editor/annotation.vue

@@ -8,6 +8,18 @@
         {{ t("annotation.vertical") }}
       </s-segmented-button-item>
     </s-segmented-button>
+
+    <s-tooltip>
+      <s-icon-button
+        slot="trigger"
+        @click="deleteAnnotation"
+        style="color: var(--s-color-error)"
+      >
+        <SIconDelete />
+      </s-icon-button>
+      {{ t("buttons.del") }}
+    </s-tooltip>
+
     <s-text-field
       class="styled"
       type="number"
@@ -35,4 +47,11 @@ import { watch } from "vue";
 watch([() => props.annotation.axis, () => props.annotation.text], () =>
   emitter.emit("require-post-update", "anntaions axis change")
 );
+
+import SIconDelete from "@/ui/icons/delete.vue";
+import { useProfile } from "@/states";
+const profile = useProfile();
+function deleteAnnotation() {
+  profile.annotations.splice(props.index, 1);
+}
 </script>

src/editor/annotationList.vue

@@ -1,8 +1,16 @@
 <template>
   <s-scroll-view>
     <AnimatedList>
-      <AnimatedListItem v-for="(item, index) in profile.annotations">
-        <Annotation :index="index" :annotation="item" class="datumFolder" />
+      <AnimatedListItem
+        v-for="(item, index) in profile.annotations"
+        :key="item.key"
+      >
+        <Annotation
+          :index="index"
+          :annotation="item"
+          class="datumFolder"
+          :key="item.key"
+        />
       </AnimatedListItem>
     </AnimatedList>
     <div class="plot-data add-data" @click="profile.addAnnotation">

src/states.ts

@@ -48,6 +48,7 @@ export const useProfile = defineStore("profile", () => {
       axis: "y",
       value: "0",
       text: "",
+      key: Math.random(),
     });
 
   return {