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

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

package/src/presentation/components/EditorCanvas.tsx

@@ -0,0 +1,90 @@
+/**
+ * Editor Canvas Component
+ * Renders the image and all layers
+ */
+
+import React, { memo } from "react";
+import { View, StyleSheet } 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";
+
+interface EditorCanvasProps {
+  imageUrl: string;
+  layers: Layer[];
+  activeLayerId: string | null;
+  filters: FilterValues;
+  onLayerTap: (layerId: string) => void;
+  onLayerTransform: (layerId: string, transform: { x: number; y: number; scale: number; rotation: number }) => void;
+  style?: any;
+}
+
+export const EditorCanvas = memo<EditorCanvasProps>(({
+  imageUrl,
+  layers,
+  activeLayerId,
+  filters,
+  onLayerTap,
+  onLayerTransform,
+  style,
+}) => {
+  const brightnessOverlay = createBrightnessOverlay(filters.brightness);
+
+  return (
+    <View style={[styles.canvas, style]}>
+      <Image
+        source={{ uri: imageUrl }}
+        style={styles.canvasImage}
+        contentFit="cover"
+      />
+
+      {brightnessOverlay && (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              backgroundColor: brightnessOverlay.color,
+              opacity: brightnessOverlay.opacity,
+            },
+          ]}
+          pointerEvents="none"
+        />
+      )}
+
+      {layers.map((layer) => (
+        <DraggableLayer
+          key={layer.id}
+          layer={layer}
+          isSelected={activeLayerId === layer.id}
+          onPress={() => onLayerTap(layer.id)}
+          onTransformEnd={(transform) => onLayerTransform(layer.id, transform)}
+        />
+      ))}
+    </View>
+  );
+});
+
+EditorCanvas.displayName = "EditorCanvas";
+
+function createBrightnessOverlay(brightness: number = 1) {
+  if (brightness < 1) {
+    return { color: "black", opacity: Math.min(0.6, 1 - brightness) };
+  }
+  if (brightness > 1) {
+    return { color: "white", opacity: Math.min(0.4, brightness - 1) };
+  }
+  return null;
+}
+
+const styles = StyleSheet.create({
+  canvas: {
+    position: "relative",
+    width: "100%",
+    aspectRatio: 1,
+  },
+  canvasImage: {
+    width: "100%",
+    height: "100%",
+  },
+});

package/src/presentation/components/EditorToolbar.tsx

@@ -0,0 +1,192 @@
+/**
+ * Editor Toolbar Component
+ * Main toolbar with action buttons
+ */
+
+import React, { memo } from "react";
+import { View, TouchableOpacity, ScrollView } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+interface ToolButtonProps {
+  icon: string;
+  label: string;
+  onPress: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  isPrimary?: boolean;
+}
+
+const ToolButton = memo<ToolButtonProps>(({ icon, label, onPress, isActive, disabled, isPrimary }) => {
+  const tokens = useAppDesignTokens();
+
+  if (isPrimary) {
+    return (
+      <TouchableOpacity
+        style={{
+          width: 56,
+          height: 56,
+          borderRadius: 28,
+          backgroundColor: tokens.colors.primary,
+          alignItems: "center",
+          justifyContent: "center",
+          elevation: 4,
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.25,
+          shadowRadius: 4,
+        }}
+        onPress={onPress}
+        accessibilityLabel={label}
+        accessibilityRole="button"
+      >
+        <AtomicIcon name={icon as "sparkles"} size="lg" customColor={tokens.colors.onPrimary} />
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      style={{
+        alignItems: "center",
+        gap: tokens.spacing.xs,
+        opacity: disabled ? 0.5 : 1,
+      }}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isActive, disabled }}
+    >
+      <AtomicIcon
+        name={icon as "edit"}
+        size="md"
+        color={disabled ? "textSecondary" : isActive ? "primary" : "textSecondary"}
+      />
+      <AtomicText
+        type="labelSmall"
+        color={disabled ? "textSecondary" : isActive ? "primary" : "textSecondary"}
+      >
+        {label}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+});
+
+ToolButton.displayName = "ToolButton";
+
+export interface EditorToolbarProps {
+  onAddText: () => void;
+  onAddSticker?: () => void;
+  onOpenFilters?: () => void;
+  onOpenAdjustments?: () => void;
+  onOpenLayers: () => void;
+  onAIMagic?: () => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  canUndo?: boolean;
+  canRedo?: boolean;
+  t: (key: string) => string;
+}
+
+export const EditorToolbar = memo<EditorToolbarProps>(({
+  onAddText,
+  onAddSticker,
+  onOpenFilters,
+  onOpenAdjustments,
+  onOpenLayers,
+  onAIMagic,
+  onUndo,
+  onRedo,
+  canUndo = false,
+  canRedo = false,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: tokens.spacing.md,
+        paddingHorizontal: tokens.spacing.sm,
+        backgroundColor: tokens.colors.surface,
+        borderTopWidth: 1,
+        borderTopColor: tokens.colors.border,
+        gap: tokens.spacing.sm,
+      }}
+    >
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: tokens.spacing.md }}>
+          {onUndo && (
+            <ToolButton
+              icon="arrow-back"
+              label={t("photo_editor.undo") || "Undo"}
+              onPress={onUndo}
+              disabled={!canUndo}
+            />
+          )}
+
+          <ToolButton
+            icon="edit"
+            label={t("photo_editor.text") || "Text"}
+            onPress={onAddText}
+          />
+
+          {onAddSticker && (
+            <ToolButton
+              icon="sparkles"
+              label={t("photo_editor.sticker") || "Sticker"}
+              onPress={onAddSticker}
+            />
+          )}
+
+          {onOpenAdjustments && (
+            <ToolButton
+              icon="flash"
+              label={t("photo_editor.adjust") || "Adjust"}
+              onPress={onOpenAdjustments}
+            />
+          )}
+
+          {onOpenFilters && (
+            <ToolButton
+              icon="brush"
+              label={t("photo_editor.filters") || "Filters"}
+              onPress={onOpenFilters}
+            />
+          )}
+
+          <ToolButton
+            icon="copy"
+            label={t("photo_editor.layers") || "Layers"}
+            onPress={onOpenLayers}
+          />
+
+          {onRedo && (
+            <ToolButton
+              icon="chevron-forward"
+              label={t("photo_editor.redo") || "Redo"}
+              onPress={onRedo}
+              disabled={!canRedo}
+            />
+          )}
+        </View>
+      </ScrollView>
+
+      {onAIMagic && (
+        <View style={{ marginLeft: tokens.spacing.sm }}>
+          <ToolButton
+            icon="sparkles"
+            label="AI"
+            onPress={onAIMagic}
+            isPrimary
+          />
+        </View>
+      )}
+    </View>
+  );
+});
+
+EditorToolbar.displayName = "EditorToolbar";

package/src/presentation/components/FontControls.tsx

@@ -0,0 +1,99 @@
+/**
+ * Font Controls Component
+ * Font family and size controls
+ */
+
+import React, { memo } from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } 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";
+
+const DEFAULT_FONTS = [
+  "System",
+  "Impact",
+  "Comic",
+  "Serif",
+  "Retro",
+];
+
+interface FontControlsProps {
+  fontSize: number;
+  selectedFont: string;
+  fonts?: readonly string[];
+  onFontSizeChange: (size: number) => void;
+  onFontSelect: (font: string) => void;
+  style?: any;
+}
+
+export const FontControls = memo<FontControlsProps>(({
+  fontSize,
+  selectedFont,
+  fonts = DEFAULT_FONTS,
+  onFontSizeChange,
+  onFontSelect,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.container, style]}>
+      <Slider
+        label="Font Size"
+        value={fontSize}
+        min={12}
+        max={120}
+        step={1}
+        onValueChange={onFontSizeChange}
+        formatValue={(v) => `${Math.round(v)}px`}
+      />
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={{ marginTop: tokens.spacing.sm }}
+        contentContainerStyle={{ gap: tokens.spacing.sm, paddingHorizontal: tokens.spacing.sm }}
+      >
+        {fonts.map((font) => (
+          <TouchableOpacity
+            key={font}
+            style={[
+              styles.fontButton,
+              {
+                backgroundColor: tokens.colors.surfaceVariant,
+                borderWidth: selectedFont === font ? 2 : 1,
+                borderColor: selectedFont === font ? tokens.colors.primary : tokens.colors.border,
+              },
+            ]}
+            onPress={() => onFontSelect(font)}
+            accessibilityLabel={`Font ${font}`}
+            accessibilityRole="button"
+            accessibilityState={{ selected: selectedFont === font }}
+          >
+            <AtomicText
+              style={{
+                fontFamily: font === "System" ? undefined : font,
+                color: selectedFont === font ? tokens.colors.primary : tokens.colors.textPrimary,
+              }}
+            >
+              {font}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+});
+
+FontControls.displayName = "FontControls";
+
+const styles = StyleSheet.create({
+  container: { gap: 8 },
+  fontButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    minWidth: 80,
+    alignItems: "center",
+  },
+});