Watermark looking good

This commit is contained in:
Connor Yoh 2025-08-15 17:22:06 +01:00
parent a921ec5909
commit 457dcbed9e
3 changed files with 42 additions and 38 deletions

View File

@ -9,6 +9,7 @@ import { createReviewToolStep, ReviewToolStepProps } from './ReviewToolStep';
interface ToolStepContextType { interface ToolStepContextType {
visibleStepCount: number; visibleStepCount: number;
forceStepNumbers?: boolean;
} }
const ToolStepContext = createContext<ToolStepContextType | null>(null); const ToolStepContext = createContext<ToolStepContextType | null>(null);
@ -82,10 +83,11 @@ const ToolStep = ({
const parent = useContext(ToolStepContext); const parent = useContext(ToolStepContext);
// Auto-detect if we should show numbers based on sibling count // Auto-detect if we should show numbers based on sibling count or force option
const shouldShowNumber = useMemo(() => { const shouldShowNumber = useMemo(() => {
if (showNumber !== undefined) return showNumber; if (showNumber !== undefined) return showNumber; // Individual step override
return parent ? parent.visibleStepCount >= 3 : false; if (parent?.forceStepNumbers) return true; // Flow-level force
return parent ? parent.visibleStepCount >= 3 : false; // Auto-detect
}, [showNumber, parent]); }, [showNumber, parent]);
const stepNumber = _stepNumber; const stepNumber = _stepNumber;
@ -196,7 +198,7 @@ export function createToolSteps() {
} }
// Context provider wrapper for tools using the factory // Context provider wrapper for tools using the factory
export function ToolStepProvider({ children }: { children: React.ReactNode }) { export function ToolStepProvider({ children, forceStepNumbers }: { children: React.ReactNode; forceStepNumbers?: boolean }) {
// Count visible steps from children that are ToolStep elements // Count visible steps from children that are ToolStep elements
const visibleStepCount = useMemo(() => { const visibleStepCount = useMemo(() => {
let count = 0; let count = 0;
@ -212,8 +214,9 @@ export function ToolStepProvider({ children }: { children: React.ReactNode }) {
}, [children]); }, [children]);
const contextValue = useMemo(() => ({ const contextValue = useMemo(() => ({
visibleStepCount visibleStepCount,
}), [visibleStepCount]); forceStepNumbers
}), [visibleStepCount, forceStepNumbers]);
return ( return (
<ToolStepContext.Provider value={contextValue}> <ToolStepContext.Provider value={contextValue}>

View File

@ -49,6 +49,7 @@ export interface ToolFlowConfig {
steps: MiddleStepConfig[]; steps: MiddleStepConfig[];
executeButton?: ExecuteButtonConfig; executeButton?: ExecuteButtonConfig;
review: ReviewStepConfig; review: ReviewStepConfig;
forceStepNumbers?: boolean;
} }
/** /**
@ -60,7 +61,7 @@ export function createToolFlow(config: ToolFlowConfig) {
return ( return (
<Stack gap="sm" p="sm" h="95vh" w="100%" style={{ overflow: 'auto' }}> <Stack gap="sm" p="sm" h="95vh" w="100%" style={{ overflow: 'auto' }}>
<ToolStepProvider> <ToolStepProvider forceStepNumbers={config.forceStepNumbers}>
{/* Files Step */} {/* Files Step */}
{steps.createFilesStep({ {steps.createFilesStep({
selectedFiles: config.files.selectedFiles, selectedFiles: config.files.selectedFiles,

View File

@ -14,8 +14,15 @@ import WatermarkFormatting from "../components/tools/addWatermark/WatermarkForma
import { useAddWatermarkParameters } from "../hooks/tools/addWatermark/useAddWatermarkParameters"; import { useAddWatermarkParameters } from "../hooks/tools/addWatermark/useAddWatermarkParameters";
import { useAddWatermarkOperation } from "../hooks/tools/addWatermark/useAddWatermarkOperation"; import { useAddWatermarkOperation } from "../hooks/tools/addWatermark/useAddWatermarkOperation";
import { useWatermarkTypeTips, useWatermarkWordingTips, useWatermarkTextStyleTips, useWatermarkFileTips, useWatermarkFormattingTips } from "../components/tooltips/useWatermarkTips"; import {
useWatermarkTypeTips,
useWatermarkWordingTips,
useWatermarkTextStyleTips,
useWatermarkFileTips,
useWatermarkFormattingTips,
} from "../components/tooltips/useWatermarkTips";
import { BaseToolProps } from "../types/tool"; import { BaseToolProps } from "../types/tool";
import { isVisible } from "@testing-library/user-event/dist/utils";
const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
@ -24,7 +31,7 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
const [collapsedType, setCollapsedType] = useState(false); const [collapsedType, setCollapsedType] = useState(false);
const [collapsedStyle, setCollapsedStyle] = useState(true); const [collapsedStyle, setCollapsedStyle] = useState(true);
const [collapsedAdvanced, setCollapsedAdvanced] = useState(true); const [collapsedFormatting, setCollapsedFormatting] = useState(true);
const watermarkParams = useAddWatermarkParameters(); const watermarkParams = useAddWatermarkParameters();
const watermarkOperation = useAddWatermarkOperation(); const watermarkOperation = useAddWatermarkOperation();
@ -80,36 +87,28 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
// Step completion logic // Step completion logic
const typeStepCompleted = hasFiles && !!watermarkParams.parameters.watermarkType; const typeStepCompleted = hasFiles && !!watermarkParams.parameters.watermarkType;
const textWordingCompleted = typeStepCompleted &&
watermarkParams.parameters.watermarkType === 'text' &&
watermarkParams.parameters.watermarkText.trim().length > 0;
const imageFileCompleted = typeStepCompleted &&
watermarkParams.parameters.watermarkType === 'image' &&
watermarkParams.parameters.watermarkImage !== undefined;
// Dynamic step structure based on watermark type // Dynamic step structure based on watermark type
const getSteps = () => { const getSteps = () => {
const steps = []; const steps = [];
// Step 1: Watermark Type (always visible after files)
if (hasFiles) {
steps.push({ steps.push({
title: t("watermark.steps.type", "Watermark Type"), title: t("watermark.steps.type", "Watermark Type"),
isCollapsed: hasResults ? true : collapsedType, isCollapsed: hasResults ? true : collapsedType,
isVisible: hasFiles || hasResults,
onCollapsedClick: hasResults ? handleSettingsReset : () => setCollapsedType(!collapsedType), onCollapsedClick: hasResults ? handleSettingsReset : () => setCollapsedType(!collapsedType),
tooltip: watermarkTypeTips, tooltip: watermarkTypeTips,
content: ( content: (
<WatermarkTypeSettings <WatermarkTypeSettings
watermarkType={watermarkParams.parameters.watermarkType} watermarkType={watermarkParams.parameters.watermarkType}
onWatermarkTypeChange={(type) => watermarkParams.updateParameter('watermarkType', type)} onWatermarkTypeChange={(type) => watermarkParams.updateParameter("watermarkType", type)}
disabled={endpointLoading} disabled={endpointLoading}
/> />
), ),
}); });
}
// Text watermark path // Text watermark path
if (watermarkParams.parameters.watermarkType === 'text') { if (watermarkParams.parameters.watermarkType === "text") {
// Step 2: Wording // Step 2: Wording
steps.push({ steps.push({
title: t("watermark.steps.wording", "Wording"), title: t("watermark.steps.wording", "Wording"),
@ -142,8 +141,8 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
// Step 4: Formatting // Step 4: Formatting
steps.push({ steps.push({
title: t("watermark.steps.formatting", "Formatting"), title: t("watermark.steps.formatting", "Formatting"),
isCollapsed: hasResults ? true : collapsedAdvanced, isCollapsed: hasResults ? true : collapsedFormatting,
onCollapsedClick: hasResults ? handleSettingsReset : () => setCollapsedAdvanced(!collapsedAdvanced), onCollapsedClick: hasResults ? handleSettingsReset : () => setCollapsedFormatting(!collapsedFormatting),
tooltip: watermarkFormattingTips, tooltip: watermarkFormattingTips,
content: ( content: (
<WatermarkFormatting <WatermarkFormatting
@ -156,7 +155,7 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
} }
// Image watermark path // Image watermark path
if (watermarkParams.parameters.watermarkType === 'image') { if (watermarkParams.parameters.watermarkType === "image") {
// Step 2: Watermark File // Step 2: Watermark File
steps.push({ steps.push({
title: t("watermark.steps.file", "Watermark File"), title: t("watermark.steps.file", "Watermark File"),
@ -174,8 +173,8 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
// Step 3: Formatting // Step 3: Formatting
steps.push({ steps.push({
title: t("watermark.steps.formatting", "Formatting"), title: t("watermark.steps.formatting", "Formatting"),
isCollapsed: hasResults ? true : collapsedAdvanced, isCollapsed: hasResults ? true : collapsedFormatting,
onCollapsedClick: hasResults ? handleSettingsReset : () => setCollapsedAdvanced(!collapsedAdvanced), onCollapsedClick: hasResults ? handleSettingsReset : () => setCollapsedFormatting(!collapsedFormatting),
tooltip: watermarkFormattingTips, tooltip: watermarkFormattingTips,
content: ( content: (
<WatermarkFormatting <WatermarkFormatting
@ -209,7 +208,8 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
title: t("watermark.results.title", "Watermark Results"), title: t("watermark.results.title", "Watermark Results"),
onFileClick: handleThumbnailClick, onFileClick: handleThumbnailClick,
}, },
forceStepNumbers: true,
}); });
} };
export default AddWatermark; export default AddWatermark;