@umituz/react-native-photo-editor 1.0.9 → 1.0.11

package/src/hooks/usePhotoEditor.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useMemo } from "react";
-import { Layer, TextLayer, ImageFilters } from "../types";
-import { HistoryManager } from "../core/HistoryManager";
+import { DesignTokens } from "@umituz/react-native-design-system";
+import { Layer, TextLayer, StickerLayer, ImageFilters } from "../types";
+import { HistoryManager, HistoryState } from "../core/HistoryManager";
 
 const DEFAULT_FILTERS: ImageFilters = {
   brightness: 1,
@@ -10,12 +11,9 @@ const DEFAULT_FILTERS: ImageFilters = {
   grayscale: 0,
 };
 
-const historyManager = new HistoryManager<Layer[]>();
-
-import { DesignTokens } from "@umituz/react-native-design-system";
-
 export const usePhotoEditor = (initialLayers: Layer[] = []) => {
-  const [history, setHistory] = useState(() =>
+  const historyManager = useMemo(() => new HistoryManager<Layer[]>(), []);
+  const [history, setHistory] = useState<HistoryState<Layer[]>>(() =>
     historyManager.createInitialState(initialLayers),
   );
   const [activeLayerId, setActiveLayerId] = useState<string | null>(
@@ -25,15 +23,12 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
 
   const layers = history.present;
 
-  const canUndo = historyManager.canUndo(history);
-  const canRedo = historyManager.canRedo(history);
-
   const pushState = useCallback((newLayers: Layer[]) => {
     setHistory((prev) => historyManager.push(prev, newLayers));
-  }, []);
+  }, [historyManager]);
 
   const addTextLayer = useCallback(
-    (defaultTokens: DesignTokens) => {
+    (tokens: DesignTokens) => {
       const id = `text-${Date.now()}`;
       const newLayer: TextLayer = {
         id,
@@ -47,16 +42,12 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
         zIndex: layers.length,
         fontSize: 32,
         fontFamily: "System",
-        color: defaultTokens.colors.onPrimary,
+        color: tokens.colors.textPrimary,
         backgroundColor: "transparent",
         textAlign: "center",
-        strokeWidth: 2,
-        strokeColor: defaultTokens.colors.onBackground,
       };
-
-      const newLayers: Layer[] = [...layers, newLayer];
-      pushState(newLayers);
-      setActiveLayerId(newLayer.id);
+      pushState([...layers, newLayer]);
+      setActiveLayerId(id);
       return id;
     },
     [layers, pushState],
@@ -65,10 +56,10 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
   const addStickerLayer = useCallback(
     (uri: string) => {
       const id = `sticker-${Date.now()}`;
-      const newLayer: Layer = {
+      const newLayer: StickerLayer = {
         id,
         type: "sticker",
-        uri: uri,
+        uri,
         x: 100,
         y: 100,
         rotation: 0,
@@ -76,90 +67,44 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
         opacity: 1,
         zIndex: layers.length,
       };
-
-      const newLayers: Layer[] = [...layers, newLayer];
-      pushState(newLayers);
-      setActiveLayerId(newLayer.id);
+      pushState([...layers, newLayer]);
+      setActiveLayerId(id);
       return id;
     },
     [layers, pushState],
   );
 
   const updateLayer = useCallback(
-    (id: string, updates: Partial<Layer>, silent = false) => {
-      const newLayers: Layer[] = layers.map((layer) =>
-        layer.id === id ? ({ ...layer, ...updates } as Layer) : layer,
-      );
-      if (silent) {
-        // Just update state without pushing to history (hacky but works for init)
-        setHistory((prev) => ({ ...prev, present: newLayers }));
-      } else {
-        pushState(newLayers);
-      }
+    (id: string, updates: Partial<Layer>) => {
+      const newLayers = layers.map((l) => (l.id === id ? { ...l, ...updates } : l) as Layer);
+      pushState(newLayers);
     },
     [layers, pushState],
   );
 
   const deleteLayer = useCallback(
     (id: string) => {
-      if (layers.length <= 1) return;
-      const newLayers = layers.filter((layer) => layer.id !== id);
+      const newLayers = layers.filter((l) => l.id !== id);
       pushState(newLayers);
-      if (activeLayerId === id) {
-        setActiveLayerId(newLayers[0]?.id || null);
-      }
+      if (activeLayerId === id) setActiveLayerId(newLayers[0]?.id || null);
     },
     [layers, activeLayerId, pushState],
   );
 
-  const undo = useCallback(() => {
-    setHistory((prev) => historyManager.undo(prev));
-  }, []);
-
-  const redo = useCallback(() => {
-    setHistory((prev) => historyManager.redo(prev));
-  }, []);
-
-  const selectLayer = useCallback((id: string) => {
-    setActiveLayerId(id);
-  }, []);
-
-  const bringToFront = useCallback(
-    (id: string) => {
-      const maxZ = Math.max(...layers.map((l) => l.zIndex), 0);
-      updateLayer(id, { zIndex: maxZ + 1 });
-    },
-    [layers, updateLayer],
-  );
-
-  const captureImage = useCallback(
-    async (_viewRef: unknown, backgroundUrl: string) => {
-      return backgroundUrl;
-    },
-    [],
-  );
-
-  const activeLayer = useMemo(
-    () => layers.find((l) => l.id === activeLayerId),
-    [layers, activeLayerId],
-  );
-
   return {
     layers: [...layers].sort((a, b) => a.zIndex - b.zIndex),
-    activeLayer,
     activeLayerId,
+    activeLayer: layers.find((l) => l.id === activeLayerId),
     addTextLayer,
     addStickerLayer,
     updateLayer,
     deleteLayer,
-    selectLayer,
-    undo,
-    redo,
-    canUndo,
-    canRedo,
-    bringToFront,
+    selectLayer: setActiveLayerId,
+    undo: useCallback(() => setHistory(historyManager.undo), [historyManager]),
+    redo: useCallback(() => setHistory(historyManager.redo), [historyManager]),
+    canUndo: historyManager.canUndo(history),
+    canRedo: historyManager.canRedo(history),
     filters,
     updateFilters: setFilters,
-    captureImage,
   };
 };

package/src/hooks/usePhotoEditorUI.ts

@@ -1,7 +1,7 @@
 import { useRef, useState, useCallback, useEffect } from "react";
 import { BottomSheetModalRef, DesignTokens } from "@umituz/react-native-design-system";
 import { usePhotoEditor } from "./usePhotoEditor";
-import { Layer, TextLayer } from "../types";
+import { TextLayer } from "../types";
 
 export const usePhotoEditorUI = (
   initialCaption: string | undefined,
@@ -11,45 +11,26 @@ export const usePhotoEditorUI = (
   const stickerSheetRef = useRef<BottomSheetModalRef>(null);
   const filterSheetRef = useRef<BottomSheetModalRef>(null);
   const layerSheetRef = useRef<BottomSheetModalRef>(null);
+  const aiSheetRef = useRef<BottomSheetModalRef>(null);
 
-  const [selectedFont, setSelectedFont] = useState<string>("Impact");
+  const [selectedFont, setSelectedFont] = useState<string>("System");
   const [fontSize, setFontSize] = useState(48);
   const [editingText, setEditingText] = useState("");
   const [selectedFilter, setSelectedFilter] = useState("none");
 
-  const {
-    layers,
-    activeLayerId,
-    addTextLayer,
-    addStickerLayer,
-    updateLayer,
-    deleteLayer,
-    selectLayer,
-    updateFilters,
-    filters,
-  } = usePhotoEditor([]);
+  const editor = usePhotoEditor([]);
 
-  // Handle initial caption
   useEffect(() => {
     if (initialCaption) {
-      const id = addTextLayer(tokens);
-      void Promise.resolve().then(() => {
-        updateLayer(id, { text: initialCaption } as Partial<Layer>, true);
-      });
+      const id = editor.addTextLayer(tokens);
+      editor.updateLayer(id, { text: initialCaption });
     }
-  }, [initialCaption, addTextLayer, tokens]);
-
-  const handleAddText = useCallback(() => {
-    addTextLayer(tokens);
-    void Promise.resolve().then(() => {
-      textEditorSheetRef.current?.present();
-    });
-  }, [addTextLayer, tokens]);
+  }, [initialCaption]);
 
   const handleTextLayerTap = useCallback(
     (layerId: string) => {
-      selectLayer(layerId);
-      const layer = layers.find((l) => l.id === layerId);
+      editor.selectLayer(layerId);
+      const layer = editor.layers.find((l) => l.id === layerId);
       if (layer?.type === "text") {
         const textLayer = layer as TextLayer;
         setEditingText(textLayer.text || "");
@@ -57,53 +38,27 @@ export const usePhotoEditorUI = (
         textEditorSheetRef.current?.present();
       }
     },
-    [selectLayer, layers],
+    [editor],
   );
 
   const handleSaveText = useCallback(() => {
-    if (activeLayerId) {
-      updateLayer(activeLayerId, {
+    if (editor.activeLayerId) {
+      editor.updateLayer(editor.activeLayerId, {
         text: editingText,
         fontSize,
         fontFamily: selectedFont,
-      } as Partial<Layer>);
+      });
     }
     textEditorSheetRef.current?.dismiss();
-  }, [activeLayerId, editingText, fontSize, selectedFont, updateLayer, textEditorSheetRef]);
-
-  const handleSelectFilter = useCallback(
-    (filterId: string, value: number) => {
-      setSelectedFilter(filterId);
-      const base = {
-        brightness: 1,
-        contrast: 1,
-        saturation: 1,
-        sepia: 0,
-        grayscale: 0,
-      };
-      if (filterId === "sepia") updateFilters({ ...base, sepia: value });
-      else if (filterId === "grayscale")
-        updateFilters({ ...base, grayscale: value });
-      else updateFilters(base);
-    },
-    [updateFilters],
-  );
-
-  const handleSelectSticker = useCallback(
-    (sticker: string) => {
-      addStickerLayer(sticker);
-      stickerSheetRef.current?.dismiss();
-    },
-    [addStickerLayer],
-  );
+  }, [editor.activeLayerId, editingText, fontSize, selectedFont, editor.updateLayer]);
 
   return {
-    // Refs
+    ...editor,
     textEditorSheetRef,
     stickerSheetRef,
     filterSheetRef,
     layerSheetRef,
-    // State
+    aiSheetRef,
     selectedFont,
     setSelectedFont,
     fontSize,
@@ -111,20 +66,20 @@ export const usePhotoEditorUI = (
     editingText,
     setEditingText,
     selectedFilter,
-    // Domain State
-    layers,
-    activeLayerId,
-    filters,
-    // Domain Actions
-    updateLayer,
-    deleteLayer,
-    selectLayer,
-    addTextLayer,
-    // UI Actions
-    handleAddText,
     handleTextLayerTap,
     handleSaveText,
-    handleSelectFilter,
-    handleSelectSticker,
+    handleAddText: () => {
+      editor.addTextLayer(tokens);
+      textEditorSheetRef.current?.present();
+    },
+    handleSelectSticker: (s: string) => {
+      editor.addStickerLayer(s);
+      stickerSheetRef.current?.dismiss();
+    },
+    handleSelectFilter: (id: string, val: number) => {
+      setSelectedFilter(id);
+      editor.updateFilters({ ...editor.filters, [id]: val });
+      filterSheetRef.current?.dismiss();
+    }
   };
 };

package/src/styles.ts

@@ -12,89 +12,41 @@ export const createEditorStyles = (tokens: DesignTokens, insets: EdgeInsets) =>
       paddingHorizontal: tokens.spacing.md,
       paddingTop: insets.top + tokens.spacing.sm,
       paddingBottom: tokens.spacing.sm,
-    },
-    headerButton: {
-      width: 48,
-      height: 48,
-      borderRadius: 24,
-      alignItems: "center",
-      justifyContent: "center",
+      gap: tokens.spacing.md,
     },
     headerTitle: {
-      fontSize: 18,
-      fontWeight: "bold",
-      color: tokens.colors.textPrimary,
-    },
-    postButton: {
-      backgroundColor: tokens.colors.primary,
-      paddingHorizontal: 20,
-      paddingVertical: 10,
-      borderRadius: 999,
+      flex: 1,
+      textAlign: "center",
     },
-    postButtonText: {
-      color: tokens.colors.onPrimary,
-      fontWeight: "bold",
-      fontSize: 14,
+    scrollContent: { 
+      paddingHorizontal: tokens.spacing.md, 
+      paddingBottom: 120,
+      gap: tokens.spacing.lg,
     },
-    scrollContent: { paddingHorizontal: tokens.spacing.md, paddingBottom: 120 },
     canvas: {
       width: "100%",
-      aspectRatio: 4 / 5,
-      borderRadius: 16,
+      aspectRatio: 1,
+      borderRadius: tokens.borders.radius.lg,
       overflow: "hidden",
       backgroundColor: tokens.colors.surfaceVariant,
-      marginTop: tokens.spacing.sm,
     },
     canvasImage: { width: "100%", height: "100%" },
-    // Slider & Controls
     controlsPanel: {
-      marginTop: tokens.spacing.md,
-      backgroundColor: tokens.colors.surfaceVariant + "80", // Opacity handled by token if possible, else hex
-      borderRadius: 16,
       padding: tokens.spacing.md,
-      borderWidth: 1,
-      borderColor: tokens.colors.border,
-    },
-    sliderRow: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      marginBottom: tokens.spacing.sm,
-    },
-    sliderLabel: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: tokens.spacing.xs,
-    },
-    sliderLabelText: { fontSize: 14, color: tokens.colors.textSecondary },
-    sliderValue: {
-      fontSize: 14,
-      fontWeight: "bold",
-      color: tokens.colors.primary,
-    },
-    sliderTrack: {
-      height: 6,
-      backgroundColor: tokens.colors.border,
-      borderRadius: 3,
-      marginBottom: tokens.spacing.lg,
-    },
-    sliderFill: {
-      height: "100%",
-      width: "65%",
-      backgroundColor: tokens.colors.primary,
-      borderRadius: 3,
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderRadius: tokens.borders.radius.md,
+      gap: tokens.spacing.md,
     },
-    fontLabel: {
-      fontSize: 14,
-      color: tokens.colors.textSecondary,
-      marginBottom: tokens.spacing.sm,
+    fontRow: { 
+      flexDirection: "row", 
+      gap: tokens.spacing.sm,
+      flexWrap: "wrap",
     },
-    fontRow: { flexDirection: "row", gap: tokens.spacing.sm },
     fontChip: {
       paddingHorizontal: tokens.spacing.md,
       paddingVertical: tokens.spacing.sm,
-      backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: 8,
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.sm,
       borderWidth: 1,
       borderColor: tokens.colors.border,
     },
@@ -102,59 +54,27 @@ export const createEditorStyles = (tokens: DesignTokens, insets: EdgeInsets) =>
       backgroundColor: tokens.colors.primary,
       borderColor: tokens.colors.primary,
     },
-    fontChipText: {
-      fontWeight: "bold",
-      fontSize: 14,
-      color: tokens.colors.textSecondary,
-    },
-    fontChipTextActive: { color: tokens.colors.onPrimary },
-    // Bottom Toolbar
     bottomToolbar: {
       position: "absolute",
       bottom: insets.bottom + tokens.spacing.md,
-      left: "5%",
-      right: "5%",
-      backgroundColor: tokens.colors.surfaceVariant,
+      left: tokens.spacing.md,
+      right: tokens.spacing.md,
+      backgroundColor: tokens.colors.surface,
       borderRadius: 999,
-      padding: tokens.spacing.sm,
+      padding: tokens.spacing.xs,
       flexDirection: "row",
       justifyContent: "space-around",
       alignItems: "center",
       borderWidth: 1,
       borderColor: tokens.colors.border,
-      shadowColor: "#000",
-      shadowOffset: {
-        width: 0,
-        height: 2,
-      },
-      shadowOpacity: 0.1,
-      shadowRadius: 3.84,
-      elevation: 5,
     },
     toolButton: {
       alignItems: "center",
       justifyContent: "center",
-      width: 56,
-      height: 56,
-      borderRadius: 28,
-    },
-    toolButtonActive: { backgroundColor: tokens.colors.primary + "20" },
-    toolLabel: {
-      fontSize: 10,
-      fontWeight: "500",
-      color: tokens.colors.textSecondary,
-      marginTop: 2,
+      padding: tokens.spacing.sm,
+      borderRadius: 999,
     },
-    toolLabelActive: { color: tokens.colors.primary },
-    aiMagicButton: {
-      width: 64,
-      height: 64,
-      borderRadius: 32,
-      backgroundColor: tokens.colors.primary,
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: -32,
-      borderWidth: 4,
-      borderColor: tokens.colors.background,
+    toolButtonActive: { 
+      backgroundColor: tokens.colors.primary + "20",
     },
   });