mjpic 1.0.0

package/src/components/layout/CanvasArea.tsx

@@ -0,0 +1,874 @@
+import { useEffect, useRef, useState, useLayoutEffect } from 'react';
+import { Stage, Layer, Image as KonvaImage, Rect, Transformer, Group, Line } from 'react-konva';
+import useImage from 'use-image';
+import { useImageStore } from '@/store/useImageStore';
+import { useUIStore } from '@/store/useUIStore';
+import Konva from 'konva';
+import { useTranslation } from 'react-i18next';
+
+interface CanvasAreaProps {
+  stageRef: React.MutableRefObject<Konva.Stage | null>;
+}
+
+export const CanvasArea = ({ stageRef }: CanvasAreaProps) => {
+  const { previewImage, config, loadImage, setOriginalSize, originalWidth, originalHeight, cropRect, setCropRect, updateConfig } = useImageStore();
+  const { isStraightenToolActive, setStraightenToolActive, activeTool } = useUIStore();
+  const [image] = useImage(previewImage || '', 'anonymous');
+  const imageRef = useRef<Konva.Image>(null);
+  const { t } = useTranslation();
+  
+  const [stageSize, setStageSize] = useState({ width: 0, height: 0 });
+  const containerRef = useRef<HTMLDivElement>(null);
+  
+  const cropRectRef = useRef<Konva.Rect>(null);
+  const cropGroupRef = useRef<Konva.Group>(null);
+  const transformerRef = useRef<Konva.Transformer>(null);
+  
+  const lastAspectRatioRef = useRef<string | undefined>(undefined);
+  const isTransformingRef = useRef(false);
+  const imgDimensionsRef = useRef({ width: 0, height: 0 });
+
+  // Straighten Tool State
+  const [straightenLine, setStraightenLine] = useState<{ start: {x: number, y: number}, end: {x: number, y: number} } | null>(null);
+  const isDrawingStraightenLine = useRef(false);
+  
+  const hasCrop = config.crop && config.crop.aspectRatio;
+  const isFreeCrop = config.crop?.aspectRatio === 'Free';
+  
+  // Define variables at the top level of the render function
+  let imgWidth = 0;
+  let imgHeight = 0;
+  let scale = 1;
+  let displayWidth = 0;
+  let displayHeight = 0;
+  
+  // Content variables (Image + Border)
+  let contentX = 0;
+  let contentY = 0;
+  let totalWidth = 0;
+  let totalHeight = 0;
+  let displayTotalWidth = 0;
+  let displayTotalHeight = 0;
+  
+  // Border vars
+  let borderW = 0;
+  let borderH = 0;
+  let displayBorderW = 0;
+  let displayBorderH = 0;
+  
+  if (image) {
+    const hasResize = config.resize && config.resize.width > 0 && config.resize.height > 0;
+    
+    // 1. Determine base image size
+    if (hasResize) {
+      imgWidth = config.resize.width;
+      imgHeight = config.resize.height;
+    } else {
+      imgWidth = image.width;
+      imgHeight = image.height;
+    }
+    
+    // 2. Calculate border size
+    if (config.border) {
+        // Use default values to prevent undefined issues
+        const { size = 0, applyHorizontal = true, applyVertical = false } = config.border;
+        if (size > 0) {
+            if (applyHorizontal) borderW = imgWidth * (size / 100);
+            if (applyVertical) borderH = imgHeight * (size / 100);
+        }
+    }
+    
+    totalWidth = imgWidth + borderW * 2;
+    totalHeight = imgHeight + borderH * 2;
+    
+    // 3. Calculate scale based on TOTAL size
+    if (stageSize.width > 0 && stageSize.height > 0) {
+      const scaleX = (stageSize.width - 40) / totalWidth;
+      const scaleY = (stageSize.height - 40) / totalHeight;
+      scale = Math.min(scaleX, scaleY, 1);
+    }
+    
+    // 4. Calculate display sizes
+    displayWidth = imgWidth * scale;
+    displayHeight = imgHeight * scale;
+    displayBorderW = borderW * scale;
+    displayBorderH = borderH * scale;
+    
+    displayTotalWidth = totalWidth * scale;
+    displayTotalHeight = totalHeight * scale;
+    
+    // 5. Calculate positions (centered)
+    const cx = stageSize.width / 2;
+    const cy = stageSize.height / 2;
+    
+    // Content Top-Left (including border)
+    contentX = cx - displayTotalWidth / 2;
+    contentY = cy - displayTotalHeight / 2;
+  }
+  
+  useEffect(() => {
+    if (image && image.width && image.height) {
+      setOriginalSize(image.width, image.height);
+      imgDimensionsRef.current = { width: image.width, height: image.height };
+    }
+  }, [image, setOriginalSize]);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    const files = e.dataTransfer.files;
+    if (files && files.length > 0) {
+      const file = files[0];
+      if (file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+          if (event.target?.result) {
+            loadImage(event.target.result as string);
+          }
+        };
+        reader.readAsDataURL(file);
+      }
+    }
+  };
+
+  useLayoutEffect(() => {
+    const updateSize = () => {
+      if (containerRef.current) {
+        const { offsetWidth, offsetHeight } = containerRef.current;
+        if (offsetWidth > 0 && offsetHeight > 0) {
+            setStageSize({
+              width: offsetWidth,
+              height: offsetHeight
+            });
+        }
+      }
+    };
+    
+    updateSize();
+
+    const resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(updateSize);
+    });
+
+    if (containerRef.current) {
+        resizeObserver.observe(containerRef.current);
+    }
+    
+    window.addEventListener('resize', updateSize);
+    
+    return () => {
+        window.removeEventListener('resize', updateSize);
+        resizeObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (image && containerRef.current) {
+        setStageSize({
+            width: containerRef.current.offsetWidth,
+            height: containerRef.current.offsetHeight
+        });
+        
+        requestAnimationFrame(() => {
+            if (stageRef.current) {
+                stageRef.current.batchDraw();
+            }
+        });
+    }
+  }, [image]);
+
+  useEffect(() => {
+    if (image && imageRef.current) {
+        const node = imageRef.current;
+        
+        node.clearCache();
+        
+        const filters = [];
+        
+        if (config.brightness !== 0) filters.push(Konva.Filters.Brighten);
+        if (config.contrast !== 0) filters.push(Konva.Filters.Contrast);
+        
+        if (config.sharpness > 0) {
+            // @ts-ignore
+            const sharpnessFilter = function(imageData) {
+                const amount = config.sharpness / 100;
+                if (amount <= 0) return;
+
+                const data = imageData.data;
+                const width = imageData.width;
+                const height = imageData.height;
+                const oldData = new Uint8ClampedArray(data);
+                
+                const center = 1 + 4 * amount;
+                const neighbor = -amount;
+                
+                for (let i = 1; i < height - 1; i++) {
+                    for (let j = 1; j < width - 1; j++) {
+                        const idx = (i * width + j) * 4;
+                        const up = idx - width * 4;
+                        const down = idx + width * 4;
+                        const left = idx - 4;
+                        const right = idx + 4;
+                        
+                        for (let k = 0; k < 3; k++) { 
+                           const val = 
+                             oldData[idx + k] * center +
+                             (oldData[up + k] + oldData[down + k] + oldData[left + k] + oldData[right + k]) * neighbor;
+                           data[idx + k] = val;
+                        }
+                    }
+                }
+            };
+            
+            filters.push(sharpnessFilter);
+        }
+
+        // Auto Enhance - 全面提升图片质量（优化版本）
+        if (config.enhancements?.autoEnhance) {
+            // @ts-ignore
+            const autoEnhanceFilter = function(imageData) {
+                const data = imageData.data;
+                const width = imageData.width;
+                const height = imageData.height;
+                const pixelCount = width * height;
+                
+                // 使用采样来加速统计（每8个像素采样一次）
+                const sampleStep = 8;
+                let sumR = 0, sumG = 0, sumB = 0;
+                let minVal = 255, maxVal = 0;
+                let totalLuminance = 0;
+                let sampleCount = 0;
+                
+                for (let i = 0; i < data.length; i += 4 * sampleStep) {
+                    const r = data[i], g = data[i+1], b = data[i+2];
+                    sumR += r; sumG += g; sumB += b;
+                    const lum = 0.299 * r + 0.587 * g + 0.114 * b;
+                    if (lum < minVal) minVal = lum;
+                    if (lum > maxVal) maxVal = lum;
+                    totalLuminance += lum;
+                    sampleCount++;
+                }
+                
+                const avgR = sumR / sampleCount;
+                const avgG = sumG / sampleCount;
+                const avgB = sumB / sampleCount;
+                const avgLuminance = totalLuminance / sampleCount;
+                
+                // 白平衡校正
+                const wbR = avgG / (avgR || 1);
+                const wbB = avgG / (avgB || 1);
+                
+                // 计算调整参数
+                let brightnessAdjust = 0;
+                if (avgLuminance < 100) brightnessAdjust = (100 - avgLuminance) * 0.15;
+                else if (avgLuminance > 160) brightnessAdjust = -(avgLuminance - 160) * 0.1;
+                
+                const contrastAdjust = (maxVal - minVal) < 150 ? 15 : 8;
+                const contrastFactor = (259 * (contrastAdjust + 255)) / (255 * (259 - contrastAdjust));
+                
+                // 使用采样应用效果
+                const applyStep = 4; // 逐像素处理
+                for (let i = 0; i < data.length; i += 4) {
+                    // 白平衡
+                    data[i] = Math.min(255, data[i] * wbR);
+                    data[i+2] = Math.min(255, data[i+2] * wbB);
+                    
+                    // 亮度+对比度
+                    const lum = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
+                    const newLum = lum + brightnessAdjust;
+                    const contrastLum = contrastFactor * (newLum - 128) + 128;
+                    const ratio = contrastLum / (lum || 1);
+                    
+                    data[i] = Math.min(255, data[i] * ratio);
+                    data[i+1] = Math.min(255, data[i+1] * ratio);
+                    data[i+2] = Math.min(255, data[i+2] * ratio);
+                    
+                    // 饱和度提升
+                    const gray = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
+                    const sat = 1.15;
+                    data[i] = Math.min(255, gray + (data[i] - gray) * sat);
+                    data[i+1] = Math.min(255, gray + (data[i+1] - gray) * sat);
+                    data[i+2] = Math.min(255, gray + (data[i+2] - gray) * sat);
+                }
+                
+                // 简化锐化（只处理边缘像素）
+                const oldData = new Uint8ClampedArray(data);
+                const sharpenAmount = 0.3;
+                const center = 1 + 4 * sharpenAmount;
+                const neighbor = -sharpenAmount;
+                
+                for (let y = 1; y < height - 1; y += 2) {
+                    for (let x = 1; x < width - 1; x += 2) {
+                        const idx = (y * width + x) * 4;
+                        const upIdx = ((y - 1) * width + x) * 4;
+                        const downIdx = ((y + 1) * width + x) * 4;
+                        const leftIdx = (y * width + (x - 1)) * 4;
+                        const rightIdx = (y * width + (x + 1)) * 4;
+                        
+                        for (let k = 0; k < 3; k++) {
+                            const val = oldData[idx + k] * center +
+                                      (oldData[upIdx + k] + oldData[downIdx + k] + 
+                                       oldData[leftIdx + k] + oldData[rightIdx + k]) * neighbor;
+                            data[idx + k] = Math.min(255, Math.max(0, val));
+                        }
+                    }
+                }
+            };
+            filters.push(autoEnhanceFilter);
+        }
+
+        // Fill Light - 一键补光（优化版本）
+        if (config.enhancements?.fillLight) {
+            // @ts-ignore
+            const fillLightFilter = function(imageData) {
+                const data = imageData.data;
+                const width = imageData.width;
+                const height = imageData.height;
+                
+                // 采样统计暗部占比
+                const sampleStep = 8;
+                let darkPixels = 0;
+                let totalLuminance = 0;
+                let sampleCount = 0;
+                
+                for (let i = 0; i < data.length; i += 4 * sampleStep) {
+                    const lum = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
+                    if (lum < 80) darkPixels++;
+                    totalLuminance += lum;
+                    sampleCount++;
+                }
+                
+                const darkRatio = darkPixels / sampleCount;
+                
+                // 根据暗部占比计算伽马值
+                let gamma;
+                if (darkRatio > 0.5) gamma = 0.6;
+                else if (darkRatio > 0.3) gamma = 0.7;
+                else gamma = 0.85;
+                
+                // 构建伽马查找表
+                const gammaLUT = new Array(256);
+                for (let i = 0; i < 256; i++) {
+                    gammaLUT[i] = Math.pow(i / 255, gamma) * 255;
+                }
+                
+                // 应用补光
+                for (let i = 0; i < data.length; i += 4) {
+                    const lum = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
+                    
+                    let weight;
+                    if (lum < 80) weight = 0.7;
+                    else if (lum < 160) weight = 0.4;
+                    else weight = 0.1;
+                    
+                    const correctedR = gammaLUT[data[i]];
+                    const correctedG = gammaLUT[data[i+1]];
+                    const correctedB = gammaLUT[data[i+2]];
+                    
+                    data[i] = Math.min(245, data[i] + (correctedR - data[i]) * weight);
+                    data[i+1] = Math.min(245, data[i+1] + (correctedG - data[i+1]) * weight);
+                    data[i+2] = Math.min(245, data[i+2] + (correctedB - data[i+2]) * weight);
+                }
+            };
+            filters.push(fillLightFilter);
+        }
+
+        // Auto White Balance - adjust color temperature
+        if (config.enhancements?.autoWhiteBalance) {
+            // @ts-ignore
+            const whiteBalanceFilter = function(imageData) {
+                const data = imageData.data;
+                const width = imageData.width;
+                const height = imageData.height;
+                
+                // Calculate average of each channel
+                let avgR = 0, avgG = 0, avgB = 0;
+                const pixelCount = width * height;
+                
+                for (let i = 0; i < data.length; i += 4) {
+                    avgR += data[i];
+                    avgG += data[i+1];
+                    avgB += data[i+2];
+                }
+                
+                avgR /= pixelCount;
+                avgG /= pixelCount;
+                avgB /= pixelCount;
+                
+                // Calculate correction factors (normalize to green channel)
+                const correctionR = avgG / (avgR || 1);
+                const correctionB = avgG / (avgB || 1);
+                
+                // Apply white balance
+                for (let i = 0; i < data.length; i += 4) {
+                    data[i] = Math.min(255, Math.max(0, data[i] * correctionR));
+                    data[i+1] = data[i+1]; // Green stays the same
+                    data[i+2] = Math.min(255, Math.max(0, data[i+2] * correctionB));
+                }
+            };
+            filters.push(whiteBalanceFilter);
+        }
+        
+        node.filters(filters);
+        
+        node.brightness(config.brightness / 100);
+        node.contrast(config.contrast);
+
+        if (filters.length > 0) {
+            try {
+                node.cache({
+                    pixelRatio: 1
+                });
+            } catch (e) {
+                console.error('Failed to cache image:', e);
+            }
+        }
+        
+        node.getLayer()?.batchDraw();
+    }
+
+    return () => {
+        if (imageRef.current) {
+            imageRef.current.clearCache();
+        }
+    };
+  }, [config, image]);
+
+  useEffect(() => {
+    if (transformerRef.current && cropGroupRef.current && hasCrop) {
+      requestAnimationFrame(() => {
+        if (transformerRef.current && cropGroupRef.current) {
+          transformerRef.current.nodes([cropGroupRef.current]);
+          transformerRef.current.getLayer()?.batchDraw();
+        }
+      });
+    }
+  }, [hasCrop]);
+  
+  // 这个 useEffect 只在 aspectRatio 真正变化时初始化裁剪框
+  useEffect(() => {
+    const currentAspectRatio = config.crop?.aspectRatio;
+    
+    // 如果没有裁剪，重置状态并返回
+    if (!currentAspectRatio) {
+      lastAspectRatioRef.current = undefined;
+      return;
+    }
+    
+    // 如果 aspect ratio 没变，直接返回（避免覆盖用户手动调整）
+    if (currentAspectRatio === lastAspectRatioRef.current) {
+      return;
+    }
+    
+    // 如果用户正在调整，直接返回（避免冲突）
+    if (isTransformingRef.current) {
+      return;
+    }
+    
+    // 如果没有加载图片或图片尺寸为0，直接返回
+    if (!image || image.width === 0 || image.height === 0) {
+      return;
+    }
+    
+    // 更新引用，标记当前 aspectRatio 已处理
+    lastAspectRatioRef.current = currentAspectRatio;
+    
+    // Calculate based on TOTAL size (Image + Border)
+    // NOTE: We recalculate these here because we need the latest values
+    let currentImgWidth = image.width;
+    let currentImgHeight = image.height;
+    
+    if (config.resize && config.resize.width > 0 && config.resize.height > 0) {
+        currentImgWidth = config.resize.width;
+        currentImgHeight = config.resize.height;
+    }
+    
+    let currentBorderW = 0;
+    let currentBorderH = 0;
+    if (config.border) {
+        const { size = 0, applyHorizontal = true, applyVertical = false } = config.border;
+        if (size > 0) {
+            if (applyHorizontal) currentBorderW = currentImgWidth * (size / 100);
+            if (applyVertical) currentBorderH = currentImgHeight * (size / 100);
+        }
+    }
+    
+    const targetTotalWidth = currentImgWidth + currentBorderW * 2;
+    const targetTotalHeight = currentImgHeight + currentBorderH * 2;
+    
+    if (currentAspectRatio === 'Free') {
+      setCropRect({
+        x: Math.round(targetTotalWidth * 0.1),
+        y: Math.round(targetTotalHeight * 0.1),
+        width: Math.round(targetTotalWidth * 0.8),
+        height: Math.round(targetTotalHeight * 0.8)
+      });
+    } else {
+      const aspectRatioParts = currentAspectRatio.split(':');
+      const ratioW = parseInt(aspectRatioParts[0]);
+      const ratioH = parseInt(aspectRatioParts[1]);
+      const targetRatio = ratioW / ratioH;
+      const currentRatio = targetTotalWidth / targetTotalHeight;
+      
+      let cropW, cropH;
+      if (currentRatio > targetRatio) {
+        cropH = targetTotalHeight;
+        cropW = Math.round(targetTotalHeight * targetRatio);
+      } else {
+        cropW = targetTotalWidth;
+        cropH = Math.round(targetTotalWidth / targetRatio);
+      }
+      
+      setCropRect({
+        x: Math.round((targetTotalWidth - cropW) / 2),
+        y: Math.round((targetTotalHeight - cropH) / 2),
+        width: cropW,
+        height: cropH
+      });
+    }
+  }, [config.crop?.aspectRatio, image?.width, image?.height, config.border, config.resize]); // Added config.border and config.resize dependency
+
+  const handleStageMouseDown = (e: Konva.KonvaEventObject<MouseEvent>) => {
+    if (!isStraightenToolActive) return;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos) {
+        isDrawingStraightenLine.current = true;
+        setStraightenLine({ start: pos, end: pos });
+    }
+  };
+
+  const handleStageMouseMove = (e: Konva.KonvaEventObject<MouseEvent>) => {
+    if (!isDrawingStraightenLine.current || !straightenLine) return;
+    const pos = e.target.getStage()?.getPointerPosition();
+    if (pos) {
+        setStraightenLine(prev => prev ? { ...prev, end: pos } : null);
+    }
+  };
+
+  const handleStageMouseUp = () => {
+    if (!isDrawingStraightenLine.current || !straightenLine) return;
+    isDrawingStraightenLine.current = false;
+    
+    const dx = straightenLine.end.x - straightenLine.start.x;
+    const dy = straightenLine.end.y - straightenLine.start.y;
+    
+    if (Math.sqrt(dx*dx + dy*dy) > 10) {
+        const angleRad = Math.atan2(dy, dx);
+        let angleDeg = angleRad * (180 / Math.PI);
+        
+        // Calculate new rotation
+        let newRot = config.rotation - angleDeg;
+        
+        // Normalize to -180 ~ 180
+        // First mod to -360 ~ 360 range
+        newRot = newRot % 360;
+        // Then adjust to -180 ~ 180
+        if (newRot > 180) newRot -= 360;
+        if (newRot <= -180) newRot += 360;
+        
+        updateConfig({ rotation: newRot });
+    }
+    
+    setStraightenLine(null);
+    // Don't exit straighten mode automatically
+    // setStraightenToolActive(false);
+  };
+
+  if (!previewImage) {
+    return (
+      <div 
+        className="flex-1 flex items-center justify-center bg-zinc-950 text-zinc-500"
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+      >
+        {t('common.dragDrop')}
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      className="flex-1 bg-zinc-950 overflow-hidden relative" 
+      ref={containerRef}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+    >
+      <Stage 
+        width={stageSize.width} 
+        height={stageSize.height} 
+        ref={stageRef}
+        onMouseDown={handleStageMouseDown}
+        onMouseMove={handleStageMouseMove}
+        onMouseUp={handleStageMouseUp}
+        style={{ cursor: isStraightenToolActive ? 'crosshair' : 'default' }}
+      >
+        <Layer>
+          {image && (
+            <Group
+                id="content-group"
+                x={stageSize.width / 2}
+                y={stageSize.height / 2}
+                rotation={config.rotation}
+            >
+                {(displayBorderW > 0 || displayBorderH > 0) && (
+                    <Rect
+                        width={displayWidth + displayBorderW * 2}
+                        height={displayHeight + displayBorderH * 2}
+                        offsetX={(displayWidth + displayBorderW * 2) / 2}
+                        offsetY={(displayHeight + displayBorderH * 2) / 2}
+                        fill={config.border?.color || '#ffffff'}
+                        listening={false}
+                    />
+                )}
+                
+                <KonvaImage
+                  image={image}
+                  ref={imageRef}
+                  x={0}
+                  y={0}
+                  width={imgWidth}
+                  height={imgHeight}
+                  scaleX={scale}
+                  scaleY={scale}
+                  offsetX={imgWidth / 2}
+                  offsetY={imgHeight / 2}
+                />
+            </Group>
+          )}
+          
+          {/* Crop Overlay - covers TOTAL content (Image + Border) */}
+          {image && hasCrop && displayTotalWidth > 0 && displayTotalHeight > 0 && (
+            <Group>
+              <Rect
+                x={contentX}
+                y={contentY}
+                width={displayTotalWidth}
+                height={displayTotalHeight}
+                fill="rgba(0, 0, 0, 0.5)"
+                listening={false}
+              />
+              
+              <Group
+                ref={cropGroupRef}
+                x={contentX + cropRect.x * scale}
+                y={contentY + cropRect.y * scale}
+                draggable
+                dragBoundFunc={(pos) => {
+                  const imgLeft = contentX;
+                  const imgTop = contentY;
+                  const imgRight = contentX + displayTotalWidth;
+                  const imgBottom = contentY + displayTotalHeight;
+                  
+                  // Use current scale of the group (if transforming) or 1
+                  const groupScaleX = cropGroupRef.current?.scaleX() || 1;
+                  const groupScaleY = cropGroupRef.current?.scaleY() || 1;
+                  
+                  const cropW = cropRect.width * scale * groupScaleX;
+                  const cropH = cropRect.height * scale * groupScaleY;
+                  
+                  return {
+                    x: Math.max(imgLeft, Math.min(pos.x, imgRight - cropW)),
+                    y: Math.max(imgTop, Math.min(pos.y, imgBottom - cropH))
+                  };
+                }}
+                onDragStart={() => {
+                  isTransformingRef.current = true;
+                }}
+                onDragMove={(e) => {
+                  const node = e.target;
+                  const newX = (node.x() - contentX) / scale;
+                  const newY = (node.y() - contentY) / scale;
+                  setCropRect({ ...cropRect, x: newX, y: newY });
+                }}
+                onDragEnd={() => {
+                  setTimeout(() => {
+                    isTransformingRef.current = false;
+                  }, 50);
+                }}
+                onTransformStart={() => {
+                  isTransformingRef.current = true;
+                }}
+                onTransformEnd={(e) => {
+                  const node = e.target;
+                  const scaleX = node.scaleX();
+                  const scaleY = node.scaleY();
+                  
+                  node.scaleX(1);
+                  node.scaleY(1);
+                  
+                  // Base size comes from current cropRect state * display scale
+                  const baseWidth = cropRect.width * scale;
+                  const baseHeight = cropRect.height * scale;
+                  
+                  let newWidth = Math.max(20, baseWidth * scaleX);
+                  let newHeight = Math.max(20, baseHeight * scaleY);
+                  
+                  if (!isFreeCrop && config.crop?.aspectRatio) {
+                    const aspectRatioParts = config.crop.aspectRatio.split(':');
+                    const ratioW = parseInt(aspectRatioParts[0]);
+                    const ratioH = parseInt(aspectRatioParts[1]);
+                    const targetRatio = ratioW / ratioH;
+                    
+                    if (scaleX > scaleY) {
+                      newHeight = newWidth / targetRatio;
+                    } else {
+                      newWidth = newHeight * targetRatio;
+                    }
+                  }
+                  
+                  // Constrain to TOTAL width/height
+                  const maxX = totalWidth - newWidth / scale;
+                  const maxY = totalHeight - newHeight / scale;
+                  const newX = Math.min(Math.max(0, (node.x() - contentX) / scale), maxX);
+                  const newY = Math.min(Math.max(0, (node.y() - contentY) / scale), maxY);
+                  
+                  setCropRect({
+                    x: newX,
+                    y: newY,
+                    width: newWidth / scale,
+                    height: newHeight / scale
+                  });
+                  
+                  lastAspectRatioRef.current = config.crop?.aspectRatio;
+                  
+                  setTimeout(() => {
+                    isTransformingRef.current = false;
+                  }, 50);
+                }}
+              >
+                  {/* Crop Border */}
+                  <Rect
+                    width={cropRect.width * scale}
+                    height={cropRect.height * scale}
+                    stroke="#3b82f6"
+                    strokeWidth={2}
+                    fill="transparent"
+                  />
+                  
+                  {/* Crop Grid Lines */}
+                  <Line 
+                    points={[0, (cropRect.height * scale)/3, cropRect.width * scale, (cropRect.height * scale)/3]} 
+                    stroke="rgba(255, 255, 255, 0.5)" 
+                    strokeWidth={1} 
+                    listening={false}
+                  />
+                  <Line 
+                    points={[0, (cropRect.height * scale)*2/3, cropRect.width * scale, (cropRect.height * scale)*2/3]} 
+                    stroke="rgba(255, 255, 255, 0.5)" 
+                    strokeWidth={1} 
+                    listening={false}
+                  />
+                  <Line 
+                    points={[(cropRect.width * scale)/3, 0, (cropRect.width * scale)/3, cropRect.height * scale]} 
+                    stroke="rgba(255, 255, 255, 0.5)" 
+                    strokeWidth={1} 
+                    listening={false}
+                  />
+                  <Line 
+                    points={[(cropRect.width * scale)*2/3, 0, (cropRect.width * scale)*2/3, cropRect.height * scale]} 
+                    stroke="rgba(255, 255, 255, 0.5)" 
+                    strokeWidth={1} 
+                    listening={false}
+                  />
+              </Group>
+              
+              <Transformer
+                ref={transformerRef}
+                enabledAnchors={isFreeCrop 
+                  ? ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right', 'top-center', 'bottom-center']
+                  : ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+                }
+                boundBoxFunc={(oldBox, newBox) => {
+                  if (newBox.width < 20 || newBox.height < 20) {
+                    return oldBox;
+                  }
+                  
+                  if (!isFreeCrop && config.crop?.aspectRatio) {
+                    const aspectRatioParts = config.crop.aspectRatio.split(':');
+                    const ratioW = parseInt(aspectRatioParts[0]);
+                    const ratioH = parseInt(aspectRatioParts[1]);
+                    const targetRatio = ratioW / ratioH;
+                    
+                    if (Math.abs(newBox.width - oldBox.width) > Math.abs(newBox.height - oldBox.height)) {
+                      newBox.height = newBox.width / targetRatio;
+                    } else {
+                      newBox.width = newBox.height * targetRatio;
+                    }
+                  }
+                  
+                  const relX = newBox.x - contentX;
+                  const relY = newBox.y - contentY;
+                  if (relX < -5 || relY < -5 || 
+                      relX + newBox.width > displayTotalWidth + 5 ||
+                      relY + newBox.height > displayTotalHeight + 5) {
+                    return oldBox;
+                  }
+                  
+                  return newBox;
+                }}
+              />
+            </Group>
+          )}
+          
+          {/* Rotation Grid Overlay - covers TOTAL content */}
+          {activeTool === 'rotate' && displayTotalWidth > 0 && displayTotalHeight > 0 && (
+            <Group 
+                x={contentX} 
+                y={contentY} 
+                width={displayTotalWidth} 
+                height={displayTotalHeight}
+                listening={false}
+            >
+                {/* Outer Border */}
+                <Rect 
+                    width={displayTotalWidth} 
+                    height={displayTotalHeight} 
+                    stroke="rgba(255, 255, 255, 0.5)" 
+                    strokeWidth={1} 
+                />
+                
+                {/* Horizontal Lines */}
+                <Line 
+                    points={[0, displayTotalHeight/3, displayTotalWidth, displayTotalHeight/3]} 
+                    stroke="rgba(255, 255, 255, 0.3)" 
+                    strokeWidth={1} 
+                />
+                <Line 
+                    points={[0, displayTotalHeight*2/3, displayTotalWidth, displayTotalHeight*2/3]} 
+                    stroke="rgba(255, 255, 255, 0.3)" 
+                    strokeWidth={1} 
+                />
+                
+                {/* Vertical Lines */}
+                <Line 
+                    points={[displayTotalWidth/3, 0, displayTotalWidth/3, displayTotalHeight]} 
+                    stroke="rgba(255, 255, 255, 0.3)" 
+                    strokeWidth={1} 
+                />
+                <Line 
+                    points={[displayTotalWidth*2/3, 0, displayTotalWidth*2/3, displayTotalHeight]} 
+                    stroke="rgba(255, 255, 255, 0.3)" 
+                    strokeWidth={1} 
+                />
+            </Group>
+          )}
+          
+          {straightenLine && (
+            <Line
+                points={[straightenLine.start.x, straightenLine.start.y, straightenLine.end.x, straightenLine.end.y]}
+                stroke="#3b82f6"
+                strokeWidth={2}
+                dash={[5, 5]}
+            />
+          )}
+        </Layer>
+      </Stage>
+    </div>
+  );
+};