Merge pull request #34 from ExpTechTW/fix/mapview-missing-element-ref…

…erence

fix: mapview missing element reference

CHANGELOG.md

@@ -7,6 +7,7 @@
 * 新增啟動參數 `--quiet` 在開啟程式時隱藏視窗 (https://github.com/ExpTechTW/TREM-tauri/pull/30)
 * 停用瀏覽器內建快捷鍵 (https://github.com/ExpTechTW/TREM-tauri/pull/31)
 * 自動抓取並更新地震報告 (https://github.com/ExpTechTW/TREM-tauri/pull/32)
+* 修正切換面板後地圖不見的問題 (https://github.com/ExpTechTW/TREM-tauri/pull/34)
 
 **完整變更紀錄**: https://github.com/ExpTechTW/TREM-tauri/compare/v0.0.0-alpha.2...v0.0.0-alpha.3
 

src/App.vue

@@ -57,6 +57,7 @@ const changeReport = async (report: PartialReport) => {
   if (!api) {
     return;
   }
+
   activeReport.value = undefined;
   currentView.value = "report";
   const fullReport = await api?.getReport(report.id);

src/components/view/MapView.vue

@@ -8,7 +8,14 @@ import MapReportMarker from "../component/MapReportMarker.vue";
 import MapRtsBox from "../component/MapRtsBox.vue";
 import MapRtsMarker from "../component/MapRtsMarker.vue";
 
-import { markRaw, onBeforeUnmount, onMounted, shallowRef, inject } from "vue";
+import {
+  markRaw,
+  onBeforeUnmount,
+  onMounted,
+  shallowRef,
+  inject,
+  ref,
+} from "vue";
 import type { Ref } from "vue";
 import { SettingsManager } from "tauri-settings";
 import maplibregl from "maplibre-gl";
@@ -34,15 +41,20 @@ defineProps<{
 }>();
 
 const map = shallowRef<maplibregl.Map | null>(null);
+const mapTemplate = ref<HTMLDivElement>();
 const setting =
   inject<SettingsManager<DefaultConfigSchema>>("settings")?.settings;
 
 onMounted(() => {
+  if (!mapTemplate.value) {
+    return;
+  }
+
   const initialState = { lng: 120.5, lat: 23.6, zoom: 6.75 };
 
   map.value = markRaw(
     new maplibregl.Map({
-      container: "map",
+      container: mapTemplate.value,
       style: {
         version: 8,
         name: "TREM Map",
@@ -260,7 +272,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template lang="pug">
-#map.map-container.maplibregl-map(:class="{ 'hide-rts-markers': currentView.startsWith('report'), 'hide-report-list-markers': currentView != 'report-list' }")
+#map.map-container.maplibregl-map(ref="mapTemplate", :class="{ 'hide-rts-markers': currentView.startsWith('report'), 'hide-report-list-markers': currentView != 'report-list' }")
 .map-layers(v-if="map")
   .home(v-if="!Object.keys(eew).length && currentView == 'home'")
     MapHomeViewControl(:map="map")