字体优化

数值框符号改成窄的
函数框输入时强制刷新，显示连字

Author: Linho1219

public/fonts/KaTeX_AllInOne_Neg.woff2

@@ -1,7 +1,7 @@
 <template>
   <div class="input-inner">
     <div class="field main-fn">
-      <FunctionField class="styled fn" label="f(x, y)" v-model="self.fn" />
+      <FunctionField class="fn" label="f(x, y)" v-model="self.fn" />
       <span class="label styled"> =0 </span>
     </div>
     <AnimatedFold :folded="props.folded">
@@ -20,7 +20,6 @@
           <s-checkbox
             type="checkbox"
             v-model.lazy="self.closed"
-            :disabled="self.graphType === 'scatter'"
           >
             {{ t("data.more.closed") }}
           </s-checkbox>

src/editor/inputs/implicit.vue

@@ -2,7 +2,7 @@
   <div class="input-inner">
     <div class="field main-fn">
       <span class="label styled">y=</span>
-      <FunctionField class="styled fn" label="f(x)" v-model="self.fn" />
+      <FunctionField class="fn" label="f(x)" v-model="self.fn" />
     </div>
     <AnimatedFold :folded="props.folded">
       <s-divider>{{ t("data.more.dividerTitle") }}</s-divider>

src/editor/inputs/linear.vue

@@ -2,11 +2,11 @@
   <div class="input-inner">
     <div class="field main-fn">
       <span class="label styled">x=</span>
-      <FunctionField class="styled fn" label="f(t)" v-model="self.x" />
+      <FunctionField class="fn" label="f(t)" v-model="self.x" />
     </div>
     <div class="field main-fn">
       <span class="label styled">y=</span>
-      <FunctionField class="styled fn" label="g(t)" v-model="self.y" />
+      <FunctionField class="fn" label="g(t)" v-model="self.y" />
     </div>
     <AnimatedFold :folded="props.folded">
       <s-divider>{{ t("data.more.dividerTitle") }}</s-divider>

src/editor/inputs/parametric.vue

@@ -3,7 +3,7 @@
     <div class="field main-fn">
       <span class="label styled">ρ=</span>
       <FunctionField
-        class="styled fn"
+        class="fn"
         ref="inputBox"
         label="f(θ)"
         v-model="self.r"

src/editor/inputs/polar.vue

@@ -3,10 +3,7 @@
     <label :class="{ lifted: !isEmpty }">{{ props.label }}</label>
     <input
       @focus="isFocus = true"
-      @blur="
-        isFocus = false;
-        refreshInput();
-      "
+      @blur="isFocus = false"
       type="text"
       v-model="value"
       ref="inputRef"
@@ -15,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 
 const value = defineModel<string>({ required: true });
 const props = defineProps<{
@@ -29,9 +26,12 @@ function refreshInput() {
   // On Chromium browsers, ligatures over 3 characters are not displayed until force refresh
   // Manually setting the value won't trigger Vue's reactivity system, no performance issue
   if (!inputRef.value) return;
+  const { selectionStart, selectionEnd } = inputRef.value;
   inputRef.value.value = value.value + "\u200B";
   inputRef.value.value = value.value;
+  inputRef.value.setSelectionRange(selectionStart, selectionEnd);
 }
+watch(value, refreshInput);
 </script>
 
 <style lang="scss">
@@ -45,6 +45,7 @@ function refreshInput() {
     border-bottom-color 0.2s;
   padding: 0;
   display: flex;
+  font-family: var(--font-math);
   &.focus {
     background-color: var(--s-color-surface-container-highest);
     border-bottom-color: var(--s-color-primary);

src/editor/inputs/subblocks/function.vue

@@ -42,10 +42,15 @@ input[type="number"] {
   src: url("/fonts/KaTeX_AllInOne.woff2");
 }
 
+@font-face {
+  font-family: "KaTeX_Neg";
+  src: url("/fonts/KaTeX_AllInOne_Neg.woff2");
+}
+
 .styled,
 .styled::part(input),
 .styled-inner::part(input) {
-  font-family: var(--font-math);
+  font-family: "KaTeX_Neg", var(--font-math);
   font-variant-ligatures: common-ligatures discretionary-ligatures contextual
     historical-ligatures;
 }