标线编辑器

Author: Linho1219

src/editor/annotaions.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="plot-data">
+    <s-segmented-button v-model.lazy="props.annotation.axis">
+      <s-segmented-button-item value="y">{{
+        t("annotation.horizontal")
+      }}</s-segmented-button-item>
+      <s-segmented-button-item value="x">
+        {{ t("annotation.vertical") }}
+      </s-segmented-button-item>
+    </s-segmented-button>
+    <s-text-field
+      class="styled"
+      type="number"
+      v-model="props.annotation.value"
+    ></s-text-field>
+    <s-text-field
+      :label="t('annotation.text')"
+      v-model.lazy="props.annotation.text"
+    ></s-text-field>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { InternalAnnotation } from "@/consts";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+const props = defineProps<{
+  index: number;
+  annotation: InternalAnnotation;
+}>();
+
+import emitter from "@/mitt";
+import { watch } from "vue";
+watch([() => props.annotation.axis, () => props.annotation.text], () =>
+  emitter.emit("require-post-update", "anntaions axis change")
+);
+</script>

src/editor/annotation.vue

@@ -0,0 +1,26 @@
+<template>
+  <s-scroll-view>
+    <AnimatedList>
+      <AnimatedListItem v-for="(item, index) in profile.annotations">
+        <Annotation :index="index" :annotation="item" class="datumFolder" />
+      </AnimatedListItem>
+    </AnimatedList>
+    <div class="plot-data add-data" @click="profile.addAnnotation">
+      <s-icon name="add" />
+      {{ t("buttons.add") }}
+      <s-ripple attached></s-ripple>
+    </div>
+  </s-scroll-view>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
+
+import AnimatedList from "@/ui/animatedList/animatedList.vue";
+import AnimatedListItem from "@/ui/animatedList/animatedListItem.vue";
+import Annotation from "./annotation.vue";
+
+import { useProfile } from "@/states";
+const profile = useProfile();
+</script>

src/editor/annotationList.vue

@@ -15,7 +15,7 @@
         </AnimatedListItem>
       </AnimatedList>
     </VueDraggable>
-    <div class="plot-data add-data" @click="profile.data.push(getNewDatum())">
+    <div class="plot-data add-data" @click="profile.addData">
       <s-icon name="add" />
       {{ t("buttons.add") }}
       <s-ripple attached></s-ripple>
@@ -33,7 +33,6 @@ import AnimatedList from "@/ui/animatedList/animatedList.vue";
 import AnimatedListItem from "@/ui/animatedList/animatedListItem.vue";
 import Datum from "./datum.vue";
 
-import { getNewDatum } from "@/consts";
 import { useProfile } from "@/states";
 const profile = useProfile();
 </script>

src/editor/datumList.vue

@@ -21,7 +21,7 @@ const { t } = useI18n();
 
 import ImportBtn from "./import.vue";
 import DatumList from "./datumList.vue";
-import AnnotaionList from "./annotaions.vue";
+import AnnotaionList from "./annotationList.vue";
 import GraphOptions from "./options.vue";
 
 import OutputDrawer from "./output.vue";

src/editor/index.vue

@@ -12,7 +12,7 @@
         <s-text-field :label="t('inputs.caption')"></s-text-field>
       </div>
 
-      <s-divider>{{ t("title.horizontal") }}</s-divider>
+      <s-divider>{{ t("title.horizontalAxis") }}</s-divider>
       <div class="option">
         <span class="label">{{ t("inputs.grow") }}</span>
         <s-picker :label="t('inputs.grow')" :key="locale">
@@ -31,7 +31,7 @@
         <s-text-field :label="t('inputs.caption')"></s-text-field>
       </div>
 
-      <s-divider>{{ t("title.vertical") }}</s-divider>
+      <s-divider>{{ t("title.verticalAxis") }}</s-divider>
       <div class="option">
         <span class="label">{{ t("inputs.grow") }}</span>
         <s-picker :label="t('inputs.grow')" :key="locale">

src/editor/options.vue

@@ -83,10 +83,15 @@ export default {
         graphOptions: "绘制选项",
         inDev: "开发中",
         global: "全局",
-        horizontal: "横轴",
-        vertical: "纵轴",
+        horizontalAxis: "横轴",
+        verticalAxis: "纵轴",
         annotaions: "标线列表",
       },
+      annotation: {
+        horizontal: "水平",
+        vertical: "竖直",
+        text: "文本",
+      },
     },
     "en-US": {
       buttons: {
@@ -153,10 +158,15 @@ export default {
         graphOptions: "Graph options",
         inDev: "In development",
         global: "Global",
-        horizontal: "Horizontal Axis",
-        vertical: "Vertical Axis",
+        horizontalAxis: "Horizontal Axis",
+        verticalAxis: "Vertical Axis",
         annotaions: "Annotation list",
       },
+      annotation: {
+        horizontal: "Horizontal",
+        vertical: "Vertical",
+        text: "Text",
+      },
     },
   },
 } as I18nOpt;