部分选项触发强制刷新

Author: Linho1219

src/editor/annotationList.vue

@@ -37,5 +37,5 @@ const profile = useProfile();
 
 import emitter from "@/mitt";
 const afterDragged = () =>
-  emitter.emit("require-post-update", "annotations order change");
+  emitter.emit("require-full-update", "annotations order change");
 </script>

src/editor/options.vue

@@ -11,53 +11,65 @@
         ></s-switch>
       </div>
       <div class="option">
-        <span class="label">{{ t("inputs.caption") }}</span>
+        <span class="label">{{ t("inputs.title") }}</span>
         <s-text-field
-          :label="t('inputs.caption')"
+          :label="t('inputs.title')"
           v-model="profile.options.title"
         ></s-text-field>
       </div>
 
       <s-divider>{{ t("title.horizontalAxis") }}</s-divider>
       <div class="option">
         <span class="label">{{ t("inputs.reverse") }}</span>
-        <s-switch></s-switch>
+        <s-switch
+          v-model.lazy="profile.options.xAxis.invert"
+          type="checkbox"
+        ></s-switch>
       </div>
       <div class="option">
         <span class="label">{{ t("inputs.grow") }}</span>
-        <s-segmented-button>
-          <s-segmented-button-item value="y">{{
+        <s-segmented-button v-model.lazy="profile.options.xAxis.type">
+          <s-segmented-button-item value="linear">{{
             t("inputs.linear")
           }}</s-segmented-button-item>
-          <s-segmented-button-item value="x">
+          <s-segmented-button-item value="log">
             {{ t("inputs.log") }}
           </s-segmented-button-item>
         </s-segmented-button>
       </div>
       <div class="option">
         <span class="label">{{ t("inputs.caption") }}</span>
-        <s-text-field :label="t('inputs.caption')"></s-text-field>
+        <s-text-field
+          :label="t('inputs.caption')"
+          v-model="profile.options.xAxis.label"
+        ></s-text-field>
       </div>
 
       <s-divider>{{ t("title.verticalAxis") }}</s-divider>
       <div class="option">
         <span class="label">{{ t("inputs.reverse") }}</span>
-        <s-switch></s-switch>
+        <s-switch
+          v-model.lazy="profile.options.yAxis.invert"
+          type="checkbox"
+        ></s-switch>
       </div>
       <div class="option">
         <span class="label">{{ t("inputs.grow") }}</span>
-        <s-segmented-button>
-          <s-segmented-button-item value="y">{{
+        <s-segmented-button v-model.lazy="profile.options.yAxis.type">
+          <s-segmented-button-item value="linear">{{
             t("inputs.linear")
           }}</s-segmented-button-item>
-          <s-segmented-button-item value="x">
+          <s-segmented-button-item value="log">
             {{ t("inputs.log") }}
           </s-segmented-button-item>
         </s-segmented-button>
       </div>
       <div class="option">
         <span class="label">{{ t("inputs.caption") }}</span>
-        <s-text-field :label="t('inputs.caption')"></s-text-field>
+        <s-text-field
+          :label="t('inputs.caption')"
+          v-model="profile.options.yAxis.label"
+        ></s-text-field>
       </div>
     </div>
   </s-scroll-view>
@@ -69,6 +81,20 @@ const { t } = useI18n();
 
 import { useProfile } from "@/states";
 const profile = useProfile();
+
+import { watch } from "vue";
+import emitter from "@/mitt";
+watch(
+  [
+    () => profile.options.xAxis.type,
+    () => profile.options.yAxis.type,
+    () => profile.options.xAxis.invert,
+    () => profile.options.yAxis.invert,
+  ],
+  () => {
+    emitter.emit("require-full-update", "axis type change");
+  }
+);
 </script>
 
 <style>
@@ -84,8 +110,15 @@ const profile = useProfile();
 }
 .option {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   margin: 0 30px;
 }
+.option span{
+  line-height: 2em;
+}
+.option s-text-field {
+  max-width: 100%;
+}
 </style>

src/graph/graph.vue

@@ -55,7 +55,7 @@ function findError(graphData: FunctionPlotDatum[]) {
 }
 
 let unwatchHandler: WatchHandle | null = null;
-
+const emit = defineEmits(["require-post-update"]);
 onMounted(async () => {
   const functionPlot = (await import("function-plot")).default;
   const handleUpdate = throttle(() => {
@@ -78,7 +78,7 @@ onMounted(async () => {
         });
       if (fullUpdateState.value) {
         fullUpdateState.value = false;
-        emitter.emit("require-post-update", "once after error");
+        emit("require-post-update", "once after error");
       } else errorMsg.value = undefined;
     } catch (e) {
       // console.log(e);
@@ -152,8 +152,13 @@ s-page.dark #graphRender {
   font-size: 18px;
   font-family: var(--font-mono);
 }
-.annotations,
-.fn-text {
+#graphRender .annotations,
+#graphRender .fn-text,
+#graphRender .axis-label {
   font-size: 20px;
 }
+
+#graphRender .title {
+  font-weight: bold;
+}
 </style>

src/graph/index.vue

@@ -5,6 +5,7 @@
       :height="graphHeight"
       :key="graphKey"
       v-model="fullUpdateState"
+      @require-post-update="handlePostUpdate"
     />
   </div>
 </template>
@@ -38,10 +39,10 @@ emitter.on("require-full-update", (str) => {
   if (import.meta.env.DEV)
     console.log(`fullUpdateState: ${fullUpdateState.value}, ${str}`);
 });
-emitter.on("require-post-update", (str) => {
+const handlePostUpdate = (str: string) => {
   fullUpdateState.value = false;
   graphKey.value++;
   if (import.meta.env.DEV)
     console.log(`postUpdateState: ${fullUpdateState.value}, ${str}`);
-});
+};
 </script>