@umituz/react-native-image 1.1.6 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-image",
-  "version": "1.1.6",
+  "version": "1.2.2",
   "description": "Image manipulation and viewing for React Native apps - resize, crop, rotate, flip, compress, gallery viewer",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -29,24 +29,39 @@
     "url": "https://github.com/umituz/react-native-image"
   },
   "peerDependencies": {
+    "@umituz/react-native-design-system-atoms": "latest",
+    "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-filesystem": "latest",
+    "expo-image": ">=1.0.0",
     "expo-image-manipulator": ">=11.0.0",
-    "react": ">=18.2.0",
-    "react-native": ">=0.74.0",
-    "react-native-image-viewing": ">=0.2.0"
+    "react": ">=19.1.0",
+    "react-native": ">=0.81.5",
+    "react-native-image-viewing": ">=0.2.0",
+    "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
+    "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-community/datetimepicker": "^8.5.1",
+    "@react-native-community/slider": "^4.5.5",
     "@react-native/typescript-config": "^0.83.0",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
-    "@umituz/react-native-design-system-theme": "^1.12.0",
-    "@umituz/react-native-filesystem": "^2.1.1",
+    "@umituz/react-native-design-system-atoms": "latest",
+    "@umituz/react-native-design-system-responsive": "^1.9.0",
+    "@umituz/react-native-design-system-theme": "latest",
+    "@umituz/react-native-design-system-typography": "^1.10.0",
+    "@umituz/react-native-filesystem": "latest",
+    "@umituz/react-native-icons": "^1.1.2",
     "expo-file-system": "^19.0.21",
+    "expo-image": "~3.0.11",
     "expo-image-manipulator": "^14.0.8",
-    "react": "^18.2.0",
-    "react-native": "^0.74.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-image-viewing": "^0.2.2",
-    "typescript": "^5.3.3"
+    "react-native-safe-area-context": "~5.6.0",
+    "typescript": "^5.3.3",
+    "zustand": "^5.0.9"
   },
   "publishConfig": {
     "access": "public"

package/src/domain/entities/EditorTypes.ts

@@ -0,0 +1,180 @@
+/**
+ * Domain - Advanced Editor Types
+ */
+
+export enum EditorTool {
+  MOVE = 'move',
+  BRUSH = 'brush',
+  ERASER = 'eraser',
+  TEXT = 'text',
+  SHAPE = 'shape',
+  CROP = 'crop',
+  FILTER = 'filter',
+  STICKER = 'sticker',
+  SELECT = 'select',
+}
+
+export enum ShapeType {
+  RECTANGLE = 'rectangle',
+  CIRCLE = 'circle',
+  LINE = 'line',
+  ARROW = 'arrow',
+  TRIANGLE = 'triangle',
+  STAR = 'star',
+  HEART = 'heart',
+}
+
+export enum BrushStyle {
+  NORMAL = 'normal',
+  MARKER = 'marker',
+  SPRAY = 'spray',
+  PENCIL = 'pencil',
+  CALIGRAPHY = 'caligraphy',
+}
+
+export interface EditorPoint {
+  x: number;
+  y: number;
+}
+
+export interface EditorDimensions {
+  width: number;
+  height: number;
+}
+
+export interface EditorStroke {
+  points: EditorPoint[];
+  color: string;
+  size: number;
+  style: BrushStyle;
+  opacity: number;
+}
+
+export interface EditorShape {
+  type: ShapeType;
+  startPoint: EditorPoint;
+  endPoint: EditorPoint;
+  color: string;
+  strokeWidth: number;
+  fillColor?: string;
+  opacity: number;
+  rotation?: number;
+}
+
+export interface EditorText {
+  id: string;
+  text: string;
+  position: EditorPoint;
+  fontSize: number;
+  fontFamily: string;
+  color: string;
+  backgroundColor?: string;
+  rotation: number;
+  opacity: number;
+  maxWidth?: number;
+  textAlign: 'left' | 'center' | 'right';
+  fontWeight: 'normal' | 'bold';
+  fontStyle: 'normal' | 'italic';
+}
+
+export interface EditorSticker {
+  id: string;
+  uri: string;
+  position: EditorPoint;
+  size: EditorDimensions;
+  rotation: number;
+  opacity: number;
+  scale: number;
+}
+
+export interface EditorLayer {
+  id: string;
+  name: string;
+  visible: boolean;
+  opacity: number;
+  locked: boolean;
+  elements: Array<{
+    type: 'stroke' | 'shape' | 'text' | 'sticker';
+    data: EditorStroke | EditorShape | EditorText | EditorSticker;
+  }>;
+}
+
+export interface EditorSelection {
+  bounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  elements: string[];
+}
+
+export interface EditorHistory {
+  id: string;
+  timestamp: Date;
+  layers: EditorLayer[];
+  thumbnail?: string;
+}
+
+export interface EditorCropArea {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  aspectRatio?: number;
+}
+
+export interface EditorFilter {
+  type: string;
+  intensity: number;
+  preview?: string;
+}
+
+export interface EditorState {
+  originalUri: string;
+  currentUri?: string;
+  tool: EditorTool;
+  selectedLayer?: string;
+  layers: EditorLayer[];
+  history: EditorHistory[];
+  historyIndex: number;
+  selection?: EditorSelection;
+  cropArea?: EditorCropArea;
+  activeFilter?: EditorFilter;
+  isDirty: boolean;
+  dimensions: EditorDimensions;
+  zoom: number;
+  pan: EditorPoint;
+}
+
+export interface EditorOptions {
+  maxLayers?: number;
+  maxHistory?: number;
+  enableUndo?: boolean;
+  enableRedo?: boolean;
+  enableFilters?: boolean;
+  enableShapes?: boolean;
+  enableText?: boolean;
+  enableStickers?: boolean;
+  enableCrop?: boolean;
+  brushSizeRange?: [number, number];
+  strokeWidthRange?: [number, number];
+  fontSizeRange?: [number, number];
+  defaultColors?: string[];
+  stickerPacks?: string[];
+  customFonts?: string[];
+}
+
+export interface EditorEvent {
+  type: 'toolChange' | 'layerAdd' | 'layerRemove' | 'layerUpdate' | 'selectionChange' | 'historyChange';
+  data: any;
+}
+
+export interface EditorExportOptions {
+  format: 'jpeg' | 'png' | 'webp';
+  quality: number;
+  backgroundColor?: string;
+  includeHiddenLayers?: boolean;
+  flattenLayers?: boolean;
+  maxSize?: number;
+}

package/src/index.ts

@@ -89,7 +89,18 @@ export { ImageGallery, type ImageGalleryProps } from './presentation/components/
 export { useImage } from './presentation/hooks/useImage';
 export { useImageTransform } from './presentation/hooks/useImageTransform';
 export { useImageConversion } from './presentation/hooks/useImageConversion';
+// =============================================================================
+// PRESENTATION LAYER - Editor Components & Hooks
+// =============================================================================
+
 export { useImageEditor } from './presentation/hooks/useImageEditor';
+export { useEditorTools } from './presentation/hooks/useEditorTools';
+export { Editor } from './presentation/components/Editor';
+export { EditorCanvas } from './presentation/components/EditorCanvas';
+export { EditorToolbar } from './presentation/components/EditorToolbar';
+export { EditorPanel } from './presentation/components/EditorPanel';
+export { CropComponent } from './presentation/components/CropComponent';
+export { FilterSlider } from './presentation/components/FilterSlider';
 
 export {
   useImageGallery,

package/src/infrastructure/services/ImageEditorService.ts

@@ -0,0 +1,274 @@
+/**
+ * Infrastructure - Advanced Editor Service
+ * 
+ * Core editing functionality with history management
+ */
+
+import { EditorTool, type EditorState, type EditorLayer, type EditorHistory, type EditorOptions } from '../../domain/entities/EditorTypes';
+import type { ImageManipulationResult } from '../../domain/entities/ImageTypes';
+import { ImageValidator } from '../utils/ImageValidator';
+import { ImageErrorHandler, IMAGE_ERROR_CODES } from '../utils/ImageErrorHandler';
+
+export class ImageEditorService {
+  private static generateId(): string {
+    return Math.random().toString(36).substr(2, 9);
+  }
+
+  static createInitialState(
+    uri: string,
+    dimensions: { width: number; height: number },
+    options: EditorOptions = {}
+  ): EditorState {
+    const defaultLayer: EditorLayer = {
+      id: 'background',
+      name: 'Background',
+      visible: true,
+      opacity: 1,
+      locked: true,
+      elements: [],
+    };
+
+    return {
+      originalUri: uri,
+      tool: EditorTool.MOVE,
+      layers: [defaultLayer],
+      history: [{
+        id: ImageEditorService.generateId(),
+        timestamp: new Date(),
+        layers: [defaultLayer],
+      }],
+      historyIndex: 0,
+      isDirty: false,
+      dimensions,
+      zoom: 1,
+      pan: { x: 0, y: 0 },
+    };
+  }
+
+  static addLayer(
+    state: EditorState,
+    name?: string
+  ): EditorState {
+    const newLayer: EditorLayer = {
+      id: ImageEditorService.generateId(),
+      name: name || `Layer ${state.layers.length}`,
+      visible: true,
+      opacity: 1,
+      locked: false,
+      elements: [],
+    };
+
+    const newHistory: EditorHistory = {
+      id: ImageEditorService.generateId(),
+      timestamp: new Date(),
+      layers: [...state.layers, newLayer],
+    };
+
+    const newHistoryState = ImageEditorService.addToHistory(state, newHistory);
+
+    return {
+      ...newHistoryState,
+      layers: [...state.layers, newLayer],
+      selectedLayer: newLayer.id,
+      isDirty: true,
+    };
+  }
+
+  static removeLayer(
+    state: EditorState,
+    layerId: string
+  ): EditorState {
+    if (state.layers.length <= 1) {
+      throw ImageErrorHandler.createError(
+        'Cannot remove the last layer',
+        IMAGE_ERROR_CODES.VALIDATION_ERROR,
+        'removeLayer'
+      );
+    }
+
+    const newLayers = state.layers.filter(layer => layer.id !== layerId);
+    const newHistory: EditorHistory = {
+      id: ImageEditorService.generateId(),
+      timestamp: new Date(),
+      layers: newLayers,
+    };
+
+    const newHistoryState = ImageEditorService.addToHistory(state, newHistory);
+
+    return {
+      ...newHistoryState,
+      layers: newLayers,
+      selectedLayer: newLayers[0].id,
+      isDirty: true,
+    };
+  }
+
+  static updateLayer(
+    state: EditorState,
+    layerId: string,
+    updates: Partial<EditorLayer>
+  ): EditorState {
+    const newLayers = state.layers.map(layer =>
+      layer.id === layerId ? { ...layer, ...updates } : layer
+    );
+
+    const newHistory: EditorHistory = {
+      id: ImageEditorService.generateId(),
+      timestamp: new Date(),
+      layers: newLayers,
+    };
+
+    const newHistoryState = ImageEditorService.addToHistory(state, newHistory);
+
+    return {
+      ...newHistoryState,
+      layers: newLayers,
+      isDirty: true,
+    };
+  }
+
+  static addElementToLayer(
+    state: EditorState,
+    layerId: string,
+    element: any
+  ): EditorState {
+    const targetLayer = state.layers.find(layer => layer.id === layerId);
+    if (!targetLayer) {
+      throw ImageErrorHandler.createError(
+        'Layer not found',
+        IMAGE_ERROR_CODES.VALIDATION_ERROR,
+        'addElementToLayer'
+      );
+    }
+
+    if (targetLayer.locked) {
+      throw ImageErrorHandler.createError(
+        'Cannot add element to locked layer',
+        IMAGE_ERROR_CODES.VALIDATION_ERROR,
+        'addElementToLayer'
+      );
+    }
+
+    const newLayers = state.layers.map(layer =>
+      layer.id === layerId
+        ? { ...layer, elements: [...layer.elements, element] }
+        : layer
+    );
+
+    const newHistory: EditorHistory = {
+      id: ImageEditorService.generateId(),
+      timestamp: new Date(),
+      layers: newLayers,
+    };
+
+    const newHistoryState = ImageEditorService.addToHistory(state, newHistory);
+
+    return {
+      ...newHistoryState,
+      layers: newLayers,
+      isDirty: true,
+    };
+  }
+
+  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,
+    };
+  }
+
+  private static addToHistory(
+    state: EditorState,
+    newHistory: EditorHistory,
+    maxHistory: number = 50
+  ): EditorState {
+    const newHistoryArray = [...state.history.slice(0, state.historyIndex + 1), newHistory];
+
+    // Keep only the last maxHistory states
+    if (newHistoryArray.length > maxHistory) {
+      newHistoryArray.shift();
+    }
+
+    return {
+      ...state,
+      history: newHistoryArray,
+      historyIndex: newHistoryArray.length - 1,
+    };
+  }
+
+  static setTool(state: EditorState, tool: EditorTool): EditorState {
+    return { ...state, tool };
+  }
+
+  static setSelectedLayer(state: EditorState, layerId?: string): EditorState {
+    return { ...state, selectedLayer: layerId };
+  }
+
+  static setZoom(state: EditorState, zoom: number): EditorState {
+    return { ...state, zoom: Math.max(0.1, Math.min(5, zoom)) };
+  }
+
+  static setPan(state: EditorState, pan: { x: number; y: number }): EditorState {
+    return { ...state, pan };
+  }
+
+  static canUndo(state: EditorState): boolean {
+    return state.historyIndex > 0;
+  }
+
+  static canRedo(state: EditorState): boolean {
+    return state.historyIndex < state.history.length - 1;
+  }
+
+  static getVisibleLayers(state: EditorState): EditorLayer[] {
+    return state.layers.filter(layer => layer.visible);
+  }
+
+  static getActiveLayers(state: EditorState): EditorLayer[] {
+    return state.layers.filter(layer => layer.visible && !layer.locked);
+  }
+
+  static exportState(state: EditorState): EditorState {
+    return {
+      ...state,
+      currentUri: undefined,
+    };
+  }
+
+  static importState(data: any, uri: string): EditorState {
+    try {
+      return {
+        ...data,
+        originalUri: uri,
+        currentUri: undefined,
+      };
+    } catch (error) {
+      throw ImageErrorHandler.handleUnknownError(error, 'importState');
+    }
+  }
+}