@idmwx/idmui-gl4 1.1.9 → 1.2.1

package/dist/index.js

@@ -3,9 +3,9 @@ var $a = (t, e, o) => e in t ? Xa(t, e, { enumerable: !0, configurable: !0, writ
 var me = (t, e, o) => ($a(t, typeof e != "symbol" ? e + "" : e, o), o);
 import Se from "axios";
 import { useTheme as ze } from "vuetify";
-import { openBlock as y, createElementBlock as S, resolveComponent as x, createBlock as D, withCtx as u, createVNode as d, withModifiers as ro, createElementVNode as l, createCommentVNode as O, normalizeClass as We, toDisplayString as h, createTextVNode as N, Fragment as be, renderList as we, withDirectives as He, vShow as Ue, mergeProps as B, normalizeStyle as ie } from "vue";
+import { openBlock as y, createElementBlock as S, resolveComponent as x, createBlock as D, withCtx as u, createVNode as d, withModifiers as ro, createElementVNode as l, createCommentVNode as O, normalizeClass as We, toDisplayString as h, createTextVNode as N, Fragment as be, renderList as we, withDirectives as Ne, vShow as Fe, mergeProps as B, normalizeStyle as ie } from "vue";
 import ve from "mapbox-gl";
-import { LngLatHelper as G, TropicalHelper as Va, LaneHelper as Fe } from "@idm-plugin/geo";
+import { LngLatHelper as G, TropicalHelper as Va, LaneHelper as Ue } from "@idm-plugin/geo";
 import M from "moment";
 import { Meteo2Assist as oo, TidesAssist as qa } from "@idm-plugin/meteo";
 import * as io from "echarts";
@@ -2057,7 +2057,7 @@ const br = {
 function _r(t, e, o, i, a, r) {
   const s = x("VCardText"), c = x("VCard"), n = x("PortDetail");
   return y(), S("div", null, [
-    He(d(c, {
+    Ne(d(c, {
       id: "idmPortInfo",
       ref: "idmPortInfo"
     }, {
@@ -2080,7 +2080,7 @@ function _r(t, e, o, i, a, r) {
       ]),
       _: 1
     }, 512), [
-      [Ue, a.showInfo]
+      [Fe, a.showInfo]
     ]),
     a.showDetail ? (y(), D(n, B({
       key: 0,
@@ -3195,7 +3195,7 @@ const Il = {
 function Ol(t, e, o, i, a, r) {
   const s = x("v-card-text"), c = x("v-card"), n = x("TideDetail");
   return y(), S("div", null, [
-    He(d(c, { id: "idmTidalInfo" }, {
+    Ne(d(c, { id: "idmTidalInfo" }, {
       default: u(() => [
         d(s, { class: "pr-8 text-body-1" }, {
           default: u(() => {
@@ -3214,7 +3214,7 @@ function Ol(t, e, o, i, a, r) {
       ]),
       _: 1
     }, 512), [
-      [Ue, a.showInfo]
+      [Fe, a.showInfo]
     ]),
     a.showDetail ? (y(), D(n, B({
       key: 0,
@@ -4367,7 +4367,7 @@ const Ul = {
 function Zl(t, e, o, i, a, r) {
   const s = x("v-card-text"), c = x("v-card"), n = x("PortDetail");
   return y(), S("div", null, [
-    He(d(c, {
+    Ne(d(c, {
       id: "idmFollowPortInfo",
       ref: "idmFollowPortInfo"
     }, {
@@ -4390,7 +4390,7 @@ function Zl(t, e, o, i, a, r) {
       ]),
       _: 1
     }, 512), [
-      [Ue, a.showInfo]
+      [Fe, a.showInfo]
     ]),
     a.showDetail ? (y(), D(n, B({
       key: 0,
@@ -5296,7 +5296,7 @@ const Yl = {
       const e = t.features[0];
       if (e.properties) {
         const f = e.properties;
-        f.lng = e.geometry.coordinates[0], f.lat = e.geometry.coordinates[1], console.log("point", f);
+        f.lng = e.geometry.coordinates[0], f.lat = e.geometry.coordinates[1];
         const w = M(), P = (o = M(this.realTime)) == null ? void 0 : o.diff(w, "d", !0), z = {
           lat: f.lat,
           lng: f.lng,
@@ -5327,7 +5327,7 @@ const Yl = {
 };
 function Ql(t, e, o, i, a, r) {
   const s = x("v-card-text"), c = x("v-card");
-  return He((y(), D(c, {
+  return Ne((y(), D(c, {
     id: "idmFollowPositionInfo",
     ref: "idmFollowPositionInfo"
   }, {
@@ -5349,10 +5349,10 @@ function Ql(t, e, o, i, a, r) {
     ]),
     _: 1
   }, 512)), [
-    [Ue, a.showInfo]
+    [Fe, a.showInfo]
   ]);
 }
-const Jl = /* @__PURE__ */ Y(Yl, [["render", Ql], ["__scopeId", "data-v-5d4ac543"]]);
+const Jl = /* @__PURE__ */ Y(Yl, [["render", Ql], ["__scopeId", "data-v-d9f71632"]]);
 const es = {
   name: "IdmOtherLayerr",
   components: {
@@ -5468,12 +5468,14 @@ const es = {
     },
     theme: {
       handler() {
+        debugger;
         this.theme === "light" ? this.mapFeather = ["light", "nautical"].includes(this.mapFeather) ? this.mapFeather : "light" : this.mapFeather = ["dark", "satellite"].includes(this.mapFeather) ? this.mapFeather : "dark";
       },
       immediate: !0
     },
     mapFeather: {
       handler() {
+        debugger;
         localStorage.setItem(this.cache.mapFeatherKey, this.mapFeather), this.$emit("mapFeather", this.mapFeather), this.$emit("theme", ["light", "nautical"].includes(this.mapFeather) ? "light" : "dark");
       },
       immediate: !0
@@ -6012,7 +6014,7 @@ class so {
     o !== i && this.map.setLayoutProperty(this.particleLayer, "visibility", i);
   }
 }
-class Ne {
+class He {
   /**
    * 创建着色器
    * @see https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-shaders-and-glsl.html
@@ -6587,7 +6589,7 @@ const bs = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0,
       wrapper: void 0,
       animation: void 0,
@@ -6927,7 +6929,7 @@ const Ls = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0,
       wrapper: void 0,
       animation: void 0,
@@ -7109,7 +7111,7 @@ const Ss = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0,
       right: 10
     };
@@ -7713,7 +7715,7 @@ const Ws = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0,
       right: 10
     };
@@ -7834,7 +7836,7 @@ const qs = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0,
       right: 10
     };
@@ -7940,7 +7942,7 @@ const $s = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0,
       right: 10
     };
@@ -8059,7 +8061,7 @@ const tn = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0,
       right: 10
     };
@@ -8173,7 +8175,7 @@ const ln = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0
     };
   },
@@ -8273,7 +8275,7 @@ const mn = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0,
       right: 10
     };
@@ -8389,7 +8391,7 @@ const un = {
       texture: void 0,
       rampColor: void 0,
       aPositionBuffer: void 0,
-      webgl: new Ne(),
+      webgl: new He(),
       etime: void 0,
       right: 10
     };
@@ -11222,7 +11224,7 @@ function Lc(t, e, o, i, a, r) {
         _: 1
       }, 8, ["text"])
     ], 4),
-    He(l("div", oc, [
+    Ne(l("div", oc, [
       d(f, {
         width: "400",
         elevation: "16"
@@ -11357,14 +11359,14 @@ function Lc(t, e, o, i, a, r) {
         _: 1
       }),
       l("div", _c, [
-        He(d(f, {
+        Ne(d(f, {
           width: "400",
           elevation: "16"
         }, {
           default: u(() => [
             d(n, null, {
               default: u(() => [
-                He(l("div", kc, e[7] || (e[7] = [
+                Ne(l("div", kc, e[7] || (e[7] = [
                   l("div", { class: "legend d-flex justify-start align-center" }, [
                     l("div", { class: "icon td" }),
                     l("div", { class: "label" }, "TD")
@@ -11390,9 +11392,9 @@ function Lc(t, e, o, i, a, r) {
                     l("div", { class: "label" }, "Super TY")
                   ], -1)
                 ]), 512), [
-                  [Ue, a.showLegend]
+                  [Fe, a.showLegend]
                 ]),
-                He(l("div", zc, e[8] || (e[8] = [
+                Ne(l("div", zc, e[8] || (e[8] = [
                   l("div", { class: "legend d-flex justify-start align-center" }, [
                     l("div", { class: "icon history" }),
                     l("div", { class: "label" }, "History")
@@ -11410,7 +11412,7 @@ function Lc(t, e, o, i, a, r) {
                     l("div", { class: "label" }, "50kts Radii")
                   ], -1)
                 ]), 512), [
-                  [Ue, a.showLegend]
+                  [Fe, a.showLegend]
                 ])
               ]),
               _: 1
@@ -11418,11 +11420,11 @@ function Lc(t, e, o, i, a, r) {
           ]),
           _: 1
         }, 512), [
-          [Ue, a.showLegend]
+          [Fe, a.showLegend]
         ])
       ])
     ], 512), [
-      [Ue, a.showTropicalsInfo && !t.$attrs.hideTropicalsLegend]
+      [Fe, a.showTropicalsInfo && !t.$attrs.hideTropicalsLegend]
     ])
   ]);
 }
@@ -11781,9 +11783,8 @@ const Ac = {
       currentHourData: {},
       positionOffset: void 0,
       positionGmt: void 0,
-      meteoMarker: void 0,
-      meteoInfoMarker: void 0,
-      positionMarker: void 0
+      positionMarker: void 0,
+      meteoInfoMarker: void 0
     };
   },
   computed: {
@@ -11873,7 +11874,7 @@ const Ac = {
     },
     submitForm() {
       var t;
-      this.showMeteo = !1, (t = this.meteoMarker) == null || t.remove(), this.meteoMarker = void 0, this.$refs.spotForm.validate().then(async (e) => {
+      this.showMeteo = !1, (t = this.positionMarker) == null || t.remove(), this.positionMarker = void 0, this.$refs.spotForm.validate().then(async (e) => {
         var o;
         if (e != null && e.valid) {
           this.form.lat = (Number(this.form.latDegree ?? 0) + Number(this.form.latMinute ?? 0) / 60) * (this.form.latDirection === "N" ? 1 : -1), this.form.lng = (Number(this.form.lngDegree ?? 0) + Number(this.form.lngMinute ?? 0) / 60) * (this.form.lngDirection === "E" ? 1 : -1), this.point = {
@@ -11901,11 +11902,10 @@ const Ac = {
       };
     },
     handleCloseForm() {
-      var t;
-      this.showForm = !1, this.cancelForm(), !this.showForm && !this.showMeteo && (this.toggle = !1), (t = this.positionMarker) == null || t.remove(), this.positionMarker = void 0;
+      this.showForm = !1, this.cancelForm(), !this.showForm && !this.showMeteo && (this.toggle = !1);
     },
     async fetchMeteoData(t) {
-      this.loading = !0, this.showMeteo = !0, this.form.lng = t.lng, this.form.lat = t.lat, this.handleRender([t.lng, t.lat]), this.meteoData = [];
+      this.loading = !0, this.showMeteo = !0, this.form.lng = t.lng, this.form.lat = t.lat, this.handleDrawInfoMarker([t.lng, t.lat]), this.meteoData = [];
       const { weatherModels: e, marineModels: o } = oo.autoPickMeteoModel(t.forecastModel);
       let i = {
         lat: t.lat,
@@ -11922,7 +11922,7 @@ const Ac = {
       (a == null ? void 0 : a.data.code) === 0 && (this.meteoData = a == null ? void 0 : a.data.data, this.meteoData.lng = t.lng, this.meteoData.lat = t.lat, this.initTableData(this.meteoData)), this.loading = !1;
     },
     async fetchHistoryData(t) {
-      this.loading = !0, this.showMeteo = !0, this.handleRender([t.lng, t.lat]), this.meteoData = [];
+      this.loading = !0, this.showMeteo = !0, this.handleDrawInfoMarker([t.lng, t.lat]), this.meteoData = [];
       const { weatherModels: e, marineModels: o } = oo.autoPickMeteoModel(t.forecastModel), i = {
         lat: t.lat,
         lng: t.lng,
@@ -11950,46 +11950,33 @@ const Ac = {
     },
     handleClick(t) {
       if (t.originalEvent.stopPropagation(), t.originalEvent.target.className === "mapboxgl-canvas")
-        this.handleDrawMarker(t.lngLat), this.$nextTick(() => {
+        this.handleGetPosition(t.lngLat), this.$nextTick(() => {
           var o, i, a;
           (a = (i = (o = this.$refs) == null ? void 0 : o.submitSpot) == null ? void 0 : i.$el) == null || a.click();
         });
       else
         return !1;
     },
-    handleDrawMarker(t) {
-      var e, o;
-      if (this.showMeteo = !1, (e = this.meteoMarker) == null || e.remove(), this.meteoMarker = void 0, this.form.latDegree = Number(G.lat2pretty(t.lat).degree), this.form.latMinute = Number(G.lat2pretty(t.lat).minute), this.form.latDirection = G.lat2pretty(t.lat).direction, this.form.lngDegree = Number(G.lng2pretty(t.lng).degree), this.form.lngMinute = Number(G.lng2pretty(t.lng).minute), this.form.lngDirection = G.lng2pretty(t.lng).direction, this.point = {
+    handleGetPosition(t) {
+      var e;
+      this.showMeteo = !1, (e = this.positionMarker) == null || e.remove(), this.positionMarker = void 0, this.form.latDegree = Number(G.lat2pretty(t.lat).degree), this.form.latMinute = Number(G.lat2pretty(t.lat).minute), this.form.latDirection = G.lat2pretty(t.lat).direction, this.form.lngDegree = Number(G.lng2pretty(t.lng).degree), this.form.lngMinute = Number(G.lng2pretty(t.lng).minute), this.form.lngDirection = G.lng2pretty(t.lng).direction, this.point = {
         lat: t.lat,
         lng: t.lng
-      }, this.positionMarker)
-        (o = this.positionMarker) == null || o.setLngLat([this.point.lng, this.point.lat]);
-      else {
-        const i = document.createElement("div");
-        i.innerHTML = '<svg t="1755510770354" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5552" width="200" height="200"><path d="M511.960615 827.234462s330.358154-215.906462 330.358154-465.526154C842.318769 183.650462 694.468923 39.384615 512 39.384615S181.563077 183.689846 181.563077 361.668923c0 249.659077 330.397538 465.565538 330.397538 465.565539z" fill="#FF8C00" p-id="5553"></path><path d="M511.921231 496.836923a127.054769 127.054769 0 1 0 0-254.148923 127.054769 127.054769 0 0 0 0 254.148923z" fill="#FFFFFF" p-id="5554"></path><path d="M354.461538 945.230769a157.538462 39.384615 0 1 0 315.076924 0 157.538462 39.384615 0 1 0-315.076924 0Z" fill="#494C4F" opacity=".4" p-id="5555"></path></svg>', i.firstChild.style.height = "32px", i.firstChild.style.width = "32px", this.positionMarker = new ve.Marker(i).setLngLat([this.point.lng, this.point.lat]).setOffset([0, -16]).addTo(this.map);
-      }
+      };
     },
-    handleRender(t) {
+    handleDrawInfoMarker(t) {
       t && (this.map.flyTo({
         center: t,
-        duration: 500
+        duration: 300
       }), this.$nextTick(() => {
-        var e, o, i;
-        if ((e = this.positionMarker) == null || e.remove(), this.positionMarker = void 0, this.meteoMarker)
-          (o = this.meteoMarker) == null || o.setLngLat(t);
-        else {
-          const a = document.createElement("div");
-          a.innerHTML = `
-                  <svg class="multi-color-icon" style="height: 26px;width: 26px;" aria-hidden="true">
-                    <use :xlink:href="#icon-spot-${this.theme}"></use>
-                  </svg>`, this.meteoMarker = new ve.Marker(a).setLngLat(t).setOffset([0, -13]).addTo(this.map);
-        }
-        if (this.meteoInfoMarker)
-          (i = this.meteoInfoMarker) == null || i.setLngLat(t);
-        else {
-          const a = document.getElementById("idm-gl4-spot-meteo");
-          this.meteoInfoMarker = new ve.Marker(a).setLngLat(t).setOffset([0, -190]).addTo(this.map);
-        }
+        var a, r, s, c, n;
+        (a = this.positionMarker) == null || a.remove();
+        const e = (r = document.getElementById("idm-position-icon")) == null ? void 0 : r.cloneNode(!0);
+        this.positionMarker = new ve.Marker(e).setLngLat(t).setOffset([0, -13]).addTo(this.map), (s = this.meteoInfoMarker) == null || s.remove();
+        const o = (c = document.getElementById("idm-gl4-spot-meteo")) == null ? void 0 : c.cloneNode(!0), i = (n = o == null ? void 0 : o.children[1]) == null ? void 0 : n.children[1];
+        i && (i.onclick = () => {
+          this.handleCloseMeteo();
+        }), this.meteoInfoMarker = new ve.Marker(o).setLngLat(t).setOffset([0, -190]).addTo(this.map);
       }));
     },
     handleMeteoMore() {
@@ -11997,7 +11984,7 @@ const Ac = {
     },
     handleCloseMeteo() {
       var t, e;
-      this.showMeteo = !1, (t = this.meteoMarker) == null || t.remove(), this.meteoMarker = void 0, (e = this.positionMarker) == null || e.remove(), this.positionMarker = void 0, !this.showForm && !this.showMeteo && (this.toggle = !1);
+      this.showMeteo = !1, (t = this.positionMarker) == null || t.remove(), this.positionMarker = void 0, (e = this.meteoInfoMarker) == null || e.remove(), this.meteoInfoMarker = void 0, !this.showForm && !this.showMeteo && (this.toggle = !1);
     },
     handleFollow() {
       this.$emit("follow", this.point);
@@ -12023,8 +12010,12 @@ const Ac = {
 }, Gc = ["xlink:href"], Vc = { class: "d-flex justify-start align-center ga-1 mb-1" }, Zc = {
   class: "multi-color-icon",
   "aria-hidden": "true"
-}, qc = ["xlink:href"], Yc = { class: "d-flex justify-start align-center" }, Kc = { class: "mx-2" };
-function Xc(t, e, o, i, a, r) {
+}, qc = ["xlink:href"], Yc = { class: "d-flex justify-start align-center" }, Kc = { class: "mx-2" }, Xc = { id: "idm-position-icon" }, $c = {
+  class: "multi-color-icon",
+  style: { height: "26px", width: "26px" },
+  "aria-hidden": "true"
+}, Qc = ["xlink:href"];
+function Jc(t, e, o, i, a, r) {
   const s = x("VBtn"), c = x("VTooltip"), n = x("VCardTitle"), g = x("VDivider"), p = x("VTextField"), f = x("VCol"), w = x("VRow"), P = x("DateTimePicker"), z = x("VBtnToggle"), L = x("VCardActions"), b = x("VForm"), A = x("VCardText"), I = x("VCard"), C = x("VIcon");
   return y(), S("div", Dc, [
     l("div", {
@@ -12372,7 +12363,7 @@ function Xc(t, e, o, i, a, r) {
       ]),
       _: 1
     }, 8, ["style"])) : O("", !0),
-    He(d(I, {
+    Ne(d(I, {
       id: "idm-gl4-spot-meteo",
       class: "spot-meteo",
       style: { width: "490px", "z-index": "9" }
@@ -12643,12 +12634,21 @@ function Xc(t, e, o, i, a, r) {
       ]),
       _: 1
     }, 512), [
-      [Ue, a.showMeteo]
+      [Fe, a.showMeteo]
+    ]),
+    Ne(l("div", Xc, [
+      (y(), S("svg", $c, [
+        l("use", {
+          "xlink:href": `#icon-spot-${o.theme}`
+        }, null, 8, Qc)
+      ]))
+    ], 512), [
+      [Fe, a.showMeteo]
     ])
   ]);
 }
-const $c = /* @__PURE__ */ Y(Ac, [["render", Xc]]);
-const Qc = {
+const em = /* @__PURE__ */ Y(Ac, [["render", Jc]]);
+const tm = {
   name: "IdmMeasure",
   props: {
     map: {
@@ -12820,10 +12820,10 @@ const Qc = {
         let o = 0;
         const i = [];
         for (let a = 1; a < e.length; a++) {
-          const r = e[a - 1], s = e[a], c = r.properties, n = { lng: r.geometry.coordinates[0], lat: r.geometry.coordinates[1] }, g = { lng: s.geometry.coordinates[0], lat: s.geometry.coordinates[1] }, p = Fe.calculateDistance(n, g, c.mode === "RL", 4), f = Fe.calculateBearing(n, g, c.mode === "RL", 2);
+          const r = e[a - 1], s = e[a], c = r.properties, n = { lng: r.geometry.coordinates[0], lat: r.geometry.coordinates[1] }, g = { lng: s.geometry.coordinates[0], lat: s.geometry.coordinates[1] }, p = Ue.calculateDistance(n, g, c.mode === "RL", 4), f = Ue.calculateBearing(n, g, c.mode === "RL", 2);
           o = G.roundPrecision(o + p, 4);
           let w;
-          c.mode === "RL" ? w = G.convertToMonotonicLng([n, g]) : w = G.convertToMonotonicLng(Fe.interpolateCoordinates(n, g, 200));
+          c.mode === "RL" ? w = G.convertToMonotonicLng([n, g]) : w = G.convertToMonotonicLng(Ue.interpolateCoordinates(n, g, 200));
           const P = H.lineString(w.map((L) => [L.lng, L.lat]));
           P.properties.dist = p, P.properties.bearing = f, P.properties.total = o, P.properties.name = "Line " + this.currentLineIndex, i.push(P);
           const z = e[a];
@@ -12838,17 +12838,17 @@ const Qc = {
       let r, s;
       if (e) {
         const n = e.properties, g = { lng: e.geometry.coordinates[0], lat: e.geometry.coordinates[1] }, p = { lng: o.lng, lat: o.lat };
-        r = Fe.calculateDistance(g, p, n.mode === "RL", 4), s = Fe.calculateBearing(g, p, n.mode === "RL", 2);
+        r = Ue.calculateDistance(g, p, n.mode === "RL", 4), s = Ue.calculateBearing(g, p, n.mode === "RL", 2);
         let f;
-        n.mode === "RL" ? f = G.convertToMonotonicLng([g, p]) : f = G.convertToMonotonicLng(Fe.interpolateCoordinates(g, p, 200));
+        n.mode === "RL" ? f = G.convertToMonotonicLng([g, p]) : f = G.convertToMonotonicLng(Ue.interpolateCoordinates(g, p, 200));
         const w = H.lineString(f.map((P) => [P.lng, P.lat]));
         w.properties.dist = r, w.properties.bearing = s, a.features.push(w);
       }
       if (i) {
         const n = o.properties, g = o, p = { lng: i.geometry.coordinates[0], lat: i.geometry.coordinates[1] };
-        r = Fe.calculateDistance(g, p, n.mode === "RL", 4), s = Fe.calculateBearing(g, p, n.mode === "RL", 2);
+        r = Ue.calculateDistance(g, p, n.mode === "RL", 4), s = Ue.calculateBearing(g, p, n.mode === "RL", 2);
         let f;
-        n.mode === "RL" ? f = G.convertToMonotonicLng([g, p]) : f = G.convertToMonotonicLng(Fe.interpolateCoordinates(g, p, 200));
+        n.mode === "RL" ? f = G.convertToMonotonicLng([g, p]) : f = G.convertToMonotonicLng(Ue.interpolateCoordinates(g, p, 200));
         const w = H.lineString(f.map((P) => [P.lng, P.lat]));
         w.properties.dist = r, w.properties.bearing = s, a.features.push(w);
       }
@@ -12998,10 +12998,10 @@ const Qc = {
       }), this.pointMarkers[t.id] = [], (P = this.tipMarker) == null || P.remove(), this.tipMarker = void 0, e && ((z = this.map) != null && z.getSource(o)) && this.map.removeSource(o), e && ((L = this.map) != null && L.getSource(this.tmpSource)) && this.map.removeSource(this.tmpSource);
     }
   }
-}, Jc = { class: "idm-gl4-measure" };
-function em(t, e, o, i, a, r) {
+}, om = { class: "idm-gl4-measure" };
+function am(t, e, o, i, a, r) {
   const s = x("VBtn"), c = x("VTooltip");
-  return y(), S("div", Jc, [
+  return y(), S("div", om, [
     l("div", {
       class: "menu-bar-box transition pa-1",
       style: ie({ top: o.top + 214 + "px", right: a.right + "px" })
@@ -13030,8 +13030,8 @@ function em(t, e, o, i, a, r) {
     ], 4)
   ]);
 }
-const tm = /* @__PURE__ */ Y(Qc, [["render", em]]);
-const om = {
+const im = /* @__PURE__ */ Y(tm, [["render", am]]);
+const rm = {
   name: "IdmBottomBar",
   components: { DateTimePicker: no },
   props: {
@@ -13149,18 +13149,18 @@ const om = {
       this.$parent.$refs.idmWeatherLayers.handleMenuToggle();
     }
   }
-}, am = { class: "idm-bottom-bar-gl4" }, im = { class: "date-box d-flex ga-2 mr-2" }, rm = { class: "play-btns-box d-flex justify-center align-center cursor-pointer" }, lm = { class: "fast-weathers-box d-flex justify-center align-center ga-2 cursor-pointer" }, sm = { class: "model-box d-flex justify-center align-center ga-2 my-2" }, nm = {
+}, lm = { class: "idm-bottom-bar-gl4" }, sm = { class: "date-box d-flex ga-2 mr-2" }, nm = { class: "play-btns-box d-flex justify-center align-center cursor-pointer" }, cm = { class: "fast-weathers-box d-flex justify-center align-center ga-2 cursor-pointer" }, mm = { class: "model-box d-flex justify-center align-center ga-2 my-2" }, dm = {
   key: 0,
   class: "list d-flex flex-wrap pa-2 rounded ga-2"
-}, cm = ["onClick"], mm = { class: "btn-box d-flex justify-start align-center rounded ga-2 py-1 px-3" }, dm = { class: "text-body-1" };
-function hm(t, e, o, i, a, r) {
+}, hm = ["onClick"], pm = { class: "btn-box d-flex justify-start align-center rounded ga-2 py-1 px-3" }, um = { class: "text-body-1" };
+function gm(t, e, o, i, a, r) {
   const s = x("DateTimePicker"), c = x("VListItemTitle"), n = x("VListItem"), g = x("VList"), p = x("VMenu"), f = x("VBtn"), w = x("VDivider"), P = x("VTooltip");
-  return y(), S("div", am, [
+  return y(), S("div", lm, [
     l("div", {
       class: "timeline-box px-2 d-flex justify-start align-center rounded",
       style: ie({ right: a.right + 146 + "px", bottom: Object.values(a.show).includes(!0) ? "10px" : "-100px" })
     }, [
-      l("div", im, [
+      l("div", sm, [
         d(s, B({
           ref: "dateTimePicker",
           "date-time": a.currentDateTimeZ,
@@ -13223,7 +13223,7 @@ function hm(t, e, o, i, a, r) {
         class: "mx-2 my-3",
         style: { height: "16px" }
       }),
-      l("div", rm, [
+      l("div", nm, [
         d(f, {
           icon: "",
           size: "small",
@@ -13296,7 +13296,7 @@ function hm(t, e, o, i, a, r) {
         class: "mx-2 my-3",
         style: { height: "16px" }
       }),
-      l("div", lm, [
+      l("div", cm, [
         d(P, {
           text: t.$t("weather.windBarbs"),
           location: "top"
@@ -13400,7 +13400,7 @@ function hm(t, e, o, i, a, r) {
         class: "mx-2 mr-3 my-3",
         style: { height: "16px" }
       }),
-      l("div", sm, [
+      l("div", mm, [
         d(f, {
           text: "",
           height: "30",
@@ -13433,14 +13433,14 @@ function hm(t, e, o, i, a, r) {
       class: "timezone-box d-flex flex-column justify-space-between align-end",
       style: ie({ right: a.right + "px" })
     }, [
-      a.showTimezone ? (y(), S("div", nm, [
+      a.showTimezone ? (y(), S("div", dm, [
         (y(!0), S(be, null, we(a.offsets, (z) => (y(), S("div", {
           key: z,
           class: "item rounded text-body-2 hover-active",
           onClick: (L) => a.timeZone = z
-        }, h(z < 0 ? z : "+" + z), 9, cm))), 128))
+        }, h(z < 0 ? z : "+" + z), 9, hm))), 128))
       ])) : O("", !0),
-      l("div", mm, [
+      l("div", pm, [
         d(f, {
           text: "",
           variant: "flat",
@@ -13454,20 +13454,20 @@ function hm(t, e, o, i, a, r) {
           ]),
           _: 1
         }),
-        l("span", dm, h(a.currentRealTime), 1)
+        l("span", um, h(a.currentRealTime), 1)
       ])
     ], 4)
   ]);
 }
-const pm = /* @__PURE__ */ Y(om, [["render", hm]]), um = {
+const fm = /* @__PURE__ */ Y(rm, [["render", gm]]), ym = {
   name: "IdmGL4",
   components: {
     IdmOtherLayer: ps,
     IdmWeatherLayer: Jn,
     IdmTropicals: Ka,
-    IdmMeasure: tm,
-    IdmSpot: $c,
-    IdmBottomBar: pm
+    IdmMeasure: im,
+    IdmSpot: em,
+    IdmBottomBar: fm
   },
   props: {
     map: {
@@ -13519,13 +13519,13 @@ const pm = /* @__PURE__ */ Y(om, [["render", hm]]), um = {
     }
   },
   methods: {}
-}, gm = {
+}, bm = {
   ref: "mapHomeGl4",
   class: "map-gl4-home"
 };
-function fm(t, e, o, i, a, r) {
+function wm(t, e, o, i, a, r) {
   const s = x("IdmOtherLayer"), c = x("IdmWeatherLayer"), n = x("IdmTropicals"), g = x("IdmMeasure"), p = x("IdmSpot"), f = x("IdmBottomBar");
-  return y(), S("div", gm, [
+  return y(), S("div", bm, [
     d(s, B({
       ref: "idmOtherLayers",
       token: o.token,
@@ -13590,8 +13590,8 @@ function fm(t, e, o, i, a, r) {
     }, t.$attrs), null, 16, ["forecast-model", "weather-check-list", "map-feather"])
   ], 512);
 }
-const ym = /* @__PURE__ */ Y(um, [["render", fm]]);
-class bm {
+const xm = /* @__PURE__ */ Y(ym, [["render", wm]]);
+class vm {
   constructor(e = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImNseTVudHJzYzAwNWUwbHBsZHkyaDRqczMiLCJyb2xlIjoxLCJuYW1lIjoiZmFrZUBvcm13eC5jb20iLCJwbGF0SWQiOiJnZDBtdDFkIiwiY29tcGFueSI6eyJpZCI6bnVsbCwiY2hpbGRyZW4iOltdfSwiaWF0IjoxNzIzMDI0MDI0LCJleHAiOjM5MzA1NDQwMjR9.RrKcdcMnq-FxBLJQ-i6lx2FscDE46y8EvHIemPW4HTg") {
     me(this, "originStyle");
     me(this, "mapboxStyle");
@@ -32350,7 +32350,7 @@ class bm {
     };
   }
 }
-const wm = {
+const _m = {
   name: "MapInitial",
   props: {
     token: {
@@ -32396,6 +32396,7 @@ const wm = {
     },
     mapFeather: {
       handler() {
+        debugger;
         this.mapFeather && this.$nextTick(() => {
           this.initOnlineMap();
         });
@@ -32406,7 +32407,7 @@ const wm = {
   methods: {
     async initOnlineMap() {
       var e;
-      (e = this.map) == null || e.remove(), this.map = void 0, this.helper = new bm(this.token), ve.accessToken = "pk.eyJ1IjoibmVhdGNoZW5oZW5nIiwiYSI6ImNsdXM3cnBmODBsemgycW1vaXc1bjV6bXMifQ.w6fqHGRbhNhLvm0LnX4ZVw";
+      (e = this.map) == null || e.remove(), this.map = void 0, this.helper = new vm(this.token), ve.accessToken = "pk.eyJ1IjoibmVhdGNoZW5oZW5nIiwiYSI6ImNsdXM3cnBmODBsemgycW1vaXc1bjV6bXMifQ.w6fqHGRbhNhLvm0LnX4ZVw";
       const t = new ve.Map({
         container: "map",
         // style: 'mapbox://styles/neatchenheng/cmd894dwn036m01rf7anc0k0d', //light
@@ -32446,16 +32447,16 @@ const wm = {
       this.zoom > 2 && (this.zoom = Math.floor(this.zoom) - 1, (t = this.map) == null || t.flyTo({ zoom: this.zoom, duration: 500 }));
     }
   }
-}, xm = { class: "mapbox-initial-gl4" }, vm = { class: "v-btn--variant-elevated rounded" }, _m = { class: "zoom" }, km = { class: "position-absolute left-0 bottom-0 ma-2 my-1 text-body-2 text-label" };
-function zm(t, e, o, i, a, r) {
+}, km = { class: "mapbox-initial-gl4" }, zm = { class: "v-btn--variant-elevated rounded" }, Lm = { class: "zoom" }, Pm = { class: "position-absolute left-0 bottom-0 ma-2 my-1 text-body-2 text-label" };
+function Cm(t, e, o, i, a, r) {
   const s = x("VBtn");
-  return y(), S("div", xm, [
+  return y(), S("div", km, [
     e[5] || (e[5] = l("div", { id: "map" }, null, -1)),
     l("div", {
       class: "menu-bar-box transition px-1 rounded d-flex flex-column",
       style: ie({ top: o.top + 268 + "px", right: a.right + "px" })
     }, [
-      l("div", vm, [
+      l("div", zm, [
         d(s, {
           "min-width": "32",
           width: "32",
@@ -32469,7 +32470,7 @@ function zm(t, e, o, i, a, r) {
           _: 1,
           __: [0]
         }, 8, ["onClick"]),
-        l("div", _m, h(Math.floor(a.zoom)), 1),
+        l("div", Lm, h(a.zoom ? Math.floor(a.zoom) : 0), 1),
         d(s, {
           "min-width": "32",
           width: "32",
@@ -32485,7 +32486,7 @@ function zm(t, e, o, i, a, r) {
         }, 8, ["onClick"])
       ])
     ], 4),
-    l("div", km, [
+    l("div", Pm, [
       e[2] || (e[2] = l("span", null, "© 2023", -1)),
       l("span", null, "-" + h(r.computeYear), 1),
       e[3] || (e[3] = l("span", { class: "text-uppercase ma-2" }, "ormwx.com", -1)),
@@ -32497,21 +32498,21 @@ function zm(t, e, o, i, a, r) {
     ])
   ]);
 }
-const Lm = /* @__PURE__ */ Y(wm, [["render", zm]]), Em = {
+const Tm = /* @__PURE__ */ Y(_m, [["render", Cm]]), Fm = {
   install(t) {
-    t.component("MapInitial", Lm), t.component("MapboxGL", ym), t.component("TropicalGL", Ka), t.component("LatLngGL", Ya), t.component("DateTimePicker", no), t.component("PortDetail", lo);
+    t.component("MapInitial", Tm), t.component("MapboxGL", xm), t.component("TropicalGL", Ka), t.component("LatLngGL", Ya), t.component("DateTimePicker", no), t.component("PortDetail", lo);
   }
 };
 export {
   no as DateTimePicker,
   Ya as LatLngGL,
-  Lm as MapInitial,
-  ym as MapboxGL,
-  Em as MapboxGLPlugin,
+  Tm as MapInitial,
+  xm as MapboxGL,
+  Fm as MapboxGLPlugin,
   ke as ParticleSchema,
   lo as PortDetail,
   Ka as TropicalGL,
   so as Viewport,
-  Ne as WebGL,
+  He as WebGL,
   he as WebGLSchema
 };