Add store location map manager #20
@ -6,6 +6,7 @@ import {
|
|||||||
} from "../../lib/locationMapUtils";
|
} from "../../lib/locationMapUtils";
|
||||||
|
|
||||||
const DRAG_CHANGE_THRESHOLD = 2;
|
const DRAG_CHANGE_THRESHOLD = 2;
|
||||||
|
const NUDGE_KEYS = new Set(["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"]);
|
||||||
|
|
||||||
export default function LocationMapCanvas({
|
export default function LocationMapCanvas({
|
||||||
mode,
|
mode,
|
||||||
@ -118,12 +119,34 @@ export default function LocationMapCanvas({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleObjectKeyDown = (event, object) => {
|
const handleObjectKeyDown = (event, object) => {
|
||||||
if (!["Enter", " ", "Spacebar"].includes(event.key)) {
|
if (["Enter", " ", "Spacebar"].includes(event.key)) {
|
||||||
return;
|
|
||||||
}
|
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
selectObject(object);
|
selectObject(object);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!canEditObjects || object.locked || !NUDGE_KEYS.has(event.key)) return;
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
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) => {
|
const handleShowZones = (event) => {
|
||||||
|
|||||||
@ -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();
|
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 }) => {
|
test("admin object numeric fields expose map bounds and clamp edits", async ({ page }) => {
|
||||||
await mockMapShell(page);
|
await mockMapShell(page);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user