미디어 위에 드로잉 오버레이 구현

┌─────────────────────────┐
│  Drawing Canvas (z: 30) │  ← 사용자 입력을 받는 투명 캔버스
├─────────────────────────┤
│  Toolbar (z: 20)        │  ← 브러시, 색상 등 도구 UI
├─────────────────────────┤
│  Media Player (z: 10)   │  ← 비디오 / PDF / 이미지
└─────────────────────────┘

function MediaWithOverlay({ mediaElement }: Props) {
  const [isDrawing, setIsDrawing] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} style={{ position: "relative" }}>
      {/* 미디어 레이어 */}
      {mediaElement}

      {/* 드로잉 오버레이 — isDrawing일 때만 이벤트 수신 */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          pointerEvents: isDrawing ? "auto" : "none",
          zIndex: 30,
        }}
      >
        <DrawingCanvas />
      </div>

      {/* 툴바 */}
      <Toolbar onToggleDraw={setIsDrawing} />
    </div>
  );
}

/* 드로잉 비활성: 이벤트가 오버레이를 투과해서 미디어로 전달 */
.overlay-inactive {
  pointer-events: none;
}

/* 드로잉 활성: 오버레이가 모든 이벤트를 캡처 */
.overlay-active {
  pointer-events: auto;
  cursor: crosshair;
}

type DrawingMode =
  | { active: false }
  | { active: true; tool: "pen" | "highlighter" | "eraser"; color: string; size: number };

const [mode, setMode] = useState<DrawingMode>({ active: false });

// 마우스 좌표 → 정규화 좌표 (저장용)
function toNormalized(
  clientX: number,
  clientY: number,
  rect: DOMRect
): { x: number; y: number } {
  return {
    x: (clientX - rect.left) / rect.width,
    y: (clientY - rect.top) / rect.height,
  };
}

// 정규화 좌표 → 캔버스 픽셀 좌표 (렌더링용)
function toCanvas(
  normalized: { x: number; y: number },
  canvasWidth: number,
  canvasHeight: number
): { x: number; y: number } {
  return {
    x: normalized.x * canvasWidth,
    y: normalized.y * canvasHeight,
  };
}

function useCanvasResize(
  containerRef: RefObject<HTMLDivElement>,
  canvasRef: RefObject<HTMLCanvasElement>
) {
  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const observer = new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect;
      const canvas = canvasRef.current;
      if (canvas) {
        // 캔버스 해상도를 컨테이너 크기에 맞춤
        canvas.width = width * window.devicePixelRatio;
        canvas.height = height * window.devicePixelRatio;
        canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;

        // 기존 드로잉을 새 크기로 다시 렌더링
        redrawStrokes();
      }
    });

    observer.observe(container);
    return () => observer.disconnect();
  }, []);
}

function VideoDrawingOverlay({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
  const [rect, setRect] = useState<DOMRect | null>(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    const updateRect = () => {
      setRect(video.getBoundingClientRect());
    };

    video.addEventListener("loadedmetadata", updateRect);
    window.addEventListener("resize", updateRect);

    return () => {
      video.removeEventListener("loadedmetadata", updateRect);
      window.removeEventListener("resize", updateRect);
    };
  }, [videoRef]);

  if (!rect) return null;

  return (
    <DrawingCanvas
      width={rect.width}
      height={rect.height}
      style={{ position: "absolute", top: 0, left: 0 }}
    />
  );
}

function getVideoContentRect(video: HTMLVideoElement): DOMRect {
  const elementAspect = video.clientWidth / video.clientHeight;
  const videoAspect = video.videoWidth / video.videoHeight;

  let contentWidth: number, contentHeight: number;
  let offsetX = 0, offsetY = 0;

  if (videoAspect > elementAspect) {
    // 비디오가 더 넓음 → 위아래 여백
    contentWidth = video.clientWidth;
    contentHeight = video.clientWidth / videoAspect;
    offsetY = (video.clientHeight - contentHeight) / 2;
  } else {
    // 비디오가 더 높음 → 좌우 여백
    contentHeight = video.clientHeight;
    contentWidth = video.clientHeight * videoAspect;
    offsetX = (video.clientWidth - contentWidth) / 2;
  }

  return new DOMRect(offsetX, offsetY, contentWidth, contentHeight);
}

function PdfPageOverlay({ pageElement }: { pageElement: HTMLElement }) {
  const [pageRect, setPageRect] = useState<DOMRect | null>(null);

  useEffect(() => {
    if (!pageElement) return;

    const observer = new ResizeObserver(() => {
      setPageRect(pageElement.getBoundingClientRect());
    });

    observer.observe(pageElement);
    return () => observer.disconnect();
  }, [pageElement]);

  if (!pageRect) return null;

  return (
    <DrawingCanvas
      width={pageRect.width}
      height={pageRect.height}
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
      }}
    />
  );
}

function isPointInPageArea(
  clientX: number,
  clientY: number,
  pages: HTMLElement[]
): { pageIndex: number; localX: number; localY: number } | null {
  for (let i = 0; i < pages.length; i++) {
    const rect = pages[i].getBoundingClientRect();
    if (
      clientX >= rect.left &&
      clientX <= rect.right &&
      clientY >= rect.top &&
      clientY <= rect.bottom
    ) {
      return {
        pageIndex: i,
        localX: clientX - rect.left,
        localY: clientY - rect.top,
      };
    }
  }
  return null; // 페이지 바깥 → 드로잉 무시
}

// 인터랙티브 오버레이: 드로잉 입력을 받음
function InteractiveOverlay({ strokes, onStrokeAdd }: InteractiveProps) {
  const handlePointerDown = (e: React.PointerEvent) => {
    // 새 스트로크 시작
  };

  const handlePointerMove = (e: React.PointerEvent) => {
    // 현재 스트로크에 좌표 추가
  };

  return (
    <canvas
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerUp}
      style={{ pointerEvents: "auto", cursor: "crosshair" }}
    />
  );
}

// 읽기 전용 오버레이: 기존 드로잉만 표시
function ReadOnlyOverlay({ strokes }: ReadOnlyProps) {
  useEffect(() => {
    // strokes를 캔버스에 렌더링
    renderStrokes(strokes);
  }, [strokes]);

  return (
    <canvas style={{ pointerEvents: "none" }} />
  );
}

canvas.addEventListener("pointerdown", (e: PointerEvent) => {
  // e.pointerType: "mouse" | "touch" | "pen"
  // e.pressure: 0~1 (펜 압력 — 마우스는 항상 0.5)
  // e.tiltX, e.tiltY: 펜 기울기

  if (e.pointerType === "pen") {
    // 압력에 따라 선 굵기 변경
    const size = baseBrushSize * e.pressure;
  }
});

canvas.addEventListener("pointerdown", (e) => {
  canvas.setPointerCapture(e.pointerId);
  // 이제 포인터가 캔버스 밖으로 나가도 pointermove 이벤트를 받음
});

interface Stroke {
  id: string;
  tool: "pen" | "highlighter" | "eraser";
  color: string;
  size: number;
  // 정규화된 좌표 배열 (0~1)
  points: Array<{ x: number; y: number; pressure?: number }>;
  // 메타데이터
  mediaType: "video" | "pdf" | "image";
  pageIndex?: number;       // PDF 전용: 몇 번째 페이지인지
  timestamp?: number;       // 비디오 전용: 몇 초 시점의 드로잉인지
  createdAt: string;
  authorId: string;
}

interface DrawingData {
  strokes: Stroke[];
  version: number;          // 동시 편집 충돌 감지용
}

function getVisibleStrokes(
  allStrokes: Stroke[],
  currentTime: number,
  tolerance: number = 0.5
): Stroke[] {
  return allStrokes.filter((stroke) => {
    if (stroke.timestamp === undefined) return true; // 전체 시간 드로잉
    return Math.abs(stroke.timestamp - currentTime) <= tolerance;
  });
}

// 완료된 스트로크를 렌더링하는 "배경" 캔버스
const backgroundCanvas = document.createElement("canvas");
const bgCtx = backgroundCanvas.getContext("2d")!;

// 현재 진행 중인 스트로크만 표시하는 "전경" 캔버스
const foregroundCanvas = document.getElementById("drawing-canvas") as HTMLCanvasElement;
const fgCtx = foregroundCanvas.getContext("2d")!;

function onStrokeComplete(stroke: Stroke) {
  // 완료된 스트로크를 배경 캔버스에 그림
  renderStroke(bgCtx, stroke);
}

function onPointerMove(currentPoints: Point[]) {
  // 전경 캔버스만 매 프레임 갱신
  fgCtx.clearRect(0, 0, foregroundCanvas.width, foregroundCanvas.height);

  // 배경을 먼저 복사
  fgCtx.drawImage(backgroundCanvas, 0, 0);

  // 진행 중인 스트로크만 위에 그림
  renderPoints(fgCtx, currentPoints);
}

let pendingPoints: Point[] = [];
let rafId: number | null = null;

canvas.addEventListener("pointermove", (e) => {
  pendingPoints.push({ x: e.clientX, y: e.clientY });

  if (rafId === null) {
    rafId = requestAnimationFrame(() => {
      // 누적된 포인트를 한 번에 처리
      drawPoints(pendingPoints);
      pendingPoints = [];
      rafId = null;
    });
  }
});

// Konva Stage는 자체 캔버스를 생성한다
<Stage
  width={containerWidth}
  height={containerHeight}
  // 드로잉 모드가 아닐 때는 이벤트를 차단해야 함
  listening={isDrawingMode}
>
  <Layer>
    {strokes.map((stroke) => (
      <Line
        key={stroke.id}
        points={stroke.points.flatMap((p) => [
          p.x * containerWidth,
          p.y * containerHeight,
        ])}
        stroke={stroke.color}
        strokeWidth={stroke.size}
        lineCap="round"
        lineJoin="round"
        // 하이라이터 효과
        opacity={stroke.tool === "highlighter" ? 0.3 : 1}
        globalCompositeOperation={
          stroke.tool === "eraser" ? "destination-out" : "source-over"
        }
      />
    ))}
  </Layer>
</Stage>