syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement brush availability hints and enhance layer rendering order

Browse Source
This commit is contained in:
syntaxbullet
2026-07-03 23:18:48 +02:00
parent e8073e6146
commit cbd4eb5e9b
7 changed files with 64 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
view/BottomControlsIsland.tsx
View File

@@ -19,10 +19,11 @@ export type BottomControlsIslandProps = {
maskViewMode?: MaskViewMode;
transformBounds?: Rect;
transformTarget?: TransformTarget;
brushHint?: string;
dispatch: AppStore["dispatch"];
};
export function BottomControlsIsland({ viewport, visible, action, activeTool, brushSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, dispatch }: BottomControlsIslandProps) {
export function BottomControlsIsland({ viewport, visible, action, activeTool, brushSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch }: BottomControlsIslandProps) {
const zoomPercent = Math.round(viewport.zoom * 100);
const x = Math.round(viewport.center.x);
const y = Math.round(viewport.center.y);
@@ -34,7 +35,9 @@ export function BottomControlsIsland({ viewport, visible, action, activeTool, br
visible ? "pointer-events-auto translate-y-0 opacity-100" : "pointer-events-none translate-y-3 opacity-0"
}`}
>
{activeTool === "brush" || activeTool === "eraser" ? (
{(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} />
) : transformBounds && transformTarget ? (
<TransformControls bounds={transformBounds} target={transformTarget} dispatch={dispatch} />
@@ -46,3 +49,12 @@ export function BottomControlsIsland({ viewport, visible, action, activeTool, br
</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>
);
}