重构函数编辑面板

.vscode/settings.json

@@ -13,32 +13,14 @@
       "base": "lottie",
       "color": "blue-800",
       "lightColor": "light-blue-200",
-      "folderNames": ["graph"],
-      "rootFolderNames": ["graph"]
+      "folderNames": ["graph"]
     },
     {
       "name": "input-component",
       "base": "mock",
       "color": "cyan-800",
       "lightColor": "light-green-700",
-      "folderNames": ["inputs"],
-      "rootFolderNames": ["inputs"]
-    },
-    {
-      "name": "icon",
-      "base": "svg",
-      "color": "purple-400",
-      "lightColor": "purple-100",
-      "folderNames": ["icons"],
-      "rootFolderNames": ["icons"]
-    },
-    {
-      "name": "animate",
-      "base": "animation",
-      "color": "purple-400",
-      "lightColor": "purple-100",
-      "folderNames": ["animatedList"],
-      "rootFolderNames": ["animatedList"]
+      "folderNames": ["inputs", "subblocks"]
     }
   ],
   "material-icon-theme.files.associations": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "function-plot-gui",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,9 +19,10 @@
     "mitt": "^3.0.1",
     "pinia": "^3.0.2",
     "prettier": "^3.4.2",
-    "sober": "^1.1.0",
+    "sober": "^1.1.1",
     "utf8": "^3.0.0",
     "vue": "^3.5.13",
+    "vue-color-kit": "^1.0.6",
     "vue-draggable-plus": "^0.6.0",
     "vue-i18n": "^10.0.7"
   },
@@ -34,8 +35,9 @@
     "dotenv": "^16.5.0",
     "patch-package": "^8.0.0",
     "rollup-plugin-visualizer": "^5.14.0",
+    "sass-embedded": "^1.87.0",
     "typescript": "~5.6.2",
-    "vite": "^6.1.0",
+    "vite": "^6.3.5",
     "vue-tsc": "^2.1.10"
   }
 }

patches/sober+1.1.1.patch

@@ -0,0 +1,8 @@
+diff --git a/node_modules/sober/dist/popup.js b/node_modules/sober/dist/popup.js
+index 1bbbdb4..f2e8485 100644
+--- a/node_modules/sober/dist/popup.js
++++ b/node_modules/sober/dist/popup.js
+@@ -1,2 +1,2 @@
+-import{useElement as w}from"./core/element.js";import{convertCSSDuration as y}from"./core/utils/CSSUtils.js";const E="s-popup",k={align:"bottom"},S=":host{display:inline-block;vertical-align:middle;text-align:left}dialog{inset:0;width:100%;height:100%;background:none;border:none;padding:0;max-width:none;max-height:none;outline:none;position:relative;overflow:hidden;color:inherit}dialog::backdrop{background:none}.scrim{position:absolute;top:0;left:0;width:100%;height:100%}.container{position:relative;width:fit-content;max-width:100%;max-height:100%}::slotted(:not([slot])){border-radius:4px;max-width:100%;max-height:100%;white-space:nowrap;box-shadow:var(--s-elevation-level2, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12));background:var(--s-color-surface-container, #ECEEF0)}",C='<slot name="trigger"></slot><dialog class="popup" part="popup"><div class="scrim" part="scrim"></div><div class="container" part="container"><slot></slot></div></dialog>';class b extends w({style:S,template:C,props:k,setup(l){const r=l.querySelector("dialog"),n=l.querySelector(".container"),p=getComputedStyle(this),h=()=>{const e=p.getPropertyValue("--s-motion-easing-standard")||"cubic-bezier(0.2, 0, 0, 1.0)",t=p.getPropertyValue("--s-motion-duration-medium4")||"400ms";return{easing:e,duration:y(t)}},d=e=>{if(!this.isConnected||r.open)return;const t={top:0,left:0,origin:[]};if(r.showModal(),!this.dispatchEvent(new Event("show",{cancelable:!0})))return r.close();const o=n.offsetWidth,c=n.offsetHeight;if(!e||e instanceof HTMLElement){const g=e??this;if(!g)return;const i=g.getBoundingClientRect(),a={middle(f){t.origin[0]="center",t.left=i.left-(o-i.width)/2;const m=()=>(t.top=i.top+i.height,t.origin[1]="top",t.top+c>innerHeight),u=()=>(t.top=i.top-c,t.origin[1]="bottom",t.top<0);t.left<0&&(t.left=i.left,t.origin[0]="left"),t.left+o>innerWidth&&(t.left=i.left+i.width-o,t.origin[0]="right"),f==="top"&&u()&&m(),f==="bottom"&&m()&&u()},left(){return t.origin=["right","top"],t.left=i.left-o,t.top=i.top,t.left<0},right(){return t.origin=["left","top"],t.left=i.left+i.width,t.top=i.top,t.left+o>innerWidth}};switch(this.align){case"bottom":case"top":a.middle(this.align);break;case"left":a.left()&&a.right();break;case"right":a.right()&&a.left();break}}else t.top=e.y,t.left=e.x,t.origin=e.origin?.split(" ")??["left","top"],e.x+o>innerWidth&&(t.left=e.x-o,t.origin[0]="right"),e.y+c>innerHeight&&(t.top=e.y-c,t.origin[1]="bottom");n.style.transformOrigin=t.origin.join(" "),n.style.top=`${Math.max(t.top,0)}px`,n.style.left=`${Math.max(t.left,0)}px`;const x=n.animate({transform:["scale(.9)","scale(1)"],opacity:[0,1]},h());this.setAttribute("showed",""),x.finished.then(()=>this.dispatchEvent(new Event("showed")))},s=()=>{if(!this.isConnected||!r.open||n.getAnimations().length>0||!this.dispatchEvent(new Event("close",{cancelable:!0})))return;const e=n.animate({transform:["scale(1)","scale(.9)"],opacity:[1,0]},h());this.removeAttribute("showed"),e.finished.then(()=>{r.close(),this.dispatchEvent(new Event("closed"))})},v=e=>r.open?s():d(e);return l.querySelector("slot[name=trigger]").addEventListener("click",()=>d()),l.querySelector(".scrim").addEventListener("pointerdown",s),{expose:{show:d,toggle:v,close:s},onMounted:()=>addEventListener("resize",s),onUnmounted:()=>removeEventListener("resize",s)}}}){}b.define(E);export{b as Popup};
++import{useElement as w}from"./core/element.js";import{convertCSSDuration as y}from"./core/utils/CSSUtils.js";const E="s-popup",k={align:"bottom"},S=":host{display:inline-block;vertical-align:middle;text-align:left}dialog{inset:0;width:100%;height:100%;background:none;border:none;padding:0;max-width:none;max-height:none;outline:none;position:relative;overflow:hidden;color:inherit}dialog::backdrop{background:none}.scrim{cursor:default;position:absolute;top:0;left:0;width:100%;height:100%}.container{position:relative;width:fit-content;max-width:100%;max-height:100%}::slotted(:not([slot])){border-radius:4px;max-width:100%;max-height:100%;white-space:nowrap;box-shadow:var(--s-elevation-level2, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12));background:var(--s-color-surface-container, #ECEEF0)}",C='<slot name="trigger"></slot><dialog class="popup" part="popup"><div class="scrim" part="scrim"></div><div class="container" part="container"><slot></slot></div></dialog>';class b extends w({style:S,template:C,props:k,setup(l){const r=l.querySelector("dialog"),n=l.querySelector(".container"),p=getComputedStyle(this),h=()=>{const e=p.getPropertyValue("--s-motion-easing-standard")||"cubic-bezier(0.2, 0, 0, 1.0)",t=p.getPropertyValue("--s-motion-duration-medium4")||"400ms";return{easing:e,duration:y(t)}},d=e=>{if(!this.isConnected||r.open)return;const t={top:0,left:0,origin:[]};if(r.showModal(),!this.dispatchEvent(new Event("show",{cancelable:!0})))return r.close();const o=n.offsetWidth,c=n.offsetHeight;if(!e||e instanceof HTMLElement){const g=e??this;if(!g)return;const i=g.getBoundingClientRect(),a={middle(f){t.origin[0]="center",t.left=i.left-(o-i.width)/2;const m=()=>(t.top=i.top+i.height,t.origin[1]="top",t.top+c>innerHeight),u=()=>(t.top=i.top-c,t.origin[1]="bottom",t.top<0);t.left<0&&(t.left=i.left,t.origin[0]="left"),t.left+o>innerWidth&&(t.left=i.left+i.width-o,t.origin[0]="right"),f==="top"&&u()&&m(),f==="bottom"&&m()&&u()},left(){return t.origin=["right","top"],t.left=i.left-o,t.top=i.top,t.left<0},right(){return t.origin=["left","top"],t.left=i.left+i.width,t.top=i.top,t.left+o>innerWidth}};switch(this.align){case"bottom":case"top":a.middle(this.align);break;case"left":a.left()&&a.right();break;case"right":a.right()&&a.left();break}}else t.top=e.y,t.left=e.x,t.origin=e.origin?.split(" ")??["left","top"],e.x+o>innerWidth&&(t.left=e.x-o,t.origin[0]="right"),e.y+c>innerHeight&&(t.top=e.y-c,t.origin[1]="bottom");n.style.transformOrigin=t.origin.join(" "),n.style.top=`${Math.max(t.top,0)}px`,n.style.left=`${Math.max(t.left,0)}px`;const x=n.animate({transform:["scale(.9)","scale(1)"],opacity:[0,1]},h());this.setAttribute("showed",""),x.finished.then(()=>this.dispatchEvent(new Event("showed")))},s=()=>{if(!this.isConnected||!r.open||n.getAnimations().length>0||!this.dispatchEvent(new Event("close",{cancelable:!0})))return;const e=n.animate({transform:["scale(1)","scale(.9)"],opacity:[1,0]},h());this.removeAttribute("showed"),e.finished.then(()=>{r.close(),this.dispatchEvent(new Event("closed"))})},v=e=>r.open?s():d(e);return l.querySelector("slot[name=trigger]").addEventListener("click",()=>d()),l.querySelector(".scrim").addEventListener("pointerdown",s),{expose:{show:d,toggle:v,close:s},onMounted:()=>addEventListener("resize",s),onUnmounted:()=>removeEventListener("resize",s)}}}){}b.define(E);export{b as Popup};
+ //# sourceMappingURL=popup.js.map

src/App.vue

@@ -108,15 +108,6 @@ s-page {
   overflow: hidden;
 }
 
-.plot-data.add-data {
-  position: relative;
-  padding-top: 15px;
-  padding-bottom: 15px;
-  margin-bottom: 50px;
-  display: flex;
-  gap: 5px;
-}
-
 .data-import {
   position: absolute;
   bottom: 20px;

src/consts.ts

@@ -3,7 +3,7 @@ import type {
   FunctionPlotDatum,
   FunctionPlotOptions,
 } from "function-plot";
-import { cloneDeep } from "lodash-es";
+import cloneDeep from "lodash-es/cloneDeep";
 
 export type ValueLabel = { value: string; label: string; default?: boolean };
 
@@ -75,8 +75,8 @@ export type FnType = {
 };
 
 export type InternalDatum = Omit<FunctionPlotDatum, "fnType" | "graphType"> & {
-  fnType: "text" | FunctionPlotDatum["fnType"];
-  graphType: FunctionPlotDatum["graphType"];
+  fnType: "text" | NonNullable<FunctionPlotDatum["fnType"]>;
+  graphType: NonNullable<FunctionPlotDatum["graphType"]>;
   key: number;
   hidden?: boolean;
 };
@@ -105,7 +105,8 @@ export function toOriginalDatum(items: InternalDatum[], forExport?: boolean) {
     const graphType = item.graphType;
     const graphTypeObj = getAllowedGraphType(fnType).find(
       (item) => item.value === graphType
-    )!;
+    );
+    if (!graphTypeObj) throw new Error("graphType not found: " + graphType);
     if (getFnType(fnType).default) {
       delete (<any>item).fnType;
     }
@@ -150,10 +151,11 @@ export const getFnType = (fnType: string = "linear") =>
   <FnType>fnTypeArr.find(({ value }) => value === fnType);
 
 /** graphType 字段选项 */
-export const getAllowedGraphType = (fnType?: string) =>
-  fnType
-    ? (fnTypeArr.find(({ value }) => value === fnType)?.allowedGraphType ?? [])
-    : [];
+export const getAllowedGraphType = (fnType: string) => {
+  const fnTypeObj = fnTypeArr.find(({ value }) => value === fnType);
+  if (!fnTypeObj) throw new Error("fnType not found: " + fnType);
+  return fnTypeObj.allowedGraphType;
+};
 
 export const fnTypeArr = [
   {

src/editor/annotation.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="plot-data annotation">
     <div class="selectors">
-      <s-segmented-button v-model.lazy="props.annotation.axis">
-        <s-segmented-button-item value="y">{{
-          t("annotation.horizontal")
-        }}</s-segmented-button-item>
+      <s-segmented-button v-model.lazy="self.variable">
+        <s-segmented-button-item value="y">
+          {{ t("annotation.horizontal") }}
+        </s-segmented-button-item>
         <s-segmented-button-item value="x">
           {{ t("annotation.vertical") }}
         </s-segmented-button-item>
@@ -19,7 +19,7 @@
           >
             <SIconDelete />
           </s-icon-button>
-          {{ t("buttons.del") }}
+          {{ t("annotation.topButton.delete") }}
         </s-tooltip>
         <s-tooltip>
           <s-icon-button
@@ -29,108 +29,151 @@
           >
             <SIconTextfield />
           </s-icon-button>
-          {{ t("annotation.text") }}
+          {{ t(`annotation.topButton.${showText ? "remove" : "add"}Text`) }}
         </s-tooltip>
         <span class="annotation-drag drag-icon">
           <SIconDrag />
         </span>
       </div>
     </div>
 
-    <div class="annotation-texts" :class="{ showText }">
-      <s-text-field
-        class="styled annotation-value"
-        type="number"
-        v-model="props.annotation.value"
-        :label="props.annotation.axis + '='"
-      ></s-text-field>
+    <div class="annotation-fields" :class="{ showText }">
+      <div class="label-and-value">
+        <span class="label styled"> {{ self.variable + "=" }} </span>
+        <s-text-field
+          class="styled-inner value"
+          type="number"
+          v-model="self.value"
+          :label="t('annotation.value')"
+          @blur="handleValueBlur"
+        ></s-text-field>
+      </div>
       <Transition name="anntextslide">
         <s-text-field
           v-if="showText"
-          class="annotation-textfield"
+          class="text"
           :label="t('annotation.text')"
-          v-model="props.annotation.text"
+          v-model="self.text"
         ></s-text-field>
       </Transition>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { InternalAnnotation } from "@/consts";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n();
+import { I18nSchema } from "@/i18n";
+const { t } = useI18n<{ message: I18nSchema }>();
+
+import SIconDelete from "@/ui/icons/delete.vue";
+import SIconDrag from "@/ui/icons/drag.vue";
+import SIconTextfield from "@/ui/icons/textfield.vue";
+
+import { useProfile } from "@/states";
+import { PrivateAnnotation } from "@/types/annotation";
+
+import { ref, toRef, watch } from "vue";
 
+const profile = useProfile();
 const props = defineProps<{
   index: number;
-  annotation: InternalAnnotation;
+  self: PrivateAnnotation;
 }>();
+const self = toRef(props, "self");
+
+const showText = ref(self.value.text !== "");
+watch(showText, (value) => {
+  if (!value) self.value.text = "";
+});
 
 import emitter from "@/mitt";
-import { ref, watch } from "vue";
-watch([() => props.annotation.axis, () => props.annotation.text], () =>
+
+watch([() => self.value.variable, () => self.value.text], () =>
   emitter.emit("require-full-update", "annotations axis change")
 );
 
-import SIconDelete from "@/ui/icons/delete.vue";
-import SIconDrag from "@/ui/icons/drag.vue";
-import SIconTextfield from "@/ui/icons/textfield.vue";
+function handleValueBlur() {
+  self.value.value = Number(self.value.value);
+}
 
-import { useProfile } from "@/states";
-const profile = useProfile();
+import { Snackbar } from "sober";
 function deleteAnnotation() {
-  emitter.emit("require-full-update", "annotations axis change");
+  const backup = props.self;
   profile.annotations.splice(props.index, 1);
+  emitter.emit("require-full-update", "annotations axis change");
+  profile.datum.splice(props.index, 1);
+  Snackbar.builder({
+    text: t("editor.delete.success"),
+    action: {
+      text: t("editor.delete.undo"),
+      click: () => {
+        profile.annotations.splice(props.index, 0, backup);
+        emitter.emit("require-full-update", "annotations axis change");
+      },
+    },
+  });
 }
-
-const showText = ref(props.annotation.text !== "");
-
-watch(showText, (value) => {
-  if (!value) props.annotation.text = "";
-});
 </script>
 
-<style>
+<style lang="scss">
 .plot-data.annotation {
   display: flex;
   flex-direction: column;
 }
-.annotation-value {
-  font-size: 20px;
-}
-.annotation-textfield {
-  font-size: 16px;
-}
-.annotation-texts {
+
+.annotation-fields {
   display: flex;
+  align-items: center;
   gap: 10px;
   padding-top: 8px;
   overflow: hidden;
-}
-.annotation-texts s-text-field {
-  width: 0;
-  flex-grow: 1;
-}
-</style>
 
-<style>
-.anntextslide-enter-from,
-.anntextslide-leave-to {
-  flex-grow: 0 !important;
-  margin-left: -10px;
+  s-text-field {
+    width: 0;
+    flex-grow: 1;
+  }
+  .label-and-value {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    gap: 3px;
+    .label {
+      font-size: 25px;
+      width: 1.9em;
+      text-align: right;
+      margin-bottom: -0.1em;
+    }
+    .value {
+      font-size: 22px;
+    }
+  }
+  .text {
+    font-size: 16px;
+    flex-grow: 2;
+  }
 }
 
-.anntextslide-leave-active {
-  transition:
-    flex-grow var(--s-motion-duration-medium1) var(--s-motion-easing-emphasized),
-    margin-left var(--s-motion-duration-medium1)
-      var(--s-motion-easing-emphasized) 0.2s;
-}
+.anntextslide {
+  &-enter-from,
+  &-leave-to {
+    flex-grow: 0 !important;
+    margin-left: -10px;
+  }
+
+  &-leave-active {
+    transition:
+      flex-grow var(--s-motion-duration-medium1)
+        var(--s-motion-easing-emphasized),
+      margin-left var(--s-motion-duration-medium1)
+        var(--s-motion-easing-emphasized) 0.2s;
+  }
 
-.anntextslide-enter-active {
-  transition:
-    flex-grow var(--s-motion-duration-medium1) var(--s-motion-easing-emphasized),
-    margin-left var(--s-motion-duration-medium1)
-      var(--s-motion-easing-emphasized);
+  &-enter-active {
+    transition:
+      flex-grow var(--s-motion-duration-medium1)
+        var(--s-motion-easing-emphasized),
+      margin-left var(--s-motion-duration-medium1)
+        var(--s-motion-easing-emphasized);
+  }
 }
 </style>