Merge pull request #33 from ExpTechTW/fix/map-disappering

fix: map disappearing

src/components/component/MapEew.vue

@@ -5,7 +5,6 @@ import { onMounted, onUnmounted, ref } from "vue";
 import maplibregl from "maplibre-gl";
 
 import type { EewEvent } from "../../types";
-import { kmToPixels } from "../../scripts/helper/utils";
 
 const props = defineProps<{
   map: maplibregl.Map;
@@ -27,44 +26,11 @@ onMounted(() => {
 
   props.map.setLayoutProperty("town", "visibility", "visible");
   props.map.setLayoutProperty("county", "visibility", "none");
-
-  // FIXME: new algorithm for calculating zoom scale
-  const focusEew = () => {
-    const bounds = new maplibregl.LngLatBounds();
-    const zoom = props.map.getZoom();
-
-    for (const id in props.eew) {
-      if (!props.eew[id].detail) {
-        bounds.extend([props.eew[id].lng, props.eew[id].lat]);
-        continue;
-      }
-
-      const center = props.map.project([props.eew[id].lng, props.eew[id].lat]);
-      const radius = kmToPixels(props.eew[id].r.p, props.eew[id].lat, zoom);
-
-      bounds.extend(
-        props.map.unproject([center.x - radius, center.y - radius])
-      );
-      bounds.extend(
-        props.map.unproject([center.x + radius, center.y + radius])
-      );
-    }
-
-    props.map.fitBounds(bounds, {
-      padding: { top: 0, right: 320, bottom: 0, left: 0 },
-      maxZoom: 8,
-    });
-  };
-
-  focusEew();
-
-  intervals.focus = window.setInterval(focusEew, 5_000);
 });
 
 onUnmounted(() => {
   window.clearInterval(intervals.wave);
   window.clearInterval(intervals.cross);
-  window.clearInterval(intervals.focus);
 
   props.map.setLayoutProperty("county", "visibility", "visible");
   props.map.setLayoutProperty("town", "visibility", "none");

src/components/view/HomeView.vue

@@ -87,7 +87,7 @@ onMounted(() => {});
           .intensity-list-wrapper
             .intensity-list-scroller
               .intensity-list
-                template(v-for="r in rts.value.int", :key="r.station")
+                template(v-for="r in rts.value.int", :key="`${r.area ?? ''}${r.station ?? ''}`")
                   ReportIntensityItem(:area="r?.area", :station="r.station", :int="r.i")
     template(v-for="(e, id) in eew", :key="id")
       WaveTimer(v-if="e.t" , :eew="e", :index="Object.keys(eew).indexOf(id) + 1")

src/components/view/MapView.vue

@@ -34,7 +34,8 @@ defineProps<{
 }>();
 
 const map = shallowRef<maplibregl.Map | null>(null);
-const setting = inject<SettingsManager<DefaultConfigSchema>>("settings");
+const setting =
+  inject<SettingsManager<DefaultConfigSchema>>("settings")?.settings;
 
 onMounted(() => {
   const initialState = { lng: 120.5, lat: 23.6, zoom: 6.75 };
@@ -273,10 +274,10 @@ onBeforeUnmount(() => {
     MapRtsBox(:map="map", :box="rts.value.box")
   .eew(v-if="Object.keys(eew).length && currentView == 'home'")
     MapEew(:map="map", :eew="eew")
-  .eew-town-intensity(v-if="currentEewIndex.value && currentView == 'home'")
+  .eew-town-intensity(v-if="eew[currentEewIndex.value] && currentView == 'home'")
     MapEewIntensity(:map="map", :int="eew[currentEewIndex.value].int", :area="eew[currentEewIndex.value].raw.eq?.area")
-  .location(v-if="setting?.settings?.location?.area")
-    MapLocalMarker(:map="map", :lat="code[setting.settings.location.area].lat", :lng="code[setting.settings.location.area].lng")
+  .location(v-if="setting?.location?.area && code[setting.location.area]")
+    MapLocalMarker(:map="map", :lat="code[setting.location.area].lat", :lng="code[setting.location.area].lng")
 </template>
 
 <style>

src/main.ts

@@ -27,7 +27,6 @@ import {
   WebSocketEvent,
 } from "./scripts/class/api";
 import { AudioType } from "./types";
-import { RefreshableTimeout } from "./scripts/class/timeout";
 import { getAudio } from "./scripts/helper/audio";
 import DefaultConfig from "./assets/json/default_config.json";
 import code from "./assets/json/code.json";
@@ -46,12 +45,14 @@ const props = {
 };
 
 const timer: Record<string, number> = {};
-const eewTimer: Record<string, RefreshableTimeout> = {};
+const eewTimer: Record<string, number> = {};
 
 const setting = new SettingsManager<DefaultConfigSchema>(
-  DefaultConfig as DefaultConfigSchema, {
-  prettify: true,
-});
+  DefaultConfig as DefaultConfigSchema,
+  {
+    prettify: true,
+  }
+);
 
 const api = new ExpTechApi();
 const ntp = { remote: Date.now(), server: Date.now(), client: Date.now() };
@@ -121,7 +122,7 @@ const resetEew = () => {
   delete timer.eewIndexTimer;
 
   for (const id in props.eew) {
-    eewTimer[id].clear();
+    delete eewTimer[id];
     delete props.eew[id];
   }
 
@@ -257,12 +258,6 @@ api.on(WebSocketEvent.Eew, (eew) => {
 
   if (props.eew[eew.id]) {
     if (eew.serial > props.eew[eew.id].serial) {
-      if (time - eew.eq.time > 120_000) {
-        eewTimer[eew.id].refresh(30_000);
-      } else {
-        eewTimer[eew.id].refresh();
-      }
-
       browserWindow.requestUserAttention(UserAttentionType.Informational);
 
       if (setting.settings.audio.enabled) {
@@ -273,7 +268,7 @@ api.on(WebSocketEvent.Eew, (eew) => {
     browserWindow.requestUserAttention(UserAttentionType.Critical);
 
     if (!eewTimer[eew.id]) {
-      eewTimer[eew.id] = new RefreshableTimeout(() => {
+      eewTimer[eew.id] = window.setTimeout(() => {
         delete props.eew[eew.id];
         delete eewTimer[eew.id];
 
@@ -283,7 +278,7 @@ api.on(WebSocketEvent.Eew, (eew) => {
         ) {
           setEewIndex();
         }
-      }, 120_000);
+      }, 240_000);
     }
 
     if (eew.author == EewSource.Cwa) {
@@ -359,14 +354,14 @@ browserWindow.onFileDropEvent(async (e) => {
       `[Replay] Loading replay ${e.payload.paths[0].split(/(\\|\/)/g).pop()}`
     );
 
-    const replayData: { rts: Rts; eew: Eew[]; time: number; }[] = [];
+    const replayData: { rts: Rts; eew: Eew[]; time: number }[] = [];
     const binary = await fs.readBinaryFile(e.payload.paths[0]);
     const zip = await JSZip.loadAsync(binary);
 
     for (let i = 0, k = Object.keys(zip.files), n = k.length; i < n; i++) {
       const filename = k[i];
       const content = await zip.files[filename].async("string");
-      const data: { rts: Rts; eew: Eew[]; time: number; } = JSON.parse(content);
+      const data: { rts: Rts; eew: Eew[]; time: number } = JSON.parse(content);
       data.rts.replay = true;
       data.eew.forEach((e) => (e.replay = true));
       data.time = +filename;
@@ -454,4 +449,4 @@ document.addEventListener("keydown", (ev) => {
         break;
     }
   }
-});
+});