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

package/src/components/DraggableText.tsx

@@ -1,181 +0,0 @@
-import React, { useState, useRef, useCallback, useEffect } from "react";
-import { View, StyleSheet } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-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;
-  color: string;
-  fontSize?: number;
-  fontFamily?: string;
-  initialX: number;
-  initialY: number;
-  rotation?: number;
-  scale?: number;
-  opacity?: number;
-  textAlign?: "center" | "left" | "right";
-  backgroundColor?: string;
-  isBold?: boolean;
-  isItalic?: boolean;
-  onTransformEnd: (transform: LayerTransform) => void;
-  onPress: () => void;
-  isSelected?: boolean;
-}
-
-export const DraggableText: React.FC<DraggableTextProps> = ({
-  text,
-  color,
-  fontSize = 24,
-  fontFamily = "System",
-  initialX,
-  initialY,
-  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 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: positionRef.current.x, y: positionRef.current.y };
-    })
-    .onUpdate((e) => {
-      setPosition({
-        x: offsetRef.current.x + e.translationX,
-        y: offsetRef.current.y + e.translationY,
-      });
-    })
-    .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 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={composed}>
-      <View
-        accessibilityLabel={text || "Text layer"}
-        accessibilityRole="button"
-        style={[
-          styles.container,
-          {
-            transform: [
-              { translateX: position.x },
-              { translateY: position.y },
-              { rotate: `${rotation}deg` },
-              { scale },
-            ],
-            opacity,
-            zIndex: isSelected ? 100 : 10,
-          },
-        ]}
-      >
-        <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"
-              : backgroundColor,
-          }}
-        >
-          <AtomicText
-            style={{
-              fontSize,
-              fontFamily: fontFamily === "System" ? undefined : fontFamily,
-              color,
-              textAlign,
-              fontWeight: isBold ? "900" : "normal",
-              fontStyle: isItalic ? "italic" : "normal",
-            }}
-          >
-            {text || "TAP TO EDIT"}
-          </AtomicText>
-        </View>
-      </View>
-    </GestureDetector>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { position: "absolute" },
-});

package/src/components/EditorCanvas.tsx

@@ -1,106 +0,0 @@
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import { Image } from "expo-image";
-import { DraggableText, LayerTransform } from "./DraggableText";
-import { DraggableSticker } from "./DraggableSticker";
-import { Layer, ImageFilters } from "../types";
-
-interface EditorCanvasProps {
-  imageUrl: string;
-  layers: Layer[];
-  activeLayerId: string | null;
-  filters: ImageFilters;
-  onLayerTap: (layerId: string) => void;
-  onLayerTransform: (layerId: string, transform: LayerTransform) => void;
-  styles: {
-    canvas: object;
-    canvasImage: object;
-  };
-}
-
-export const EditorCanvas: React.FC<EditorCanvasProps> = ({
-  imageUrl,
-  layers,
-  activeLayerId,
-  filters,
-  onLayerTap,
-  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={externalStyles.canvas}>
-      <Image
-        source={{ uri: imageUrl }}
-        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") {
-          return (
-            <DraggableText
-              key={layer.id}
-              text={layer.text || "Tap to edit"}
-              color={layer.color}
-              fontSize={layer.fontSize}
-              fontFamily={layer.fontFamily}
-              textAlign={layer.textAlign}
-              rotation={layer.rotation}
-              scale={layer.scale}
-              opacity={layer.opacity}
-              backgroundColor={layer.backgroundColor}
-              isBold={layer.isBold}
-              isItalic={layer.isItalic}
-              initialX={layer.x}
-              initialY={layer.y}
-              onTransformEnd={(t) => onLayerTransform(layer.id, t)}
-              onPress={() => onLayerTap(layer.id)}
-              isSelected={activeLayerId === layer.id}
-            />
-          );
-        } else if (layer.type === "sticker") {
-          return (
-            <DraggableSticker
-              key={layer.id}
-              uri={layer.uri}
-              initialX={layer.x}
-              initialY={layer.y}
-              rotation={layer.rotation}
-              scale={layer.scale}
-              opacity={layer.opacity}
-              onTransformEnd={(t) => onLayerTransform(layer.id, t)}
-              onPress={() => onLayerTap(layer.id)}
-              isSelected={activeLayerId === layer.id}
-            />
-          );
-        }
-        return null;
-      })}
-    </View>
-  );
-};
-
-export default React.memo(EditorCanvas);

package/src/components/EditorToolbar.tsx

@@ -1,155 +0,0 @@
-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 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;
-  styles: {
-    bottomToolbar: object;
-    toolButton: object;
-    toolButtonActive: object;
-    aiMagicButton: object;
-    [key: string]: object;
-  };
-}
-
-const ToolButton = ({
-  icon,
-  label,
-  onPress,
-  isActive,
-  disabled,
-  parentStyles,
-}: {
-  icon: string;
-  label: string;
-  onPress: () => void;
-  isActive?: boolean;
-  disabled?: boolean;
-  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,
-  onOpenFilters,
-  onOpenAdjustments,
-  onOpenLayers,
-  onAIMagic,
-  onUndo,
-  onRedo,
-  canUndo = false,
-  canRedo = false,
-  styles: parentStyles,
-  t,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={parentStyles.bottomToolbar}>
-      {onUndo && (
-        <ToolButton
-          icon="arrow-back"
-          label={t("photo_editor.undo") || "Undo"}
-          onPress={onUndo}
-          disabled={!canUndo}
-          parentStyles={parentStyles}
-        />
-      )}
-
-      <ToolButton
-        icon="edit"
-        label={t("photo_editor.text") || "Text"}
-        onPress={onAddText}
-        parentStyles={parentStyles}
-      />
-
-      {onAddSticker && (
-        <ToolButton
-          icon="sparkles"
-          label={t("photo_editor.sticker") || "Sticker"}
-          onPress={onAddSticker}
-          parentStyles={parentStyles}
-        />
-      )}
-
-      {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("photo_editor.adjust") || "Adjust"}
-          onPress={onOpenAdjustments}
-          parentStyles={parentStyles}
-        />
-      )}
-
-      {onOpenFilters && (
-        <ToolButton
-          icon="brush"
-          label={t("photo_editor.filters") || "Filters"}
-          onPress={onOpenFilters}
-          parentStyles={parentStyles}
-        />
-      )}
-
-      <ToolButton
-        icon="copy"
-        label={t("photo_editor.layers") || "Layers"}
-        onPress={onOpenLayers}
-        parentStyles={parentStyles}
-      />
-
-      {onRedo && (
-        <ToolButton
-          icon="chevron-forward"
-          label={t("photo_editor.redo") || "Redo"}
-          onPress={onRedo}
-          disabled={!canRedo}
-          parentStyles={parentStyles}
-        />
-      )}
-    </View>
-  );
-};

package/src/components/FilterPicker.tsx

@@ -1,73 +0,0 @@
-import React, { useMemo } from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { DEFAULT_FILTERS, type FilterOption } from "../constants";
-
-interface FilterPickerProps {
-  selectedFilter: string;
-  onSelectFilter: (option: FilterOption) => void;
-  filters?: FilterOption[];
-}
-
-export const FilterPicker: React.FC<FilterPickerProps> = ({
-  selectedFilter,
-  onSelectFilter,
-  filters = DEFAULT_FILTERS,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(() => StyleSheet.create({
-    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
-    grid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
-    filter: {
-      width: 75,
-      height: 75,
-      borderRadius: tokens.borders.radius.md,
-      backgroundColor: tokens.colors.surfaceVariant,
-      alignItems: "center",
-      justifyContent: "center",
-      borderWidth: 2,
-      borderColor: "transparent",
-    },
-    active: {
-      borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primary + "10",
-    },
-  }), [tokens]);
-
-  return (
-    <View style={styles.container}>
-      <AtomicText type="headlineSmall">Filters</AtomicText>
-      <View style={styles.grid}>
-        {filters.map((f) => {
-          const isActive = selectedFilter === f.id;
-          return (
-            <TouchableOpacity
-              key={f.id}
-              style={[styles.filter, isActive && styles.active]}
-              onPress={() => onSelectFilter(f)}
-              accessibilityLabel={f.name}
-              accessibilityRole="button"
-              accessibilityState={{ selected: isActive }}
-            >
-              <AtomicIcon
-                name={f.icon as "close"}
-                size="lg"
-                color={isActive ? "primary" : "textSecondary"}
-              />
-              <AtomicText
-                type="labelSmall"
-                color={isActive ? "primary" : "textSecondary"}
-              >
-                {f.name}
-              </AtomicText>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(FilterPicker);

package/src/components/FontControls.tsx

@@ -1,132 +0,0 @@
-import React, { useMemo } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-
-interface FontControlsProps {
-  fontSize: number;
-  selectedFont: string;
-  fonts: readonly string[];
-  onFontSizeChange: (size: number) => void;
-  onFontSelect: (font: string) => void;
-  styles: {
-    controlsPanel: object;
-    fontRow: object;
-    fontChip: object;
-    fontChipActive: object;
-    [key: string]: object;
-  };
-}
-
-const MIN_FONT_SIZE = 12;
-const MAX_FONT_SIZE = 128;
-const FONT_SIZE_STEP = 4;
-
-export const FontControls: React.FC<FontControlsProps> = ({
-  fontSize,
-  selectedFont,
-  fonts,
-  onFontSizeChange,
-  onFontSelect,
-  styles: externalStyles,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(() => StyleSheet.create({
-    stepRow: {
-      flexDirection: "row",
-      gap: tokens.spacing.sm,
-      marginBottom: tokens.spacing.md,
-    },
-    stepBtn: {
-      padding: tokens.spacing.sm,
-      backgroundColor: tokens.colors.surface,
-      borderRadius: tokens.borders.radius.sm,
-      borderWidth: 1,
-      borderColor: tokens.colors.border,
-      minWidth: 44,
-      alignItems: "center",
-    },
-    sizeRow: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      marginBottom: tokens.spacing.sm,
-    },
-    sizeLabel: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: tokens.spacing.xs,
-    },
-  }), [tokens]);
-
-  return (
-    <View style={externalStyles.controlsPanel}>
-      <View style={styles.sizeRow}>
-        <View style={styles.sizeLabel}>
-          <AtomicIcon name="edit" size="sm" color="textSecondary" />
-          <AtomicText type="labelMedium" color="textSecondary">
-            Text Size
-          </AtomicText>
-        </View>
-        <AtomicText fontWeight="bold" color="primary">
-          {fontSize}px
-        </AtomicText>
-      </View>
-
-      <View style={styles.stepRow}>
-        <TouchableOpacity
-          style={styles.stepBtn}
-          onPress={() => onFontSizeChange(Math.max(MIN_FONT_SIZE, fontSize - FONT_SIZE_STEP))}
-          accessibilityLabel="Decrease font size"
-          accessibilityRole="button"
-        >
-          <AtomicText fontWeight="bold">−</AtomicText>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.stepBtn}
-          onPress={() => onFontSizeChange(Math.min(MAX_FONT_SIZE, fontSize + FONT_SIZE_STEP))}
-          accessibilityLabel="Increase font size"
-          accessibilityRole="button"
-        >
-          <AtomicText fontWeight="bold">+</AtomicText>
-        </TouchableOpacity>
-      </View>
-
-      <AtomicText
-        type="labelMedium"
-        color="textSecondary"
-        style={{ marginBottom: tokens.spacing.xs }}
-      >
-        Font Style
-      </AtomicText>
-      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-        <View style={externalStyles.fontRow}>
-          {fonts.map((font) => (
-            <TouchableOpacity
-              key={font}
-              style={[
-                externalStyles.fontChip,
-                selectedFont === font && externalStyles.fontChipActive,
-              ]}
-              onPress={() => onFontSelect(font)}
-              accessibilityLabel={`Font: ${font}`}
-              accessibilityRole="button"
-              accessibilityState={{ selected: selectedFont === font }}
-            >
-              <AtomicText
-                fontWeight="bold"
-                color={selectedFont === font ? "onPrimary" : "textSecondary"}
-                style={{ fontFamily: font === "System" ? undefined : font }}
-              >
-                {font}
-              </AtomicText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-export default React.memo(FontControls);