Skip to content

Fix ChapterMap locking behavior and wide screen layout issues #3322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kasya merged 5 commits into from
Jan 18, 2026
Merged

Fix ChapterMap locking behavior and wide screen layout issues #3322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
958df43
Added map locking and fixed layout
anurag2787 Jan 12, 2026
4684a4a
fixed pin clicking when map is locked
anurag2787 Jan 13, 2026
ea33877
Merge branch 'main' of github.com:anurag2787/Nest into fix/map-lockin…
anurag2787 Jan 13, 2026
1bd8102
fixed coderabbit review
anurag2787 Jan 13, 2026
e6bc0da
Merge branch 'main' into fix/map-locking-and-screen-layout
anurag2787 Jan 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions frontend/__tests__/a11y/components/ChapterMap.a11y.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,27 @@ const mockMap = {
enable: jest.fn(),
disable: jest.fn(),
},
dragging: {
enable: jest.fn(),
disable: jest.fn(),
},
touchZoom: {
enable: jest.fn(),
disable: jest.fn(),
},
doubleClickZoom: {
enable: jest.fn(),
disable: jest.fn(),
},
keyboard: {
enable: jest.fn(),
disable: jest.fn(),
},
getContainer: jest.fn(() => ({
clientWidth: 800,
clientHeight: 400,
})),
setMinZoom: jest.fn(),
}

const mockZoomControl = {
Expand Down
21 changes: 21 additions & 0 deletions frontend/__tests__/unit/components/ChapterMap.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,31 @@ let mockMapInstance: unknown = null
const mockMap = {
setView: jest.fn().mockReturnThis(),
fitBounds: jest.fn().mockReturnThis(),
setMinZoom: jest.fn().mockReturnThis(),
getContainer: jest.fn(() => ({
clientWidth: 800,
clientHeight: 600,
})),
scrollWheelZoom: {
enable: jest.fn(),
disable: jest.fn(),
},
dragging: {
enable: jest.fn(),
disable: jest.fn(),
},
touchZoom: {
enable: jest.fn(),
disable: jest.fn(),
},
doubleClickZoom: {
enable: jest.fn(),
disable: jest.fn(),
},
keyboard: {
enable: jest.fn(),
disable: jest.fn(),
},
}

const mockZoomControl = {
Expand Down
75 changes: 51 additions & 24 deletions frontend/src/components/ChapterMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,22 @@ const MapZoomControl = ({ isMapActive }: { isMapActive: boolean }) => {
if (!map) return
if (isMapActive) {
map.scrollWheelZoom.enable()
map.dragging.enable()
map.touchZoom.enable()
map.doubleClickZoom.enable()
map.keyboard.enable()

if (!zoomControlRef.current) {
zoomControlRef.current = L.control.zoom({ position: 'topleft' })
zoomControlRef.current.addTo(map)
}
} else {
map.scrollWheelZoom.disable()
map.dragging.disable()
map.touchZoom.disable()
map.doubleClickZoom.disable()
map.keyboard.disable()

if (zoomControlRef.current) {
zoomControlRef.current.remove()
zoomControlRef.current = null
Expand All @@ -39,6 +49,10 @@ const MapZoomControl = ({ isMapActive }: { isMapActive: boolean }) => {
return () => {
if (!map) return
map.scrollWheelZoom.disable()
map.dragging.disable()
map.touchZoom.disable()
map.doubleClickZoom.disable()
map.keyboard.disable()
if (zoomControlRef.current) {
zoomControlRef.current.remove()
zoomControlRef.current = null
Expand All @@ -61,6 +75,14 @@ const MapViewUpdater = ({

useEffect(() => {
if (!map) return
const container = map.getContainer()
const width = container.clientWidth
const height = container.clientHeight
const aspectRatio = height > 0 ? width / height : 1

const dynamicMinZoom = aspectRatio > 2 ? 1 : 2
map.setMinZoom(dynamicMinZoom)

if (userLocation && validGeoLocData.length > 0) {
const maxNearestChapters = 5
const localChapters = validGeoLocData.slice(0, maxNearestChapters)
Expand All @@ -76,7 +98,8 @@ const MapViewUpdater = ({
]
const localBounds = L.latLngBounds(locationsForBounds)
const maxZoom = 12
map.fitBounds(localBounds, { maxZoom: maxZoom })
const padding = 50
map.fitBounds(localBounds, { maxZoom: maxZoom, padding: [padding, padding] })
} else if (showLocal && validGeoLocData.length > 0) {
const maxNearestChapters = 5
const localChapters = validGeoLocData.slice(0, maxNearestChapters - 1)
Expand All @@ -87,6 +110,7 @@ const MapViewUpdater = ({
])
)
const maxZoom = 7
const padding = 50
const nearestChapter = validGeoLocData[0]
map.setView(
[
Expand All @@ -95,9 +119,9 @@ const MapViewUpdater = ({
],
maxZoom
)
map.fitBounds(localBounds, { maxZoom: maxZoom })
map.fitBounds(localBounds, { maxZoom: maxZoom, padding: [padding, padding] })
} else {
map.setView([20, 0], 2)
map.setView([20, 0], Math.max(dynamicMinZoom, 2))
}
}, [userLocation, showLocal, validGeoLocData, map])

Expand Down Expand Up @@ -167,11 +191,14 @@ const ChapterMap = ({
scrollWheelZoom={isMapActive}
style={{ height: '100%', width: '100%' }}
zoomControl={false}
minZoom={1}
maxZoom={18}
worldCopyJump={true}
maxBounds={[
[-90, -180],
[90, 180],
[-85, -180],
[85, 180],
]}
maxBoundsViscosity={1}
maxBoundsViscosity={0.5}
>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
Expand Down Expand Up @@ -224,26 +251,26 @@ const ChapterMap = ({
)}
</MapContainer>
{!isMapActive && (
<button
type="button"
tabIndex={0}
className="pointer-events-none absolute inset-0 z-[500] flex cursor-pointer items-center justify-center rounded-[inherit] bg-black/10"
onClick={() => {
setIsMapActive(true)
}}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
<div className="absolute inset-0 z-[1000] flex items-center justify-center bg-black/10">
<button
type="button"
tabIndex={0}
className="pointer-events-auto flex cursor-pointer items-center justify-center rounded-md bg-white/90 px-5 py-3 text-sm font-medium text-gray-700 shadow-lg transition-colors hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white"
onClick={() => {
setIsMapActive(true)
}
}}
aria-label="Unlock map"
>
<p className="pointer-events-auto flex items-center gap-2 rounded-md bg-white/90 px-5 py-3 text-sm font-medium text-gray-700 shadow-lg transition-colors hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white">
<FaUnlock aria-hidden="true" />
}}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
setIsMapActive(true)
}
}}
aria-label="Unlock map"
>
<FaUnlock aria-hidden="true" className="mr-2" />
Unlock map
</p>
</button>
</button>
</div>
)}
{isMapActive && (
<div className="absolute top-20 left-3 z-[999] w-fit">
Expand Down