Merge branch 'image-cropper' of github-brian-tagg:shravyaramesh/Frontend into image-cropper

1 files changed, 72 insertions, 33 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index d238d6ae..4b35464c 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -1,18 +1,13 @@
 import {RouteProp} from '@react-navigation/core';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useEffect, useState} from 'react';
-import {
-  Dimensions,
-  Image,
-  StyleSheet,
-  TouchableOpacity,
-  Alert,
-} from 'react-native';
+import {default as React, useEffect, useState} from 'react';
+import {Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {normalize} from 'react-native-elements';
-import ImageZoom from 'react-native-image-pan-zoom';
+import ImageZoom, {IOnMove} from 'react-native-image-pan-zoom';
+import PhotoManipulator from 'react-native-photo-manipulator';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {MainStackParams} from '../../routes';
-import {HeaderHeight, SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {TaggSquareButton} from '../common';
 
 type ZoomInCropperRouteProps = RouteProp<MainStackParams, 'ZoomInCropper'>;
@@ -49,6 +44,70 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
       );
     }
   }, []);
+
+  const handleNext = () => {
+    console.log('x0: ', x0, 'x1: ', x1, 'y0: ', y0, 'y1: ', y1);
+    if (
+      x0 !== undefined &&
+      x1 !== undefined &&
+      y0 !== undefined &&
+      y1 !== undefined &&
+      image.sourceURL
+    ) {
+      console.log('x0x1y0y1');
+      PhotoManipulator.crop(image.sourceURL, {
+        x: x0,
+        y: y1,
+        width: Math.abs(x0 - x1),
+        height: Math.abs(y0 - y1),
+      })
+        .then((croppedURL) => console.log('croppedURL: ', croppedURL))
+        .catch((err) => console.log('err: ', err));
+    }
+    console.log('crop photo and send to caption screen');
+  };
+
+  const [x0, setX0] = useState<number>();
+  const [x1, setX1] = useState<number>();
+  const [y0, setY0] = useState<number>();
+  const [y1, setY1] = useState<number>();
+
+  const onMove = (position: IOnMove) => {
+    Image.getSize(
+      image.path,
+      (w, h) => {
+        const x = position.positionX;
+        const y = position.positionY;
+        const scale = position.scale;
+        const screen_ratio = SCREEN_HEIGHT / SCREEN_WIDTH;
+        let x0 = w / 2 - x * (w / SCREEN_WIDTH) - w / 2 / scale;
+        let x1 = w / 2 - x * (w / SCREEN_WIDTH) + w / 2 / scale;
+        if (x0 < 0) {
+          x0 = 0;
+        }
+        if (x1 > w) {
+          x1 = w;
+        }
+        const x_distance = Math.abs(x1 - x0);
+        const y_distance = screen_ratio * x_distance;
+        let y0 = h / 2 - y * (h / SCREEN_HEIGHT) + y_distance / 2;
+        let y1 = h / 2 - y * (h / SCREEN_HEIGHT) - y_distance / 2;
+        if (y0 > h) {
+          y0 = h;
+        }
+        if (y1 < 0) {
+          y1 = 0;
+        }
+        console.log('onMove x0: ', x0, 'x1: ', x1, 'y0: ', y0, 'y1: ', y1);
+        setX0(x0);
+        setX1(x1);
+        setY0(y0);
+        setY1(y1);
+      },
+      (err) => console.log(err),
+    );
+  };
+
   return (
     <>
       <TouchableOpacity
@@ -57,22 +116,12 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         <CloseIcon height={25} width={25} color={'white'} />
       </TouchableOpacity>
       <ImageZoom
-        style={{backgroundColor: 'white'}}
+        style={{backgroundColor: 'black'}}
         cropWidth={SCREEN_WIDTH}
         cropHeight={SCREEN_HEIGHT}
         imageWidth={SCREEN_WIDTH}
         imageHeight={SCREEN_WIDTH / aspectRatio}
-        onMove={(position) =>
-          console.log(
-            'hi',
-            position.positionX,
-            position.positionY,
-            position.scale,
-            position.zoomCurrentDistance,
-            SCREEN_WIDTH,
-            SCREEN_HEIGHT,
-          )
-        }>
+        onMove={onMove}>
         <Image
           style={{width: SCREEN_WIDTH, height: SCREEN_WIDTH / aspectRatio}}
           source={{
@@ -81,17 +130,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
         />
       </ImageZoom>
       <TaggSquareButton
-        onPress={() => {
-          if (image && image.filename && image.sourceURL) {
-            navigation.navigate('CaptionScreen', {
-              screenType,
-              title: title,
-              image: {filename: image.filename, path: image.sourceURL},
-            });
-          } else {
-            Alert.alert('Invalid image file.');
-          }
-        }}
+        onPress={handleNext}
         title={'Next'}
         buttonStyle={'normal'}
         buttonColor={'blue'}