切割线数据并入结构

Author: Linho1219

src/editor/inputs/linear.vue

@@ -10,8 +10,10 @@
         <div class="fields">
           <span class="label"> 切线与割线 </span>
           <s-popup class="derivate-popup input" align="right">
-            <s-button type="outlined" slot="trigger"> 设置面板 </s-button>
-            <DerivatePane :self="self"/>
+            <s-button type="outlined" slot="trigger">
+              设置面板 <s-icon name="chevron_right" slot="end"></s-icon>
+            </s-button>
+            <DerivatePane :self="self" />
           </s-popup>
           <span class="label"> {{ t("data.more.range") }} </span>
           <Domain :self="self" />
@@ -37,6 +39,16 @@
           <s-checkbox type="checkbox" v-model.lazy="self.skipTip">
             {{ t("data.more.skipTip") }}
             <HelpIcon> {{ t("data.more.skipTipHelp") }} </HelpIcon>
+            <HelpIcon
+              v-if="
+                self.skipTip &&
+                (self.derivative?.updateOnMouseMove ||
+                  self.secants.some((s) => s.updateOnMouseMove))
+              "
+              type="warn"
+            >
+              “隐藏悬浮提示”启用时，切线与割线跟随鼠标不生效
+            </HelpIcon>
           </s-checkbox>
         </div>
       </div>
@@ -46,7 +58,7 @@
 
 <script setup lang="ts">
 import { PrivateDataTypes } from "@/types/data";
-import {  toRef } from "vue";
+import { toRef } from "vue";
 import { useI18n } from "vue-i18n";
 import { I18nSchema } from "@/i18n";
 const { t } = useI18n<{ message: I18nSchema }>();
@@ -64,6 +76,4 @@ import ColorPicker from "./subblocks/colorPicker.vue";
 import Domain from "./subblocks/domain.vue";
 import DerivatePane from "./subblocks/derivatePane.vue";
 import "./inputs.scss";
-
 </script>
-

src/editor/inputs/subblocks/derivatePane.vue

@@ -119,7 +119,7 @@
 
 <script lang="ts" setup>
 import { PrivateDataTypes } from "@/types/data";
-import { computed, reactive, ref, toRef } from "vue";
+import { computed, reactive, ref, toRef, watchEffect } from "vue";
 import FunctionField from "./function.vue";
 
 import AnimatedList from "@/ui/animated/animatedList.vue";
@@ -133,30 +133,87 @@ const props = defineProps<{
 const tab = ref("derivate");
 const self = toRef(props, "self");
 
-const derivateEnabled = ref(false);
-const derivateFn = ref("");
-const derivFollowMouseStr = ref("followMouse");
+const initDerivate = self.value.derivative ?? {
+  fn: "",
+  updateOnMouseMove: true,
+  x0: "" as number | "",
+};
+
+const derivateEnabled = ref(self.value.derivative !== undefined);
+const derivateFn = ref(initDerivate.fn);
+const derivFollowMouseStr = ref(
+  initDerivate.updateOnMouseMove ? "followMouse" : "manual"
+);
 const derivFollowMouse = computed(
   () => derivFollowMouseStr.value === "followMouse"
 );
-const derivateX = ref(0);
+const derivateX = ref<number | "">(initDerivate.x0 ?? "");
+const derivateReady = computed(
+  (): undefined | PrivateDataTypes.LinearPart.Derivative => {
+    if (!derivateEnabled.value) return undefined;
+    if (derivFollowMouse.value)
+      return {
+        fn: derivateFn.value,
+        updateOnMouseMove: true,
+      };
+    return {
+      fn: derivateFn.value,
+      updateOnMouseMove: false,
+      x0: derivateX.value || 0,
+    };
+  }
+);
+watchEffect(() => {
+  self.value.derivative = derivateReady.value;
+});
 
-const secantEnabled = ref(false);
+const initSecant = self.value.secants;
+const secantEnabled = ref(initSecant.length > 0);
 const secantArr = reactive<
   {
     key: number;
     followMouse: boolean;
     x1: number | "";
     x2: number | "";
   }[]
->([]);
+>(
+  initSecant.map((item) => ({
+    key: Math.random(),
+    followMouse: item.updateOnMouseMove,
+    x1: item.x0,
+    x2: item.x1 || "",
+  }))
+);
+const secantReady = computed((): PrivateDataTypes.LinearPart.Secant[] => {
+  if (!secantEnabled.value) return [];
+  return secantArr.flatMap((item) => {
+    if (item.x1 === "") return [];
+    if (item.followMouse)
+      return {
+        x0: item.x1,
+        updateOnMouseMove: true,
+      };
+    if (item.x2 === "") return [];
+    return {
+      x0: item.x1,
+      x1: item.x2,
+      updateOnMouseMove: false,
+    };
+  });
+});
+watchEffect(() => {
+  self.value.secants = secantReady.value;
+});
 </script>
 
 <style lang="scss">
 .derivate-pane {
   width: 25em;
   s-tab {
     background-color: var(--s-color-surface-container-low);
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    overflow: hidden;
   }
   .tab-text {
     display: flex;
@@ -172,7 +229,7 @@ const secantArr = reactive<
     &-leave-active {
       transition:
         opacity 0.1s,
-        margin-left 0.5s cubic-bezier(0, 1, 0, 1);
+        margin-left 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
     }
     &-leave-to,
     &-enter-from {

src/editor/inputs/subblocks/helpIcon.vue

@@ -1,12 +1,18 @@
 <template>
-  <s-tooltip>
-    <SIconInfo class="help" slot="trigger" />
+  <s-tooltip @click.stop>
+    <SIconWarn v-if="props.type === 'warn'" class="help warn" slot="trigger" />
+    <SIconInfo v-else class="help" slot="trigger" />
     <slot></slot>
   </s-tooltip>
 </template>
 
 <script setup lang="ts">
 import SIconInfo from "@/ui/icons/info.vue";
+import SIconWarn from "@/ui/icons/warn.vue";
+
+const props = defineProps<{
+  type?: "info" | "warn";
+}>();
 </script>
 
 <style scoped lang="scss">
@@ -21,5 +27,13 @@ import SIconInfo from "@/ui/icons/info.vue";
   &:hover {
     opacity: 1;
   }
+
+  &.warn {
+    color: var(--s-color-warning);
+    animation:
+      bouncein var(--s-motion-duration-medium4)
+        var(--s-motion-easing-emphasized),
+      breathe 2s infinite;
+  }
 }
 </style>

src/graph/graph.vue

@@ -193,28 +193,8 @@ s-icon.spin {
 }
 
 s-icon.bouncein {
-  animation: bouncein var(--s-motion-duration-medium4)
-    var(--s-motion-easing-emphasized);
-}
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes bouncein {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.3);
-  }
-  100% {
-    transform: scale(1);
-  }
+  animation:
+    bouncein var(--s-motion-duration-medium4) var(--s-motion-easing-emphasized),
+    breathe 2s infinite;
 }
 </style>

src/public.scss

@@ -70,6 +70,39 @@ input[type="number"] {
   position: relative;
 }
 
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bouncein {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes breathe {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 s-page {
   --s-color-scrim: #000000;
   --s-color-primary: #00639a;