mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-08-20 13:47:46 +02:00
Implement file selection context and integrate with tool management; refactor FileEditor and ToolRenderer for improved file handling
This commit is contained in:
Reece
parent
0549c5b191
commit
405cfd8161
@ -7,6 +7,7 @@ import { Dropzone } from '@mantine/dropzone';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import UploadFileIcon from '@mui/icons-material/UploadFile';
|
||||
import { useFileContext } from '../../contexts/FileContext';
|
||||
import { useFileSelection } from '../../contexts/FileSelectionContext';
|
||||
import { FileOperation } from '../../types/fileContext';
|
||||
import { fileStorage } from '../../services/fileStorage';
|
||||
import { generateThumbnailForFile } from '../../utils/thumbnailUtils';
|
||||
@ -31,20 +32,16 @@ interface FileEditorProps {
|
||||
onOpenPageEditor?: (file: File) => void;
|
||||
onMergeFiles?: (files: File[]) => void;
|
||||
toolMode?: boolean;
|
||||
multiSelect?: boolean;
|
||||
showUpload?: boolean;
|
||||
showBulkActions?: boolean;
|
||||
onFileSelect?: (files: File[]) => void;
|
||||
}
|
||||
|
||||
const FileEditor = ({
|
||||
onOpenPageEditor,
|
||||
onMergeFiles,
|
||||
toolMode = false,
|
||||
multiSelect = true,
|
||||
showUpload = true,
|
||||
showBulkActions = true,
|
||||
onFileSelect
|
||||
showBulkActions = true
|
||||
}: FileEditorProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
@ -63,6 +60,14 @@ const FileEditor = ({
|
||||
markOperationApplied
|
||||
} = fileContext;
|
||||
|
||||
// Get file selection context
|
||||
const {
|
||||
selectedFiles: toolSelectedFiles,
|
||||
setSelectedFiles: setToolSelectedFiles,
|
||||
maxFiles,
|
||||
isToolMode
|
||||
} = useFileSelection();
|
||||
|
||||
const [files, setFiles] = useState<FileItem[]>([]);
|
||||
const [status, setStatus] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@ -99,14 +104,14 @@ const FileEditor = ({
|
||||
const lastActiveFilesRef = useRef<string[]>([]);
|
||||
const lastProcessedFilesRef = useRef<number>(0);
|
||||
|
||||
// Map context selected file names to local file IDs
|
||||
// Defensive programming: ensure selectedFileIds is always an array
|
||||
const safeSelectedFileIds = Array.isArray(selectedFileIds) ? selectedFileIds : [];
|
||||
// Get selected file IDs from context (defensive programming)
|
||||
const contextSelectedIds = Array.isArray(selectedFileIds) ? selectedFileIds : [];
|
||||
|
||||
const localSelectedFiles = files
|
||||
// Map context selections to local file IDs for UI display
|
||||
const localSelectedIds = files
|
||||
.filter(file => {
|
||||
const fileId = (file.file as any).id || file.name;
|
||||
return safeSelectedFileIds.includes(fileId);
|
||||
return contextSelectedIds.includes(fileId);
|
||||
})
|
||||
.map(file => file.id);
|
||||
|
||||
@ -396,44 +401,41 @@ const FileEditor = ({
|
||||
if (!targetFile) return;
|
||||
|
||||
const contextFileId = (targetFile.file as any).id || targetFile.name;
|
||||
const isSelected = contextSelectedIds.includes(contextFileId);
|
||||
|
||||
if (!multiSelect) {
|
||||
// Single select mode for tools - toggle on/off
|
||||
const isCurrentlySelected = safeSelectedFileIds.includes(contextFileId);
|
||||
if (isCurrentlySelected) {
|
||||
// Deselect the file
|
||||
setContextSelectedFiles([]);
|
||||
if (onFileSelect) {
|
||||
onFileSelect([]);
|
||||
}
|
||||
} else {
|
||||
// Select the file
|
||||
setContextSelectedFiles([contextFileId]);
|
||||
if (onFileSelect) {
|
||||
onFileSelect([targetFile.file]);
|
||||
}
|
||||
}
|
||||
let newSelection: string[];
|
||||
|
||||
if (isSelected) {
|
||||
// Remove file from selection
|
||||
newSelection = contextSelectedIds.filter(id => id !== contextFileId);
|
||||
} else {
|
||||
// Multi select mode (default)
|
||||
setContextSelectedFiles(prev => {
|
||||
const safePrev = Array.isArray(prev) ? prev : [];
|
||||
return safePrev.includes(contextFileId)
|
||||
? safePrev.filter(id => id !== contextFileId)
|
||||
: [...safePrev, contextFileId];
|
||||
});
|
||||
|
||||
// Notify parent with selected files
|
||||
if (onFileSelect) {
|
||||
const selectedFiles = files
|
||||
.filter(f => {
|
||||
const fId = (f.file as any).id || f.name;
|
||||
return safeSelectedFileIds.includes(fId) || fId === contextFileId;
|
||||
})
|
||||
.map(f => f.file);
|
||||
onFileSelect(selectedFiles);
|
||||
// Add file to selection
|
||||
if (maxFiles === 1) {
|
||||
newSelection = [contextFileId];
|
||||
} else {
|
||||
// Check if we've hit the selection limit
|
||||
if (maxFiles > 1 && contextSelectedIds.length >= maxFiles) {
|
||||
setStatus(`Maximum ${maxFiles} files can be selected`);
|
||||
return;
|
||||
}
|
||||
newSelection = [...contextSelectedIds, contextFileId];
|
||||
}
|
||||
}
|
||||
}, [files, setContextSelectedFiles, multiSelect, onFileSelect, safeSelectedFileIds]);
|
||||
|
||||
// Update context
|
||||
setContextSelectedFiles(newSelection);
|
||||
|
||||
// Update tool selection context if in tool mode
|
||||
if (isToolMode || toolMode) {
|
||||
const selectedFiles = files
|
||||
.filter(f => {
|
||||
const fId = (f.file as any).id || f.name;
|
||||
return newSelection.includes(fId);
|
||||
})
|
||||
.map(f => f.file);
|
||||
setToolSelectedFiles(selectedFiles);
|
||||
}
|
||||
}, [files, setContextSelectedFiles, maxFiles, contextSelectedIds, setStatus, isToolMode, toolMode, setToolSelectedFiles]);
|
||||
|
||||
const toggleSelectionMode = useCallback(() => {
|
||||
setSelectionMode(prev => {
|
||||
@ -450,15 +452,15 @@ const FileEditor = ({
|
||||
const handleDragStart = useCallback((fileId: string) => {
|
||||
setDraggedFile(fileId);
|
||||
|
||||
if (selectionMode && localSelectedFiles.includes(fileId) && localSelectedFiles.length > 1) {
|
||||
if (selectionMode && localSelectedIds.includes(fileId) && localSelectedIds.length > 1) {
|
||||
setMultiFileDrag({
|
||||
fileIds: localSelectedFiles,
|
||||
count: localSelectedFiles.length
|
||||
fileIds: localSelectedIds,
|
||||
count: localSelectedIds.length
|
||||
});
|
||||
} else {
|
||||
setMultiFileDrag(null);
|
||||
}
|
||||
}, [selectionMode, localSelectedFiles]);
|
||||
}, [selectionMode, localSelectedIds]);
|
||||
|
||||
const handleDragEnd = useCallback(() => {
|
||||
setDraggedFile(null);
|
||||
@ -519,8 +521,8 @@ const FileEditor = ({
|
||||
if (targetIndex === -1) return;
|
||||
}
|
||||
|
||||
const filesToMove = selectionMode && localSelectedFiles.includes(draggedFile)
|
||||
? localSelectedFiles
|
||||
const filesToMove = selectionMode && localSelectedIds.includes(draggedFile)
|
||||
? localSelectedIds
|
||||
: [draggedFile];
|
||||
|
||||
// Update the local files state and sync with activeFiles
|
||||
@ -545,7 +547,7 @@ const FileEditor = ({
|
||||
const moveCount = multiFileDrag ? multiFileDrag.count : 1;
|
||||
setStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
|
||||
|
||||
}, [draggedFile, files, selectionMode, localSelectedFiles, multiFileDrag]);
|
||||
}, [draggedFile, files, selectionMode, localSelectedIds, multiFileDrag]);
|
||||
|
||||
const handleEndZoneDragEnter = useCallback(() => {
|
||||
if (draggedFile) {
|
||||
@ -764,7 +766,7 @@ const FileEditor = ({
|
||||
) : (
|
||||
<DragDropGrid
|
||||
items={files}
|
||||
selectedItems={localSelectedFiles}
|
||||
selectedItems={localSelectedIds}
|
||||
selectionMode={selectionMode}
|
||||
isAnimating={isAnimating}
|
||||
onDragStart={handleDragStart}
|
||||
@ -783,7 +785,7 @@ const FileEditor = ({
|
||||
file={file}
|
||||
index={index}
|
||||
totalFiles={files.length}
|
||||
selectedFiles={localSelectedFiles}
|
||||
selectedFiles={localSelectedIds}
|
||||
selectionMode={selectionMode}
|
||||
draggedFile={draggedFile}
|
||||
dropTarget={dropTarget}
|
||||
|
||||
@ -1,15 +1,7 @@
|
||||
import React, { useState } from "react";
|
||||
import { Box, Text, Stack, Button, TextInput, Group } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
type Tool = {
|
||||
icon: React.ReactNode;
|
||||
name: string;
|
||||
};
|
||||
|
||||
type ToolRegistry = {
|
||||
[id: string]: Tool;
|
||||
};
|
||||
import { ToolRegistry } from "../../types/tool";
|
||||
|
||||
interface ToolPickerProps {
|
||||
selectedToolKey: string | null;
|
||||
|
||||
@ -1,23 +1,29 @@
|
||||
import { FileWithUrl } from "../../types/file";
|
||||
import React, { Suspense } from "react";
|
||||
import { Loader, Center, Stack, Text } from "@mantine/core";
|
||||
import { useToolManagement } from "../../hooks/useToolManagement";
|
||||
import { BaseToolProps } from "../../types/tool";
|
||||
|
||||
interface ToolRendererProps {
|
||||
interface ToolRendererProps extends BaseToolProps {
|
||||
selectedToolKey: string;
|
||||
pdfFile: any;
|
||||
files: FileWithUrl[];
|
||||
toolParams: any;
|
||||
updateParams: (params: any) => void;
|
||||
toolSelectedFiles?: File[];
|
||||
onPreviewFile?: (file: File | null) => void;
|
||||
}
|
||||
|
||||
// Loading fallback component for lazy-loaded tools
|
||||
const ToolLoadingFallback = ({ toolName }: { toolName?: string }) => (
|
||||
<Center h="100%" w="100%">
|
||||
<Stack align="center" gap="md">
|
||||
<Loader size="lg" />
|
||||
<Text c="dimmed" size="sm">
|
||||
{toolName ? `Loading ${toolName}...` : "Loading tool..."}
|
||||
</Text>
|
||||
</Stack>
|
||||
</Center>
|
||||
);
|
||||
|
||||
const ToolRenderer = ({
|
||||
selectedToolKey,
|
||||
files,
|
||||
toolParams,
|
||||
updateParams,
|
||||
toolSelectedFiles = [],
|
||||
onPreviewFile,
|
||||
onComplete,
|
||||
onError,
|
||||
}: ToolRendererProps) => {
|
||||
// Get the tool from registry
|
||||
const { toolRegistry } = useToolManagement();
|
||||
@ -29,41 +35,16 @@ files,
|
||||
|
||||
const ToolComponent = selectedTool.component;
|
||||
|
||||
// Pass tool-specific props
|
||||
switch (selectedToolKey) {
|
||||
case "split":
|
||||
return (
|
||||
<ToolComponent
|
||||
selectedFiles={toolSelectedFiles}
|
||||
onPreviewFile={onPreviewFile}
|
||||
/>
|
||||
);
|
||||
case "compress":
|
||||
return (
|
||||
<ToolComponent
|
||||
files={files}
|
||||
setLoading={(loading: boolean) => {}}
|
||||
params={toolParams}
|
||||
updateParams={updateParams}
|
||||
/>
|
||||
);
|
||||
case "merge":
|
||||
return (
|
||||
<ToolComponent
|
||||
files={files}
|
||||
params={toolParams}
|
||||
updateParams={updateParams}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<ToolComponent
|
||||
files={files}
|
||||
params={toolParams}
|
||||
updateParams={updateParams}
|
||||
/>
|
||||
);
|
||||
}
|
||||
// Wrap lazy-loaded component with Suspense
|
||||
return (
|
||||
<Suspense fallback={<ToolLoadingFallback toolName={selectedTool.name} />}>
|
||||
<ToolComponent
|
||||
onPreviewFile={onPreviewFile}
|
||||
onComplete={onComplete}
|
||||
onError={onError}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
};
|
||||
|
||||
export default ToolRenderer;
|
||||
|
||||
@ -98,7 +98,7 @@ function fileContextReducer(state: FileContextState, action: FileContextAction):
|
||||
|
||||
case 'REMOVE_FILES':
|
||||
const remainingFiles = state.activeFiles.filter(file => {
|
||||
const fileId = (file as any).id || file.name;
|
||||
const fileId = (file as File & { id?: string }).id || file.name;
|
||||
return !action.payload.includes(fileId);
|
||||
});
|
||||
const safeSelectedFileIds = Array.isArray(state.selectedFileIds) ? state.selectedFileIds : [];
|
||||
@ -347,7 +347,7 @@ export function FileContextProvider({
|
||||
// Cleanup timers and refs
|
||||
const cleanupTimers = useRef<Map<string, NodeJS.Timeout>>(new Map());
|
||||
const blobUrls = useRef<Set<string>>(new Set());
|
||||
const pdfDocuments = useRef<Map<string, any>>(new Map());
|
||||
const pdfDocuments = useRef<Map<string, PDFDocument>>(new Map());
|
||||
|
||||
// Enhanced file processing hook
|
||||
const {
|
||||
@ -381,7 +381,7 @@ export function FileContextProvider({
|
||||
blobUrls.current.add(url);
|
||||
}, []);
|
||||
|
||||
const trackPdfDocument = useCallback((fileId: string, pdfDoc: any) => {
|
||||
const trackPdfDocument = useCallback((fileId: string, pdfDoc: PDFDocument) => {
|
||||
// Clean up existing document for this file if any
|
||||
const existing = pdfDocuments.current.get(fileId);
|
||||
if (existing && existing.destroy) {
|
||||
@ -498,7 +498,7 @@ export function FileContextProvider({
|
||||
for (const file of files) {
|
||||
try {
|
||||
// Check if file already has an ID (already in IndexedDB)
|
||||
const fileId = (file as any).id;
|
||||
const fileId = (file as File & { id?: string }).id;
|
||||
if (!fileId) {
|
||||
// File doesn't have ID, store it and get the ID
|
||||
const storedFile = await fileStorage.storeFile(file);
|
||||
@ -680,7 +680,7 @@ export function FileContextProvider({
|
||||
// Utility functions
|
||||
const getFileById = useCallback((fileId: string): File | undefined => {
|
||||
return state.activeFiles.find(file => {
|
||||
const actualFileId = (file as any).id || file.name;
|
||||
const actualFileId = (file as File & { id?: string }).id || file.name;
|
||||
return actualFileId === fileId;
|
||||
});
|
||||
}, [state.activeFiles]);
|
||||
|
||||
85
frontend/src/contexts/FileSelectionContext.tsx
Normal file
85
frontend/src/contexts/FileSelectionContext.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
|
||||
import {
|
||||
MaxFiles,
|
||||
FileSelectionState,
|
||||
FileSelectionActions,
|
||||
FileSelectionComputed,
|
||||
FileSelectionContextValue
|
||||
} from '../types/tool';
|
||||
|
||||
interface FileSelectionProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
const FileSelectionContext = createContext<FileSelectionContextValue | undefined>(undefined);
|
||||
|
||||
export function FileSelectionProvider({ children }: FileSelectionProviderProps) {
|
||||
// State
|
||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||
const [maxFiles, setMaxFiles] = useState<MaxFiles>(-1); // Default: unlimited
|
||||
const [isToolMode, setIsToolMode] = useState<boolean>(false);
|
||||
|
||||
// Actions
|
||||
const clearSelection = useCallback(() => {
|
||||
setSelectedFiles([]);
|
||||
}, []);
|
||||
|
||||
// Computed properties
|
||||
const selectionCount = selectedFiles.length;
|
||||
const canSelectMore = maxFiles === -1 || selectionCount < maxFiles;
|
||||
const isAtLimit = maxFiles > 0 && selectionCount >= maxFiles;
|
||||
const isMultiFileMode = maxFiles !== 1;
|
||||
|
||||
const contextValue: FileSelectionContextValue = {
|
||||
// State
|
||||
selectedFiles,
|
||||
maxFiles,
|
||||
isToolMode,
|
||||
// Actions
|
||||
setSelectedFiles,
|
||||
setMaxFiles,
|
||||
setIsToolMode,
|
||||
clearSelection,
|
||||
// Computed
|
||||
canSelectMore,
|
||||
isAtLimit,
|
||||
selectionCount,
|
||||
isMultiFileMode
|
||||
};
|
||||
|
||||
return (
|
||||
<FileSelectionContext.Provider value={contextValue}>
|
||||
{children}
|
||||
</FileSelectionContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
// Custom hook to use the context
|
||||
export function useFileSelection(): FileSelectionContextValue {
|
||||
const context = useContext(FileSelectionContext);
|
||||
if (!context) {
|
||||
throw new Error('useFileSelection must be used within a FileSelectionProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
// Helper hooks for specific use cases with strict typing
|
||||
export function useToolFileSelection(): Pick<FileSelectionContextValue, 'selectedFiles' | 'maxFiles' | 'canSelectMore' | 'isAtLimit' | 'selectionCount'> {
|
||||
const { selectedFiles, maxFiles, canSelectMore, isAtLimit, selectionCount } = useFileSelection();
|
||||
return { selectedFiles, maxFiles, canSelectMore, isAtLimit, selectionCount };
|
||||
}
|
||||
|
||||
export function useFileSelectionActions(): Pick<FileSelectionContextValue, 'setSelectedFiles' | 'clearSelection' | 'setMaxFiles' | 'setIsToolMode'> {
|
||||
const { setSelectedFiles, clearSelection, setMaxFiles, setIsToolMode } = useFileSelection();
|
||||
return { setSelectedFiles, clearSelection, setMaxFiles, setIsToolMode };
|
||||
}
|
||||
|
||||
export function useFileSelectionState(): Pick<FileSelectionContextValue, 'selectedFiles' | 'maxFiles' | 'isToolMode'> {
|
||||
const { selectedFiles, maxFiles, isToolMode } = useFileSelection();
|
||||
return { selectedFiles, maxFiles, isToolMode };
|
||||
}
|
||||
|
||||
export function useFileSelectionComputed(): Pick<FileSelectionContextValue, 'canSelectMore' | 'isAtLimit' | 'selectionCount' | 'isMultiFileMode'> {
|
||||
const { canSelectMore, isAtLimit, selectionCount, isMultiFileMode } = useFileSelection();
|
||||
return { canSelectMore, isAtLimit, selectionCount, isMultiFileMode };
|
||||
}
|
||||
@ -3,62 +3,88 @@ import { useTranslation } from 'react-i18next';
|
||||
import AddToPhotosIcon from "@mui/icons-material/AddToPhotos";
|
||||
import ContentCutIcon from "@mui/icons-material/ContentCut";
|
||||
import ZoomInMapIcon from "@mui/icons-material/ZoomInMap";
|
||||
import SplitPdfPanel from "../tools/Split";
|
||||
import CompressPdfPanel from "../tools/Compress";
|
||||
import MergePdfPanel from "../tools/Merge";
|
||||
import { useMultipleEndpointsEnabled } from "./useEndpointConfig";
|
||||
import { Tool, ToolDefinition, BaseToolProps, ToolRegistry } from "../types/tool";
|
||||
|
||||
type ToolRegistryEntry = {
|
||||
icon: React.ReactNode;
|
||||
name: string;
|
||||
component: React.ComponentType<any>;
|
||||
view: string;
|
||||
};
|
||||
// Import types from central location - no need to redefine
|
||||
|
||||
type ToolRegistry = {
|
||||
[key: string]: ToolRegistryEntry;
|
||||
};
|
||||
|
||||
const baseToolRegistry = {
|
||||
split: { icon: <ContentCutIcon />, component: SplitPdfPanel, view: "split" },
|
||||
compress: { icon: <ZoomInMapIcon />, component: CompressPdfPanel, view: "viewer" },
|
||||
merge: { icon: <AddToPhotosIcon />, component: MergePdfPanel, view: "pageEditor" },
|
||||
};
|
||||
|
||||
// Tool endpoint mappings
|
||||
const toolEndpoints: Record<string, string[]> = {
|
||||
split: ["split-pages", "split-pdf-by-sections", "split-by-size-or-count", "split-pdf-by-chapters"],
|
||||
compress: ["compress-pdf"],
|
||||
merge: ["merge-pdfs"],
|
||||
// Tool definitions using simplified interface
|
||||
// IMPORTANT: Adding a new tool is just 2 steps:
|
||||
// 1. Add entry here with maxFiles, endpoints, and lazy component
|
||||
// 2. Create the tool component - NO HomePage changes needed!
|
||||
// The system automatically handles FileEditor, file selection, and rendering
|
||||
const toolDefinitions: Record<string, ToolDefinition> = {
|
||||
split: {
|
||||
id: "split",
|
||||
icon: <ContentCutIcon />,
|
||||
component: React.lazy(() => import("../tools/Split")),
|
||||
maxFiles: 1,
|
||||
category: "manipulation",
|
||||
description: "Split PDF files into smaller parts",
|
||||
endpoints: ["split-pages", "split-pdf-by-sections", "split-by-size-or-count", "split-pdf-by-chapters"]
|
||||
},
|
||||
// compress and merge are disabled for now - legacy tools to be overhauled
|
||||
// compress: {
|
||||
// id: "compress",
|
||||
// icon: <ZoomInMapIcon />,
|
||||
// component: React.lazy(() => import("../tools/Compress")),
|
||||
// maxFiles: 1,
|
||||
// category: "optimization",
|
||||
// description: "Reduce PDF file size",
|
||||
// endpoints: ["compress-pdf"]
|
||||
// },
|
||||
// merge: {
|
||||
// id: "merge",
|
||||
// icon: <AddToPhotosIcon />,
|
||||
// component: React.lazy(() => import("../tools/Merge")),
|
||||
// maxFiles: -1,
|
||||
// category: "manipulation",
|
||||
// description: "Combine multiple PDF files",
|
||||
// endpoints: ["merge-pdfs"]
|
||||
// },
|
||||
};
|
||||
|
||||
|
||||
export const useToolManagement = () => {
|
||||
interface ToolManagementResult {
|
||||
selectedToolKey: string | null;
|
||||
selectedTool: Tool | null;
|
||||
toolSelectedFileIds: string[];
|
||||
toolRegistry: ToolRegistry;
|
||||
selectTool: (toolKey: string) => void;
|
||||
clearToolSelection: () => void;
|
||||
setToolSelectedFileIds: (fileIds: string[]) => void;
|
||||
}
|
||||
|
||||
export const useToolManagement = (): ToolManagementResult => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [selectedToolKey, setSelectedToolKey] = useState<string | null>(null);
|
||||
const [toolSelectedFileIds, setToolSelectedFileIds] = useState<string[]>([]);
|
||||
|
||||
const allEndpoints = Array.from(new Set(Object.values(toolEndpoints).flat()));
|
||||
const allEndpoints = Array.from(new Set(
|
||||
Object.values(toolDefinitions).flatMap(tool => tool.endpoints || [])
|
||||
));
|
||||
const { endpointStatus, loading: endpointsLoading } = useMultipleEndpointsEnabled(allEndpoints);
|
||||
|
||||
const isToolAvailable = useCallback((toolKey: string): boolean => {
|
||||
if (endpointsLoading) return true;
|
||||
const endpoints = toolEndpoints[toolKey] || [];
|
||||
return endpoints.some(endpoint => endpointStatus[endpoint] === true);
|
||||
const tool = toolDefinitions[toolKey];
|
||||
if (!tool?.endpoints) return true;
|
||||
return tool.endpoints.some(endpoint => endpointStatus[endpoint] === true);
|
||||
}, [endpointsLoading, endpointStatus]);
|
||||
|
||||
const toolRegistry: ToolRegistry = useMemo(() => {
|
||||
const availableToolRegistry: ToolRegistry = {};
|
||||
Object.keys(baseToolRegistry).forEach(toolKey => {
|
||||
const availableTools: ToolRegistry = {};
|
||||
Object.keys(toolDefinitions).forEach(toolKey => {
|
||||
if (isToolAvailable(toolKey)) {
|
||||
availableToolRegistry[toolKey] = {
|
||||
...baseToolRegistry[toolKey as keyof typeof baseToolRegistry],
|
||||
const toolDef = toolDefinitions[toolKey];
|
||||
availableTools[toolKey] = {
|
||||
...toolDef,
|
||||
name: t(`home.${toolKey}.title`, toolKey.charAt(0).toUpperCase() + toolKey.slice(1))
|
||||
};
|
||||
}
|
||||
});
|
||||
return availableToolRegistry;
|
||||
return availableTools;
|
||||
}, [t, isToolAvailable]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useState, useCallback} from "react";
|
||||
import React, { useState, useCallback, useEffect} from "react";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useFileContext } from "../contexts/FileContext";
|
||||
import { FileSelectionProvider, useFileSelection } from "../contexts/FileSelectionContext";
|
||||
import { useToolManagement } from "../hooks/useToolManagement";
|
||||
import { Group, Box, Button, Container } from "@mantine/core";
|
||||
import { useRainbowThemeContext } from "../components/shared/RainbowThemeProvider";
|
||||
@ -17,7 +18,8 @@ import ToolRenderer from "../components/tools/ToolRenderer";
|
||||
import QuickAccessBar from "../components/shared/QuickAccessBar";
|
||||
import { useMultipleEndpointsEnabled } from "../hooks/useEndpointConfig";
|
||||
|
||||
export default function HomePage() {
|
||||
// Inner component that uses file selection context
|
||||
function HomePageContent() {
|
||||
const { t } = useTranslation();
|
||||
const { isRainbowMode } = useRainbowThemeContext();
|
||||
|
||||
@ -25,35 +27,60 @@ export default function HomePage() {
|
||||
const fileContext = useFileContext();
|
||||
const { activeFiles, currentView, currentMode, setCurrentView, addFiles } = fileContext;
|
||||
|
||||
// Get file selection context
|
||||
const { setMaxFiles, setIsToolMode, setSelectedFiles } = useFileSelection();
|
||||
|
||||
const {
|
||||
selectedToolKey,
|
||||
selectedTool,
|
||||
toolParams,
|
||||
toolSelectedFileIds,
|
||||
toolRegistry,
|
||||
selectTool,
|
||||
clearToolSelection,
|
||||
updateToolParams,
|
||||
setToolSelectedFileIds,
|
||||
} = useToolManagement();
|
||||
|
||||
const [toolSelectedFiles, setToolSelectedFiles] = useState<File[]>([]);
|
||||
const [sidebarsVisible, setSidebarsVisible] = useState(true);
|
||||
const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
|
||||
const [readerMode, setReaderMode] = useState(false);
|
||||
const [pageEditorFunctions, setPageEditorFunctions] = useState<any>(null);
|
||||
const [pageEditorFunctions, setPageEditorFunctions] = useState<{
|
||||
closePdf: () => void;
|
||||
handleUndo: () => void;
|
||||
handleRedo: () => void;
|
||||
canUndo: boolean;
|
||||
canRedo: boolean;
|
||||
handleRotate: () => void;
|
||||
handleDelete: () => void;
|
||||
handleSplit: () => void;
|
||||
onExportSelected: () => void;
|
||||
onExportAll: () => void;
|
||||
exportLoading: boolean;
|
||||
selectionMode: boolean;
|
||||
selectedPages: number[];
|
||||
} | null>(null);
|
||||
const [previewFile, setPreviewFile] = useState<File | null>(null);
|
||||
|
||||
|
||||
// Update file selection context when tool changes
|
||||
useEffect(() => {
|
||||
if (selectedTool) {
|
||||
setMaxFiles(selectedTool.maxFiles);
|
||||
setIsToolMode(true);
|
||||
} else {
|
||||
setMaxFiles(-1); // Unlimited when not in tool mode
|
||||
setIsToolMode(false);
|
||||
setSelectedFiles([]); // Clear selection when exiting tool mode
|
||||
}
|
||||
}, [selectedTool, setMaxFiles, setIsToolMode, setSelectedFiles]);
|
||||
|
||||
|
||||
|
||||
const handleToolSelect = useCallback(
|
||||
(id: string) => {
|
||||
selectTool(id);
|
||||
if (toolRegistry[id]?.view) setCurrentView(toolRegistry[id].view);
|
||||
setCurrentView('fileEditor'); // Tools use fileEditor view for file selection
|
||||
setLeftPanelView('toolContent');
|
||||
setReaderMode(false);
|
||||
},
|
||||
[selectTool, toolRegistry, setCurrentView]
|
||||
[selectTool, setCurrentView]
|
||||
);
|
||||
|
||||
const handleQuickAccessTools = useCallback(() => {
|
||||
@ -145,7 +172,6 @@ export default function HomePage() {
|
||||
<div className="flex-1 min-h-0">
|
||||
<ToolRenderer
|
||||
selectedToolKey={selectedToolKey}
|
||||
toolSelectedFiles={toolSelectedFiles}
|
||||
onPreviewFile={setPreviewFile}
|
||||
/>
|
||||
</div>
|
||||
@ -194,7 +220,15 @@ export default function HomePage() {
|
||||
maxRecentFiles={8}
|
||||
/>
|
||||
</Container>
|
||||
) : currentView === "fileEditor" && selectedToolKey ? (
|
||||
// Tool-specific FileEditor - for file selection with tools
|
||||
<FileEditor
|
||||
toolMode={true}
|
||||
showUpload={true}
|
||||
showBulkActions={false}
|
||||
/>
|
||||
) : currentView === "fileEditor" ? (
|
||||
// Generic FileEditor - for general file management
|
||||
<FileEditor
|
||||
onOpenPageEditor={(file) => {
|
||||
handleViewChange("pageEditor");
|
||||
@ -248,17 +282,8 @@ export default function HomePage() {
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : currentView === "split" ? (
|
||||
<FileEditor
|
||||
toolMode={true}
|
||||
multiSelect={false}
|
||||
showUpload={true}
|
||||
showBulkActions={true}
|
||||
onFileSelect={(files) => {
|
||||
setToolSelectedFiles(files);
|
||||
}}
|
||||
/>
|
||||
) : selectedToolKey && selectedTool ? (
|
||||
// Fallback: if tool is selected but not in fileEditor view, show tool in main area
|
||||
<ToolRenderer
|
||||
selectedToolKey={selectedToolKey}
|
||||
/>
|
||||
@ -285,3 +310,12 @@ export default function HomePage() {
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
// Main HomePage component wrapped with FileSelectionProvider
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<FileSelectionProvider>
|
||||
<HomePageContent />
|
||||
</FileSelectionProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,26 +4,23 @@ import { useTranslation } from "react-i18next";
|
||||
import DownloadIcon from "@mui/icons-material/Download";
|
||||
import { useEndpointEnabled } from "../hooks/useEndpointConfig";
|
||||
import { useFileContext } from "../contexts/FileContext";
|
||||
import { useToolFileSelection } from "../contexts/FileSelectionContext";
|
||||
|
||||
import ToolStep, { ToolStepContainer } from "../components/tools/shared/ToolStep";
|
||||
import OperationButton from "../components/tools/shared/OperationButton";
|
||||
import ErrorNotification from "../components/tools/shared/ErrorNotification";
|
||||
import FileStatusIndicator from "../components/tools/shared/FileStatusIndicator";
|
||||
import ResultsPreview from "../components/tools/shared/ResultsPreview";
|
||||
|
||||
import SplitSettings from "../components/tools/split/SplitSettings";
|
||||
|
||||
import { useSplitParameters } from "../hooks/tools/split/useSplitParameters";
|
||||
import { useSplitOperation } from "../hooks/tools/split/useSplitOperation";
|
||||
import { BaseToolProps } from "../types/tool";
|
||||
|
||||
interface SplitProps {
|
||||
selectedFiles?: File[];
|
||||
onPreviewFile?: (file: File | null) => void;
|
||||
}
|
||||
|
||||
const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
|
||||
const Split = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
|
||||
const { t } = useTranslation();
|
||||
const { setCurrentMode } = useFileContext();
|
||||
const { selectedFiles } = useToolFileSelection();
|
||||
|
||||
const splitParams = useSplitParameters();
|
||||
const splitOperation = useSplitOperation();
|
||||
@ -39,11 +36,20 @@ const Split = ({ selectedFiles = [], onPreviewFile }: SplitProps) => {
|
||||
}, [splitParams.mode, splitParams.parameters, selectedFiles]);
|
||||
|
||||
const handleSplit = async () => {
|
||||
await splitOperation.executeOperation(
|
||||
splitParams.mode,
|
||||
splitParams.parameters,
|
||||
selectedFiles
|
||||
);
|
||||
try {
|
||||
await splitOperation.executeOperation(
|
||||
splitParams.mode,
|
||||
splitParams.parameters,
|
||||
selectedFiles
|
||||
);
|
||||
if (splitOperation.files && onComplete) {
|
||||
onComplete(splitOperation.files);
|
||||
}
|
||||
} catch (error) {
|
||||
if (onError) {
|
||||
onError(error instanceof Error ? error.message : 'Split operation failed');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleThumbnailClick = (file: File) => {
|
||||
|
||||
100
frontend/src/types/tool.ts
Normal file
100
frontend/src/types/tool.ts
Normal file
@ -0,0 +1,100 @@
|
||||
import React from 'react';
|
||||
|
||||
// Type definitions for better type safety
|
||||
export type MaxFiles = number; // 1 = single file, >1 = limited multi-file, -1 = unlimited
|
||||
export type ToolCategory = 'manipulation' | 'conversion' | 'analysis' | 'utility' | 'optimization' | 'security';
|
||||
|
||||
/**
|
||||
* Tool definition without name - used for base definitions before translation
|
||||
*/
|
||||
export type ToolDefinition = Omit<Tool, 'name'>;
|
||||
|
||||
/**
|
||||
* Standard interface that all modern tools should implement
|
||||
* This ensures consistent behavior and makes adding new tools trivial
|
||||
*/
|
||||
export interface BaseToolProps {
|
||||
// Tool results callback - called when tool completes successfully
|
||||
onComplete?: (results: File[]) => void;
|
||||
|
||||
// Error handling callback
|
||||
onError?: (error: string) => void;
|
||||
|
||||
// Preview functionality for result files
|
||||
onPreviewFile?: (file: File | null) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tool step types for standardized UI
|
||||
*/
|
||||
export type ToolStepType = 'files' | 'settings' | 'results';
|
||||
|
||||
/**
|
||||
* Tool step configuration
|
||||
*/
|
||||
export interface ToolStepConfig {
|
||||
type: ToolStepType;
|
||||
title: string;
|
||||
isVisible: boolean;
|
||||
isCompleted: boolean;
|
||||
isCollapsed?: boolean;
|
||||
completedMessage?: string;
|
||||
onCollapsedClick?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tool operation result
|
||||
*/
|
||||
export interface ToolResult {
|
||||
success: boolean;
|
||||
files?: File[];
|
||||
error?: string;
|
||||
downloadUrl?: string;
|
||||
metadata?: Record<string, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Complete tool definition - single interface for all tool needs
|
||||
*/
|
||||
export interface Tool {
|
||||
id: string;
|
||||
name: string; // Always required - added via translation
|
||||
icon: React.ReactNode; // Always required - for UI display
|
||||
component: React.ComponentType<BaseToolProps>; // Lazy-loaded tool component
|
||||
maxFiles: MaxFiles; // File selection limit: 1=single, 5=limited, -1=unlimited
|
||||
category?: ToolCategory; // Tool grouping for organization
|
||||
description?: string; // Help text for users
|
||||
endpoints?: string[]; // Backend endpoints this tool uses
|
||||
supportedFormats?: string[]; // File types this tool accepts
|
||||
validation?: (files: File[]) => { valid: boolean; message?: string }; // File validation logic
|
||||
}
|
||||
|
||||
/**
|
||||
* Tool registry type - tools indexed by key
|
||||
*/
|
||||
export type ToolRegistry = Record<string, Tool>;
|
||||
|
||||
/**
|
||||
* File selection context interfaces for type safety
|
||||
*/
|
||||
export interface FileSelectionState {
|
||||
selectedFiles: File[];
|
||||
maxFiles: MaxFiles;
|
||||
isToolMode: boolean;
|
||||
}
|
||||
|
||||
export interface FileSelectionActions {
|
||||
setSelectedFiles: (files: File[]) => void;
|
||||
setMaxFiles: (maxFiles: MaxFiles) => void;
|
||||
setIsToolMode: (isToolMode: boolean) => void;
|
||||
clearSelection: () => void;
|
||||
}
|
||||
|
||||
export interface FileSelectionComputed {
|
||||
canSelectMore: boolean;
|
||||
isAtLimit: boolean;
|
||||
selectionCount: number;
|
||||
isMultiFileMode: boolean;
|
||||
}
|
||||
|
||||
export interface FileSelectionContextValue extends FileSelectionState, FileSelectionActions, FileSelectionComputed {}
|
||||
Loading…
Reference in New Issue
Block a user