zemion/pdf-tools
1
0
Fork 0
Code Issues Pull Requests Releases Activity

mostly formatting, dependency fix

Browse Source
This commit is contained in:
zemion
2026-05-17 02:39:32 +02:00
parent a5dc70aabf
commit cf9a0dd0b7
32 changed files with 837 additions and 836 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/PageWorkspace/CopyPagesDialog.tsx
View File

@@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React, { useEffect } from 'react';
interface CopyPagesDialogProps {
selectedCount: number;
@@ -21,16 +21,16 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
}) => {
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") {
if (e.key === 'Escape') {
e.preventDefault();
onCancel();
}
};
window.addEventListener("keydown", handleKeyDown);
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener('keydown', handleKeyDown);
};
}, [onCancel]);
@@ -45,43 +45,43 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
}
}}
style={{
position: "fixed",
position: 'fixed',
inset: 0,
zIndex: 60,
background: "rgba(15, 23, 42, 0.55)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "1rem",
background: 'rgba(15, 23, 42, 0.55)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '1rem',
}}
>
<form
onSubmit={onConfirm}
style={{
width: "100%",
maxWidth: "420px",
background: "white",
borderRadius: "0.75rem",
boxShadow: "0 20px 40px rgba(15, 23, 42, 0.35)",
padding: "1rem",
display: "flex",
flexDirection: "column",
gap: "0.75rem",
width: '100%',
maxWidth: '420px',
background: 'white',
borderRadius: '0.75rem',
boxShadow: '0 20px 40px rgba(15, 23, 42, 0.35)',
padding: '1rem',
display: 'flex',
flexDirection: 'column',
gap: '0.75rem',
}}
>
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "0.75rem",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
gap: '0.75rem',
}}
>
<h2
id="copy-pages-dialog-title"
style={{
margin: 0,
fontSize: "1rem",
fontSize: '1rem',
}}
>
Copy selected pages
@@ -91,18 +91,18 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
type="button"
onClick={onCancel}
style={{
border: "none",
borderRadius: "999px",
width: "1.8rem",
height: "1.8rem",
background: "#e5e7eb",
color: "#111827",
cursor: "pointer",
fontSize: "1.1rem",
border: 'none',
borderRadius: '999px',
width: '1.8rem',
height: '1.8rem',
background: '#e5e7eb',
color: '#111827',
cursor: 'pointer',
fontSize: '1.1rem',
lineHeight: 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
aria-label="Close copy dialog"
>
@@ -113,25 +113,25 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
<p
style={{
margin: 0,
fontSize: "0.9rem",
color: "#4b5563",
fontSize: '0.9rem',
color: '#4b5563',
}}
>
Copy{" "}
Copy{' '}
<strong>
{selectedCount === 1
? "1 selected page"
? '1 selected page'
: `${selectedCount} selected pages`}
</strong>{" "}
</strong>{' '}
to a new position.
</p>
<label
style={{
display: "flex",
flexDirection: "column",
gap: "0.25rem",
fontSize: "0.9rem",
display: 'flex',
flexDirection: 'column',
gap: '0.25rem',
fontSize: '0.9rem',
}}
>
Insert before position
@@ -143,18 +143,18 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
autoFocus
onChange={(e) => onTargetPositionChange(e.target.value)}
style={{
padding: "0.45rem 0.55rem",
borderRadius: "0.5rem",
border: "1px solid #d1d5db",
fontSize: "0.95rem",
padding: '0.45rem 0.55rem',
borderRadius: '0.5rem',
border: '1px solid #d1d5db',
fontSize: '0.95rem',
}}
/>
</label>
<div
style={{
fontSize: "0.8rem",
color: "#6b7280",
fontSize: '0.8rem',
color: '#6b7280',
lineHeight: 1.4,
}}
>
@@ -165,12 +165,12 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
{error && (
<div
style={{
borderRadius: "0.5rem",
background: "#fef2f2",
border: "1px solid #fecaca",
color: "#b91c1c",
padding: "0.5rem",
fontSize: "0.85rem",
borderRadius: '0.5rem',
background: '#fef2f2',
border: '1px solid #fecaca',
color: '#b91c1c',
padding: '0.5rem',
fontSize: '0.85rem',
}}
>
{error}
@@ -179,23 +179,23 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
<div
style={{
display: "flex",
justifyContent: "flex-end",
gap: "0.5rem",
marginTop: "0.25rem",
display: 'flex',
justifyContent: 'flex-end',
gap: '0.5rem',
marginTop: '0.25rem',
}}
>
<button
type="button"
onClick={onCancel}
style={{
border: "none",
borderRadius: "0.5rem",
padding: "0.45rem 0.8rem",
background: "#e5e7eb",
color: "#111827",
cursor: "pointer",
fontSize: "0.9rem",
border: 'none',
borderRadius: '0.5rem',
padding: '0.45rem 0.8rem',
background: '#e5e7eb',
color: '#111827',
cursor: 'pointer',
fontSize: '0.9rem',
}}
>
Cancel
@@ -204,13 +204,13 @@ const CopyPagesDialog: React.FC<CopyPagesDialogProps> = ({
<button
type="submit"
style={{
border: "none",
borderRadius: "0.5rem",
padding: "0.45rem 0.8rem",
background: "#16a34a",
color: "white",
cursor: "pointer",
fontSize: "0.9rem",
border: 'none',
borderRadius: '0.5rem',
padding: '0.45rem 0.8rem',
background: '#16a34a',
color: 'white',
cursor: 'pointer',
fontSize: '0.9rem',
}}
>
Copy pages

20
src/components/PageWorkspace/DropIndicator.tsx
View File

@@ -1,23 +1,23 @@
import React from "react";
import React from 'react';
interface DropIndicatorProps {
side: "left" | "right" | "end";
side: 'left' | 'right' | 'end';
color: string;
}
const DropIndicator: React.FC<DropIndicatorProps> = ({ side, color }) => {
const isEnd = side === "end";
const isEnd = side === 'end';
return (
<div
style={{
position: "absolute",
left: side === "left" ? "-4px" : isEnd ? "8px" : undefined,
right: side === "right" ? "-4px" : undefined,
top: "4px",
bottom: "4px",
width: "3px",
borderRadius: "999px",
position: 'absolute',
left: side === 'left' ? '-4px' : isEnd ? '8px' : undefined,
right: side === 'right' ? '-4px' : undefined,
top: '4px',
bottom: '4px',
width: '3px',
borderRadius: '999px',
background: color,
}}
/>

126
src/components/PageWorkspace/PageCard.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
import type { PageRef } from "../../pdf/pdfTypes";
import DropIndicator from "./DropIndicator";
import React from 'react';
import type { PageRef } from '../../pdf/pdfTypes';
import DropIndicator from './DropIndicator';
interface PageCardProps {
page: PageRef;
@@ -24,11 +24,11 @@ interface PageCardProps {
}
const pageActionButtonStyle: React.CSSProperties = {
border: "none",
borderRadius: "999px",
padding: "0.15rem 0.4rem",
fontSize: "0.75rem",
cursor: "pointer",
border: 'none',
borderRadius: '999px',
padding: '0.15rem 0.4rem',
fontSize: '0.75rem',
cursor: 'pointer',
};
const PageCard: React.FC<PageCardProps> = ({
@@ -53,11 +53,11 @@ const PageCard: React.FC<PageCardProps> = ({
}) => {
const background = isDraggingCard
? isCopyDragging
? "#dcfce7"
: "#dbeafe"
? '#dcfce7'
: '#dbeafe'
: selected
? "#eff6ff"
: "#f9fafb";
? '#eff6ff'
: '#f9fafb';
return (
<div
@@ -67,17 +67,17 @@ const PageCard: React.FC<PageCardProps> = ({
onDragOver={onDragOver}
onClick={onOpenPreview}
style={{
position: "relative",
width: "162px",
padding: "0.4rem",
borderRadius: "0.5rem",
border: "1px solid #e5e7eb",
position: 'relative',
width: '162px',
padding: '0.4rem',
borderRadius: '0.5rem',
border: '1px solid #e5e7eb',
background,
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "0.25rem",
cursor: isBusy ? "default" : isCopyDragging ? "copy" : "grab",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '0.25rem',
cursor: isBusy ? 'default' : isCopyDragging ? 'copy' : 'grab',
opacity: isBusy ? 0.7 : 1,
}}
>
@@ -85,21 +85,21 @@ const PageCard: React.FC<PageCardProps> = ({
type="button"
onClick={onToggleSelect}
style={{
position: "absolute",
top: "4px",
left: "4px",
width: "20px",
height: "20px",
borderRadius: "0.4rem",
border: "1px solid #9ca3af",
background: selected ? "#2563eb" : "rgba(255,255,255,0.9)",
color: selected ? "white" : "transparent",
fontSize: "0.8rem",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: 'absolute',
top: '4px',
left: '4px',
width: '20px',
height: '20px',
borderRadius: '0.4rem',
border: '1px solid #9ca3af',
background: selected ? '#2563eb' : 'rgba(255,255,255,0.9)',
color: selected ? 'white' : 'transparent',
fontSize: '0.8rem',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 0,
cursor: "pointer",
cursor: 'pointer',
}}
title="Select page"
>
@@ -113,11 +113,11 @@ const PageCard: React.FC<PageCardProps> = ({
<div
style={{
width: "110px",
height: "90px",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: '110px',
height: '90px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{thumbnail ? (
@@ -125,41 +125,41 @@ const PageCard: React.FC<PageCardProps> = ({
src={thumbnail}
alt={`Page ${page.sourcePageIndex + 1}`}
style={{
maxWidth: "100%",
maxHeight: "100%",
width: "auto",
height: "auto",
objectFit: "contain",
borderRadius: "0.25rem",
border: "1px solid #e5e7eb",
background: "white",
maxWidth: '100%',
maxHeight: '100%',
width: 'auto',
height: 'auto',
objectFit: 'contain',
borderRadius: '0.25rem',
border: '1px solid #e5e7eb',
background: 'white',
}}
/>
) : (
<div
style={{
width: "60px",
height: "80px",
borderRadius: "0.25rem",
border: "1px dashed #d1d5db",
background: "#f3f4f6",
width: '60px',
height: '80px',
borderRadius: '0.25rem',
border: '1px dashed #d1d5db',
background: '#f3f4f6',
}}
/>
)}
</div>
<span style={{ fontSize: "0.8rem" }}>
<span style={{ fontSize: '0.8rem' }}>
Page {page.sourcePageIndex + 1}
</span>
<span style={{ fontSize: "0.7rem", color: "#6b7280" }}>
<span style={{ fontSize: '0.7rem', color: '#6b7280' }}>
Pos {visualIndex + 1} · Rot {page.rotation}°
</span>
<div
style={{
display: "flex",
gap: "0.25rem",
marginTop: "0.25rem",
display: 'flex',
gap: '0.25rem',
marginTop: '0.25rem',
}}
>
<button
@@ -170,7 +170,7 @@ const PageCard: React.FC<PageCardProps> = ({
}}
style={{
...pageActionButtonStyle,
background: "#e5e7eb",
background: '#e5e7eb',
}}
>
↻ 90°
@@ -184,7 +184,7 @@ const PageCard: React.FC<PageCardProps> = ({
}}
style={{
...pageActionButtonStyle,
background: "#e5e7eb",
background: '#e5e7eb',
}}
>
↺ 90°
@@ -198,8 +198,8 @@ const PageCard: React.FC<PageCardProps> = ({
}}
style={{
...pageActionButtonStyle,
background: "#fecaca",
color: "#b91c1c",
background: '#fecaca',
color: '#b91c1c',
}}
title="Remove this page from the exported PDF"
>

30
src/components/PageWorkspace/PageGrid.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import type { PageRef } from "../../pdf/pdfTypes";
import DropIndicator from "./DropIndicator";
import PageCard from "./PageCard";
import React from 'react';
import type { PageRef } from '../../pdf/pdfTypes';
import DropIndicator from './DropIndicator';
import PageCard from './PageCard';
interface PageGridProps {
pages: PageRef[];
@@ -16,14 +16,14 @@ interface PageGridProps {
onDragStart: (visualIndex: number) => React.DragEventHandler<HTMLDivElement>;
onDragEnd: React.DragEventHandler<HTMLDivElement>;
onCardDragOver: (
visualIndex: number,
visualIndex: number
) => React.DragEventHandler<HTMLDivElement>;
onEndSlotDragOver: React.DragEventHandler<HTMLDivElement>;
onDrop: React.DragEventHandler<HTMLDivElement>;
onOpenPreview: (pageId: string) => void;
onToggleSelect: (
pageId: string,
visualIndex: number,
visualIndex: number
) => React.MouseEventHandler<HTMLButtonElement>;
onRotateClockwise: (pageId: string) => void;
onRotateCounterclockwise: (pageId: string) => void;
@@ -67,11 +67,11 @@ const PageGrid: React.FC<PageGridProps> = ({
return (
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: "0.5rem",
alignItems: "flex-start",
marginBottom: "0.75rem",
display: 'flex',
flexWrap: 'wrap',
gap: '0.5rem',
alignItems: 'flex-start',
marginBottom: '0.75rem',
}}
onDrop={onDrop}
>
@@ -112,10 +112,10 @@ const PageGrid: React.FC<PageGridProps> = ({
onDragOver={onEndSlotDragOver}
onDrop={onDrop}
style={{
width: "20px",
height: "120px",
position: "relative",
alignSelf: "stretch",
width: '20px',
height: '120px',
position: 'relative',
alignSelf: 'stretch',
}}
>
{showEndLine() && (

52
src/components/PageWorkspace/PageSelectionToolbar.tsx
View File

@@ -1,4 +1,4 @@
import React from "react";
import React from 'react';
interface PageSelectionToolbarProps {
selectedCount: number;
@@ -9,10 +9,10 @@ interface PageSelectionToolbarProps {
}
const pillButtonStyle: React.CSSProperties = {
border: "none",
borderRadius: "999px",
padding: "0.15rem 0.6rem",
fontSize: "0.8rem",
border: 'none',
borderRadius: '999px',
padding: '0.15rem 0.6rem',
fontSize: '0.8rem',
};
const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
@@ -27,11 +27,11 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
return (
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
marginBottom: "0.5rem",
fontSize: "0.85rem",
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '0.5rem',
fontSize: '0.85rem',
}}
>
<span>
@@ -40,10 +40,10 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
<div
style={{
display: "flex",
gap: "0.4rem",
flexWrap: "wrap",
justifyContent: "flex-end",
display: 'flex',
gap: '0.4rem',
flexWrap: 'wrap',
justifyContent: 'flex-end',
}}
>
{hasSelection && (
@@ -53,9 +53,9 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
disabled={!hasSelection}
style={{
...pillButtonStyle,
background: "#dcfce7",
color: "#166534",
cursor: "pointer",
background: '#dcfce7',
color: '#166534',
cursor: 'pointer',
}}
title="Copy selected pages to another position"
>
@@ -69,9 +69,9 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
onClick={onDeleteSelected}
style={{
...pillButtonStyle,
background: "#fee2e2",
color: "#b91c1c",
cursor: "pointer",
background: '#fee2e2',
color: '#b91c1c',
cursor: 'pointer',
}}
>
Delete selected
@@ -83,9 +83,9 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
onClick={onSelectAll}
style={{
...pillButtonStyle,
background: "#8dcd8d",
color: "#111827",
cursor: "pointer",
background: '#8dcd8d',
color: '#111827',
cursor: 'pointer',
}}
>
Select all
@@ -97,9 +97,9 @@ const PageSelectionToolbar: React.FC<PageSelectionToolbarProps> = ({
disabled={!hasSelection}
style={{
...pillButtonStyle,
background: "#e5e7eb",
color: hasSelection ? "#111827" : "#6b7280",
cursor: hasSelection ? "pointer" : "default",
background: '#e5e7eb',
color: hasSelection ? '#111827' : '#6b7280',
cursor: hasSelection ? 'pointer' : 'default',
}}
>
Clear selection