@umituz/react-native-image 1.2.5 → 1.3.2

package/src/infrastructure/utils/TextEditor.ts

@@ -1,273 +0,0 @@
-/**
- * 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

@@ -1,183 +0,0 @@
-/**
- * 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',
-    },
-});

package/src/presentation/components/Editor.tsx

@@ -1,261 +0,0 @@
-/**
- * Presentation - Editor Component
- * 
- * Main image editor interface
- */
-
-import React, { useState, useCallback } from 'react';
-import { View, StyleSheet, Alert, Text, TouchableOpacity } from 'react-native';
-import { EditorCanvas } from './EditorCanvas';
-import { EditorToolbar } from './EditorToolbar';
-import { EditorPanel } from './EditorPanel';
-import { useImageEditor } from '../hooks/useImageEditor';
-import { EditorTool, EditorExportOptions } from '../../domain/entities/EditorTypes';
-import type { ImageManipulationResult } from '../../domain/entities/ImageTypes';
-
-interface EditorProps {
-    imageUri: string;
-    width?: number;
-    height?: number;
-    onSave?: (result: ImageManipulationResult) => void | Promise<void>;
-    onCancel?: () => void;
-    backgroundColor?: string;
-    toolbarBackgroundColor?: string;
-    panelBackgroundColor?: string;
-    exportOptions?: EditorExportOptions;
-}
-
-export function Editor({
-    imageUri,
-    width = 800,
-    height = 600,
-    onSave,
-    onCancel,
-    backgroundColor = '#ffffff',
-    toolbarBackgroundColor = '#f8f9fa',
-    panelBackgroundColor = '#f8f9fa',
-    exportOptions,
-}: EditorProps) {
-    const [selectedTool, setSelectedTool] = useState<EditorTool>(EditorTool.MOVE);
-    const [toolConfig, setToolConfig] = useState<any>({});
-    const [canvas, setCanvas] = useState<any>(null);
-
-    const {
-        editorState,
-        isProcessing,
-        error,
-        canUndo,
-        canRedo,
-        initializeEditor,
-        setTool,
-        addLayer,
-        removeLayer,
-        undo,
-        redo,
-        exportImage,
-        cancel,
-    } = useImageEditor({
-        onSave,
-        onCancel,
-    });
-
-    const handleCanvasReady = useCallback((canvasElement: any) => {
-        setCanvas(canvasElement);
-        if (imageUri && !editorState) {
-            initializeEditor(imageUri);
-        }
-    }, [imageUri, editorState, initializeEditor]);
-
-    const handleToolSelect = useCallback((tool: EditorTool) => {
-        setSelectedTool(tool);
-        setTool(tool);
-        setToolConfig({});
-    }, [setTool]);
-
-    const handleToolConfigChange = useCallback((config: any) => {
-        setToolConfig(config);
-    }, []);
-
-    const handleSave = useCallback(async () => {
-        if (isProcessing) return;
-
-        try {
-            await exportImage(exportOptions);
-        } catch (err) {
-            Alert.alert('Error', 'Failed to save image');
-        }
-    }, [isProcessing, exportImage, exportImage]);
-
-    const handleCancel = useCallback(() => {
-        cancel();
-    }, [cancel]);
-
-    const handleUndo = useCallback(() => {
-        undo();
-    }, [undo]);
-
-    const handleRedo = useCallback(() => {
-        redo();
-    }, [redo]);
-
-    return (
-        <View style={[styles.container, { backgroundColor }]}>
-            {/* Toolbar */}
-            <EditorToolbar
-                selectedTool={selectedTool}
-                onToolSelect={handleToolSelect}
-                backgroundColor={toolbarBackgroundColor}
-            />
-
-            {/* Main Editor Area */}
-            <View style={styles.editorArea}>
-                <EditorCanvas
-                    width={width}
-                    height={height}
-                    onCanvasReady={handleCanvasReady}
-                    onToolChange={handleToolSelect}
-                    onStateChange={handleToolConfigChange}
-                    backgroundColor={backgroundColor}
-                />
-
-                {/* Error Display */}
-                {error && (
-                    <View style={styles.errorContainer}>
-                        <Text style={styles.errorText}>{error}</Text>
-                    </View>
-                )}
-            </View>
-
-            {/* Configuration Panel */}
-            {(selectedTool === EditorTool.BRUSH ||
-                selectedTool === EditorTool.ERASER ||
-                selectedTool === EditorTool.TEXT ||
-                selectedTool === EditorTool.CROP) && (
-                    <EditorPanel
-                        selectedTool={selectedTool}
-                        onToolConfigChange={handleToolConfigChange}
-                        backgroundColor={panelBackgroundColor}
-                    />
-                )}
-
-            {/* Action Buttons */}
-            <View style={styles.actionBar}>
-                <View style={styles.undoRedoContainer}>
-                    <TouchableOpacity
-                        style={[styles.actionButton, !canUndo && styles.disabledButton]}
-                        onPress={handleUndo}
-                        disabled={!canUndo || isProcessing}
-                    >
-                        <Text style={styles.actionButtonText}>↶</Text>
-                    </TouchableOpacity>
-
-                    <TouchableOpacity
-                        style={[styles.actionButton, !canRedo && styles.disabledButton]}
-                        onPress={handleRedo}
-                        disabled={!canRedo || isProcessing}
-                    >
-                        <Text style={styles.actionButtonText}>↷</Text>
-                    </TouchableOpacity>
-                </View>
-
-                <View style={styles.saveCancelContainer}>
-                    <TouchableOpacity
-                        style={[styles.actionButton, styles.cancelButton]}
-                        onPress={handleCancel}
-                        disabled={isProcessing}
-                    >
-                        <Text style={styles.cancelButtonText}>Cancel</Text>
-                    </TouchableOpacity>
-
-                    <TouchableOpacity
-                        style={[styles.actionButton, styles.saveButton, isProcessing && styles.processingButton]}
-                        onPress={handleSave}
-                        disabled={isProcessing}
-                    >
-                        <Text style={styles.saveButtonText}>
-                            {isProcessing ? 'Saving...' : 'Save'}
-                        </Text>
-                    </TouchableOpacity>
-                </View>
-            </View>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: '#ffffff',
-    },
-    editorArea: {
-        flex: 1,
-        position: 'relative',
-    },
-    errorContainer: {
-        position: 'absolute',
-        top: 16,
-        left: 16,
-        right: 16,
-        backgroundColor: '#ff4444',
-        padding: 12,
-        borderRadius: 8,
-    },
-    errorText: {
-        color: '#ffffff',
-        fontSize: 14,
-        fontWeight: '500',
-    },
-    actionBar: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        padding: 16,
-        borderTopWidth: 1,
-        borderTopColor: '#e0e0e0',
-        backgroundColor: '#f8f9fa',
-    },
-    undoRedoContainer: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    saveCancelContainer: {
-        flexDirection: 'row',
-        gap: 8,
-    },
-    actionButton: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: '#d0d0d0',
-        backgroundColor: '#ffffff',
-    },
-    disabledButton: {
-        opacity: 0.5,
-    },
-    cancelButton: {
-        borderColor: '#6c757d',
-    },
-    saveButton: {
-        backgroundColor: '#28a745',
-        borderColor: '#28a745',
-    },
-    processingButton: {
-        opacity: 0.7,
-    },
-    actionButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#333333',
-    },
-    cancelButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#6c757d',
-    },
-    saveButtonText: {
-        fontSize: 16,
-        fontWeight: '600',
-        color: '#ffffff',
-    },
-});