@umituz/react-native-photo-editor 2.0.22 → 2.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-photo-editor",
-  "version": "2.0.22",
+  "version": "2.0.24",
   "description": "A powerful, generic photo editor for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/PhotoEditor.tsx

@@ -1,40 +1,36 @@
-import React, { useMemo, useCallback } from "react";
+/**
+ * Photo Editor Component
+ * Main entry point for the photo editor
+ */
+
+import React, { useCallback, useMemo } from "react";
 import { View, ScrollView, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 
-import EditorCanvas from "./components/EditorCanvas";
-import { EditorToolbar } from "./components/EditorToolbar";
-import { FontControls } from "./components/FontControls";
-import { LayerManager } from "./components/LayerManager";
-import { TextEditorSheet } from "./components/TextEditorSheet";
-import { StickerPicker } from "./components/StickerPicker";
-import { FilterPicker } from "./components/FilterPicker";
-import { AdjustmentsSheet } from "./components/AdjustmentsSheet";
-import { AIMagicSheet } from "./components/AIMagicSheet";
-import { createEditorStyles } from "./styles";
-import { usePhotoEditorUI } from "./hooks/usePhotoEditorUI";
-import { Layer, ImageFilters } from "./types";
+import { EditorCanvas } from "./presentation/components/EditorCanvas";
+import { EditorToolbar } from "./presentation/components/EditorToolbar";
+import { FontControls } from "./presentation/components/FontControls";
+import { TextEditorSheet } from "./presentation/components/sheets/TextEditorSheet";
+import { StickerPicker } from "./presentation/components/sheets/StickerPicker";
+import { FilterSheet } from "./presentation/components/sheets/FilterSheet";
+import { AdjustmentsSheet } from "./presentation/components/sheets/AdjustmentsSheet";
+import { LayerManager } from "./presentation/components/sheets/LayerManager";
+import { AIMagicSheet } from "./presentation/components/sheets/AIMagicSheet";
+import { useEditorUI } from "./application/hooks/useEditorUI";
 import { DEFAULT_FONTS } from "./constants";
 
 export interface PhotoEditorProps {
   imageUri: string;
-  /**
-   * Called when the user taps Save.
-   * Receives the original imageUri, current layers, and active filters
-   * so the host app can composite/export however it needs.
-   */
-  onSave?: (uri: string, layers: Layer[], filters: ImageFilters) => void;
+  onSave?: (uri: string, layers: any[], filters: Record<string, number>) => void;
   onClose: () => void;
   title?: string;
-  /** Render extra tools below the canvas. Receives editor state helpers. */
-  customTools?: React.ReactNode | ((ui: ReturnType<typeof usePhotoEditorUI>) => React.ReactNode);
+  customTools?: React.ReactNode | ((ui: ReturnType<typeof useEditorUI>) => React.ReactNode);
   initialCaption?: string;
   t: (key: string) => string;
   fonts?: readonly string[];
-  /** Pass a handler to enable the AI caption feature */
   onAICaption?: (style: string) => Promise<string> | void;
 }
 
@@ -51,14 +47,35 @@ export function PhotoEditor({
 }: PhotoEditorProps) {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
-  const styles = useMemo(
-    () => createEditorStyles(tokens, insets),
-    [tokens, insets],
-  );
-  const ui = usePhotoEditorUI(initialCaption);
+  const ui = useEditorUI(initialCaption);
+
+  const styles = useMemo(() => ({
+    container: {
+      flex: 1,
+      backgroundColor: tokens.colors.surface,
+      paddingTop: insets.top,
+    },
+    header: {
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      justifyContent: "space-between" as const,
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      borderBottomWidth: 1,
+      borderBottomColor: tokens.colors.border,
+    },
+    headerTitle: {
+      flex: 1,
+      textAlign: "center",
+    },
+    scrollContent: {
+      padding: tokens.spacing.md,
+      gap: tokens.spacing.md,
+    },
+  }), [tokens, insets]);
 
   const handleSave = useCallback(
-    () => onSave?.(imageUri, ui.layers, ui.filters),
+    () => onSave?.(imageUri, ui.layers.map(l => l.toJSON()), ui.filters),
     [onSave, imageUri, ui.layers, ui.filters],
   );
 
@@ -66,21 +83,13 @@ export function PhotoEditor({
     <View style={styles.container}>
       {/* Header */}
       <View style={styles.header}>
-        <TouchableOpacity
-          onPress={onClose}
-          accessibilityLabel="Close editor"
-          accessibilityRole="button"
-        >
+        <TouchableOpacity onPress={onClose} accessibilityLabel="Close editor" accessibilityRole="button">
           <AtomicIcon name="close" size="md" color="textPrimary" />
         </TouchableOpacity>
         <AtomicText type="headlineSmall" style={styles.headerTitle}>
           {title}
         </AtomicText>
-        <TouchableOpacity
-          onPress={handleSave}
-          accessibilityLabel="Save"
-          accessibilityRole="button"
-        >
+        <TouchableOpacity onPress={handleSave} accessibilityLabel="Save" accessibilityRole="button">
           <AtomicText fontWeight="bold" color="primary">
             {t("common.save") || "Save"}
           </AtomicText>
@@ -95,7 +104,6 @@ export function PhotoEditor({
           filters={ui.filters}
           onLayerTap={ui.handleTextLayerTap}
           onLayerTransform={ui.handleLayerTransform}
-          styles={styles}
         />
 
         {typeof customTools === "function" ? customTools(ui) : customTools}
@@ -106,7 +114,6 @@ export function PhotoEditor({
           fonts={fonts}
           onFontSizeChange={ui.setFontSize}
           onFontSelect={ui.setSelectedFont}
-          styles={styles}
         />
       </ScrollView>
 
@@ -121,7 +128,6 @@ export function PhotoEditor({
         onRedo={ui.redo}
         canUndo={ui.canUndo}
         canRedo={ui.canRedo}
-        styles={styles}
         t={t}
       />
 
@@ -148,9 +154,13 @@ export function PhotoEditor({
       </BottomSheetModal>
 
       <BottomSheetModal ref={ui.filterSheetRef} snapPoints={["40%"]}>
-        <FilterPicker
+        <FilterSheet
           selectedFilter={ui.selectedFilter}
-          onSelectFilter={ui.handleSelectFilter}
+          onSelectFilter={(option) => {
+            ui.setSelectedFilter(option.id);
+            ui.updateFilters(option.filters);
+            ui.filterSheetRef.current?.dismiss();
+          }}
         />
       </BottomSheetModal>
 
@@ -182,3 +192,5 @@ export function PhotoEditor({
     </View>
   );
 }
+
+export default PhotoEditor;

package/src/application/hooks/useEditor.ts

@@ -0,0 +1,67 @@
+/**
+ * Use Editor Hook
+ * Main editor hook that wraps the store
+ */
+
+import { useMemo } from "react";
+import { useEditorStore } from "../stores/EditorStore";
+import { Layer } from "../../domain/entities/Layer";
+import type { TextLayerData } from "../../domain/entities/Layer";
+import type { Transform } from "../../domain/entities/Transform";
+import type { FilterValues } from "../../domain/entities/Filters";
+
+export function useEditor() {
+  const store = useEditorStore();
+
+  return useMemo(() => ({
+    // State
+    layers: store.layers,
+    activeLayerId: store.activeLayerId,
+    activeLayer: store.activeLayer,
+    filters: store.filters,
+    canUndo: store.canUndo,
+    canRedo: store.canRedo,
+
+    // History actions
+    undo: store.undo,
+    redo: store.redo,
+
+    // Layer actions
+    addTextLayer: store.addTextLayer,
+    addStickerLayer: store.addStickerLayer,
+    updateLayer: store.updateLayer,
+    deleteLayer: store.deleteLayer,
+    duplicateLayer: store.duplicateLayer,
+    moveLayerUp: store.moveLayerUp,
+    moveLayerDown: store.moveLayerDown,
+    selectLayer: store.selectLayer,
+
+    // Filter actions
+    updateFilters: store.updateFilters,
+    resetFilters: store.resetFilters,
+  }), [
+    store.layers,
+    store.activeLayerId,
+    store.activeLayer,
+    store.filters,
+    store.canUndo,
+    store.canRedo,
+    store.undo,
+    store.redo,
+    store.addTextLayer,
+    store.addStickerLayer,
+    store.updateLayer,
+    store.deleteLayer,
+    store.duplicateLayer,
+    store.moveLayerUp,
+    store.moveLayerDown,
+    store.selectLayer,
+    store.updateFilters,
+    store.resetFilters,
+  ]);
+}
+
+export type { Layer } from "../../domain/entities/Layer";
+export type { Transform } from "../../domain/entities/Transform";
+export type { FilterValues } from "../../domain/entities/Filters";
+export type { TextLayerData } from "../../domain/entities/Layer";

package/src/application/hooks/useEditorUI.ts

@@ -0,0 +1,145 @@
+/**
+ * Use Editor UI Hook
+ * UI-specific state management (fonts, sheets, editing state)
+ */
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import type { BottomSheetModalRef } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useEditor } from "./useEditor";
+import type { TextAlign } from "../../domain/entities/Layer";
+
+export function useEditorUI(initialCaption?: string) {
+  const tokens = useAppDesignTokens();
+  const editor = useEditor();
+
+  // Bottom sheet refs
+  const textEditorSheetRef = useRef<BottomSheetModalRef>(null);
+  const stickerSheetRef = useRef<BottomSheetModalRef>(null);
+  const filterSheetRef = useRef<BottomSheetModalRef>(null);
+  const adjustmentsSheetRef = useRef<BottomSheetModalRef>(null);
+  const layerSheetRef = useRef<BottomSheetModalRef>(null);
+  const aiSheetRef = useRef<BottomSheetModalRef>(null);
+
+  // Font/size state
+  const [selectedFont, setSelectedFont] = useState<string>("System");
+  const [fontSize, setFontSize] = useState(48);
+
+  // Text editing state
+  const [editingText, setEditingText] = useState("");
+  const [editingColor, setEditingColor] = useState<string>(tokens.colors.textPrimary);
+  const [editingAlign, setEditingAlign] = useState<TextAlign>("center");
+  const [editingBold, setEditingBold] = useState(false);
+  const [editingItalic, setEditingItalic] = useState(false);
+
+  // Filter state
+  const [selectedFilter, setSelectedFilter] = useState("none");
+
+  // Apply initial caption
+  const prevInitialCaptionRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (initialCaption && initialCaption !== prevInitialCaptionRef.current) {
+      prevInitialCaptionRef.current = initialCaption;
+      editor.addTextLayer({
+        text: initialCaption,
+        color: tokens.colors.textPrimary,
+      });
+    }
+  }, [initialCaption, editor]);
+
+  // Handle text layer tap
+  const handleTextLayerTap = useCallback((layerId: string) => {
+    editor.selectLayer(layerId);
+    const layer = editor.layers.find(l => l.id === layerId);
+    if (layer?.type === "text") {
+      setEditingText(layer.text ?? "");
+      setFontSize(layer.fontSize ?? 48);
+      setEditingColor(layer.color ?? tokens.colors.textPrimary);
+      setEditingAlign(layer.textAlign ?? "center");
+      setEditingBold(layer.isBold ?? false);
+      setEditingItalic(layer.isItalic ?? false);
+      textEditorSheetRef.current?.present();
+    }
+  }, [editor, tokens.colors.textPrimary]);
+
+  // Handle save text
+  const handleSaveText = useCallback(() => {
+    if (editor.activeLayerId) {
+      editor.updateLayer(editor.activeLayerId, {
+        text: editingText,
+        fontSize,
+        fontFamily: selectedFont,
+        color: editingColor,
+        textAlign: editingAlign,
+        isBold: editingBold,
+        isItalic: editingItalic,
+      });
+    }
+    textEditorSheetRef.current?.dismiss();
+  }, [editor, editingText, fontSize, selectedFont, editingColor, editingAlign, editingBold, editingItalic]);
+
+  // Handle add text
+  const handleAddText = useCallback(() => {
+    const color = tokens.colors.textPrimary;
+    setEditingText("");
+    setEditingColor(color);
+    setEditingAlign("center");
+    setEditingBold(false);
+    setEditingItalic(false);
+    editor.addTextLayer({ fontSize, fontFamily: selectedFont, color });
+    textEditorSheetRef.current?.present();
+  }, [editor, fontSize, selectedFont, tokens.colors.textPrimary]);
+
+  // Handle select sticker
+  const handleSelectSticker = useCallback((uri: string) => {
+    editor.addStickerLayer(uri);
+    stickerSheetRef.current?.dismiss();
+  }, [editor]);
+
+  // Handle layer transform
+  const handleLayerTransform = useCallback((layerId: string, transform: Partial<Transform>) => {
+    editor.updateLayer(layerId, transform);
+  }, [editor]);
+
+  return {
+    // Editor state
+    ...editor,
+
+    // Sheet refs
+    textEditorSheetRef,
+    stickerSheetRef,
+    filterSheetRef,
+    adjustmentsSheetRef,
+    layerSheetRef,
+    aiSheetRef,
+
+    // Font/size
+    selectedFont,
+    setSelectedFont,
+    fontSize,
+    setFontSize,
+
+    // Text editing
+    editingText,
+    setEditingText,
+    editingColor,
+    setEditingColor,
+    editingAlign,
+    setEditingAlign,
+    editingBold,
+    setEditingBold,
+    editingItalic,
+    setEditingItalic,
+
+    // Filter
+    selectedFilter,
+    setSelectedFilter,
+
+    // Handlers
+    handleTextLayerTap,
+    handleSaveText,
+    handleAddText,
+    handleSelectSticker,
+    handleLayerTransform,
+  };
+}

package/src/application/stores/EditorStore.ts

@@ -0,0 +1,137 @@
+/**
+ * Editor Store
+ * Central state management for the editor (React hooks based)
+ */
+
+import { useState, useCallback, useMemo } from "react";
+import { Layer, TextLayer, StickerLayer } from "../../domain/entities/Layer";
+import { FiltersVO, FilterValues, DEFAULT_FILTERS } from "../../domain/entities/Filters";
+import { HistoryService, HistoryState } from "../../domain/services/HistoryService";
+import { LayerService } from "../../domain/services/LayerService";
+import type { Transform } from "../../domain/entities/Transform";
+
+const historyService = new HistoryService<Layer[]>(20);
+const layerService = new LayerService();
+
+export function useEditorStore() {
+  // History state
+  const [history, setHistory] = useState<HistoryState<Layer[]>>(() =>
+    historyService.createInitialState([])
+  );
+  const [activeLayerId, setActiveLayerId] = useState<string | null>(null);
+  const [filters, setFilters] = useState<FiltersVO>(FiltersVO.default());
+
+  // History actions
+  const pushLayers = useCallback((layers: Layer[]) => {
+    setHistory((prev) => historyService.push(prev, layers));
+  }, []);
+
+  const undo = useCallback(() => {
+    setHistory((prev) => historyService.undo(prev));
+  }, []);
+
+  const redo = useCallback(() => {
+    setHistory((prev) => historyService.redo(prev));
+  }, []);
+
+  // Layer actions
+  const addTextLayer = useCallback((overrides?: Partial<Omit<TextLayerData, "id" | "type">>) => {
+    const layer = layerService.createTextLayer({
+      ...overrides,
+      zIndex: history.present.length,
+    });
+    pushLayers([...history.present, layer]);
+    setActiveLayerId(layer.id);
+    return layer.id;
+  }, [history.present, pushLayers]);
+
+  const addStickerLayer = useCallback((uri: string) => {
+    const layer = layerService.createStickerLayer(uri, {
+      zIndex: history.present.length,
+    });
+    pushLayers([...history.present, layer]);
+    setActiveLayerId(layer.id);
+    return layer.id;
+  }, [history.present, pushLayers]);
+
+  const updateLayer = useCallback((id: string, updates: Partial<Transform>) => {
+    const layers = layerService.updateLayer(history.present, id, updates);
+    pushLayers(layers);
+  }, [history.present, pushLayers]);
+
+  const deleteLayer = useCallback((id: string) => {
+    const layers = layerService.deleteLayer(history.present, id);
+    pushLayers(layers);
+    if (activeLayerId === id) {
+      setActiveLayerId(layers[0]?.id ?? null);
+    }
+  }, [history.present, activeLayerId, pushLayers]);
+
+  const duplicateLayer = useCallback((id: string) => {
+    const layers = layerService.duplicateLayer(history.present, id);
+    pushLayers(layers);
+    const newLayer = layers[layers.length - 1];
+    setActiveLayerId(newLayer.id);
+  }, [history.present, pushLayers]);
+
+  const moveLayerUp = useCallback((id: string) => {
+    const layers = layerService.moveLayerUp(history.present, id);
+    pushLayers(layers);
+  }, [history.present, pushLayers]);
+
+  const moveLayerDown = useCallback((id: string) => {
+    const layers = layerService.moveLayerDown(history.present, id);
+    pushLayers(layers);
+  }, [history.present, pushLayers]);
+
+  const selectLayer = useCallback((id: string | null) => {
+    setActiveLayerId(id);
+  }, []);
+
+  // Filter actions
+  const updateFilters = useCallback((updates: Partial<FilterValues>) => {
+    const current = filters.toJSON();
+    setFilters(FiltersVO.from({ ...current, ...updates }));
+  }, [filters]);
+
+  const resetFilters = useCallback(() => {
+    setFilters(FiltersVO.default());
+  }, []);
+
+  // Getters
+  const layers = useMemo(() => layerService.sortByZIndex(history.present), [history.present]);
+  const activeLayer = useMemo(() =>
+    history.present.find(l => l.id === activeLayerId) ?? null,
+  [history.present, activeLayerId]
+  );
+  const canUndo = useMemo(() => historyService.canUndo(history), [history]);
+  const canRedo = useMemo(() => historyService.canRedo(history), [history]);
+
+  return {
+    // State
+    layers,
+    activeLayerId,
+    activeLayer,
+    filters: filters.toJSON(),
+    canUndo,
+    canRedo,
+
+    // History actions
+    undo,
+    redo,
+
+    // Layer actions
+    addTextLayer,
+    addStickerLayer,
+    updateLayer,
+    deleteLayer,
+    duplicateLayer,
+    moveLayerUp,
+    moveLayerDown,
+    selectLayer,
+
+    // Filter actions
+    updateFilters,
+    resetFilters,
+  };
+}

package/src/constants.ts

@@ -1,10 +1,7 @@
 /**
- * Default constants for Photo Editor
- * These can be overridden via props
+ * Default Constants for Photo Editor
  */
 
-import type { ImageFilters } from "./types";
-
 export const DEFAULT_TEXT_COLORS = [
   "#FFFFFF", "#000000", "#888888", "#CCCCCC",
   "#FF3B30", "#FF9500", "#FFCC00", "#FF2D55",
@@ -28,54 +25,6 @@ export const DEFAULT_STICKERS = [
   "🌙", "💫",
 ] as const;
 
-export interface FilterOption {
-  id: string;
-  name: string;
-  /** Valid AtomicIcon name */
-  icon: string;
-  /** Partial ImageFilters applied when this filter is selected */
-  filters: Partial<ImageFilters>;
-}
-
-export const DEFAULT_FILTERS: FilterOption[] = [
-  {
-    id: "none",
-    name: "None",
-    icon: "close",
-    filters: { brightness: 1, contrast: 1, saturation: 1, sepia: 0, grayscale: 0 },
-  },
-  {
-    id: "sepia",
-    name: "Sepia",
-    icon: "brush",
-    filters: { sepia: 0.7, saturation: 0.8 },
-  },
-  {
-    id: "grayscale",
-    name: "B&W",
-    icon: "swap-horizontal",
-    filters: { grayscale: 1, saturation: 0 },
-  },
-  {
-    id: "vintage",
-    name: "Vintage",
-    icon: "flash",
-    filters: { sepia: 0.3, contrast: 1.1, brightness: 0.9 },
-  },
-  {
-    id: "warm",
-    name: "Warm",
-    icon: "sparkles",
-    filters: { brightness: 1.05, saturation: 1.2 },
-  },
-  {
-    id: "cool",
-    name: "Cool",
-    icon: "image",
-    filters: { contrast: 1.05, brightness: 1.02, saturation: 0.85 },
-  },
-];
-
 export const DEFAULT_AI_STYLES = [
   { id: "viral", label: "✨ Viral", desc: "Catchy & shareable" },
   { id: "funny", label: "😂 Funny", desc: "Humor that connects" },
@@ -84,3 +33,7 @@ export const DEFAULT_AI_STYLES = [
   { id: "sarcastic", label: "😏 Sarcastic", desc: "Witty & ironic" },
   { id: "relatable", label: "🎯 Relatable", desc: "Everyone gets it" },
 ] as const;
+
+// Filter presets will be in the presentation layer
+export { DEFAULT_FILTERS } from "./presentation/components/sheets/FilterSheet";
+export type { FilterOption } from "./presentation/components/sheets/FilterSheet";

package/src/domain/entities/Filters.ts

@@ -0,0 +1,72 @@
+/**
+ * Filters Value Object
+ * Represents image filter adjustments
+ */
+
+export interface FilterValues {
+  brightness: number;
+  contrast: number;
+  saturation: number;
+  sepia: number;
+  grayscale: number;
+  hueRotate?: number;
+}
+
+export const DEFAULT_FILTERS: FilterValues = {
+  brightness: 1,
+  contrast: 1,
+  saturation: 1,
+  sepia: 0,
+  grayscale: 0,
+};
+
+export class FiltersVO {
+  constructor(private readonly value: FilterValues) {}
+
+  get brightness(): number { return this.value.brightness; }
+  get contrast(): number { return this.value.contrast; }
+  get saturation(): number { return this.value.saturation; }
+  get sepia(): number { return this.value.sepia; }
+  get grayscale(): number { return this.value.grayscale; }
+  get hueRotate(): number | undefined { return this.value.hueRotate; }
+
+  withBrightness(brightness: number): FiltersVO {
+    return new FiltersVO({ ...this.value, brightness });
+  }
+
+  withContrast(contrast: number): FiltersVO {
+    return new FiltersVO({ ...this.value, contrast });
+  }
+
+  withSaturation(saturation: number): FiltersVO {
+    return new FiltersVO({ ...this.value, saturation });
+  }
+
+  withSepia(sepia: number): FiltersVO {
+    return new FiltersVO({ ...this.value, sepia });
+  }
+
+  withGrayscale(grayscale: number): FiltersVO {
+    return new FiltersVO({ ...this.value, grayscale });
+  }
+
+  withHueRotate(hueRotate: number): FiltersVO {
+    return new FiltersVO({ ...this.value, hueRotate });
+  }
+
+  reset(): FiltersVO {
+    return new FiltersVO(DEFAULT_FILTERS);
+  }
+
+  toJSON(): FilterValues {
+    return { ...this.value };
+  }
+
+  static from(filters: FilterValues): FiltersVO {
+    return new FiltersVO(filters);
+  }
+
+  static default(): FiltersVO {
+    return new FiltersVO(DEFAULT_FILTERS);
+  }
+}