nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: reset map scroll on fit

Browse Source
This commit is contained in:
Nico 2026-06-04 13:20:57 -07:00
parent 37a7b79cd8
commit 64b8071578
2 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/hooks/useLocationMapViewControls.js
View File

@ -125,6 +125,7 @@ export default function useLocationMapViewControls({
Math.min(availableWidth / mapSize.width, availableHeight / mapSize.height) Math.min(availableWidth / mapSize.width, availableHeight / mapSize.height)
); );
setZoom(Number(nextZoom.toFixed(2))); setZoom(Number(nextZoom.toFixed(2)));
scrollElement?.scrollTo({ left: 0, top: 0 });
}, [mapSize.height, mapSize.width, setZoom, svgRef]); }, [mapSize.height, mapSize.width, setZoom, svgRef]);
return { return {

16
frontend/tests/location-map-manager.spec.ts
View File

@ -3052,6 +3052,18 @@ test("mobile fit zoom fits the map into the visible canvas", async ({ page }) =>
}); });
await page.goto("/stores/100/locations/10/map"); await page.goto("/stores/100/locations/10/map");
const scroll = page.locator(".location-map-scroll");
await scroll.evaluate((element) => {
element.scrollLeft = 320;
element.scrollTop = 240;
});
const pannedScroll = await scroll.evaluate((element) => ({
left: element.scrollLeft,
top: element.scrollTop,
}));
expect(pannedScroll.left).toBeGreaterThan(0);
expect(pannedScroll.top).toBeGreaterThan(0);
await page.getByRole("button", { name: "Fit" }).click(); await page.getByRole("button", { name: "Fit" }).click();
const zoomText = page.locator(".location-map-zoom-controls span"); const zoomText = page.locator(".location-map-zoom-controls span");
@ -3067,6 +3079,10 @@ test("mobile fit zoom fits the map into the visible canvas", async ({ page }) =>
if (!scrollBox || !svgBox) throw new Error("Mobile fitted map was not measurable"); if (!scrollBox || !svgBox) throw new Error("Mobile fitted map was not measurable");
expect(svgBox.width).toBeLessThanOrEqual(scrollBox.width + 1); expect(svgBox.width).toBeLessThanOrEqual(scrollBox.width + 1);
expect(svgBox.height).toBeLessThanOrEqual(scrollBox.height + 1); expect(svgBox.height).toBeLessThanOrEqual(scrollBox.height + 1);
await expect.poll(async () => scroll.evaluate((element) => ({
left: element.scrollLeft,
top: element.scrollTop,
}))).toEqual({ left: 0, top: 0 });
}); });
test("zoom controls disable at map zoom limits", async ({ page }) => { test("zoom controls disable at map zoom limits", async ({ page }) => {