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

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);
+  }
+}

package/src/domain/entities/Layer.ts

@@ -0,0 +1,126 @@
+/**
+ * Layer Entities
+ * Base layer and specialized text/sticker layers
+ */
+
+import type { Transform } from "./Transform";
+
+export type LayerType = "text" | "sticker";
+export type TextAlign = "left" | "center" | "right";
+
+export interface BaseLayerData {
+  id: string;
+  type: LayerType;
+  x: number;
+  y: number;
+  rotation: number;
+  scale: number;
+  opacity: number;
+  zIndex: number;
+}
+
+export interface TextLayerData extends BaseLayerData {
+  type: "text";
+  text: string;
+  fontSize: number;
+  fontFamily: string;
+  color: string;
+  backgroundColor: string;
+  textAlign: TextAlign;
+  isBold?: boolean;
+  isItalic?: boolean;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+export interface StickerLayerData extends BaseLayerData {
+  type: "sticker";
+  uri: string;
+}
+
+export type LayerData = TextLayerData | StickerLayerData;
+
+export class Layer {
+  constructor(private readonly data: LayerData) {}
+
+  get id(): string { return this.data.id; }
+  get type(): LayerType { return this.data.type; }
+  get x(): number { return this.data.x; }
+  get y(): number { return this.data.y; }
+  get rotation(): number { return this.data.rotation; }
+  get scale(): number { return this.data.scale; }
+  get opacity(): number { return this.data.opacity; }
+  get zIndex(): number { return this.data.zIndex; }
+
+  isText(): this is TextLayer {
+    return this.data.type === "text";
+  }
+
+  isSticker(): this is StickerLayer {
+    return this.data.type === "sticker";
+  }
+
+  withTransform(transform: Partial<Transform>): Layer {
+    const newData = { ...this.data, ...transform };
+    return this.recreate(newData);
+  }
+
+  withOpacity(opacity: number): Layer {
+    return this.recreate({ ...this.data, opacity });
+  }
+
+  withZIndex(zIndex: number): Layer {
+    return this.recreate({ ...this.data, zIndex });
+  }
+
+  protected recreate(data: LayerData): Layer {
+    return data.type === "text" ? new TextLayer(data) : new StickerLayer(data);
+  }
+
+  toJSON(): LayerData {
+    return { ...this.data };
+  }
+
+  static from(data: LayerData): Layer {
+    return data.type === "text" ? new TextLayer(data) : new StickerLayer(data);
+  }
+}
+
+export class TextLayer extends Layer {
+  declare readonly data: TextLayerData;
+
+  get text(): string { return this.data.text; }
+  get fontSize(): number { return this.data.fontSize; }
+  get fontFamily(): string { return this.data.fontFamily; }
+  get color(): string { return this.data.color; }
+  get backgroundColor(): string { return this.data.backgroundColor; }
+  get textAlign(): TextAlign { return this.data.textAlign; }
+  get isBold(): boolean { return this.data.isBold ?? false; }
+  get isItalic(): boolean { return this.data.isItalic ?? false; }
+
+  withText(text: string): TextLayer {
+    return new TextLayer({ ...this.data, text });
+  }
+
+  withStyle(styles: Partial<Omit<TextLayerData, "id" | "type">>): TextLayer {
+    return new TextLayer({ ...this.data, ...styles });
+  }
+}
+
+export class StickerLayer extends Layer {
+  declare readonly data: StickerLayerData;
+
+  get uri(): string { return this.data.uri; }
+
+  withUri(uri: string): StickerLayer {
+    return new StickerLayer({ ...this.data, uri });
+  }
+}
+
+export function isTextLayer(layer: Layer): layer is TextLayer {
+  return layer.isText();
+}
+
+export function isStickerLayer(layer: Layer): layer is StickerLayer {
+  return layer.isSticker();
+}

package/src/domain/entities/Transform.ts

@@ -0,0 +1,55 @@
+/**
+ * Transform Value Object
+ * Represents position, scale, and rotation state
+ */
+
+export interface Transform {
+  x: number;
+  y: number;
+  scale: number;
+  rotation: number;
+}
+
+export const DEFAULT_TRANSFORM: Transform = {
+  x: 50,
+  y: 50,
+  scale: 1,
+  rotation: 0,
+};
+
+export class TransformVO {
+  constructor(private readonly value: Transform) {}
+
+  get x(): number { return this.value.x; }
+  get y(): number { return this.value.y; }
+  get scale(): number { return this.value.scale; }
+  get rotation(): number { return this.value.rotation; }
+
+  withX(x: number): TransformVO {
+    return new TransformVO({ ...this.value, x });
+  }
+
+  withY(y: number): TransformVO {
+    return new TransformVO({ ...this.value, y });
+  }
+
+  withScale(scale: number): TransformVO {
+    return new TransformVO({ ...this.value, scale });
+  }
+
+  withRotation(rotation: number): TransformVO {
+    return new TransformVO({ ...this.value, rotation });
+  }
+
+  toJSON(): Transform {
+    return { ...this.value };
+  }
+
+  static from(transform: Transform): TransformVO {
+    return new TransformVO(transform);
+  }
+
+  static default(): TransformVO {
+    return new TransformVO(DEFAULT_TRANSFORM);
+  }
+}

package/src/domain/services/HistoryService.ts

@@ -0,0 +1,60 @@
+/**
+ * History Service
+ * Manages undo/redo state with configurable max history
+ */
+
+export interface HistoryState<T> {
+  past: T[];
+  present: T;
+  future: T[];
+}
+
+export class HistoryService<T> {
+  constructor(private readonly maxHistory: number = 20) {}
+
+  createInitialState(initialValue: T): HistoryState<T> {
+    return { past: [], present: initialValue, future: [] };
+  }
+
+  push(history: HistoryState<T>, newValue: T): HistoryState<T> {
+    return {
+      past: [...history.past.slice(-this.maxHistory + 1), history.present],
+      present: newValue,
+      future: [],
+    };
+  }
+
+  undo(history: HistoryState<T>): HistoryState<T> {
+    if (!this.canUndo(history)) return history;
+
+    const previous = history.past[history.past.length - 1];
+    return {
+      past: history.past.slice(0, -1),
+      present: previous,
+      future: [history.present, ...history.future],
+    };
+  }
+
+  redo(history: HistoryState<T>): HistoryState<T> {
+    if (!this.canRedo(history)) return history;
+
+    const next = history.future[0];
+    return {
+      past: [...history.past, history.present],
+      present: next,
+      future: history.future.slice(1),
+    };
+  }
+
+  canUndo(history: HistoryState<T>): boolean {
+    return history.past.length > 0;
+  }
+
+  canRedo(history: HistoryState<T>): boolean {
+    return history.future.length > 0;
+  }
+
+  clear(history: HistoryState<T>): HistoryState<T> {
+    return { past: [], present: history.present, future: [] };
+  }
+}

package/src/domain/services/LayerService.ts

@@ -0,0 +1,105 @@
+/**
+ * Layer Service
+ * Business logic for layer operations
+ */
+
+import { Layer, TextLayer, StickerLayer, isTextLayer } from "../entities/Layer";
+import type { Transform } from "../entities/Transform";
+
+export class LayerService {
+  generateId(type: "text" | "sticker"): string {
+    return `${type}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  createTextLayer(overrides: Partial<Omit<TextLayerData, "id" | "type">> = {}): TextLayer {
+    const id = this.generateId("text");
+    const defaults: TextLayerData = {
+      id,
+      type: "text",
+      text: "",
+      x: 50,
+      y: 50,
+      rotation: 0,
+      scale: 1,
+      opacity: 1,
+      zIndex: 0,
+      fontSize: 32,
+      fontFamily: "System",
+      color: "#FFFFFF",
+      backgroundColor: "transparent",
+      textAlign: "center",
+      isBold: false,
+      isItalic: false,
+    };
+
+    return new TextLayer({ ...defaults, ...overrides });
+  }
+
+  createStickerLayer(uri: string, overrides: Partial<Omit<StickerLayerData, "id" | "type" | "uri">> = {}): StickerLayer {
+    const id = this.generateId("sticker");
+    const defaults: StickerLayerData = {
+      id,
+      type: "sticker",
+      uri,
+      x: 100,
+      y: 100,
+      rotation: 0,
+      scale: 1,
+      opacity: 1,
+      zIndex: 0,
+    };
+
+    return new StickerLayer({ ...defaults, ...overrides });
+  }
+
+  updateLayer(layers: Layer[], layerId: string, updates: Partial<Transform>): Layer[] {
+    return layers.map(layer =>
+      layer.id === layerId ? layer.withTransform(updates) : layer
+    );
+  }
+
+  deleteLayer(layers: Layer[], layerId: string): Layer[] {
+    return layers.filter(layer => layer.id !== layerId);
+  }
+
+  duplicateLayer(layers: Layer[], layerId: string): Layer[] {
+    const layer = layers.find(l => l.id === layerId);
+    if (!layer) return layers;
+
+    const maxZIndex = layers.length > 0 ? Math.max(...layers.map(l => l.zIndex)) : -1;
+    const duplicateData = { ...layer.toJSON(), id: this.generateId(layer.type), x: layer.x + 20, y: layer.y + 20, zIndex: maxZIndex + 1 };
+    const duplicate = Layer.from(duplicateData);
+
+    return [...layers, duplicate];
+  }
+
+  moveLayerUp(layers: Layer[], layerId: string): Layer[] {
+    const sorted = this.sortByZIndex(layers);
+    const idx = sorted.findIndex(l => l.id === layerId);
+    if (idx >= sorted.length - 1) return layers;
+
+    const reordered = [...sorted];
+    [reordered[idx], reordered[idx + 1]] = [reordered[idx + 1], reordered[idx]];
+
+    return this.reassignZIndex(reordered);
+  }
+
+  moveLayerDown(layers: Layer[], layerId: string): Layer[] {
+    const sorted = this.sortByZIndex(layers);
+    const idx = sorted.findIndex(l => l.id === layerId);
+    if (idx <= 0) return layers;
+
+    const reordered = [...sorted];
+    [reordered[idx], reordered[idx - 1]] = [reordered[idx - 1], reordered[idx]];
+
+    return this.reassignZIndex(reordered);
+  }
+
+  sortByZIndex(layers: Layer[]): Layer[] {
+    return [...layers].sort((a, b) => a.zIndex - b.zIndex);
+  }
+
+  private reassignZIndex(layers: Layer[]): Layer[] {
+    return layers.map((layer, i) => layer.withZIndex(i));
+  }
+}

package/src/index.ts

@@ -1,9 +1,29 @@
-// Public API exports
+/**
+ * @umituz/react-native-photo-editor
+ *
+ * A powerful, generic photo editor for React Native
+ * Built with DDD principles for maintainability
+ */
+
+// Main component
 export { PhotoEditor } from "./PhotoEditor";
 export type { PhotoEditorProps } from "./PhotoEditor";
 
-// Type exports for consumer usage
-export * from "./types";
+// Domain entities
+export type { Layer, TextLayer, StickerLayer } from "./domain/entities/Layer";
+export type { Transform } from "./domain/entities/Transform";
+export type { FilterValues, FiltersVO } from "./domain/entities/Filters";
+export { isTextLayer, isStickerLayer } from "./domain/entities/Layer";
+
+// Application hooks
+export { useEditor } from "./application/hooks/useEditor";
+export { useEditorUI } from "./application/hooks/useEditorUI";
 
-// Constant exports for consumer customization
-export * from "./constants";
+// Types & constants
+export type { LayerTransform } from "./infrastructure/gesture/types";
+export { DEFAULT_IMAGE_FILTERS } from "./domain/entities/Filters";
+export { DEFAULT_FONTS, DEFAULT_TEXT_COLORS, DEFAULT_STICKERS, DEFAULT_AI_STYLES } from "./constants";
+export type { FilterOption } from "./presentation/components/sheets/FilterSheet";
+
+// Legacy types (for backward compatibility)
+export * from "./types";

package/src/infrastructure/gesture/types.ts

@@ -0,0 +1,27 @@
+/**
+ * Gesture Types
+ * Shared types for transform gestures
+ */
+
+import type { Transform } from "../../domain/entities/Transform";
+
+export interface TransformGestureState {
+  position: { x: number; y: number };
+  scale: number;
+  rotation: number;
+}
+
+export interface TransformGestureConfig {
+  minScale?: number;
+  maxScale?: number;
+  onTransformEnd: (transform: Transform) => void;
+  onPress?: () => void;
+}
+
+export interface TransformGestureHandlers {
+  panGesture: ReturnType<typeof import("react-native-gesture-handler").Gesture.Pan>;
+  pinchGesture: ReturnType<typeof import("react-native-gesture-handler").Gesture.Pinch>;
+  rotationGesture: ReturnType<typeof import("react-native-gesture-handler").Gesture.Rotation>;
+  tapGesture: ReturnType<typeof import("react-native-gesture-handler").Gesture.Tap>;
+  composed: ReturnType<typeof import("react-native-gesture-handler").Gesture.Exclusive>;
+}