82 lines
4.1 KiB
TypeScript
82 lines
4.1 KiB
TypeScript
import type { AppStore } from "@editor/store";
|
|
import type { ImageDocument } from "@core/document";
|
|
import type { GenerationState, MaskViewMode, SelectionState, ViewportState } from "@editor/state";
|
|
import type { BrushSettings, ChromaKeySettings, GenerateSettings, MagicWandSettings, OperationId, ToolId } from "@editor/tools";
|
|
import { BrushControls } from "./bottom-controls/BrushControls";
|
|
import { ChromaKeyControls } from "./bottom-controls/ChromaKeyControls";
|
|
import { MagicWandControls } from "./bottom-controls/MagicWandControls";
|
|
import { GenerateActionControls } from "./bottom-controls/GenerateActionControls";
|
|
import { PanControls } from "./bottom-controls/PanControls";
|
|
import { TransformControls } from "./bottom-controls/TransformControls";
|
|
import { ZoomControls } from "./bottom-controls/ZoomControls";
|
|
import type { Rect } from "@core/geometry";
|
|
import type { TransformTarget } from "@editor/transform";
|
|
import type { GenerationWorkflow } from "@operations/generation/workflow";
|
|
import type { DocumentActions } from "@app/document-actions";
|
|
export type BottomControlsAction = "pan" | "zoom";
|
|
|
|
export type BottomControlsIslandProps = {
|
|
document: ImageDocument;
|
|
selection: SelectionState;
|
|
viewport: ViewportState;
|
|
visible: boolean;
|
|
action: BottomControlsAction;
|
|
activeTool: ToolId;
|
|
operation?: OperationId;
|
|
brushSettings: BrushSettings;
|
|
generateSettings: GenerateSettings;
|
|
generation: GenerationState;
|
|
chromaKeySettings: ChromaKeySettings;
|
|
magicWandSettings: MagicWandSettings;
|
|
editingMask?: boolean;
|
|
maskViewMode?: MaskViewMode;
|
|
transformBounds?: Rect;
|
|
transformTarget?: TransformTarget;
|
|
brushHint?: string;
|
|
dispatch: AppStore["dispatch"];
|
|
generationWorkflow: GenerationWorkflow;
|
|
documentActions: DocumentActions;
|
|
};
|
|
|
|
export function BottomControlsIsland({ document, selection, viewport, visible, action, activeTool, operation, brushSettings, generateSettings, generation, chromaKeySettings, magicWandSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch, generationWorkflow, documentActions }: 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 min-h-20 min-w-96 rounded-[2rem] px-4 py-2 items-center justify-center gap-4 text-sm text-white backdrop-blur transition-all duration-200 ${
|
|
visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
|
|
}`}
|
|
>
|
|
{operation === "generate" ? (
|
|
<GenerateActionControls settings={generateSettings} generation={generation} dispatch={dispatch} workflow={generationWorkflow} generate={documentActions.generate} />
|
|
) : (activeTool === "brush" || activeTool === "eraser") && brushHint ? (
|
|
<BrushHint tool={activeTool} hint={brushHint} />
|
|
) : activeTool === "brush" || activeTool === "eraser" ? (
|
|
<BrushControls tool={activeTool} settings={brushSettings} editingMask={editingMask} maskViewMode={maskViewMode} dispatch={dispatch} />
|
|
) : operation === "chromaKey" ? (
|
|
<ChromaKeyControls document={document} selection={selection} settings={chromaKeySettings} dispatch={dispatch} />
|
|
) : activeTool === "magicWand" ? (
|
|
<MagicWandControls settings={magicWandSettings} dispatch={dispatch} />
|
|
) : transformBounds && transformTarget ? (
|
|
<TransformControls bounds={transformBounds} target={transformTarget} dispatch={dispatch} />
|
|
) : action === "pan" ? (
|
|
<PanControls x={x} y={y} />
|
|
) : (
|
|
<ZoomControls zoomPercent={zoomPercent} actions={documentActions} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function BrushHint({ tool, hint }: { tool: "brush" | "eraser"; hint: string }) {
|
|
return (
|
|
<div className="flex items-center gap-3 px-4 text-center">
|
|
<span className="rounded-full bg-white/10 px-3 py-1 text-xs font-medium uppercase tracking-wide text-white/55">{tool}</span>
|
|
<span className="max-w-[34rem] text-sm font-medium text-white/80">{hint}</span>
|
|
</div>
|
|
);
|
|
}
|