86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
export default function LocationMapToolbar({
|
|
mode,
|
|
editorTool,
|
|
hasAnyMap,
|
|
canManage,
|
|
zoom,
|
|
setZoom,
|
|
onFit,
|
|
onView,
|
|
onEdit,
|
|
onPanMode,
|
|
onEditObjects,
|
|
}) {
|
|
return (
|
|
<section className="location-map-toolbar" aria-label="Map controls">
|
|
<div className="location-map-mode-group">
|
|
<div className="location-map-mode-buttons" aria-label="Map mode">
|
|
<button
|
|
type="button"
|
|
className={mode === "view" ? "active" : ""}
|
|
disabled={!hasAnyMap}
|
|
onClick={onView}
|
|
aria-pressed={mode === "view"}
|
|
>
|
|
View
|
|
</button>
|
|
{canManage ? (
|
|
<button
|
|
type="button"
|
|
className={mode === "edit" ? "active" : ""}
|
|
disabled={!hasAnyMap}
|
|
onClick={onEdit}
|
|
aria-pressed={mode === "edit"}
|
|
>
|
|
Edit Draft
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
{mode === "edit" && canManage ? (
|
|
<div className="location-map-tool-buttons" aria-label="Edit tool">
|
|
<button
|
|
type="button"
|
|
className={editorTool === "pan" ? "active is-pan" : ""}
|
|
onClick={onPanMode}
|
|
aria-pressed={editorTool === "pan"}
|
|
>
|
|
Pan Mode
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={editorTool === "edit" ? "active is-edit" : ""}
|
|
onClick={onEditObjects}
|
|
aria-pressed={editorTool === "edit"}
|
|
>
|
|
Edit Objects
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="location-map-zoom-controls" aria-label="Zoom controls">
|
|
<button
|
|
type="button"
|
|
onClick={() => setZoom((value) => Math.max(0.45, value - 0.15))}
|
|
disabled={!hasAnyMap}
|
|
aria-label="Zoom out"
|
|
>
|
|
-
|
|
</button>
|
|
<span>{Math.round(zoom * 100)}%</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setZoom((value) => Math.min(1.6, value + 0.15))}
|
|
disabled={!hasAnyMap}
|
|
aria-label="Zoom in"
|
|
>
|
|
+
|
|
</button>
|
|
<button type="button" onClick={onFit} disabled={!hasAnyMap}>
|
|
Fit
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|