web-map/src/components/map-toolbar.vue

<script setup lang="ts">
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 size="small" @click="zoomIn">放大</a-button>
      <a-button size="small" @click="zoomOut">缩小</a-button>
      <a-button size="small" @click="fitView">适配视图</a-button>
      <a-button size="small" type="primary" ghost @click="toggleMeasure">
        {{ measuring ? '退出测量' : '测量尺' }}
      </a-button>
      <a-button size="small" @click="toggleRule">标尺</a-button>
      <a-button size="small" @click="toggleGrid">网格</a-button>
      <a-button size="small" @click="exportImage">截图</a-button>
      <a-button size="small" @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: 16px;
  bottom: 16px;
  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;
  }
}

/* 网格背景（占位实现），通过 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>