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

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

package/src/infrastructure/gesture/useTransformGesture.ts

@@ -0,0 +1,136 @@
+/**
+ * Transform Gesture Hook
+ * Reusable gesture logic for draggable components
+ * Eliminates ~180 lines of duplicate code
+ */
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import type { Transform } from "../../domain/entities/Transform";
+import type { TransformGestureConfig, TransformGestureState } from "./types";
+
+const DEFAULT_STATE: TransformGestureState = {
+  position: { x: 50, y: 50 },
+  scale: 1,
+  rotation: 0,
+};
+
+export function useTransformGesture(
+  initialTransform: Partial<Transform>,
+  config: TransformGestureConfig
+) {
+  const {
+    minScale = 0.2,
+    maxScale = 6,
+    onTransformEnd,
+    onPress,
+  } = config;
+
+  // State
+  const [state, setState] = useState<TransformGestureState>(() => ({
+    position: { x: initialTransform.x ?? 50, y: initialTransform.y ?? 50 },
+    scale: initialTransform.scale ?? 1,
+    rotation: initialTransform.rotation ?? 0,
+  }));
+
+  // Sync state when props change (undo/redo)
+  useEffect(() => {
+    setState(prev => ({
+      ...prev,
+      position: { x: initialTransform.x ?? prev.position.x, y: initialTransform.y ?? prev.position.y },
+      scale: initialTransform.scale ?? prev.scale,
+      rotation: initialTransform.rotation ?? prev.rotation,
+    }));
+  }, [initialTransform.x, initialTransform.y, initialTransform.scale, initialTransform.rotation]);
+
+  // Refs for gesture callbacks
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const onTransformEndRef = useRef(onTransformEnd);
+  onTransformEndRef.current = onTransformEnd;
+  const onPressRef = useRef(onPress);
+  onPressRef.current = onPress;
+
+  // Start values for gestures
+  const offsetRef = useRef(state.position);
+  const scaleStartRef = useRef(state.scale);
+  const rotationStartRef = useRef(state.rotation);
+
+  // Emit transform
+  const emitTransform = useCallback(() => {
+    onTransformEndRef.current({
+      x: stateRef.current.position.x,
+      y: stateRef.current.position.y,
+      scale: stateRef.current.scale,
+      rotation: stateRef.current.rotation,
+    });
+  }, []);
+
+  // Pan gesture
+  const panGesture = Gesture.Pan()
+    .runOnJS(true)
+    .averageTouches(true)
+    .onStart(() => {
+      offsetRef.current = stateRef.current.position;
+    })
+    .onUpdate((e) => {
+      setState(prev => ({
+        ...prev,
+        position: {
+          x: offsetRef.current.x + e.translationX,
+          y: offsetRef.current.y + e.translationY,
+        },
+      }));
+    })
+    .onEnd(emitTransform);
+
+  // Pinch gesture
+  const pinchGesture = Gesture.Pinch()
+    .runOnJS(true)
+    .onStart(() => {
+      scaleStartRef.current = stateRef.current.scale;
+    })
+    .onUpdate((e) => {
+      setState(prev => ({
+        ...prev,
+        scale: Math.max(minScale, Math.min(maxScale, scaleStartRef.current * e.scale)),
+      }));
+    })
+    .onEnd(emitTransform);
+
+  // Rotation gesture
+  const rotationGesture = Gesture.Rotation()
+    .runOnJS(true)
+    .onStart(() => {
+      rotationStartRef.current = stateRef.current.rotation;
+    })
+    .onUpdate((e) => {
+      setState(prev => ({
+        ...prev,
+        rotation: rotationStartRef.current + (e.rotation * 180) / Math.PI,
+      }));
+    })
+    .onEnd(emitTransform);
+
+  // Tap gesture
+  const tapGesture = Gesture.Tap()
+    .runOnJS(true)
+    .onEnd(() => onPressRef.current?.());
+
+  // Composed gesture
+  const composed = Gesture.Exclusive(
+    Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
+    tapGesture,
+  );
+
+  return {
+    state,
+    gestures: {
+      pan: panGesture,
+      pinch: pinchGesture,
+      rotation: rotationGesture,
+      tap: tapGesture,
+      composed,
+    },
+  };
+}

package/src/infrastructure/history/HistoryManager.ts

@@ -0,0 +1,38 @@
+/**
+ * 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);
+  }
+}

package/src/presentation/components/DraggableLayer.tsx

@@ -0,0 +1,114 @@
+/**
+ * Draggable Layer Component
+ * Unified draggable component for both text and stickers
+ * Replaces DraggableText + DraggableSticker (~180 lines of duplicate code)
+ */
+
+import React, { memo } from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import { Image } from "expo-image";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { useTransformGesture } from "../../infrastructure/gesture/useTransformGesture";
+import { Layer, isTextLayer, isStickerLayer } from "../../domain/entities/Layer";
+
+interface DraggableLayerProps {
+  layer: Layer;
+  isSelected: boolean;
+  onPress: () => void;
+  onTransformEnd: (transform: { x: number; y: number; scale: number; rotation: number }) => void;
+}
+
+const isEmojiString = (str: string) =>
+  str.length <= 4 && !/^https?:\/\//i.test(str) && !str.startsWith("/");
+
+export const DraggableLayer = memo<DraggableLayerProps>(({
+  layer,
+  isSelected,
+  onPress,
+  onTransformEnd,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { state, gestures } = useTransformGesture(layer, {
+    onTransformEnd,
+    onPress,
+  });
+
+  return (
+    <GestureDetector gesture={gestures.composed}>
+      <View
+        accessibilityLabel={isTextLayer(layer) ? layer.text || "Text layer" : "Sticker layer"}
+        accessibilityRole="button"
+        style={[
+          styles.container,
+          {
+            transform: [
+              { translateX: state.position.x },
+              { translateY: state.position.y },
+              { rotate: `${state.rotation}deg` },
+              { scale: state.scale },
+            ],
+            opacity: layer.opacity,
+            zIndex: isSelected ? 100 : layer.zIndex,
+          },
+        ]}
+      >
+        <View
+          style={{
+            padding: tokens.spacing.xs,
+            borderRadius: tokens.borders.radius.sm,
+            borderWidth: isSelected ? 2 : 0,
+            borderColor: tokens.colors.primary,
+            borderStyle: "dashed",
+            backgroundColor: isSelected
+              ? tokens.colors.primary + "10"
+              : isTextLayer(layer)
+                ? layer.backgroundColor
+                : "transparent",
+          }}
+        >
+          {isTextLayer(layer) ? (
+            <AtomicText
+              style={{
+                fontSize: layer.fontSize,
+                fontFamily: layer.fontFamily === "System" ? undefined : layer.fontFamily,
+                color: layer.color,
+                textAlign: layer.textAlign,
+                fontWeight: layer.isBold ? "900" : "normal",
+                fontStyle: layer.isItalic ? "italic" : "normal",
+              }}
+            >
+              {layer.text || "TAP TO EDIT"}
+            </AtomicText>
+          ) : isStickerLayer(layer) ? (
+            renderStickerContent(layer.uri, tokens)
+          ) : null}
+        </View>
+      </View>
+    </GestureDetector>
+  );
+});
+
+DraggableLayer.displayName = "DraggableLayer";
+
+function renderStickerContent(uri: string, tokens: any) {
+  const isEmoji = isEmojiString(uri);
+
+  if (isEmoji) {
+    return <AtomicText style={{ fontSize: 48 }}>{uri}</AtomicText>;
+  }
+
+  return (
+    <Image
+      source={{ uri }}
+      style={{ width: 80, height: 80 }}
+      contentFit="contain"
+      accessibilityIgnoresInvertColors
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { position: "absolute" },
+});