文本面板

Author: Linho1219

src/editor/inputs/inputs.scss

@@ -34,7 +34,8 @@
     grid-template-columns: max-content minmax(auto, 18em);
     justify-content: space-between;
     align-items: center;
-    gap: var(--input-inner-gap);
+    row-gap: var(--input-inner-gap);
+    column-gap: 1.5em;
   }
 
   .input-inner-optional {

src/editor/inputs/text.vue

@@ -1,29 +1,50 @@
 <template>
-  <span class="input-title styled">r=</span>
-  <s-text-field
-    class="styled"
-    ref="inputBox"
-    label="f(x,y)"
-    v-model="self.text"
-  ></s-text-field>
-  <s-text-field
-    class="styled"
-    ref="inputBox"
-    label="x"
-    v-model="self.location[0]"
-  ></s-text-field>
-  <s-text-field
-    class="styled"
-    ref="inputBox"
-    label="y"
-    v-model="self.location[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.text") }}</span>
+      <s-text-field
+        v-model="self.text"
+        :label="t('data.main.text')"
+        class="text-input-box"
+      ></s-text-field>
+      <span class="input-title">{{ t("data.main.location") }}</span>
+      <div class="tuple">
+        <span class="tuple-label styled">(</span>
+        <s-text-field
+          class="styled tuple-input"
+          label="x₀"
+          v-model="locationX"
+          type="number"
+        ></s-text-field>
+        <span class="tuple-label styled">,</span>
+        <s-text-field
+          class="styled tuple-input"
+          label="y₀"
+          v-model="locationY"
+          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 } from "vue";
 import { useI18n } from "vue-i18n";
 import { I18nSchema } from "@/i18n";
 const { t } = useI18n<{ message: I18nSchema }>();
@@ -34,4 +55,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 locationX = ref<number | "">(self.value.location[0]);
+const locationY = ref<number | "">(self.value.location[1]);
 </script>
+
+<style lang="scss">
+.text-input-box {
+  width: 100%;
+  font-size: 18px;
+}
+</style>

src/i18n/en-US.json

@@ -60,7 +60,8 @@
       "graphType": "Renderer",
       "vector": "Vector Size",
       "offset": "Offset",
-      "text": "Text"
+      "text": "Text",
+      "location": "Text Position"
     },
     "more": {
       "dividerTitle": "More Options",
@@ -75,7 +76,7 @@
       "skipTipHelp": "Hide point and coordinate info on mouse hover",
       "skipTipWarn": "When 'Hide Hover Tips' is enabled, tangent and secant lines will not follow the mouse"
     },
-    "derivateAndSecants": "Tangents and Secants",
+    "derivateAndSecants": "Tangents & Secants",
     "derivateAndSecantsPane": "Open panel",
     "derivate": {
       "title": "Tangent Settings",

src/i18n/zh-CN.json

@@ -60,7 +60,8 @@
       "graphType": "绘制方式",
       "vector": "向量大小",
       "offset": "起点坐标",
-      "text": "文本"
+      "text": "文本内容",
+      "location": "文本位置"
     },
     "more": {
       "dividerTitle": "更多选项",

src/types/data.ts

@@ -197,7 +197,10 @@ export function toPrivateData(input: Object) {
     case "text":
     // @ts-ignore expected case fallthrough
     case undefined:
-      if ("text" in data && typeof data.text === "string")
+      if (
+        data.fnType === "text" ||
+        ("text" in data && typeof data.text === "string")
+      )
         return amendAttr<PrivateDataTypes.Text>(data, {
           fnType: "text",
           graphType: "text",