@umituz/react-native-image 1.3.9 → 1.3.11

package/src/infrastructure/utils/FilterProcessor.ts

@@ -1,9 +1,11 @@
 /**
  * Infrastructure - Filter Processor
  * 
- * Real-time filter processing with preview
+ * Filter processing with preset management
  */
 
+import { ImageFilterUtils } from './ImageFilterUtils';
+
 export interface FilterPreset {
   id: string;
   name: string;
@@ -35,92 +37,39 @@ export class FilterProcessor {
       id: 'brightness',
       name: 'Brightness',
       category: 'basic',
-      parameters: [
-        {
-          name: 'brightness',
-          type: 'slider',
-          min: -100,
-          max: 100,
-          value: 0,
-          label: 'Brightness',
-        },
-      ],
+      parameters: [{ name: 'brightness', type: 'slider', min: -100, max: 100, value: 0, label: 'Brightness' }],
     },
     {
       id: 'contrast',
       name: 'Contrast',
       category: 'basic',
-      parameters: [
-        {
-          name: 'contrast',
-          type: 'slider',
-          min: -100,
-          max: 100,
-          value: 0,
-          label: 'Contrast',
-        },
-      ],
+      parameters: [{ name: 'contrast', type: 'slider', min: -100, max: 100, value: 0, label: 'Contrast' }],
     },
     {
       id: 'saturation',
       name: 'Saturation',
       category: 'color',
-      parameters: [
-        {
-          name: 'saturation',
-          type: 'slider',
-          min: -100,
-          max: 100,
-          value: 0,
-          label: 'Saturation',
-        },
-      ],
+      parameters: [{ name: 'saturation', type: 'slider', min: -100, max: 100, value: 0, label: 'Saturation' }],
     },
     {
       id: 'vintage',
       name: 'Vintage',
       category: 'vintage',
       parameters: [
-        {
-          name: 'intensity',
-          type: 'slider',
-          min: 0,
-          max: 100,
-          value: 50,
-          label: 'Intensity',
-        },
-        {
-          name: 'warmth',
-          type: 'slider',
-          min: 0,
-          max: 100,
-          value: 30,
-          label: 'Warmth',
-        },
+        { name: 'intensity', type: 'slider', min: 0, max: 100, value: 50, label: 'Intensity' },
+        { name: 'warmth', type: 'slider', min: 0, max: 100, value: 30, label: 'Warmth' },
       ],
     },
     {
       id: 'blur',
       name: 'Blur',
       category: 'artistic',
-      parameters: [
-        {
-          name: 'radius',
-          type: 'slider',
-          min: 0,
-          max: 20,
-          value: 0,
-          label: 'Blur Radius',
-        },
-      ],
+      parameters: [{ name: 'radius', type: 'slider', min: 0, max: 20, value: 0, label: 'Blur Radius' }],
     },
   ];
 
   static getPresets(category?: string): FilterPreset[] {
-    if (category) {
-      return this.PRESETS.filter(preset => preset.category === category);
-    }
-    return this.PRESETS;
+    return category ? this.PRESETS.filter(preset => preset.category === category) : this.PRESETS;
   }
 
   static getPreset(id: string): FilterPreset | undefined {
@@ -129,21 +78,12 @@ export class FilterProcessor {
 
   static createFilterState(presetId: string): FilterState {
     const preset = this.getPreset(presetId);
-    if (!preset) {
-      throw new Error(`Filter preset not found: ${presetId}`);
-    }
+    if (!preset) throw new Error(`Filter preset not found: ${presetId}`);
 
     const parameters: Record<string, any> = {};
-    preset.parameters.forEach(param => {
-      parameters[param.name] = param.value;
-    });
+    preset.parameters.forEach(param => { parameters[param.name] = param.value; });
 
-    return {
-      id: presetId,
-      intensity: 100,
-      parameters,
-      enabled: true,
-    };
+    return { id: presetId, intensity: 100, parameters, enabled: true };
   }
 
   static applyFilter(
@@ -153,187 +93,32 @@ export class FilterProcessor {
     filterState: FilterState
   ): Uint8ClampedArray {
     const preset = this.getPreset(filterState.id);
-    if (!preset || !filterState.enabled) {
-      return imageData;
-    }
+    if (!preset || !filterState.enabled) return imageData;
 
     let processedData = new Uint8ClampedArray(imageData);
 
-    // Apply filter based on preset type
     switch (filterState.id) {
       case 'brightness':
-        processedData = this.applyBrightness(processedData, filterState.parameters.brightness);
+        processedData = ImageFilterUtils.applyBrightness(processedData, filterState.parameters.brightness) as any;
         break;
       case 'contrast':
-        processedData = this.applyContrast(processedData, filterState.parameters.contrast);
+        processedData = ImageFilterUtils.applyContrast(processedData, filterState.parameters.contrast) as any;
         break;
       case 'saturation':
-        processedData = this.applySaturation(processedData, filterState.parameters.saturation);
+        processedData = ImageFilterUtils.applySaturation(processedData, filterState.parameters.saturation) as any;
         break;
       case 'vintage':
-        processedData = this.applyVintage(processedData, filterState.parameters.intensity, filterState.parameters.warmth);
+        processedData = ImageFilterUtils.applyVintage(processedData, filterState.parameters.intensity, filterState.parameters.warmth) as any;
         break;
       case 'blur':
-        processedData = this.applyBlur(processedData, filterState.parameters.radius, width, height);
+        processedData = ImageFilterUtils.applyBlur(processedData, filterState.parameters.radius, width, height) as any;
         break;
     }
 
-    // Apply intensity
     if (filterState.intensity < 100) {
-      processedData = this.applyIntensity(imageData, processedData, filterState.intensity / 100);
-    }
-
-    return processedData;
-  }
-
-  private static applyBrightness(
-    data: Uint8ClampedArray,
-    brightness: number
-  ): Uint8ClampedArray {
-    const result = new Uint8ClampedArray(data);
-    const adjustment = brightness * 2.55; // Convert -100 to 100 to -255 to 255
-
-    for (let i = 0; i < result.length; i += 4) {
-      result[i] = Math.min(255, Math.max(0, result[i] + adjustment));
-      result[i + 1] = Math.min(255, Math.max(0, result[i + 1] + adjustment));
-      result[i + 2] = Math.min(255, Math.max(0, result[i + 2] + adjustment));
+      processedData = ImageFilterUtils.applyIntensity(imageData, processedData, filterState.intensity / 100) as any;
     }
 
-    return result;
+    return processedData as any;
   }
-
-  private static applyContrast(
-    data: Uint8ClampedArray,
-    contrast: number
-  ): Uint8ClampedArray {
-    const result = new Uint8ClampedArray(data);
-    const factor = (259 * (contrast * 255 + 255)) / (255 * (259 - contrast * 255));
-
-    for (let i = 0; i < result.length; i += 4) {
-      result[i] = Math.min(255, Math.max(0, factor * (result[i] - 128) + 128));
-      result[i + 1] = Math.min(255, Math.max(0, factor * (result[i + 1] - 128) + 128));
-      result[i + 2] = Math.min(255, Math.max(0, factor * (result[i + 2] - 128) + 128));
-    }
-
-    return result;
-  }
-
-  private static applySaturation(
-    data: Uint8ClampedArray,
-    saturation: number
-  ): Uint8ClampedArray {
-    const result = new Uint8ClampedArray(data);
-    const adjustment = 1 + (saturation / 100);
-
-    for (let i = 0; i < result.length; i += 4) {
-      const r = result[i];
-      const g = result[i + 1];
-      const b = result[i + 2];
-
-      const gray = 0.299 * r + 0.587 * g + 0.114 * b;
-
-      result[i] = Math.min(255, Math.max(0, gray + adjustment * (r - gray)));
-      result[i + 1] = Math.min(255, Math.max(0, gray + adjustment * (g - gray)));
-      result[i + 2] = Math.min(255, Math.max(0, gray + adjustment * (b - gray)));
-    }
-
-    return result;
-  }
-
-  private static applyVintage(
-    data: Uint8ClampedArray,
-    intensity: number,
-    warmth: number
-  ): Uint8ClampedArray {
-    const result = new Uint8ClampedArray(data);
-    const factor = intensity / 100;
-    const warmFactor = warmth / 100;
-
-    for (let i = 0; i < result.length; i += 4) {
-      let r = result[i];
-      let g = result[i + 1];
-      let b = result[i + 2];
-
-      // Apply sepia effect
-      const tr = 0.393 * r + 0.769 * g + 0.189 * b;
-      const tg = 0.349 * r + 0.686 * g + 0.168 * b;
-      const tb = 0.272 * r + 0.534 * g + 0.131 * b;
-
-      // Mix with original based on intensity
-      r = r * (1 - factor) + tr * factor;
-      g = g * (1 - factor) + tg * factor;
-      b = b * (1 - factor) + tb * factor;
-
-      // Apply warmth
-      if (warmFactor > 0) {
-        result[i] = Math.min(255, r + warmFactor * 20);
-        result[i + 1] = Math.min(255, g + warmFactor * 10);
-        result[i + 2] = Math.min(255, b * (1 - warmFactor * 0.3));
-      } else {
-        result[i] = r;
-        result[i + 1] = g;
-        result[i + 2] = Math.min(255, b * (1 - Math.abs(warmFactor) * 0.3));
-      }
-    }
-
-    return result;
-  }
-
-  private static applyBlur(
-    data: Uint8ClampedArray,
-    radius: number,
-    width: number,
-    height: number
-  ): Uint8ClampedArray {
-    // Simple box blur implementation
-    const result = new Uint8ClampedArray(data);
-    const size = Math.floor(radius) || 1;
-
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        let r = 0, g = 0, b = 0, a = 0;
-        let count = 0;
-
-        for (let dy = -size; dy <= size; dy++) {
-          for (let dx = -size; dx <= size; dx++) {
-            const ny = y + dy;
-            const nx = x + dx;
-
-            if (ny >= 0 && ny < height && nx >= 0 && nx < width) {
-              const idx = (ny * width + nx) * 4;
-              r += data[idx];
-              g += data[idx + 1];
-              b += data[idx + 2];
-              a += data[idx + 3];
-              count++;
-            }
-          }
-        }
-
-        const idx = (y * width + x) * 4;
-        result[idx] = r / count;
-        result[idx + 1] = g / count;
-        result[idx + 2] = b / count;
-        result[idx + 3] = a / count;
-      }
-    }
-
-    return result;
-  }
-
-  private static applyIntensity(
-    originalData: Uint8ClampedArray,
-    processedData: Uint8ClampedArray,
-    intensity: number
-  ): Uint8ClampedArray {
-    const result = new Uint8ClampedArray(originalData.length);
-
-    for (let i = 0; i < originalData.length; i++) {
-      result[i] = originalData[i] * (1 - intensity) + processedData[i] * intensity;
-    }
-
-    return result;
-  }
-
-
 }

package/src/infrastructure/utils/ImageEditorHistoryUtils.ts

@@ -0,0 +1,63 @@
+/**
+ * Infrastructure - Editor History Utils
+ * 
+ * Logic for managing editor state history and undo/redo
+ */
+
+import { type EditorState, type EditorHistory } from '../../domain/entities/EditorTypes';
+
+export class ImageEditorHistoryUtils {
+  static addToHistory(
+    state: EditorState,
+    newHistory: EditorHistory,
+    maxHistory: number = 50
+  ): EditorState {
+    const newHistoryArray = [...state.history.slice(0, state.historyIndex + 1), newHistory];
+
+    if (newHistoryArray.length > maxHistory) {
+      newHistoryArray.shift();
+    }
+
+    return {
+      ...state,
+      history: newHistoryArray,
+      historyIndex: newHistoryArray.length - 1,
+    };
+  }
+
+  static undo(state: EditorState): EditorState {
+    if (state.historyIndex <= 0) return state;
+
+    const newIndex = state.historyIndex - 1;
+    const historyState = state.history[newIndex];
+
+    return {
+      ...state,
+      layers: historyState.layers,
+      historyIndex: newIndex,
+      isDirty: true,
+    };
+  }
+
+  static redo(state: EditorState): EditorState {
+    if (state.historyIndex >= state.history.length - 1) return state;
+
+    const newIndex = state.historyIndex + 1;
+    const historyState = state.history[newIndex];
+
+    return {
+      ...state,
+      layers: historyState.layers,
+      historyIndex: newIndex,
+      isDirty: true,
+    };
+  }
+
+  static canUndo(state: EditorState): boolean {
+    return state.historyIndex > 0;
+  }
+
+  static canRedo(state: EditorState): boolean {
+    return state.historyIndex < state.history.length - 1;
+  }
+}

package/src/infrastructure/utils/ImageFilterUtils.ts

@@ -0,0 +1,152 @@
+/**
+ * Infrastructure - Filter Utils
+ * 
+ * Low-level filter implementations for raw pixel data
+ */
+
+export class ImageFilterUtils {
+  static applyBrightness(
+    data: Uint8ClampedArray,
+    brightness: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const adjustment = brightness * 2.55;
+
+    for (let i = 0; i < result.length; i += 4) {
+      result[i] = Math.min(255, Math.max(0, result[i] + adjustment));
+      result[i + 1] = Math.min(255, Math.max(0, result[i + 1] + adjustment));
+      result[i + 2] = Math.min(255, Math.max(0, result[i + 2] + adjustment));
+    }
+
+    return result;
+  }
+
+  static applyContrast(
+    data: Uint8ClampedArray,
+    contrast: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const factor = (259 * (contrast * 2.55 + 255)) / (255 * (259 - contrast * 2.55));
+
+    for (let i = 0; i < result.length; i += 4) {
+      result[i] = Math.min(255, Math.max(0, factor * (result[i] - 128) + 128));
+      result[i + 1] = Math.min(255, Math.max(0, factor * (result[i + 1] - 128) + 128));
+      result[i + 2] = Math.min(255, Math.max(0, factor * (result[i + 2] - 128) + 128));
+    }
+
+    return result;
+  }
+
+  static applySaturation(
+    data: Uint8ClampedArray,
+    saturation: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const adjustment = 1 + (saturation / 100);
+
+    for (let i = 0; i < result.length; i += 4) {
+      const r = result[i];
+      const g = result[i + 1];
+      const b = result[i + 2];
+
+      const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+
+      result[i] = Math.min(255, Math.max(0, gray + adjustment * (r - gray)));
+      result[i + 1] = Math.min(255, Math.max(0, gray + adjustment * (g - gray)));
+      result[i + 2] = Math.min(255, Math.max(0, gray + adjustment * (b - gray)));
+    }
+
+    return result;
+  }
+
+  static applyVintage(
+    data: Uint8ClampedArray,
+    intensity: number,
+    warmth: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const factor = intensity / 100;
+    const warmFactor = warmth / 100;
+
+    for (let i = 0; i < result.length; i += 4) {
+      let r = result[i];
+      let g = result[i + 1];
+      let b = result[i + 2];
+
+      const tr = 0.393 * r + 0.769 * g + 0.189 * b;
+      const tg = 0.349 * r + 0.686 * g + 0.168 * b;
+      const tb = 0.272 * r + 0.534 * g + 0.131 * b;
+
+      r = r * (1 - factor) + tr * factor;
+      g = g * (1 - factor) + tg * factor;
+      b = b * (1 - factor) + tb * factor;
+
+      if (warmFactor > 0) {
+        result[i] = Math.min(255, r + warmFactor * 20);
+        result[i + 1] = Math.min(255, g + warmFactor * 10);
+        result[i + 2] = Math.min(255, b * (1 - warmFactor * 0.3));
+      } else {
+        result[i] = r;
+        result[i + 1] = g;
+        result[i + 2] = Math.min(255, b * (1 - Math.abs(warmFactor) * 0.3));
+      }
+    }
+
+    return result;
+  }
+
+  static applyBlur(
+    data: Uint8ClampedArray,
+    radius: number,
+    width: number,
+    height: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(data);
+    const size = Math.floor(radius) || 1;
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        let r = 0, g = 0, b = 0, a = 0;
+        let count = 0;
+
+        for (let dy = -size; dy <= size; dy++) {
+          for (let dx = -size; dx <= size; dx++) {
+            const ny = y + dy;
+            const nx = x + dx;
+
+            if (ny >= 0 && ny < height && nx >= 0 && nx < width) {
+              const idx = (ny * width + nx) * 4;
+              r += data[idx];
+              g += data[idx + 1];
+              b += data[idx + 2];
+              a += data[idx + 3];
+              count++;
+            }
+          }
+        }
+
+        const idx = (y * width + x) * 4;
+        result[idx] = r / count;
+        result[idx + 1] = g / count;
+        result[idx + 2] = b / count;
+        result[idx + 3] = a / count;
+      }
+    }
+
+    return result;
+  }
+
+  static applyIntensity(
+    originalData: Uint8ClampedArray,
+    processedData: Uint8ClampedArray,
+    intensity: number
+  ): Uint8ClampedArray {
+    const result = new Uint8ClampedArray(originalData.length);
+
+    for (let i = 0; i < originalData.length; i++) {
+      result[i] = originalData[i] * (1 - intensity) + processedData[i] * intensity;
+    }
+
+    return result;
+  }
+}

package/src/infrastructure/utils/ImageTransformUtils.ts

@@ -0,0 +1,25 @@
+/**
+ * Infrastructure - Transform Utils
+ * 
+ * Internal utilities for image transformations
+ */
+
+import * as ImageManipulator from 'expo-image-manipulator';
+import type { SaveFormat, ImageSaveOptions } from '../../domain/entities/ImageTypes';
+import { IMAGE_CONSTANTS } from '../../domain/entities/ImageConstants';
+
+export class ImageTransformUtils {
+  static mapFormat(format?: SaveFormat): ImageManipulator.SaveFormat {
+    if (format === 'png') return ImageManipulator.SaveFormat.PNG;
+    if (format === 'webp') return ImageManipulator.SaveFormat.WEBP;
+    return ImageManipulator.SaveFormat.JPEG;
+  }
+
+  static buildSaveOptions(options?: ImageSaveOptions): ImageManipulator.SaveOptions {
+    return {
+      compress: options?.compress ?? IMAGE_CONSTANTS.defaultQuality,
+      format: this.mapFormat(options?.format),
+      base64: options?.base64,
+    };
+  }
+}

package/src/presentation/components/editor/FilterPickerSheet.tsx

@@ -0,0 +1,75 @@
+/**
+ * Presentation - Filter Picker Sheet
+ */
+
+import React, { forwardRef } from 'react';
+import { View, TouchableOpacity, ScrollView } from 'react-native';
+import { 
+  BottomSheetModal, 
+  AtomicText, 
+  AtomicIcon,
+  useAppDesignTokens, 
+  BottomSheetModalRef 
+} from '@umituz/react-native-design-system';
+import { FilterProcessor, type FilterPreset } from '../../../infrastructure/utils/FilterProcessor';
+
+export interface FilterPickerSheetProps {
+  onSelectFilter: (filterId: string) => void;
+  onDismiss: () => void;
+  activeFilterId?: string;
+  snapPoints?: string[];
+  title?: string;
+}
+
+export const FilterPickerSheet = forwardRef<BottomSheetModalRef, FilterPickerSheetProps>(
+  ({ onSelectFilter, onDismiss, activeFilterId, snapPoints = ['50%'], title = 'Filters' }, ref) => {
+    const tokens = useAppDesignTokens();
+    const presets = FilterProcessor.getPresets();
+
+    return (
+      <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
+        <View style={{ padding: tokens.spacing.lg, flex: 1 }}>
+          <AtomicText style={{ ...tokens.typography.headingSmall, marginBottom: tokens.spacing.md }}>
+            {title}
+          </AtomicText>
+
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <View style={{ flexDirection: 'row', gap: tokens.spacing.md }}>
+              {presets.map((preset: FilterPreset) => (
+                <TouchableOpacity
+                  key={preset.id}
+                  onPress={() => onSelectFilter(preset.id)}
+                  style={{
+                    width: 100,
+                    height: 120,
+                    backgroundColor: activeFilterId === preset.id ? tokens.colors.primaryContainer : tokens.colors.surfaceVariant,
+                    borderRadius: tokens.borderRadius.lg,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderWidth: 2,
+                    borderColor: activeFilterId === preset.id ? tokens.colors.primary : 'transparent',
+                  }}
+                >
+                  <AtomicIcon 
+                    name="color-filter" 
+                    size={32} 
+                    color={activeFilterId === preset.id ? 'primary' : 'secondary'} 
+                  />
+                  <AtomicText style={{ 
+                    ...tokens.typography.labelSmall, 
+                    marginTop: tokens.spacing.sm,
+                    color: activeFilterId === preset.id ? tokens.colors.primary : tokens.colors.textSecondary
+                  }}>
+                    {preset.name}
+                  </AtomicText>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </ScrollView>
+        </View>
+      </BottomSheetModal>
+    );
+  }
+);
+
+FilterPickerSheet.displayName = 'FilterPickerSheet';