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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-photo-editor",
-  "version": "2.0.25",
+  "version": "2.0.27",
   "description": "A powerful, generic photo editor for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/PhotoEditor.tsx

@@ -21,7 +21,7 @@ export interface PhotoEditorProps {
   onSave?: (uri: string, layers: Layer[], filters: FilterSettings) => void;
   onClose: () => void;
   title?: string;
-  customTools?: React.ReactNode | ((ui: any) => React.ReactNode);
+  customTools?: React.ReactNode | ((ui: unknown) => React.ReactNode);
   initialCaption?: string;
   t: (key: string) => string;
   fonts?: readonly string[];

package/src/application/hooks/useEditor.ts

@@ -59,7 +59,7 @@ export function useEditor() {
   ]);
 }
 
-export type { Layer } from "../entities/Layer.entity"";
+export type { Layer } from "../../domain/entities/Layer.entity";
 export type { Transform } from "../../domain/entities/Transform";
 export type { FilterValues } from "../../domain/entities/Filters";
-export type { TextLayerData } from "../entities/Layer.entity"";
+export type { TextContent as TextLayerData } from "../../domain/types";

package/src/application/hooks/useEditorUI.ts

@@ -7,7 +7,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import type { BottomSheetModalRef } from "@umituz/react-native-design-system/molecules";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { useEditor } from "./useEditor";
-import type { TextAlign } from "../entities/Layer.entity"";
+import type { TextAlign } from "../../domain/types";
 import type { Transform } from "../../domain/entities/Transform";
 
 export function useEditorUI(initialCaption?: string) {

package/src/application/stores/EditorStore.ts

@@ -4,8 +4,9 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import { Layer, type TextLayerData } from "../entities/Layer.entity"";
-import { FiltersVO, FilterValues } from "../../domain/entities/Filters";
+import { Layer } from "../../domain/entities/Layer.entity";
+import type { TextContent as TextLayerData } from "../../domain/types";
+import { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
 import { HistoryService, HistoryState } from "../../domain/services/HistoryService";
 import { LayerService } from "../../domain/services/LayerService";
 import type { Transform } from "../../domain/entities/Transform";
@@ -19,7 +20,7 @@ export function useEditorStore() {
     historyService.createInitialState([])
   );
   const [activeLayerId, setActiveLayerId] = useState<string | null>(null);
-  const [filters, setFilters] = useState<FiltersVO>(FiltersVO.default());
+  const [filters, setFilters] = useState<FilterSettings>(FilterSettings.DEFAULT);
 
   // History actions
   const pushLayers = useCallback((layers: Layer[]) => {
@@ -35,11 +36,8 @@ export function useEditorStore() {
   }, []);
 
   // Layer actions
-  const addTextLayer = useCallback((overrides?: Partial<Omit<TextLayerData, "id" | "type">>) => {
-    const layer = layerService.createTextLayer({
-      ...overrides,
-      zIndex: history.present.length,
-    });
+  const addTextLayer = useCallback((overrides?: Partial<TextLayerData>) => {
+    const layer = layerService.createTextLayer(overrides || {});
     pushLayers([...history.present, layer]);
     setActiveLayerId(layer.id);
     return layer.id;
@@ -99,13 +97,29 @@ export function useEditorStore() {
   }, []);
 
   // Filter actions
-  const updateFilters = useCallback((updates: Partial<FilterValues>) => {
-    const current = filters.toJSON();
-    setFilters(FiltersVO.from({ ...current, ...updates }));
+  const updateFilters = useCallback((updates: Partial<{ brightness: number; contrast: number; saturation: number; sepia: number; grayscale: number; hueRotate?: number }>) => {
+    if (updates.brightness !== undefined) {
+      setFilters(filters.withBrightness(updates.brightness));
+    }
+    if (updates.contrast !== undefined) {
+      setFilters(filters.withContrast(updates.contrast));
+    }
+    if (updates.saturation !== undefined) {
+      setFilters(filters.withSaturation(updates.saturation));
+    }
+    if (updates.sepia !== undefined) {
+      setFilters(filters.withSepia(updates.sepia));
+    }
+    if (updates.grayscale !== undefined) {
+      setFilters(filters.withGrayscale(updates.grayscale));
+    }
+    if (updates.hueRotate !== undefined) {
+      setFilters(filters.withHueRotate(updates.hueRotate));
+    }
   }, [filters]);
 
   const resetFilters = useCallback(() => {
-    setFilters(FiltersVO.default());
+    setFilters(FilterSettings.DEFAULT);
   }, []);
 
   // Getters
@@ -122,7 +136,7 @@ export function useEditorStore() {
     layers,
     activeLayerId,
     activeLayer,
-    filters: filters.toJSON(),
+    filters,
     canUndo,
     canRedo,
 

package/src/domain/entities/Layer.entity.ts

@@ -6,6 +6,8 @@
 import type { LayerType, Position, Appearance, LayerContent } from "../types";
 import type { TextLayer } from "./TextLayer.entity";
 import type { StickerLayer } from "./StickerLayer.entity";
+import { TextLayer as TextLayerClass } from "./TextLayer.entity";
+import { StickerLayer as StickerLayerClass } from "./StickerLayer.entity";
 
 export class Layer {
   readonly id: string;
@@ -34,6 +36,12 @@ export class Layer {
     this.content = data.content;
   }
 
+  // Convenience getters for backward compatibility
+  get x(): number { return this.position.x; }
+  get y(): number { return this.position.y; }
+  get zIndex(): number { return this.appearance.zIndex; }
+  get opacity(): number { return this.appearance.opacity; }
+
   // Type guards
   isText(): this is TextLayer {
     return this.type === "text";
@@ -65,6 +73,10 @@ export class Layer {
     });
   }
 
+  withZIndex(zIndex: number): Layer {
+    return this.withAppearance({ zIndex });
+  }
+
   toJSON() {
     return {
       id: this.id,
@@ -78,9 +90,49 @@ export class Layer {
       ...this.content,
     };
   }
+
+  static from(data: ReturnType<Layer["toJSON"]>): Layer {
+    if (data.type === "text") {
+      return new TextLayerClass({
+        id: data.id,
+        position: { x: data.x, y: data.y },
+        rotation: data.rotation,
+        scale: data.scale,
+        appearance: { opacity: data.opacity, zIndex: data.zIndex },
+        content: {
+          text: (data as Record<string, unknown>).text as string || "",
+          fontSize: (data as Record<string, unknown>).fontSize as number || 32,
+          fontFamily: (data as Record<string, unknown>).fontFamily as string || "System",
+          color: (data as Record<string, unknown>).color as string || "#FFFFFF",
+          backgroundColor: (data as Record<string, unknown>).backgroundColor as string || "transparent",
+          textAlign: (data as Record<string, unknown>).textAlign as "left" | "center" | "right" || "center",
+          isBold: (data as Record<string, unknown>).isBold as boolean || undefined,
+          isItalic: (data as Record<string, unknown>).isItalic as boolean || undefined,
+        },
+      });
+    }
+    return new StickerLayerClass({
+      id: data.id,
+      position: { x: data.x, y: data.y },
+      rotation: data.rotation,
+      scale: data.scale,
+      appearance: { opacity: data.opacity, zIndex: data.zIndex },
+      content: { uri: (data as Record<string, unknown>).uri as string || "" },
+    });
+  }
 }
 
-// Re-export for convenience
+// Type exports for backward compatibility
 export type { TextLayer } from "./TextLayer.entity";
 export type { StickerLayer } from "./StickerLayer.entity";
+export type { TextAlign } from "../types";
+
+// Type guard functions for backward compatibility
+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/services/LayerFactory.service.ts

@@ -6,7 +6,7 @@
 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";
+import type { Position, Appearance, TextContent } from "../types";
 
 export class LayerFactory {
   createTextLayer(overrides?: Partial<Position & Appearance & TextContent>): TextLayer {

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

@@ -3,7 +3,7 @@
  * CRUD operations for layers with history support
  */
 
-import type { Layer } from "../entities/Layer.entity".entity";
+import type { Layer } from "../entities/Layer.entity";
 import { LayerFactory } from "./LayerFactory.service";
 
 export class LayerRepository {
@@ -48,6 +48,11 @@ export class LayerRepository {
     const layer = layers.find((l) => l.id === layerId);
     if (!layer) return layers;
 
+    // Type narrowing - only TextLayer and StickerLayer can be duplicated
+    if (!layer.isText() && !layer.isSticker()) {
+      return layers;
+    }
+
     const duplicate = this.factory.duplicateLayer(layer, layers);
     return [...layers, duplicate];
   }

package/src/domain/services/LayerService.ts

@@ -3,7 +3,10 @@
  * Business logic for layer operations
  */
 
-import { Layer, TextLayer, StickerLayer, type TextLayerData, type StickerLayerData } from "../entities/Layer.entity"";
+import { Layer } from "../entities/Layer.entity";
+import { TextLayer } from "../entities/TextLayer.entity";
+import { StickerLayer } from "../entities/StickerLayer.entity";
+import type { TextContent } from "../types";
 import type { Transform } from "../entities/Transform";
 
 export class LayerService {
@@ -11,18 +14,10 @@ export class LayerService {
     return `${type}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
 
-  createTextLayer(overrides: Partial<Omit<TextLayerData, "id" | "type">> = {}): TextLayer {
+  createTextLayer(overrides: Partial<TextContent> = {}): TextLayer {
     const id = this.generateId("text");
-    const defaults: TextLayerData = {
-      id,
-      type: "text",
+    const contentDefaults: TextContent = {
       text: "",
-      x: 50,
-      y: 50,
-      rotation: 0,
-      scale: 1,
-      opacity: 1,
-      zIndex: 0,
       fontSize: 32,
       fontFamily: "System",
       color: "#FFFFFF",
@@ -32,24 +27,27 @@ export class LayerService {
       isItalic: false,
     };
 
-    return new TextLayer({ ...defaults, ...overrides });
+    return new TextLayer({
+      id,
+      position: { x: 50, y: 50 },
+      rotation: 0,
+      scale: 1,
+      appearance: { opacity: 1, zIndex: 0 },
+      content: { ...contentDefaults, ...overrides },
+    });
   }
 
-  createStickerLayer(uri: string, overrides: Partial<Omit<StickerLayerData, "id" | "type" | "uri">> = {}): StickerLayer {
+  createStickerLayer(uri: string, _overrides: Record<string, never> = {}): StickerLayer {
     const id = this.generateId("sticker");
-    const defaults: StickerLayerData = {
+
+    return new StickerLayer({
       id,
-      type: "sticker",
-      uri,
-      x: 100,
-      y: 100,
+      position: { x: 100, y: 100 },
       rotation: 0,
       scale: 1,
-      opacity: 1,
-      zIndex: 0,
-    };
-
-    return new StickerLayer({ ...defaults, ...overrides });
+      appearance: { opacity: 1, zIndex: 0 },
+      content: { uri },
+    });
   }
 
   updateLayer(layers: Layer[], layerId: string, updates: Partial<Transform>): Layer[] {

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

@@ -53,4 +53,4 @@ export const LayerDefaults = {
   },
 } as const;
 
-export type LayerDefaults = typeof LayerDefaults;
+export type LayerDefaultsType = typeof LayerDefaults;

package/src/index.ts

@@ -10,10 +10,12 @@ export { PhotoEditor } from "./PhotoEditor";
 export type { PhotoEditorProps } from "./PhotoEditor";
 
 // Domain entities
-export type { Layer, TextLayer, StickerLayer } from "../entities/Layer.entity"";
+export type { Layer, TextLayer, StickerLayer } from "./domain/entities/Layer.entity";
+export type { TextContent as TextLayerData, StickerContent as StickerLayerData } from "./domain/types";
+export type { TextAlign } from "./domain/types";
 export type { Transform } from "./domain/entities/Transform";
 export type { FilterValues, FiltersVO } from "./domain/entities/Filters";
-export { isTextLayer, isStickerLayer } from "../entities/Layer.entity"";
+export { isTextLayer, isStickerLayer } from "./domain/entities/Layer.entity";
 
 // Application hooks
 export { useEditor } from "./application/hooks/useEditor";

package/src/infrastructure/gesture/createTransformGesture.ts

@@ -5,7 +5,7 @@
 
 import { useState, useCallback, useEffect, useRef } from "react";
 import { Gesture } from "react-native-gesture-handler";
-import type { Layer } from "../entities/Layer.entity".entity";
+import type { Layer } from "../../domain/entities/Layer.entity";
 
 export interface TransformGestureState {
   position: { x: number; y: number };

package/src/presentation/components/DraggableLayer.tsx

@@ -11,7 +11,7 @@ import { Image } from "expo-image";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system/theme";
 import { useTransformGesture } from "../../infrastructure/gesture/useTransformGesture";
-import type { Layer } from "../entities/Layer.entity".entity";
+import type { Layer } from "../../domain/entities/Layer.entity";
 
 interface DraggableLayerProps {
   layer: Layer;

package/src/presentation/components/EditorCanvas.tsx

@@ -7,7 +7,7 @@ import React, { memo } from "react";
 import { View, StyleSheet, type ViewStyle } from "react-native";
 import { Image } from "expo-image";
 import { DraggableLayer } from "./DraggableLayer";
-import type { Layer } from "../entities/Layer.entity".entity";
+import type { Layer } from "../../domain/entities/Layer.entity";
 import type { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
 
 interface EditorCanvasProps {

package/src/presentation/components/EditorContent.tsx

@@ -8,7 +8,7 @@ import { ScrollView } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { EditorCanvas } from "./EditorCanvas";
 import { FontControls } from "./FontControls";
-import type { Layer } from "../entities/Layer.entity".entity";
+import type { Layer } from "../../domain/entities/Layer.entity";
 import type { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
 import type { EditorUIState } from "../../application/hooks/useEditorUI";
 

package/src/presentation/components/sheets/LayerManager.tsx

@@ -7,7 +7,7 @@ import React, { memo } from "react";
 import { View, ScrollView, TouchableOpacity } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { Layer } from "../entities/Layer.entity"";
+import { Layer } from "../../../domain/entities/Layer.entity";
 
 interface LayerManagerProps {
   layers: Layer[];

package/src/presentation/components/sheets/TextEditorSheet.tsx

@@ -8,7 +8,7 @@ import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { ColorPicker } from "../ui/ColorPicker";
-import type { TextAlign } from "../entities/Layer.entity"";
+import type { TextAlign } from "../../../domain/types";
 
 interface TextEditorSheetProps {
   value: string;

package/src/types.ts

@@ -3,13 +3,14 @@
  * Re-exports domain types for convenience
  */
 
-export type { TextAlign } from "../entities/Layer.entity"";
-export type { Layer, TextLayer, StickerLayer, TextLayerData, StickerLayerData } from "../entities/Layer.entity"";
+export type { TextAlign } from "./domain/types";
+export type { Layer, TextLayer, StickerLayer } from "./domain/entities/Layer.entity";
+export type { TextContent as TextLayerData, StickerContent as StickerLayerData } from "./domain/types";
 export type { Transform } from "./domain/entities/Transform";
 export type { FilterValues as ImageFilters } from "./domain/entities/Filters";
 
 // Re-export type guards
-export { isTextLayer, isStickerLayer } from "../entities/Layer.entity"";
+export { isTextLayer, isStickerLayer } from "./domain/entities/Layer.entity";
 
 // Re-export DEFAULT_FILTERS as value (not type)
 export { DEFAULT_FILTERS as DEFAULT_IMAGE_FILTERS } from "./domain/entities/Filters";