fix: bound map object numeric edits
This commit is contained in:
parent
f8b3a684b8
commit
bff830dd4b
@ -32,6 +32,7 @@ export default function LocationMapBottomSheet({
|
|||||||
savingAction,
|
savingAction,
|
||||||
hasUnsavedChanges,
|
hasUnsavedChanges,
|
||||||
mapState,
|
mapState,
|
||||||
|
mapSize,
|
||||||
onAddObject,
|
onAddObject,
|
||||||
onUndo,
|
onUndo,
|
||||||
onRedo,
|
onRedo,
|
||||||
@ -75,6 +76,12 @@ export default function LocationMapBottomSheet({
|
|||||||
const changedLayerCount = DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length;
|
const changedLayerCount = DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length;
|
||||||
const unmappedItemPreview = visibleUnmappedItems.slice(0, 8);
|
const unmappedItemPreview = visibleUnmappedItems.slice(0, 8);
|
||||||
const hiddenUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length;
|
const hiddenUnmappedItemCount = visibleUnmappedItems.length - unmappedItemPreview.length;
|
||||||
|
const selectedWidth = Number(selectedObject?.width) || 40;
|
||||||
|
const selectedHeight = Number(selectedObject?.height) || 40;
|
||||||
|
const maxX = Math.max(0, Math.round((mapSize?.width || selectedWidth) - selectedWidth));
|
||||||
|
const maxY = Math.max(0, Math.round((mapSize?.height || selectedHeight) - selectedHeight));
|
||||||
|
const maxWidth = Math.max(40, Math.round(mapSize?.width || selectedWidth));
|
||||||
|
const maxHeight = Math.max(40, Math.round(mapSize?.height || selectedHeight));
|
||||||
const saveDraftLabel = savingAction === "save" ? "Saving..." : "Save Draft";
|
const saveDraftLabel = savingAction === "save" ? "Saving..." : "Save Draft";
|
||||||
const publishLabel = savingAction === "publish" ? "Publishing..." : "Publish";
|
const publishLabel = savingAction === "publish" ? "Publishing..." : "Publish";
|
||||||
const showSelectedZoneItems = () => {
|
const showSelectedZoneItems = () => {
|
||||||
@ -234,6 +241,9 @@ export default function LocationMapBottomSheet({
|
|||||||
X
|
X
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max={maxX}
|
||||||
|
step="1"
|
||||||
value={Math.round(selectedObject.x)}
|
value={Math.round(selectedObject.x)}
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
onChange={(event) => onObjectField("x", Number(event.target.value))}
|
onChange={(event) => onObjectField("x", Number(event.target.value))}
|
||||||
@ -243,6 +253,9 @@ export default function LocationMapBottomSheet({
|
|||||||
Y
|
Y
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
|
min="0"
|
||||||
|
max={maxY}
|
||||||
|
step="1"
|
||||||
value={Math.round(selectedObject.y)}
|
value={Math.round(selectedObject.y)}
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
onChange={(event) => onObjectField("y", Number(event.target.value))}
|
onChange={(event) => onObjectField("y", Number(event.target.value))}
|
||||||
@ -252,6 +265,9 @@ export default function LocationMapBottomSheet({
|
|||||||
W
|
W
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
|
min="40"
|
||||||
|
max={maxWidth}
|
||||||
|
step="1"
|
||||||
value={Math.round(selectedObject.width)}
|
value={Math.round(selectedObject.width)}
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
onChange={(event) => onObjectField("width", Number(event.target.value))}
|
onChange={(event) => onObjectField("width", Number(event.target.value))}
|
||||||
@ -261,6 +277,9 @@ export default function LocationMapBottomSheet({
|
|||||||
H
|
H
|
||||||
<input
|
<input
|
||||||
type="number"
|
type="number"
|
||||||
|
min="40"
|
||||||
|
max={maxHeight}
|
||||||
|
step="1"
|
||||||
value={Math.round(selectedObject.height)}
|
value={Math.round(selectedObject.height)}
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
onChange={(event) => onObjectField("height", Number(event.target.value))}
|
onChange={(event) => onObjectField("height", Number(event.target.value))}
|
||||||
|
|||||||
@ -543,6 +543,7 @@ export default function LocationMapManager() {
|
|||||||
savingAction={savingAction}
|
savingAction={savingAction}
|
||||||
hasUnsavedChanges={hasUnsavedChanges}
|
hasUnsavedChanges={hasUnsavedChanges}
|
||||||
mapState={mapState}
|
mapState={mapState}
|
||||||
|
mapSize={mapSize}
|
||||||
onAddObject={handleAddObject}
|
onAddObject={handleAddObject}
|
||||||
onUndo={handleUndo}
|
onUndo={handleUndo}
|
||||||
onRedo={handleRedo}
|
onRedo={handleRedo}
|
||||||
|
|||||||
@ -596,6 +596,61 @@ 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 object numeric fields expose map bounds and clamp edits", 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();
|
||||||
|
await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click();
|
||||||
|
|
||||||
|
const xInput = page.getByRole("spinbutton", { name: "X" });
|
||||||
|
const yInput = page.getByRole("spinbutton", { name: "Y" });
|
||||||
|
const widthInput = page.getByRole("spinbutton", { name: "W" });
|
||||||
|
const heightInput = page.getByRole("spinbutton", { name: "H" });
|
||||||
|
|
||||||
|
await expect(xInput).toHaveAttribute("min", "0");
|
||||||
|
await expect(xInput).toHaveAttribute("max", "740");
|
||||||
|
await expect(yInput).toHaveAttribute("max", "540");
|
||||||
|
await expect(widthInput).toHaveAttribute("min", "40");
|
||||||
|
await expect(widthInput).toHaveAttribute("max", "1000");
|
||||||
|
await expect(heightInput).toHaveAttribute("max", "700");
|
||||||
|
|
||||||
|
await xInput.fill("9999");
|
||||||
|
await expect(xInput).toHaveValue("740");
|
||||||
|
|
||||||
|
await widthInput.fill("5000");
|
||||||
|
await expect(widthInput).toHaveValue("1000");
|
||||||
|
await expect(xInput).toHaveValue("0");
|
||||||
|
});
|
||||||
|
|
||||||
test("admin save progress locks draft controls", async ({ page }) => {
|
test("admin save progress locks draft controls", async ({ page }) => {
|
||||||
await mockMapShell(page);
|
await mockMapShell(page);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user