pukaad-ui-lib 1.222.0 → 1.224.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.222.0",
+  "version": "1.224.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-map.vue

@@ -21,10 +21,14 @@ const mapContainer = ref(null);
 let map = null;
 let polygonLayer = null;
 let marker = null;
+let L = null;
+let drawDebounceTimer = null;
+let subdistrictsCache = null;
+let districtsCache = null;
 const { getProvinceById } = useThaiAddress();
 onMounted(async () => {
   const leafletModule = await import("leaflet");
-  const L = leafletModule.default ?? leafletModule;
+  L = leafletModule.default ?? leafletModule;
   if (mapContainer.value) {
     map = L.map(mapContainer.value, {
       zoomControl: false,
@@ -40,29 +44,51 @@ onMounted(async () => {
       }
     });
     const resizeObserver = new ResizeObserver(() => {
-      if (map) {
-        map.invalidateSize();
-      }
+      if (map) map.invalidateSize();
     });
     resizeObserver.observe(mapContainer.value);
-    setTimeout(() => {
-      if (map) map.invalidateSize();
-    }, 550);
-    drawPolygon(L);
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && map) {
+            map.invalidateSize();
+            if (polygonLayer) {
+              map.flyToBounds(polygonLayer.getBounds(), { padding: [20, 20], duration: 0.3 });
+            }
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+    intersectionObserver.observe(mapContainer.value);
+    [100, 300, 600, 1200].forEach((delay) => {
+      setTimeout(() => {
+        if (map) map.invalidateSize();
+      }, delay);
+    });
+    drawPolygon();
   }
 });
 watch(
   () => [props.provinceId, props.amphurId, props.tambonId],
   async () => {
-    if (typeof window !== "undefined") {
-      const leafletModule = await import("leaflet");
-      const L = leafletModule.default ?? leafletModule;
-      drawPolygon(L);
+    if (typeof window === "undefined") return;
+    if (!map) {
+      await new Promise((resolve) => {
+        const timer = setInterval(() => {
+          if (map) {
+            clearInterval(timer);
+            resolve();
+          }
+        }, 50);
+      });
     }
+    if (drawDebounceTimer) clearTimeout(drawDebounceTimer);
+    drawDebounceTimer = setTimeout(() => drawPolygon(), 80);
   }
 );
-const drawPolygon = async (L) => {
-  if (!map) return;
+const drawPolygon = async () => {
+  if (!map || !L) return;
   if (polygonLayer) {
     map.removeLayer(polygonLayer);
     polygonLayer = null;
@@ -73,15 +99,19 @@ const drawPolygon = async (L) => {
   }
   let feature = null;
   if (props.tambonId) {
-    const module = await import("@/runtime/geo/subdistricts.json");
-    const subdistrictsGeoJson = module.default || module;
-    feature = subdistrictsGeoJson.features.find(
+    if (!subdistrictsCache) {
+      const module = await import("@/runtime/geo/subdistricts.json");
+      subdistrictsCache = module.default || module;
+    }
+    feature = subdistrictsCache.features.find(
       (f) => f.properties.tam_code === props.tambonId?.toString()
     );
   } else if (props.amphurId) {
-    const module = await import("@/runtime/geo/districts.json");
-    const districtsGeoJson = module.default || module;
-    feature = districtsGeoJson.features.find(
+    if (!districtsCache) {
+      const module = await import("@/runtime/geo/districts.json");
+      districtsCache = module.default || module;
+    }
+    feature = districtsCache.features.find(
       (f) => f.properties.amp_code === props.amphurId?.toString()
     );
   } else if (props.provinceId) {
@@ -105,7 +135,7 @@ const drawPolygon = async (L) => {
         // handled by rgba
       }
     }).addTo(map);
-    map.fitBounds(polygonLayer.getBounds(), { padding: [20, 20] });
+    map.flyToBounds(polygonLayer.getBounds(), { padding: [20, 20], duration: 0.5 });
     const center = polygonLayer.getBounds().getCenter();
     const divIcon = L.divIcon({
       html: mapPinSvg,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.222.0",
+  "version": "1.224.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",