稳定性优化

Author: Linho1219

src/App.vue

@@ -13,6 +13,7 @@
             v-model="graphData[i]"
             @delete="graphData.splice(i, 1)"
             :key="dataItem.key"
+            @require-full-update="fullUpdate"
           />
         </VueDraggable>
         <div class="plot-data add-data">
@@ -25,15 +26,18 @@
           <div @click="handleImport()" class="add-data-opt import">↓ 导入</div>
         </div>
       </div>
-      <CodeDisplay :dataArr="cloneDeep(graphData)" />
+      <CodeDisplay :dataArr="cloneArr(graphData)" />
     </div>
     <div id="divider" @mousedown="handleDrag"></div>
     <div id="graph" ref="shellRef">
       <Graph
-        :graphData="cloneDeep(graphData)"
+        :data="cloneArr(graphData)"
         :width="graphWidth"
         :height="graphHeight"
         :key="key"
+        @requireFullUpdate="fullUpdate"
+        @requirePostUpdate="key++"
+        v-model="fullUpdateState"
       />
     </div>
   </div>
@@ -46,17 +50,19 @@ 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 { onMounted, ref, watch } from "vue";
+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";
 
 const graphData = ref<Datum[]>([{ fn: "x^2", key: 1 }]);
+
 const graphWidth = ref(0),
   graphHeight = ref(0);
 const key = ref(0);
+const fullUpdateState = ref(false);
 const sideRatio = ref(33);
 const onResize = ref(false);
 const shellRef = ref<HTMLDivElement>();
@@ -67,6 +73,24 @@ 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 {
@@ -81,6 +105,11 @@ function importMapper(item: FunctionPlotDatum): Datum {
     };
 }
 
+function fullUpdate() {
+  fullUpdateState.value = true;
+  key.value++;
+}
+
 onMounted(() => {
   const rawCode = window.location.search.match(/\?code=(.+)$/)?.[1];
   if (rawCode)
@@ -96,11 +125,11 @@ onMounted(() => {
 
   window.addEventListener("resize", handleResize);
   handleResize();
-  watch(graphData, () => key.value++, { deep: true });
 });
+
 function handleDrag() {
   onResize.value = true;
-  const xfull = outerWidth;
+  const xfull = window.innerWidth;
   const mousemove = (event: MouseEvent) =>
     (sideRatio.value = (event.clientX / xfull) * 100);
   document.addEventListener("mousemove", mousemove);
@@ -110,6 +139,7 @@ function handleDrag() {
     handleResize();
   });
 }
+
 function handleImport() {
   const raw = prompt("源数据：");
   if (!raw) return;

src/components/dataBlock.vue

@@ -8,7 +8,11 @@
           {{ type.label }}
         </option>
       </select>
-      <select v-model="dataItem.graphType" v-if="dataItem.graphType !== 'text'">
+      <select
+        v-model="dataItem.graphType"
+        v-if="dataItem.graphType !== 'text'"
+        @change="graphTypeChange(dataItem)"
+      >
         <option v-if="!fnType.notAllowedInInterval" :value="undefined">
           {{ graphTypeArr[0].label }}
         </option>
@@ -26,7 +30,7 @@
         :class="{ active: !blockFolded }"
         @click="blockFolded = !blockFolded"
       >
-        更多
+        {{ blockFolded ? "展开" : "收起" }}
       </button>
       <button class="delete blockBtn" @click="emit('delete')">删除</button>
     </div>
@@ -65,15 +69,21 @@
   </div>
 </template>
 <script setup lang="ts">
-import { fnTypeArr, graphTypeArr, inputTypeArr, getFnType, Datum } from "../consts";
+import {
+  fnTypeArr,
+  graphTypeArr,
+  inputTypeArr,
+  getFnType,
+  Datum,
+} from "../consts";
 import { ref, computed } from "vue";
 import StrInputs from "./dataBlockInner/strInputs.vue";
 import CoordInputs from "./dataBlockInner/coordInputs.vue";
 import SwitchInputs from "./dataBlockInner/switchInputs.vue";
 import CoordArrInputs from "./dataBlockInner/coordArrInputs.vue";
 import OptInputs from "./dataBlockInner/optInputs.vue";
 
-const emit = defineEmits(["delete"]);
+const emit = defineEmits(["delete", "requireFullUpdate"]);
 const dataItem = defineModel<Datum>();
 const block = ref<HTMLDivElement>();
 const blockFolded = ref(true);
@@ -92,6 +102,20 @@ function fnTypeChange(dataItem: Datum) {
       block.value.querySelectorAll("input").forEach((ele) => (ele.value = ""));
   }
 }
+const scatteredSet = new WeakSet<Datum>();
+function graphTypeChange(dataItem: Datum) {
+  if (dataItem.graphType === "scatter") {
+    if (!scatteredSet.has(dataItem)) {
+      scatteredSet.add(dataItem);
+      emit("requireFullUpdate");
+    }
+  } else {
+    if (scatteredSet.has(dataItem)) {
+      scatteredSet.delete(dataItem);
+      emit("requireFullUpdate");
+    }
+  }
+}
 const fnType = computed(() => getFnType(dataItem.value?.fnType));
 </script>
 

src/components/graph.vue

@@ -4,34 +4,44 @@
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import { throttle } from "lodash-es";
+import { cloneDeep, throttle } from "lodash-es";
 import type { FunctionPlotDatum } from "function-plot";
 import { Datum, findError } from "../consts";
-const { graphData, width, height } = defineProps<{
-  graphData: Datum[];
+const { data, width, height } = defineProps<{
+  data: Datum[];
   width: number;
   height: number;
 }>();
+const emit = defineEmits(["requireFullUpdate", "requirePostUpdate"]);
+const fullUpdateState = defineModel<boolean>();
 
 const plotRef = ref<HTMLDivElement | null>(null);
 onMounted(async () => {
   const functionPlot = (await import("function-plot")).default;
   watch(
-    [() => width, () => height],
+    [() => width, () => height, () => data],
     throttle(() => {
+      const graphData = cloneDeep(data);
       const flag = findError(graphData);
+      if (flag) return;
       try {
         plotRef.value &&
           functionPlot({
             target: plotRef.value,
             data: <FunctionPlotDatum[]>(
-              (flag ? graphData.slice(0, flag) : graphData)
+              // (flag ? graphData.slice(0, flag) : graphData)
+              graphData
             ),
             width: width - 20,
             height: height - 20,
           });
+        if (fullUpdateState.value) {
+          fullUpdateState.value = false;
+          emit("requirePostUpdate");
+        }
       } catch (e) {
         console.log(e);
+        if (!fullUpdateState.value) emit("requireFullUpdate");
       }
     }, 200),
     { immediate: true }