diff --git a/src/components/AscGISMap.vue b/src/components/AscGISMap.vue index e2dd9b0..812dd24 100644 --- a/src/components/AscGISMap.vue +++ b/src/components/AscGISMap.vue @@ -65,27 +65,10 @@ const zoomMap = ref(18) const textTooltip = ref( 'พื้นที่ใกล้เคียงคือ สถานที่สำคัญรอบตัวคุณ (ไม่ใช่ตำแหน่งปัจจุบัน)' ) -const MAP_DEBUG = true let attachRetryTimer: number | undefined let mapInitVersion = 0 let isRecoveryReinitializing = false -function logMapDebug(event: string, payload?: Record) { - if (!MAP_DEBUG) { - return - } - - const mode = $q.screen.gt.xs ? 'desktop' : 'mobile' - console.log('[AscGISMap]', event, { - mode, - isMapInitialized: isMapInitialized.value, - isInitializing: isInitializing.value, - hasMapView: !!mapView.value, - mapDestroyed: !!mapView.value?.destroyed, - ...payload, - }) -} - function getActiveMapContainer() { return $q.screen.gt.xs ? desktopMapContainerRef.value @@ -96,29 +79,14 @@ async function waitForActiveMapContainer(maxAttempts = 25, delayMs = 120) { for (let i = 0; i < maxAttempts; i += 1) { await nextTick() const container = getActiveMapContainer() - if (i === 0 || i === maxAttempts - 1) { - logMapDebug('waitForContainer:attempt', { - attempt: i + 1, - maxAttempts, - width: container?.clientWidth || 0, - height: container?.clientHeight || 0, - }) - } if (container && container.clientWidth > 0 && container.clientHeight > 0) { - logMapDebug('waitForContainer:ready', { - attempt: i + 1, - width: container.clientWidth, - height: container.clientHeight, - }) return container } await new Promise((resolve) => setTimeout(resolve, delayMs)) } - logMapDebug('waitForContainer:failed') - return null } @@ -131,12 +99,10 @@ function clearAttachRetryTimer() { async function recoverMapByReinitialize() { if (isRecoveryReinitializing) { - logMapDebug('recover:skipAlreadyRunning') return } isRecoveryReinitializing = true - logMapDebug('recover:start', { mapInitVersion }) try { mapInitVersion += 1 @@ -151,16 +117,13 @@ async function recoverMapByReinitialize() { isMapInitialized.value = false await nextTick() await initializeMap() - logMapDebug('recover:initializeMapCompleted', { mapInitVersion }) } finally { isRecoveryReinitializing = false - logMapDebug('recover:end', { mapInitVersion }) } } function reattachAndResizeMap(retry = 0) { if (!mapView.value || mapView.value.destroyed) { - logMapDebug('reattach:skipNoMapView', { retry }) return } @@ -171,18 +134,12 @@ function reattachAndResizeMap(retry = 0) { activeContainer.clientWidth === 0 || activeContainer.clientHeight === 0 ) { - logMapDebug('reattach:containerNotReady', { - retry, - width: activeContainer?.clientWidth || 0, - height: activeContainer?.clientHeight || 0, - }) if (retry < 15) { clearAttachRetryTimer() attachRetryTimer = window.setTimeout(() => { reattachAndResizeMap(retry + 1) }, 140) } else if (!isRecoveryReinitializing) { - logMapDebug('reattach:triggerRecovery') void recoverMapByReinitialize() } return @@ -192,26 +149,14 @@ function reattachAndResizeMap(retry = 0) { nextTick(() => { if (!mapView.value || mapView.value.destroyed) { - logMapDebug('reattach:skipDestroyedAfterTick', { retry }) return } if (mapView.value.container !== activeContainer) { - logMapDebug('reattach:rebindContainer', { - width: activeContainer.clientWidth, - height: activeContainer.clientHeight, - }) mapView.value.container = null mapView.value.container = activeContainer } - logMapDebug('reattach:resize', { - retry, - width: activeContainer.clientWidth, - height: activeContainer.clientHeight, - center: mapView.value.center, - zoom: mapView.value.zoom, - }) mapView.value.resize() mapView.value.requestRender?.() mapView.value @@ -230,12 +175,10 @@ function reattachAndResizeMap(retry = 0) { async function initializeMap() { if (isInitializing.value || (mapView.value && !mapView.value.destroyed)) { - logMapDebug('initialize:skipAlreadyRunningOrReady') return } const initVersion = ++mapInitVersion - logMapDebug('initialize:start', { initVersion }) isInitializing.value = true @@ -250,7 +193,6 @@ async function initializeMap() { 'esri/Graphic', 'esri/layers/TileLayer', ]) - logMapDebug('initialize:modulesLoaded', { initVersion }) // Set apiKey // esriConfig.apiKey = // 'AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP' @@ -267,10 +209,6 @@ async function initializeMap() { }) if (initVersion !== mapInitVersion) { - logMapDebug('initialize:cancelledAfterMapCreated', { - initVersion, - mapInitVersion, - }) return } @@ -284,37 +222,18 @@ async function initializeMap() { ) if (initVersion !== mapInitVersion) { - logMapDebug('initialize:cancelledAfterGeolocation', { - initVersion, - mapInitVersion, - }) return } const { latitude, longitude } = position.coords - logMapDebug('initialize:geolocationSuccess', { - initVersion, - latitude, - longitude, - }) const mapContainer = await waitForActiveMapContainer() if (!mapContainer || initVersion !== mapInitVersion) { - logMapDebug('initialize:containerUnavailableOrCancelled', { - initVersion, - mapInitVersion, - }) isMapInitialized.value = false return } - logMapDebug('initialize:containerReady', { - initVersion, - width: mapContainer.clientWidth, - height: mapContainer.clientHeight, - }) - mapView.value = new MapView({ container: mapContainer, map: map, @@ -336,13 +255,8 @@ async function initializeMap() { }) await mapView.value.when() - logMapDebug('initialize:mapViewReady', { initVersion }) if (initVersion !== mapInitVersion) { - logMapDebug('initialize:cancelledAfterMapViewReady', { - initVersion, - mapInitVersion, - }) if (mapView.value && !mapView.value.destroyed) { mapView.value.destroy() } @@ -438,10 +352,6 @@ async function initializeMap() { ) .then((response) => { if (initVersion !== mapInitVersion || !mapView.value) { - logMapDebug('initialize:poiIgnoredByVersionOrMap', { - initVersion, - mapInitVersion, - }) return } @@ -473,25 +383,13 @@ async function initializeMap() { }) updateLocation(latitude, longitude, poiPlaceName.value) - logMapDebug('initialize:poiSuccess', { - initVersion, - poiPlaceName: poiPlaceName.value, - }) }) .catch(() => { if (initVersion !== mapInitVersion) { - logMapDebug('initialize:poiErrorIgnoredByVersion', { - initVersion, - mapInitVersion, - }) return } poiPlaceName.value = poiPlaceName.value || 'ไม่พบข้อมูล' updateLocation(latitude, longitude, poiPlaceName.value) - logMapDebug('initialize:poiErrorFallback', { - initVersion, - poiPlaceName: poiPlaceName.value, - }) }) if (initVersion === mapInitVersion) { @@ -501,21 +399,11 @@ async function initializeMap() { if (initVersion === mapInitVersion) { isMapInitialized.value = false } - logMapDebug('initialize:error', { - initVersion, - mapInitVersion, - error: error instanceof Error ? error.message : String(error), - }) console.error('Error loading the map', error) } finally { if (initVersion === mapInitVersion) { isInitializing.value = false } - logMapDebug('initialize:end', { - initVersion, - mapInitVersion, - isMapInitialized: isMapInitialized.value, - }) } } @@ -609,7 +497,6 @@ const handleWindowResize = () => { * Only call resize() if the map is fully initialized */ function handleMapResize() { - logMapDebug('handleMapResize:called') if (mapView.value && !mapView.value.destroyed && isMapInitialized.value) { // Use nextTick to ensure the DOM has finished updating before resizing reattachAndResizeMap() @@ -626,14 +513,9 @@ watch( async (newValue) => { // Skip if no actual change (same layout) if (newValue === currentScreenSize.value) { - logMapDebug('screenWatch:skipNoChange', { newValue }) return } - logMapDebug('screenWatch:changed', { - oldValue: currentScreenSize.value, - newValue, - }) currentScreenSize.value = newValue if (!newValue) { mobileMapExpanded.value = true @@ -645,7 +527,6 @@ watch( // Always destroy and re-initialize when screen size changes // This ensures the map is attached to the correct container if (mapView.value && !mapView.value.destroyed) { - logMapDebug('screenWatch:destroyMapView') mapView.value.destroy() mapView.value = null } @@ -662,15 +543,10 @@ watch( await initializeMap() if (!mapView.value || mapView.value.destroyed) { - logMapDebug('screenWatch:missingMapAfterInitialize, triggerRecovery') await recoverMapByReinitialize() } reattachAndResizeMap() - logMapDebug('screenWatch:reinitialized', { - hasMapViewAfterReinit: !!mapView.value, - mapDestroyedAfterReinit: !!mapView.value?.destroyed, - }) } } ) @@ -687,28 +563,19 @@ watch( // Set up resize event listener on mount onMounted(async () => { - logMapDebug('lifecycle:mounted') window.addEventListener('resize', handleWindowResize) // Component can be remounted after orientation/layout switches. // Recreate map automatically when consent is already granted. if (privacyStore.isAccepted && (!mapView.value || mapView.value.destroyed)) { - logMapDebug('lifecycle:mounted:triggerInitialize') await waitForActiveMapContainer(30, 100) await initializeMap() reattachAndResizeMap() - } else { - logMapDebug('lifecycle:mounted:skipInitialize', { - privacyAccepted: privacyStore.isAccepted, - hasMapView: !!mapView.value, - mapDestroyed: !!mapView.value?.destroyed, - }) } }) // Cleanup map resources when component unmounts onBeforeUnmount(() => { - logMapDebug('lifecycle:beforeUnmount') clearAttachRetryTimer() if (mapView.value) { diff --git a/src/components/MapCheckin.vue b/src/components/MapCheckin_Backup.vue similarity index 100% rename from src/components/MapCheckin.vue rename to src/components/MapCheckin_Backup.vue