| 'use client' |
|
|
| import { useRef, useEffect, useCallback } from 'react' |
| import { useAppStore } from '@/store' |
| import { cn } from '@/utils/helpers' |
|
|
| interface ImageCanvasProps { |
| imageData: ImageData | null |
| title: string |
| width?: number |
| height?: number |
| className?: string |
| onWheel?: (e: React.WheelEvent) => void |
| onMouseDown?: (e: React.MouseEvent) => void |
| onMouseMove?: (e: React.MouseEvent) => void |
| onMouseUp?: (e: React.MouseEvent) => void |
| } |
|
|
| export function ImageCanvas({ |
| imageData, |
| title, |
| width = 400, |
| height = 300, |
| className, |
| onWheel, |
| onMouseDown, |
| onMouseMove, |
| onMouseUp, |
| }: ImageCanvasProps) { |
| const canvasRef = useRef<HTMLCanvasElement>(null) |
| const { settings } = useAppStore() |
|
|
| const drawCanvas = useCallback(() => { |
| const canvas = canvasRef.current |
| const ctx = canvas?.getContext('2d', { willReadFrequently: true }) |
| if (!canvas || !ctx || !imageData) return |
|
|
| const { zoomLevel, panOffset } = settings |
| const displayWidth = Math.round(imageData.width * zoomLevel) |
| const displayHeight = Math.round(imageData.height * zoomLevel) |
|
|
| canvas.width = displayWidth |
| canvas.height = displayHeight |
|
|
| ctx.clearRect(0, 0, displayWidth, displayHeight) |
| ctx.imageSmoothingEnabled = zoomLevel < 2 |
|
|
| const tempCanvas = document.createElement('canvas') |
| tempCanvas.width = imageData.width |
| tempCanvas.height = imageData.height |
| const tempCtx = tempCanvas.getContext('2d') |
| if (tempCtx) { |
| tempCtx.putImageData(imageData, 0, 0) |
| ctx.drawImage( |
| tempCanvas, |
| 0, |
| 0, |
| imageData.width, |
| imageData.height, |
| panOffset.x, |
| panOffset.y, |
| displayWidth, |
| displayHeight |
| ) |
| } |
|
|
| |
| if (zoomLevel >= 4) { |
| drawGrid(ctx, imageData.width, imageData.height, zoomLevel, panOffset) |
| } |
| }, [imageData, settings.zoomLevel, settings.panOffset]) |
|
|
| useEffect(() => { |
| drawCanvas() |
| }, [drawCanvas]) |
|
|
| return ( |
| <div className={cn('relative bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden', className)}> |
| <div className="absolute top-2 left-2 z-10 px-2 py-1 bg-black/50 text-white text-xs rounded"> |
| {title} |
| </div> |
| <canvas |
| ref={canvasRef} |
| width={width} |
| height={height} |
| className="block cursor-grab active:cursor-grabbing" |
| style={{ touchAction: 'none' }} |
| onWheel={onWheel} |
| onMouseDown={onMouseDown} |
| onMouseMove={onMouseMove} |
| onMouseUp={onMouseUp} |
| /> |
| </div> |
| ) |
| } |
|
|
| function drawGrid( |
| ctx: CanvasRenderingContext2D, |
| imgWidth: number, |
| imgHeight: number, |
| zoom: number, |
| pan: { x: number; y: number } |
| ) { |
| ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)' |
| ctx.lineWidth = 0.5 |
|
|
| for (let x = 0; x <= imgWidth; x++) { |
| const px = pan.x + x * zoom |
| ctx.beginPath() |
| ctx.moveTo(px, 0) |
| ctx.lineTo(px, imgHeight * zoom) |
| ctx.stroke() |
| } |
|
|
| for (let y = 0; y <= imgHeight; y++) { |
| const py = pan.y + y * zoom |
| ctx.beginPath() |
| ctx.moveTo(0, py) |
| ctx.lineTo(imgWidth * zoom, py) |
| ctx.stroke() |
| } |
| } |
