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

package/src/hooks/usePhotoEditor.ts

@@ -1,172 +0,0 @@
-import { useState, useCallback, useMemo } from "react";
-import { Layer, TextLayer, StickerLayer, ImageFilters, DEFAULT_IMAGE_FILTERS } from "../types";
-import { HistoryManager, HistoryState } from "../core/HistoryManager";
-
-export const usePhotoEditor = (initialLayers: Layer[] = []) => {
-  const historyManager = useMemo(() => new HistoryManager<Layer[]>(), []);
-  const [history, setHistory] = useState<HistoryState<Layer[]>>(() =>
-    historyManager.createInitialState(initialLayers),
-  );
-  const [activeLayerId, setActiveLayerId] = useState<string | null>(
-    initialLayers[0]?.id ?? null,
-  );
-  const [filters, setFilters] = useState<ImageFilters>(DEFAULT_IMAGE_FILTERS);
-
-  const layers = history.present;
-
-  const pushState = useCallback(
-    (newLayers: Layer[]): void => {
-      setHistory((prev) => historyManager.push(prev, newLayers));
-    },
-    [historyManager],
-  );
-
-  const addTextLayer = useCallback(
-    (
-      defaultColor = "#FFFFFF",
-      overrides: Partial<Omit<TextLayer, "id" | "type">> = {},
-    ) => {
-      const id = `text-${Date.now()}`;
-      const newLayer: TextLayer = {
-        id,
-        type: "text",
-        text: "",
-        x: 50,
-        y: 50,
-        rotation: 0,
-        scale: 1,
-        opacity: 1,
-        zIndex: layers.length,
-        fontSize: 32,
-        fontFamily: "System",
-        color: defaultColor,
-        backgroundColor: "transparent",
-        textAlign: "center",
-        ...overrides,
-      };
-      pushState([...layers, newLayer]);
-      setActiveLayerId(id);
-      return id;
-    },
-    [layers, pushState],
-  );
-
-  const addStickerLayer = useCallback(
-    (uri: string) => {
-      const id = `sticker-${Date.now()}`;
-      const newLayer: StickerLayer = {
-        id,
-        type: "sticker",
-        uri,
-        x: 100,
-        y: 100,
-        rotation: 0,
-        scale: 1,
-        opacity: 1,
-        zIndex: layers.length,
-      };
-      pushState([...layers, newLayer]);
-      setActiveLayerId(id);
-      return id;
-    },
-    [layers, pushState],
-  );
-
-  const updateLayer = useCallback(
-    (id: string, updates: Partial<Layer>): void => {
-      const newLayers = layers.map((l) => {
-        if (l.id !== id) return l;
-        // Type-safe merge: cast to Layer since we're merging valid Partial<Layer> with existing Layer
-        return { ...l, ...updates } as Layer;
-      });
-      pushState(newLayers);
-    },
-    [layers, pushState],
-  );
-
-  const deleteLayer = useCallback(
-    (id: string): void => {
-      const newLayers = layers.filter((l) => l.id !== id);
-      pushState(newLayers);
-      if (activeLayerId === id) {
-        setActiveLayerId(newLayers[0]?.id ?? null);
-      }
-    },
-    [layers, activeLayerId, pushState],
-  );
-
-  const duplicateLayer = useCallback(
-    (id: string): string | null => {
-      const layer = layers.find((l) => l.id === id);
-      if (!layer) return null;
-      const newId = `${layer.type}-${Date.now()}`;
-      // Calculate the next zIndex to avoid conflicts
-      const maxZIndex = layers.length > 0 ? Math.max(...layers.map((l) => l.zIndex)) : -1;
-      const newLayer = { ...layer, id: newId, x: layer.x + 20, y: layer.y + 20, zIndex: maxZIndex + 1 };
-      pushState([...layers, newLayer]);
-      setActiveLayerId(newId);
-      return newId;
-    },
-    [layers, pushState],
-  );
-
-  const moveLayerUp = useCallback(
-    (id: string): void => {
-      const sorted = [...layers].sort((a, b) => a.zIndex - b.zIndex);
-      const idx = sorted.findIndex((l) => l.id === id);
-      if (idx >= sorted.length - 1) return;
-      const reordered = [...sorted];
-      [reordered[idx], reordered[idx + 1]] = [reordered[idx + 1], reordered[idx]];
-      pushState(reordered.map((l, i) => ({ ...l, zIndex: i })));
-    },
-    [layers, pushState],
-  );
-
-  const moveLayerDown = useCallback(
-    (id: string) => {
-      const sorted = [...layers].sort((a, b) => a.zIndex - b.zIndex);
-      const idx = sorted.findIndex((l) => l.id === id);
-      if (idx <= 0) return;
-      const reordered = [...sorted];
-      [reordered[idx], reordered[idx - 1]] = [reordered[idx - 1], reordered[idx]];
-      pushState(reordered.map((l, i) => ({ ...l, zIndex: i })));
-    },
-    [layers, pushState],
-  );
-
-  const undo = useCallback(
-    (): void => setHistory((prev) => historyManager.undo(prev)),
-    [historyManager],
-  );
-
-  const redo = useCallback(
-    (): void => setHistory((prev) => historyManager.redo(prev)),
-    [historyManager],
-  );
-
-  // Memoize return object to prevent infinite re-renders
-  const sortedLayers = useMemo(() => [...layers].sort((a, b) => a.zIndex - b.zIndex), [layers]);
-  const activeLayer = useMemo(() => layers.find((l) => l.id === activeLayerId), [layers, activeLayerId]);
-  const canUndo = useMemo(() => historyManager.canUndo(history), [history]);
-  const canRedo = useMemo(() => historyManager.canRedo(history), [history]);
-
-  return {
-    layers: sortedLayers,
-    activeLayerId,
-    activeLayer,
-    addTextLayer,
-    addStickerLayer,
-    updateLayer,
-    deleteLayer,
-    duplicateLayer,
-    moveLayerUp,
-    moveLayerDown,
-    selectLayer: setActiveLayerId,
-    undo,
-    redo,
-    canUndo,
-    canRedo,
-    filters,
-    updateFilters: setFilters,
-  };
-};

package/src/hooks/usePhotoEditorUI.ts

@@ -1,162 +0,0 @@
-import { useRef, useState, useCallback, useEffect } from "react";
-import { BottomSheetModalRef } from "@umituz/react-native-design-system/molecules";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { usePhotoEditor } from "./usePhotoEditor";
-import { TextLayer, DEFAULT_IMAGE_FILTERS, ImageFilters, TextAlign } from "../types";
-import type { FilterOption } from "../constants";
-import type { LayerTransform } from "../components/DraggableText";
-
-export const usePhotoEditorUI = (initialCaption?: string) => {
-  const tokens = useAppDesignTokens();
-
-  // 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);
-
-  // Global text/font state
-  const [selectedFont, setSelectedFont] = useState<string>("System");
-  const [fontSize, setFontSize] = useState(48);
-
-  // Per-layer text editing state (populated when sheet opens)
-  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");
-
-  const editor = usePhotoEditor([]);
-
-  // Apply initial caption once on mount — single history entry
-  const prevInitialCaptionRef = useRef<string | undefined>(undefined);
-
-  useEffect(() => {
-    // Only apply if initialCaption changed and is different from previous value
-    if (initialCaption && initialCaption !== prevInitialCaptionRef.current) {
-      prevInitialCaptionRef.current = initialCaption;
-      editor.addTextLayer(tokens.colors.textPrimary, { text: initialCaption });
-    }
-  }, [initialCaption, editor]);
-
-  const handleTextLayerTap = useCallback(
-    (layerId: string): void => {
-      editor.selectLayer(layerId);
-      const layer = editor.layers.find((l) => l.id === layerId);
-      if (layer?.type === "text") {
-        const textLayer = layer as TextLayer;
-        setEditingText(textLayer.text ?? "");
-        setFontSize(textLayer.fontSize ?? 48);
-        setEditingColor(textLayer.color ?? tokens.colors.textPrimary);
-        setEditingAlign(textLayer.textAlign ?? "center");
-        setEditingBold(textLayer.isBold ?? false);
-        setEditingItalic(textLayer.isItalic ?? false);
-        textEditorSheetRef.current?.present();
-      }
-    },
-    [editor, tokens.colors.textPrimary],
-  );
-
-  const handleSaveText = useCallback((): void => {
-    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,
-  ]);
-
-  const handleSelectFilter = useCallback(
-    (option: FilterOption): void => {
-      setSelectedFilter(option.id);
-      const newFilters: ImageFilters = { ...DEFAULT_IMAGE_FILTERS, ...option.filters };
-      editor.updateFilters(newFilters);
-      filterSheetRef.current?.dismiss();
-    },
-    [editor],
-  );
-
-  const handleLayerTransform = useCallback(
-    (layerId: string, transform: LayerTransform): void => {
-      editor.updateLayer(layerId, {
-        x: transform.x,
-        y: transform.y,
-        scale: transform.scale,
-        rotation: transform.rotation,
-      });
-    },
-    [editor],
-  );
-
-  return {
-    ...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,
-    // Handlers
-    handleTextLayerTap,
-    handleSaveText,
-    handleSelectFilter,
-    handleLayerTransform,
-    handleAddText: useCallback((): void => {
-      const color = tokens.colors.textPrimary;
-      setEditingText("");
-      setEditingColor(color);
-      setEditingAlign("center");
-      setEditingBold(false);
-      setEditingItalic(false);
-      // Create layer with the currently active font settings so canvas preview matches sheet
-      editor.addTextLayer(color, {
-        fontSize,
-        fontFamily: selectedFont,
-      });
-      textEditorSheetRef.current?.present();
-    }, [editor, fontSize, selectedFont, tokens.colors.textPrimary]),
-    handleSelectSticker: useCallback((uri: string): void => {
-      editor.addStickerLayer(uri);
-      stickerSheetRef.current?.dismiss();
-    }, [editor]),
-  };
-};

package/src/infrastructure/history/HistoryManager.ts

@@ -1,38 +0,0 @@
-/**
- * History Manager Implementation
- * Legacy compatibility wrapper for HistoryService
- */
-
-import { HistoryService } from "../../domain/services/HistoryService";
-
-const historyService = new HistoryService(20);
-
-export type { HistoryState } from "../../domain/services/HistoryService";
-
-export class HistoryManager<T> {
-  private readonly maxHistory = 20;
-
-  createInitialState(initialValue: T) {
-    return historyService.createInitialState(initialValue);
-  }
-
-  push(history: any, newValue: T) {
-    return historyService.push(history, newValue);
-  }
-
-  undo(history: any) {
-    return historyService.undo(history);
-  }
-
-  redo(history: any) {
-    return historyService.redo(history);
-  }
-
-  canUndo(history: any) {
-    return historyService.canUndo(history);
-  }
-
-  canRedo(history: any) {
-    return historyService.canRedo(history);
-  }
-}