diff options
| -rw-r--r-- | src/components/common/MomentTags.tsx | 35 | ||||
| -rw-r--r-- | src/components/taggs/TaggDraggable.tsx | 48 |
2 files changed, 32 insertions, 51 deletions
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index a75701f0..d76e1481 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -74,7 +74,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({ ? (imageDimensions[1] * tag.y) / 100 + offset[1] - curStart[index][1] / 2 - : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1] + : (imageDimensions[1] * tag.y) / 100 + offset[1] } z={tag.z} minX={offset[0]} @@ -86,35 +86,20 @@ const MomentTags: React.FC<MomentTagsProps> = ({ 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); - > + onDragRelease={() => { + console.log('fooo'); + // TODO: george + }}> <TaggDraggable taggedUser={tag.user} editingView={true} deleteFromList={() => deleteFromList(tag.user)} setStart={(coords: number[]) => editCurStart(index, coords)} + offset={{fx: offset[0], fy: offset[1]}} + imageDimensions={{ + width: imageDimensions[0], + height: imageDimensions[1], + }} /> </Draggable> ))} diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx index e31be729..e964d3d1 100644 --- a/src/components/taggs/TaggDraggable.tsx +++ b/src/components/taggs/TaggDraggable.tsx @@ -1,5 +1,5 @@ import {useNavigation} from '@react-navigation/native'; -import React, {useEffect, useRef} from 'react'; +import React, {useRef} from 'react'; import { Image, StyleSheet, @@ -7,6 +7,7 @@ import { TouchableOpacity, TouchableWithoutFeedback, View, + ViewProps, } from 'react-native'; import {useDispatch, useSelector} from 'react-redux'; import Avatar from '../../components/common/Avatar'; @@ -15,11 +16,13 @@ import {ProfilePreviewType, ScreenType, UserType} from '../../types'; import {normalize} from '../../utils'; import {navigateToProfile} from '../../utils/users'; -interface TaggDraggableProps { +interface TaggDraggableProps extends ViewProps { taggedUser: ProfilePreviewType; editingView: boolean; deleteFromList: () => void; setStart: Function; + offset: {fx: number; fy: number}; + imageDimensions: {width: number; height: number}; } const TaggDraggable: React.FC<TaggDraggableProps> = ( @@ -28,42 +31,35 @@ const TaggDraggable: React.FC<TaggDraggableProps> = ( const navigation = useNavigation(); const dispatch = useDispatch(); const state = useSelector((rs: RootState) => rs); - const {taggedUser, editingView, deleteFromList, setStart} = props; + const { + taggedUser, + editingView, + deleteFromList, + setStart, + offset, + imageDimensions, + } = props; let uriX = require('../../assets/images/draggableX.png'); let uriTip = require('../../assets/images/Tagg-Triangle.png'); const draggableRef = useRef(null); - useEffect(() => { + const getPositions = () => draggableRef.current.measure( ( - fx: number, // location of ref relative to parent element - fy: number, - width: number, - height: number, + _fx: number, // location of ref relative to parent element + _fy: number, + _width: number, + _height: number, px: number, // location of ref relative to entire screen py: number, ) => { - console.log(px); - // TODO: george + return [ + Math.floor(((px - offset.fx) / imageDimensions.width) * 100), + Math.floor(((py - offset.fy) / imageDimensions.height) * 100), + ]; }, ); - }); - - const getCoords = () => { - draggableRef.current.measure( - ( - fx: number, // location of ref relative to parent element - fy: number, - width: number, - height: number, - px: number, // location of ref relative to entire screen - py: number, - ) => { - return [px, py]; - }, - ); - }; const user: UserType = { userId: taggedUser.id, |