Compare commits

...

9 Commits

Author SHA1 Message Date
Reece Browne
3755bfde34 Set zoom to 140% 2025-09-15 18:20:11 +01:00
Reece Browne
2834eec3be Merge branch 'feature/v2/embed-pdf' of https://github.com/Stirling-Tools/Stirling-PDF into feature/v2/embed-pdf 2025-09-15 17:31:06 +01:00
Reece Browne
d89e1b5b1e
Merge branch 'V2' into feature/v2/embed-pdf 2025-09-15 17:27:51 +01:00
Reece Browne
19d7111cab Remove unused code 2025-09-15 17:27:22 +01:00
ConnorYoh
a57373b968
V2 Flatten split options to remove layers of drop downs (#4439)
Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
2025-09-15 16:11:29 +00:00
Reece Browne
ca9d7ef465 Remove unused code 2025-09-15 17:03:52 +01:00
Reece Browne
fad4f84c9c translations 2025-09-15 16:53:41 +01:00
Reece Browne
35863ac610 remove select mode 2025-09-15 16:53:32 +01:00
Reece Browne
c17dd25069 Rotate 2025-09-15 16:05:19 +01:00
19 changed files with 412 additions and 153 deletions

View File

@ -16,6 +16,7 @@
"@embedpdf/plugin-loader": "^1.1.1", "@embedpdf/plugin-loader": "^1.1.1",
"@embedpdf/plugin-pan": "^1.1.1", "@embedpdf/plugin-pan": "^1.1.1",
"@embedpdf/plugin-render": "^1.1.1", "@embedpdf/plugin-render": "^1.1.1",
"@embedpdf/plugin-rotate": "^1.1.1",
"@embedpdf/plugin-scroll": "^1.1.1", "@embedpdf/plugin-scroll": "^1.1.1",
"@embedpdf/plugin-search": "^1.1.1", "@embedpdf/plugin-search": "^1.1.1",
"@embedpdf/plugin-selection": "^1.1.1", "@embedpdf/plugin-selection": "^1.1.1",
@ -715,6 +716,21 @@
"vue": ">=3.2.0" "vue": ">=3.2.0"
} }
}, },
"node_modules/@embedpdf/plugin-rotate": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-rotate/-/plugin-rotate-1.1.1.tgz",
"integrity": "sha512-xxM62dv4TAoTEfCNxyC0UbGryT3ucAH4txQAoab7tfvnfqbAIxTonH1PzQMsBmzN0WETCGjUBm1Ympb95cDx2Q==",
"dependencies": {
"@embedpdf/models": "1.1.1"
},
"peerDependencies": {
"@embedpdf/core": "1.1.1",
"preact": "^10.26.4",
"react": ">=16.8.0",
"react-dom": ">=16.8.0",
"vue": ">=3.2.0"
}
},
"node_modules/@embedpdf/plugin-scroll": { "node_modules/@embedpdf/plugin-scroll": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.1.1.tgz", "resolved": "https://registry.npmjs.org/@embedpdf/plugin-scroll/-/plugin-scroll-1.1.1.tgz",

View File

@ -12,6 +12,7 @@
"@embedpdf/plugin-loader": "^1.1.1", "@embedpdf/plugin-loader": "^1.1.1",
"@embedpdf/plugin-pan": "^1.1.1", "@embedpdf/plugin-pan": "^1.1.1",
"@embedpdf/plugin-render": "^1.1.1", "@embedpdf/plugin-render": "^1.1.1",
"@embedpdf/plugin-rotate": "^1.1.1",
"@embedpdf/plugin-scroll": "^1.1.1", "@embedpdf/plugin-scroll": "^1.1.1",
"@embedpdf/plugin-search": "^1.1.1", "@embedpdf/plugin-search": "^1.1.1",
"@embedpdf/plugin-selection": "^1.1.1", "@embedpdf/plugin-selection": "^1.1.1",

View File

@ -683,7 +683,76 @@
"8": "Document #6: Page 10" "8": "Document #6: Page 10"
}, },
"splitPages": "Enter pages to split on:", "splitPages": "Enter pages to split on:",
"submit": "Split" "submit": "Split",
"error": {
"failed": "An error occurred while splitting the PDF."
},
"method": {
"label": "Choose split method",
"placeholder": "Select how to split the PDF"
},
"methods": {
"byPages": "Split at Page Numbers",
"bySections": "Split by Sections",
"bySize": "Split by File Size",
"byPageCount": "Split by Page Count",
"byDocCount": "Split by Document Count",
"byChapters": "Split by Chapters"
},
"value": {
"fileSize": {
"label": "File Size",
"placeholder": "e.g. 10MB, 500KB"
},
"pageCount": {
"label": "Pages per File",
"placeholder": "e.g. 5, 10"
},
"docCount": {
"label": "Number of Files",
"placeholder": "e.g. 3, 5"
}
},
"tooltip": {
"header": {
"title": "Split Methods Overview"
},
"byPages": {
"title": "Split at Page Numbers",
"text": "Split your PDF at specific page numbers. Using 'n' splits after page n. Using 'n-m' splits before page n and after page m.",
"bullet1": "Single split points: 3,7 (splits after pages 3 and 7)",
"bullet2": "Range split points: 3-8 (splits before page 3 and after page 8)",
"bullet3": "Mixed: 2,5-10,15 (splits after page 2, before page 5, after page 10, and after page 15)"
},
"bySections": {
"title": "Split by Grid Sections",
"text": "Divide each page into a grid of sections. Useful for splitting documents with multiple columns or extracting specific areas.",
"bullet1": "Horizontal: Number of rows to create",
"bullet2": "Vertical: Number of columns to create",
"bullet3": "Merge: Combine all sections into one PDF"
},
"bySize": {
"title": "Split by File Size",
"text": "Create multiple PDFs that don't exceed a specified file size. Ideal for file size limitations or email attachments.",
"bullet1": "Use MB for larger files (e.g., 10MB)",
"bullet2": "Use KB for smaller files (e.g., 500KB)",
"bullet3": "System will split at page boundaries"
},
"byCount": {
"title": "Split by Count",
"text": "Create multiple PDFs with a specific number of pages or documents each.",
"bullet1": "Page Count: Fixed number of pages per file",
"bullet2": "Document Count: Fixed number of output files",
"bullet3": "Useful for batch processing workflows"
},
"byChapters": {
"title": "Split by Chapters",
"text": "Use PDF bookmarks to automatically split at chapter boundaries. Requires PDFs with bookmark structure.",
"bullet1": "Bookmark Level: Which level to split on (1=top level)",
"bullet2": "Include Metadata: Preserve document properties",
"bullet3": "Allow Duplicates: Handle repeated bookmark names"
}
}
}, },
"rotate": { "rotate": {
"tags": "server side", "tags": "server side",
@ -2576,5 +2645,15 @@
"processImages": "Process Images", "processImages": "Process Images",
"processImagesDesc": "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images." "processImagesDesc": "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."
} }
},
"viewer": {
"firstPage": "First Page",
"lastPage": "Last Page",
"previousPage": "Previous Page",
"nextPage": "Next Page",
"zoomIn": "Zoom In",
"zoomOut": "Zoom Out",
"singlePageView": "Single Page View",
"dualPageView": "Dual Page View"
} }
} }

View File

@ -7,6 +7,7 @@ import { useRightRail } from '../../contexts/RightRailContext';
import { useFileState, useFileSelection, useFileManagement } from '../../contexts/FileContext'; import { useFileState, useFileSelection, useFileManagement } from '../../contexts/FileContext';
import { useNavigationState } from '../../contexts/NavigationContext'; import { useNavigationState } from '../../contexts/NavigationContext';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import '../../types/embedPdf';
import LanguageSelector from '../shared/LanguageSelector'; import LanguageSelector from '../shared/LanguageSelector';
import { useRainbowThemeContext } from '../shared/RainbowThemeProvider'; import { useRainbowThemeContext } from '../shared/RainbowThemeProvider';
@ -17,6 +18,7 @@ import { SearchInterface } from '../viewer/SearchInterface';
export default function RightRail() { export default function RightRail() {
const { t } = useTranslation(); const { t } = useTranslation();
const [isPanning, setIsPanning] = useState(false); const [isPanning, setIsPanning] = useState(false);
const [currentRotation, setCurrentRotation] = useState(0);
const { toggleTheme } = useRainbowThemeContext(); const { toggleTheme } = useRainbowThemeContext();
const { buttons, actions } = useRightRail(); const { buttons, actions } = useRightRail();
const topButtons = useMemo(() => buttons.filter(b => (b.section || 'top') === 'top' && (b.visible ?? true)), [buttons]); const topButtons = useMemo(() => buttons.filter(b => (b.section || 'top') === 'top' && (b.visible ?? true)), [buttons]);
@ -30,6 +32,24 @@ export default function RightRail() {
// Navigation view // Navigation view
const { workbench: currentView } = useNavigationState(); const { workbench: currentView } = useNavigationState();
// Sync rotation state with EmbedPDF API
useEffect(() => {
if (currentView === 'viewer' && window.embedPdfRotate) {
const updateRotation = () => {
const rotation = window.embedPdfRotate?.getRotation() || 0;
setCurrentRotation(rotation * 90); // Convert enum to degrees
};
// Update rotation immediately
updateRotation();
// Set up periodic updates to keep state in sync
const interval = setInterval(updateRotation, 1000);
return () => clearInterval(interval);
}
}, [currentView]);
// File state and selection // File state and selection
const { state, selectors } = useFileState(); const { state, selectors } = useFileState();
const { selectedFiles, selectedFileIds, setSelectedFiles } = useFileSelection(); const { selectedFiles, selectedFileIds, setSelectedFiles } = useFileSelection();
@ -249,7 +269,7 @@ export default function RightRail() {
radius="md" radius="md"
className="right-rail-icon" className="right-rail-icon"
onClick={() => { onClick={() => {
(window as any).embedPdfPan?.togglePan(); window.embedPdfPan?.togglePan();
setIsPanning(!isPanning); setIsPanning(!isPanning);
}} }}
disabled={currentView !== 'viewer'} disabled={currentView !== 'viewer'}
@ -258,16 +278,33 @@ export default function RightRail() {
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
{/* Select Mode */} {/* Rotate Left */}
<Tooltip content={t('rightRail.selectMode', 'Select Mode')} position="left" offset={12} arrow> <Tooltip content={t('rightRail.rotateLeft', 'Rotate Left')} position="left" offset={12} arrow>
<ActionIcon <ActionIcon
variant="subtle" variant="subtle"
radius="md" radius="md"
className="right-rail-icon" className="right-rail-icon"
onClick={() => (window as any).embedPdfControls?.pointer()} onClick={() => {
window.embedPdfRotate?.rotateBackward();
}}
disabled={currentView !== 'viewer'} disabled={currentView !== 'viewer'}
> >
<LocalIcon icon="mouse-pointer" width="1.5rem" height="1.5rem" /> <LocalIcon icon="rotate-left" width="1.5rem" height="1.5rem" />
</ActionIcon>
</Tooltip>
{/* Rotate Right */}
<Tooltip content={t('rightRail.rotateRight', 'Rotate Right')} position="left" offset={12} arrow>
<ActionIcon
variant="subtle"
radius="md"
className="right-rail-icon"
onClick={() => {
window.embedPdfRotate?.rotateForward();
}}
disabled={currentView !== 'viewer'}
>
<LocalIcon icon="rotate-right" width="1.5rem" height="1.5rem" />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
@ -277,7 +314,7 @@ export default function RightRail() {
variant="subtle" variant="subtle"
radius="md" radius="md"
className="right-rail-icon" className="right-rail-icon"
onClick={() => (window as any).toggleThumbnailSidebar?.()} onClick={() => window.toggleThumbnailSidebar?.()}
disabled={currentView !== 'viewer'} disabled={currentView !== 'viewer'}
> >
<LocalIcon icon="view-list" width="1.5rem" height="1.5rem" /> <LocalIcon icon="view-list" width="1.5rem" height="1.5rem" />

View File

@ -1,6 +1,6 @@
import { Stack, TextInput, Select, Checkbox } from '@mantine/core'; import { Stack, TextInput, Select, Checkbox } from '@mantine/core';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { isSplitMode, isSplitType, SPLIT_MODES, SPLIT_TYPES } from '../../../constants/splitConstants'; import { isSplitMethod, SPLIT_METHODS } from '../../../constants/splitConstants';
import { SplitParameters } from '../../../hooks/tools/split/useSplitParameters'; import { SplitParameters } from '../../../hooks/tools/split/useSplitParameters';
export interface SplitSettingsProps { export interface SplitSettingsProps {
@ -57,28 +57,37 @@ const SplitSettings = ({
</Stack> </Stack>
); );
const renderBySizeOrCountForm = () => ( const renderSplitValueForm = () => {
<Stack gap="sm"> let label, placeholder;
<Select
label={t("split-by-size-or-count.type.label", "Split Type")} switch (parameters.method) {
value={parameters.splitType} case SPLIT_METHODS.BY_SIZE:
onChange={(v) => isSplitType(v) && onParameterChange('splitType', v)} label = t("split.value.fileSize.label", "File Size");
disabled={disabled} placeholder = t("split.value.fileSize.placeholder", "e.g. 10MB, 500KB");
data={[ break;
{ value: SPLIT_TYPES.SIZE, label: t("split-by-size-or-count.type.size", "By Size") }, case SPLIT_METHODS.BY_PAGE_COUNT:
{ value: SPLIT_TYPES.PAGES, label: t("split-by-size-or-count.type.pageCount", "By Page Count") }, label = t("split.value.pageCount.label", "Pages per File");
{ value: SPLIT_TYPES.DOCS, label: t("split-by-size-or-count.type.docCount", "By Document Count") }, placeholder = t("split.value.pageCount.placeholder", "e.g. 5, 10");
]} break;
/> case SPLIT_METHODS.BY_DOC_COUNT:
label = t("split.value.docCount.label", "Number of Files");
placeholder = t("split.value.docCount.placeholder", "e.g. 3, 5");
break;
default:
label = t("split-by-size-or-count.value.label", "Split Value");
placeholder = t("split-by-size-or-count.value.placeholder", "e.g. 10MB or 5 pages");
}
return (
<TextInput <TextInput
label={t("split-by-size-or-count.value.label", "Split Value")} label={label}
placeholder={t("split-by-size-or-count.value.placeholder", "e.g. 10MB or 5 pages")} placeholder={placeholder}
value={parameters.splitValue} value={parameters.splitValue}
onChange={(e) => onParameterChange('splitValue', e.target.value)} onChange={(e) => onParameterChange('splitValue', e.target.value)}
disabled={disabled} disabled={disabled}
/> />
</Stack> );
); };
const renderByChaptersForm = () => ( const renderByChaptersForm = () => (
<Stack gap="sm"> <Stack gap="sm">
@ -106,26 +115,30 @@ const SplitSettings = ({
return ( return (
<Stack gap="md"> <Stack gap="md">
{/* Mode Selector */} {/* Method Selector */}
<Select <Select
label="Choose split method" label={t("split.method.label", "Choose split method")}
placeholder="Select how to split the PDF" placeholder={t("split.method.placeholder", "Select how to split the PDF")}
value={parameters.mode} value={parameters.method}
onChange={(v) => isSplitMode(v) && onParameterChange('mode', v)} onChange={(v) => isSplitMethod(v) && onParameterChange('method', v)}
disabled={disabled} disabled={disabled}
data={[ data={[
{ value: SPLIT_MODES.BY_PAGES, label: t("split.header", "Split by Pages") + " (e.g. 1,3,5-10)" }, { value: SPLIT_METHODS.BY_PAGES, label: t("split.methods.byPages", "Split at Pages Numbers") },
{ value: SPLIT_MODES.BY_SECTIONS, label: t("split-by-sections.title", "Split by Grid Sections") }, { value: SPLIT_METHODS.BY_SECTIONS, label: t("split.methods.bySections", "Split by Sections") },
{ value: SPLIT_MODES.BY_SIZE_OR_COUNT, label: t("split-by-size-or-count.title", "Split by Size or Count") }, { value: SPLIT_METHODS.BY_SIZE, label: t("split.methods.bySize", "Split by Size") },
{ value: SPLIT_MODES.BY_CHAPTERS, label: t("splitByChapters.title", "Split by Chapters") }, { value: SPLIT_METHODS.BY_PAGE_COUNT, label: t("split.methods.byPageCount", "Split by Page Count") },
{ value: SPLIT_METHODS.BY_DOC_COUNT, label: t("split.methods.byDocCount", "Split by Document Count") },
{ value: SPLIT_METHODS.BY_CHAPTERS, label: t("split.methods.byChapters", "Split by Chapters") },
]} ]}
/> />
{/* Parameter Form */} {/* Parameter Form */}
{parameters.mode === SPLIT_MODES.BY_PAGES && renderByPagesForm()} {parameters.method === SPLIT_METHODS.BY_PAGES && renderByPagesForm()}
{parameters.mode === SPLIT_MODES.BY_SECTIONS && renderBySectionsForm()} {parameters.method === SPLIT_METHODS.BY_SECTIONS && renderBySectionsForm()}
{parameters.mode === SPLIT_MODES.BY_SIZE_OR_COUNT && renderBySizeOrCountForm()} {(parameters.method === SPLIT_METHODS.BY_SIZE ||
{parameters.mode === SPLIT_MODES.BY_CHAPTERS && renderByChaptersForm()} parameters.method === SPLIT_METHODS.BY_PAGE_COUNT ||
parameters.method === SPLIT_METHODS.BY_DOC_COUNT) && renderSplitValueForm()}
{parameters.method === SPLIT_METHODS.BY_CHAPTERS && renderByChaptersForm()}
</Stack> </Stack>
); );
} }

View File

@ -0,0 +1,59 @@
import { useTranslation } from 'react-i18next';
import { TooltipContent } from '../../types/tips';
export const useSplitTips = (): TooltipContent => {
const { t } = useTranslation();
return {
header: {
title: t("split.tooltip.header.title", "Split Methods Overview")
},
tips: [
{
title: t("split.tooltip.byPages.title", "Split at Page Numbers"),
description: t("split.tooltip.byPages.text", "Extract specific pages or ranges from your PDF. Use commas to separate individual pages and hyphens for ranges."),
bullets: [
t("split.tooltip.byPages.bullet1", "Single pages: 1,3,5"),
t("split.tooltip.byPages.bullet2", "Page ranges: 1-5,10-15"),
t("split.tooltip.byPages.bullet3", "Mixed: 1,3-7,12,15-20")
]
},
{
title: t("split.tooltip.bySections.title", "Split by Grid Sections"),
description: t("split.tooltip.bySections.text", "Divide each page into a grid of sections. Useful for splitting documents with multiple columns or extracting specific areas."),
bullets: [
t("split.tooltip.bySections.bullet1", "Horizontal: Number of rows to create"),
t("split.tooltip.bySections.bullet2", "Vertical: Number of columns to create"),
t("split.tooltip.bySections.bullet3", "Merge: Combine all sections into one PDF")
]
},
{
title: t("split.tooltip.bySize.title", "Split by File Size"),
description: t("split.tooltip.bySize.text", "Create multiple PDFs that don't exceed a specified file size. Ideal for file size limitations or email attachments."),
bullets: [
t("split.tooltip.bySize.bullet1", "Use MB for larger files (e.g., 10MB)"),
t("split.tooltip.bySize.bullet2", "Use KB for smaller files (e.g., 500KB)"),
t("split.tooltip.bySize.bullet3", "System will split at page boundaries")
]
},
{
title: t("split.tooltip.byCount.title", "Split by Count"),
description: t("split.tooltip.byCount.text", "Create multiple PDFs with a specific number of pages or documents each."),
bullets: [
t("split.tooltip.byCount.bullet1", "Page Count: Fixed number of pages per file"),
t("split.tooltip.byCount.bullet2", "Document Count: Fixed number of output files"),
t("split.tooltip.byCount.bullet3", "Useful for batch processing workflows")
]
},
{
title: t("split.tooltip.byChapters.title", "Split by Chapters"),
description: t("split.tooltip.byChapters.text", "Use PDF bookmarks to automatically split at chapter boundaries. Requires PDFs with bookmark structure."),
bullets: [
t("split.tooltip.byChapters.bullet1", "Bookmark Level: Which level to split on (1=top level)"),
t("split.tooltip.byChapters.bullet2", "Include Metadata: Preserve document properties"),
t("split.tooltip.byChapters.bullet3", "Allow Duplicates: Handle repeated bookmark names")
]
}
]
};
};

View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { Box, Center, Text, ActionIcon, Tabs } from '@mantine/core'; import { Box, Center, Text, ActionIcon } from '@mantine/core';
import { useMantineTheme, useMantineColorScheme } from '@mantine/core'; import { useMantineTheme, useMantineColorScheme } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import CloseIcon from '@mui/icons-material/Close'; import CloseIcon from '@mui/icons-material/Close';
import { useFileState } from "../../contexts/FileContext"; import { useFileState } from "../../contexts/FileContext";
@ -20,12 +19,11 @@ export interface EmbedPdfViewerProps {
} }
const EmbedPdfViewerContent = ({ const EmbedPdfViewerContent = ({
sidebarsVisible, sidebarsVisible: _sidebarsVisible,
setSidebarsVisible, setSidebarsVisible: _setSidebarsVisible,
onClose, onClose,
previewFile, previewFile,
}: EmbedPdfViewerProps) => { }: EmbedPdfViewerProps) => {
const { t } = useTranslation();
const theme = useMantineTheme(); const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme(); const { colorScheme } = useMantineColorScheme();
const viewerRef = React.useRef<HTMLDivElement>(null); const viewerRef = React.useRef<HTMLDivElement>(null);

View File

@ -8,7 +8,7 @@ import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/react
import { Scroller, ScrollPluginPackage, ScrollStrategy } from '@embedpdf/plugin-scroll/react'; import { Scroller, ScrollPluginPackage, ScrollStrategy } from '@embedpdf/plugin-scroll/react';
import { LoaderPluginPackage } from '@embedpdf/plugin-loader/react'; import { LoaderPluginPackage } from '@embedpdf/plugin-loader/react';
import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/react'; import { RenderLayer, RenderPluginPackage } from '@embedpdf/plugin-render/react';
import { ZoomPluginPackage, ZoomMode } from '@embedpdf/plugin-zoom/react'; import { ZoomPluginPackage } from '@embedpdf/plugin-zoom/react';
import { InteractionManagerPluginPackage, PagePointerProvider, GlobalPointerProvider } from '@embedpdf/plugin-interaction-manager/react'; import { InteractionManagerPluginPackage, PagePointerProvider, GlobalPointerProvider } from '@embedpdf/plugin-interaction-manager/react';
import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react'; import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react';
import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react'; import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react';
@ -16,6 +16,8 @@ import { PanPluginPackage } from '@embedpdf/plugin-pan/react';
import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react'; import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react';
import { SearchPluginPackage } from '@embedpdf/plugin-search/react'; import { SearchPluginPackage } from '@embedpdf/plugin-search/react';
import { ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/react'; import { ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/react';
import { RotatePluginPackage, Rotate } from '@embedpdf/plugin-rotate/react';
import { Rotation } from '@embedpdf/models';
import { CustomSearchLayer } from './CustomSearchLayer'; import { CustomSearchLayer } from './CustomSearchLayer';
import { ZoomAPIBridge } from './ZoomAPIBridge'; import { ZoomAPIBridge } from './ZoomAPIBridge';
import { ScrollAPIBridge } from './ScrollAPIBridge'; import { ScrollAPIBridge } from './ScrollAPIBridge';
@ -24,6 +26,7 @@ import { PanAPIBridge } from './PanAPIBridge';
import { SpreadAPIBridge } from './SpreadAPIBridge'; import { SpreadAPIBridge } from './SpreadAPIBridge';
import { SearchAPIBridge } from './SearchAPIBridge'; import { SearchAPIBridge } from './SearchAPIBridge';
import { ThumbnailAPIBridge } from './ThumbnailAPIBridge'; import { ThumbnailAPIBridge } from './ThumbnailAPIBridge';
import { RotateAPIBridge } from './RotateAPIBridge';
interface LocalEmbedPDFProps { interface LocalEmbedPDFProps {
file?: File | Blob; file?: File | Blob;
@ -84,7 +87,7 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
// Register zoom plugin with configuration // Register zoom plugin with configuration
createPluginRegistration(ZoomPluginPackage, { createPluginRegistration(ZoomPluginPackage, {
defaultZoomLevel: 1.0, // Start at exactly 100% zoom defaultZoomLevel: 1.4, // Start at 140% zoom for better readability
minZoom: 0.2, minZoom: 0.2,
maxZoom: 3.0, maxZoom: 3.0,
}), }),
@ -106,6 +109,11 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
// Register thumbnail plugin for page thumbnails // Register thumbnail plugin for page thumbnails
createPluginRegistration(ThumbnailPluginPackage), createPluginRegistration(ThumbnailPluginPackage),
// Register rotate plugin
createPluginRegistration(RotatePluginPackage, {
defaultRotation: Rotation.Degree0, // Start with no rotation
}),
]; ];
}, [pdfUrl]); }, [pdfUrl]);
@ -187,6 +195,7 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
<SpreadAPIBridge /> <SpreadAPIBridge />
<SearchAPIBridge /> <SearchAPIBridge />
<ThumbnailAPIBridge /> <ThumbnailAPIBridge />
<RotateAPIBridge />
<GlobalPointerProvider> <GlobalPointerProvider>
<Viewport <Viewport
style={{ style={{
@ -205,35 +214,37 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
> >
<Scroller <Scroller
renderPage={({ width, height, pageIndex, scale, rotation }: { width: number; height: number; pageIndex: number; scale: number; rotation?: number }) => ( renderPage={({ width, height, pageIndex, scale, rotation }: { width: number; height: number; pageIndex: number; scale: number; rotation?: number }) => (
<PagePointerProvider {...{ pageWidth: width, pageHeight: height, pageIndex, scale, rotation: rotation || 0 }}> <Rotate pageSize={{ width, height }}>
<div <PagePointerProvider {...{ pageWidth: width, pageHeight: height, pageIndex, scale, rotation: rotation || 0 }}>
style={{ <div
width, style={{
height, width,
position: 'relative', height,
userSelect: 'none', position: 'relative',
WebkitUserSelect: 'none', userSelect: 'none',
MozUserSelect: 'none', WebkitUserSelect: 'none',
msUserSelect: 'none' MozUserSelect: 'none',
}} msUserSelect: 'none'
draggable={false} }}
onDragStart={(e) => e.preventDefault()} draggable={false}
onDrop={(e) => e.preventDefault()} onDragStart={(e) => e.preventDefault()}
onDragOver={(e) => e.preventDefault()} onDrop={(e) => e.preventDefault()}
> onDragOver={(e) => e.preventDefault()}
{/* 1. Low-resolution base layer for immediate feedback */} >
<RenderLayer pageIndex={pageIndex} scale={0.5} /> {/* 1. Low-resolution base layer for immediate feedback */}
<RenderLayer pageIndex={pageIndex} scale={0.5} />
{/* 2. High-resolution tile layer on top */} {/* 2. High-resolution tile layer on top */}
<TilingLayer pageIndex={pageIndex} scale={scale} /> <TilingLayer pageIndex={pageIndex} scale={scale} />
{/* 3. Search highlight layer */} {/* 3. Search highlight layer */}
<CustomSearchLayer pageIndex={pageIndex} scale={scale} /> <CustomSearchLayer pageIndex={pageIndex} scale={scale} />
{/* 4. Selection layer for text interaction */} {/* 4. Selection layer for text interaction */}
<SelectionLayer pageIndex={pageIndex} scale={scale} /> <SelectionLayer pageIndex={pageIndex} scale={scale} />
</div> </div>
</PagePointerProvider> </PagePointerProvider>
</Rotate>
)} )}
/> />
</Viewport> </Viewport>

View File

@ -35,8 +35,6 @@ export function PanAPIBridge() {
}, },
}; };
} else {
console.warn('EmbedPDF pan API not available yet');
} }
}, [pan, isPanning]); }, [pan, isPanning]);

View File

@ -36,7 +36,6 @@ export function PdfViewerToolbar({
const [dynamicZoom, setDynamicZoom] = useState(currentZoom); const [dynamicZoom, setDynamicZoom] = useState(currentZoom);
const [dynamicPage, setDynamicPage] = useState(currentPage); const [dynamicPage, setDynamicPage] = useState(currentPage);
const [dynamicTotalPages, setDynamicTotalPages] = useState(totalPages); const [dynamicTotalPages, setDynamicTotalPages] = useState(totalPages);
const [isPanning, setIsPanning] = useState(false);
// Update zoom and scroll state from EmbedPDF APIs // Update zoom and scroll state from EmbedPDF APIs
useEffect(() => { useEffect(() => {
@ -56,11 +55,6 @@ export function PdfViewerToolbar({
setPageInput(currentPageNum); setPageInput(currentPageNum);
} }
// Update pan mode state
if (window.embedPdfPan) {
const panState = window.embedPdfPan.isPanning || false;
setIsPanning(panState);
}
}; };
// Update state immediately // Update state immediately

View File

@ -0,0 +1,23 @@
import { useEffect } from 'react';
import { useRotate } from '@embedpdf/plugin-rotate/react';
/**
* Component that runs inside EmbedPDF context and exports rotate controls globally
*/
export function RotateAPIBridge() {
const { provides: rotate, rotation } = useRotate();
useEffect(() => {
if (rotate) {
// Export rotate controls to global window for right rail access
window.embedPdfRotate = {
rotateForward: () => rotate.rotateForward(),
rotateBackward: () => rotate.rotateBackward(),
setRotation: (rotationValue: number) => rotate.setRotation(rotationValue),
getRotation: () => rotation,
};
}
}, [rotate, rotation]);
return null;
}

View File

@ -33,8 +33,6 @@ export function SpreadAPIBridge() {
spreadAPI: spread, spreadAPI: spread,
availableMethods: Object.keys(spread) availableMethods: Object.keys(spread)
}); });
} else {
console.warn('EmbedPDF spread API not available yet');
} }
}, [spread, spreadMode]); }, [spread, spreadMode]);

View File

@ -1,4 +1,4 @@
import { useEffect } from 'react'; import { useEffect, useRef } from 'react';
import { useZoom } from '@embedpdf/plugin-zoom/react'; import { useZoom } from '@embedpdf/plugin-zoom/react';
/** /**
@ -6,17 +6,30 @@ import { useZoom } from '@embedpdf/plugin-zoom/react';
*/ */
export function ZoomAPIBridge() { export function ZoomAPIBridge() {
const { provides: zoom, state: zoomState } = useZoom(); const { provides: zoom, state: zoomState } = useZoom();
const hasSetInitialZoom = useRef(false);
// Set initial zoom once when plugin is ready
useEffect(() => {
if (zoom && !hasSetInitialZoom.current) {
hasSetInitialZoom.current = true;
setTimeout(() => {
console.log('Setting initial zoom to 140%');
zoom.requestZoom(1.4);
}, 50);
}
}, [zoom]);
useEffect(() => { useEffect(() => {
if (zoom) { if (zoom) {
// Export zoom controls to global window for right rail access // Export zoom controls to global window for right rail access
(window as any).embedPdfZoom = { (window as any).embedPdfZoom = {
zoomIn: () => zoom.zoomIn(), zoomIn: () => zoom.zoomIn(),
zoomOut: () => zoom.zoomOut(), zoomOut: () => zoom.zoomOut(),
toggleMarqueeZoom: () => zoom.toggleMarqueeZoom(), toggleMarqueeZoom: () => zoom.toggleMarqueeZoom(),
requestZoom: (level: any) => zoom.requestZoom(level), requestZoom: (level: any) => zoom.requestZoom(level),
currentZoom: zoomState?.currentZoomLevel || 1, currentZoom: zoomState?.currentZoomLevel || 1.4,
zoomPercent: Math.round((zoomState?.currentZoomLevel || 1) * 100), zoomPercent: Math.round((zoomState?.currentZoomLevel || 1.4) * 100),
}; };
} }

View File

@ -1,30 +1,25 @@
export const SPLIT_MODES = { export const SPLIT_METHODS = {
BY_PAGES: 'byPages', BY_PAGES: 'byPages',
BY_SECTIONS: 'bySections', BY_SECTIONS: 'bySections',
BY_SIZE_OR_COUNT: 'bySizeOrCount', BY_SIZE: 'bySize',
BY_PAGE_COUNT: 'byPageCount',
BY_DOC_COUNT: 'byDocCount',
BY_CHAPTERS: 'byChapters' BY_CHAPTERS: 'byChapters'
} as const; } as const;
export const SPLIT_TYPES = {
SIZE: 'size',
PAGES: 'pages',
DOCS: 'docs'
} as const;
export const ENDPOINTS = { export const ENDPOINTS = {
[SPLIT_MODES.BY_PAGES]: 'split-pages', [SPLIT_METHODS.BY_PAGES]: 'split-pages',
[SPLIT_MODES.BY_SECTIONS]: 'split-pdf-by-sections', [SPLIT_METHODS.BY_SECTIONS]: 'split-pdf-by-sections',
[SPLIT_MODES.BY_SIZE_OR_COUNT]: 'split-by-size-or-count', [SPLIT_METHODS.BY_SIZE]: 'split-by-size-or-count',
[SPLIT_MODES.BY_CHAPTERS]: 'split-pdf-by-chapters' [SPLIT_METHODS.BY_PAGE_COUNT]: 'split-by-size-or-count',
[SPLIT_METHODS.BY_DOC_COUNT]: 'split-by-size-or-count',
[SPLIT_METHODS.BY_CHAPTERS]: 'split-pdf-by-chapters'
} as const; } as const;
export type SplitMode = typeof SPLIT_MODES[keyof typeof SPLIT_MODES]; export type SplitMethod = typeof SPLIT_METHODS[keyof typeof SPLIT_METHODS];
export type SplitType = typeof SPLIT_TYPES[keyof typeof SPLIT_TYPES]; export const isSplitMethod = (value: string | null): value is SplitMethod => {
return Object.values(SPLIT_METHODS).includes(value as SplitMethod);
export const isSplitMode = (value: string | null): value is SplitMode => {
return Object.values(SPLIT_MODES).includes(value as SplitMode);
} }
export const isSplitType = (value: string | null): value is SplitType => {
return Object.values(SPLIT_TYPES).includes(value as SplitType);
}

View File

@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
import { ToolType, useToolOperation, ToolOperationConfig } from '../shared/useToolOperation'; import { ToolType, useToolOperation, ToolOperationConfig } from '../shared/useToolOperation';
import { createStandardErrorHandler } from '../../../utils/toolErrorHandler'; import { createStandardErrorHandler } from '../../../utils/toolErrorHandler';
import { SplitParameters, defaultParameters } from './useSplitParameters'; import { SplitParameters, defaultParameters } from './useSplitParameters';
import { SPLIT_MODES } from '../../../constants/splitConstants'; import { SPLIT_METHODS } from '../../../constants/splitConstants';
import { useToolResources } from '../shared/useToolResources'; import { useToolResources } from '../shared/useToolResources';
// Static functions that can be used by both the hook and automation executor // Static functions that can be used by both the hook and automation executor
@ -12,46 +12,53 @@ export const buildSplitFormData = (parameters: SplitParameters, file: File): For
formData.append("fileInput", file); formData.append("fileInput", file);
switch (parameters.mode) { switch (parameters.method) {
case SPLIT_MODES.BY_PAGES: case SPLIT_METHODS.BY_PAGES:
formData.append("pageNumbers", parameters.pages); formData.append("pageNumbers", parameters.pages);
break; break;
case SPLIT_MODES.BY_SECTIONS: case SPLIT_METHODS.BY_SECTIONS:
formData.append("horizontalDivisions", parameters.hDiv); formData.append("horizontalDivisions", parameters.hDiv);
formData.append("verticalDivisions", parameters.vDiv); formData.append("verticalDivisions", parameters.vDiv);
formData.append("merge", parameters.merge.toString()); formData.append("merge", parameters.merge.toString());
break; break;
case SPLIT_MODES.BY_SIZE_OR_COUNT: case SPLIT_METHODS.BY_SIZE:
formData.append( formData.append("splitType", "0");
"splitType",
parameters.splitType === "size" ? "0" : parameters.splitType === "pages" ? "1" : "2"
);
formData.append("splitValue", parameters.splitValue); formData.append("splitValue", parameters.splitValue);
break; break;
case SPLIT_MODES.BY_CHAPTERS: case SPLIT_METHODS.BY_PAGE_COUNT:
formData.append("splitType", "1");
formData.append("splitValue", parameters.splitValue);
break;
case SPLIT_METHODS.BY_DOC_COUNT:
formData.append("splitType", "2");
formData.append("splitValue", parameters.splitValue);
break;
case SPLIT_METHODS.BY_CHAPTERS:
formData.append("bookmarkLevel", parameters.bookmarkLevel); formData.append("bookmarkLevel", parameters.bookmarkLevel);
formData.append("includeMetadata", parameters.includeMetadata.toString()); formData.append("includeMetadata", parameters.includeMetadata.toString());
formData.append("allowDuplicates", parameters.allowDuplicates.toString()); formData.append("allowDuplicates", parameters.allowDuplicates.toString());
break; break;
default: default:
throw new Error(`Unknown split mode: ${parameters.mode}`); throw new Error(`Unknown split method: ${parameters.method}`);
} }
return formData; return formData;
}; };
export const getSplitEndpoint = (parameters: SplitParameters): string => { export const getSplitEndpoint = (parameters: SplitParameters): string => {
switch (parameters.mode) { switch (parameters.method) {
case SPLIT_MODES.BY_PAGES: case SPLIT_METHODS.BY_PAGES:
return "/api/v1/general/split-pages"; return "/api/v1/general/split-pages";
case SPLIT_MODES.BY_SECTIONS: case SPLIT_METHODS.BY_SECTIONS:
return "/api/v1/general/split-pdf-by-sections"; return "/api/v1/general/split-pdf-by-sections";
case SPLIT_MODES.BY_SIZE_OR_COUNT: case SPLIT_METHODS.BY_SIZE:
case SPLIT_METHODS.BY_PAGE_COUNT:
case SPLIT_METHODS.BY_DOC_COUNT:
return "/api/v1/general/split-by-size-or-count"; return "/api/v1/general/split-by-size-or-count";
case SPLIT_MODES.BY_CHAPTERS: case SPLIT_METHODS.BY_CHAPTERS:
return "/api/v1/general/split-pdf-by-chapters"; return "/api/v1/general/split-pdf-by-chapters";
default: default:
throw new Error(`Unknown split mode: ${parameters.mode}`); throw new Error(`Unknown split method: ${parameters.method}`);
} }
}; };

View File

@ -1,14 +1,13 @@
import { SPLIT_MODES, SPLIT_TYPES, ENDPOINTS, type SplitMode, SplitType } from '../../../constants/splitConstants'; import { SPLIT_METHODS, ENDPOINTS, type SplitMethod } from '../../../constants/splitConstants';
import { BaseParameters } from '../../../types/parameters'; import { BaseParameters } from '../../../types/parameters';
import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters'; import { useBaseParameters, BaseParametersHook } from '../shared/useBaseParameters';
export interface SplitParameters extends BaseParameters { export interface SplitParameters extends BaseParameters {
mode: SplitMode | ''; method: SplitMethod | '';
pages: string; pages: string;
hDiv: string; hDiv: string;
vDiv: string; vDiv: string;
merge: boolean; merge: boolean;
splitType: SplitType | '';
splitValue: string; splitValue: string;
bookmarkLevel: string; bookmarkLevel: string;
includeMetadata: boolean; includeMetadata: boolean;
@ -18,12 +17,11 @@ export interface SplitParameters extends BaseParameters {
export type SplitParametersHook = BaseParametersHook<SplitParameters>; export type SplitParametersHook = BaseParametersHook<SplitParameters>;
export const defaultParameters: SplitParameters = { export const defaultParameters: SplitParameters = {
mode: '', method: '',
pages: '', pages: '',
hDiv: '2', hDiv: '2',
vDiv: '2', vDiv: '2',
merge: false, merge: false,
splitType: SPLIT_TYPES.SIZE,
splitValue: '', splitValue: '',
bookmarkLevel: '1', bookmarkLevel: '1',
includeMetadata: false, includeMetadata: false,
@ -34,20 +32,22 @@ export const useSplitParameters = (): SplitParametersHook => {
return useBaseParameters({ return useBaseParameters({
defaultParameters, defaultParameters,
endpointName: (params) => { endpointName: (params) => {
if (!params.mode) return ENDPOINTS[SPLIT_MODES.BY_PAGES]; if (!params.method) return ENDPOINTS[SPLIT_METHODS.BY_PAGES];
return ENDPOINTS[params.mode as SplitMode]; return ENDPOINTS[params.method as SplitMethod];
}, },
validateFn: (params) => { validateFn: (params) => {
if (!params.mode) return false; if (!params.method) return false;
switch (params.mode) { switch (params.method) {
case SPLIT_MODES.BY_PAGES: case SPLIT_METHODS.BY_PAGES:
return params.pages.trim() !== ""; return params.pages.trim() !== "";
case SPLIT_MODES.BY_SECTIONS: case SPLIT_METHODS.BY_SECTIONS:
return params.hDiv !== "" && params.vDiv !== ""; return params.hDiv !== "" && params.vDiv !== "";
case SPLIT_MODES.BY_SIZE_OR_COUNT: case SPLIT_METHODS.BY_SIZE:
case SPLIT_METHODS.BY_PAGE_COUNT:
case SPLIT_METHODS.BY_DOC_COUNT:
return params.splitValue.trim() !== ""; return params.splitValue.trim() !== "";
case SPLIT_MODES.BY_CHAPTERS: case SPLIT_METHODS.BY_CHAPTERS:
return params.bookmarkLevel !== ""; return params.bookmarkLevel !== "";
default: default:
return false; return false;

View File

@ -183,10 +183,10 @@ export const mantineTheme = createTheme({
}, },
option: { option: {
color: 'var(--text-primary)', color: 'var(--text-primary)',
'&[data-hovered]': { '&[dataHovered]': {
backgroundColor: 'var(--hover-bg)', backgroundColor: 'var(--hover-bg)',
}, },
'&[data-selected]': { '&[dataSelected]': {
backgroundColor: 'var(--color-primary-100)', backgroundColor: 'var(--color-primary-100)',
color: 'var(--color-primary-900)', color: 'var(--color-primary-900)',
}, },

View File

@ -4,10 +4,12 @@ import SplitSettings from "../components/tools/split/SplitSettings";
import { useSplitParameters } from "../hooks/tools/split/useSplitParameters"; import { useSplitParameters } from "../hooks/tools/split/useSplitParameters";
import { useSplitOperation } from "../hooks/tools/split/useSplitOperation"; import { useSplitOperation } from "../hooks/tools/split/useSplitOperation";
import { useBaseTool } from "../hooks/tools/shared/useBaseTool"; import { useBaseTool } from "../hooks/tools/shared/useBaseTool";
import { useSplitTips } from "../components/tooltips/useSplitTips";
import { BaseToolProps, ToolComponent } from "../types/tool"; import { BaseToolProps, ToolComponent } from "../types/tool";
const Split = (props: BaseToolProps) => { const Split = (props: BaseToolProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const splitTips = useSplitTips();
const base = useBaseTool( const base = useBaseTool(
'split', 'split',
@ -26,6 +28,7 @@ const Split = (props: BaseToolProps) => {
title: "Settings", title: "Settings",
isCollapsed: base.settingsCollapsed, isCollapsed: base.settingsCollapsed,
onCollapsedClick: base.hasResults ? base.handleSettingsReset : undefined, onCollapsedClick: base.hasResults ? base.handleSettingsReset : undefined,
tooltip: splitTips,
content: ( content: (
<SplitSettings <SplitSettings
parameters={base.params.parameters} parameters={base.params.parameters}

View File

@ -17,12 +17,24 @@ export interface EmbedPdfScrollAPI {
export interface EmbedPdfPanAPI { export interface EmbedPdfPanAPI {
isPanning: boolean; isPanning: boolean;
togglePan: () => void;
} }
export interface EmbedPdfSpreadAPI { export interface EmbedPdfSpreadAPI {
toggleSpreadMode: () => void; toggleSpreadMode: () => void;
} }
export interface EmbedPdfRotateAPI {
rotateForward: () => void;
rotateBackward: () => void;
setRotation: (rotation: number) => void;
getRotation: () => number;
}
export interface EmbedPdfControlsAPI {
pointer: () => void;
}
export interface EmbedPdfThumbnailAPI { export interface EmbedPdfThumbnailAPI {
thumbnailAPI: { thumbnailAPI: {
renderThumb: (pageIndex: number, scale: number) => { renderThumb: (pageIndex: number, scale: number) => {
@ -37,6 +49,8 @@ declare global {
embedPdfScroll?: EmbedPdfScrollAPI; embedPdfScroll?: EmbedPdfScrollAPI;
embedPdfPan?: EmbedPdfPanAPI; embedPdfPan?: EmbedPdfPanAPI;
embedPdfSpread?: EmbedPdfSpreadAPI; embedPdfSpread?: EmbedPdfSpreadAPI;
embedPdfRotate?: EmbedPdfRotateAPI;
embedPdfControls?: EmbedPdfControlsAPI;
embedPdfThumbnail?: EmbedPdfThumbnailAPI; embedPdfThumbnail?: EmbedPdfThumbnailAPI;
toggleThumbnailSidebar?: () => void; toggleThumbnailSidebar?: () => void;
} }