@umituz/react-native-image 1.1.5 → 1.2.1

package/src/infrastructure/utils/ShapeRenderer.ts

@@ -0,0 +1,168 @@
+/**
+ * Infrastructure - Shape Renderer
+ * 
+ * Advanced shape drawing with different styles
+ */
+
+export interface ShapeStyle {
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  dash?: number[];
+  opacity?: number;
+}
+
+export class ShapeRenderer {
+  static drawRoundedRect(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+    style: ShapeStyle
+  ): void {
+    ctx.save();
+    
+    ctx.globalAlpha = style.opacity || 1;
+    ctx.strokeStyle = style.stroke || '#000000';
+    ctx.fillStyle = style.fill || 'transparent';
+    ctx.lineWidth = style.strokeWidth || 2;
+    
+    if (style.dash) {
+      ctx.setLineDash(style.dash);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+
+    if (style.fill) ctx.fill();
+    if (style.stroke) ctx.stroke();
+
+    ctx.restore();
+  }
+
+  static drawStar(
+    ctx: CanvasRenderingContext2D,
+    cx: number,
+    cy: number,
+    outerRadius: number,
+    innerRadius: number,
+    points: number,
+    style: ShapeStyle
+  ): void {
+    ctx.save();
+    
+    ctx.globalAlpha = style.opacity || 1;
+    ctx.strokeStyle = style.stroke || '#000000';
+    ctx.fillStyle = style.fill || 'transparent';
+    ctx.lineWidth = style.strokeWidth || 2;
+
+    ctx.beginPath();
+    for (let i = 0; i < points * 2; i++) {
+      const angle = (Math.PI * i) / points - Math.PI / 2;
+      const radius = i % 2 === 0 ? outerRadius : innerRadius;
+      const x = cx + Math.cos(angle) * radius;
+      const y = cy + Math.sin(angle) * radius;
+
+      if (i === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    }
+    ctx.closePath();
+
+    if (style.fill) ctx.fill();
+    if (style.stroke) ctx.stroke();
+
+    ctx.restore();
+  }
+
+  static drawHeart(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    size: number,
+    style: ShapeStyle
+  ): void {
+    ctx.save();
+    
+    ctx.globalAlpha = style.opacity || 1;
+    ctx.strokeStyle = style.stroke || '#000000';
+    ctx.fillStyle = style.fill || 'transparent';
+    ctx.lineWidth = style.strokeWidth || 2;
+
+    ctx.beginPath();
+    const topCurveHeight = size * 0.3;
+    ctx.moveTo(x, y + topCurveHeight);
+
+    // Top left curve
+    ctx.bezierCurveTo(
+      x, y,
+      x - size / 2, y,
+      x - size / 2, y + topCurveHeight
+    );
+
+    // Bottom left curve
+    ctx.bezierCurveTo(
+      x - size / 2, y + (size + topCurveHeight) / 2,
+      x, y + (size + topCurveHeight) / 1.5,
+      x, y + size
+    );
+
+    // Bottom right curve
+    ctx.bezierCurveTo(
+      x, y + (size + topCurveHeight) / 1.5,
+      x + size / 2, y + (size + topCurveHeight) / 2,
+      x + size / 2, y + topCurveHeight
+    );
+
+    // Top right curve
+    ctx.bezierCurveTo(
+      x + size / 2, y,
+      x, y,
+      x, y + topCurveHeight
+    );
+
+    ctx.closePath();
+
+    if (style.fill) ctx.fill();
+    if (style.stroke) ctx.stroke();
+
+    ctx.restore();
+  }
+
+  static drawTriangle(
+    ctx: CanvasRenderingContext2D,
+    points: Array<{ x: number; y: number }>,
+    style: ShapeStyle
+  ): void {
+    ctx.save();
+    
+    ctx.globalAlpha = style.opacity || 1;
+    ctx.strokeStyle = style.stroke || '#000000';
+    ctx.fillStyle = style.fill || 'transparent';
+    ctx.lineWidth = style.strokeWidth || 2;
+
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, points[0].y);
+    ctx.lineTo(points[1].x, points[1].y);
+    ctx.lineTo(points[2].x, points[2].y);
+    ctx.closePath();
+
+    if (style.fill) ctx.fill();
+    if (style.stroke) ctx.stroke();
+
+    ctx.restore();
+  }
+}

package/src/infrastructure/utils/TextEditor.ts

@@ -0,0 +1,273 @@
+/**
+ * Infrastructure - Text Editor
+ * 
+ * Advanced text editing with rich formatting
+ */
+
+export interface TextFormatting {
+  fontSize: number;
+  fontFamily: string;
+  fontWeight: 'normal' | 'bold';
+  fontStyle: 'normal' | 'italic';
+  textAlign: 'left' | 'center' | 'right';
+  color: string;
+  backgroundColor?: string;
+  opacity: number;
+  lineHeight?: number;
+  letterSpacing?: number;
+  textShadow?: {
+    color: string;
+    blur: number;
+    offsetX: number;
+    offsetY: number;
+  };
+  textStroke?: {
+    color: string;
+    width: number;
+  };
+}
+
+export interface TextMeasurement {
+  width: number;
+  height: number;
+  baseline: number;
+}
+
+export class TextEditor {
+  private static systemFonts = [
+    'Arial',
+    'Helvetica',
+    'Times New Roman',
+    'Georgia',
+    'Courier New',
+    'Verdana',
+    'Comic Sans MS',
+    'Impact',
+    'Palatino',
+    'Garamond',
+    'Bookman',
+    'Trebuchet MS',
+  ];
+
+  private static getFontFamily(fontFamily: string): string {
+    // Check if font is available, fallback to system font
+    return this.systemFonts.includes(fontFamily) ? fontFamily : 'Arial';
+  }
+
+  static measureText(
+    text: string,
+    formatting: TextFormatting,
+    ctx: CanvasRenderingContext2D
+  ): TextMeasurement {
+    const {
+      fontSize,
+      fontFamily,
+      fontWeight,
+      fontStyle,
+      lineHeight = 1.2,
+    } = formatting;
+
+    // Build font string
+    const fontString = `${fontStyle} ${fontWeight} ${fontSize}px ${this.getFontFamily(fontFamily)}`;
+    ctx.font = fontString;
+
+    // Measure text
+    const metrics = ctx.measureText(text);
+    const width = metrics.width;
+    const height = fontSize * lineHeight;
+    const baseline = fontSize * 0.8;
+
+    return { width, height, baseline };
+  }
+
+  static renderText(
+    ctx: CanvasRenderingContext2D,
+    text: string,
+    position: { x: number; y: number },
+    formatting: TextFormatting,
+    maxWidth?: number
+  ): TextMeasurement {
+    const measurement = this.measureText(text, formatting, ctx);
+
+    ctx.save();
+
+    // Set text properties
+    const fontString = `${formatting.fontStyle} ${formatting.fontWeight} ${formatting.fontSize}px ${this.getFontFamily(formatting.fontFamily)}`;
+    ctx.font = fontString;
+    ctx.fillStyle = formatting.color;
+    ctx.globalAlpha = formatting.opacity;
+    ctx.textAlign = formatting.textAlign;
+    ctx.textBaseline = 'alphabetic';
+
+    // Apply text shadow
+    if (formatting.textShadow) {
+      ctx.shadowColor = formatting.textShadow.color;
+      ctx.shadowBlur = formatting.textShadow.blur;
+      ctx.shadowOffsetX = formatting.textShadow.offsetX;
+      ctx.shadowOffsetY = formatting.textShadow.offsetY;
+    }
+
+    // Draw background if specified
+    if (formatting.backgroundColor) {
+      const padding = 4;
+      let x = position.x;
+      let y = position.y - measurement.baseline - padding;
+
+      if (formatting.textAlign === 'center') {
+        x -= measurement.width / 2;
+      } else if (formatting.textAlign === 'right') {
+        x -= measurement.width;
+      }
+
+      ctx.fillStyle = formatting.backgroundColor;
+      ctx.fillRect(
+        x - padding,
+        y - padding,
+        measurement.width + padding * 2,
+        measurement.height + padding * 2
+      );
+
+      // Reset fill style for text
+      ctx.fillStyle = formatting.color;
+    }
+
+    // Draw text
+    let drawX = position.x;
+    if (formatting.textAlign === 'center') {
+      drawX = position.x;
+    } else if (formatting.textAlign === 'right') {
+      drawX = position.x;
+    }
+
+    if (maxWidth && measurement.width > maxWidth) {
+      // Text wrapping
+      const words = text.split(' ');
+      let currentLine = '';
+      let currentY = position.y;
+
+      for (const word of words) {
+        const testLine = currentLine + (currentLine ? ' ' : '') + word;
+        const testMetrics = this.measureText(testLine, formatting, ctx);
+
+        if (testMetrics.width > maxWidth && currentLine) {
+          ctx.fillText(currentLine, drawX, currentY);
+          currentLine = word;
+          currentY += measurement.height;
+        } else {
+          currentLine = testLine;
+        }
+      }
+      ctx.fillText(currentLine, drawX, currentY);
+    } else {
+      ctx.fillText(text, drawX, position.y);
+    }
+
+    // Apply text stroke if specified
+    if (formatting.textStroke) {
+      ctx.strokeStyle = formatting.textStroke.color;
+      ctx.lineWidth = formatting.textStroke.width;
+      ctx.strokeText(text, drawX, position.y);
+    }
+
+    ctx.restore();
+
+    return measurement;
+  }
+
+  static wrapText(
+    text: string,
+    maxWidth: number,
+    formatting: TextFormatting,
+    ctx: CanvasRenderingContext2D
+  ): string[] {
+    const words = text.split(' ');
+    const lines: string[] = [];
+    let currentLine = '';
+
+    for (const word of words) {
+      const testLine = currentLine + (currentLine ? ' ' : '') + word;
+      const testMetrics = this.measureText(testLine, formatting, ctx);
+
+      if (testMetrics.width > maxWidth && currentLine) {
+        lines.push(currentLine);
+        currentLine = word;
+      } else {
+        currentLine = testLine;
+      }
+    }
+
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+
+    return lines;
+  }
+
+  static getAvailableFonts(): string[] {
+    return [...this.systemFonts];
+  }
+
+  static calculateTextBounds(
+    text: string,
+    formatting: TextFormatting,
+    ctx: CanvasRenderingContext2D,
+    maxWidth?: number
+  ): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } {
+    const measurement = this.measureText(text, formatting, ctx);
+
+    if (maxWidth && measurement.width > maxWidth) {
+      const lines = this.wrapText(text, maxWidth, formatting, ctx);
+      const lineHeight = measurement.height;
+      const totalHeight = lines.length * lineHeight;
+
+      return {
+        x: 0,
+        y: 0,
+        width: maxWidth,
+        height: totalHeight,
+      };
+    }
+
+    return {
+      x: 0,
+      y: 0,
+      width: measurement.width,
+      height: measurement.height,
+    };
+  }
+
+  static createTextPath(
+    text: string,
+    position: { x: number; y: number },
+    formatting: TextFormatting,
+    ctx: CanvasRenderingContext2D
+  ): Path2D | any {
+    const measurement = this.measureText(text, formatting, ctx);
+    
+    ctx.save();
+    const fontString = `${formatting.fontStyle} ${formatting.fontWeight} ${formatting.fontSize}px ${this.getFontFamily(formatting.fontFamily)}`;
+    ctx.font = fontString;
+
+    let x = position.x;
+    if (formatting.textAlign === 'center') {
+      x = position.x;
+    } else if (formatting.textAlign === 'right') {
+      x = position.x;
+    }
+
+    const path = new Path2D();
+    path.moveTo(x, position.y);
+
+    // This is a simplified version - in a real implementation,
+    // you would use more sophisticated text-to-path conversion
+    path.rect(x - measurement.width/2, position.y - measurement.baseline, measurement.width, measurement.height);
+
+    ctx.restore();
+    return path;
+  }
+}

package/src/presentation/components/CropComponent.tsx

@@ -0,0 +1,183 @@
+/**
+ * Presentation - Crop Component
+ * 
+ * Advanced cropping interface with aspect ratios and grid
+ */
+
+import React, { useState, useCallback } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { CropTool, type CropConfig, type CropArea } from '../../infrastructure/utils/CropTool';
+
+interface CropComponentProps {
+    imageWidth: number;
+    imageHeight: number;
+    onCropChange?: (area: CropArea) => void;
+    onCropComplete?: (area: CropArea) => void;
+    initialArea?: CropArea;
+    config?: CropConfig;
+}
+
+export function CropComponent({
+    imageWidth,
+    imageHeight,
+    onCropChange,
+    onCropComplete,
+    initialArea,
+    config = {},
+}: CropComponentProps) {
+    const [cropArea, setCropArea] = useState<CropArea>(
+        initialArea || {
+            x: 0,
+            y: 0,
+            width: imageWidth,
+            height: imageHeight,
+        }
+    );
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragHandle, setDragHandle] = useState<string | null>(null);
+
+    const presets = CropTool.getPresets();
+
+    const handleCropChange = useCallback((newArea: CropArea) => {
+        setCropArea(newArea);
+        onCropChange?.(newArea);
+    }, [onCropChange]);
+
+    const handlePresetSelect = useCallback((preset: any) => {
+        const constrainedArea = CropTool.constrainToAspectRatio(
+            cropArea.width,
+            cropArea.height,
+            preset.aspectRatio
+        );
+
+        const centeredArea = {
+            ...constrainedArea,
+            x: (imageWidth - constrainedArea.width) / 2,
+            y: (imageHeight - constrainedArea.height) / 2,
+        };
+
+        handleCropChange(centeredArea);
+    }, [cropArea, imageWidth, imageHeight, handleCropChange]);
+
+    const handleCenterCrop = useCallback(() => {
+        const centerCrop = CropTool.centerCrop(imageWidth, imageHeight);
+        handleCropChange(centerCrop);
+    }, [imageWidth, imageHeight, handleCropChange]);
+
+    const renderPresets = () => (
+        <View style={styles.presetsContainer}>
+            <Text style={styles.presetsLabel}>Aspect Ratio</Text>
+            <View style={styles.presetButtons}>
+                {presets.map((preset) => (
+                    <TouchableOpacity
+                        key={preset.name}
+                        style={[
+                            styles.presetButton,
+                            config.aspectRatio === preset.aspectRatio && styles.selectedPreset,
+                        ]}
+                        onPress={() => handlePresetSelect(preset)}
+                    >
+                        <Text style={[
+                            styles.presetText,
+                            config.aspectRatio === preset.aspectRatio && styles.presetTextSelected
+                        ]}>{preset.name}</Text>
+                    </TouchableOpacity>
+                ))}
+            </View>
+        </View>
+    );
+
+    const renderActions = () => (
+        <View style={styles.actionsContainer}>
+            <TouchableOpacity
+                style={styles.actionButton}
+                onPress={handleCenterCrop}
+            >
+                <Text style={styles.actionButtonText}>Center Crop</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+                style={[styles.actionButton, styles.primaryButton]}
+                onPress={() => onCropComplete?.(cropArea)}
+            >
+                <Text style={styles.primaryButtonText}>Apply Crop</Text>
+            </TouchableOpacity>
+        </View>
+    );
+
+    return (
+        <View style={styles.container}>
+            {renderPresets()}
+            {renderActions()}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 16,
+        gap: 16,
+    },
+    presetsContainer: {
+        gap: 8,
+    },
+    presetsLabel: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333333',
+        marginBottom: 8,
+    },
+    presetButtons: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+    },
+    presetButton: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: '#d0d0d0',
+        backgroundColor: '#ffffff',
+    },
+    selectedPreset: {
+        backgroundColor: '#007bff',
+        borderColor: '#007bff',
+    },
+    presetText: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: '#333333',
+    },
+    presetTextSelected: {
+        color: '#ffffff',
+    },
+    actionsContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        gap: 12,
+    },
+    actionButton: {
+        flex: 1,
+        paddingVertical: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#d0d0d0',
+        backgroundColor: '#ffffff',
+        alignItems: 'center',
+    },
+    primaryButton: {
+        backgroundColor: '#007bff',
+        borderColor: '#007bff',
+    },
+    actionButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333333',
+    },
+    primaryButtonText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#ffffff',
+    },
+});