no message
This commit is contained in:
parent
7534f71dd9
commit
43ea54e0a3
0
.editorconfig
Normal file
0
.editorconfig
Normal file
0
.prettierrc
Normal file
0
.prettierrc
Normal file
24
.vscode/settings.json
vendored
Normal file
24
.vscode/settings.json
vendored
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user