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

package/src/domain/services/LayerFactory.service.ts

@@ -0,0 +1,81 @@
+/**
+ * Layer Factory Service
+ * Centralized layer creation with defaults and validation
+ */
+
+import { TextLayer } from "../entities/TextLayer.entity";
+import { StickerLayer } from "../entities/StickerLayer.entity";
+import { LayerDefaults } from "../value-objects/LayerDefaults.vo";
+import type { Position, Appearance, TextContent, StickerContent } from "../types";
+
+export class LayerFactory {
+  createTextLayer(overrides?: Partial<Position & Appearance & TextContent>): TextLayer {
+    const id = LayerDefaults.createId("text");
+
+    return new TextLayer({
+      id,
+      position: { ...LayerDefaults.position, ...overrides },
+      rotation: LayerDefaults.transform.rotation,
+      scale: LayerDefaults.transform.scale,
+      appearance: { ...LayerDefaults.appearance, ...overrides },
+      content: {
+        ...LayerDefaults.text,
+        ...overrides,
+      },
+    });
+  }
+
+  createStickerLayer(uri: string, overrides?: Partial<Position & Appearance>): StickerLayer {
+    const id = LayerDefaults.createId("sticker");
+
+    return new StickerLayer({
+      id,
+      position: { ...LayerDefaults.position, ...overrides },
+      rotation: LayerDefaults.transform.rotation,
+      scale: LayerDefaults.transform.scale,
+      appearance: { ...LayerDefaults.appearance, ...overrides },
+      content: {
+        uri,
+      },
+    });
+  }
+
+  duplicateLayer<T extends TextLayer | StickerLayer>(
+    layer: T,
+    currentLayers: { zIndex: number }[]
+  ): T {
+    const nextZIndex = LayerDefaults.getNextZIndex(currentLayers);
+    const offset = { x: 20, y: 20 };
+
+    if (layer instanceof TextLayer) {
+      return new TextLayer({
+        ...layer,
+        id: LayerDefaults.createId("text"),
+        position: {
+          x: layer.position.x + offset.x,
+          y: layer.position.y + offset.y,
+        },
+        appearance: {
+          ...layer.appearance,
+          zIndex: nextZIndex,
+        },
+      }) as T;
+    }
+
+    return new StickerLayer({
+      ...layer,
+      id: LayerDefaults.createId("sticker"),
+      position: {
+        x: layer.position.x + offset.x,
+        y: layer.position.y + offset.y,
+      },
+      appearance: {
+        ...layer.appearance,
+        zIndex: nextZIndex,
+      },
+    }) as T;
+  }
+}
+
+// Singleton instance
+export const layerFactory = new LayerFactory();

package/src/domain/services/LayerRepository.service.ts

@@ -0,0 +1,85 @@
+/**
+ * Layer Repository Service
+ * CRUD operations for layers with history support
+ */
+
+import type { Layer } from "../entities/Layer.entity".entity";
+import { LayerFactory } from "./LayerFactory.service";
+
+export class LayerRepository {
+  constructor(private factory: LayerFactory) {}
+
+  createLayer(
+    type: "text" | "sticker",
+    content: string,
+    currentLayers: Layer[]
+  ): Layer {
+    if (type === "text") {
+      return this.factory.createTextLayer({
+        zIndex: this.getNextZIndex(currentLayers),
+      });
+    }
+
+    return this.factory.createStickerLayer(content || "", {
+      zIndex: this.getNextZIndex(currentLayers),
+    });
+  }
+
+  updateLayer(
+    layers: Layer[],
+    layerId: string,
+    updates: Partial<{ position: { x: number; y: number }; rotation: number; scale: number }>
+  ): Layer[] {
+    return layers.map((layer) =>
+      layer.id === layerId
+        ? layer.withPosition(updates.position || {}).withTransform({
+            rotation: updates.rotation,
+            scale: updates.scale,
+          })
+        : 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 duplicate = this.factory.duplicateLayer(layer, layers);
+    return [...layers, duplicate];
+  }
+
+  reorderLayers(layers: Layer[], layerId: string, direction: "up" | "down"): Layer[] {
+    const sorted = this.sortByZIndex(layers);
+    const idx = sorted.findIndex((l) => l.id === layerId);
+
+    if (idx === -1) return layers;
+    if (direction === "up" && idx >= sorted.length - 1) return layers;
+    if (direction === "down" && idx <= 0) return layers;
+
+    const reordered = [...sorted];
+    const targetIdx = direction === "up" ? idx + 1 : idx - 1;
+    [reordered[idx], reordered[targetIdx]] = [reordered[targetIdx], reordered[idx]];
+
+    return this.reassignZIndex(reordered);
+  }
+
+  sortByZIndex(layers: Layer[]): Layer[] {
+    return [...layers].sort((a, b) => a.appearance.zIndex - b.appearance.zIndex);
+  }
+
+  private getNextZIndex(layers: Layer[]): number {
+    return layers.length > 0 ? Math.max(...layers.map((l) => l.appearance.zIndex)) + 1 : 0;
+  }
+
+  private reassignZIndex(layers: Layer[]): Layer[] {
+    return layers.map((layer, i) => layer.withAppearance({ zIndex: i }));
+  }
+}
+
+// Singleton instance
+import { layerFactory } from "./LayerFactory.service";
+export const layerRepository = new LayerRepository(layerFactory);

package/src/domain/services/LayerService.ts

@@ -3,7 +3,7 @@
  * Business logic for layer operations
  */
 
-import { Layer, TextLayer, StickerLayer, isTextLayer } from "../entities/Layer";
+import { Layer, TextLayer, StickerLayer, type TextLayerData, type StickerLayerData } from "../entities/Layer.entity"";
 import type { Transform } from "../entities/Transform";
 
 export class LayerService {

package/src/domain/types.ts

@@ -0,0 +1,39 @@
+/**
+ * Shared Domain Types
+ * Central type definitions for the photo editor domain
+ */
+
+export type LayerType = "text" | "sticker";
+export type TextAlign = "left" | "center" | "right";
+
+export interface Position {
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface Dimensions {
+  readonly width?: number;
+  readonly height?: number;
+}
+
+export interface Appearance {
+  readonly opacity: number;
+  readonly zIndex: number;
+}
+
+export interface TextContent {
+  readonly text: string;
+  readonly fontSize: number;
+  readonly fontFamily: string;
+  readonly color: string;
+  readonly backgroundColor: string;
+  readonly textAlign: TextAlign;
+  readonly isBold?: boolean;
+  readonly isItalic?: boolean;
+}
+
+export interface StickerContent {
+  readonly uri: string;
+}
+
+export type LayerContent = TextContent | StickerContent;

package/src/domain/value-objects/FilterSettings.vo.ts

@@ -0,0 +1,89 @@
+/**
+ * Filter Settings Value Object
+ * Immutable image filter adjustments
+ */
+
+export interface FilterData {
+  readonly brightness: number;
+  readonly contrast: number;
+  readonly saturation: number;
+  readonly sepia: number;
+  readonly grayscale: number;
+  readonly hueRotate?: number;
+}
+
+export class FilterSettings {
+  readonly brightness: number;
+  readonly contrast: number;
+  readonly saturation: number;
+  readonly sepia: number;
+  readonly grayscale: number;
+  readonly hueRotate?: number;
+
+  constructor(data: FilterData) {
+    this.brightness = data.brightness;
+    this.contrast = data.contrast;
+    this.saturation = data.saturation;
+    this.sepia = data.sepia;
+    this.grayscale = data.grayscale;
+    this.hueRotate = data.hueRotate;
+  }
+
+  static readonly DEFAULT = new FilterSettings({
+    brightness: 1,
+    contrast: 1,
+    saturation: 1,
+    sepia: 0,
+    grayscale: 0,
+  });
+
+  withBrightness(brightness: number): FilterSettings {
+    return new FilterSettings({ ...this, brightness });
+  }
+
+  withContrast(contrast: number): FilterSettings {
+    return new FilterSettings({ ...this, contrast });
+  }
+
+  withSaturation(saturation: number): FilterSettings {
+    return new FilterSettings({ ...this, saturation });
+  }
+
+  withSepia(sepia: number): FilterSettings {
+    return new FilterSettings({ ...this, sepia });
+  }
+
+  withGrayscale(grayscale: number): FilterSettings {
+    return new FilterSettings({ ...this, grayscale });
+  }
+
+  withHueRotate(hueRotate: number): FilterSettings {
+    return new FilterSettings({ ...this, hueRotate });
+  }
+
+  reset(): FilterSettings {
+    return FilterSettings.DEFAULT;
+  }
+
+  toJSON(): FilterData {
+    return {
+      brightness: this.brightness,
+      contrast: this.contrast,
+      saturation: this.saturation,
+      sepia: this.sepia,
+      grayscale: this.grayscale,
+      hueRotate: this.hueRotate,
+    };
+  }
+
+  toRecord(): Record<string, number> {
+    return {
+      brightness: this.brightness,
+      contrast: this.contrast,
+      saturation: this.saturation,
+      sepia: this.sepia,
+      grayscale: this.grayscale,
+      ...(this.hueRotate !== undefined && { hueRotate: this.hueRotate }),
+    } as Record<string, number>;
+  }
+}

package/src/domain/value-objects/LayerDefaults.vo.ts

@@ -0,0 +1,56 @@
+/**
+ * Layer Defaults Value Object
+ * Centralized default values for layer creation
+ */
+
+import type { TextAlign } from "../types";
+
+export const LayerDefaults = {
+  // Position defaults
+  position: {
+    x: 50,
+    y: 50,
+  },
+
+  // Transform defaults
+  transform: {
+    rotation: 0,
+    scale: 1,
+  },
+
+  // Appearance defaults
+  appearance: {
+    opacity: 1,
+    zIndex: 0,
+  },
+
+  // Text layer defaults
+  text: {
+    text: "",
+    fontSize: 32,
+    fontFamily: "System",
+    color: "#FFFFFF",
+    backgroundColor: "transparent",
+    textAlign: "center" as TextAlign,
+    isBold: false,
+    isItalic: false,
+  },
+
+  // Sticker layer defaults
+  sticker: {
+    uri: "",
+  },
+
+  // Utility functions
+  createId(type: "text" | "sticker"): string {
+    return `${type}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  },
+
+  getNextZIndex(currentLayers: { zIndex: number }[]): number {
+    return currentLayers.length > 0
+      ? Math.max(...currentLayers.map((l) => l.zIndex)) + 1
+      : 0;
+  },
+} as const;
+
+export type LayerDefaults = typeof LayerDefaults;

package/src/domain/value-objects/Transform.vo.ts

@@ -0,0 +1,61 @@
+/**
+ * Transform Value Object
+ * Immutable position, scale, and rotation state
+ */
+
+export interface TransformData {
+  readonly x: number;
+  readonly y: number;
+  readonly rotation: number;
+  readonly scale: number;
+}
+
+export class Transform {
+  readonly x: number;
+  readonly y: number;
+  readonly rotation: number;
+  readonly scale: number;
+
+  constructor(data: TransformData) {
+    this.x = data.x;
+    this.y = data.y;
+    this.rotation = data.rotation;
+    this.scale = data.scale;
+  }
+
+  static readonly DEFAULT = new Transform({
+    x: 50,
+    y: 50,
+    rotation: 0,
+    scale: 1,
+  });
+
+  withX(x: number): Transform {
+    return new Transform({ ...this, x });
+  }
+
+  withY(y: number): Transform {
+    return new Transform({ ...this, y });
+  }
+
+  withPosition(position: { x: number; y: number }): Transform {
+    return new Transform({ ...this, ...position });
+  }
+
+  withRotation(rotation: number): Transform {
+    return new Transform({ ...this, rotation });
+  }
+
+  withScale(scale: number): Transform {
+    return new Transform({ ...this, scale });
+  }
+
+  toJSON(): TransformData {
+    return {
+      x: this.x,
+      y: this.y,
+      rotation: this.rotation,
+      scale: this.scale,
+    };
+  }
+}

package/src/domain/value-objects/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Value Objects Export
+ * Immutable value objects for domain modeling
+ */
+
+export { Transform } from "./Transform.vo";
+export type { TransformData } from "./Transform.vo";
+
+export { FilterSettings } from "./FilterSettings.vo";
+export type { FilterData } from "./FilterSettings.vo";
+
+export { LayerDefaults } from "./LayerDefaults.vo";
+export type { LayerDefaults as LayerDefaultsType } from "./LayerDefaults.vo";

package/src/index.ts

@@ -10,18 +10,18 @@ export { PhotoEditor } from "./PhotoEditor";
 export type { PhotoEditorProps } from "./PhotoEditor";
 
 // Domain entities
-export type { Layer, TextLayer, StickerLayer } from "./domain/entities/Layer";
+export type { Layer, TextLayer, StickerLayer } from "../entities/Layer.entity"";
 export type { Transform } from "./domain/entities/Transform";
 export type { FilterValues, FiltersVO } from "./domain/entities/Filters";
-export { isTextLayer, isStickerLayer } from "./domain/entities/Layer";
+export { isTextLayer, isStickerLayer } from "../entities/Layer.entity"";
 
 // Application hooks
 export { useEditor } from "./application/hooks/useEditor";
 export { useEditorUI } from "./application/hooks/useEditorUI";
 
 // Types & constants
-export type { LayerTransform } from "./infrastructure/gesture/types";
-export { DEFAULT_IMAGE_FILTERS } from "./domain/entities/Filters";
+export type { TransformGestureState, TransformGestureConfig } from "./infrastructure/gesture/types";
+export { DEFAULT_IMAGE_FILTERS } from "./types";
 export { DEFAULT_FONTS, DEFAULT_TEXT_COLORS, DEFAULT_STICKERS, DEFAULT_AI_STYLES } from "./constants";
 export type { FilterOption } from "./presentation/components/sheets/FilterSheet";
 

package/src/infrastructure/gesture/createTransformGesture.ts

@@ -0,0 +1,127 @@
+/**
+ * Transform Gesture Utility
+ * Reusable gesture logic for draggable layers
+ */
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import type { Layer } from "../entities/Layer.entity".entity";
+
+export interface TransformGestureState {
+  position: { x: number; y: number };
+  scale: number;
+  rotation: number;
+}
+
+export interface TransformGestureConfig {
+  minScale?: number;
+  maxScale?: number;
+  onTransformEnd: (transform: { x: number; y: number; scale: number; rotation: number }) => void;
+  onPress?: () => void;
+}
+
+export function useTransformGesture(
+  initialTransform: Pick<Layer, "position" | "rotation" | "scale">,
+  config: TransformGestureConfig
+) {
+  const {
+    minScale = 0.2,
+    maxScale = 6,
+    onTransformEnd,
+    onPress,
+  } = config;
+
+  const [state, setState] = useState<TransformGestureState>(() => ({
+    position: { x: initialTransform.position.x, y: initialTransform.position.y },
+    scale: initialTransform.scale,
+    rotation: initialTransform.rotation,
+  }));
+
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  const onTransformEndRef = useRef(onTransformEnd);
+  onTransformEndRef.current = onTransformEnd;
+  const onPressRef = useRef(onPress);
+  onPressRef.current = onPress;
+
+  const offsetRef = useRef(state.position);
+  const scaleStartRef = useRef(state.scale);
+  const rotationStartRef = useRef(state.rotation);
+
+  useEffect(() => {
+    setState((prev) => ({
+      ...prev,
+      position: {
+        x: initialTransform.position.x ?? prev.position.x,
+        y: initialTransform.position.y ?? prev.position.y,
+      },
+      scale: initialTransform.scale ?? prev.scale,
+      rotation: initialTransform.rotation ?? prev.rotation,
+    }));
+  }, [initialTransform.position.x, initialTransform.position.y, initialTransform.scale, initialTransform.rotation]);
+
+  const emitTransform = useCallback(() => {
+    onTransformEndRef.current({
+      x: stateRef.current.position.x,
+      y: stateRef.current.position.y,
+      scale: stateRef.current.scale,
+      rotation: stateRef.current.rotation,
+    });
+  }, []);
+
+  const panGesture = Gesture.Pan()
+    .runOnJS(true)
+    .averageTouches(true)
+    .onStart(() => {
+      offsetRef.current = stateRef.current.position;
+    })
+    .onUpdate((e: { translationX: number; translationY: number }) => {
+      setState({
+        ...stateRef.current,
+        position: {
+          x: offsetRef.current.x + e.translationX,
+          y: offsetRef.current.y + e.translationY,
+        },
+      });
+    })
+    .onEnd(emitTransform);
+
+  const pinchGesture = Gesture.Pinch()
+    .runOnJS(true)
+    .onStart(() => {
+      scaleStartRef.current = stateRef.current.scale;
+    })
+    .onUpdate((e: { scale: number }) => {
+      setState({
+        ...stateRef.current,
+        scale: Math.max(minScale, Math.min(maxScale, scaleStartRef.current * e.scale)),
+      });
+    })
+    .onEnd(emitTransform);
+
+  const rotationGesture = Gesture.Rotation()
+    .runOnJS(true)
+    .onStart(() => {
+      rotationStartRef.current = stateRef.current.rotation;
+    })
+    .onUpdate((e: { rotation: number }) => {
+      setState({
+        ...stateRef.current,
+        rotation: rotationStartRef.current + (e.rotation * 180) / Math.PI,
+      });
+    })
+    .onEnd(emitTransform);
+
+  const tapGesture = Gesture.Tap()
+    .runOnJS(true)
+    .onEnd(() => onPressRef.current?.());
+
+  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/gesture/useTransformGesture.ts

@@ -9,12 +9,6 @@ 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
@@ -35,7 +29,7 @@ export function useTransformGesture(
 
   // Sync state when props change (undo/redo)
   useEffect(() => {
-    setState(prev => ({
+    setState((prev: TransformGestureState) => ({
       ...prev,
       position: { x: initialTransform.x ?? prev.position.x, y: initialTransform.y ?? prev.position.y },
       scale: initialTransform.scale ?? prev.scale,
@@ -73,8 +67,8 @@ export function useTransformGesture(
     .onStart(() => {
       offsetRef.current = stateRef.current.position;
     })
-    .onUpdate((e) => {
-      setState(prev => ({
+    .onUpdate((e: { translationX: number; translationY: number }) => {
+      setState((prev: TransformGestureState) => ({
         ...prev,
         position: {
           x: offsetRef.current.x + e.translationX,
@@ -90,8 +84,8 @@ export function useTransformGesture(
     .onStart(() => {
       scaleStartRef.current = stateRef.current.scale;
     })
-    .onUpdate((e) => {
-      setState(prev => ({
+    .onUpdate((e: { scale: number }) => {
+      setState((prev: TransformGestureState) => ({
         ...prev,
         scale: Math.max(minScale, Math.min(maxScale, scaleStartRef.current * e.scale)),
       }));
@@ -104,8 +98,8 @@ export function useTransformGesture(
     .onStart(() => {
       rotationStartRef.current = stateRef.current.rotation;
     })
-    .onUpdate((e) => {
-      setState(prev => ({
+    .onUpdate((e: { rotation: number }) => {
+      setState((prev: TransformGestureState) => ({
         ...prev,
         rotation: rotationStartRef.current + (e.rotation * 180) / Math.PI,
       }));