96 lines
2.8 KiB
JavaScript
96 lines
2.8 KiB
JavaScript
import { MAX_MAP_ZOOM, MIN_MAP_ZOOM, clampMapZoom } from "../../lib/locationMapUtils";
|
|
|
|
export default function LocationMapToolbar({
|
|
mode,
|
|
editorTool,
|
|
hasAnyMap,
|
|
canManage,
|
|
saving,
|
|
zoom,
|
|
setZoom,
|
|
onFit,
|
|
onView,
|
|
onEdit,
|
|
onPanMode,
|
|
onEditObjects,
|
|
}) {
|
|
const isAtMinZoom = zoom <= MIN_MAP_ZOOM;
|
|
const isAtMaxZoom = zoom >= MAX_MAP_ZOOM;
|
|
|
|
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={saving || !hasAnyMap}
|
|
onClick={onView}
|
|
aria-pressed={mode === "view"}
|
|
>
|
|
View
|
|
</button>
|
|
{canManage ? (
|
|
<button
|
|
type="button"
|
|
className={mode === "edit" ? "active" : ""}
|
|
disabled={saving || !hasAnyMap}
|
|
onClick={onEdit}
|
|
aria-pressed={mode === "edit"}
|
|
aria-label="Edit Draft"
|
|
>
|
|
<span className="location-map-label-full">Edit Draft</span>
|
|
<span className="location-map-label-short">Edit</span>
|
|
</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}
|
|
disabled={saving}
|
|
aria-pressed={editorTool === "pan"}
|
|
>
|
|
Pan Mode
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={editorTool === "edit" ? "active is-edit" : ""}
|
|
onClick={onEditObjects}
|
|
disabled={saving}
|
|
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) => Number(clampMapZoom(value - 0.15).toFixed(2)))}
|
|
disabled={!hasAnyMap || isAtMinZoom}
|
|
aria-label="Zoom out"
|
|
>
|
|
-
|
|
</button>
|
|
<span>{Math.round(zoom * 100)}%</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setZoom((value) => Number(clampMapZoom(value + 0.15).toFixed(2)))}
|
|
disabled={!hasAnyMap || isAtMaxZoom}
|
|
aria-label="Zoom in"
|
|
>
|
|
+
|
|
</button>
|
|
<button type="button" onClick={onFit} disabled={!hasAnyMap}>
|
|
Fit
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|