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

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 "../../domain/entities/Layer.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,
       }));

package/src/presentation/components/DraggableLayer.tsx

@@ -5,13 +5,13 @@
  */
 
 import React, { memo } from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet } 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 { 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 { Layer, isTextLayer, isStickerLayer } from "../../domain/entities/Layer";
+import type { Layer } from "../../domain/entities/Layer.entity";
 
 interface DraggableLayerProps {
   layer: Layer;
@@ -30,15 +30,15 @@ export const DraggableLayer = memo<DraggableLayerProps>(({
   onTransformEnd,
 }) => {
   const tokens = useAppDesignTokens();
-  const { state, gestures } = useTransformGesture(layer, {
-    onTransformEnd,
-    onPress,
-  });
+  const { state, gestures } = useTransformGesture(
+    { x: layer.x, y: layer.y, scale: layer.scale, rotation: layer.rotation },
+    { onTransformEnd, onPress }
+  );
 
   return (
     <GestureDetector gesture={gestures.composed}>
       <View
-        accessibilityLabel={isTextLayer(layer) ? layer.text || "Text layer" : "Sticker layer"}
+        accessibilityLabel={layer.isText() ? layer.text || "Text layer" : "Sticker layer"}
         accessibilityRole="button"
         style={[
           styles.container,
@@ -63,12 +63,12 @@ export const DraggableLayer = memo<DraggableLayerProps>(({
             borderStyle: "dashed",
             backgroundColor: isSelected
               ? tokens.colors.primary + "10"
-              : isTextLayer(layer)
+              : layer.isText()
                 ? layer.backgroundColor
                 : "transparent",
           }}
         >
-          {isTextLayer(layer) ? (
+          {layer.isText() ? (
             <AtomicText
               style={{
                 fontSize: layer.fontSize,
@@ -81,7 +81,7 @@ export const DraggableLayer = memo<DraggableLayerProps>(({
             >
               {layer.text || "TAP TO EDIT"}
             </AtomicText>
-          ) : isStickerLayer(layer) ? (
+          ) : layer.isSticker() ? (
             renderStickerContent(layer.uri, tokens)
           ) : null}
         </View>
@@ -92,7 +92,7 @@ export const DraggableLayer = memo<DraggableLayerProps>(({
 
 DraggableLayer.displayName = "DraggableLayer";
 
-function renderStickerContent(uri: string, tokens: any) {
+function renderStickerContent(uri: string, _tokens: DesignTokens) {
   const isEmoji = isEmojiString(uri);
 
   if (isEmoji) {

package/src/presentation/components/EditorCanvas.tsx

@@ -4,20 +4,20 @@
  */
 
 import React, { memo } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, type ViewStyle } from "react-native";
 import { Image } from "expo-image";
 import { DraggableLayer } from "./DraggableLayer";
-import { Layer } from "../../domain/entities/Layer";
-import type { FilterValues } from "../../domain/entities/Filters";
+import type { Layer } from "../../domain/entities/Layer.entity";
+import type { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
 
 interface EditorCanvasProps {
   imageUrl: string;
   layers: Layer[];
   activeLayerId: string | null;
-  filters: FilterValues;
+  filters: FilterSettings;
   onLayerTap: (layerId: string) => void;
   onLayerTransform: (layerId: string, transform: { x: number; y: number; scale: number; rotation: number }) => void;
-  style?: any;
+  style?: ViewStyle;
 }
 
 export const EditorCanvas = memo<EditorCanvasProps>(({

package/src/presentation/components/EditorContent.tsx

@@ -0,0 +1,72 @@
+/**
+ * Editor Content Component
+ * Scrollable content area with canvas and tools
+ */
+
+import React from "react";
+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 "../../domain/entities/Layer.entity";
+import type { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
+import type { EditorUIState } from "../../application/hooks/useEditorUI";
+
+interface EditorContentProps {
+  imageUrl: string;
+  layers: Layer[];
+  filters: FilterSettings;
+  activeLayerId: string | null;
+  selectedFont: string;
+  fontSize: number;
+  fonts: readonly string[];
+  customTools?: React.ReactNode | ((ui: EditorUIState) => React.ReactNode);
+  ui: EditorUIState;
+  onFontSizeChange: (size: number) => void;
+  onFontSelect: (font: string) => void;
+}
+
+export function EditorContent({
+  imageUrl,
+  layers,
+  filters,
+  activeLayerId,
+  selectedFont,
+  fontSize,
+  fonts,
+  customTools,
+  ui,
+  onFontSizeChange,
+  onFontSelect,
+}: EditorContentProps) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        padding: tokens.spacing.md,
+        gap: tokens.spacing.md,
+      }}
+    >
+      <EditorCanvas
+        imageUrl={imageUrl}
+        layers={layers}
+        activeLayerId={activeLayerId}
+        filters={filters}
+        onLayerTap={ui.handleTextLayerTap}
+        onLayerTransform={ui.handleLayerTransform}
+      />
+
+      {typeof customTools === "function" ? customTools(ui) : customTools}
+
+      <FontControls
+        fontSize={fontSize}
+        selectedFont={selectedFont}
+        fonts={fonts}
+        onFontSizeChange={onFontSizeChange}
+        onFontSelect={onFontSelect}
+      />
+    </ScrollView>
+  );
+}
+

package/src/presentation/components/EditorHeader.tsx

@@ -0,0 +1,48 @@
+/**
+ * Editor Header Component
+ * Header with close, title, and save buttons
+ */
+
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+interface EditorHeaderProps {
+  title: string;
+  saveLabel: string;
+  onClose: () => void;
+  onSave: () => void;
+}
+
+export function EditorHeader({ title, saveLabel, onClose, onSave }: EditorHeaderProps) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: tokens.spacing.md,
+        paddingVertical: tokens.spacing.sm,
+        borderBottomWidth: 1,
+        borderBottomColor: tokens.colors.border,
+      }}
+    >
+      <TouchableOpacity onPress={onClose} accessibilityLabel="Close editor" accessibilityRole="button">
+        <AtomicIcon name="close" size="md" color="textPrimary" />
+      </TouchableOpacity>
+
+      <AtomicText type="headlineSmall" style={{ flex: 1, textAlign: "center" as const }}>
+        {title}
+      </AtomicText>
+
+      <TouchableOpacity onPress={onSave} accessibilityLabel="Save" accessibilityRole="button">
+        <AtomicText fontWeight="bold" color="primary">
+          {saveLabel}
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/src/presentation/components/EditorSheets.tsx

@@ -0,0 +1,85 @@
+/**
+ * Editor Sheets Component
+ * All bottom sheets for the editor
+ */
+
+import React from "react";
+import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
+import { TextEditorSheet } from "./sheets/TextEditorSheet";
+import { StickerPicker } from "./sheets/StickerPicker";
+import { FilterSheet } from "./sheets/FilterSheet";
+import { AdjustmentsSheet } from "./sheets/AdjustmentsSheet";
+import { LayerManager } from "./sheets/LayerManager";
+import { AIMagicSheet } from "./sheets/AIMagicSheet";
+import type { FilterOption } from "./sheets/FilterSheet";
+import type { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
+import type { EditorUIState } from "../../application/hooks/useEditorUI";
+
+interface EditorSheetsProps {
+  ui: EditorUIState;
+  filters: FilterSettings;
+  t: (key: string) => string;
+  onAICaption?: (style: string) => Promise<string> | void;
+}
+
+export function EditorSheets({ ui, filters, t, onAICaption }: EditorSheetsProps) {
+  return (
+    <>
+      <BottomSheetModal ref={ui.textEditorSheetRef} snapPoints={["55%"]}>
+        <TextEditorSheet
+          value={ui.editingText}
+          onChange={ui.setEditingText}
+          onSave={ui.handleSaveText}
+          t={t}
+          color={ui.editingColor}
+          onColorChange={ui.setEditingColor}
+          textAlign={ui.editingAlign}
+          onTextAlignChange={ui.setEditingAlign}
+          isBold={ui.editingBold}
+          onBoldChange={ui.setEditingBold}
+          isItalic={ui.editingItalic}
+          onItalicChange={ui.setEditingItalic}
+        />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.stickerSheetRef} snapPoints={["50%"]}>
+        <StickerPicker onSelectSticker={ui.handleSelectSticker} />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.filterSheetRef} snapPoints={["40%"]}>
+        <FilterSheet
+          selectedFilter={ui.selectedFilter}
+          onSelectFilter={(option: FilterOption) => {
+            ui.setSelectedFilter(option.id);
+            ui.updateFilters(option.filters);
+            ui.filterSheetRef.current?.dismiss();
+          }}
+        />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.adjustmentsSheetRef} snapPoints={["55%"]}>
+        <AdjustmentsSheet filters={filters} onFiltersChange={ui.updateFilters} />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.layerSheetRef} snapPoints={["55%"]}>
+        <LayerManager
+          layers={ui.layers}
+          activeLayerId={ui.activeLayerId}
+          onSelectLayer={ui.selectLayer}
+          onDeleteLayer={ui.deleteLayer}
+          onDuplicateLayer={ui.duplicateLayer}
+          onMoveLayerUp={ui.moveLayerUp}
+          onMoveLayerDown={ui.moveLayerDown}
+          t={t}
+        />
+      </BottomSheetModal>
+
+      {onAICaption && (
+        <BottomSheetModal ref={ui.aiSheetRef} snapPoints={["60%"]}>
+          <AIMagicSheet onGenerateCaption={onAICaption} />
+        </BottomSheetModal>
+      )}
+    </>
+  );
+}
+

package/src/presentation/components/FontControls.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { memo } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { View, ScrollView, TouchableOpacity, StyleSheet, type ViewStyle } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { Slider } from "./ui/Slider";
@@ -23,7 +23,7 @@ interface FontControlsProps {
   fonts?: readonly string[];
   onFontSizeChange: (size: number) => void;
   onFontSelect: (font: string) => void;
-  style?: any;
+  style?: ViewStyle;
 }
 
 export const FontControls = memo<FontControlsProps>(({

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

@@ -8,11 +8,11 @@ import { View, TouchableOpacity } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { Slider } from "../ui/Slider";
-import { DEFAULT_FILTERS } from "../../../domain/entities/Filters";
+import { DEFAULT_FILTERS, type FilterValues } from "../../../domain/entities/Filters";
 
 interface AdjustmentsSheetProps {
-  filters: Record<string, number>;
-  onFiltersChange: (filters: Record<string, number>) => void;
+  filters: FilterValues;
+  onFiltersChange: (filters: FilterValues) => void;
 }
 
 export const AdjustmentsSheet = memo<AdjustmentsSheetProps>(({
@@ -21,7 +21,7 @@ export const AdjustmentsSheet = memo<AdjustmentsSheetProps>(({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const update = (key: string, val: number) => {
+  const update = (key: keyof FilterValues, val: number) => {
     onFiltersChange({ ...filters, [key]: val });
   };
 

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

@@ -21,7 +21,7 @@ interface FilterSheetProps {
   filters?: FilterOption[];
 }
 
-const DEFAULT_FILTERS: FilterOption[] = [
+export const DEFAULT_FILTERS: FilterOption[] = [
   {
     id: "none",
     name: "None",

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, isTextLayer } from "../../../domain/entities/Layer";
+import { Layer } from "../../../domain/entities/Layer.entity";
 
 interface LayerManagerProps {
   layers: Layer[];
@@ -47,7 +47,7 @@ export const LayerManager = memo<LayerManagerProps>(({
         ) : (
           sortedLayers.map((layer, idx) => {
             const isActive = activeLayerId === layer.id;
-            const label = isTextLayer(layer)
+            const label = layer.isText()
               ? layer.text || t("photo_editor.untitled") || "Untitled"
               : "Sticker";
             const isTop = idx === 0;
@@ -60,12 +60,11 @@ export const LayerManager = memo<LayerManagerProps>(({
                   flexDirection: "row",
                   alignItems: "center",
                   padding: tokens.spacing.sm,
-                  backgroundColor: tokens.colors.surfaceVariant,
+                  backgroundColor: isActive ? tokens.colors.primary + "10" : tokens.colors.surfaceVariant,
                   borderRadius: tokens.borders.radius.md,
                   marginBottom: tokens.spacing.xs,
                   borderWidth: 2,
                   borderColor: isActive ? tokens.colors.primary : "transparent",
-                  backgroundColor: isActive ? tokens.colors.primary + "10" : tokens.colors.surfaceVariant,
                 }}
                 onPress={() => onSelectLayer(layer.id)}
                 accessibilityLabel={`${layer.type} layer: ${label}`}

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 "../../../domain/entities/Layer";
+import type { TextAlign } from "../../../domain/types";
 
 interface TextEditorSheetProps {
   value: string;

package/src/types.ts

@@ -1,25 +1,16 @@
 /**
- * Legacy Types (for backward compatibility)
- *
- * @deprecated Use types from src/domain/entities/ instead
+ * Central Type Exports
+ * Re-exports domain types for convenience
  */
 
-export type { TextAlign } from "./domain/entities/Layer";
-export type { Layer, TextLayer, StickerLayer } from "./domain/entities/Layer";
+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, DEFAULT_FILTERS as DEFAULT_IMAGE_FILTERS } from "./domain/entities/Filters";
+export type { FilterValues as ImageFilters } from "./domain/entities/Filters";
 
 // Re-export type guards
-export { isTextLayer, isStickerLayer } from "./domain/entities/Layer";
+export { isTextLayer, isStickerLayer } from "./domain/entities/Layer.entity";
 
-// Legacy type alias
-export interface TextLayerData extends TextLayer {}
-export interface StickerLayerData extends StickerLayer {}
-
-// Legacy EditorState (kept for compatibility)
-export interface EditorState {
-  layers: Layer[];
-  activeLayerId: string | null;
-  canvasSize: { width: number; height: number };
-  filters: ImageFilters;
-}
+// Re-export DEFAULT_FILTERS as value (not type)
+export { DEFAULT_FILTERS as DEFAULT_IMAGE_FILTERS } from "./domain/entities/Filters";