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

fix: simplify mobile map editor controls

Browse Source
This commit is contained in:
Nico 2026-06-04 02:12:33 -07:00
parent e3998acc12
commit 80f7831647
6 changed files with 183 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
frontend/src/components/maps/LocationMapBottomSheet.jsx
View File

@ -1,6 +1,5 @@
import { import {
DEFAULT_MAP_FILTERS, DEFAULT_MAP_FILTERS,
MAP_OBJECT_TYPES,
getMapObjectDisplayLabel, getMapObjectDisplayLabel,
} from "../../lib/locationMapUtils"; } from "../../lib/locationMapUtils";
@ -19,14 +18,6 @@ const DISPLAY_CONTROLS = [
["showUnmapped", "Unmapped"], ["showUnmapped", "Unmapped"],
]; ];
function formatObjectTypeLabel(type) {
return String(type)
.split(/[-_\s]+/)
.filter(Boolean)
.map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
.join(" ");
}
export default function LocationMapBottomSheet({ export default function LocationMapBottomSheet({
mode, mode,
editorTool, editorTool,
@ -40,24 +31,16 @@ export default function LocationMapBottomSheet({
visibleUnmappedItems, visibleUnmappedItems,
unmappedItemCount, unmappedItemCount,
hiddenAreaCount, hiddenAreaCount,
history,
future,
saving, saving,
savingAction, savingAction,
hasUnsavedChanges, hasUnsavedChanges,
mapState, mapState,
mapSize,
onAddObject, onAddObject,
onUndo,
onRedo,
onSaveDraft, onSaveDraft,
onPublish, onPublish,
onPreviewDraft, onPreviewDraft,
onPanMode,
onEditObjects,
onObjectField, onObjectField,
onZoneLinkChange, onZoneLinkChange,
onClearSelection,
onDuplicateObject, onDuplicateObject,
onDeleteObject, onDeleteObject,
onShowHiddenAreas, onShowHiddenAreas,
@ -80,11 +63,6 @@ export default function LocationMapBottomSheet({
: selectedObject : selectedObject
? selectedTitle ? selectedTitle
: "Map Details"; : "Map Details";
const sheetDescription = selectedObject && editorTool === "edit"
? "Move, resize, link, rename, or nudge with arrow keys."
: editorTool === "edit"
? "Tap an area to select it."
: "Drag and zoom without changing objects.";
const showHeaderItemCount = mode !== "edit" && Boolean(selectedObject); const showHeaderItemCount = mode !== "edit" && Boolean(selectedObject);
const showEditorControls = mode === "edit" && canManage; const showEditorControls = mode === "edit" && canManage;
const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject); const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject);
@ -94,14 +72,7 @@ export default function LocationMapBottomSheet({
const hiddenUnmappedItemCount = Math.max(0, unmappedItemCount - visibleUnmappedItems.length); const hiddenUnmappedItemCount = Math.max(0, unmappedItemCount - visibleUnmappedItems.length);
const hasHiddenUnmappedItems = const hasHiddenUnmappedItems =
filters.showUnmapped && unmappedItemCount > 0 && visibleUnmappedItems.length === 0; filters.showUnmapped && unmappedItemCount > 0 && visibleUnmappedItems.length === 0;
const selectedWidth = Number(selectedObject?.width) || 40;
const selectedHeight = Number(selectedObject?.height) || 40;
const hiddenAreaLabel = `Show Hidden Areas (${hiddenAreaCount})`; const hiddenAreaLabel = `Show Hidden Areas (${hiddenAreaCount})`;
const geometryLocked = Boolean(selectedObject?.locked);
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 resetLayerFilters = () => setFilters({ ...DEFAULT_MAP_FILTERS }); const resetLayerFilters = () => setFilters({ ...DEFAULT_MAP_FILTERS });
@ -140,9 +111,11 @@ export default function LocationMapBottomSheet({
const secondaryDraftActions = showEditorControls ? ( const secondaryDraftActions = showEditorControls ? (
<div className="location-map-editor-actions location-map-secondary-actions"> <div className="location-map-editor-actions location-map-secondary-actions">
<button type="button" onClick={onAddObject} disabled={saving}>Add Area</button> <button type="button" onClick={onAddObject} disabled={saving}>Add Area</button>
<button type="button" onClick={onPreviewDraft} aria-label="Preview Draft" disabled={saving}>Preview</button> {!showSelectedObjectForm ? (
<button type="button" onClick={onUndo} disabled={saving || history.length === 0}>Undo</button> <button type="button" onClick={onPreviewDraft} aria-label="Preview Draft" disabled={saving}>
<button type="button" onClick={onRedo} disabled={saving || future.length === 0}>Redo</button> Preview
</button>
) : null}
</div> </div>
) : null; ) : null;
const editorActions = showEditorControls ? ( const editorActions = showEditorControls ? (
@ -162,9 +135,6 @@ export default function LocationMapBottomSheet({
<span className="location-map-sheet-count">{selectedItemCountLabel}</span> <span className="location-map-sheet-count">{selectedItemCountLabel}</span>
) : null} ) : null}
</div> </div>
{mode === "edit" && canManage ? (
<span>{sheetDescription}</span>
) : null}
</div> </div>
<div className="location-map-layer-actions"> <div className="location-map-layer-actions">
{changedLayerCount ? ( {changedLayerCount ? (
@ -221,27 +191,6 @@ export default function LocationMapBottomSheet({
</div> </div>
) : editorActions} ) : editorActions}
{showEditorControls ? (
<div className="location-map-mobile-tool-switch" aria-label="Edit tool">
<button
type="button"
className={[editorTool === "pan" ? "active" : "", "is-pan"].filter(Boolean).join(" ")}
onClick={onPanMode}
disabled={saving}
>
Pan
</button>
<button
type="button"
className={[editorTool === "edit" ? "active" : "", "is-edit"].filter(Boolean).join(" ")}
onClick={onEditObjects}
disabled={saving}
>
Objects
</button>
</div>
) : null}
{showEditorControls && hiddenAreaCount > 0 ? ( {showEditorControls && hiddenAreaCount > 0 ? (
<div className="location-map-hidden-areas"> <div className="location-map-hidden-areas">
<button type="button" onClick={onShowHiddenAreas} disabled={saving}> <button type="button" onClick={onShowHiddenAreas} disabled={saving}>
@ -252,29 +201,16 @@ export default function LocationMapBottomSheet({
{mode === "edit" && editorTool === "edit" && selectedObject ? ( {mode === "edit" && editorTool === "edit" && selectedObject ? (
<div className="location-map-object-form"> <div className="location-map-object-form">
<label> <label className="location-map-field-row">
Label <span>Label</span>
<input <input
value={selectedObject.label || ""} value={selectedObject.label || ""}
disabled={saving} disabled={saving}
onChange={(event) => onObjectField("label", event.target.value)} onChange={(event) => onObjectField("label", event.target.value)}
/> />
</label> </label>
<label> <label className="location-map-field-row">
Type <span>Zone</span>
<select
aria-label="Object type"
value={selectedObject.type}
disabled={saving}
onChange={(event) => onObjectField("type", event.target.value)}
>
{MAP_OBJECT_TYPES.map((type) => (
<option key={type} value={type}>{formatObjectTypeLabel(type)}</option>
))}
</select>
</label>
<label>
Zone
<select <select
aria-label="Linked zone" aria-label="Linked zone"
value={objectZoneId(selectedObject)} value={objectZoneId(selectedObject)}
@ -307,89 +243,13 @@ export default function LocationMapBottomSheet({
Locked Locked
</label> </label>
</div> </div>
<div className="location-map-geometry-controls">
<div className="location-map-geometry-group">
<span className="location-map-geometry-title">Position</span>
<div className="location-map-geometry-row">
<label>
<span>X</span>
<input
type="number"
min="0"
max={maxX}
step="1"
value={Math.round(selectedObject.x)}
aria-label="X position"
disabled={saving || geometryLocked}
onChange={(event) => onObjectField("x", Number(event.target.value))}
/>
</label>
<label>
<span>Y</span>
<input
type="number"
min="0"
max={maxY}
step="1"
value={Math.round(selectedObject.y)}
aria-label="Y position"
disabled={saving || geometryLocked}
onChange={(event) => onObjectField("y", Number(event.target.value))}
/>
</label>
</div>
</div>
<div className="location-map-geometry-group">
<span className="location-map-geometry-title">Size</span>
<div className="location-map-geometry-row">
<label>
<span>W</span>
<input
type="number"
min="40"
max={maxWidth}
step="1"
value={Math.round(selectedObject.width)}
aria-label="Width"
disabled={saving || geometryLocked}
onChange={(event) => onObjectField("width", Number(event.target.value))}
/>
</label>
<label>
<span>H</span>
<input
type="number"
min="40"
max={maxHeight}
step="1"
value={Math.round(selectedObject.height)}
aria-label="Height"
disabled={saving || geometryLocked}
onChange={(event) => onObjectField("height", Number(event.target.value))}
/>
</label>
</div>
</div>
</div>
{geometryLocked ? (
<p className="location-map-muted location-map-lock-note">
Unlock this area before moving or resizing it.
</p>
) : null}
<div className="location-map-editor-actions"> <div className="location-map-editor-actions">
<button type="button" onClick={onClearSelection}>Done</button>
<button type="button" onClick={onDuplicateObject} disabled={saving}>Duplicate</button> <button type="button" onClick={onDuplicateObject} disabled={saving}>Duplicate</button>
<button type="button" className="danger" onClick={onDeleteObject} disabled={saving}>Delete</button> <button type="button" className="danger" onClick={onDeleteObject} disabled={saving}>Delete</button>
</div> </div>
</div> </div>
) : mode === "edit" && editorTool === "edit" ? (
<p className="location-map-muted">
Tap an area to edit its name, linked zone, size, and position.
</p>
) : mode === "edit" ? ( ) : mode === "edit" ? (
<p className="location-map-muted"> null
Use Pan Mode to move around the map. Switch to Objects when you want to edit areas.
</p>
) : selectedObject ? ( ) : selectedObject ? (
<div className="location-map-zone-items"> <div className="location-map-zone-items">
{selectedZoneItems.length === 0 ? ( {selectedZoneItems.length === 0 ? (
@ -428,11 +288,7 @@ export default function LocationMapBottomSheet({
</> </>
)} )}
</div> </div>
) : ( ) : null}
<p className="location-map-muted">
Tap a zone to view assigned items. Item pins stay hidden unless you turn them on in Layers.
</p>
)}
{showSelectedObjectForm && secondaryDraftActions ? ( {showSelectedObjectForm && secondaryDraftActions ? (
<div <div

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

@ -407,7 +407,13 @@ export default function LocationMapCanvas({
{mode === "edit" ? ( {mode === "edit" ? (
<rect className="location-map-grid" width={mapSize.width} height={mapSize.height} /> <rect className="location-map-grid" width={mapSize.width} height={mapSize.height} />
) : null} ) : null}
{objects.map(renderMapObject)} {(selectedObjectKey
? [
...objects.filter((object) => getObjectKey(object) !== selectedObjectKey),
...objects.filter((object) => getObjectKey(object) === selectedObjectKey),
]
: objects
).map(renderMapObject)}
</svg> </svg>
{emptyCanvasMessage ? ( {emptyCanvasMessage ? (
<div <div

24
frontend/src/components/maps/LocationMapToolbar.jsx
View File

@ -6,6 +6,8 @@ export default function LocationMapToolbar({
hasAnyMap, hasAnyMap,
canManage, canManage,
saving, saving,
history = [],
future = [],
zoom, zoom,
setZoom, setZoom,
onFit, onFit,
@ -13,6 +15,8 @@ export default function LocationMapToolbar({
onEdit, onEdit,
onPanMode, onPanMode,
onEditObjects, onEditObjects,
onUndo,
onRedo,
}) { }) {
const isAtMinZoom = zoom <= MIN_MAP_ZOOM; const isAtMinZoom = zoom <= MIN_MAP_ZOOM;
const isAtMaxZoom = zoom >= MAX_MAP_ZOOM; const isAtMaxZoom = zoom >= MAX_MAP_ZOOM;
@ -44,6 +48,26 @@ export default function LocationMapToolbar({
</button> </button>
) : null} ) : null}
</div> </div>
{mode === "edit" && canManage ? (
<div className="location-map-history-buttons" aria-label="Edit history">
<button
type="button"
onClick={onUndo}
disabled={saving || history.length === 0}
aria-label="Undo"
>
<span aria-hidden="true">&#8630;</span>
</button>
<button
type="button"
onClick={onRedo}
disabled={saving || future.length === 0}
aria-label="Redo"
>
<span aria-hidden="true">&#8631;</span>
</button>
</div>
) : null}
{mode === "edit" && canManage ? ( {mode === "edit" && canManage ? (
<div className="location-map-tool-buttons" aria-label="Edit tool"> <div className="location-map-tool-buttons" aria-label="Edit tool">
<button <button

20
frontend/src/pages/LocationMapManager.jsx
View File

@ -472,7 +472,7 @@ export default function LocationMapManager() {
const handleEditMode = () => { const handleEditMode = () => {
setMode("edit"); setMode("edit");
setEditorTool("pan"); setEditorTool("edit");
setPreviewDraft(true); setPreviewDraft(true);
if (!previewDraft && mapState && !hasUnsavedChanges) { if (!previewDraft && mapState && !hasUnsavedChanges) {
syncMapDraftFromState(mapState, "edit", true); syncMapDraftFromState(mapState, "edit", true);
@ -539,6 +539,8 @@ export default function LocationMapManager() {
hasAnyMap={hasAnyMap} hasAnyMap={hasAnyMap}
canManage={canManage} canManage={canManage}
saving={saving} saving={saving}
history={history}
future={future}
zoom={zoom} zoom={zoom}
setZoom={setZoom} setZoom={setZoom}
onFit={handleFitMap} onFit={handleFitMap}
@ -546,6 +548,8 @@ export default function LocationMapManager() {
onEdit={handleEditMode} onEdit={handleEditMode}
onPanMode={() => setEditorTool("pan")} onPanMode={() => setEditorTool("pan")}
onEditObjects={() => setEditorTool("edit")} onEditObjects={() => setEditorTool("edit")}
onUndo={handleUndo}
onRedo={handleRedo}
/> />
) : null} ) : null}
@ -556,7 +560,11 @@ export default function LocationMapManager() {
zoneCount={mapState?.zones?.length || 0} zoneCount={mapState?.zones?.length || 0}
saving={saving} saving={saving}
savingAction={savingAction} savingAction={savingAction}
onContinue={() => setMode("edit")} onContinue={() => {
setMode("edit");
setEditorTool("edit");
setPreviewDraft(true);
}}
onPreview={handlePreviewDraft} onPreview={handlePreviewDraft}
onPublish={handlePublish} onPublish={handlePublish}
onCreateFromZones={handleCreateFromZones} onCreateFromZones={handleCreateFromZones}
@ -604,24 +612,16 @@ export default function LocationMapManager() {
visibleUnmappedItems={visibleUnmappedItems} visibleUnmappedItems={visibleUnmappedItems}
unmappedItemCount={unmappedItemCount} unmappedItemCount={unmappedItemCount}
hiddenAreaCount={hiddenAreaCount} hiddenAreaCount={hiddenAreaCount}
history={history}
future={future}
saving={saving} saving={saving}
savingAction={savingAction} savingAction={savingAction}
hasUnsavedChanges={hasUnsavedChanges} hasUnsavedChanges={hasUnsavedChanges}
mapState={mapState} mapState={mapState}
mapSize={mapSize}
onAddObject={handleAddObject} onAddObject={handleAddObject}
onUndo={handleUndo}
onRedo={handleRedo}
onSaveDraft={handleSaveDraft} onSaveDraft={handleSaveDraft}
onPublish={handlePublish} onPublish={handlePublish}
onPreviewDraft={handlePreviewDraft} onPreviewDraft={handlePreviewDraft}
onPanMode={() => setEditorTool("pan")}
onEditObjects={() => setEditorTool("edit")}
onObjectField={handleObjectField} onObjectField={handleObjectField}
onZoneLinkChange={handleZoneLinkChange} onZoneLinkChange={handleZoneLinkChange}
onClearSelection={() => setSelectedObjectKey(null)}
onDuplicateObject={handleDuplicateObject} onDuplicateObject={handleDuplicateObject}
onDeleteObject={requestDeleteObject} onDeleteObject={requestDeleteObject}
onShowHiddenAreas={handleShowHiddenAreas} onShowHiddenAreas={handleShowHiddenAreas}

183
frontend/src/styles/pages/LocationMapManager.css
View File

@ -124,6 +124,7 @@
.location-map-mode-buttons, .location-map-mode-buttons,
.location-map-tool-buttons, .location-map-tool-buttons,
.location-map-zoom-controls, .location-map-zoom-controls,
.location-map-history-buttons,
.location-map-editor-actions { .location-map-editor-actions {
display: flex; display: flex;
align-items: center; align-items: center;
@ -133,6 +134,7 @@
.location-map-mode-buttons button, .location-map-mode-buttons button,
.location-map-tool-buttons button, .location-map-tool-buttons button,
.location-map-zoom-controls button, .location-map-zoom-controls button,
.location-map-history-buttons button,
.location-map-editor-actions button, .location-map-editor-actions button,
.location-map-setup-actions button { .location-map-setup-actions button {
min-height: 40px; min-height: 40px;
@ -145,6 +147,21 @@
cursor: pointer; cursor: pointer;
} }
.location-map-mode-buttons {
gap: 0.25rem;
padding: 0.25rem;
border: 1px solid var(--color-border-light);
border-radius: 999px;
background: rgba(15, 23, 34, 0.68);
}
.location-map-mode-buttons button {
min-height: 36px;
border-color: transparent;
border-radius: 999px;
background: transparent;
}
.location-map-mode-buttons button.active, .location-map-mode-buttons button.active,
.location-map-tool-buttons button.active, .location-map-tool-buttons button.active,
.location-map-editor-actions button.primary, .location-map-editor-actions button.primary,
@ -154,6 +171,17 @@
color: #06111f; color: #06111f;
} }
.location-map-history-buttons {
gap: 0.3rem;
}
.location-map-history-buttons button {
min-width: 40px;
padding-inline: 0.55rem;
font-size: 1.12rem;
line-height: 1;
}
.location-map-tool-buttons button.is-pan.active { .location-map-tool-buttons button.is-pan.active {
border-color: rgba(245, 158, 11, 0.78); border-color: rgba(245, 158, 11, 0.78);
background: rgba(245, 158, 11, 0.22); background: rgba(245, 158, 11, 0.22);
@ -174,9 +202,9 @@
.location-map-mode-buttons button:disabled, .location-map-mode-buttons button:disabled,
.location-map-tool-buttons button:disabled, .location-map-tool-buttons button:disabled,
.location-map-zoom-controls button:disabled, .location-map-zoom-controls button:disabled,
.location-map-history-buttons button:disabled,
.location-map-editor-actions button:disabled, .location-map-editor-actions button:disabled,
.location-map-hidden-areas button:disabled, .location-map-hidden-areas button:disabled,
.location-map-mobile-tool-switch button:disabled,
.location-map-setup-actions button:disabled { .location-map-setup-actions button:disabled {
opacity: 0.55; opacity: 0.55;
cursor: not-allowed; cursor: not-allowed;
@ -525,32 +553,6 @@
font-size: 0.86rem; font-size: 0.86rem;
} }
.location-map-mobile-tool-switch {
display: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.45rem;
margin-bottom: 0.75rem;
}
.location-map-mobile-tool-switch button {
min-height: 40px;
border: 1px solid var(--color-border-light);
border-radius: 8px;
background: #15283b;
color: #f8fafc;
font-weight: 800;
}
.location-map-mobile-tool-switch button.is-pan.active {
border-color: rgba(245, 158, 11, 0.78);
background: rgba(245, 158, 11, 0.22);
}
.location-map-mobile-tool-switch button.is-edit.active {
border-color: rgb(45, 212, 191);
background: rgba(20, 184, 166, 0.24);
}
.location-map-hidden-areas { .location-map-hidden-areas {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
@ -569,12 +571,22 @@
.location-map-object-form { .location-map-object-form {
display: grid; display: grid;
gap: 0.6rem; gap: 0.45rem;
} }
.location-map-object-form label { .location-map-field-row {
min-height: 42px;
display: grid; display: grid;
gap: 0.3rem; grid-template-columns: minmax(56px, 0.35fr) minmax(0, 1fr);
align-items: center;
gap: 0.55rem;
padding: 0.1rem 0.4rem;
border: 1px solid var(--color-border-light);
border-radius: 8px;
background: rgba(15, 23, 34, 0.58);
}
.location-map-field-row > span {
color: #9fb3c8; color: #9fb3c8;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 800; font-weight: 800;
@ -582,8 +594,10 @@
.location-map-object-form input, .location-map-object-form input,
.location-map-object-form select { .location-map-object-form select {
width: 100%;
min-width: 0;
min-height: 40px; min-height: 40px;
padding: 0.55rem 0.65rem; padding: 0.4rem 0.6rem;
border: 1px solid var(--color-border-light); border: 1px solid var(--color-border-light);
border-radius: 8px; border-radius: 8px;
background: #15283b; background: #15283b;
@ -600,12 +614,14 @@
min-height: 40px; min-height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
gap: 0.45rem; gap: 0.45rem;
padding: 0.35rem 0.5rem; padding: 0.35rem 0.5rem;
border: 1px solid var(--color-border-light); border: 1px solid var(--color-border-light);
border-radius: 8px; border-radius: 999px;
background: rgba(15, 23, 34, 0.58); background: rgba(15, 23, 34, 0.58);
color: #f8fafc; color: #f8fafc;
font-weight: 800;
} }
.location-map-object-flags input { .location-map-object-flags input {
@ -615,63 +631,6 @@
padding: 0; padding: 0;
} }
.location-map-geometry-controls {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
.location-map-geometry-group {
display: grid;
gap: 0.35rem;
min-width: 0;
}
.location-map-geometry-title {
color: #cbd5e1;
font-size: 0.78rem;
font-weight: 900;
}
.location-map-geometry-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.35rem;
}
.location-map-geometry-row label {
min-width: 0;
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.45rem;
border: 1px solid var(--color-border-light);
border-radius: 8px;
background: rgba(15, 23, 34, 0.58);
color: #f8fafc;
}
.location-map-geometry-row label span {
flex: 0 0 auto;
min-width: 1.1rem;
color: #9fb3c8;
font-size: 0.76rem;
font-weight: 900;
}
.location-map-geometry-row input {
min-width: 0;
min-height: 34px;
padding: 0.35rem 0.4rem;
text-align: center;
}
.location-map-lock-note {
margin: -0.1rem 0 0;
font-size: 0.82rem;
font-weight: 700;
}
.location-map-zone-empty { .location-map-zone-empty {
display: grid; display: grid;
gap: 0.55rem; gap: 0.55rem;
@ -842,20 +801,28 @@
.location-map-toolbar { .location-map-toolbar {
align-items: center; align-items: center;
flex-wrap: nowrap; flex-wrap: nowrap;
gap: 0.5rem; gap: 0.15rem;
padding: 0.5rem 0.65rem; padding: 0.35rem 0.25rem;
} }
.location-map-mode-group, .location-map-mode-group {
.location-map-mode-buttons { flex: 0 0 auto;
width: 100%;
min-width: 0; min-width: 0;
flex-wrap: nowrap;
gap: 0.15rem;
}
.location-map-mode-buttons {
flex: 0 0 120px;
min-width: 0;
padding: 0.18rem;
} }
.location-map-mode-buttons button { .location-map-mode-buttons button {
flex: 1 1 0; flex: 1 1 0;
min-width: 0; min-width: 0;
padding-inline: 0.45rem; min-height: 40px;
padding: 0.35rem 0.42rem;
} }
.location-map-label-full { .location-map-label-full {
@ -866,18 +833,30 @@
display: inline; display: inline;
} }
.location-map-history-buttons {
flex: 0 0 auto;
gap: 0.12rem;
}
.location-map-history-buttons button {
min-width: 40px;
min-height: 40px;
padding-inline: 0.35rem;
}
.location-map-zoom-controls { .location-map-zoom-controls {
flex: 0 0 auto; flex: 0 0 auto;
gap: 0.3rem; gap: 0.12rem;
} }
.location-map-zoom-controls button { .location-map-zoom-controls button {
min-width: 40px; min-width: 40px;
padding-inline: 0.5rem; min-height: 40px;
padding: 0.35rem;
} }
.location-map-zoom-controls span { .location-map-zoom-controls span {
min-width: 42px; min-width: 36px;
font-size: 0.82rem; font-size: 0.82rem;
} }
@ -885,15 +864,7 @@
display: none; display: none;
} }
.location-map-mobile-tool-switch {
display: grid;
}
.location-map-display-controls { .location-map-display-controls {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.location-map-geometry-controls {
gap: 0.45rem;
}
} }

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

@ -288,10 +288,8 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
const bakeryObject = page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first(); const bakeryObject = page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first();
await bakeryObject.click(); await bakeryObject.click();
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery"); await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
const objectTypeSelect = page.getByLabel("Object type"); await expect(page.locator(".location-map-object").last()).toHaveAttribute("data-object-key", "1001");
await expect(objectTypeSelect).toHaveValue("zone"); await expect(page.getByLabel("Object type")).toHaveCount(0);
await expect(objectTypeSelect.locator('option[value="zone"]')).toHaveText("Zone");
await expect(objectTypeSelect.locator('option[value="aisle"]')).toHaveText("Aisle");
const moveBox = await bakeryObject.boundingBox(); const moveBox = await bakeryObject.boundingBox();
expect(moveBox).not.toBeNull(); expect(moveBox).not.toBeNull();
if (!moveBox) throw new Error("Bakery map object could not be moved"); if (!moveBox) throw new Error("Bakery map object could not be moved");
@ -732,7 +730,7 @@ test("admin can recover hidden map areas from the empty canvas", async ({ page }
); );
}); });
test("admin locked map areas hide geometry controls", async ({ page }) => { test("admin locked map areas hide resize affordances", async ({ page }) => {
await mockMapShell(page); await mockMapShell(page);
const mapState = draftMapState([ const mapState = draftMapState([
@ -766,35 +764,31 @@ test("admin locked map areas hide geometry controls", async ({ page }) => {
await page.getByRole("button", { name: "Continue Editing" }).click(); await page.getByRole("button", { name: "Continue Editing" }).click();
await page.getByRole("button", { name: "Edit Objects" }).click(); await page.getByRole("button", { name: "Edit Objects" }).click();
await page.getByRole("button", { name: "Map area Bakery" }).click(); const bakeryArea = page.getByRole("button", { name: "Map area Bakery" });
await bakeryArea.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(page.locator(".location-map-resize-handle")).toBeVisible(); await expect(page.locator(".location-map-resize-handle")).toBeVisible();
await expect(xInput).toBeEnabled(); await expect(page.getByRole("spinbutton", { name: "X" })).toHaveCount(0);
await expect(page.getByLabel("Locked")).not.toBeChecked(); await expect(page.getByLabel("Locked")).not.toBeChecked();
await page.getByLabel("Locked").click(); await page.getByLabel("Locked").click();
await expect(page.getByLabel("Locked")).toBeChecked(); await expect(page.getByLabel("Locked")).toBeChecked();
await expect(page.getByRole("textbox", { name: "Label" })).toBeEnabled(); await expect(page.getByRole("textbox", { name: "Label" })).toBeEnabled();
await expect(page.getByLabel("Visible")).toBeEnabled(); await expect(page.getByLabel("Visible")).toBeEnabled();
await expect(xInput).toBeDisabled(); await expect(page.getByRole("spinbutton", { name: "X" })).toHaveCount(0);
await expect(yInput).toBeDisabled(); await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveCount(0);
await expect(widthInput).toBeDisabled(); await expect(page.getByRole("spinbutton", { name: "W" })).toHaveCount(0);
await expect(heightInput).toBeDisabled(); await expect(page.getByRole("spinbutton", { name: "H" })).toHaveCount(0);
await expect(page.locator(".location-map-resize-handle")).toHaveCount(0); await expect(page.locator(".location-map-resize-handle")).toHaveCount(0);
await expect(page.getByText("Unlock this area before moving or resizing it.")).toBeVisible(); await expect(page.getByText("Unlock this area before moving or resizing it.")).toHaveCount(0);
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft"); await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft");
await page.getByRole("button", { name: "Map area Bakery" }).focus(); await bakeryArea.focus();
await page.keyboard.press("ArrowRight"); await page.keyboard.press("ArrowRight");
await expect(xInput).toHaveValue("40"); await expect(bakeryArea).toHaveAttribute("x", "40");
await page.getByLabel("Locked").click(); await page.getByLabel("Locked").click();
await expect(page.getByLabel("Locked")).not.toBeChecked(); await expect(page.getByLabel("Locked")).not.toBeChecked();
await expect(xInput).toBeEnabled();
await expect(page.locator(".location-map-resize-handle")).toBeVisible(); await expect(page.locator(".location-map-resize-handle")).toBeVisible();
}); });
@ -913,24 +907,26 @@ test("admin nudges selected map areas with arrow keys", async ({ page }) => {
await bakeryArea.focus(); await bakeryArea.focus();
await expect(bakeryArea).toBeFocused(); await expect(bakeryArea).toBeFocused();
await page.keyboard.press("Enter"); await page.keyboard.press("Enter");
await expect(page.getByText("Move, resize, link, rename, or nudge with arrow keys.")).toBeVisible(); await expect(page.getByText("Move, resize, link, rename, or nudge with arrow keys.")).toHaveCount(0);
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveValue("40"); await expect(page.getByRole("spinbutton", { name: "X" })).toHaveCount(0);
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveValue("40"); await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveCount(0);
await expect(bakeryArea).toHaveAttribute("x", "40");
await expect(bakeryArea).toHaveAttribute("y", "40");
await expect(page.locator(".location-map-status")).toHaveText("Draft"); await expect(page.locator(".location-map-status")).toHaveText("Draft");
await page.keyboard.press("ArrowRight"); await page.keyboard.press("ArrowRight");
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveValue("50"); await expect(bakeryArea).toHaveAttribute("x", "50");
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveValue("40"); await expect(bakeryArea).toHaveAttribute("y", "40");
await expect(page.locator(".location-map-status")).toHaveText("Unsaved Draft"); 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: "Save Draft" })).toBeEnabled();
await expect(page.getByRole("button", { name: "Undo" })).toBeEnabled(); await expect(page.getByRole("button", { name: "Undo" })).toBeEnabled();
await page.keyboard.press("Shift+ArrowDown"); await page.keyboard.press("Shift+ArrowDown");
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveValue("50"); await expect(bakeryArea).toHaveAttribute("x", "50");
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveValue("65"); await expect(bakeryArea).toHaveAttribute("y", "65");
}); });
test("admin object numeric fields expose map bounds and clamp edits", async ({ page }) => { test("admin selected map area uses compact editable fields", async ({ page }) => {
await mockMapShell(page); await mockMapShell(page);
const mapState = draftMapState([ const mapState = draftMapState([
@ -965,24 +961,14 @@ test("admin object numeric fields expose map bounds and clamp edits", async ({ p
await page.getByRole("button", { name: "Edit Objects" }).click(); await page.getByRole("button", { name: "Edit Objects" }).click();
await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click(); await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click();
const xInput = page.getByRole("spinbutton", { name: "X" }); await expect(page.locator(".location-map-field-row")).toHaveCount(2);
const yInput = page.getByRole("spinbutton", { name: "Y" }); await expect(page.getByRole("textbox", { name: "Label" })).toHaveValue("Bakery");
const widthInput = page.getByRole("spinbutton", { name: "W" }); await expect(page.getByLabel("Linked zone")).toHaveValue("501");
const heightInput = page.getByRole("spinbutton", { name: "H" }); await expect(page.getByLabel("Object type")).toHaveCount(0);
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveCount(0);
await expect(xInput).toHaveAttribute("min", "0"); await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveCount(0);
await expect(xInput).toHaveAttribute("max", "740"); await expect(page.getByRole("spinbutton", { name: "W" })).toHaveCount(0);
await expect(yInput).toHaveAttribute("max", "540"); await expect(page.getByRole("spinbutton", { name: "H" })).toHaveCount(0);
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 }) => {
@ -1047,7 +1033,7 @@ test("admin save progress locks draft controls", async ({ page }) => {
await expect(page.getByRole("button", { name: "Saving..." })).toBeDisabled(); await expect(page.getByRole("button", { name: "Saving..." })).toBeDisabled();
await expect(page.getByRole("button", { name: "Publish" })).toBeDisabled(); await expect(page.getByRole("button", { name: "Publish" })).toBeDisabled();
await expect(page.getByRole("button", { name: "Add Area" })).toBeDisabled(); await expect(page.getByRole("button", { name: "Add Area" })).toBeDisabled();
await expect(page.getByRole("button", { name: "Preview Draft" })).toBeDisabled(); await expect(page.getByRole("button", { name: "Preview Draft" })).toHaveCount(0);
await expect(page.getByRole("button", { name: "Undo" })).toBeDisabled(); await expect(page.getByRole("button", { name: "Undo" })).toBeDisabled();
await expect(page.getByRole("button", { name: "Duplicate" })).toBeDisabled(); await expect(page.getByRole("button", { name: "Duplicate" })).toBeDisabled();
await expect(page.getByRole("button", { name: "Delete" })).toBeDisabled(); await expect(page.getByRole("button", { name: "Delete" })).toBeDisabled();
@ -2008,7 +1994,12 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
await expect(page.getByLabel("Map controls")).toBeVisible(); await expect(page.getByLabel("Map controls")).toBeVisible();
await expect(page.locator(".location-map-tool-buttons")).toBeHidden(); await expect(page.locator(".location-map-tool-buttons")).toBeHidden();
await expect(page.locator(".location-map-mobile-tool-switch")).toBeVisible(); await expect(page.locator(".location-map-mobile-tool-switch")).toHaveCount(0);
const historyActions = page.locator(".location-map-history-buttons");
await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
await expect(historyActions.getByRole("button", { name: "Redo" })).toBeVisible();
await expect(historyActions.getByRole("button", { name: "Undo" })).toBeDisabled();
await expect(historyActions.getByRole("button", { name: "Redo" })).toBeDisabled();
const primaryActions = page.locator(".location-map-primary-actions"); const primaryActions = page.locator(".location-map-primary-actions");
const secondaryActions = page.locator(".location-map-secondary-actions"); const secondaryActions = page.locator(".location-map-secondary-actions");
await expect(primaryActions.getByRole("button", { name: "Save Draft" })).toBeVisible(); await expect(primaryActions.getByRole("button", { name: "Save Draft" })).toBeVisible();
@ -2021,9 +2012,6 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
expect(secondaryActionBox).not.toBeNull(); expect(secondaryActionBox).not.toBeNull();
if (!primaryActionBox || !secondaryActionBox) throw new Error("Mobile action groups were not measurable"); if (!primaryActionBox || !secondaryActionBox) throw new Error("Mobile action groups were not measurable");
expect(primaryActionBox.y).toBeLessThan(secondaryActionBox.y); expect(primaryActionBox.y).toBeLessThan(secondaryActionBox.y);
await expect(page.getByRole("button", { name: "Pan" })).toHaveClass(/active/);
await expect(page.getByRole("button", { name: "Pan" })).toHaveClass(/is-pan/);
await expect(page.getByRole("button", { name: "Objects" })).toHaveClass(/is-edit/);
await expect(page.locator(".location-map-pin")).toHaveCount(0); await expect(page.locator(".location-map-pin")).toHaveCount(0);
const canvasBox = await page.locator(".location-map-canvas-shell").boundingBox(); const canvasBox = await page.locator(".location-map-canvas-shell").boundingBox();
@ -2034,43 +2022,39 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
expect(canvasBox.height).toBeGreaterThan(260); expect(canvasBox.height).toBeGreaterThan(260);
expect(sheetBox.height).toBeLessThanOrEqual(360); expect(sheetBox.height).toBeLessThanOrEqual(360);
await page.getByRole("button", { name: "Objects" }).click();
await expect(page.getByRole("button", { name: "Objects" })).toHaveClass(/active/);
await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click(); await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click();
const labelInput = page.getByRole("textbox", { name: "Label" }); const labelInput = page.getByRole("textbox", { name: "Label" });
await expect(labelInput).toBeVisible(); await expect(labelInput).toBeVisible();
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery"); await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
const geometryControls = page.locator(".location-map-geometry-controls"); await expect(page.locator(".location-map-object").last()).toHaveAttribute("data-object-key", "1601");
await expect(geometryControls).toBeVisible(); await expect(page.getByLabel("Object type")).toHaveCount(0);
await expect(geometryControls.getByText("Position")).toBeVisible(); await expect(page.locator(".location-map-geometry-controls")).toHaveCount(0);
await expect(geometryControls.getByText("Size")).toBeVisible(); await expect(page.getByLabel("X position")).toHaveCount(0);
await expect(page.getByLabel("X position")).toHaveValue("40"); await expect(page.getByLabel("Y position")).toHaveCount(0);
await expect(page.getByLabel("Y position")).toHaveValue("40"); await expect(page.getByLabel("Width")).toHaveCount(0);
await expect(page.getByLabel("Width")).toHaveValue("260"); await expect(page.getByLabel("Height")).toHaveCount(0);
await expect(page.getByLabel("Height")).toHaveValue("160"); const fieldRows = page.locator(".location-map-field-row");
await expect(fieldRows).toHaveCount(2);
const selectedPrimaryActions = page.locator(".location-map-selected-primary-actions"); const selectedPrimaryActions = page.locator(".location-map-selected-primary-actions");
const selectedSecondaryActions = page.locator(".location-map-selected-secondary-actions"); const selectedSecondaryActions = page.locator(".location-map-selected-secondary-actions");
await expect(selectedPrimaryActions.getByRole("button", { name: "Save Draft" })).toBeVisible(); await expect(selectedPrimaryActions.getByRole("button", { name: "Save Draft" })).toBeVisible();
await expect(selectedPrimaryActions.getByRole("button", { name: "Publish" })).toBeVisible(); await expect(selectedPrimaryActions.getByRole("button", { name: "Publish" })).toBeVisible();
await expect(selectedSecondaryActions.getByRole("button", { name: "Add Area" })).toBeVisible(); await expect(selectedSecondaryActions.getByRole("button", { name: "Add Area" })).toBeVisible();
await expect(selectedSecondaryActions.getByRole("button", { name: "Preview Draft" })).toBeVisible(); await expect(selectedSecondaryActions.getByRole("button", { name: "Preview Draft" })).toHaveCount(0);
await expect(page.getByRole("button", { name: "Done" })).toHaveCount(0);
const selectedPrimaryBox = await selectedPrimaryActions.boundingBox(); const selectedPrimaryBox = await selectedPrimaryActions.boundingBox();
const labelBox = await labelInput.boundingBox(); const labelBox = await labelInput.boundingBox();
const firstFieldRowBox = await fieldRows.first().boundingBox();
expect(selectedPrimaryBox).not.toBeNull(); expect(selectedPrimaryBox).not.toBeNull();
expect(labelBox).not.toBeNull(); expect(labelBox).not.toBeNull();
if (!selectedPrimaryBox || !labelBox) { expect(firstFieldRowBox).not.toBeNull();
if (!selectedPrimaryBox || !labelBox || !firstFieldRowBox) {
throw new Error("Selected object draft actions were not measurable"); throw new Error("Selected object draft actions were not measurable");
} }
expect(selectedPrimaryBox.y).toBeLessThan(labelBox.y); expect(selectedPrimaryBox.y).toBeLessThan(labelBox.y);
const geometryBox = await geometryControls.boundingBox(); expect(firstFieldRowBox.height).toBeLessThanOrEqual(54);
expect(geometryBox).not.toBeNull(); await page.getByRole("button", { name: "View" }).click();
if (!geometryBox) {
throw new Error("Geometry controls were not measurable");
}
expect(geometryBox.height).toBeLessThanOrEqual(92);
await page.getByRole("button", { name: "Done" }).click();
await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0); await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0);
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Edit Objects");
}); });
test("members can view a published map but cannot edit it", async ({ page }) => { test("members can view a published map but cannot edit it", async ({ page }) => {