@technotoil/image-video-editor 0.1.0 → 0.1.1

package/src/screens/EditorScreen.tsx

@@ -25,6 +25,7 @@ import type { ImageEditOptions, MediaItem, MusicTrack } from '../types';
 
 
 const SCREEN_WIDTH = Dimensions.get('window').width;
+const SCREEN_HEIGHT = Dimensions.get('window').height;
 const TIMELINE_WIDTH = SCREEN_WIDTH - 40;
 const HANDLE_SIZE = 24;
 const CARD_WIDTH = SCREEN_WIDTH * 0.76;
@@ -472,6 +473,8 @@ export function EditorScreen({
   const [newText, setNewText] = useState('');
   const isNewOverlay = React.useRef(false); // track if overlay was just created (not yet saved)
   const originalOverlayBackup = React.useRef<{ id: string; text: string; x: number; y: number; color: string; fontSize: number } | null>(null);
+  const [activeDraggingId, setActiveDraggingId] = useState<string | null>(null);
+  const [isOverTrash, setIsOverTrash] = useState(false);
 
   // ── Stickers ────────────────────────────────────────────────────────────────
   const STICKER_LIST = [
@@ -826,10 +829,19 @@ export function EditorScreen({
   const createTextPan = (id: string) => {
     let startX = 0;
     let startY = 0;
+    let pressStartTime = 0;
+    let hasMoved = false;
+    let longPressTimeout: any = null;
+
     return PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: () => {
+        pressStartTime = Date.now();
+        hasMoved = false;
+        setActiveDraggingId(id);
+        setIsOverTrash(false);
+        
         setOverlays(prev => {
           const item = prev.find(o => o.id === id);
           if (item) {
@@ -838,13 +850,80 @@ export function EditorScreen({
           }
           return prev;
         });
+
+        // Setup long press timer (600ms)
+        if (longPressTimeout) clearTimeout(longPressTimeout);
+        longPressTimeout = setTimeout(() => {
+          if (!hasMoved) {
+            removeTextOverlay(id);
+          }
+        }, 600);
       },
       onPanResponderMove: (_, gesture) => {
+        if (Math.abs(gesture.dx) > 4 || Math.abs(gesture.dy) > 4) {
+          hasMoved = true;
+          if (longPressTimeout) {
+            clearTimeout(longPressTimeout);
+            longPressTimeout = null;
+          }
+        }
+        
+        const newX = startX + gesture.dx;
+        const newY = startY + gesture.dy;
+
+        // Trash zone: bottom 140px of screen, center horizontal
+        const isNearTrash = gesture.moveY > SCREEN_HEIGHT - 140 && Math.abs(gesture.moveX - (SCREEN_WIDTH / 2)) < 90;
+        setIsOverTrash(isNearTrash);
+
         setOverlays(prev => prev.map(o => o.id === id ? {
           ...o,
-          x: startX + gesture.dx,
-          y: startY + gesture.dy
+          x: newX,
+          y: newY
         } : o));
+      },
+      onPanResponderRelease: (_, gesture) => {
+        if (longPressTimeout) {
+          clearTimeout(longPressTimeout);
+          longPressTimeout = null;
+        }
+
+        // Check if released over trash zone using final touch screen coordinates
+        const releasedOverTrash = gesture.moveY > SCREEN_HEIGHT - 140 && Math.abs(gesture.moveX - (SCREEN_WIDTH / 2)) < 90;
+
+        // Reset dragging states
+        setActiveDraggingId(null);
+        setIsOverTrash(false);
+
+        if (releasedOverTrash) {
+          setTimeout(() => {
+            removeTextOverlay(id);
+          }, 50);
+          return;
+        }
+
+        const pressDuration = Date.now() - pressStartTime;
+        if (!hasMoved && pressDuration < 250) {
+          pushToHistory();
+          setOverlays(prev => {
+            const found = prev.find(o => o.id === id);
+            if (found) {
+              originalOverlayBackup.current = { ...found };
+              isNewOverlay.current = false;
+              setEditingTextId(id);
+              setNewText(found.text);
+              setPanel('text');
+            }
+            return prev;
+          });
+        }
+      },
+      onPanResponderTerminate: () => {
+        if (longPressTimeout) {
+          clearTimeout(longPressTimeout);
+          longPressTimeout = null;
+        }
+        setActiveDraggingId(null);
+        setIsOverTrash(false);
       }
     });
   };
@@ -1708,24 +1787,11 @@ export function EditorScreen({
                 ]}
                 {...responder.panHandlers}
               >
-                <Pressable
-                  onLongPress={() => removeTextOverlay(overlay.id)}
-                  onPress={() => {
-                    pushToHistory();
-                    // Backup original state (text, color, position, size, etc.)
-                    const found = overlays.find(o => o.id === overlay.id);
-                    if (found) {
-                      originalOverlayBackup.current = { ...found };
-                    }
-                    isNewOverlay.current = false;
-                    setEditingTextId(overlay.id);
-                    setNewText(overlay.text);
-                  }}
-                >
+                <View style={{ padding: 4 }}>
                   <Text style={[styles.textOverlay, { color: overlay.color, fontSize: overlay.fontSize }]}>
                     {overlay.text}
                   </Text>
-                </Pressable>
+                </View>
               </View>
             );
           })}
@@ -1964,23 +2030,11 @@ export function EditorScreen({
                       ]}
                       {...responder.panHandlers}
                     >
-                      <Pressable
-                        onLongPress={() => removeTextOverlay(overlay.id)}
-                        onPress={() => {
-                          pushToHistory();
-                          const found = overlays.find(o => o.id === overlay.id);
-                          if (found) {
-                            originalOverlayBackup.current = { ...found };
-                          }
-                          isNewOverlay.current = false;
-                          setEditingTextId(overlay.id);
-                          setNewText(overlay.text);
-                        }}
-                      >
+                      <View style={{ padding: 4 }}>
                         <Text style={[styles.textOverlay, { color: overlay.color, fontSize: overlay.fontSize }]}>
                           {overlay.text}
                         </Text>
-                      </Pressable>
+                      </View>
                     </View>
                   );
                 })}
@@ -2352,23 +2406,11 @@ export function EditorScreen({
                     ]}
                     {...responder.panHandlers}
                   >
-                    <Pressable
-                      onLongPress={() => removeTextOverlay(overlay.id)}
-                      onPress={() => {
-                        pushToHistory();
-                        const found = overlays.find(o => o.id === overlay.id);
-                        if (found) {
-                          originalOverlayBackup.current = { ...found };
-                        }
-                        isNewOverlay.current = false;
-                        setEditingTextId(overlay.id);
-                        setNewText(overlay.text);
-                      }}
-                    >
+                    <View style={{ padding: 4 }}>
                       <Text style={[styles.textOverlay, { color: overlay.color, fontSize: overlay.fontSize }]}>
                         {overlay.text}
                       </Text>
-                    </Pressable>
+                    </View>
                   </View>
                 );
               })}
@@ -3059,6 +3101,23 @@ export function EditorScreen({
         </View>
       </Modal>
 
+      {/* Global Trash Zone for Drag Delete */}
+      {activeDraggingId !== null && (
+        <View style={styles.globalTrashZone} pointerEvents="none">
+          <View
+            style={[
+              styles.trashZoneContainer,
+              isOverTrash && styles.trashZoneActive,
+              isOverTrash ? { transform: [{ scale: 1.15 }] } : {}
+            ]}
+          >
+            <Ionicons name={isOverTrash ? "trash" : "trash-outline"} size={20} color="#fff" />
+            <Text style={styles.trashZoneText}>
+              {isOverTrash ? "Release to Delete" : "Drag here to delete"}
+            </Text>
+          </View>
+        </View>
+      )}
     </View>
   );
 }
@@ -4163,6 +4222,41 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'rgba(255, 255, 255, 0.3)',
   },
+  globalTrashZone: {
+    position: 'absolute',
+    bottom: Platform.OS === 'ios' ? 48 : 28,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 9999,
+  },
+  trashZoneContainer: {
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+    borderColor: 'rgba(255, 255, 255, 0.25)',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.4,
+    shadowRadius: 6,
+    elevation: 8,
+  },
+  trashZoneActive: {
+    backgroundColor: '#ef4444',
+    borderColor: '#fca5a5',
+  },
+  trashZoneText: {
+    color: '#ffffff',
+    fontSize: 12,
+    fontWeight: '700',
+    marginLeft: 8,
+  },
   cropIconText: {
     color: '#FFFFFF',
     fontSize: 18,

package/src/screens/PickScreen.tsx

@@ -50,6 +50,8 @@ export function PickScreen({
   cameraModes = ['POST', 'STORY', 'REEL'],
   onCameraModeChange,
   defaultCameraMode,
+  maxSelection = 1,
+  aspectRatio = 'free',
 }: {
   items: MediaItem[];
   onPicked: (items: MediaItem[]) => void;
@@ -60,6 +62,8 @@ export function PickScreen({
   cameraModes?: string[];
   onCameraModeChange?: (mode: string) => void;
   defaultCameraMode?: string;
+  maxSelection?: number;
+  aspectRatio?: '1:1' | '4:3' | '4:5' | '16:9' | '9:16' | 'free';
 }) {
   const insets = useSafeAreaInsets();
   const [tab, setTab] = useState<'GALLERY' | 'PHOTO' | 'VIDEO'>('GALLERY');
@@ -73,7 +77,21 @@ export function PickScreen({
   const [albums, setAlbums] = useState<Album[]>([]);
   const [loading, setLoading] = useState(false);
   const [previewUri, setPreviewUri] = useState<string | null>(null);
-  const [cropMode, setCropMode] = useState<'1:1' | 'original'>('1:1');
+
+  // Aspect ratio logic
+  const isRatioLocked = aspectRatio !== 'free';
+  const ratioMap: Record<string, number> = {
+    '1:1': 1,
+    '4:3': 4 / 3,
+    '4:5': 4 / 5,
+    '16:9': 16 / 9,
+    '9:16': 9 / 16,
+  };
+  const previewAspectRatio = isRatioLocked ? ratioMap[aspectRatio] ?? 1 : undefined;
+  // When ratio is locked, always use 'cover' (fills the fixed frame)
+  const [cropMode, setCropMode] = useState<'1:1' | 'original'>(
+    isRatioLocked ? '1:1' : '1:1'
+  );
   const [videoPaused, setVideoPaused] = useState(false);
   const scaleAnim = useRef(new Animated.Value(1)).current;
 
@@ -248,7 +266,7 @@ export function PickScreen({
       setSelectedItems((prev) => {
         const exists = prev.find((i) => i.id === item.id);
         if (exists) return prev.filter((i) => i.id !== item.id);
-        if (prev.length >= 10) return prev;
+        if (prev.length >= maxSelection) return prev;
         return [...prev, item];
       });
     }
@@ -479,7 +497,15 @@ export function PickScreen({
         </View>
       </Modal>
 
-      <Animated.View style={[styles.preview, { transform: [{ scale: scaleAnim }] }]}>
+      <Animated.View
+        style={[
+          styles.preview,
+          { transform: [{ scale: scaleAnim }] },
+          isRatioLocked && previewAspectRatio
+            ? { height: undefined, aspectRatio: previewAspectRatio }
+            : {},
+        ]}
+      >
         {selectedMedia?.type === 'video' ? (
           <Pressable style={styles.previewImage} onPress={() => setVideoPaused((v) => !v)}>
             {playableUri ? (
@@ -488,7 +514,7 @@ export function PickScreen({
                 paused={videoPaused}
                 muted={false}
                 style={styles.previewImage}
-                resizeMode={cropMode === '1:1' ? 'cover' : 'contain'}
+                resizeMode="cover"
               />
             ) : (
               <Image
@@ -507,21 +533,31 @@ export function PickScreen({
           <Image
             source={{ uri: previewUri ?? selectedMedia?.uri }}
             style={[styles.previewImage, cropMode === '1:1' ? styles.squareCrop : styles.originalCrop]}
-            resizeMode={cropMode === '1:1' ? 'cover' : 'contain'}
+            resizeMode={isRatioLocked ? 'cover' : (cropMode === '1:1' ? 'cover' : 'contain')}
           />
         )}
 
         <View style={styles.previewControls}>
-          <Pressable
-            style={styles.cropToggle}
-            onPress={() => setCropMode((v) => (v === '1:1' ? 'original' : '1:1'))}
-          >
-            <Ionicons
-              name={cropMode === '1:1' ? 'square-outline' : 'expand-outline'}
-              size={20}
-              color="#fff"
-            />
-          </Pressable>
+          {/* Ratio lock badge */}
+          {isRatioLocked && (
+            <View style={styles.ratioBadge}>
+              <Text style={styles.ratioBadgeText}>{aspectRatio}</Text>
+            </View>
+          )}
+
+          {/* Crop toggle — hidden when ratio is locked */}
+          {!isRatioLocked && (
+            <Pressable
+              style={styles.cropToggle}
+              onPress={() => setCropMode((v) => (v === '1:1' ? 'original' : '1:1'))}
+            >
+              <Ionicons
+                name={cropMode === '1:1' ? 'square-outline' : 'expand-outline'}
+                size={20}
+                color="#fff"
+              />
+            </Pressable>
+          )}
         </View>
       </Animated.View>
 
@@ -534,9 +570,36 @@ export function PickScreen({
           <Ionicons name="chevron-down" size={16} color="#fff" style={{ marginLeft: 6 }} />
         </Pressable>
 
-        <Pressable style={[styles.multiSelectBtn, multiSelect && styles.multiSelectBtnActive]} onPress={toggleMultiSelect}>
-          <Text style={[styles.multiSelectText, multiSelect && styles.multiSelectTextActive]}>{multiSelect ? 'Done' : 'Select'}</Text>
-        </Pressable>
+        {/* Only show Select/Done button when maxSelection > 1 */}
+        {maxSelection > 1 && (
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            {multiSelect && (
+              <Text style={{ color: '#3b82f6', fontSize: 12, fontWeight: '700' }}>
+                {selectedItems.length}/{maxSelection}
+              </Text>
+            )}
+            <Pressable
+              style={[
+                styles.multiSelectBtn,
+                multiSelect && styles.multiSelectBtnActive,
+                multiSelect && selectedItems.length === 0 && { opacity: 0.35 },
+              ]}
+              onPress={() => {
+                if (multiSelect) {
+                  handleNext();
+                } else {
+                  toggleMultiSelect();
+                }
+              }}
+              disabled={multiSelect && selectedItems.length === 0}
+            >
+              <Text style={[
+                styles.multiSelectText,
+                multiSelect && styles.multiSelectTextActive,
+              ]}>{multiSelect ? 'Done' : 'Select'}</Text>
+            </Pressable>
+          </View>
+        )}
       </View>
 
       <FlatList
@@ -794,6 +857,20 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   cropIcon: { color: '#fff', fontSize: 16 },
+  ratioBadge: {
+    backgroundColor: 'rgba(0,0,0,0.65)',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.3)',
+  },
+  ratioBadgeText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+  },
   albumRow: {
     flexDirection: 'row',
     justifyContent: 'space-between',