@umituz/react-native-photo-editor 1.1.1 → 2.0.1

package/src/components/DraggableSticker.tsx

@@ -1,65 +1,121 @@
-import React, { useState, useRef, useCallback } from "react";
+import React, { useState, useRef, useCallback, useEffect } from "react";
 import { View, StyleSheet } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
+import { Image } from "expo-image";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import type { LayerTransform } from "./DraggableText";
 
 interface DraggableStickerProps {
   uri: string;
   initialX: number;
   initialY: number;
-  onDragEnd: (x: number, y: number) => void;
-  onPress: () => void;
-  isSelected?: boolean;
   rotation?: number;
   scale?: number;
   opacity?: number;
+  onTransformEnd: (transform: LayerTransform) => void;
+  onPress: () => void;
+  isSelected?: boolean;
 }
 
+const isEmojiString = (str: string) =>
+  str.length <= 4 && !/^https?:\/\//i.test(str) && !str.startsWith("/");
+
 export const DraggableSticker: React.FC<DraggableStickerProps> = ({
   uri,
   initialX,
   initialY,
-  onDragEnd,
+  rotation: rotationProp = 0,
+  scale: scaleProp = 1,
+  opacity = 1,
+  onTransformEnd,
   onPress,
   isSelected,
-  rotation = 0,
-  scale = 1,
-  opacity = 1,
 }) => {
   const tokens = useAppDesignTokens();
   const [position, setPosition] = useState({ x: initialX, y: initialY });
+  const [scale, setScale] = useState(scaleProp);
+  const [rotation, setRotation] = useState(rotationProp);
+
+  // Sync when props change (e.g., undo/redo)
+  useEffect(() => { setPosition({ x: initialX, y: initialY }); }, [initialX, initialY]);
+  useEffect(() => { setScale(scaleProp); }, [scaleProp]);
+  useEffect(() => { setRotation(rotationProp); }, [rotationProp]);
+
+  const positionRef = useRef(position);
+  positionRef.current = position;
+  const scaleRef = useRef(scale);
+  scaleRef.current = scale;
+  const rotationRef = useRef(rotation);
+  rotationRef.current = rotation;
+  const onTransformEndRef = useRef(onTransformEnd);
+  onTransformEndRef.current = onTransformEnd;
+  const onPressRef = useRef(onPress);
+  onPressRef.current = onPress;
+
   const offsetRef = useRef({ x: initialX, y: initialY });
+  const scaleStartRef = useRef(scaleProp);
+  const rotationStartRef = useRef(rotationProp);
 
-  const handleDragEnd = useCallback(() => {
-    onDragEnd(position.x, position.y);
-  }, [position.x, position.y, onDragEnd]);
+  const emitTransform = useCallback(() => {
+    onTransformEndRef.current({
+      x: positionRef.current.x,
+      y: positionRef.current.y,
+      scale: scaleRef.current,
+      rotation: rotationRef.current,
+    });
+  }, []);
 
   const panGesture = Gesture.Pan()
+    .runOnJS(true)
+    .averageTouches(true)
     .onStart(() => {
-      offsetRef.current = { x: position.x, y: position.y };
+      offsetRef.current = { x: positionRef.current.x, y: positionRef.current.y };
     })
-    .onUpdate((event) => {
+    .onUpdate((e) => {
       setPosition({
-        x: offsetRef.current.x + event.translationX,
-        y: offsetRef.current.y + event.translationY,
+        x: offsetRef.current.x + e.translationX,
+        y: offsetRef.current.y + e.translationY,
       });
     })
-    .onEnd(() => {
-      handleDragEnd();
-    });
+    .onEnd(emitTransform);
+
+  const pinchGesture = Gesture.Pinch()
+    .runOnJS(true)
+    .onStart(() => {
+      scaleStartRef.current = scaleRef.current;
+    })
+    .onUpdate((e) => {
+      setScale(Math.max(0.2, Math.min(6, scaleStartRef.current * e.scale)));
+    })
+    .onEnd(emitTransform);
 
-  const tapGesture = Gesture.Tap().onEnd(() => {
-    onPress();
-  });
+  const rotationGesture = Gesture.Rotation()
+    .runOnJS(true)
+    .onStart(() => {
+      rotationStartRef.current = rotationRef.current;
+    })
+    .onUpdate((e) => {
+      setRotation(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,
+  );
 
-  const isEmoji = uri.length <= 4 && !uri.startsWith("http");
+  const isEmoji = isEmojiString(uri);
 
   return (
-    <GestureDetector gesture={Gesture.Exclusive(panGesture, tapGesture)}>
+    <GestureDetector gesture={composed}>
       <View
+        accessibilityLabel={isEmoji ? `Sticker ${uri}` : "Image sticker"}
+        accessibilityRole="button"
         style={[
           styles.container,
           {
@@ -86,7 +142,14 @@ export const DraggableSticker: React.FC<DraggableStickerProps> = ({
         >
           {isEmoji ? (
             <AtomicText style={{ fontSize: 48 }}>{uri}</AtomicText>
-          ) : null}
+          ) : (
+            <Image
+              source={{ uri }}
+              style={{ width: 80, height: 80 }}
+              contentFit="contain"
+              accessibilityIgnoresInvertColors
+            />
+          )}
         </View>
       </View>
     </GestureDetector>
@@ -94,7 +157,5 @@ export const DraggableSticker: React.FC<DraggableStickerProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-  },
+  container: { position: "absolute" },
 });

package/src/components/DraggableText.tsx

@@ -1,10 +1,15 @@
-import React, { useState, useRef, useCallback } from "react";
+import React, { useState, useRef, useCallback, useEffect } from "react";
 import { View, StyleSheet } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+export interface LayerTransform {
+  x: number;
+  y: number;
+  scale: number;
+  rotation: number;
+}
 
 interface DraggableTextProps {
   text: string;
@@ -13,16 +18,16 @@ interface DraggableTextProps {
   fontFamily?: string;
   initialX: number;
   initialY: number;
-  onDragEnd: (x: number, y: number) => void;
-  onPress: () => void;
-  isSelected?: boolean;
   rotation?: number;
   scale?: number;
   opacity?: number;
   textAlign?: "center" | "left" | "right";
   backgroundColor?: string;
-  _strokeColor?: string;
-  _strokeWidth?: number;
+  isBold?: boolean;
+  isItalic?: boolean;
+  onTransformEnd: (transform: LayerTransform) => void;
+  onPress: () => void;
+  isSelected?: boolean;
 }
 
 export const DraggableText: React.FC<DraggableTextProps> = ({
@@ -32,44 +37,101 @@ export const DraggableText: React.FC<DraggableTextProps> = ({
   fontFamily = "System",
   initialX,
   initialY,
-  onDragEnd,
-  onPress,
-  isSelected,
-  rotation = 0,
-  scale = 1,
+  rotation: rotationProp = 0,
+  scale: scaleProp = 1,
   opacity = 1,
   textAlign = "center",
   backgroundColor = "transparent",
+  isBold = false,
+  isItalic = false,
+  onTransformEnd,
+  onPress,
+  isSelected,
 }) => {
   const tokens = useAppDesignTokens();
   const [position, setPosition] = useState({ x: initialX, y: initialY });
+  const [scale, setScale] = useState(scaleProp);
+  const [rotation, setRotation] = useState(rotationProp); // degrees
+
+  // Sync when props change (e.g., undo/redo)
+  useEffect(() => { setPosition({ x: initialX, y: initialY }); }, [initialX, initialY]);
+  useEffect(() => { setScale(scaleProp); }, [scaleProp]);
+  useEffect(() => { setRotation(rotationProp); }, [rotationProp]);
+
+  // Refs for gesture callbacks to avoid stale closures
+  const positionRef = useRef(position);
+  positionRef.current = position;
+  const scaleRef = useRef(scale);
+  scaleRef.current = scale;
+  const rotationRef = useRef(rotation);
+  rotationRef.current = rotation;
+  const onTransformEndRef = useRef(onTransformEnd);
+  onTransformEndRef.current = onTransformEnd;
+  const onPressRef = useRef(onPress);
+  onPressRef.current = onPress;
+
+  // Start-of-gesture saved values
   const offsetRef = useRef({ x: initialX, y: initialY });
+  const scaleStartRef = useRef(scale);
+  const rotationStartRef = useRef(rotation); // degrees
 
-  const handleDragEnd = useCallback(() => {
-    onDragEnd(position.x, position.y);
-  }, [position.x, position.y, onDragEnd]);
+  const emitTransform = useCallback(() => {
+    onTransformEndRef.current({
+      x: positionRef.current.x,
+      y: positionRef.current.y,
+      scale: scaleRef.current,
+      rotation: rotationRef.current,
+    });
+  }, []);
 
   const panGesture = Gesture.Pan()
+    .runOnJS(true)
+    .averageTouches(true)
     .onStart(() => {
-      offsetRef.current = { x: position.x, y: position.y };
+      offsetRef.current = { x: positionRef.current.x, y: positionRef.current.y };
     })
-    .onUpdate((event) => {
+    .onUpdate((e) => {
       setPosition({
-        x: offsetRef.current.x + event.translationX,
-        y: offsetRef.current.y + event.translationY,
+        x: offsetRef.current.x + e.translationX,
+        y: offsetRef.current.y + e.translationY,
       });
     })
-    .onEnd(() => {
-      handleDragEnd();
-    });
+    .onEnd(emitTransform);
+
+  const pinchGesture = Gesture.Pinch()
+    .runOnJS(true)
+    .onStart(() => {
+      scaleStartRef.current = scaleRef.current;
+    })
+    .onUpdate((e) => {
+      setScale(Math.max(0.2, Math.min(6, scaleStartRef.current * e.scale)));
+    })
+    .onEnd(emitTransform);
 
-  const tapGesture = Gesture.Tap().onEnd(() => {
-    onPress();
-  });
+  const rotationGesture = Gesture.Rotation()
+    .runOnJS(true)
+    .onStart(() => {
+      rotationStartRef.current = rotationRef.current;
+    })
+    .onUpdate((e) => {
+      setRotation(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 (
-    <GestureDetector gesture={Gesture.Exclusive(panGesture, tapGesture)}>
+    <GestureDetector gesture={composed}>
       <View
+        accessibilityLabel={text || "Text layer"}
+        accessibilityRole="button"
         style={[
           styles.container,
           {
@@ -91,16 +153,19 @@ export const DraggableText: React.FC<DraggableTextProps> = ({
             borderWidth: isSelected ? 2 : 0,
             borderColor: tokens.colors.primary,
             borderStyle: "dashed",
-            backgroundColor: isSelected ? tokens.colors.primary + "10" : backgroundColor,
+            backgroundColor: isSelected
+              ? tokens.colors.primary + "10"
+              : backgroundColor,
           }}
         >
           <AtomicText
-            fontWeight="900"
             style={{
               fontSize,
-              fontFamily,
+              fontFamily: fontFamily === "System" ? undefined : fontFamily,
               color,
               textAlign,
+              fontWeight: isBold ? "900" : "normal",
+              fontStyle: isItalic ? "italic" : "normal",
             }}
           >
             {text || "TAP TO EDIT"}
@@ -112,7 +177,5 @@ export const DraggableText: React.FC<DraggableTextProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-  },
+  container: { position: "absolute" },
 });

package/src/components/EditorCanvas.tsx

@@ -1,16 +1,17 @@
 import React from "react";
-import { View } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { Image } from "expo-image";
-import { DraggableText } from "./DraggableText";
+import { DraggableText, LayerTransform } from "./DraggableText";
 import { DraggableSticker } from "./DraggableSticker";
-import { Layer, TextLayer, StickerLayer } from "../types";
+import { Layer, TextLayer, StickerLayer, ImageFilters } from "../types";
 
 interface EditorCanvasProps {
   imageUrl: string;
   layers: Layer[];
   activeLayerId: string | null;
+  filters: ImageFilters;
   onLayerTap: (layerId: string) => void;
-  onLayerMove: (layerId: string, x: number, y: number) => void;
+  onLayerTransform: (layerId: string, transform: LayerTransform) => void;
   styles: {
     canvas: object;
     canvasImage: object;
@@ -21,17 +22,42 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
   imageUrl,
   layers,
   activeLayerId,
+  filters,
   onLayerTap,
-  onLayerMove,
-  styles,
+  onLayerTransform,
+  styles: externalStyles,
 }) => {
+  // Basic brightness preview: dark overlay for < 1, light for > 1
+  const brightness = filters.brightness ?? 1;
+  const brightnessOverlay =
+    brightness < 1
+      ? { color: "black", opacity: Math.min(0.6, 1 - brightness) }
+      : brightness > 1
+        ? { color: "white", opacity: Math.min(0.4, brightness - 1) }
+        : null;
+
   return (
-    <View style={styles.canvas}>
+    <View style={externalStyles.canvas}>
       <Image
         source={{ uri: imageUrl }}
-        style={styles.canvasImage}
+        style={externalStyles.canvasImage}
         contentFit="cover"
       />
+
+      {/* Brightness visual overlay */}
+      {brightnessOverlay && (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              backgroundColor: brightnessOverlay.color,
+              opacity: brightnessOverlay.opacity,
+            },
+          ]}
+          pointerEvents="none"
+        />
+      )}
+
       {layers.map((layer) => {
         if (layer.type === "text") {
           const textLayer = layer as TextLayer;
@@ -47,11 +73,11 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
               scale={textLayer.scale}
               opacity={textLayer.opacity}
               backgroundColor={textLayer.backgroundColor}
-              _strokeColor={textLayer.strokeColor}
-              _strokeWidth={textLayer.strokeWidth}
+              isBold={textLayer.isBold}
+              isItalic={textLayer.isItalic}
               initialX={textLayer.x}
               initialY={textLayer.y}
-              onDragEnd={(x, y) => onLayerMove(layer.id, x, y)}
+              onTransformEnd={(t) => onLayerTransform(layer.id, t)}
               onPress={() => onLayerTap(layer.id)}
               isSelected={activeLayerId === layer.id}
             />
@@ -67,7 +93,7 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
               rotation={stickerLayer.rotation}
               scale={stickerLayer.scale}
               opacity={stickerLayer.opacity}
-              onDragEnd={(x, y) => onLayerMove(layer.id, x, y)}
+              onTransformEnd={(t) => onLayerTransform(layer.id, t)}
               onPress={() => onLayerTap(layer.id)}
               isSelected={activeLayerId === layer.id}
             />

package/src/components/EditorToolbar.tsx

@@ -1,80 +1,164 @@
 import React from "react";
 import { View, TouchableOpacity } from "react-native";
-import { 
-  AtomicText, 
-  AtomicIcon, 
-  useAppDesignTokens 
-} from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 
 interface EditorToolbarProps {
   onAddText: () => void;
   onAddSticker?: () => void;
-  onAIMagic?: () => void;
   onOpenFilters?: () => void;
+  onOpenAdjustments?: () => void;
   onOpenLayers: () => void;
-  styles: Record<string, object>;
+  onAIMagic?: () => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  canUndo?: boolean;
+  canRedo?: boolean;
   t: (key: string) => string;
+  styles: {
+    bottomToolbar: object;
+    toolButton: object;
+    toolButtonActive: object;
+    aiMagicButton: object;
+    [key: string]: object;
+  };
 }
 
+const ToolButton = ({
+  icon,
+  label,
+  onPress,
+  isActive,
+  disabled,
+  tokens,
+  parentStyles,
+}: {
+  icon: string;
+  label: string;
+  onPress: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  tokens: ReturnType<typeof useAppDesignTokens>;
+  parentStyles: EditorToolbarProps["styles"];
+}) => (
+  <TouchableOpacity
+    style={[parentStyles.toolButton, isActive && parentStyles.toolButtonActive]}
+    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>
+);
+
 export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   onAddText,
   onAddSticker,
-  onAIMagic,
   onOpenFilters,
+  onOpenAdjustments,
   onOpenLayers,
-  styles,
+  onAIMagic,
+  onUndo,
+  onRedo,
+  canUndo = false,
+  canRedo = false,
+  styles: parentStyles,
   t,
 }) => {
   const tokens = useAppDesignTokens();
 
-  const ToolButton = ({ 
-    icon, 
-    label, 
-    onPress, 
-    isActive 
-  }: { 
-    icon: string; 
-    label: string; 
-    onPress: () => void; 
-    isActive?: boolean;
-  }) => (
-    <TouchableOpacity
-      style={[styles.toolButton, isActive && styles.toolButtonActive]}
-      onPress={onPress}
-    >
-      <AtomicIcon 
-        name={icon} 
-        size="md" 
-        color={isActive ? "primary" : "textSecondary"} 
+  return (
+    <View style={parentStyles.bottomToolbar}>
+      {onUndo && (
+        <ToolButton
+          icon="arrow-back"
+          label={t("editor.undo") || "Undo"}
+          onPress={onUndo}
+          disabled={!canUndo}
+          tokens={tokens}
+          parentStyles={parentStyles}
+        />
+      )}
+
+      <ToolButton
+        icon="edit"
+        label={t("editor.text") || "Text"}
+        onPress={onAddText}
+        tokens={tokens}
+        parentStyles={parentStyles}
       />
-      <AtomicText 
-        type="labelSmall" 
-        color={isActive ? "primary" : "textSecondary"}
-      >
-        {label}
-      </AtomicText>
-    </TouchableOpacity>
-  );
 
-  return (
-    <View style={styles.bottomToolbar}>
-      <ToolButton icon="text" label="Text" onPress={onAddText} />
-      
       {onAddSticker && (
-        <ToolButton icon="happy" label={t("editor.sticker")} onPress={onAddSticker} />
+        <ToolButton
+          icon="sparkles"
+          label={t("editor.sticker") || "Sticker"}
+          onPress={onAddSticker}
+          tokens={tokens}
+          parentStyles={parentStyles}
+        />
       )}
-      
+
       {onAIMagic && (
-        <TouchableOpacity style={styles.aiMagicButton} onPress={onAIMagic}>
+        <TouchableOpacity
+          style={parentStyles.aiMagicButton}
+          onPress={onAIMagic}
+          accessibilityLabel="AI Magic"
+          accessibilityRole="button"
+        >
           <AtomicIcon name="sparkles" size="lg" customColor={tokens.colors.onPrimary} />
         </TouchableOpacity>
       )}
 
+      {onOpenAdjustments && (
+        <ToolButton
+          icon="flash"
+          label={t("editor.adjust") || "Adjust"}
+          onPress={onOpenAdjustments}
+          tokens={tokens}
+          parentStyles={parentStyles}
+        />
+      )}
+
       {onOpenFilters && (
-        <ToolButton icon="color-filter" label={t("editor.filters")} onPress={onOpenFilters} />
+        <ToolButton
+          icon="brush"
+          label={t("editor.filters") || "Filters"}
+          onPress={onOpenFilters}
+          tokens={tokens}
+          parentStyles={parentStyles}
+        />
+      )}
+
+      <ToolButton
+        icon="copy"
+        label={t("editor.layers") || "Layers"}
+        onPress={onOpenLayers}
+        tokens={tokens}
+        parentStyles={parentStyles}
+      />
+
+      {onRedo && (
+        <ToolButton
+          icon="chevron-forward"
+          label={t("editor.redo") || "Redo"}
+          onPress={onRedo}
+          disabled={!canRedo}
+          tokens={tokens}
+          parentStyles={parentStyles}
+        />
       )}
-      
-      <ToolButton icon="layers" label="Layers" onPress={onOpenLayers} />
     </View>
   );
 };