Refactor

2026-07-16 03:20:46 +02:00 · 2025-06-19 19:47:44 +01:00
parent d981968e0f
commit 868969192b
13 changed files with 345 additions and 194 deletions
@@ -0,0 +1,191 @@
+import React from "react";
+import {
+  Tooltip,
+  ActionIcon,
+  Paper
+} from "@mantine/core";
+import UndoIcon from "@mui/icons-material/Undo";
+import RedoIcon from "@mui/icons-material/Redo";
+import ContentCutIcon from "@mui/icons-material/ContentCut";
+import DownloadIcon from "@mui/icons-material/Download";
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+import DeleteIcon from "@mui/icons-material/Delete";
+import CloseIcon from "@mui/icons-material/Close";
+
+interface PageEditorControlsProps {
+  // Close/Reset functions
+  onClosePdf: () => void;
+
+  // Undo/Redo
+  onUndo: () => void;
+  onRedo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+
+  // Page operations
+  onRotate: (direction: 'left' | 'right') => void;
+  onDelete: () => void;
+  onSplit: () => void;
+
+  // Export functions
+  onExportSelected: () => void;
+  onExportAll: () => void;
+  exportLoading: boolean;
+
+  // Selection state
+  selectionMode: boolean;
+  selectedPages: string[];
+}
+
+const PageEditorControls = ({
+  onClosePdf,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  onRotate,
+  onDelete,
+  onSplit,
+  onExportSelected,
+  onExportAll,
+  exportLoading,
+  selectionMode,
+  selectedPages
+}: PageEditorControlsProps) => {
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        left: '50%',
+        bottom: '20px',
+        transform: 'translateX(-50%)',
+        zIndex: 50,
+        display: 'flex',
+        justifyContent: 'center',
+        pointerEvents: 'none',
+        background: 'transparent',
+      }}
+    >
+      <Paper
+        radius="xl"
+        shadow="lg"
+        p={16}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          borderRadius: 32,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
+          pointerEvents: 'auto',
+          minWidth: 400,
+          justifyContent: 'center'
+        }}
+      >
+        {/* Close PDF */}
+        <Tooltip label="Close PDF">
+          <ActionIcon
+            onClick={onClosePdf}
+            color="red"
+            variant="light"
+            size="lg"
+          >
+            <CloseIcon />
+          </ActionIcon>
+        </Tooltip>
+
+        <div style={{ width: 1, height: 28, backgroundColor: 'var(--mantine-color-gray-3)', margin: '0 8px' }} />
+
+        {/* Undo/Redo */}
+        <Tooltip label="Undo">
+          <ActionIcon onClick={onUndo} disabled={!canUndo} size="lg">
+            <UndoIcon />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label="Redo">
+          <ActionIcon onClick={onRedo} disabled={!canRedo} size="lg">
+            <RedoIcon />
+          </ActionIcon>
+        </Tooltip>
+
+        <div style={{ width: 1, height: 28, backgroundColor: 'var(--mantine-color-gray-3)', margin: '0 8px' }} />
+
+        {/* Page Operations */}
+        <Tooltip label={selectionMode ? "Rotate Selected Left" : "Rotate All Left"}>
+          <ActionIcon
+            onClick={() => onRotate('left')}
+            disabled={selectionMode && selectedPages.length === 0}
+            variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
+            color={selectionMode && selectedPages.length > 0 ? "blue" : undefined}
+            size="lg"
+          >
+            <RotateLeftIcon />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label={selectionMode ? "Rotate Selected Right" : "Rotate All Right"}>
+          <ActionIcon
+            onClick={() => onRotate('right')}
+            disabled={selectionMode && selectedPages.length === 0}
+            variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
+            color={selectionMode && selectedPages.length > 0 ? "blue" : undefined}
+            size="lg"
+          >
+            <RotateRightIcon />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label={selectionMode ? "Delete Selected" : "Delete All"}>
+          <ActionIcon
+            onClick={onDelete}
+            disabled={selectionMode && selectedPages.length === 0}
+            color="red"
+            variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
+            size="lg"
+          >
+            <DeleteIcon />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label={selectionMode ? "Split Selected" : "Split All"}>
+          <ActionIcon
+            onClick={onSplit}
+            disabled={selectionMode && selectedPages.length === 0}
+            variant={selectionMode && selectedPages.length > 0 ? "light" : "default"}
+            color={selectionMode && selectedPages.length > 0 ? "blue" : undefined}
+            size="lg"
+          >
+            <ContentCutIcon />
+          </ActionIcon>
+        </Tooltip>
+
+        <div style={{ width: 1, height: 28, backgroundColor: 'var(--mantine-color-gray-3)', margin: '0 8px' }} />
+
+        {/* Export Controls */}
+        {selectionMode && selectedPages.length > 0 && (
+          <Tooltip label="Export Selected">
+            <ActionIcon
+              onClick={onExportSelected}
+              disabled={exportLoading}
+              color="blue"
+              variant="light"
+              size="lg"
+            >
+              <DownloadIcon />
+            </ActionIcon>
+          </Tooltip>
+        )}
+        <Tooltip label="Export All">
+          <ActionIcon
+            onClick={onExportAll}
+            disabled={exportLoading}
+            color="green"
+            variant="light"
+            size="lg"
+          >
+            <DownloadIcon />
+          </ActionIcon>
+        </Tooltip>
+      </Paper>
+    </div>
+  );
+};
+
+export default PageEditorControls;