基础逻辑

Author: Linho1219

src/App.vue

@@ -1,7 +1,48 @@
 <template>
   <Navbar />
   <div id="content">
-    <div id="editor" @click="graphData.push({ fn: 'sin(x)' })">{{ graphData }}</div>
+    <div id="editor">
+      <div v-for="dataItem in graphData" class="plot-data">
+        <select
+          v-model="dataItem.fnType"
+          @change="
+            getFnType(dataItem.fnType).notAllowedInIntervel &&
+              !dataItem.graphType &&
+              (dataItem.graphType = 'polyline')
+          "
+        >
+          <option :value="undefined">{{ fnTypeArr[0].label }}</option>
+          <option v-for="type in fnTypeArr.slice(1)" :value="type.value">
+            {{ type.label }}
+          </option>
+        </select>
+
+        <select v-model="dataItem.graphType">
+          <option
+            v-if="!getFnType(dataItem.fnType).notAllowedInIntervel"
+            :value="undefined"
+          >
+            {{ graphTypeArr[0].label }}
+          </option>
+          <option v-for="type in graphTypeArr.slice(1)" :value="type.value">
+            {{ type.label }}
+          </option>
+        </select>
+        <div class="input-wrapper">
+          <input
+            v-for="input in inputArr.filter(({ value }) => {
+              const inputs = getFnType(dataItem.fnType).inputs;
+              if (inputs.includes(value)) return true;
+              else delete dataItem[value];
+            })"
+            type="text"
+            v-model="dataItem[input.value]"
+          />
+        </div>
+      </div>
+      <div class="add-data" @click="graphData.push({})">+ 添加</div>
+      {{ graphData }}
+    </div>
     <Graph :graphData="graphData" />
   </div>
 </template>
@@ -10,11 +51,12 @@
 import Navbar from "./components/nav.vue";
 import Graph from "./components/graph.vue";
 import type { FunctionPlotDatum } from "function-plot";
-
-import { reactive, ref, watch } from "vue";
-const graphData = ref([{ fn: 'x^2' }]);
-const cnt = ref(0);
-watch(graphData, () => cnt.value++,{deep:true});
+import { reactive } from "vue";
+import { fnTypeArr, graphTypeArr, inputArr } from "./consts";
+import type { FnType, ValueLabel } from "./consts";
+const graphData = reactive<FunctionPlotDatum[]>([{ fn: "x^2" }]);
+const getFnType = (fnType?: string) =>
+  <FnType>fnTypeArr.find(({ value }) => value === (fnType || "linear"));
 </script>
 
 <style>

src/components/graph.vue

@@ -1,20 +1,19 @@
 <template>
   <div id="graph" ref="shellRef">
-    {{ width }},{{ height }},{{ cnt }}
+    {{ width }},{{ height }}
     <div id="graphRender" ref="plotRef"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
+import { onMounted, onUnmounted, ref, watch } from "vue";
 import functionPlot from "function-plot";
 import type { FunctionPlotDatum } from "function-plot";
 const { graphData } = defineProps<{ graphData: FunctionPlotDatum[] }>();
 const shellRef = ref<HTMLDivElement | null>(null);
 const plotRef = ref<HTMLDivElement | null>(null);
 const width = ref(0),
   height = ref(0);
-const cnt = ref(0);
 const handleResize = () => {
   if (shellRef.value) {
     width.value = shellRef.value.clientWidth;
@@ -27,25 +26,19 @@ onMounted(() => {
   watch(
     [width, height, () => graphData],
     () => {
-			cnt.value++
-      if (plotRef.value && width.value && height.value) {
+      if (plotRef.value && width.value && height.value)
         functionPlot({
           data: JSON.parse(JSON.stringify(graphData)),
           target: plotRef.value,
           width: width.value,
           height: height.value,
         });
-        cnt.value++;
-      }
     },
     { immediate: true, deep: true }
   );
 });
 onUnmounted(() => window.removeEventListener("resize", handleResize));
-watch(
-  () => graphData,
-  () => cnt.value++
-);
+
 </script>
 
 <style>

src/consts.ts

@@ -0,0 +1,65 @@
+export type ValueLabel = {
+  value: string;
+  label: string;
+};
+
+export type FnType = ValueLabel & {
+  inputs: string[];
+  coord?: ValueLabel[];
+  notAllowedInIntervel?: boolean;
+};
+
+export const inputArr = [
+  { value: "fn", label: "函数" },
+  { value: "r", label: "半径" },
+  { value: "x", label: "x" },
+  { value: "y", label: "y" },
+  { value: "text", label: "文本" },
+] as const satisfies ValueLabel[];
+
+export const graphTypeArr = [
+  { value: "interval", label: "默认" },
+  { value: "polyline", label: "多边形" },
+  // { value: "text", label: "text" },
+  { value: "scatter", label: "散点" },
+] as const satisfies ValueLabel[];
+
+export const fnTypeArr = [
+  {
+    value: "linear",
+    label: "一般",
+    inputs: ["fn"],
+  },
+  {
+    value: "implicit",
+    label: "隐函数",
+    inputs: ["fn"],
+  },
+  {
+    value: "parametric",
+    label: "参数方程",
+    inputs: ["x", "y"],
+    notAllowedInIntervel: true,
+  },
+  {
+    value: "polar",
+    label: "极坐标",
+    inputs: ["r"],
+		notAllowedInIntervel: true,
+  },
+  {
+    value: "points",
+    label: "点",
+    inputs: ["x", "y"],
+		notAllowedInIntervel: true,
+  },
+  {
+    value: "vector",
+    label: "向量",
+    inputs: [],
+    coord: [
+      { value: "vector", label: "向量大小" },
+      { value: "offset", label: "起点" },
+    ],
+  },
+] as const satisfies FnType[];