307 lines
9.0 KiB
Vue
307 lines
9.0 KiB
Vue
<script setup lang="ts">
|
||
import SvgIcon from '@common/svg-icon.vue';
|
||
import type { EditorService } from '@core/editor.service';
|
||
import { useToolbar } from '@core/useToolbar';
|
||
import { computed, inject, type InjectionKey, onBeforeUnmount, onMounted, ref, type ShallowRef } from 'vue';
|
||
|
||
// 通用地图工具栏（右下角），临时中文按钮
|
||
// 功能：放大、缩小、适配视图、全屏、截图、网格（占位）
|
||
|
||
type Props = {
|
||
token: InjectionKey<ShallowRef<EditorService>>;
|
||
containerEl?: HTMLElement | null;
|
||
};
|
||
const props = defineProps<Props>();
|
||
|
||
const editorRef = inject(props.token)!;
|
||
|
||
const isFullscreen = computed(() => !!document.fullscreenElement);
|
||
|
||
// 使用 useToolbar 的相关能力（内部使用 jumpToPosition、修改 store 等）
|
||
const {
|
||
toggleGrid: _toggleGrid,
|
||
toggleRule: _toggleRule,
|
||
fitView: _fitView,
|
||
zoomIn: _zoomIn,
|
||
zoomOut: _zoomOut,
|
||
} = useToolbar();
|
||
|
||
const zoomIn = () => {
|
||
if (editorRef.value) _zoomIn(editorRef.value);
|
||
};
|
||
const zoomOut = () => {
|
||
if (editorRef.value) _zoomOut(editorRef.value);
|
||
};
|
||
const fitView = async () => {
|
||
if (editorRef.value) await _fitView(editorRef.value);
|
||
};
|
||
|
||
const toggleFullscreen = async () => {
|
||
try {
|
||
const el = props.containerEl || document.documentElement;
|
||
if (!document.fullscreenElement) {
|
||
await el.requestFullscreen?.();
|
||
} else {
|
||
await document.exitFullscreen?.();
|
||
}
|
||
} catch (e) {
|
||
console.warn('全屏切换失败', e);
|
||
}
|
||
};
|
||
|
||
const downloadBase64 = (base64: string, filename = 'map.png') => {
|
||
const a = document.createElement('a');
|
||
a.href = base64;
|
||
a.download = filename;
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
};
|
||
|
||
const exportImage = () => {
|
||
try {
|
||
const base64 = editorRef.value?.toPng?.(2);
|
||
if (base64) downloadBase64(base64, '地图截图.png');
|
||
} catch (e) {
|
||
console.warn('截图失败', e);
|
||
}
|
||
};
|
||
|
||
// 网格/标尺开关：调用 useToolbar 封装
|
||
const toggleGrid = () => editorRef.value && _toggleGrid(editorRef.value);
|
||
const toggleRule = () => editorRef.value && _toggleRule(editorRef.value);
|
||
|
||
// =============== 测量尺（像素距离） ===============
|
||
const measuring = ref(false);
|
||
const start = ref<{ x: number; y: number } | null>(null);
|
||
const end = ref<{ x: number; y: number } | null>(null);
|
||
const current = ref<{ x: number; y: number } | null>(null);
|
||
|
||
const distance = computed(() => {
|
||
const s = start.value;
|
||
const e = end.value || current.value;
|
||
if (!measuring.value || !s || !e) return 0;
|
||
const dx = e.x - s.x;
|
||
const dy = e.y - s.y;
|
||
return Math.sqrt(dx * dx + dy * dy);
|
||
});
|
||
|
||
const midpoint = computed(() => {
|
||
const s = start.value;
|
||
const e = end.value || current.value;
|
||
if (!measuring.value || !s || !e) return { x: 0, y: 0 };
|
||
return { x: (s.x + e.x) / 2, y: (s.y + e.y) / 2 };
|
||
});
|
||
|
||
const toggleMeasure = () => {
|
||
measuring.value = !measuring.value;
|
||
if (!measuring.value) {
|
||
// 退出时清空
|
||
start.value = null;
|
||
end.value = null;
|
||
current.value = null;
|
||
}
|
||
};
|
||
|
||
const onKeydown = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape') {
|
||
measuring.value = false;
|
||
start.value = null;
|
||
end.value = null;
|
||
current.value = null;
|
||
}
|
||
};
|
||
|
||
const onMouseDownOverlay = (e: MouseEvent) => {
|
||
if (!measuring.value) return;
|
||
const p = { x: e.clientX, y: e.clientY };
|
||
if (!start.value) {
|
||
start.value = p;
|
||
end.value = null;
|
||
current.value = null;
|
||
} else if (!end.value) {
|
||
end.value = p;
|
||
} else {
|
||
// 已有一段完成，继续点击则开始新的测量
|
||
start.value = p;
|
||
end.value = null;
|
||
current.value = null;
|
||
}
|
||
};
|
||
|
||
const onMouseMoveOverlay = (e: MouseEvent) => {
|
||
if (!measuring.value) return;
|
||
if (start.value && !end.value) {
|
||
current.value = { x: e.clientX, y: e.clientY };
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
window.addEventListener('keydown', onKeydown);
|
||
});
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener('keydown', onKeydown);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="map-toolbar">
|
||
<a-space size="small">
|
||
<a-button class="icon-btn tool-btn" size="small" :title="'放大'" @click="zoomIn">
|
||
<SvgIcon name="enlarge" :size="18" :forceColor="true" />
|
||
</a-button>
|
||
<a-button class="icon-btn tool-btn" size="small" :title="'缩小'" @click="zoomOut">
|
||
<SvgIcon name="shrink" :size="18" :forceColor="true" />
|
||
</a-button>
|
||
<!-- <a-button class="icon-btn tool-btn" size="small" :title="'适配视图'" @click="fitView"> 适配视图 </a-button> -->
|
||
<a-button
|
||
class="icon-btn tool-btn"
|
||
size="small"
|
||
type="primary"
|
||
:ghost="!measuring"
|
||
:class="{ measuring }"
|
||
@click="toggleMeasure"
|
||
:title="measuring ? '退出测量' : '测量尺'"
|
||
>
|
||
<SvgIcon name="rule" :size="16" :forceColor="true" :active="measuring" />
|
||
</a-button>
|
||
<a-button class="icon-btn tool-btn" size="small" :title="'标尺'" @click="toggleRule">标尺</a-button>
|
||
<a-button class="icon-btn tool-btn" size="small" :title="'网格'" @click="toggleGrid">网格</a-button>
|
||
<!-- <a-button class="icon-btn tool-btn" size="small" :title="'截图'" @click="exportImage">截图</a-button>
|
||
<a-button
|
||
class="icon-btn tool-btn"
|
||
size="small"
|
||
:title="isFullscreen ? '退出全屏' : '全屏'"
|
||
@click="toggleFullscreen"
|
||
>
|
||
{{ isFullscreen ? '退出全屏' : '全屏' }}
|
||
</a-button> -->
|
||
</a-space>
|
||
</div>
|
||
|
||
<!-- 测量叠加层（全屏SVG），仅在测量模式下启用点击事件 -->
|
||
<div
|
||
class="measure-overlay"
|
||
:class="{ active: measuring }"
|
||
@mousedown="onMouseDownOverlay"
|
||
@mousemove="onMouseMoveOverlay"
|
||
>
|
||
<svg class="measure-svg" xmlns="http://www.w3.org/2000/svg">
|
||
<g v-if="measuring && start && (end || current)">
|
||
<defs>
|
||
<marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
|
||
<path d="M0,0 L0,6 L6,3 z" fill="#1e90ff" />
|
||
</marker>
|
||
</defs>
|
||
<line
|
||
:x1="start.x"
|
||
:y1="start.y"
|
||
:x2="(end || current)!.x"
|
||
:y2="(end || current)!.y"
|
||
stroke="#1e90ff"
|
||
stroke-width="2"
|
||
marker-end="url(#arrow)"
|
||
/>
|
||
<!-- 起点/终点标记 -->
|
||
<circle :cx="start.x" :cy="start.y" r="4" fill="#1e90ff" />
|
||
<circle :cx="(end || current)!.x" :cy="(end || current)!.y" r="4" fill="#1e90ff" />
|
||
<!-- 文本标签（像素距离） -->
|
||
<g :transform="`translate(${midpoint.x}, ${midpoint.y})`">
|
||
<rect x="-40" y="-22" width="80" height="20" rx="4" ry="4" fill="rgba(0,0,0,0.6)" />
|
||
<text x="0" y="-8" fill="#fff" font-size="12" text-anchor="middle">{{ distance.toFixed(1) }} px</text>
|
||
</g>
|
||
</g>
|
||
<g v-else-if="measuring">
|
||
<text x="20" y="40" fill="#fff" font-size="13">提示：依次点击两点进行测量，按 Esc 退出</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.map-toolbar {
|
||
position: fixed;
|
||
right: 24px;
|
||
bottom: 24px;
|
||
z-index: 101;
|
||
background: rgba(0, 0, 0, 0.45);
|
||
padding: 8px 10px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||
color: #fff;
|
||
:deep(.ant-btn) {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.icon-btn {
|
||
padding: 8px;
|
||
margin: 0 4px;
|
||
// width: 32px;
|
||
// height: 32px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: get-color(primary);
|
||
}
|
||
/* 提升特异性，覆盖全局 .ant-btn.icon-btn.tool-btn:hover 的 !important 背景色 */
|
||
:deep(.ant-btn.icon-btn.tool-btn:hover) {
|
||
background-color: transparent !important;
|
||
color: #0dbb8a !important;
|
||
box-shadow: none !important;
|
||
}
|
||
.ant-btn.icon-btn.tool-btn:not(:disabled):hover {
|
||
background-color: transparent !important;
|
||
color: #0dbb8a !important;
|
||
box-shadow: none !important;
|
||
}
|
||
}
|
||
|
||
/* 测量按钮激活状态（背景红色） */
|
||
.map-toolbar {
|
||
.ant-btn.icon-btn.tool-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
&:focus-visible {
|
||
border: none !important;
|
||
outline: none !important;
|
||
}
|
||
}
|
||
/* 常规与悬停覆盖（需高特异性与 !important 以压过上面的 hover 规则） */
|
||
.ant-btn.icon-btn.tool-btn.measuring {
|
||
background-color: #0dbb8a;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-color: #0dbb8a;
|
||
}
|
||
// :deep(.ant-btn.icon-btn.tool-btn.measuring:hover) {
|
||
// background-color: #ff4d4f !important;
|
||
// border-color: #ff4d4f !important;
|
||
// color: #fff !important;
|
||
// box-shadow: none !important;
|
||
// }
|
||
}
|
||
|
||
/* 网格背景（占位实现），通过 toggleGrid 开关 */
|
||
:global(.editor-container.grid-bg) {
|
||
background-image:
|
||
linear-gradient(90deg, rgba(120, 120, 120, 0.25) 1px, transparent 0),
|
||
linear-gradient(rgba(120, 120, 120, 0.25) 1px, transparent 0);
|
||
background-size: 20px 20px;
|
||
}
|
||
|
||
/* 测量叠加层 */
|
||
.measure-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 109; /* 高于面板，低于全屏按钮浮层 */
|
||
pointer-events: none;
|
||
}
|
||
.measure-overlay.active {
|
||
pointer-events: auto; /* 仅测量时可交互 */
|
||
}
|
||
.measure-svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|