图像设置数据结构

Linho1219 · Linho1219 · commit a479e2f49263 · 2025-04-29T09:42:35.000+08:00
diff --git a/src/consts.ts b/src/consts.ts
@@ -1,4 +1,8 @@
-import type { FunctionPlotAnnotation, FunctionPlotDatum } from "function-plot";
+import type {
+  FunctionPlotAnnotation,
+  FunctionPlotDatum,
+  FunctionPlotOptions,
+} from "function-plot";
 import { cloneDeep } from "lodash-es";
 
 export type ValueLabel = { value: string; label: string; default?: boolean };
@@ -422,3 +426,74 @@ export function toInternalAnnotation(items: FunctionPlotAnnotation[]) {
   });
   return cloned;
 }
+
+export type InternalGraphOptions = {
+  xAxis: {
+    invert: boolean;
+    label: string;
+    type: "linear" | "log";
+  };
+  yAxis: {
+    invert: boolean;
+    label: string;
+    type: "linear" | "log";
+  };
+  grid: boolean;
+  title: string;
+};
+
+export function toInternalGraphOptions(
+  original: Partial<FunctionPlotOptions>
+): InternalGraphOptions {
+  const { xAxis, yAxis, title, grid } = original;
+  return {
+    xAxis: {
+      invert: xAxis?.invert ?? false,
+      label: xAxis?.label ?? "",
+      type: xAxis?.type ?? "linear",
+    },
+    yAxis: {
+      invert: yAxis?.invert ?? false,
+      label: yAxis?.label ?? "",
+      type: yAxis?.type ?? "linear",
+    },
+    title: title ?? "",
+    grid: grid ?? false,
+  };
+}
+
+function removeUndefined(obj: object) {
+  Object.entries(obj).forEach(([key, value]) => {
+    if (value === undefined) {
+      delete (<any>obj)[key];
+    } else if (typeof value === "object" && value !== null) {
+      removeUndefined(value);
+    }
+  });
+}
+
+export function toOriginalGraphOptions(
+  internal: InternalGraphOptions
+): Partial<FunctionPlotOptions> {
+  const { xAxis, yAxis, title, grid } = internal;
+  const checkIfDefault = (value: any, defaultValue: any) =>
+    value === defaultValue ? undefined : value;
+  const cloned: Partial<FunctionPlotOptions> = {
+    xAxis: {
+      invert: checkIfDefault(xAxis.invert, false),
+      label: checkIfDefault(xAxis.label, ""),
+      type: checkIfDefault(xAxis.type, "linear"),
+    },
+    yAxis: {
+      invert: checkIfDefault(yAxis.invert, false),
+      label: checkIfDefault(yAxis.label, ""),
+      type: checkIfDefault(yAxis.type, "linear"),
+    },
+    title: checkIfDefault(title, ""),
+    grid: checkIfDefault(grid, false),
+  };
+  removeUndefined(cloned);
+  if (Object.keys(cloned.xAxis ?? {}).length === 0) delete cloned.xAxis;
+  if (Object.keys(cloned.yAxis ?? {}).length === 0) delete cloned.yAxis;
+  return cloned;
+}
diff --git a/src/editor/options.vue b/src/editor/options.vue
@@ -5,57 +5,70 @@
 
       <div class="option">
         <span class="label">{{ t("inputs.grid") }}</span>
-        <s-switch></s-switch>
+        <s-switch
+          v-model.lazy="profile.options.grid"
+          type="checkbox"
+        ></s-switch>
       </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.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>
+      </div>
       <div class="option">
         <span class="label">{{ t("inputs.grow") }}</span>
-        <s-picker :label="t('inputs.grow')" :key="locale">
-          <s-picker-item value="linear" selected>{{
+        <s-segmented-button>
+          <s-segmented-button-item value="y">{{
             t("inputs.linear")
-          }}</s-picker-item>
-          <s-picker-item value="log">{{ t("inputs.log") }}</s-picker-item>
-        </s-picker>
+          }}</s-segmented-button-item>
+          <s-segmented-button-item value="x">
+            {{ 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>
       </div>
-      <div class="option">
-        <span class="label">{{ t("inputs.range") }}</span>
-        <s-text-field :label="t('inputs.caption')"></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>
+      </div>
       <div class="option">
         <span class="label">{{ t("inputs.grow") }}</span>
-        <s-picker :label="t('inputs.grow')" :key="locale">
-          <s-picker-item value="linear" selected>{{
+        <s-segmented-button>
+          <s-segmented-button-item value="y">{{
             t("inputs.linear")
-          }}</s-picker-item>
-          <s-picker-item value="log">{{ t("inputs.log") }}</s-picker-item>
-        </s-picker>
+          }}</s-segmented-button-item>
+          <s-segmented-button-item value="x">
+            {{ 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>
       </div>
-      <div class="option">
-        <span class="label">{{ t("inputs.range") }}</span>
-        <s-text-field :label="t('inputs.caption')"></s-text-field>
-      </div>
     </div>
   </s-scroll-view>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-const { t, locale } = useI18n();
+const { t } = useI18n();
+
+import { useProfile } from "@/states";
+const profile = useProfile();
 </script>
 
 <style>
diff --git a/src/editor/output.vue b/src/editor/output.vue
@@ -51,6 +51,7 @@ watch(
       ...(profile.annotations.length
         ? { annotations: profile.getOriginalAnnotaion() }
         : {}),
+      ...profile.getOriginalOptions(),
     });
     const url =
       window.location.href.match(/https?:\/\/[^/]+\//) +
diff --git a/src/graph/graph.vue b/src/graph/graph.vue
@@ -26,7 +26,7 @@ const { t } = useI18n();
 import SIconRefresh from "@/ui/icons/refresh.vue";
 import SIconWarn from "@/ui/icons/warn.vue";
 
-import { onMounted, ref, watch } from "vue";
+import { onMounted, onUnmounted, ref, watch, WatchHandle } from "vue";
 import { throttle } from "lodash-es";
 import type { FunctionPlotDatum } from "function-plot";
 import { getFnType } from "../consts";
@@ -54,40 +54,45 @@ function findError(graphData: FunctionPlotDatum[]) {
   return 0;
 }
 
+let unwatchHandler: WatchHandle | null = null;
+
 onMounted(async () => {
   const functionPlot = (await import("function-plot")).default;
-  watch(
-    [() => width, () => height, profile],
-    throttle(() => {
-      if (import.meta.env.DEV) console.log("graph update");
-      const graphData = profile.getOriginalData();
-      const flag = findError(graphData);
-      if (flag) {
-        errorMsg.value = `Invalid input in function ${flag + 1}`;
-        return;
-      }
-      try {
-        plotRef.value &&
-          functionPlot({
-            target: plotRef.value,
-            data: <FunctionPlotDatum[]>graphData,
-            width: width - 20,
-            height: height - 20,
-            annotations: profile.getOriginalAnnotaion(),
-          });
-        if (fullUpdateState.value) {
-          fullUpdateState.value = false;
-          emitter.emit("require-post-update", "once after error");
-        } else errorMsg.value = undefined;
-      } catch (e) {
-        // console.log(e);
-        if (!fullUpdateState.value)
-          emitter.emit("require-full-update", "error");
-        errorMsg.value = (e as Error).message;
-      }
-    }, 200),
-    { immediate: true }
-  );
+  const handleUpdate = throttle(() => {
+    if (import.meta.env.DEV) console.log("graph update");
+    const graphData = profile.getOriginalData();
+    const flag = findError(graphData);
+    if (flag) {
+      errorMsg.value = `Invalid input in function ${flag + 1}`;
+      return;
+    }
+    try {
+      plotRef.value &&
+        functionPlot({
+          target: plotRef.value,
+          data: <FunctionPlotDatum[]>graphData,
+          width: width - 20,
+          height: height - 20,
+          annotations: profile.getOriginalAnnotaion(),
+          ...profile.getOriginalOptions(),
+        });
+      if (fullUpdateState.value) {
+        fullUpdateState.value = false;
+        emitter.emit("require-post-update", "once after error");
+      } else errorMsg.value = undefined;
+    } catch (e) {
+      // console.log(e);
+      if (!fullUpdateState.value) emitter.emit("require-full-update", "error");
+      errorMsg.value = (e as Error).message;
+    }
+  }, 200);
+  unwatchHandler = watch([() => width, () => height, profile], handleUpdate, {
+    immediate: true,
+  });
+});
+
+onUnmounted(() => {
+  if (unwatchHandler) unwatchHandler();
 });
 </script>
 
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -69,6 +69,7 @@ export default {
         log: "对数",
         caption: "标题",
         grid: "网格线",
+        reverse: "反向绘制",
       },
       title: {
         output: "输出代码",
@@ -144,6 +145,7 @@ export default {
         log: "Logarithmic",
         caption: "Caption",
         grid: "Grid",
+        reverse: "Reversed direction",
       },
       title: {
         output: "Output code",
diff --git a/src/states.ts b/src/states.ts
@@ -7,10 +7,13 @@ import {
   getNewDatum,
   InternalAnnotation,
   InternalDatum,
+  InternalGraphOptions,
   toInternalAnnotation,
   toInternalDatum,
+  toInternalGraphOptions,
   toOriginalAnnotation,
   toOriginalDatum,
+  toOriginalGraphOptions,
 } from "./consts";
 import { FunctionPlotOptions } from "function-plot";
 
@@ -51,13 +54,20 @@ export const useProfile = defineStore("profile", () => {
       key: Math.random(),
     });
 
+  const options = ref<InternalGraphOptions>(
+    toInternalGraphOptions(importedProfile ?? {})
+  );
+  const getOriginalOptions = () => toOriginalGraphOptions(options.value);
+
   return {
     data,
     getOriginalData,
     addData,
     annotations,
     getOriginalAnnotaion,
     addAnnotation,
+    options,
+    getOriginalOptions,
   };
 });
 
