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

fix: keep map area edits inside canvas

Browse Source
This commit is contained in:
Nico 2026-06-04 23:09:28 -07:00
parent 03a4817c5e
commit ac028bc446
2 changed files with 126 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import { useEffect, useMemo, useRef, useState } from "react";
import {
clampObjectToMap,
clientPointToMap,
getObjectKey,
itemMatchesMapFilters,
@ -25,6 +26,18 @@ function getSelectedObjectScrollKey(object, selectedObjectKey, zoom) {
].join(":");
}
function clampResizedObjectToMap(object, mapSize) {
const x = Math.max(0, Math.min(object.x, mapSize.width - 40));
const y = Math.max(0, Math.min(object.y, mapSize.height - 40));
return {
...object,
x,
y,
width: Math.max(40, Math.min(object.width, mapSize.width - x)),
height: Math.max(40, Math.min(object.height, mapSize.height - y)),
};
}
export default function LocationMapCanvas({
mode,
objects,
@ -194,17 +207,17 @@ export default function LocationMapCanvas({
currentObjects.map((object) => {
if (getObjectKey(object) !== dragState.key) return object;
if (dragState.type === "resize") {
return {
return clampResizedObjectToMap({
...object,
width: Math.max(40, dragState.startObject.width + deltaX),
height: Math.max(40, dragState.startObject.height + deltaY),
};
}, mapSize);
}
return {
return clampObjectToMap({
...object,
x: dragState.startObject.x + deltaX,
y: dragState.startObject.y + deltaY,
};
}, mapSize);
})
);
};
@ -257,11 +270,11 @@ export default function LocationMapCanvas({
updateObjects((currentObjects) =>
currentObjects.map((candidate) =>
getObjectKey(candidate) === getObjectKey(object)
? {
? clampObjectToMap({
...candidate,
x: candidate.x + deltaX,
y: candidate.y + deltaY,
}
}, mapSize)
: candidate
)
);

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

@ -2087,6 +2087,113 @@ test("admin nudges selected map areas with arrow keys", async ({ page }) => {
await expect(bakeryArea).toHaveAttribute("y", "65");
});
test("admin cannot nudge map areas outside the canvas", async ({ page }) => {
await mockMapShell(page);
const mapState = draftMapState([
{
id: 1353,
location_map_id: 900,
zone_id: 501,
zone_name: "Bakery",
type: "zone",
label: "Bakery",
x: 740,
y: 540,
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 bakeryArea = page.getByRole("button", { name: "Map area Bakery" });
await bakeryArea.focus();
await page.keyboard.press("Enter");
await expect(bakeryArea).toHaveAttribute("x", "740");
await expect(bakeryArea).toHaveAttribute("y", "540");
await page.keyboard.press("Shift+ArrowRight");
await page.keyboard.press("Shift+ArrowDown");
await expect(bakeryArea).toHaveAttribute("x", "740");
await expect(bakeryArea).toHaveAttribute("y", "540");
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
});
test("admin cannot resize map areas beyond the canvas", async ({ page }) => {
await mockMapShell(page);
const mapState = draftMapState([
{
id: 1354,
location_map_id: 900,
zone_id: 501,
zone_name: "Bakery",
type: "zone",
label: "Bakery",
x: 820,
y: 580,
width: 180,
height: 120,
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 bakeryArea = page.getByRole("button", { name: "Map area Bakery" });
await bakeryArea.click();
await expect(bakeryArea).toHaveAttribute("x", "820");
await expect(bakeryArea).toHaveAttribute("y", "580");
await expect(bakeryArea).toHaveAttribute("width", "180");
await expect(bakeryArea).toHaveAttribute("height", "120");
const resizeHandle = page.locator(".location-map-resize-handle");
await expect(resizeHandle).toBeVisible();
const resizeBox = await resizeHandle.boundingBox();
expect(resizeBox).not.toBeNull();
if (!resizeBox) throw new Error("Resize handle was not measurable");
await page.mouse.move(resizeBox.x + resizeBox.width / 2, resizeBox.y + resizeBox.height / 2);
await page.mouse.down();
await page.mouse.move(resizeBox.x + resizeBox.width / 2 + 160, resizeBox.y + resizeBox.height / 2 + 160, {
steps: 8,
});
await page.mouse.up();
await expect(bakeryArea).toHaveAttribute("x", "820");
await expect(bakeryArea).toHaveAttribute("y", "580");
await expect(bakeryArea).toHaveAttribute("width", "180");
await expect(bakeryArea).toHaveAttribute("height", "120");
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
});
test("admin selected map area uses compact editable fields", async ({ page }) => {
await mockMapShell(page);