@technotoil/image-video-editor 0.1.0 → 0.1.1

package/lib/module/screens/EditorScreen.js

@@ -10,6 +10,7 @@ import Video from 'react-native-video';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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;
@@ -428,6 +429,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(null);
+  const [activeDraggingId, setActiveDraggingId] = useState(null);
+  const [isOverTrash, setIsOverTrash] = useState(false);
 
   // ── Stickers ────────────────────────────────────────────────────────────────
   const STICKER_LIST = ['😂', '❤️', '🔥', '✨', '💯', '👑', '🎉', '🌈', '🎶', '💫', '🙌', '😍', '🤩', '😎', '🥳', '🌸', '🦋', '⚡', '🌙', '💎', '🍕', '🎸', '🎬', '📸', '🎯', '🌺', '🦄', '🐉', '🎭', '🪩'];
@@ -894,10 +897,17 @@ export function EditorScreen({
   const createTextPan = id => {
     let startX = 0;
     let startY = 0;
+    let pressStartTime = 0;
+    let hasMoved = false;
+    let longPressTimeout = 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) {
@@ -906,13 +916,78 @@ 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);
       }
     });
   };
@@ -2223,20 +2298,9 @@ export function EditorScreen({
               zIndex: 20
             }, isSelected && styles.selectedTextContainer],
             ...responder.panHandlers,
-            children: /*#__PURE__*/_jsx(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);
+            children: /*#__PURE__*/_jsx(View, {
+              style: {
+                padding: 4
               },
               children: /*#__PURE__*/_jsx(Text, {
                 style: [styles.textOverlay, {
@@ -2466,19 +2530,9 @@ export function EditorScreen({
                 zIndex: 20
               }, isSelected && styles.selectedTextContainer],
               ...responder.panHandlers,
-              children: /*#__PURE__*/_jsx(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);
+              children: /*#__PURE__*/_jsx(View, {
+                style: {
+                  padding: 4
                 },
                 children: /*#__PURE__*/_jsx(Text, {
                   style: [styles.textOverlay, {
@@ -3057,19 +3111,9 @@ export function EditorScreen({
               zIndex: 20
             }, isSelected && styles.selectedTextContainer],
             ...responder.panHandlers,
-            children: /*#__PURE__*/_jsx(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);
+            children: /*#__PURE__*/_jsx(View, {
+              style: {
+                padding: 4
               },
               children: /*#__PURE__*/_jsx(Text, {
                 style: [styles.textOverlay, {
@@ -4097,6 +4141,24 @@ export function EditorScreen({
           })]
         })
       })
+    }), activeDraggingId !== null && /*#__PURE__*/_jsx(View, {
+      style: styles.globalTrashZone,
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.trashZoneContainer, isOverTrash && styles.trashZoneActive, isOverTrash ? {
+          transform: [{
+            scale: 1.15
+          }]
+        } : {}],
+        children: [/*#__PURE__*/_jsx(Ionicons, {
+          name: isOverTrash ? "trash" : "trash-outline",
+          size: 20,
+          color: "#fff"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.trashZoneText,
+          children: isOverTrash ? "Release to Delete" : "Drag here to delete"
+        })]
+      })
     })]
   });
 }
@@ -5375,6 +5437,44 @@ 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,