fix: preserve map selection history
This commit is contained in:
parent
dcafea4a95
commit
ed40554ef3
@ -229,7 +229,7 @@ export default function LocationMapCanvas({
|
|||||||
if (!hasObjectBoundsChanged(draggedObject, nextDraggedObject)) return;
|
if (!hasObjectBoundsChanged(draggedObject, nextDraggedObject)) return;
|
||||||
|
|
||||||
if (!objectDragHistoryCapturedRef.current) {
|
if (!objectDragHistoryCapturedRef.current) {
|
||||||
remember();
|
remember(undefined, dragState.key);
|
||||||
objectDragHistoryCapturedRef.current = true;
|
objectDragHistoryCapturedRef.current = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -292,7 +292,7 @@ export default function LocationMapCanvas({
|
|||||||
setSelectedObjectKey(getObjectKey(object));
|
setSelectedObjectKey(getObjectKey(object));
|
||||||
if (!hasObjectBoundsChanged(object, nextObject)) return;
|
if (!hasObjectBoundsChanged(object, nextObject)) return;
|
||||||
|
|
||||||
remember();
|
remember(undefined, getObjectKey(object));
|
||||||
updateObjects((currentObjects) =>
|
updateObjects((currentObjects) =>
|
||||||
currentObjects.map((candidate) =>
|
currentObjects.map((candidate) =>
|
||||||
getObjectKey(candidate) === getObjectKey(object)
|
getObjectKey(candidate) === getObjectKey(object)
|
||||||
|
|||||||
@ -9,6 +9,13 @@ import {
|
|||||||
|
|
||||||
const EMPTY_ZONES = [];
|
const EMPTY_ZONES = [];
|
||||||
|
|
||||||
|
function createHistorySnapshot(objects, selectedObjectKey) {
|
||||||
|
return {
|
||||||
|
objects: objects.map((object) => ({ ...object })),
|
||||||
|
selectedObjectKey: selectedObjectKey ?? null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export default function useLocationMapObjectActions({
|
export default function useLocationMapObjectActions({
|
||||||
canManage,
|
canManage,
|
||||||
hiddenAreaCount,
|
hiddenAreaCount,
|
||||||
@ -27,10 +34,13 @@ export default function useLocationMapObjectActions({
|
|||||||
const [pendingDeleteObject, setPendingDeleteObject] = useState(null);
|
const [pendingDeleteObject, setPendingDeleteObject] = useState(null);
|
||||||
const zones = mapState?.zones || EMPTY_ZONES;
|
const zones = mapState?.zones || EMPTY_ZONES;
|
||||||
|
|
||||||
const remember = useCallback((currentObjects = objects) => {
|
const remember = useCallback((currentObjects = objects, currentSelectedObjectKey = selectedObjectKey) => {
|
||||||
setHistory((previous) => [...previous.slice(-19), currentObjects.map((object) => ({ ...object }))]);
|
setHistory((previous) => [
|
||||||
|
...previous.slice(-19),
|
||||||
|
createHistorySnapshot(currentObjects, currentSelectedObjectKey),
|
||||||
|
]);
|
||||||
setFuture([]);
|
setFuture([]);
|
||||||
}, [objects, setFuture, setHistory]);
|
}, [objects, selectedObjectKey, setFuture, setHistory]);
|
||||||
|
|
||||||
const updateObjects = useCallback((updater) => {
|
const updateObjects = useCallback((updater) => {
|
||||||
setHasUnsavedChanges(true);
|
setHasUnsavedChanges(true);
|
||||||
|
|||||||
@ -2,6 +2,31 @@ import { useCallback, useEffect } from "react";
|
|||||||
import useMobileMapAutoFit from "./useMobileMapAutoFit";
|
import useMobileMapAutoFit from "./useMobileMapAutoFit";
|
||||||
import { getObjectKey } from "../lib/locationMapUtils";
|
import { getObjectKey } from "../lib/locationMapUtils";
|
||||||
|
|
||||||
|
function cloneMapObjects(objects = []) {
|
||||||
|
return objects.map((object) => ({ ...object }));
|
||||||
|
}
|
||||||
|
|
||||||
|
function getHistorySnapshot(snapshot, fallbackSelectedObjectKey = null) {
|
||||||
|
if (Array.isArray(snapshot)) {
|
||||||
|
return {
|
||||||
|
objects: cloneMapObjects(snapshot),
|
||||||
|
selectedObjectKey: fallbackSelectedObjectKey,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
objects: cloneMapObjects(snapshot?.objects || []),
|
||||||
|
selectedObjectKey: snapshot?.selectedObjectKey ?? null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function createHistorySnapshot(objects, selectedObjectKey) {
|
||||||
|
return {
|
||||||
|
objects: cloneMapObjects(objects),
|
||||||
|
selectedObjectKey: selectedObjectKey ?? null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export default function useLocationMapViewControls({
|
export default function useLocationMapViewControls({
|
||||||
filters,
|
filters,
|
||||||
hasUnsavedChanges,
|
hasUnsavedChanges,
|
||||||
@ -45,24 +70,38 @@ export default function useLocationMapViewControls({
|
|||||||
const handleUndo = useCallback(() => {
|
const handleUndo = useCallback(() => {
|
||||||
setHistory((previous) => {
|
setHistory((previous) => {
|
||||||
if (previous.length === 0) return previous;
|
if (previous.length === 0) return previous;
|
||||||
const priorObjects = previous[previous.length - 1];
|
const priorSnapshot = getHistorySnapshot(previous[previous.length - 1], selectedObjectKey);
|
||||||
setFuture((nextFuture) => [objects.map((object) => ({ ...object })), ...nextFuture.slice(0, 19)]);
|
setFuture((nextFuture) => [
|
||||||
setObjects(priorObjects);
|
createHistorySnapshot(objects, selectedObjectKey),
|
||||||
|
...nextFuture.slice(0, 19),
|
||||||
|
]);
|
||||||
|
setObjects(priorSnapshot.objects);
|
||||||
|
setSelectedObjectKey(priorSnapshot.selectedObjectKey);
|
||||||
setHasUnsavedChanges(true);
|
setHasUnsavedChanges(true);
|
||||||
return previous.slice(0, -1);
|
return previous.slice(0, -1);
|
||||||
});
|
});
|
||||||
}, [objects, setFuture, setHasUnsavedChanges, setHistory, setObjects]);
|
}, [
|
||||||
|
objects, selectedObjectKey, setFuture, setHasUnsavedChanges, setHistory,
|
||||||
|
setObjects, setSelectedObjectKey,
|
||||||
|
]);
|
||||||
|
|
||||||
const handleRedo = useCallback(() => {
|
const handleRedo = useCallback(() => {
|
||||||
setFuture((previous) => {
|
setFuture((previous) => {
|
||||||
if (previous.length === 0) return previous;
|
if (previous.length === 0) return previous;
|
||||||
const nextObjects = previous[0];
|
const nextSnapshot = getHistorySnapshot(previous[0], selectedObjectKey);
|
||||||
setHistory((nextHistory) => [...nextHistory.slice(-19), objects.map((object) => ({ ...object }))]);
|
setHistory((nextHistory) => [
|
||||||
setObjects(nextObjects);
|
...nextHistory.slice(-19),
|
||||||
|
createHistorySnapshot(objects, selectedObjectKey),
|
||||||
|
]);
|
||||||
|
setObjects(nextSnapshot.objects);
|
||||||
|
setSelectedObjectKey(nextSnapshot.selectedObjectKey);
|
||||||
setHasUnsavedChanges(true);
|
setHasUnsavedChanges(true);
|
||||||
return previous.slice(1);
|
return previous.slice(1);
|
||||||
});
|
});
|
||||||
}, [objects, setFuture, setHasUnsavedChanges, setHistory, setObjects]);
|
}, [
|
||||||
|
objects, selectedObjectKey, setFuture, setHasUnsavedChanges, setHistory,
|
||||||
|
setObjects, setSelectedObjectKey,
|
||||||
|
]);
|
||||||
|
|
||||||
const handlePreviewDraft = useCallback(() => {
|
const handlePreviewDraft = useCallback(() => {
|
||||||
setMode("view");
|
setMode("view");
|
||||||
|
|||||||
@ -2094,6 +2094,57 @@ test("admin cleared map area labels keep linked zone action names", async ({ pag
|
|||||||
await expect(page.getByRole("button", { name: "Map area Area Copy" })).toHaveCount(0);
|
await expect(page.getByRole("button", { name: "Map area Area Copy" })).toHaveCount(0);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("admin restores selected map area through duplicate undo and redo", async ({ page }) => {
|
||||||
|
await mockMapShell(page);
|
||||||
|
|
||||||
|
const mapState = draftMapState([
|
||||||
|
{
|
||||||
|
id: 1355,
|
||||||
|
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: "Map area Bakery" }).click();
|
||||||
|
await expect(page.locator(".location-map-object.is-selected")).toHaveAttribute("data-object-key", "1355");
|
||||||
|
|
||||||
|
await page.getByRole("button", { name: "Duplicate" }).click();
|
||||||
|
await expect(page.getByRole("textbox", { name: "Label" })).toHaveValue("Bakery Copy");
|
||||||
|
await expect(page.locator(".location-map-object.is-selected")).toContainText("Bakery Copy");
|
||||||
|
|
||||||
|
await page.getByRole("button", { name: "Undo" }).click();
|
||||||
|
await expect(page.getByRole("button", { name: "Map area Bakery Copy" })).toHaveCount(0);
|
||||||
|
await expect(page.getByRole("textbox", { name: "Label" })).toHaveValue("Bakery");
|
||||||
|
await expect(page.locator(".location-map-object.is-selected")).toHaveAttribute("data-object-key", "1355");
|
||||||
|
|
||||||
|
await page.getByRole("button", { name: "Redo" }).click();
|
||||||
|
await expect(page.getByRole("button", { name: "Map area Bakery Copy" })).toBeVisible();
|
||||||
|
await expect(page.getByRole("textbox", { name: "Label" })).toHaveValue("Bakery Copy");
|
||||||
|
await expect(page.locator(".location-map-object.is-selected")).toContainText("Bakery Copy");
|
||||||
|
});
|
||||||
|
|
||||||
test("admin nudges selected map areas with arrow keys", async ({ page }) => {
|
test("admin nudges selected map areas with arrow keys", async ({ page }) => {
|
||||||
await mockMapShell(page);
|
await mockMapShell(page);
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user