@umituz/react-native-image 1.1.5 → 1.2.1

package/src/presentation/components/EditorPanel.tsx

@@ -0,0 +1,321 @@
+/**
+ * Presentation - Editor Panel Component
+ * 
+ * Configuration panel for selected tools
+ */
+
+import React, { useState, useCallback } from 'react';
+import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import Slider from '@react-native-community/slider';
+import { EditorTool } from '../../domain/entities/EditorTypes';
+
+interface EditorPanelProps {
+    selectedTool: EditorTool;
+    onToolConfigChange?: (config: any) => void;
+    backgroundColor?: string;
+}
+
+export function EditorPanel({ selectedTool, onToolConfigChange, backgroundColor = '#f8f9fa' }: EditorPanelProps) {
+    const [brushSize, setBrushSize] = useState(5);
+    const [brushOpacity, setBrushOpacity] = useState(1);
+    const [brushColor, setBrushColor] = useState('#000000');
+    const [brushStyle, setBrushStyle] = useState('normal');
+
+    const [fontSize, setFontSize] = useState(16);
+    const [textColor, setTextColor] = useState('#000000');
+
+    const [cropAspectRatio, setCropAspectRatio] = useState(0);
+    const [cropGrid, setCropGrid] = useState(true);
+
+    const handleConfigChange = useCallback((config: any) => {
+        onToolConfigChange?.(config);
+    }, [onToolConfigChange]);
+
+    const renderBrushPanel = () => (
+        <View style={styles.panel}>
+            <View style={styles.configRow}>
+                <Text style={styles.label}>Size</Text>
+                <Slider
+                    style={styles.slider}
+                    minimumValue={1}
+                    maximumValue={50}
+                    value={brushSize}
+                    onValueChange={setBrushSize}
+                    onSlidingComplete={() => handleConfigChange({
+                        size: brushSize,
+                        opacity: brushOpacity,
+                        color: brushColor,
+                        style: brushStyle
+                    })}
+                />
+                <Text style={styles.value}>{Math.round(brushSize)}</Text>
+            </View>
+
+            <View style={styles.configRow}>
+                <Text style={styles.label}>Opacity</Text>
+                <Slider
+                    style={styles.slider}
+                    minimumValue={0}
+                    maximumValue={1}
+                    value={brushOpacity}
+                    onValueChange={setBrushOpacity}
+                    onSlidingComplete={() => handleConfigChange({
+                        size: brushSize,
+                        opacity: brushOpacity,
+                        color: brushColor,
+                        style: brushStyle
+                    })}
+                />
+                <Text style={styles.value}>{Math.round(brushOpacity * 100)}%</Text>
+            </View>
+
+            <View style={styles.configRow}>
+                <Text style={styles.label}>Color</Text>
+                <View style={styles.colorRow}>
+                    {['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00'].map(color => (
+                        <TouchableOpacity
+                            key={color}
+                            style={[styles.colorButton, { backgroundColor: color }]}
+                            onPress={() => {
+                                setBrushColor(color);
+                                handleConfigChange({
+                                    size: brushSize,
+                                    opacity: brushOpacity,
+                                    color,
+                                    style: brushStyle
+                                });
+                            }}
+                        />
+                    ))}
+                </View>
+            </View>
+
+            <View style={styles.configRow}>
+                <Text style={styles.label}>Style</Text>
+                <View style={styles.styleRow}>
+                    {['normal', 'marker', 'spray'].map(style => (
+                        <TouchableOpacity
+                            key={style}
+                            style={[styles.styleButton, brushStyle === style && styles.selectedStyle]}
+                            onPress={() => {
+                                setBrushStyle(style);
+                                handleConfigChange({
+                                    size: brushSize,
+                                    opacity: brushOpacity,
+                                    color: brushColor,
+                                    style
+                                });
+                            }}
+                        >
+                            <Text style={styles.styleText}>{style}</Text>
+                        </TouchableOpacity>
+                    ))}
+                </View>
+            </View>
+        </View>
+    );
+
+    const renderTextPanel = () => (
+        <View style={styles.panel}>
+            <View style={styles.configRow}>
+                <Text style={styles.label}>Font Size</Text>
+                <Slider
+                    style={styles.slider}
+                    minimumValue={8}
+                    maximumValue={72}
+                    value={fontSize}
+                    onValueChange={setFontSize}
+                    onSlidingComplete={() => handleConfigChange({ fontSize, color: textColor })}
+                />
+                <Text style={styles.value}>{Math.round(fontSize)}</Text>
+            </View>
+
+            <View style={styles.configRow}>
+                <Text style={styles.label}>Color</Text>
+                <View style={styles.colorRow}>
+                    {['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00'].map(color => (
+                        <TouchableOpacity
+                            key={color}
+                            style={[styles.colorButton, { backgroundColor: color }]}
+                            onPress={() => {
+                                setTextColor(color);
+                                handleConfigChange({ fontSize, color });
+                            }}
+                        />
+                    ))}
+                </View>
+            </View>
+        </View>
+    );
+
+    const renderCropPanel = () => (
+        <View style={styles.panel}>
+            <View style={styles.configRow}>
+                <Text style={styles.label}>Aspect Ratio</Text>
+                <View style={styles.ratioRow}>
+                    {[
+                        { label: 'Free', value: 0 },
+                        { label: '1:1', value: 1 },
+                        { label: '4:3', value: 1.333333333 },
+                        { label: '16:9', value: 1.777777777 },
+                    ].map(ratio => (
+                        <TouchableOpacity
+                            key={ratio.value}
+                            style={[styles.ratioButton, cropAspectRatio === ratio.value && styles.selectedRatio]}
+                            onPress={() => {
+                                setCropAspectRatio(ratio.value);
+                                handleConfigChange({ aspectRatio: ratio.value, grid: cropGrid });
+                            }}
+                        >
+                            <Text style={styles.ratioText}>{ratio.label}</Text>
+                        </TouchableOpacity>
+                    ))}
+                </View>
+            </View>
+
+            <View style={styles.configRow}>
+                <Text style={styles.label}>Show Grid</Text>
+                <TouchableOpacity
+                    style={[styles.toggleButton, cropGrid && styles.selectedToggle]}
+                    onPress={() => {
+                        setCropGrid(!cropGrid);
+                        handleConfigChange({ aspectRatio: cropAspectRatio, grid: !cropGrid });
+                    }}
+                >
+                    <Text style={styles.toggleText}>{cropGrid ? 'ON' : 'OFF'}</Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    );
+
+    const renderPanel = () => {
+        switch (selectedTool) {
+            case EditorTool.BRUSH:
+            case EditorTool.ERASER:
+                return renderBrushPanel();
+            case EditorTool.TEXT:
+                return renderTextPanel();
+            case EditorTool.CROP:
+                return renderCropPanel();
+            default:
+                return null;
+        }
+    };
+
+    return (
+        <View style={[styles.container, { backgroundColor }]}>
+            {renderPanel()}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 16,
+        minHeight: 200,
+        borderTopWidth: 1,
+        borderTopColor: '#e0e0e0',
+    },
+    panel: {
+        gap: 16,
+    },
+    configRow: {
+        gap: 8,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#333333',
+        marginBottom: 8,
+    },
+    value: {
+        fontSize: 12,
+        color: '#666666',
+        textAlign: 'center',
+        minWidth: 40,
+    },
+    slider: {
+        flex: 1,
+        height: 40,
+    },
+    colorRow: {
+        flexDirection: 'row',
+        gap: 8,
+        flexWrap: 'wrap',
+    },
+    colorButton: {
+        width: 30,
+        height: 30,
+        borderRadius: 6,
+        borderWidth: 2,
+        borderColor: '#d0d0d0',
+    },
+    styleRow: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    styleButton: {
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: '#d0d0d0',
+        backgroundColor: '#ffffff',
+    },
+    selectedStyle: {
+        backgroundColor: '#007bff',
+        borderColor: '#007bff',
+    },
+    styleText: {
+        fontSize: 12,
+        fontWeight: '500',
+        color: '#333333',
+    },
+    styleTextSelected: {
+        color: '#ffffff',
+    },
+    ratioRow: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    ratioButton: {
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: '#d0d0d0',
+        backgroundColor: '#ffffff',
+    },
+    selectedRatio: {
+        backgroundColor: '#007bff',
+        borderColor: '#007bff',
+    },
+    ratioText: {
+        fontSize: 12,
+        fontWeight: '500',
+        color: '#333333',
+    },
+    ratioTextSelected: {
+        color: '#ffffff',
+    },
+    toggleButton: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: '#d0d0d0',
+        backgroundColor: '#ffffff',
+    },
+    selectedToggle: {
+        backgroundColor: '#007bff',
+        borderColor: '#007bff',
+    },
+    toggleText: {
+        fontSize: 12,
+        fontWeight: '500',
+        color: '#333333',
+    },
+    toggleTextSelected: {
+        color: '#ffffff',
+    },
+});

package/src/presentation/components/EditorToolbar.tsx

@@ -0,0 +1,180 @@
+/**
+ * Presentation - Editor Toolbar Component
+ * 
+ * Toolbar with tools and configuration options
+ */
+
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet, ScrollView, Text } from 'react-native';
+import { EditorTool, ShapeType } from '../../domain/entities/EditorTypes';
+
+interface EditorToolbarProps {
+    selectedTool: EditorTool;
+    onToolSelect: (tool: EditorTool) => void;
+    onShapeSelect?: (shape: ShapeType) => void;
+    showShapes?: boolean;
+    backgroundColor?: string;
+}
+
+interface ToolButtonProps {
+    tool: EditorTool;
+    icon: string;
+    label: string;
+    isSelected: boolean;
+    onPress: () => void;
+}
+
+function ToolButton({ tool, icon, label, isSelected, onPress }: ToolButtonProps) {
+    return (
+        <TouchableOpacity
+            style={[styles.toolButton, isSelected && styles.selectedTool]}
+            onPress={onPress}
+            activeOpacity={0.7}
+        >
+            <View style={styles.toolIcon}>
+                <Text style={[styles.iconText, isSelected && styles.iconTextSelected]}>{icon}</Text>
+            </View>
+            <Text style={[styles.toolLabel, isSelected && styles.toolLabelSelected]}>{label}</Text>
+        </TouchableOpacity>
+    );
+}
+
+export function EditorToolbar({
+    selectedTool,
+    onToolSelect,
+    onShapeSelect,
+    showShapes = false,
+    backgroundColor = '#f8f9fa',
+}: EditorToolbarProps) {
+    const mainTools = [
+        { tool: EditorTool.MOVE as EditorTool, icon: '↔', label: 'Move' },
+        { tool: EditorTool.BRUSH as EditorTool, icon: '✏', label: 'Brush' },
+        { tool: EditorTool.ERASER as EditorTool, icon: '⌫', label: 'Eraser' },
+        { tool: EditorTool.TEXT as EditorTool, icon: 'T', label: 'Text' },
+        { tool: EditorTool.SHAPE as EditorTool, icon: '◇', label: 'Shape' },
+        { tool: EditorTool.CROP as EditorTool, icon: '✂', label: 'Crop' },
+        { tool: EditorTool.FILTER as EditorTool, icon: '🎨', label: 'Filter' },
+    ];
+
+    const shapeTools = [
+        { shape: ShapeType.RECTANGLE, icon: '▢', label: 'Rectangle' },
+        { shape: ShapeType.CIRCLE, icon: '○', label: 'Circle' },
+        { shape: ShapeType.LINE, icon: '╱', label: 'Line' },
+        { shape: ShapeType.ARROW, icon: '→', label: 'Arrow' },
+        { shape: ShapeType.TRIANGLE, icon: '△', label: 'Triangle' },
+        { shape: ShapeType.STAR, icon: '★', label: 'Star' },
+        { shape: ShapeType.HEART, icon: '♥', label: 'Heart' },
+    ];
+
+    return (
+        <View style={[styles.container, { backgroundColor }]}>
+            <ScrollView 
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                style={styles.scrollContainer}
+            >
+                <View style={styles.toolGroup}>
+                    {mainTools.map(({ tool, icon, label }) => (
+                        <ToolButton
+                            key={tool}
+                            tool={tool}
+                            icon={icon}
+                            label={label}
+                            isSelected={selectedTool === tool}
+                            onPress={() => onToolSelect(tool)}
+                        />
+                    ))}
+                </View>
+
+                {showShapes && onShapeSelect && (
+                    <View style={[styles.toolGroup, styles.shapeGroup]}>
+                        {shapeTools.map(({ shape, icon, label }) => (
+                            <TouchableOpacity
+                                key={shape}
+                                style={styles.shapeButton}
+                                onPress={() => onShapeSelect(shape)}
+                                activeOpacity={0.7}
+                            >
+                                <View style={styles.toolIcon}>
+                                    <Text style={styles.iconText}>{icon}</Text>
+                                </View>
+                                <Text style={styles.toolLabel}>{label}</Text>
+                            </TouchableOpacity>
+                        ))}
+                    </View>
+                )}
+            </ScrollView>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+        borderBottomWidth: 1,
+        borderBottomColor: '#e0e0e0',
+        backgroundColor: '#f8f9fa',
+    },
+    scrollContainer: {
+        flex: 1,
+    },
+    toolGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 8,
+    },
+    shapeGroup: {
+        borderLeftWidth: 1,
+        borderLeftColor: '#e0e0e0',
+        marginLeft: 16,
+    },
+    toolButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        marginHorizontal: 2,
+        borderRadius: 8,
+        backgroundColor: '#ffffff',
+        borderWidth: 1,
+        borderColor: '#d0d0d0',
+        minWidth: 60,
+    },
+    selectedTool: {
+        backgroundColor: '#007bff',
+        borderColor: '#007bff',
+    },
+    shapeButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 6,
+        paddingHorizontal: 8,
+        marginHorizontal: 2,
+        borderRadius: 6,
+        backgroundColor: '#ffffff',
+        borderWidth: 1,
+        borderColor: '#d0d0d0',
+        minWidth: 50,
+    },
+    toolIcon: {
+        marginBottom: 2,
+    },
+    iconText: {
+        fontSize: 16,
+        fontWeight: '600',
+        color: '#333333',
+    },
+    iconTextSelected: {
+        color: '#ffffff',
+    },
+    toolLabel: {
+        fontSize: 10,
+        fontWeight: '500',
+        color: '#666666',
+        textAlign: 'center',
+    },
+    toolLabelSelected: {
+        color: '#ffffff',
+    },
+});

package/src/presentation/components/FilterSlider.tsx

@@ -0,0 +1,123 @@
+/**
+ * Presentation - Filter Slider Component
+ * 
+ * Slider for adjusting filter parameters
+ */
+
+import React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import Slider from '@react-native-community/slider';
+
+interface FilterSliderProps {
+    label: string;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumValue?: number;
+    maximumValue?: number;
+    step?: number;
+    valueFormat?: (value: number) => string;
+    color?: string;
+}
+
+export function FilterSlider({
+    label,
+    value,
+    onValueChange,
+    minimumValue = 0,
+    maximumValue = 100,
+    step = 1,
+    valueFormat,
+    color = '#007bff',
+}: FilterSliderProps) {
+    const formatValue = (val: number): string => {
+        if (valueFormat) return valueFormat(val);
+        return `${Math.round(val)}`;
+    };
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.labelContainer}>
+                <Text style={styles.label}>{label}</Text>
+                <Text style={[styles.value, { color }]}>
+                    {formatValue(value)}
+                </Text>
+            </View>
+
+            <View style={[styles.sliderTrack, { backgroundColor: `${color}20` }]}>
+                <View
+                    style={[
+                        styles.sliderFill,
+                        {
+                            width: `${((value - minimumValue) / (maximumValue - minimumValue)) * 100}%`,
+                            backgroundColor: color
+                        }
+                    ]}
+                />
+                <Slider
+                    style={styles.slider}
+                    minimumValue={minimumValue}
+                    maximumValue={maximumValue}
+                    value={value}
+                    onValueChange={onValueChange}
+                    step={step}
+                    minimumTrackTintColor="transparent"
+                    maximumTrackTintColor="transparent"
+                    thumbTintColor={color}
+                />
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        paddingVertical: 8,
+        gap: 8,
+    },
+    labelContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '500',
+        color: '#333333',
+    },
+    value: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    sliderTrack: {
+        height: 6,
+        borderRadius: 3,
+        position: 'relative',
+    },
+    sliderFill: {
+        height: '100%',
+        borderRadius: 3,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+    },
+    slider: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        opacity: 0,
+    },
+    thumb: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 2,
+        borderColor: '#ffffff',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 2,
+        elevation: 3,
+    },
+});