Add store location map manager #20
@ -1,6 +1,5 @@
|
||||
import {
|
||||
DEFAULT_MAP_FILTERS,
|
||||
MAP_OBJECT_TYPES,
|
||||
getMapObjectDisplayLabel,
|
||||
} from "../../lib/locationMapUtils";
|
||||
|
||||
@ -19,14 +18,6 @@ const DISPLAY_CONTROLS = [
|
||||
["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({
|
||||
mode,
|
||||
editorTool,
|
||||
@ -40,24 +31,16 @@ export default function LocationMapBottomSheet({
|
||||
visibleUnmappedItems,
|
||||
unmappedItemCount,
|
||||
hiddenAreaCount,
|
||||
history,
|
||||
future,
|
||||
saving,
|
||||
savingAction,
|
||||
hasUnsavedChanges,
|
||||
mapState,
|
||||
mapSize,
|
||||
onAddObject,
|
||||
onUndo,
|
||||
onRedo,
|
||||
onSaveDraft,
|
||||
onPublish,
|
||||
onPreviewDraft,
|
||||
onPanMode,
|
||||
onEditObjects,
|
||||
onObjectField,
|
||||
onZoneLinkChange,
|
||||
onClearSelection,
|
||||
onDuplicateObject,
|
||||
onDeleteObject,
|
||||
onShowHiddenAreas,
|
||||
@ -80,11 +63,6 @@ export default function LocationMapBottomSheet({
|
||||
: selectedObject
|
||||
? selectedTitle
|
||||
: "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 showEditorControls = mode === "edit" && canManage;
|
||||
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 hasHiddenUnmappedItems =
|
||||
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 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 publishLabel = savingAction === "publish" ? "Publishing..." : "Publish";
|
||||
const resetLayerFilters = () => setFilters({ ...DEFAULT_MAP_FILTERS });
|
||||
@ -140,9 +111,11 @@ export default function LocationMapBottomSheet({
|
||||
const secondaryDraftActions = showEditorControls ? (
|
||||
<div className="location-map-editor-actions location-map-secondary-actions">
|
||||
<button type="button" onClick={onAddObject} disabled={saving}>Add Area</button>
|
||||
<button type="button" onClick={onPreviewDraft} aria-label="Preview Draft" disabled={saving}>Preview</button>
|
||||
<button type="button" onClick={onUndo} disabled={saving || history.length === 0}>Undo</button>
|
||||
<button type="button" onClick={onRedo} disabled={saving || future.length === 0}>Redo</button>
|
||||
{!showSelectedObjectForm ? (
|
||||
<button type="button" onClick={onPreviewDraft} aria-label="Preview Draft" disabled={saving}>
|
||||
Preview
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
) : null;
|
||||
const editorActions = showEditorControls ? (
|
||||
@ -162,9 +135,6 @@ export default function LocationMapBottomSheet({
|
||||
<span className="location-map-sheet-count">{selectedItemCountLabel}</span>
|
||||
) : null}
|
||||
</div>
|
||||
{mode === "edit" && canManage ? (
|
||||
<span>{sheetDescription}</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="location-map-layer-actions">
|
||||
{changedLayerCount ? (
|
||||
@ -221,27 +191,6 @@ export default function LocationMapBottomSheet({
|
||||
</div>
|
||||
) : 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 ? (
|
||||
<div className="location-map-hidden-areas">
|
||||
<button type="button" onClick={onShowHiddenAreas} disabled={saving}>
|
||||
@ -252,29 +201,16 @@ export default function LocationMapBottomSheet({
|
||||
|
||||
{mode === "edit" && editorTool === "edit" && selectedObject ? (
|
||||
<div className="location-map-object-form">
|
||||
<label>
|
||||
Label
|
||||
<label className="location-map-field-row">
|
||||
<span>Label</span>
|
||||
<input
|
||||
value={selectedObject.label || ""}
|
||||
disabled={saving}
|
||||
onChange={(event) => onObjectField("label", event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Type
|
||||
<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
|
||||
<label className="location-map-field-row">
|
||||
<span>Zone</span>
|
||||
<select
|
||||
aria-label="Linked zone"
|
||||
value={objectZoneId(selectedObject)}
|
||||
@ -307,89 +243,13 @@ export default function LocationMapBottomSheet({
|
||||
Locked
|
||||
</label>
|
||||
</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">
|
||||
<button type="button" onClick={onClearSelection}>Done</button>
|
||||
<button type="button" onClick={onDuplicateObject} disabled={saving}>Duplicate</button>
|
||||
<button type="button" className="danger" onClick={onDeleteObject} disabled={saving}>Delete</button>
|
||||
</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" ? (
|
||||
<p className="location-map-muted">
|
||||
Use Pan Mode to move around the map. Switch to Objects when you want to edit areas.
|
||||
</p>
|
||||
null
|
||||
) : selectedObject ? (
|
||||
<div className="location-map-zone-items">
|
||||
{selectedZoneItems.length === 0 ? (
|
||||
@ -428,11 +288,7 @@ export default function LocationMapBottomSheet({
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="location-map-muted">
|
||||
Tap a zone to view assigned items. Item pins stay hidden unless you turn them on in Layers.
|
||||
</p>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
{showSelectedObjectForm && secondaryDraftActions ? (
|
||||
<div
|
||||
|
||||
@ -407,7 +407,13 @@ export default function LocationMapCanvas({
|
||||
{mode === "edit" ? (
|
||||
<rect className="location-map-grid" width={mapSize.width} height={mapSize.height} />
|
||||
) : null}
|
||||
{objects.map(renderMapObject)}
|
||||
{(selectedObjectKey
|
||||
? [
|
||||
...objects.filter((object) => getObjectKey(object) !== selectedObjectKey),
|
||||
...objects.filter((object) => getObjectKey(object) === selectedObjectKey),
|
||||
]
|
||||
: objects
|
||||
).map(renderMapObject)}
|
||||
</svg>
|
||||
{emptyCanvasMessage ? (
|
||||
<div
|
||||
|
||||
@ -6,6 +6,8 @@ export default function LocationMapToolbar({
|
||||
hasAnyMap,
|
||||
canManage,
|
||||
saving,
|
||||
history = [],
|
||||
future = [],
|
||||
zoom,
|
||||
setZoom,
|
||||
onFit,
|
||||
@ -13,6 +15,8 @@ export default function LocationMapToolbar({
|
||||
onEdit,
|
||||
onPanMode,
|
||||
onEditObjects,
|
||||
onUndo,
|
||||
onRedo,
|
||||
}) {
|
||||
const isAtMinZoom = zoom <= MIN_MAP_ZOOM;
|
||||
const isAtMaxZoom = zoom >= MAX_MAP_ZOOM;
|
||||
@ -44,6 +48,26 @@ export default function LocationMapToolbar({
|
||||
</button>
|
||||
) : null}
|
||||
</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">↶</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRedo}
|
||||
disabled={saving || future.length === 0}
|
||||
aria-label="Redo"
|
||||
>
|
||||
<span aria-hidden="true">↷</span>
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
{mode === "edit" && canManage ? (
|
||||
<div className="location-map-tool-buttons" aria-label="Edit tool">
|
||||
<button
|
||||
|
||||
@ -472,7 +472,7 @@ export default function LocationMapManager() {
|
||||
|
||||
const handleEditMode = () => {
|
||||
setMode("edit");
|
||||
setEditorTool("pan");
|
||||
setEditorTool("edit");
|
||||
setPreviewDraft(true);
|
||||
if (!previewDraft && mapState && !hasUnsavedChanges) {
|
||||
syncMapDraftFromState(mapState, "edit", true);
|
||||
@ -539,6 +539,8 @@ export default function LocationMapManager() {
|
||||
hasAnyMap={hasAnyMap}
|
||||
canManage={canManage}
|
||||
saving={saving}
|
||||
history={history}
|
||||
future={future}
|
||||
zoom={zoom}
|
||||
setZoom={setZoom}
|
||||
onFit={handleFitMap}
|
||||
@ -546,6 +548,8 @@ export default function LocationMapManager() {
|
||||
onEdit={handleEditMode}
|
||||
onPanMode={() => setEditorTool("pan")}
|
||||
onEditObjects={() => setEditorTool("edit")}
|
||||
onUndo={handleUndo}
|
||||
onRedo={handleRedo}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
@ -556,7 +560,11 @@ export default function LocationMapManager() {
|
||||
zoneCount={mapState?.zones?.length || 0}
|
||||
saving={saving}
|
||||
savingAction={savingAction}
|
||||
onContinue={() => setMode("edit")}
|
||||
onContinue={() => {
|
||||
setMode("edit");
|
||||
setEditorTool("edit");
|
||||
setPreviewDraft(true);
|
||||
}}
|
||||
onPreview={handlePreviewDraft}
|
||||
onPublish={handlePublish}
|
||||
onCreateFromZones={handleCreateFromZones}
|
||||
@ -604,24 +612,16 @@ export default function LocationMapManager() {
|
||||
visibleUnmappedItems={visibleUnmappedItems}
|
||||
unmappedItemCount={unmappedItemCount}
|
||||
hiddenAreaCount={hiddenAreaCount}
|
||||
history={history}
|
||||
future={future}
|
||||
saving={saving}
|
||||
savingAction={savingAction}
|
||||
hasUnsavedChanges={hasUnsavedChanges}
|
||||
mapState={mapState}
|
||||
mapSize={mapSize}
|
||||
onAddObject={handleAddObject}
|
||||
onUndo={handleUndo}
|
||||
onRedo={handleRedo}
|
||||
onSaveDraft={handleSaveDraft}
|
||||
onPublish={handlePublish}
|
||||
onPreviewDraft={handlePreviewDraft}
|
||||
onPanMode={() => setEditorTool("pan")}
|
||||
onEditObjects={() => setEditorTool("edit")}
|
||||
onObjectField={handleObjectField}
|
||||
onZoneLinkChange={handleZoneLinkChange}
|
||||
onClearSelection={() => setSelectedObjectKey(null)}
|
||||
onDuplicateObject={handleDuplicateObject}
|
||||
onDeleteObject={requestDeleteObject}
|
||||
onShowHiddenAreas={handleShowHiddenAreas}
|
||||
|
||||
@ -124,6 +124,7 @@
|
||||
.location-map-mode-buttons,
|
||||
.location-map-tool-buttons,
|
||||
.location-map-zoom-controls,
|
||||
.location-map-history-buttons,
|
||||
.location-map-editor-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -133,6 +134,7 @@
|
||||
.location-map-mode-buttons button,
|
||||
.location-map-tool-buttons button,
|
||||
.location-map-zoom-controls button,
|
||||
.location-map-history-buttons button,
|
||||
.location-map-editor-actions button,
|
||||
.location-map-setup-actions button {
|
||||
min-height: 40px;
|
||||
@ -145,6 +147,21 @@
|
||||
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-tool-buttons button.active,
|
||||
.location-map-editor-actions button.primary,
|
||||
@ -154,6 +171,17 @@
|
||||
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 {
|
||||
border-color: rgba(245, 158, 11, 0.78);
|
||||
background: rgba(245, 158, 11, 0.22);
|
||||
@ -174,9 +202,9 @@
|
||||
.location-map-mode-buttons button:disabled,
|
||||
.location-map-tool-buttons button:disabled,
|
||||
.location-map-zoom-controls button:disabled,
|
||||
.location-map-history-buttons button:disabled,
|
||||
.location-map-editor-actions button:disabled,
|
||||
.location-map-hidden-areas button:disabled,
|
||||
.location-map-mobile-tool-switch button:disabled,
|
||||
.location-map-setup-actions button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
@ -525,32 +553,6 @@
|
||||
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 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
@ -569,12 +571,22 @@
|
||||
|
||||
.location-map-object-form {
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.location-map-object-form label {
|
||||
.location-map-field-row {
|
||||
min-height: 42px;
|
||||
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;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
@ -582,8 +594,10 @@
|
||||
|
||||
.location-map-object-form input,
|
||||
.location-map-object-form select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 40px;
|
||||
padding: 0.55rem 0.65rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border: 1px solid var(--color-border-light);
|
||||
border-radius: 8px;
|
||||
background: #15283b;
|
||||
@ -600,12 +614,14 @@
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.35rem 0.5rem;
|
||||
border: 1px solid var(--color-border-light);
|
||||
border-radius: 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 34, 0.58);
|
||||
color: #f8fafc;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.location-map-object-flags input {
|
||||
@ -615,63 +631,6 @@
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
@ -842,20 +801,28 @@
|
||||
.location-map-toolbar {
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.65rem;
|
||||
gap: 0.15rem;
|
||||
padding: 0.35rem 0.25rem;
|
||||
}
|
||||
|
||||
.location-map-mode-group,
|
||||
.location-map-mode-buttons {
|
||||
width: 100%;
|
||||
.location-map-mode-group {
|
||||
flex: 0 0 auto;
|
||||
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 {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding-inline: 0.45rem;
|
||||
min-height: 40px;
|
||||
padding: 0.35rem 0.42rem;
|
||||
}
|
||||
|
||||
.location-map-label-full {
|
||||
@ -866,18 +833,30 @@
|
||||
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 {
|
||||
flex: 0 0 auto;
|
||||
gap: 0.3rem;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.location-map-zoom-controls button {
|
||||
min-width: 40px;
|
||||
padding-inline: 0.5rem;
|
||||
min-height: 40px;
|
||||
padding: 0.35rem;
|
||||
}
|
||||
|
||||
.location-map-zoom-controls span {
|
||||
min-width: 42px;
|
||||
min-width: 36px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
@ -885,15 +864,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.location-map-mobile-tool-switch {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.location-map-display-controls {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.location-map-geometry-controls {
|
||||
gap: 0.45rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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();
|
||||
await bakeryObject.click();
|
||||
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
|
||||
const objectTypeSelect = page.getByLabel("Object type");
|
||||
await expect(objectTypeSelect).toHaveValue("zone");
|
||||
await expect(objectTypeSelect.locator('option[value="zone"]')).toHaveText("Zone");
|
||||
await expect(objectTypeSelect.locator('option[value="aisle"]')).toHaveText("Aisle");
|
||||
await expect(page.locator(".location-map-object").last()).toHaveAttribute("data-object-key", "1001");
|
||||
await expect(page.getByLabel("Object type")).toHaveCount(0);
|
||||
const moveBox = await bakeryObject.boundingBox();
|
||||
expect(moveBox).not.toBeNull();
|
||||
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);
|
||||
|
||||
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: "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(xInput).toBeEnabled();
|
||||
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveCount(0);
|
||||
await expect(page.getByLabel("Locked")).not.toBeChecked();
|
||||
|
||||
await page.getByLabel("Locked").click();
|
||||
await expect(page.getByLabel("Locked")).toBeChecked();
|
||||
await expect(page.getByRole("textbox", { name: "Label" })).toBeEnabled();
|
||||
await expect(page.getByLabel("Visible")).toBeEnabled();
|
||||
await expect(xInput).toBeDisabled();
|
||||
await expect(yInput).toBeDisabled();
|
||||
await expect(widthInput).toBeDisabled();
|
||||
await expect(heightInput).toBeDisabled();
|
||||
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveCount(0);
|
||||
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveCount(0);
|
||||
await expect(page.getByRole("spinbutton", { name: "W" })).toHaveCount(0);
|
||||
await expect(page.getByRole("spinbutton", { name: "H" })).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 page.getByRole("button", { name: "Map area Bakery" }).focus();
|
||||
await bakeryArea.focus();
|
||||
await page.keyboard.press("ArrowRight");
|
||||
await expect(xInput).toHaveValue("40");
|
||||
await expect(bakeryArea).toHaveAttribute("x", "40");
|
||||
|
||||
await page.getByLabel("Locked").click();
|
||||
await expect(page.getByLabel("Locked")).not.toBeChecked();
|
||||
await expect(xInput).toBeEnabled();
|
||||
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 expect(bakeryArea).toBeFocused();
|
||||
await page.keyboard.press("Enter");
|
||||
await expect(page.getByText("Move, resize, link, rename, or nudge with arrow keys.")).toBeVisible();
|
||||
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveValue("40");
|
||||
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveValue("40");
|
||||
await expect(page.getByText("Move, resize, link, rename, or nudge with arrow keys.")).toHaveCount(0);
|
||||
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveCount(0);
|
||||
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 page.keyboard.press("ArrowRight");
|
||||
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveValue("50");
|
||||
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveValue("40");
|
||||
await expect(bakeryArea).toHaveAttribute("x", "50");
|
||||
await expect(bakeryArea).toHaveAttribute("y", "40");
|
||||
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: "Undo" })).toBeEnabled();
|
||||
|
||||
await page.keyboard.press("Shift+ArrowDown");
|
||||
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveValue("50");
|
||||
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveValue("65");
|
||||
await expect(bakeryArea).toHaveAttribute("x", "50");
|
||||
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);
|
||||
|
||||
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.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");
|
||||
await expect(page.locator(".location-map-field-row")).toHaveCount(2);
|
||||
await expect(page.getByRole("textbox", { name: "Label" })).toHaveValue("Bakery");
|
||||
await expect(page.getByLabel("Linked zone")).toHaveValue("501");
|
||||
await expect(page.getByLabel("Object type")).toHaveCount(0);
|
||||
await expect(page.getByRole("spinbutton", { name: "X" })).toHaveCount(0);
|
||||
await expect(page.getByRole("spinbutton", { name: "Y" })).toHaveCount(0);
|
||||
await expect(page.getByRole("spinbutton", { name: "W" })).toHaveCount(0);
|
||||
await expect(page.getByRole("spinbutton", { name: "H" })).toHaveCount(0);
|
||||
});
|
||||
|
||||
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: "Publish" })).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: "Duplicate" })).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.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 secondaryActions = page.locator(".location-map-secondary-actions");
|
||||
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();
|
||||
if (!primaryActionBox || !secondaryActionBox) throw new Error("Mobile action groups were not measurable");
|
||||
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);
|
||||
|
||||
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(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();
|
||||
const labelInput = page.getByRole("textbox", { name: "Label" });
|
||||
await expect(labelInput).toBeVisible();
|
||||
await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
|
||||
const geometryControls = page.locator(".location-map-geometry-controls");
|
||||
await expect(geometryControls).toBeVisible();
|
||||
await expect(geometryControls.getByText("Position")).toBeVisible();
|
||||
await expect(geometryControls.getByText("Size")).toBeVisible();
|
||||
await expect(page.getByLabel("X position")).toHaveValue("40");
|
||||
await expect(page.getByLabel("Y position")).toHaveValue("40");
|
||||
await expect(page.getByLabel("Width")).toHaveValue("260");
|
||||
await expect(page.getByLabel("Height")).toHaveValue("160");
|
||||
await expect(page.locator(".location-map-object").last()).toHaveAttribute("data-object-key", "1601");
|
||||
await expect(page.getByLabel("Object type")).toHaveCount(0);
|
||||
await expect(page.locator(".location-map-geometry-controls")).toHaveCount(0);
|
||||
await expect(page.getByLabel("X position")).toHaveCount(0);
|
||||
await expect(page.getByLabel("Y position")).toHaveCount(0);
|
||||
await expect(page.getByLabel("Width")).toHaveCount(0);
|
||||
await expect(page.getByLabel("Height")).toHaveCount(0);
|
||||
const fieldRows = page.locator(".location-map-field-row");
|
||||
await expect(fieldRows).toHaveCount(2);
|
||||
const selectedPrimaryActions = page.locator(".location-map-selected-primary-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: "Publish" })).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 labelBox = await labelInput.boundingBox();
|
||||
const firstFieldRowBox = await fieldRows.first().boundingBox();
|
||||
expect(selectedPrimaryBox).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");
|
||||
}
|
||||
expect(selectedPrimaryBox.y).toBeLessThan(labelBox.y);
|
||||
const geometryBox = await geometryControls.boundingBox();
|
||||
expect(geometryBox).not.toBeNull();
|
||||
if (!geometryBox) {
|
||||
throw new Error("Geometry controls were not measurable");
|
||||
}
|
||||
expect(geometryBox.height).toBeLessThanOrEqual(92);
|
||||
await page.getByRole("button", { name: "Done" }).click();
|
||||
expect(firstFieldRowBox.height).toBeLessThanOrEqual(54);
|
||||
await page.getByRole("button", { name: "View" }).click();
|
||||
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 }) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user