优化图像长宽获取模式

Author: Linho1219

src/App.vue

@@ -43,7 +43,7 @@ import { useWindowSize } from "@vueuse/core";
 const { width: windowWidth } = useWindowSize();
 const toSize = (percent: number) => (percent / 100) * windowWidth.value;
 
-const drawerMinSize = computed(() => 450);
+const drawerMinSize = computed(() => 460);
 const drawerMaxSize = computed(() => toSize(75));
 
 const restrictRange = (x: number) =>

src/graph/graph.vue

@@ -30,18 +30,14 @@ import { onMounted, onUnmounted, ref, watch, WatchHandle } from "vue";
 import { throttle } from "lodash-es";
 import type { FunctionPlotDatum } from "function-plot";
 import { getFnType } from "../consts";
-const { width, height } = defineProps<{
-  width: number;
-  height: number;
-}>();
 
 import { useProfile } from "@/states";
 const profile = useProfile();
 
 import emitter from "@/mitt";
 const fullUpdateState = defineModel<boolean>();
 
-const plotRef = ref<HTMLDivElement | null>(null);
+const plotRef = ref<HTMLDivElement>();
 const errorMsg = ref<string | undefined>(undefined);
 
 function findError(graphData: FunctionPlotDatum[]) {
@@ -54,6 +50,9 @@ function findError(graphData: FunctionPlotDatum[]) {
   return 0;
 }
 
+import { useElementSize } from "@vueuse/core";
+const { width, height } = useElementSize(plotRef);
+
 let unwatchHandler: WatchHandle | null = null;
 const emit = defineEmits(["require-post-update"]);
 import functionPlot from "function-plot";
@@ -71,8 +70,8 @@ onMounted(() => {
       functionPlot({
         target: plotRef.value,
         data: graphData,
-        width: width - 20,
-        height: height - 20,
+        width: width.value,
+        height: height.value,
         annotations: profile.getOriginalAnnotaion(),
         ...profile.getOriginalOptions(),
       });
@@ -85,8 +84,8 @@ onMounted(() => {
       if (!fullUpdateState.value) emitter.emit("require-full-update", "error");
       errorMsg.value = (e as Error).message;
     }
-  }, 200);
-  unwatchHandler = watch([() => width, () => height, profile], handleUpdate, {
+  }, 250);
+  unwatchHandler = watch([width, height, profile], handleUpdate, {
     immediate: true,
   });
 });
@@ -99,12 +98,10 @@ onUnmounted(() => {
 <style>
 #graphRender {
   position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  width: fit-content;
-  height: fit-content;
+  top: 10px;
+  right: 10px;
+  left: 10px;
+  bottom: 10px;
   margin: auto;
   color: black;
   user-select: none;

src/graph/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div id="graph" ref="shellRef">
     <Graph
-      :width="graphWidth"
-      :height="graphHeight"
       :key="graphKey"
       v-model="fullUpdateState"
       @require-post-update="handlePostUpdate"
@@ -12,27 +10,13 @@
 
 <script setup lang="ts">
 import Graph from "./graph.vue";
-import { onMounted, ref } from "vue";
-import { throttle } from "lodash-es";
+import { ref } from "vue";
 
-const graphWidth = ref(0),
-  graphHeight = ref(0);
 const graphKey = ref(0);
 const fullUpdateState = ref(false);
-
 const shellRef = ref<HTMLDivElement>();
-onMounted(() => {
-  const observer = new ResizeObserver(
-    throttle(() => {
-      graphWidth.value = shellRef.value!.clientWidth;
-      graphHeight.value = shellRef.value!.clientHeight;
-    }, 180)
-  );
-  observer.observe(shellRef.value!);
-});
 
 import emitter from "@/mitt";
-
 emitter.on("require-full-update", (str) => {
   fullUpdateState.value = true;
   graphKey.value++;