标线导入导出

Author: Linho1219

src/consts.ts

@@ -1,4 +1,7 @@
-import type { 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 };
@@ -392,3 +395,31 @@ export const fnTypeArr = [
   },
 ] as const satisfies FnType[];
 
+export type InternalAnnotation = {
+  axis: "x" | "y";
+  value: string;
+  text: string;
+};
+
+export function toOriginalAnnotation(items: InternalAnnotation[]) {
+  return items.map(({ axis, value, text }) => ({
+    [axis]: Number(value),
+    ...(text ? { text } : {}),
+  })) as FunctionPlotAnnotation[];
+}
+
+export function toInternalAnnotation(items: FunctionPlotAnnotation[]) {
+  const cloned: InternalAnnotation[] = [];
+  items.forEach((item) => {
+    let axis: "x" | "y";
+    if ("x" in item && typeof item.x === "number") axis = "x";
+    else axis = "y";
+    const value = String(item[axis]);
+    cloned.push({
+      axis,
+      value,
+      text: item.text ?? "",
+    });
+  });
+  return cloned;
+}

src/editor/output.vue

@@ -46,7 +46,12 @@ const formatted = ref("");
 watch(
   profile,
   () => {
-    const code = JSON5.stringify({ data: profile.getOriginalCopy(true) });
+    const code = JSON5.stringify({
+      data: profile.getOriginalData(true),
+      ...(profile.annotations.length
+        ? { annotations: profile.getOriginalAnnotaion() }
+        : {}),
+    });
     const url =
       window.location.href.match(/https?:\/\/[^/]+\//) +
       "?code=" +

src/states.ts

@@ -3,27 +3,61 @@ import base64 from "base-64";
 import utf8 from "utf8";
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
-import { InternalDatum, toInternalDatum, toOriginalDatum } from "./consts";
-import { FunctionPlotDatum } from "function-plot";
+import {
+  getNewDatum,
+  InternalAnnotation,
+  InternalDatum,
+  toInternalAnnotation,
+  toInternalDatum,
+  toOriginalAnnotation,
+  toOriginalDatum,
+} from "./consts";
+import { FunctionPlotOptions } from "function-plot";
 
 // Datum define
 export const useProfile = defineStore("profile", () => {
+  const importedProfile = (() => {
+    const rawCode = window?.location.search.match(/\?code=(.+)$/)?.[1];
+    if (!rawCode) return null;
+    try {
+      const obj = JSON5.parse(
+        utf8.decode(base64.decode(decodeURIComponent(rawCode)))
+      );
+      if (typeof obj === "object" && obj !== null)
+        return obj as FunctionPlotOptions;
+      else return null;
+    } catch (e) {
+      return null;
+    }
+  })();
   const data = ref<InternalDatum[]>(
-    (() => {
-      const rawCode = window?.location.search.match(/\?code=(.+)$/)?.[1];
-      if (rawCode)
-        try {
-          const code = utf8.decode(base64.decode(decodeURIComponent(rawCode)));
-          const data = toInternalDatum(
-            (JSON5.parse(code).data as FunctionPlotDatum[]) ?? []
-          );
-          return toInternalDatum(<FunctionPlotDatum[]>data);
-        } catch (e) {}
-    })() ?? [{ fnType: "linear", graphType: "polyline", fn: "x^2", key: 1 }]
+    toInternalDatum(
+      importedProfile?.data ?? [{ graphType: "polyline", fn: "x^2" }]
+    )
   );
-  const getOriginalCopy = (forExport?: boolean) =>
+  const getOriginalData = (forExport?: boolean) =>
     toOriginalDatum(data.value, forExport);
-  return { data, getOriginalCopy };
+  const addData = () => data.value.push(getNewDatum());
+
+  const annotations = ref<InternalAnnotation[]>(
+    toInternalAnnotation(importedProfile?.annotations ?? [])
+  );
+  const getOriginalAnnotaion = () => toOriginalAnnotation(annotations.value);
+  const addAnnotation = () =>
+    annotations.value.push({
+      axis: "y",
+      value: "0",
+      text: "",
+    });
+
+  return {
+    data,
+    getOriginalData,
+    addData,
+    annotations,
+    getOriginalAnnotaion,
+    addAnnotation,
+  };
 });
 
 // Theme define