+ {annotations
+ .filter((anno) => anno.type === 'highlight' || anno.type === 'comment')
+ .map((anno) => {
+ const scaledBbox = {
+ x: anno.bbox.x * zoom,
+ y: anno.bbox.y * zoom,
+ width: anno.bbox.width * zoom,
+ height: anno.bbox.height * zoom,
+ };
+
+ return (
+
{
+ e.stopPropagation();
+ onAnnotationClick?.(anno);
+ }}
+ className={`highlight-box type-${anno.type}`}
+ style={{
+ left: `${scaledBbox.x}px`,
+ top: `${scaledBbox.y}px`,
+ width: `${scaledBbox.width}px`,
+ height: `${scaledBbox.height}px`,
+ }}
+ title={`${anno.author}: ${anno.content || ''}`}
+ />
+ );
+ })}
+
+ );
+};
diff --git a/frontend/src/viewer/CanvasLayer.tsx b/frontend/src/viewer/CanvasLayer.tsx
new file mode 100644
index 0000000..1fe4605
--- /dev/null
+++ b/frontend/src/viewer/CanvasLayer.tsx
@@ -0,0 +1,72 @@
+import React, { useRef, useEffect } from 'react';
+
+interface CanvasLayerProps {
+ pageIndex: number;
+ imageUrl: string;
+ zoom: number;
+ rotation: number;
+ width: number;
+ height: number;
+ onRenderComplete?: () => void;
+}
+
+export const CanvasLayer: React.FC
= ({
+ pageIndex,
+ imageUrl,
+ zoom,
+ rotation,
+ width,
+ height,
+ onRenderComplete,
+}) => {
+ const canvasRef = useRef(null);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+
+ const ctx = canvas.getContext('2d');
+ if (!ctx) return;
+
+ // Apply scaling for High DPI screens
+ const dpr = window.devicePixelRatio || 1;
+ canvas.width = width * dpr;
+ canvas.height = height * dpr;
+ canvas.style.width = `${width}px`;
+ canvas.style.height = `${height}px`;
+ ctx.scale(dpr, dpr);
+
+ // Simulated asynchronous high-fidelity drawing from loaded image / WASM context
+ const img = new Image();
+ img.onload = () => {
+ ctx.clearRect(0, 0, width, height);
+
+ // Save canvas state to handle rotation
+ ctx.save();
+
+ if (rotation !== 0) {
+ ctx.translate(width / 2, height / 2);
+ ctx.rotate((rotation * Math.PI) / 180);
+ ctx.translate(-width / 2, -height / 2);
+ }
+
+ ctx.drawImage(img, 0, 0, width, height);
+ ctx.restore();
+
+ onRenderComplete?.();
+ };
+ img.src = imageUrl;
+
+ }, [imageUrl, zoom, rotation, width, height, onRenderComplete]);
+
+ return (
+
+ );
+};
diff --git a/frontend/src/viewer/OverlayLayer.tsx b/frontend/src/viewer/OverlayLayer.tsx
new file mode 100644
index 0000000..e016955
--- /dev/null
+++ b/frontend/src/viewer/OverlayLayer.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface OverlayLayerProps {
+ pageIndex: number;
+ width: number;
+ height: number;
+ activeTool: string;
+ onDrawStroke?: (path: string) => void;
+}
+
+export const OverlayLayer: React.FC = ({
+ pageIndex,
+ width,
+ height,
+ activeTool,
+}) => {
+ return (
+
+ {/* Signature overlay state indicator */}
+ {activeTool === 'signature' && (
+
+
+ READY TO PLACE SIGNATURE (Page {pageIndex + 1})
+
+
+ )}
+
+ {activeTool === 'draw' && (
+
+ Freehand Ink Pen Enabled
+
+ )}
+
+
+ {visiblePages.map((page) => {
+ const imageUrl = renderedPages[page.index] || '';
+
+ return (
+
+ {imageUrl ? (
+ <>
+ {/* Base PDF Canvas Layer */}
+
+
+ {/* Highlight/Comment Annotation Layer */}
+
+
+ {/* Text Selection Dragging Layer */}
+
handleTextSelection(text, bbox, page.index)}
+ />
+
+ {/* signature/ink overlay tool layer */}
+
+
+ ) : (
+
+
+
Loading Page {page.index + 1}...
+
+ );
+ })}
+
+
+ {/* Selection Box highlight visual */}
+ {selectionBox && (
+
+ )}
+