From 200a53c27ba5e12966a425c367d2be3e978b5153 Mon Sep 17 00:00:00 2001 From: Reece Date: Wed, 17 Dec 2025 14:57:54 +0000 Subject: [PATCH] lint tsc hell --- frontend/src/core/tools/Annotate.tsx | 106 +----------------- .../core/tools/annotate/AnnotationPanel.tsx | 65 +++++++++-- 2 files changed, 60 insertions(+), 111 deletions(-) diff --git a/frontend/src/core/tools/Annotate.tsx b/frontend/src/core/tools/Annotate.tsx index a9f0a441a..cee167440 100644 --- a/frontend/src/core/tools/Annotate.tsx +++ b/frontend/src/core/tools/Annotate.tsx @@ -1,6 +1,5 @@ import { useEffect, useState, useContext, useCallback, useRef } from 'react'; import { useTranslation } from 'react-i18next'; -import { alert as showToast, updateToast } from '@app/components/toast'; import { createToolFlow } from '@app/components/tools/shared/createToolFlow'; import { useNavigation } from '@app/contexts/NavigationContext'; @@ -63,7 +62,6 @@ const Annotate = (_props: BaseToolProps) => { const [stampImageData, setStampImageData] = useState(); const [stampImageSize, setStampImageSize] = useState<{ width: number; height: number } | null>(null); const [historyAvailability, setHistoryAvailability] = useState({ canUndo: false, canRedo: false }); - const [isSavingCopy, setIsSavingCopy] = useState(false); const manualToolSwitch = useRef(false); // Zoom tracking for stamp size conversion @@ -122,53 +120,11 @@ const Annotate = (_props: BaseToolProps) => { } = useAnnotationStyleState(cssToPdfSize); const { - inkColor, - inkWidth, - highlightColor, - highlightOpacity, - freehandHighlighterWidth, - underlineColor, - underlineOpacity, - strikeoutColor, - strikeoutOpacity, - squigglyColor, - squigglyOpacity, - textColor, - textSize, - textAlignment, - textBackgroundColor, - noteBackgroundColor, - shapeStrokeColor, - shapeFillColor, - shapeOpacity, - shapeStrokeOpacity, - shapeFillOpacity, - shapeThickness, - } = styleState; - - const { - setInkColor, setInkWidth, - setHighlightColor, - setHighlightOpacity, - setFreehandHighlighterWidth, - setUnderlineColor, - setUnderlineOpacity, - setStrikeoutColor, - setStrikeoutOpacity, - setSquigglyColor, - setSquigglyOpacity, + setShapeThickness, setTextColor, - setTextSize, - setTextAlignment, setTextBackgroundColor, setNoteBackgroundColor, - setShapeStrokeColor, - setShapeFillColor, - setShapeOpacity, - setShapeStrokeOpacity, - setShapeFillOpacity, - setShapeThickness, } = styleActions; useEffect(() => { @@ -223,64 +179,6 @@ const Annotate = (_props: BaseToolProps) => { annotationApiRef?.current?.activateAnnotationTool?.(activeTool, toolOptions); }, [viewerContext?.isAnnotationMode, signatureApiRef, activeTool, buildToolOptions, stampImageData, stampImageSize]); - const handleSaveCopy = useCallback(async () => { - if (!viewerContext?.exportActions?.saveAsCopy) { - return; - } - - setIsSavingCopy(true); - const toastId = showToast({ - alertType: 'neutral', - title: t('annotation.savingCopy', 'Preparing download...'), - progressBarPercentage: 15, - isPersistentPopup: true, - }); - - try { - const buffer = await viewerContext.exportActions.saveAsCopy(); - if (!buffer) { - updateToast(toastId, { - alertType: 'error', - title: t('annotation.saveFailed', 'Unable to save copy'), - durationMs: 4000, - isPersistentPopup: false, - }); - return; - } - - const blob = new Blob([buffer], { type: 'application/pdf' }); - const url = URL.createObjectURL(blob); - const baseName = selectedFiles[0]?.name; - const filename = baseName - ? `${baseName.replace(/\.pdf$/i, '')}-annotated.pdf` - : 'annotated.pdf'; - - const anchor = document.createElement('a'); - anchor.href = url; - anchor.download = filename; - anchor.click(); - setTimeout(() => URL.revokeObjectURL(url), 4000); - - updateToast(toastId, { - alertType: 'success', - title: t('annotation.saveReady', 'Download ready'), - progressBarPercentage: 100, - durationMs: 2500, - isPersistentPopup: false, - }); - } catch (error: any) { - updateToast(toastId, { - alertType: 'error', - title: t('annotation.saveFailed', 'Unable to save copy'), - body: error?.message, - durationMs: 4500, - isPersistentPopup: false, - }); - } finally { - setIsSavingCopy(false); - } - }, [viewerContext?.exportActions, selectedFiles, t]); - const activateAnnotationTool = (toolId: AnnotationToolId) => { // If leaving stamp tool, clean up placement mode if (activeTool === 'stamp' && toolId !== 'stamp') { @@ -460,6 +358,8 @@ const Annotate = (_props: BaseToolProps) => { executeOperation: async () => {}, resetResults: () => {}, clearError: () => {}, + cancelOperation: () => {}, + undoOperation: async () => {}, }, title: '', onFileClick: () => {}, diff --git a/frontend/src/core/tools/annotate/AnnotationPanel.tsx b/frontend/src/core/tools/annotate/AnnotationPanel.tsx index bf99f8e33..ce091bcb7 100644 --- a/frontend/src/core/tools/annotate/AnnotationPanel.tsx +++ b/frontend/src/core/tools/annotate/AnnotationPanel.tsx @@ -7,7 +7,58 @@ import { ColorPicker, ColorSwatchButton } from '@app/components/annotation/share import { ImageUploader } from '@app/components/annotation/shared/ImageUploader'; import { SuggestedToolsSection } from '@app/components/tools/shared/SuggestedToolsSection'; import type { AnnotationToolId, AnnotationAPI } from '@app/components/viewer/viewerTypes'; -import type { BuildToolOptionsFn, AnnotationStyleStateReturn } from './useAnnotationStyleState'; + +interface StyleState { + inkColor: string; + inkWidth: number; + highlightColor: string; + highlightOpacity: number; + freehandHighlighterWidth: number; + underlineColor: string; + underlineOpacity: number; + strikeoutColor: string; + strikeoutOpacity: number; + squigglyColor: string; + squigglyOpacity: number; + textColor: string; + textSize: number; + textAlignment: 'left' | 'center' | 'right'; + textBackgroundColor: string; + noteBackgroundColor: string; + shapeStrokeColor: string; + shapeFillColor: string; + shapeOpacity: number; + shapeStrokeOpacity: number; + shapeFillOpacity: number; + shapeThickness: number; +} + +interface StyleActions { + setInkColor: (value: string) => void; + setInkWidth: (value: number) => void; + setHighlightColor: (value: string) => void; + setHighlightOpacity: (value: number) => void; + setFreehandHighlighterWidth: (value: number) => void; + setUnderlineColor: (value: string) => void; + setUnderlineOpacity: (value: number) => void; + setStrikeoutColor: (value: string) => void; + setStrikeoutOpacity: (value: number) => void; + setSquigglyColor: (value: string) => void; + setSquigglyOpacity: (value: number) => void; + setTextColor: (value: string) => void; + setTextSize: (value: number) => void; + setTextAlignment: (value: 'left' | 'center' | 'right') => void; + setTextBackgroundColor: (value: string) => void; + setNoteBackgroundColor: (value: string) => void; + setShapeStrokeColor: (value: string) => void; + setShapeFillColor: (value: string) => void; + setShapeOpacity: (value: number) => void; + setShapeStrokeOpacity: (value: number) => void; + setShapeFillOpacity: (value: number) => void; + setShapeThickness: (value: number) => void; +} + +type BuildToolOptionsFn = (toolId: AnnotationToolId, extras?: any) => Record; type ColorTarget = | 'ink' @@ -26,9 +77,9 @@ type ColorTarget = interface AnnotationPanelProps { activeTool: AnnotationToolId; activateAnnotationTool: (toolId: AnnotationToolId) => void; - styleState: AnnotationStyleStateReturn['styleState']; - styleActions: AnnotationStyleStateReturn['styleActions']; - getActiveColor: AnnotationStyleStateReturn['getActiveColor']; + styleState: StyleState; + styleActions: StyleActions; + getActiveColor: (tool: AnnotationToolId) => string; buildToolOptions: BuildToolOptionsFn; deriveToolFromAnnotation: (annotation: any) => AnnotationToolId | undefined; selectedAnn: any | null; @@ -73,14 +124,12 @@ export function AnnotationPanel(props: AnnotationPanelProps) { selectedFontSize, setSelectedFontSize, annotationApiRef, - signatureApiRef, viewerContext, setPlacementMode, setSignatureConfig, computeStampDisplaySize, stampImageData, setStampImageData, - stampImageSize, setStampImageSize, setPlacementPreviewSize, undo, @@ -163,7 +212,7 @@ export function AnnotationPanel(props: AnnotationPanelProps) { { id: 'stamp', label: t('annotation.stamp', 'Add Image'), icon: 'add-photo-alternate' }, ]; - const activeColor = useMemo(() => getActiveColor(colorPickerTarget), [colorPickerTarget, getActiveColor]); + const activeColor = useMemo(() => colorPickerTarget ? getActiveColor(colorPickerTarget as AnnotationToolId) : '#000000', [colorPickerTarget, getActiveColor]); const renderToolButtons = (tools: { id: AnnotationToolId; label: string; icon: string }[]) => ( @@ -1131,7 +1180,7 @@ export function AnnotationPanel(props: AnnotationPanelProps) { {colorPickerComponent} - + ); }