no message

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": null,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.tabSize": 2,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true,
+    "source.fixAll.eslint": true
+  }
+}

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

@@ -1,3 +1,208 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick, Ref } from "vue";
+import { useMindMapStore } from "../index";
+import { storeToRefs } from "pinia";
+import { debounce } from "simple-mind-map/src/utils";
+
+const mindMapStore = useMindMapStore();
+
+const { getMindMapInstance } = mindMapStore;
+const { isDark, showMiniMap } = storeToRefs(mindMapStore);
+
+// 使用防抖函数处理画布更新
+const debouncedDrawMiniMap = debounce(() => {
+  drawMiniMap();
+}, 500);
+
+// 使用防抖函数处理窗口大小变化
+const debouncedSetSize = debounce(() => {
+  width.value = Math.min(window.innerWidth - 80, 370);
+  nextTick(() => {
+    if (showMiniMap.value && navigatorBoxRef.value) {
+      init();
+      drawMiniMap();
+    }
+  });
+}, 300);
+
+const svgBoxScale = ref(1);
+
+const svgBoxLeft = ref(0);
+const svgBoxTop = ref(0);
+
+const viewBoxStyle = ref({
+  left: "0px", // 确保初始值为字符串以匹配后续更新
+  top: "0px",
+  bottom: "0px",
+  right: "0px",
+});
+
+const mindMapImg = ref("");
+
+const width = ref(0);
+const withTransition = ref(true);
+
+const navigatorBoxRef: Ref<HTMLElement | null> = ref(null);
+const svgBoxRef = ref(null);
+
+async function init() {
+  await nextTick();
+
+  const mindMapInstance = getMindMapInstance();
+
+  // mini_map_view_box_position_change
+  mindMapInstance?.on("mini_map_view_box_position_change", (e) => {
+    onViewBoxPositionChange(e);
+  });
+
+  // view_data_change
+  mindMapInstance?.on("view_data_change", dataChange);
+
+  //node_tree_render_end
+  mindMapInstance?.on("node_tree_render_end", dataChange);
+
+  // toggle_mini_map
+  mindMapInstance?.on("toggle_mini_map", (show: boolean) => {
+    showMiniMap.value = show;
+  });
+
+  // data_change
+  mindMapInstance?.on("data_change", dataChange);
+}
+
+function drawMiniMap() {
+  const mindMapInstance = getMindMapInstance();
+
+  if (!mindMapInstance || !mindMapInstance?.miniMap) return;
+
+  if (!navigatorBoxRef.value) return;
+  const rect = navigatorBoxRef.value.getBoundingClientRect();
+
+  const calculationResult = mindMapInstance?.miniMap?.calculationMiniMap(
+    rect.width,
+    rect.height
+  );
+
+  if (!calculationResult) return;
+
+  console.log("calculationResult", calculationResult);
+
+  const {
+    getImgUrl,
+    viewBoxStyle: newViewBoxStyle,
+    miniMapBoxScale,
+    miniMapBoxLeft,
+    miniMapBoxTop,
+  } = calculationResult;
+
+  getImgUrl &&
+    getImgUrl((img: string) => {
+      mindMapImg.value = img;
+    });
+
+  viewBoxStyle.value = newViewBoxStyle;
+  svgBoxScale.value = miniMapBoxScale;
+  svgBoxLeft.value = miniMapBoxLeft;
+  svgBoxTop.value = miniMapBoxTop;
+}
+
+function dataChange() {
+  if (!showMiniMap.value) return;
+  debouncedDrawMiniMap();
+}
+
+function setSize() {
+  debouncedSetSize();
+}
+
+function onMousedown(e) {
+  const mindMapInstance = getMindMapInstance();
+  if (
+    mindMapInstance &&
+    mindMapInstance?.miniMap &&
+    typeof mindMapInstance?.miniMap?.onMousedown === "function"
+  ) {
+    mindMapInstance?.miniMap?.onMousedown(e);
+  }
+}
+
+function onMousemove(e) {
+  const mindMapInstance = getMindMapInstance();
+  if (
+    mindMapInstance &&
+    mindMapInstance?.miniMap &&
+    typeof mindMapInstance?.miniMap?.onMousemove === "function"
+  ) {
+    mindMapInstance?.miniMap?.onMousemove(e);
+  }
+}
+
+function onMouseup(e) {
+  if (!withTransition.value) withTransition.value = true;
+
+  const mindMapInstance = getMindMapInstance();
+
+  if (
+    mindMapInstance &&
+    mindMapInstance?.miniMap &&
+    typeof mindMapInstance?.miniMap?.onMouseup === "function"
+  ) {
+    mindMapInstance?.miniMap?.onMouseup(e);
+  }
+}
+
+function onViewBoxMousedown(e) {
+  const mindMapInstance = getMindMapInstance();
+  if (
+    mindMapInstance &&
+    mindMapInstance?.miniMap &&
+    typeof mindMapInstance?.miniMap?.onViewBoxMousedown === "function"
+  ) {
+    mindMapInstance?.miniMap?.onViewBoxMousedown(e);
+  }
+}
+
+function onViewBoxMousemove(e) {
+  const mindMapInstance = getMindMapInstance();
+  if (
+    mindMapInstance &&
+    mindMapInstance?.miniMap &&
+    typeof mindMapInstance?.miniMap?.onViewBoxMousemove === "function"
+  ) {
+    mindMapInstance?.miniMap?.onViewBoxMousemove(e);
+  }
+}
+
+function onViewBoxPositionChange({ left, right, top, bottom }) {
+  withTransition.value = false;
+  viewBoxStyle.value.left = left;
+  viewBoxStyle.value.right = right;
+  viewBoxStyle.value.top = top;
+  viewBoxStyle.value.bottom = bottom;
+}
+
+onMounted(() => {
+  setSize();
+  window.addEventListener("resize", setSize);
+  window.addEventListener("mouseup", onMouseup);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", setSize);
+  window.removeEventListener("mouseup", onMouseup);
+
+  const mindMapInstance = getMindMapInstance();
+
+  if (mindMapInstance && typeof mindMapInstance?.off === "function") {
+    mindMapInstance?.off("data_change", dataChange);
+    mindMapInstance?.off(
+      "mini_map_view_box_position_change",
+      onViewBoxPositionChange
+    );
+  }
+});
+</script>
+
 <template>
   <div
     v-if="showMiniMap"
@@ -32,239 +237,11 @@
   </div>
 </template>
 
-<script setup>
-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);
-
-// 使用防抖函数处理画布更新
-const debouncedDrawMiniMap = debounce(() => {
-  drawMiniMap();
-}, 500);
-
-// 使用防抖函数处理窗口大小变化
-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);
-
-const svgBoxScale = ref(1);
-
-const svgBoxLeft = ref(0);
-const svgBoxTop = ref(0);
-
-const viewBoxStyle = ref({
-  left: "0px", // 确保初始值为字符串以匹配后续更新
-  top: "0px",
-  bottom: "0px",
-  right: "0px",
-});
-
-const mindMapImg = ref("");
-
-const width = ref(0);
-const withTransition = ref(true);
-
-const navigatorBoxRef = ref(null);
-const svgBoxRef = ref(null);
-
-async function init() {
-  if (!navigatorBoxRef.value) return;
-  const rect = navigatorBoxRef.value.getBoundingClientRect();
-  // console.log("rect", rect);
-
-  boxWidth.value = rect.width;
-  boxHeight.value = rect.height;
-
-  await nextTick();
-
-  const mindMapInstance = getMindMapInstance();
-
-  // data_change
-  mindMapInstance.on("data_change", data_change);
-  // mini_map_view_box_position_change
-  mindMapInstance.on("mini_map_view_box_position_change", (e) => {
-    onViewBoxPositionChange(e);
-  });
-  // view_data_change
-  mindMapInstance.on("view_data_change", data_change);
-  //node_tree_render_end
-  mindMapInstance.on("node_tree_render_end", data_change);
-  // data_change
-  mindMapInstance.on("data_change", data_change);
-  // toggle_mini_map
-  mindMapInstance.on("toggle_mini_map", (show) => {
-    showMiniMap.value = show;
-  });
-}
-
-function drawMiniMap() {
-  const mindMapInstance = getMindMapInstance();
-
-  if (
-    !mindMapInstance ||
-    !mindMapInstance.miniMap ||
-    !boxWidth.value ||
-    !boxHeight.value
-  )
-    return;
-
-  const calculationResult = mindMapInstance.miniMap.calculationMiniMap(
-    boxWidth.value,
-    boxHeight.value
-  );
-
-  if (!calculationResult) return;
-
-  const {
-    getImgUrl,
-    viewBoxStyle: newViewBoxStyle,
-    miniMapBoxScale,
-    miniMapBoxLeft,
-    miniMapBoxTop,
-  } = calculationResult;
-
-  getImgUrl &&
-    getImgUrl((img) => {
-      mindMapImg.value = img;
-    });
-
-  viewBoxStyle.value = newViewBoxStyle;
-
-  svgBoxScale.value = miniMapBoxScale;
-
-  svgBoxLeft.value = miniMapBoxLeft;
-
-  svgBoxTop.value = miniMapBoxTop;
-}
-
-watch(
-  () => showMiniMap.value,
-  (isShown) => {
-    if (!isShown) return;
-    nextTick(() => {
-      navigatorBoxRef.value && init();
-      svgBoxRef.value && drawMiniMap();
-    });
-  },
-  { immediate: true }
-);
-
-function data_change() {
-  if (!showMiniMap.value) return;
-  debouncedDrawMiniMap();
-}
-
-function setSize() {
-  debouncedSetSize();
-}
-
-function onMousedown(e) {
-  const mindMapInstance = getMindMapInstance();
-  if (
-    mindMapInstance &&
-    mindMapInstance.miniMap &&
-    typeof mindMapInstance.miniMap.onMousedown === "function"
-  ) {
-    mindMapInstance.miniMap.onMousedown(e);
-  }
-}
-
-function onMousemove(e) {
-  const mindMapInstance = getMindMapInstance();
-  if (
-    mindMapInstance &&
-    mindMapInstance.miniMap &&
-    typeof mindMapInstance.miniMap.onMousemove === "function"
-  ) {
-    mindMapInstance.miniMap.onMousemove(e);
-  }
-}
-
-function onMouseup(e) {
-  if (!withTransition.value) withTransition.value = true;
-
-  const mindMapInstance = getMindMapInstance();
-
-  if (
-    mindMapInstance &&
-    mindMapInstance.miniMap &&
-    typeof mindMapInstance.miniMap.onMouseup === "function"
-  ) {
-    mindMapInstance.miniMap.onMouseup(e);
-  }
-}
-
-function onViewBoxMousedown(e) {
-  const mindMapInstance = getMindMapInstance();
-  if (
-    mindMapInstance &&
-    mindMapInstance.miniMap &&
-    typeof mindMapInstance.miniMap.onViewBoxMousedown === "function"
-  ) {
-    mindMapInstance.miniMap.onViewBoxMousedown(e);
-  }
-}
-
-function onViewBoxMousemove(e) {
-  const mindMapInstance = getMindMapInstance();
-  if (
-    mindMapInstance &&
-    mindMapInstance.miniMap &&
-    typeof mindMapInstance.miniMap.onViewBoxMousemove === "function"
-  ) {
-    mindMapInstance.miniMap.onViewBoxMousemove(e);
-  }
-}
-
-function onViewBoxPositionChange({ left, right, top, bottom }) {
-  withTransition.value = false;
-  viewBoxStyle.value.left = left;
-  viewBoxStyle.value.right = right;
-  viewBoxStyle.value.top = top;
-  viewBoxStyle.value.bottom = bottom;
-}
-
-onMounted(() => {
-  setSize();
-  window.addEventListener("resize", setSize);
-  window.addEventListener("mouseup", onMouseup);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", setSize);
-  window.removeEventListener("mouseup", onMouseup);
-
-  const mindMapInstance = getMindMapInstance();
-
-  if (mindMapInstance && typeof mindMapInstance.off === "function") {
-    mindMapInstance.off("data_change", data_change);
-    mindMapInstance.off(
-      "mini_map_view_box_position_change",
-      onViewBoxPositionChange
-    );
-  }
-
-  debouncedDrawMiniMap.cancel && debouncedDrawMiniMap.cancel();
-  debouncedSetSize.cancel && debouncedSetSize.cancel();
-});
-</script>
-
 <style lang="scss" scoped>
+.navigatorBox * {
+  margin: 0;
+  padding: 0;
+}
 .navigatorBox {
   position: absolute;
   height: 220px;

web3/packages/mind-map/src/components/ToolBar/LayoutGroup.vue

@@ -31,14 +31,11 @@ import { layoutGroupList } from "../../store/helpers/layoutGroupList";
 import { useMindMapStore } from "../../index";
 import { storeToRefs } from "pinia";
 
-// 使用单一store实例
 const store = useMindMapStore();
 const { useLayout } = store;
 const { currentLayout } = storeToRefs(store);
 
-
+onMounted(() => {});
-onMounted(() => {
-});
 </script>
 
 <style scoped></style>