46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import type { AppStore } from "@editor/store";
|
|
import type { ViewportState } from "@editor/state";
|
|
import { PanControls } from "./bottom-controls/PanControls";
|
|
import { SelectionControls } from "./bottom-controls/SelectionControls";
|
|
import { TransformControls } from "./bottom-controls/TransformControls";
|
|
import { ZoomControls } from "./bottom-controls/ZoomControls";
|
|
import type { Rect } from "@core/geometry";
|
|
import type { SelectionSummary } from "./selectionSummary";
|
|
|
|
export type BottomControlsAction = "pan" | "zoom";
|
|
|
|
export type BottomControlsIslandProps = {
|
|
viewport: ViewportState;
|
|
visible: boolean;
|
|
action: BottomControlsAction;
|
|
selection: SelectionSummary;
|
|
transformBounds?: Rect;
|
|
dispatch: AppStore["dispatch"];
|
|
onOpenLayers: () => void;
|
|
};
|
|
|
|
export function BottomControlsIsland({ viewport, visible, action, selection, transformBounds, dispatch, onOpenLayers }: BottomControlsIslandProps) {
|
|
const zoomPercent = Math.round(viewport.zoom * 100);
|
|
const x = Math.round(viewport.center.x);
|
|
const y = Math.round(viewport.center.y);
|
|
|
|
return (
|
|
<div
|
|
aria-hidden={!visible}
|
|
className={`flex h-10 min-w-48 items-center justify-center gap-2 rounded-full border border-white/10 bg-black/70 px-2 py-1 text-xs text-white shadow-xl backdrop-blur transition-all duration-200 ${
|
|
visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
|
|
}`}
|
|
>
|
|
{transformBounds ? (
|
|
<TransformControls bounds={transformBounds} />
|
|
) : selection.type !== "none" ? (
|
|
<SelectionControls selection={selection} onOpenLayers={onOpenLayers} />
|
|
) : action === "pan" ? (
|
|
<PanControls x={x} y={y} />
|
|
) : (
|
|
<ZoomControls zoom={viewport.zoom} zoomPercent={zoomPercent} dispatch={dispatch} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|