openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
KuroSago 2025-05-14 10:21:36 +08:00
parent c7ac1b00df
commit 7534f71dd9
1 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
web3/packages/mind-map/src/components/MindMap.vue
View File

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