fix switch Landscape -> Portrait
This commit is contained in:
parent
ec22714f01
commit
e9d28197df
5 changed files with 964 additions and 279 deletions
5
.claude/agent-memory/hrms-checkin-expert/MEMORY.md
Normal file
5
.claude/agent-memory/hrms-checkin-expert/MEMORY.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# HRMS Check-in Expert Memory
|
||||
|
||||
## Project Issues & Fixes
|
||||
|
||||
- [Position Orientation Change Fix](issue_position_orientation_change_fix.md) - Fix for position map not displaying on screen orientation changes
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
name: position_orientation_change_fix
|
||||
description: Fix for position map not displaying on screen orientation changes
|
||||
type: project
|
||||
---
|
||||
|
||||
## Issue: Position/Geolocation Not Displaying on Screen Orientation Changes
|
||||
|
||||
**Problem:**
|
||||
The ArcGIS map component (`AscGISMap.vue`) failed to display or update position when the screen orientation changed between portrait and landscape modes.
|
||||
|
||||
**Root Cause:**
|
||||
1. The component uses `v-if="$q.screen.gt.xs"` for conditional rendering of different layouts
|
||||
2. When orientation changes, the ArcGIS MapView doesn't automatically resize to fit the new container dimensions
|
||||
3. ArcGIS MapView requires manual `resize()` call when its container's size changes
|
||||
|
||||
**Solution Implemented:**
|
||||
Added screen resize handling to `src/components/AscGISMap.vue`:
|
||||
|
||||
1. **Added state tracking:**
|
||||
- `isMapInitialized` ref to track when map is ready
|
||||
- `isInitializing` ref to prevent concurrent initializations
|
||||
|
||||
2. **Added `handleMapResize()` function:**
|
||||
- Checks if mapView exists and isn't destroyed
|
||||
- Uses `nextTick()` to ensure DOM updates complete before resizing
|
||||
- Calls `mapView.value.resize()` to update map dimensions
|
||||
|
||||
3. **Added watcher on `$q.screen.gt.xs`:**
|
||||
- Triggers when screen size crosses the xs breakpoint
|
||||
- Waits for DOM update via `nextTick()`
|
||||
- Calls `handleMapResize()` to adjust map
|
||||
|
||||
4. **Added window resize event listener:**
|
||||
- Falls back for orientation changes that might not trigger Quasar's screen watcher
|
||||
- Debounced with 300ms timeout to avoid excessive calls
|
||||
- Properly cleaned up on component unmount
|
||||
|
||||
**Files Modified:**
|
||||
- `src/components/AscGISMap.vue` - Added resize handling logic
|
||||
|
||||
**Best Practices Applied:**
|
||||
- Proper cleanup of event listeners in `onBeforeUnmount`
|
||||
- Debouncing resize events for performance
|
||||
- Using `nextTick()` to ensure DOM synchronization
|
||||
- Checking for destroyed state before calling map methods
|
||||
|
||||
**Note:** The Google Maps component (`MapCheckin.vue`) was not affected as `vue3-google-map` handles resize automatically.
|
||||
Loading…
Add table
Add a link
Reference in a new issue