文本支持、填充支持、展开选项

Author: Linho1219

src/App.vue

@@ -15,7 +15,7 @@
         <pre>{{ formatted }}</pre>
       </div>
     </div>
-    <Graph :key="cnt" :graphData="graphData" ref="graphRef" />
+    <Graph :key="graphKey" :graphData="graphData" ref="graphRef" />
   </div>
 </template>
 
@@ -29,25 +29,25 @@ import JSON5 from "json5";
 import prettier from "prettier/standalone";
 import prettierPluginBabel from "prettier/plugins/babel";
 import prettierPluginEstree from "prettier/plugins/estree";
-import prettierPluginPostcss from "prettier/plugins/postcss";
+import { cloneDeep } from "lodash-es";
 
 const graphRef = ref<InstanceType<typeof Graph>>();
 const graphData = reactive<FunctionPlotDatum[]>([{ fn: "x^2" }]);
-const cnt = ref(0);
+const graphKey = ref(0);
 const formatted = ref("");
 watch(
   graphData,
   () => {
-    cnt.value++;
+    graphKey.value++;
+    const dataArr = cloneDeep(graphData);
+    dataArr.forEach((item) => {
+      if (item.graphType === "text") delete item.fnType;
+    });
     prettier
-      .format(JSON5.stringify({ data: graphData }), {
+      .format(JSON5.stringify({ data: dataArr }), {
         parser: "json5",
         printWidth: 40,
-        plugins: [
-          prettierPluginBabel,
-          prettierPluginEstree,
-          prettierPluginPostcss,
-        ],
+        plugins: [prettierPluginBabel, prettierPluginEstree],
       })
       .then((value) => (formatted.value = value));
   },
@@ -86,7 +86,6 @@ watch(
 #editor {
   width: 33vw;
   border-right: var(--c-border) 1px solid;
-
   position: relative;
 }
 .editor-inner {
@@ -98,7 +97,7 @@ watch(
   bottom: 300px;
 }
 #graph {
-  width: 60vw;
+  flex-grow: 1;
   position: relative;
 }
 .add-data {
@@ -129,10 +128,10 @@ watch(
 }
 .plot-data.output pre {
   position: absolute;
-  top:60px;
-  bottom:15px;
-  left:15px;
-  right:15px;
+  top: 60px;
+  bottom: 15px;
+  left: 15px;
+  right: 15px;
   margin: 0;
   overflow: scroll;
   user-select: all;

src/components/dataBlock.vue

@@ -7,9 +7,9 @@
           {{ type.label }}
         </option>
       </select>
-      <select v-model="dataItem.graphType">
+      <select v-model="dataItem.graphType" v-if="dataItem.graphType !== 'text'">
         <option
-          v-if="!getFnType(dataItem.fnType).notAllowedInIntervel"
+          v-if="!getFnType(dataItem.fnType).notAllowedInInterval"
           :value="undefined"
         >
           {{ graphTypeArr[0].label }}
@@ -22,7 +22,14 @@
           {{ type.label }}
         </option>
       </select>
-      <button class="delete" @click="emit('delete')">删除</button>
+      <button class="delete blockBtn" @click="emit('delete')">删除</button>
+      <button
+        class="fold blockBtn"
+        :class="{ active: !blockFolded }"
+        @click="blockFolded = !blockFolded"
+      >
+        更多
+      </button>
     </div>
 
     <div class="inputs">
@@ -36,25 +43,47 @@
       </div>
       <template v-if="getFnType(dataItem.fnType).coord">
         <div
-          v-for="input in getFnType(dataItem.fnType).coord"
+          v-for="input in getFnType(dataItem.fnType).coord?.filter(
+            ({ folded }) => !(folded && blockFolded)
+          )"
           class="input-box coord"
           :class="{ optional: input.optional }"
         >
           <span class="coord-label">{{ input.label }}</span>
           <input
             type="number"
             @input="handleCoordInput(dataItem!, input, 0, $event)"
-            :placeholder="input.placeholder1"
+            :placeholder="input.placeholder[0]"
           />
           <span class="coord-label">{{ input.sep }}</span>
           <input
             type="number"
             @input="handleCoordInput(dataItem!, input, 1, $event)"
-            :placeholder="input.placeholder2"
+            :placeholder="input.placeholder[1]"
           />
           <span class="coord-label">{{ input.fin }}</span>
         </div>
       </template>
+
+      <template v-if="getFnType(dataItem.fnType).switches">
+        <div
+          v-for="input in getFnType(dataItem.fnType).switches?.filter(
+            ({ folded }) => !(folded && blockFolded)
+          )"
+          class="input-box switches"
+          @click="
+            dataItem[input.value]
+              ? delete dataItem[input.value]
+              : (dataItem[input.value] = true)
+          "
+        >
+          <span
+            class="switch"
+            :class="dataItem[input.value] ? 'on' : 'off'"
+          ></span>
+          {{ input.label }}
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -66,14 +95,26 @@ import { ref } from "vue";
 const emit = defineEmits(["delete"]);
 const dataItem = defineModel<FunctionPlotDatum>();
 const block = ref<HTMLDivElement>();
-function fnTypeChange(dataItem: FunctionPlotDatum) {
-  if (getFnType(dataItem.fnType).notAllowedInIntervel && !dataItem.graphType)
-    dataItem.graphType = "polyline";
-  if (dataItem.fnType === "implicit") delete dataItem.graphType;
+const blockFolded = ref(true);
+function fnTypeChange(
+  dataItem:
+    | (Omit<FunctionPlotDatum, "fnType"> & {
+        fnType: "text" | FunctionPlotDatum["fnType"];
+      })
+    | FunctionPlotDatum
+) {
   inputTypeArr.forEach((key) => delete dataItem[key]);
-  if (dataItem.fnType === "vector") dataItem.vector = [0, 0];
-  if (block.value)
-    block.value.querySelectorAll("input").forEach((ele) => (ele.value = ""));
+  if (dataItem.fnType === "text") {
+    dataItem.graphType = "text";
+  } else {
+    if (dataItem.graphType === "text" || dataItem.fnType === "implicit")
+      delete dataItem.graphType;
+    if (getFnType(dataItem.fnType).notAllowedInInterval && !dataItem.graphType)
+      dataItem.graphType = "polyline";
+    if (dataItem.fnType === "vector") dataItem.vector = [0, 0];
+    if (block.value)
+      block.value.querySelectorAll("input").forEach((ele) => (ele.value = ""));
+  }
 }
 function handleCoordInput(
   dataItem: FunctionPlotDatum,
@@ -105,22 +146,27 @@ function handleCoordInput(
   position: relative;
   padding: 20px 15px;
 }
-.delete {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
+.blockBtn {
+  height: 100%;
+  float: right;
   color: var(--c-text);
   padding: 8px 15px;
   border: none;
-  background: var(--c-red);
+  background: var(--c-border);
+  margin-left: 10px;
   border-radius: 5px;
   opacity: 0.75;
 }
-.delete:hover {
+.delete {
+  background: var(--c-red);
+}
+.blockBtn.active {
+  background: var(--c-accent);
+}
+.blockBtn:hover {
   opacity: 1;
 }
-.delete:active {
+.blockBtn:active {
   opacity: 0.3;
 }
 .selectors {
@@ -195,4 +241,58 @@ function handleCoordInput(
   font-size: 18px;
   flex-shrink: 1;
 }
+
+.input-box.switches {
+  align-items: center;
+  gap: 10px;
+  padding-left: 5px;
+}
+
+.switch:before,
+.switch:after {
+  position: absolute;
+  transition: all 0.2s cubic-bezier(0, 0.48, 0.27, 0.98);
+}
+
+.switch {
+  width: 40px;
+  height: 20px;
+  border-radius: 5px;
+  position: relative;
+}
+
+.switch {
+  border-radius: 10px;
+}
+
+.switch.on {
+  background: var(--c-accent);
+}
+
+.switch.off {
+  background: var(--c-border);
+}
+.switch:after {
+  content: "";
+  background: #fff;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+}
+.switch.off:after {
+  left: 4px;
+}
+.switch.on:after {
+  left: 24px;
+}
+.switch:hover {
+  filter: brightness(110%);
+}
+
+.switch:active {
+  filter: brightness(90%);
+}
 </style>

src/components/editor.vue

@@ -6,8 +6,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from "vue";
-import functionPlot from "function-plot";
-import { throttle } from "lodash-es";
+import { throttle, cloneDeep } from "lodash-es";
 import type { FunctionPlotDatum } from "function-plot";
 import { getFnType } from "../consts";
 const { graphData } = defineProps<{ graphData: FunctionPlotDatum[] }>();
@@ -22,17 +21,18 @@ const handleResize = () => {
     height.value = shellRef.value.clientHeight;
   }
 };
-onMounted(() => {
+onMounted(async () => {
+  const functionPlot = (await import("function-plot")).default;
   handleResize();
   window.addEventListener("resize", handleResize);
   watch(
     [width, height],
     throttle(() => {
-      const data = <FunctionPlotDatum[]>JSON.parse(JSON.stringify(graphData));
+      const data = <FunctionPlotDatum[]>cloneDeep(graphData);
       let flag = 0;
       outer: for (const [index, dataItem] of data.entries()) {
         const fnType = getFnType(dataItem.fnType);
-        if (fnType.notAllowedInIntervel && !dataItem.graphType) {
+        if (fnType.notAllowedInInterval && !dataItem.graphType) {
           flag = index;
           break;
         }
@@ -72,7 +72,7 @@ onUnmounted(() => window.removeEventListener("resize", handleResize));
   right: 0;
   left: 0;
   bottom: 0;
-  filter: invert(100%) hue-rotate(210deg) brightness(133%);
+  filter: invert(100%) hue-rotate(180deg) brightness(133%);
   color: black;
   user-select: none;
 }