no message
This commit is contained in:
parent
70dbe5b72b
commit
71acd3814b
@ -148,6 +148,15 @@ export default {
|
|||||||
getImgUrl(img => {
|
getImgUrl(img => {
|
||||||
this.mindMapImg = img
|
this.mindMapImg = img
|
||||||
})
|
})
|
||||||
|
|
||||||
|
console.log('viewBoxStyle', {
|
||||||
|
getImgUrl,
|
||||||
|
viewBoxStyle,
|
||||||
|
miniMapBoxScale,
|
||||||
|
miniMapBoxLeft,
|
||||||
|
miniMapBoxTop
|
||||||
|
})
|
||||||
|
|
||||||
this.viewBoxStyle = viewBoxStyle
|
this.viewBoxStyle = viewBoxStyle
|
||||||
this.svgBoxScale = miniMapBoxScale
|
this.svgBoxScale = miniMapBoxScale
|
||||||
this.svgBoxLeft = miniMapBoxLeft
|
this.svgBoxLeft = miniMapBoxLeft
|
||||||
|
|||||||
@ -9,7 +9,6 @@ const mindMapStore = useMindMapStore();
|
|||||||
const { getMindMapInstance } = mindMapStore;
|
const { getMindMapInstance } = mindMapStore;
|
||||||
const { isDark, showMiniMap } = storeToRefs(mindMapStore);
|
const { isDark, showMiniMap } = storeToRefs(mindMapStore);
|
||||||
|
|
||||||
// 使用防抖函数处理画布更新
|
|
||||||
const debouncedDrawMiniMap = debounce(
|
const debouncedDrawMiniMap = debounce(
|
||||||
() => {
|
() => {
|
||||||
drawMiniMap();
|
drawMiniMap();
|
||||||
@ -24,7 +23,6 @@ const debouncedSetSize = debounce(
|
|||||||
width.value = Math.min(window.innerWidth - 80, 370);
|
width.value = Math.min(window.innerWidth - 80, 370);
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
if (showMiniMap.value && navigatorBoxRef.value) {
|
if (showMiniMap.value && navigatorBoxRef.value) {
|
||||||
init();
|
|
||||||
drawMiniMap();
|
drawMiniMap();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -34,12 +32,11 @@ const debouncedSetSize = debounce(
|
|||||||
);
|
);
|
||||||
|
|
||||||
const svgBoxScale = ref(1);
|
const svgBoxScale = ref(1);
|
||||||
|
|
||||||
const svgBoxLeft = ref(0);
|
const svgBoxLeft = ref(0);
|
||||||
const svgBoxTop = ref(0);
|
const svgBoxTop = ref(0);
|
||||||
|
|
||||||
const viewBoxStyle = ref({
|
const viewBoxStyle = ref({
|
||||||
left: "0px", // 确保初始值为字符串以匹配后续更新
|
left: "0px",
|
||||||
top: "0px",
|
top: "0px",
|
||||||
bottom: "0px",
|
bottom: "0px",
|
||||||
right: "0px",
|
right: "0px",
|
||||||
@ -96,11 +93,9 @@ function drawMiniMap() {
|
|||||||
|
|
||||||
if (!calculationResult) return;
|
if (!calculationResult) return;
|
||||||
|
|
||||||
console.log("calculationResult", calculationResult);
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
getImgUrl,
|
getImgUrl,
|
||||||
viewBoxStyle: newViewBoxStyle,
|
viewBoxStyle: __viewBoxStyle,
|
||||||
miniMapBoxScale,
|
miniMapBoxScale,
|
||||||
miniMapBoxLeft,
|
miniMapBoxLeft,
|
||||||
miniMapBoxTop,
|
miniMapBoxTop,
|
||||||
@ -111,7 +106,7 @@ function drawMiniMap() {
|
|||||||
mindMapImg.value = img;
|
mindMapImg.value = img;
|
||||||
});
|
});
|
||||||
|
|
||||||
viewBoxStyle.value = newViewBoxStyle;
|
viewBoxStyle.value = __viewBoxStyle;
|
||||||
svgBoxScale.value = miniMapBoxScale;
|
svgBoxScale.value = miniMapBoxScale;
|
||||||
svgBoxLeft.value = miniMapBoxLeft;
|
svgBoxLeft.value = miniMapBoxLeft;
|
||||||
svgBoxTop.value = miniMapBoxTop;
|
svgBoxTop.value = miniMapBoxTop;
|
||||||
@ -202,7 +197,8 @@ function onViewBoxPositionChange({
|
|||||||
viewBoxStyle.value.bottom = bottom;
|
viewBoxStyle.value.bottom = bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(async () => {
|
||||||
|
await init();
|
||||||
setSize();
|
setSize();
|
||||||
window.addEventListener("resize", setSize);
|
window.addEventListener("resize", setSize);
|
||||||
window.addEventListener("mouseup", onMouseup);
|
window.addEventListener("mouseup", onMouseup);
|
||||||
@ -234,9 +230,9 @@ onUnmounted(() => {
|
|||||||
@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
|
||||||
class="svgBox"
|
class="svgBox"
|
||||||
ref="svgBoxRef"
|
ref="svgBoxRef"
|
||||||
@ -282,13 +278,12 @@ onUnmounted(() => {
|
|||||||
.svgBox {
|
.svgBox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
|
||||||
transform-origin: left top;
|
transform-origin: left top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.windowBox {
|
.windowBox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: 2px solid #ee4545;
|
border: 2px solid rgb(238, 69, 69);
|
||||||
background-color: rgba(238, 69, 69, 0.2);
|
background-color: rgba(238, 69, 69, 0.2);
|
||||||
|
|
||||||
&.withTransition {
|
&.withTransition {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user