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

fix: pan mobile map while editing

Browse Source
This commit is contained in:
Nico 2026-06-04 06:32:17 -07:00
parent a0feb0e0c9
commit f86709f45e
2 changed files with 69 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/maps/LocationMapCanvas.jsx
View File

@ -32,7 +32,7 @@ export default function LocationMapCanvas({
updateObjects,
}) {
const canEditObjects = !editingLocked && mode === "edit" && editorTool === "edit";
const canDragPan = mode === "view" || editorTool === "pan";
const canDragPan = mode === "view" || editorTool === "pan" || canEditObjects;
const hiddenByZonesLayer = objects.length > 0 && !filters.showZones;
const visibleObjectCount = filters.showZones
? objects.filter((object) => object.visible).length
@ -206,6 +206,7 @@ export default function LocationMapCanvas({
const startPan = (event) => {
if (!canDragPan || !scrollRef.current || event.button !== 0) return;
const objectElement = event.target.closest?.(".location-map-object");
if (canEditObjects && objectElement) return;
event.currentTarget.setPointerCapture?.(event.pointerId);
panDragRef.current = {
startX: event.clientX,

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

@ -2673,6 +2673,73 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0);
});
test("mobile editor pans from empty map space without moving areas", async ({ page }) => {
await page.setViewportSize({ width: 390, height: 844 });
await mockMapShell(page);
const mapState = draftMapState([
{
id: 1611,
location_map_id: 900,
zone_id: 501,
zone_name: "Bakery",
type: "zone",
label: "Bakery",
x: 40,
y: 40,
width: 260,
height: 160,
rotation: 0,
locked: false,
visible: true,
sort_order: 1,
},
], true);
await page.route("**/households/1/locations/10/map", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify(mapState),
});
});
await page.goto("/stores/100/locations/10/map");
await page.getByRole("button", { name: "Continue Editing" }).click();
const scroll = page.locator(".location-map-scroll");
const scrollBox = await scroll.boundingBox();
expect(scrollBox).not.toBeNull();
if (!scrollBox) throw new Error("Mobile edit map scroll area was not measurable");
const bakeryArea = page.locator('[data-object-key="1611"]').locator("rect").first();
await expect(bakeryArea).toHaveAttribute("x", "40");
await expect(bakeryArea).toHaveAttribute("y", "40");
const beforePan = await scroll.evaluate((element) => ({
left: element.scrollLeft,
top: element.scrollTop,
}));
expect(beforePan).toEqual({ left: 0, top: 0 });
const startX = scrollBox.x + scrollBox.width - 48;
const startY = scrollBox.y + scrollBox.height - 48;
await page.mouse.move(startX, startY);
await page.mouse.down();
await page.mouse.move(startX - 140, startY - 100, { steps: 8 });
await page.mouse.up();
await expect.poll(async () =>
scroll.evaluate((element) => element.scrollLeft)
).toBeGreaterThan(80);
await expect.poll(async () =>
scroll.evaluate((element) => element.scrollTop)
).toBeGreaterThan(50);
await expect(bakeryArea).toHaveAttribute("x", "40");
await expect(bakeryArea).toHaveAttribute("y", "40");
await expect(page.locator(".location-map-status")).toHaveText("Draft");
});
test("members can view a published map but cannot edit it", async ({ page }) => {
await mockMapShell(page, memberHousehold);