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

fix: ignore no-op map edge edits

Browse Source
This commit is contained in:
Nico 2026-06-04 23:21:07 -07:00
parent ac028bc446
commit 932033682d
2 changed files with 46 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,31 @@ function clampResizedObjectToMap(object, mapSize) {
};
}
function hasObjectBoundsChanged(object, nextObject) {
return (
object.x !== nextObject.x ||
object.y !== nextObject.y ||
object.width !== nextObject.width ||
object.height !== nextObject.height
);
}
function getDraggedObjectUpdate(object, dragState, deltaX, deltaY, mapSize) {
if (dragState.type === "resize") {
return clampResizedObjectToMap({
...object,
width: Math.max(40, dragState.startObject.width + deltaX),
height: Math.max(40, dragState.startObject.height + deltaY),
}, mapSize);
}
return clampObjectToMap({
...object,
x: dragState.startObject.x + deltaX,
y: dragState.startObject.y + deltaY,
}, mapSize);
}
export default function LocationMapCanvas({
mode,
objects,
@ -198,6 +223,11 @@ export default function LocationMapCanvas({
Math.abs(deltaY) >= DRAG_CHANGE_THRESHOLD;
if (!hasMeaningfulChange) return;
const draggedObject = objects.find((object) => getObjectKey(object) === dragState.key);
if (!draggedObject) return;
const nextDraggedObject = getDraggedObjectUpdate(draggedObject, dragState, deltaX, deltaY, mapSize);
if (!hasObjectBoundsChanged(draggedObject, nextDraggedObject)) return;
if (!objectDragHistoryCapturedRef.current) {
remember();
objectDragHistoryCapturedRef.current = true;
@ -206,18 +236,7 @@ export default function LocationMapCanvas({
updateObjects((currentObjects) =>
currentObjects.map((object) => {
if (getObjectKey(object) !== dragState.key) return object;
if (dragState.type === "resize") {
return clampResizedObjectToMap({
...object,
width: Math.max(40, dragState.startObject.width + deltaX),
height: Math.max(40, dragState.startObject.height + deltaY),
}, mapSize);
}
return clampObjectToMap({
...object,
x: dragState.startObject.x + deltaX,
y: dragState.startObject.y + deltaY,
}, mapSize);
return getDraggedObjectUpdate(object, dragState, deltaX, deltaY, mapSize);
})
);
};
@ -264,17 +283,20 @@ export default function LocationMapCanvas({
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;
const nextObject = clampObjectToMap({
...object,
x: object.x + deltaX,
y: object.y + deltaY,
}, mapSize);
setSelectedObjectKey(getObjectKey(object));
if (!hasObjectBoundsChanged(object, nextObject)) return;
remember();
setSelectedObjectKey(getObjectKey(object));
updateObjects((currentObjects) =>
currentObjects.map((candidate) =>
getObjectKey(candidate) === getObjectKey(object)
? clampObjectToMap({
...candidate,
x: candidate.x + deltaX,
y: candidate.y + deltaY,
}, mapSize)
? nextObject
: candidate
)
);

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

@ -2131,7 +2131,9 @@ test("admin cannot nudge map areas outside the canvas", async ({ page }) => {
await expect(bakeryArea).toHaveAttribute("x", "740");
await expect(bakeryArea).toHaveAttribute("y", "540");
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
await expect(page.locator(".location-map-status")).toHaveText("Draft");
await expect(page.getByRole("button", { name: "Save Draft" })).toHaveCount(0);
await expect(page.getByRole("button", { name: "Undo" })).toBeDisabled();
});
test("admin cannot resize map areas beyond the canvas", async ({ page }) => {
@ -2191,7 +2193,9 @@ test("admin cannot resize map areas beyond the canvas", async ({ page }) => {
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");
await expect(page.locator(".location-map-status")).toHaveText("Draft");
await expect(page.getByRole("button", { name: "Save Draft" })).toHaveCount(0);
await expect(page.getByRole("button", { name: "Undo" })).toBeDisabled();
});
test("admin selected map area uses compact editable fields", async ({ page }) => {