More investigation with draggable, Progress

5 files changed, 54 insertions, 12 deletions

diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index 1253fed4..15ba3325 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -136,7 +136,9 @@ export default function Draggable(props: IProps) {
       isDragging.current = false;
       if (onDragRelease) {
         onDragRelease(e, gestureState);
-        onRelease(e, true);
+      }
+      if (onRelease) {
+        onRelease(e, gestureState);
       }
       if (!shouldReverse) {
         pan.current.flattenOffset();
@@ -193,6 +195,7 @@ export default function Draggable(props: IProps) {
         listener: handleOnDrag,
         useNativeDriver: false,
       }),
+      onPanResponderRelease,
       // onPanResponderRelease: (_) => {
       //   // console.log('end');
       //   // setZIndex(1);
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 75a81814..56113758 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -17,8 +17,8 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   deleteFromList,
 }) => {
   const [offset, setOffset] = useState([0, 0]);
-  const [curStart, setCurStart] = useState({});
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
+  const [curStart, setCurStart] = useState({});
   const [maxZIndex, setMaxZIndex] = useState(1);
 
   const editCurStart = (idName: number, coords: number[]) => {
@@ -43,8 +43,6 @@ const MomentTags: React.FC<MomentTagsProps> = ({
     }, 250);
   }, []);
 
-  useEffect(() => {}, [curStart]);
-
   if (!tags) {
     return null;
   }
@@ -67,7 +65,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
                 curStart[index][1] / 2
               : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1]
           }
-          z={maxZIndex + 1}
+          z={tag.z}
           minX={offset[0]}
           minY={offset[1]}
           maxX={imageDimensions[0] + offset[0]}
@@ -76,7 +74,31 @@ const MomentTags: React.FC<MomentTagsProps> = ({
             const currZIndex = maxZIndex;
             setMaxZIndex(currZIndex + 1);
             return currZIndex;
-          }}>
+          }}
+          onDragRelease={(e, state) => {
+            // console.log(state.moveX);
+            // console.log(state.moveY);
+            // console.log(state);
+            // console.log(offset[0]);
+            // console.log(offset[1]);
+            // console.log(imageDimensions[0]);
+            // console.log(imageDimensions[1]);
+            // console.log(state.moveX / imageDimensions[0]);
+            // console.log(
+            //   Math.floor(
+            //     ((state.moveY - offset[0] + curStart[index][0] / 2) /
+            //       imageDimensions[1]) *
+            //       100,
+            //   ),
+            // );
+          }}
+          // onPressIn={() => {
+          //   console.log('fooo');
+          // }}
+          // onPressOut={() => {
+          //   console.log('fooo');
+          //   // console.log(state);
+        >
           <TaggDraggable
             taggedUser={tag.user}
             editingView={true}
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 3dd5f230..1c7b2524 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -37,13 +37,29 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
   useEffect(() => {
     setTimeout(() => {
       draggableRef.current.measure(
-        (_1: number, _2: number, width: number, height: number) => {
+        (_1: number, _2: number, width: number, height: number, px, py) => {
           setStart([width, height]);
         },
       );
     }, 250);
   }, []);
 
+  useEffect(() => {
+    draggableRef.current.measure(
+      (
+        fx: number,
+        fy: number,
+        width: number,
+        height: number,
+        px: number,
+        py: number,
+      ) => {
+        console.log(px);
+        // TODO: george
+      },
+    );
+  });
+
   const user: UserType = {
     userId: taggedUser.id,
     username: taggedUser.username,
@@ -51,7 +67,7 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
 
   return (
     <TouchableWithoutFeedback>
-      <View ref={draggableRef}>
+      <View ref={draggableRef} style={{borderWidth: 1}}>
         <TouchableOpacity
           style={styles.container}
           disabled={editingView}
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index b2a8586a..b9b35742 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -97,8 +97,9 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
                 editing={true}
                 tags={taggedUsers.map((user) => ({
                   id: '',
-                  x: 0,
-                  y: 0,
+                  x: 50,
+                  y: 50,
+                  z: 1,
                   user,
                 }))}
                 imageRef={imageRef}
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index e2fce032..69f4b3d9 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -116,8 +116,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     const momentTagResponse = await postMomentTags(
       momentResponse.moment_id,
       taggedUsers.map((u, index) => ({
-        x: index * 50 - 150,
-        y: index * 50 - 150,
+        x: index * 50,
+        y: index * 50,
         z: 1,
         user_id: u.id,
       })),