重构数据类型

Author: Linho1219

src/App.vue

@@ -18,20 +18,26 @@
         </VueDraggable>
         <div class="plot-data add-data">
           <div
-            @click="graphData.push({ key: Math.random() })"
+            @click="
+              graphData.push({
+                key: Math.random(),
+                fnType: 'linear',
+                graphType: 'polyline',
+              })
+            "
             class="add-data-opt add"
           >
             + 添加
           </div>
           <div @click="handleImport()" class="add-data-opt import">↓ 导入</div>
         </div>
       </div>
-      <CodeDisplay :dataArr="cloneArr(graphData)" />
+      <CodeDisplay :dataArr="toOriginalDatum(graphData)" />
     </div>
     <div id="divider" @mousedown="handleDrag"></div>
     <div id="graph" ref="shellRef">
       <Graph
-        :data="cloneArr(graphData)"
+        :data="toOriginalDatum(graphData)"
         :width="graphWidth"
         :height="graphHeight"
         :key="key"
@@ -49,15 +55,16 @@ import Graph from "./components/graph.vue";
 import DataBlock from "./components/dataBlock.vue";
 import CodeDisplay from "./components/codeDisplay.vue";
 import { VueDraggable } from "vue-draggable-plus";
-import type { FunctionPlotDatum, FunctionPlotOptions } from "function-plot";
+import type { FunctionPlotDatum } from "function-plot";
 import { onMounted, ref } from "vue";
-import { cloneDeep } from "lodash-es";
 import JSON5 from "json5";
 import base64 from "base-64";
 import utf8 from "utf8";
-import { Datum } from "./consts";
+import { InternalDatum, toInternalDatum, toOriginalDatum } from "./consts";
 
-const graphData = ref<Datum[]>([{ fn: "x^2", key: 1 }]);
+const graphData = ref<InternalDatum[]>([
+  { fnType: "linear", graphType: "polyline", fn: "x^2", key: 1 },
+]);
 
 const graphWidth = ref(0),
   graphHeight = ref(0);
@@ -73,38 +80,6 @@ function handleResize() {
   }
 }
 
-function cloneArr<T extends Object[]>(obj: T) {
-  const cloned = cloneDeep(obj);
-  function removeUndefined(obj: Record<string, any>) {
-    for (const key in obj) {
-      console.log(1);
-      if (obj[key] === undefined) delete obj[key];
-      if (
-        typeof obj[key] === "object" &&
-        obj[key] !== null &&
-        !Array.isArray(obj[key])
-      )
-        removeUndefined(obj[key]);
-    }
-  }
-  cloned.forEach((item) => removeUndefined(item));
-  return cloned as T;
-}
-
-function importMapper(item: FunctionPlotDatum): Datum {
-  if (item.graphType === "text")
-    return {
-      ...item,
-      fnType: "text",
-      key: Math.random(),
-    };
-  else
-    return {
-      ...item,
-      key: Math.random(),
-    };
-}
-
 function fullUpdate() {
   fullUpdateState.value = true;
   key.value++;
@@ -115,14 +90,13 @@ onMounted(() => {
   if (rawCode)
     try {
       const code = utf8.decode(base64.decode(decodeURIComponent(rawCode)));
-      const data = (<FunctionPlotDatum[]>JSON5.parse(code).data).map(
-        importMapper
+      const data = toInternalDatum(
+        (JSON5.parse(code).data as FunctionPlotDatum[]) ?? []
       );
-      graphData.value = <Datum[]>data;
+      graphData.value = toInternalDatum(<FunctionPlotDatum[]>data);
       console.log(code);
       console.log(data);
     } catch (e) {}
-
   window.addEventListener("resize", handleResize);
   handleResize();
 });
@@ -143,8 +117,9 @@ function handleDrag() {
 function handleImport() {
   const raw = prompt("源数据：");
   if (!raw) return;
-  graphData.value =
-    (<FunctionPlotOptions>JSON5.parse(raw)).data?.map(importMapper) ?? [];
+  graphData.value = toInternalDatum(
+    (JSON5.parse(raw).data as FunctionPlotDatum[]) ?? []
+  );
 }
 </script>
 
@@ -197,7 +172,6 @@ function handleImport() {
   padding: 0;
   display: flex;
   flex-direction: row;
-  cursor: default;
 }
 .add-data-opt {
   padding: 10px 30px;

src/components/codeDisplay.vue

@@ -11,18 +11,14 @@ import prettier from "prettier/standalone";
 import prettierPluginBabel from "prettier/plugins/babel";
 import prettierPluginEstree from "prettier/plugins/estree";
 import { ref, watch } from "vue";
-import { Datum } from "../consts";
+import { FunctionPlotDatum } from "function-plot";
 const { dataArr } = defineProps<{
-  dataArr: (Omit<Datum, "key"> & { key?: number })[];
+  dataArr: FunctionPlotDatum[];
 }>();
 const formatted = ref("");
 watch(
   () => dataArr,
   () => {
-    dataArr.forEach((item) => {
-      if (item.graphType === "text") delete item.fnType;
-      delete item.key;
-    });
     prettier
       .format(JSON5.stringify({ data: dataArr }), {
         parser: "json5",

src/components/dataBlock.vue

@@ -3,8 +3,7 @@
     <div class="datablock-drag">☰</div>
     <div class="selectors">
       <select v-model="dataItem.fnType" @change="fnTypeChange(dataItem)">
-        <option :value="undefined">{{ fnTypeArr[0].label }}</option>
-        <option v-for="type in fnTypeArr.slice(1)" :value="type.value">
+        <option v-for="type in fnTypeArr" :value="type.value">
           {{ type.label }}
         </option>
       </select>
@@ -13,14 +12,7 @@
         v-if="dataItem.graphType !== 'text'"
         @change="graphTypeChange(dataItem)"
       >
-        <option v-if="!fnType.notAllowedInInterval" :value="undefined">
-          {{ graphTypeArr[0].label }}
-        </option>
-        <option
-          v-if="dataItem.fnType !== 'implicit'"
-          v-for="type in graphTypeArr.slice(1)"
-          :value="type.value"
-        >
+        <option v-for="type in allowedGraphType" :value="type.value">
           {{ type.label }}
         </option>
       </select>
@@ -71,10 +63,10 @@
 <script setup lang="ts">
 import {
   fnTypeArr,
-  graphTypeArr,
+  getAllowedGraphType,
   inputTypeArr,
   getFnType,
-  Datum,
+  InternalDatum,
 } from "../consts";
 import { ref, computed } from "vue";
 import StrInputs from "./dataBlockInner/strInputs.vue";
@@ -84,26 +76,25 @@ import CoordArrInputs from "./dataBlockInner/coordArrInputs.vue";
 import OptInputs from "./dataBlockInner/optInputs.vue";
 
 const emit = defineEmits(["delete", "requireFullUpdate"]);
-const dataItem = defineModel<Datum>();
+const dataItem = defineModel<InternalDatum>();
 const block = ref<HTMLDivElement>();
 const blockFolded = ref(true);
-function fnTypeChange(dataItem: Datum) {
+function fnTypeChange(dataItem: InternalDatum) {
   inputTypeArr.forEach((key) => delete dataItem[key]);
   if (dataItem.fnType === "text") {
     dataItem.graphType = "text";
   } else {
     if (dataItem.graphType === "text" || dataItem.fnType === "implicit")
       delete dataItem.graphType;
-    if (fnType.value.notAllowedInInterval && !dataItem.graphType)
-      dataItem.graphType = "polyline";
+    dataItem.graphType = getAllowedGraphType(dataItem.fnType)[0].value;
     if (dataItem.fnType === "vector") dataItem.vector = [0, 0];
     if (dataItem.fnType === "points") dataItem.points = [];
     if (block.value)
       block.value.querySelectorAll("input").forEach((ele) => (ele.value = ""));
   }
 }
-const scatteredSet = new WeakSet<Datum>();
-function graphTypeChange(dataItem: Datum) {
+const scatteredSet = new WeakSet<InternalDatum>();
+function graphTypeChange(dataItem: InternalDatum) {
   if (dataItem.graphType === "scatter") {
     if (!scatteredSet.has(dataItem)) {
       scatteredSet.add(dataItem);
@@ -117,6 +108,9 @@ function graphTypeChange(dataItem: Datum) {
   }
 }
 const fnType = computed(() => getFnType(dataItem.value?.fnType));
+const allowedGraphType = computed(() =>
+  getAllowedGraphType(dataItem.value?.fnType)
+);
 </script>
 
 <style>

src/components/dataBlockInner/coordInputs.vue

@@ -25,12 +25,12 @@
 </template>
 
 <script setup lang="ts">
-import { CoordType, Datum, InputProps } from "../../consts";
+import { CoordType, InternalDatum, InputProps } from "../../consts";
 
 const { dataItem, fnType } = defineProps<InputProps>();
 
 function handleCoordInput(
-  dataItem: Datum,
+  dataItem: InternalDatum,
   input: CoordType,
   index: 0 | 1,
   event: Event

src/components/dataBlockInner/optInputs.vue

@@ -15,11 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import { Datum, InputProps, OptInput } from "../../consts";
+import { InternalDatum, InputProps, OptInput } from "../../consts";
 
 const { dataItem, fnType } = defineProps<InputProps>();
 
-function handleCoordInput(dataItem: Datum, input: OptInput, event: Event) {
+function handleCoordInput(dataItem: InternalDatum, input: OptInput, event: Event) {
   const raw = (<HTMLInputElement>event.target).value;
   if (raw === "") {
     delete dataItem[input.value];