no message

web3/packages/mind-map/src/components/MindMap.vue

@@ -8,9 +8,9 @@
     @mousedown="onMousedown"
     @mousemove="onMousemove"
   >
-  <!-- <span>svgBoxScale:{{ svgBoxScale }}</span> -->
-  <span>svgBoxLeft:{{ svgBoxLeft }}</span>
-  <span>svgBoxTop:{{ svgBoxTop }}</span>
+    <span>svgBoxScale:{{ svgBoxScale }}</span>
+    <span>svgBoxLeft:{{ svgBoxLeft }}</span>
+    <span>svgBoxTop:{{ svgBoxTop }}</span>
     <div
       class="svgBox"
       ref="svgBoxRef"
@@ -36,19 +36,28 @@
 import { ref, onMounted, onUnmounted, computed, nextTick, watch } from "vue";
 import { useMindMapStore } from "../index";
 import { storeToRefs } from "pinia";
+import { throttle, debounce } from 'simple-mind-map/src/utils';
 
 const mindMapStore = useMindMapStore();
 
 const { getMindMapInstance } = mindMapStore;
 const { isDark, showMiniMap } = storeToRefs(mindMapStore);
 
-//     oldInstance.off("data_change", data_change);
-//     oldInstance.off(
-//       "mini_map_view_box_position_change",
-//       onViewBoxPositionChange
-//     );
+// 使用防抖函数处理画布更新
+const debouncedDrawMiniMap = debounce(() => {
+  drawMiniMap();
+}, 500);
 
-const timer = ref(null);
+// 使用防抖函数处理窗口大小变化
+const debouncedSetSize = debounce(() => {
+  width.value = Math.min(window.innerWidth - 80, 370);
+  nextTick(() => {
+    if (showMiniMap.value && navigatorBoxRef.value) {
+      init();
+      drawMiniMap();
+    }
+  });
+}, 300);
 
 const boxWidth = ref(0);
 const boxHeight = ref(0);
@@ -68,13 +77,12 @@ const viewBoxStyle = ref({
 const mindMapImg = ref("");
 
 const width = ref(0);
-const setSizeTimer = ref(null);
 const withTransition = ref(true);
 
 const navigatorBoxRef = ref(null);
 const svgBoxRef = ref(null);
 
-function init() {
+async function init() {
   if (!navigatorBoxRef.value) return;
   const rect = navigatorBoxRef.value.getBoundingClientRect();
   // console.log("rect", rect);
@@ -82,6 +90,8 @@ function init() {
   boxWidth.value = rect.width;
   boxHeight.value = rect.height;
 
+  await nextTick();
+
   const mindMapInstance = getMindMapInstance();
 
   // data_change
@@ -117,7 +127,7 @@ function drawMiniMap() {
     boxWidth.value,
     boxHeight.value
   );
-  
+
   if (!calculationResult) return;
 
   const {
@@ -128,20 +138,18 @@ function drawMiniMap() {
     miniMapBoxTop,
   } = calculationResult;
 
-  if (getImgUrl && typeof getImgUrl === "function")
+  getImgUrl &&
     getImgUrl((img) => {
       mindMapImg.value = img;
     });
 
-  if (newViewBoxStyle) viewBoxStyle.value = newViewBoxStyle;
+  viewBoxStyle.value = newViewBoxStyle;
 
-  console.log('miniMapBoxScale ===>>' , miniMapBoxScale)
+  svgBoxScale.value = miniMapBoxScale;
 
-  if (miniMapBoxScale) svgBoxScale.value = miniMapBoxScale;
+  svgBoxLeft.value = miniMapBoxLeft;
 
-  if (miniMapBoxLeft) svgBoxLeft.value = miniMapBoxLeft;
-
-  if (miniMapBoxTop) svgBoxTop.value = miniMapBoxTop;
+  svgBoxTop.value = miniMapBoxTop;
 }
 
 watch(
@@ -158,23 +166,11 @@ watch(
 
 function data_change() {
   if (!showMiniMap.value) return;
-  clearTimeout(timer.value);
-  timer.value = setTimeout(() => {
-    drawMiniMap();
-  }, 500);
+  debouncedDrawMiniMap();
 }
 
 function setSize() {
-  clearTimeout(setSizeTimer.value);
-  setSizeTimer.value = setTimeout(() => {
-    width.value = Math.min(window.innerWidth - 80, 370);
-    nextTick(() => {
-      if (showMiniMap.value && navigatorBoxRef.value) {
-        init();
-        drawMiniMap();
-      }
-    });
-  }, 300);
+  debouncedSetSize();
 }
 
 function onMousedown(e) {
@@ -263,8 +259,8 @@ onUnmounted(() => {
     );
   }
 
-  clearTimeout(timer.value);
-  clearTimeout(setSizeTimer.value);
+  debouncedDrawMiniMap.cancel && debouncedDrawMiniMap.cancel();
+  debouncedSetSize.cancel && debouncedSetSize.cancel();
 });
 </script>