85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import { Minus, CornersOut, Hand, Plus } from "@phosphor-icons/react";
|
|
import { commandIds } from "@commands/ids";
|
|
import type { AppStore } from "@editor/store";
|
|
import type { ViewportState } from "@editor/state";
|
|
|
|
export type BottomControlsAction = "pan" | "zoom";
|
|
|
|
export type BottomControlsIslandProps = {
|
|
viewport: ViewportState;
|
|
visible: boolean;
|
|
action: BottomControlsAction;
|
|
dispatch: AppStore["dispatch"];
|
|
};
|
|
|
|
export function BottomControlsIsland({ viewport, visible, action, dispatch }: 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"
|
|
}`}
|
|
>
|
|
{action === "pan" ? <PanControls x={x} y={y} /> : <ZoomControls zoom={viewport.zoom} zoomPercent={zoomPercent} dispatch={dispatch} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PanControls({ x, y }: { x: number; y: number }) {
|
|
return (
|
|
<div className="flex w-full items-center justify-center gap-2 tabular-nums">
|
|
<span className={iconSlotClass()}>
|
|
<Hand size={16} weight="regular" />
|
|
</span>
|
|
<Divider />
|
|
<span className={labelClass()}>X</span>
|
|
<span className={valueClass()}>{x}</span>
|
|
<Divider />
|
|
<span className={labelClass()}>Y</span>
|
|
<span className={valueClass()}>{y}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ZoomControls({ zoom, zoomPercent, dispatch }: { zoom: number; zoomPercent: number; dispatch: AppStore["dispatch"] }) {
|
|
return (
|
|
<>
|
|
<button type="button" className={buttonClass()} aria-label="Zoom out" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom / 1.2 })}>
|
|
<Minus size={16} weight="regular" />
|
|
</button>
|
|
<span className="min-w-14 text-center tabular-nums text-white">{zoomPercent}%</span>
|
|
<button type="button" className={buttonClass()} aria-label="Zoom in" onClick={() => dispatch(commandIds.viewportSetZoom, { zoom: zoom * 1.2 })}>
|
|
<Plus size={16} weight="regular" />
|
|
</button>
|
|
<Divider />
|
|
<button type="button" className={buttonClass()} aria-label="Fit artboard" title="Fit artboard" onClick={() => dispatch(commandIds.viewportFitArtboard, undefined)}>
|
|
<CornersOut size={16} weight="regular" />
|
|
</button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function Divider() {
|
|
return <div className="mx-1 h-4 w-px bg-white/15" />;
|
|
}
|
|
|
|
function labelClass() {
|
|
return "text-white/60";
|
|
}
|
|
|
|
function valueClass() {
|
|
return "min-w-10 text-center text-white";
|
|
}
|
|
|
|
function iconSlotClass() {
|
|
return "grid size-7 place-items-center rounded-full text-white/80";
|
|
}
|
|
|
|
function buttonClass() {
|
|
return `${iconSlotClass()} transition hover:bg-white/10 hover:text-white focus:outline-none focus-visible:outline-none`;
|
|
}
|