向量面板

Author: Linho1219

src/editor/inputs/inputs.scss

@@ -29,16 +29,18 @@
     padding: var(--input-inner-gap) 0;
   }
 
+  .fields {
+    display: grid;
+    grid-template-columns: max-content minmax(auto, 18em);
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--input-inner-gap);
+  }
+
   .input-inner-optional {
     font-size: 16px;
     padding: 0 15px;
-    .fields {
-      display: grid;
-      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;
@@ -65,4 +67,16 @@
       color: var(--s-color-outline);
     }
   }
+
+  .tuple {
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    gap: 0.2em;
+  }
+  .tuple-input {
+    width: 0;
+    flex-grow: 1;
+    font-size: 22px;
+  }
 }

src/editor/inputs/vector.vue

@@ -1,23 +1,62 @@
 <template>
-  <span class="input-title styled">r=</span>
-  <s-text-field
-    class="styled"
-    ref="inputBox"
-    label="x"
-    v-model="self.vector[0]"
-  ></s-text-field>
-  <s-text-field
-    class="styled"
-    ref="inputBox"
-    label="y"
-    v-model="self.vector[1]"
-  ></s-text-field>
-  <s-divider>{{ t("title.moreOptions") }}</s-divider>
+  <div class="input-inner vector">
+    <div class="fields">
+      <span class="input-title">{{ t("data.main.vector") }}</span>
+      <div class="tuple">
+        <span class="tuple-label styled">(</span>
+        <s-text-field
+          class="styled tuple-input"
+          label="Δx"
+          v-model="vectorX"
+          type="number"
+        ></s-text-field>
+        <span class="tuple-label styled">,</span>
+        <s-text-field
+          class="styled tuple-input"
+          label="Δy"
+          v-model="vectorY"
+          type="number"
+        ></s-text-field>
+        <span class="tuple-label styled">)</span>
+      </div>
+      <span class="input-title">{{ t("data.main.offset") }}</span>
+      <div class="tuple">
+        <span class="tuple-label styled">(</span>
+        <s-text-field
+          class="styled tuple-input"
+          label="x₀"
+          v-model="offsetX"
+          type="number"
+        ></s-text-field>
+        <span class="tuple-label styled">,</span>
+        <s-text-field
+          class="styled tuple-input"
+          label="y₀"
+          v-model="offsetY"
+          type="number"
+        ></s-text-field>
+        <span class="tuple-label styled">)</span>
+      </div>
+    </div>
+    <AnimatedFold :folded="props.folded">
+      <s-divider>{{ t("data.more.dividerTitle") }}</s-divider>
+      <div class="input-inner-optional">
+        <div class="fields">
+          <!-- color -->
+          <span class="label">
+            {{ t("data.more.color") }}
+            <HelpIcon> {{ t("data.more.colorHelp") }} </HelpIcon>
+          </span>
+          <ColorPicker v-model="self.color" />
+        </div>
+      </div>
+    </AnimatedFold>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { PrivateDataTypes } from "@/types/data";
-import { toRef } from "vue";
+import { ref, toRef, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { I18nSchema } from "@/i18n";
 const { t } = useI18n<{ message: I18nSchema }>();
@@ -28,4 +67,18 @@ const props = defineProps<{
   index: number;
 }>();
 const self = toRef(props, "self");
+
+import AnimatedFold from "@/ui/animated/animatedFold.vue";
+import HelpIcon from "./subblocks/helpIcon.vue";
+import ColorPicker from "./subblocks/colorPicker.vue";
+
+const vectorX = ref<number | "">(self.value.vector[0]);
+const vectorY = ref<number | "">(self.value.vector[1]);
+const offsetX = ref<number | "">(self.value.offset[0] || "");
+const offsetY = ref<number | "">(self.value.offset[1] || "");
+
+watch(vectorX, (val) => (self.value.vector[0] = val || 0));
+watch(vectorY, (val) => (self.value.vector[1] = val || 0));
+watch(offsetX, (val) => (self.value.offset[0] = val || 0));
+watch(offsetY, (val) => (self.value.offset[1] = val || 0));
 </script>

src/i18n/en-US.json

@@ -56,8 +56,11 @@
       "less": "Less Options"
     },
     "main": {
-      "fnType": "Function Type",
-      "graphType": "Renderer"
+      "fnType": "Type",
+      "graphType": "Renderer",
+      "vector": "Vector Size",
+      "offset": "Offset",
+      "text": "Text"
     },
     "more": {
       "dividerTitle": "More Options",

src/i18n/zh-CN.json

@@ -57,7 +57,10 @@
     },
     "main": {
       "fnType": "图形类型",
-      "graphType": "绘制方式"
+      "graphType": "绘制方式",
+      "vector": "向量大小",
+      "offset": "起点坐标",
+      "text": "文本"
     },
     "more": {
       "dividerTitle": "更多选项",

src/types/data.ts

@@ -177,6 +177,7 @@ export function toPublicData(data: PrivateData): FunctionPlotDatum {
       range: (val) => val === undefined,
       derivative: (val) => val === undefined,
       secants: (val) => val === undefined,
+      offset: ([x, y]) => !x && !y,
     }
   );
 }