定义域设置

Author: Linho1219

src/editor/inputs/inputs.scss

@@ -34,17 +34,14 @@
     padding: 0 15px;
     .fields {
       display: grid;
-      grid-template-columns: max-content minmax(auto, 20em);
+      grid-template-columns: max-content minmax(auto, 18em);
       justify-content: space-between;
       align-items: center;
       gap: var(--input-inner-gap);
     }
     s-text-field {
       width: 100%;
       font-size: inherit;
-      &.styled {
-        font-size: 1.1em;
-      }
     }
     .label {
       justify-self: start;

src/editor/inputs/linear.vue

@@ -8,11 +8,15 @@
       <s-divider>{{ t("title.moreOptions") }}</s-divider>
       <div class="input-inner-optional">
         <div class="fields">
+          <span class="label">定义域</span>
+          <Domain :self="self" />
           <span class="label">
-            颜色 <HelpIcon> 支持颜色名称 / RGB(A) / HEX </HelpIcon>
+            颜色 <HelpIcon> 支持颜色名称 / RGB(A) / HEX，留空将自动着色 </HelpIcon>
           </span>
           <ColorPicker v-model="self.color" />
-          <span class="label">采样数</span>
+          <span class="label"
+            >采样数 <HelpIcon> 留空则根据图像宽度动态调整 </HelpIcon>
+          </span>
           <s-text-field
             class="input monospace"
             type="number"
@@ -27,8 +31,8 @@
             闭合并填充
           </s-checkbox>
           <s-checkbox type="checkbox" v-model.lazy="self.skipTip">
-            不显示指示条
-            <HelpIcon> 鼠标经过时标出的点及其坐标 </HelpIcon>
+            隐藏悬浮指示条
+            <HelpIcon> 隐藏鼠标经过时标出的点与坐标信息 </HelpIcon>
           </s-checkbox>
         </div>
       </div>
@@ -52,5 +56,6 @@ const self = toRef(props, "self");
 import FilledTextfield from "./subblocks/function.vue";
 import HelpIcon from "./subblocks/helpIcon.vue";
 import ColorPicker from "./subblocks/colorPicker.vue";
+import Domain from "./subblocks/domain.vue";
 import "./inputs.scss";
 </script>

src/editor/inputs/subblocks/domain.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="input domain">
+    <s-text-field
+      class="domain-input styled-inner"
+      type="number"
+      v-model="value1"
+      label="最小值"
+    ></s-text-field>
+    <s-text-field
+      class="domain-input styled-inner"
+      type="number"
+      v-model="value2"
+      label="最大值"
+    ></s-text-field>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PrivateDataTypes } from "@/types/data";
+import { ref, watch } from "vue";
+const props = defineProps<{ self: PrivateDataTypes.Functions }>();
+const infToUndefined = (value: number) =>
+  value === Infinity || value === -Infinity ? "" : value;
+const undefinedToInf = (value: number | "" | undefined, sign: number) =>
+  value === "" || value === undefined ? sign * Infinity : value;
+const value1 = ref<number | "">(infToUndefined(props.self.range[0]));
+const value2 = ref<number | "">(infToUndefined(props.self.range[1]));
+
+watch(value1, (newVal) => {
+  props.self.range[0] = undefinedToInf(newVal, -1);
+});
+watch(value2, (newVal) => {
+  props.self.range[1] = undefinedToInf(newVal, 1);
+});
+</script>
+
+<style lang="scss">
+.input-inner .input.domain {
+  display: flex;
+  width: 100%;
+  gap: 6px;
+  .domain-input {
+    width: 0;
+    flex-grow: 1;
+    &::part(input) {
+      font-size: 1.25em;
+    }
+  }
+}
+</style>

src/types/data.ts

@@ -13,6 +13,7 @@ export namespace PrivateDataTypes {
     skipTip: boolean;
     nSamples: number | undefined;
     closed: boolean;
+    range: [number, number];
   };
 
   export const allowedGraphTypes = {
@@ -81,6 +82,8 @@ export namespace PrivateDataTypes {
     | Vector
     | Text;
 
+  export type Functions = Linear | Implicit | Parametric | Polar;
+
   export type Full = Linear &
     Implicit &
     Parametric &
@@ -105,16 +108,28 @@ export function toPublicData(data: PrivateData): FunctionPlotDatum {
         color: "",
       }
     );
-  return omitAttr(cloneDeep(data), {
-    key: () => true,
-    fnType: "linear",
-    graphType: "interval",
-    skipTip: false,
-    closed: false,
-    hidden: false,
-    color: "",
-    nSamples: undefined,
-  });
+  return omitAttr(
+    cloneDeep({
+      ...data,
+      range: ((): [number, number] | undefined => {
+        if (!("range" in data)) return undefined;
+        let [v1, v2] = data.range;
+        if (v1 === -Infinity && v2 === Infinity) return undefined;
+        return data.range;
+      })(),
+    }),
+    {
+      key: () => true,
+      fnType: "linear",
+      graphType: "interval",
+      skipTip: false,
+      closed: false,
+      hidden: false,
+      color: "",
+      nSamples: undefined,
+      range: (range) => range === undefined,
+    }
+  );
 }
 
 export function toPrivateData(input: Object) {
@@ -129,6 +144,7 @@ export function toPrivateData(input: Object) {
     skipTip: false,
     closed: false,
     nSamples: undefined,
+    range: () => [-Infinity, Infinity] as [number, number],
   });
   switch (data.fnType) {
     case "linear":