fix: 修改画布尺寸变化监听

src/views/designer/component/Scaleplate.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="scaleplate">
+  <div class="scaleplate" id="scaleplate">
     <!-- 显示/隐藏参考线 -->
     <div class="refer-line-img" @click="showReferLine = !showReferLine">
       <EyeFilled v-if="showReferLine" />
@@ -39,11 +39,15 @@
       v-for="item in stageStore.getReferLines"
       v-show="showReferLine"
       :key="item.key"
-      :style="{left: item.x + 'px', top: item.y + 'px'}"
+      :style="{ left: item.x + 'px', top: item.y + 'px' }"
       :class="item.type === 'horizontal' ? 'refer-line-h' : 'refer-line-v'"
       @dblclick="projectStore.removeReferLine(item.key)"
     >
-      <UseDraggable @move="(position, event) => handleDragReferLine(position, event, item.key)">
+      <UseDraggable
+        @move="
+          (position, event) => handleDragReferLine(position, event, item.key)
+        "
+      >
         <span class="refer-line__txt">{{ item.value }}px</span>
         <span class="refer-line__line"></span>
       </UseDraggable>
@@ -54,7 +58,10 @@
       :class="
         virtualReferLine.type === 'horizontal' ? 'refer-line-h' : 'refer-line-v'
       "
-      :style="{left: virtualReferLine.x + 'px', top: virtualReferLine.y + 'px'}"
+      :style="{
+        left: virtualReferLine.x + 'px',
+        top: virtualReferLine.y + 'px',
+      }"
       v-show="virtualReferLine.type"
     >
       <span class="refer-line__txt">{{ virtualReferLine.value }}px</span>
@@ -64,13 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  onMounted,
-  ref,
-  onBeforeUnmount,
-  nextTick,
-  watch,
-} from "vue";
+import { onMounted, ref, onBeforeUnmount, nextTick, watch } from "vue";
 import type { Ref } from "vue";
 import { EyeFilled, EyeInvisibleFilled } from "@ant-design/icons-vue";
 import { UseDraggable } from "@vueuse/components";
@@ -129,14 +130,17 @@ const virtualReferLine: Ref<ReferLine> = ref({
   type: null,
 });
 /* 临时参考线位置 */
-const handleMouseMoveHScaleplate = (e: MouseEvent, type: "horizontal" | "vertical") => {
+const handleMouseMoveHScaleplate = (
+  e: MouseEvent,
+  type: "horizontal" | "vertical"
+) => {
   const { offsetX, offsetY } = e;
   const { scale, originX, originY, scrollX, scrollY } = stageStore;
 
   virtualReferLine.value.x = type === "horizontal" ? offsetX + 20 : 0;
   virtualReferLine.value.y = type === "vertical" ? offsetY + 20 : 0;
   // 计算当前位置数值
-  if(type === "horizontal") {
+  if (type === "horizontal") {
     const offset = scrollX - originX;
     virtualReferLine.value.value = Math.round((offset + offsetX) / scale);
   } else {
@@ -146,7 +150,7 @@ const handleMouseMoveHScaleplate = (e: MouseEvent, type: "horizontal" | "vertica
 };
 /* 添加参考线 */
 const handleAddReferLine = () => {
-  if(!virtualReferLine.value.type) return;
+  if (!virtualReferLine.value.type) return;
 
   projectStore.addReferLine({
     ...virtualReferLine.value,
@@ -154,14 +158,18 @@ const handleAddReferLine = () => {
   });
 };
 /* 拖拽参考线 */
-const handleDragReferLine = ({x, y}: {x: number, y: number}, e: PointerEvent, key: number) => {
+const handleDragReferLine = (
+  { x, y }: { x: number; y: number },
+  e: PointerEvent,
+  key: number
+) => {
   const referLine = projectStore.referLines.find((item) => item.key === key);
-  if(!referLine) return;
+  if (!referLine) return;
 
   const { scale, originX, originY, scrollX, scrollY } = stageStore;
-  const {left, top} = horizontalRef.value!.getBoundingClientRect();
+  const { left, top } = horizontalRef.value!.getBoundingClientRect();
 
-  if(referLine.type === "horizontal") {
+  if (referLine.type === "horizontal") {
     const lineX = x - left + 20;
     const offsetX = scrollX - originX;
 
@@ -179,7 +187,6 @@ const handleDragReferLine = ({x, y}: {x: number, y: number}, e: PointerEvent, ke
 };
 /* ===============================参考线结束================================= */
 
-
 /* 设置刻度宽高 */
 const setWindowSize = async () => {
   windowSize.value = {
@@ -191,19 +198,32 @@ const setWindowSize = async () => {
 };
 
 watch(
-  () => [stageStore.scrollX, stageStore.scrollY, stageStore.scale],
+  () => [
+    stageStore.scrollX,
+    stageStore.scrollY,
+    stageStore.scale,
+    stageStore.viewportHeight,
+    stageStore.viewportWidth,
+  ],
   () => {
     handleDrawScaleplate();
   },
   { immediate: false }
 );
 
+let observer: ResizeObserver;
 onMounted(() => {
   setWindowSize();
-  addEventListener("resize", setWindowSize);
+
+  observer = new ResizeObserver(setWindowSize);
+  /* 监听画布尺寸变化 */
+  const element = document.getElementsByClassName('workspace-wrapper')?.[0];
+  if(element) {
+    observer.observe(element);
+  }
 });
 onBeforeUnmount(() => {
-  removeEventListener("resize", setWindowSize);
+  observer.disconnect();
 });
 </script>