mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2025-08-26 14:19:24 +00:00
Watermark looking good
This commit is contained in:
parent
a921ec5909
commit
457dcbed9e
@ -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}>
|
||||||
|
@ -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,
|
||||||
|
@ -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)
|
steps.push({
|
||||||
if (hasFiles) {
|
title: t("watermark.steps.type", "Watermark Type"),
|
||||||
steps.push({
|
isCollapsed: hasResults ? true : collapsedType,
|
||||||
title: t("watermark.steps.type", "Watermark Type"),
|
isVisible: hasFiles || hasResults,
|
||||||
isCollapsed: hasResults ? true : collapsedType,
|
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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user