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

fix: nudge map areas with arrow keys

Browse Source
This commit is contained in:
Nico 2026-06-03 19:02:24 -07:00
parent e09a95e172
commit c8a29d20a8
2 changed files with 79 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ import {
} from "../../lib/locationMapUtils";
const DRAG_CHANGE_THRESHOLD = 2;
const NUDGE_KEYS = new Set(["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"]);
export default function LocationMapCanvas({
mode,
@ -118,12 +119,34 @@ export default function LocationMapCanvas({
};
const handleObjectKeyDown = (event, object) => {
if (!["Enter", " ", "Spacebar"].includes(event.key)) {
if (["Enter", " ", "Spacebar"].includes(event.key)) {
event.stopPropagation();
event.preventDefault();
selectObject(object);
return;
}
if (!canEditObjects || object.locked || !NUDGE_KEYS.has(event.key)) return;
event.stopPropagation();
event.preventDefault();
selectObject(object);
const nudgeAmount = event.shiftKey ? 25 : 10;
const deltaX = event.key === "ArrowLeft" ? -nudgeAmount : event.key === "ArrowRight" ? nudgeAmount : 0;
const deltaY = event.key === "ArrowUp" ? -nudgeAmount : event.key === "ArrowDown" ? nudgeAmount : 0;
remember();
setSelectedObjectKey(getObjectKey(object));
updateObjects((currentObjects) =>
currentObjects.map((candidate) =>
getObjectKey(candidate) === getObjectKey(object)
? {
...candidate,
x: candidate.x + deltaX,
y: candidate.y + deltaY,
}
: candidate
)
);
};
const handleShowZones = (event) => {

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

@ -596,6 +596,60 @@ test("admin selecting an object does not mark a draft dirty until it changes", a
await expect(page.getByRole("button", { name: "Undo" })).toBeEnabled();
});
test("admin nudges selected map areas with arrow keys", async ({ page }) => {
await mockMapShell(page);
const mapState = draftMapState([
{
id: 1352,
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();
await page.getByRole("button", { name: "Edit Objects" }).click();
const bakeryArea = page.getByRole("button", { name: "Map area Bakery" });
await bakeryArea.focus();
await expect(bakeryArea).toBeFocused();
await page.keyboard.press("Enter");
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveValue("40");
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveValue("40");
await expect(page.locator(".location-map-status")).toHaveText("Draft");
await page.keyboard.press("ArrowRight");
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveValue("50");
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveValue("40");
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
await expect(page.getByRole("button", { name: "Save Draft" })).toBeEnabled();
await expect(page.getByRole("button", { name: "Undo" })).toBeEnabled();
await page.keyboard.press("Shift+ArrowDown");
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveValue("50");
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveValue("65");
});
test("admin object numeric fields expose map bounds and clamp edits", async ({ page }) => {
await mockMapShell(page);