From 73a77690fa1dd0737f0226e08b19001bc0d676a3 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 7 Jul 2021 17:39:19 -0400 Subject: Basic functionality --- src/components/common/MomentTags.tsx | 44 +++++++++++++++++++++++++++++------- 1 file changed, 36 insertions(+), 8 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index d8a70353..36c87558 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -10,6 +10,13 @@ interface MomentTagsProps { setTags: (tag: MomentTagType[]) => void; imageRef: RefObject; deleteFromList?: (user: ProfilePreviewType) => void; + boundaries?: DraggableBoundaries; +} +interface DraggableBoundaries { + top?: number; + bottom?: number; + left?: number; + right?: number; } const MomentTags: React.FC = ({ @@ -18,11 +25,16 @@ const MomentTags: React.FC = ({ setTags, imageRef, deleteFromList, + boundaries, }) => { const [offset, setOffset] = useState([0, 0]); const [imageDimensions, setImageDimensions] = useState([0, 0]); const [maxZIndex, setMaxZIndex] = useState(1); const [draggableRefs, setDraggableRefs] = useState[]>([]); + const [minXBoundary, setMinXBoundary] = useState(0); + const [maxXBoundary, setMaxXBoundary] = useState(0); + const [minYBoundary, setMinYBoundary] = useState(0); + const [maxYBoundary, setMaxYBoundary] = useState(0); const updateTagPosition = (ref: RefObject, userId: string) => { if (ref !== null && ref.current !== null) { @@ -77,6 +89,22 @@ const MomentTags: React.FC = ({ }, ); } + + // Checks for and adds boundaries + if (boundaries) { + if (boundaries.top) { + setMinYBoundary(boundaries.top); + } + if (boundaries.bottom) { + setMaxYBoundary(boundaries.bottom); + } + if (boundaries.left) { + setMinXBoundary(boundaries.left); + } + if (boundaries.right) { + setMaxXBoundary(boundaries.right); + } + } }, editing ? 100 : 0, ); @@ -94,10 +122,10 @@ const MomentTags: React.FC = ({ x={(imageDimensions[0] * tag.x) / 100 + offset[0]} y={(imageDimensions[1] * tag.y) / 100 + offset[1]} z={tag.z} - minX={offset[0]} - minY={offset[1]} - maxX={imageDimensions[0] + offset[0]} - maxY={imageDimensions[1] + offset[1]} + minX={offset[0] + minXBoundary} + minY={offset[1] + minYBoundary} + maxX={imageDimensions[0] + offset[0] - maxXBoundary} + maxY={imageDimensions[1] + offset[1] - maxYBoundary} onDragStart={() => { const currZIndex = maxZIndex; setMaxZIndex(currZIndex + 1); @@ -123,10 +151,10 @@ const MomentTags: React.FC = ({ x={(imageDimensions[0] * tag.x) / 100 + offset[0]} y={(imageDimensions[1] * tag.y) / 100 + offset[1]} z={tag.z} - minX={offset[0]} - minY={offset[1]} - maxX={imageDimensions[0] + offset[0]} - maxY={imageDimensions[1] + offset[1]} + minX={offset[0] + minXBoundary} + minY={offset[1] + minYBoundary} + maxX={imageDimensions[0] + offset[0] - maxXBoundary} + maxY={imageDimensions[1] + offset[1] - maxYBoundary} disabled={true}> Date: Thu, 8 Jul 2021 16:53:46 -0400 Subject: Respond to comments, simplify boundaries, place calculations within useEffect --- ios/Podfile.lock | 4 +-- src/components/common/MomentTags.tsx | 26 +++++++++-------- src/screens/moments/TagFriendsScreen.tsx | 48 ++++++++++++++++++++++---------- 3 files changed, 49 insertions(+), 29 deletions(-) (limited to 'src/components/common') diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 19df8c81..82a5b8a8 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -455,7 +455,7 @@ PODS: - React-Core - React-RCTImage - TOCropViewController - - RNInAppBrowser (3.6.1): + - RNInAppBrowser (3.6.3): - React-Core - RNReactNativeHapticFeedback (1.11.0): - React-Core @@ -801,7 +801,7 @@ SPEC CHECKSUMS: RNFS: 3ab21fa6c56d65566d1fb26c2228e2b6132e5e32 RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211 RNImageCropPicker: 35a3ceb837446fa11547704709bb22b5fac6d584 - RNInAppBrowser: 0523b3c15501fb8b54b4f32905d2e71ca902d914 + RNInAppBrowser: 3ff3a3b8f458aaf25aaee879d057352862edf357 RNReactNativeHapticFeedback: 653a8c126a0f5e88ce15ffe280b3ff37e1fbb285 RNReanimated: b9c929bfff7dedc9c89ab1875f1c6151023358d9 RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 36c87558..62b551f0 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -31,10 +31,8 @@ const MomentTags: React.FC = ({ const [imageDimensions, setImageDimensions] = useState([0, 0]); const [maxZIndex, setMaxZIndex] = useState(1); const [draggableRefs, setDraggableRefs] = useState[]>([]); - const [minXBoundary, setMinXBoundary] = useState(0); - const [maxXBoundary, setMaxXBoundary] = useState(0); - const [minYBoundary, setMinYBoundary] = useState(0); - const [maxYBoundary, setMaxYBoundary] = useState(0); + // [minXBoundary, maxXBoundary, minYBoundary, maxYBoundary] + const [boundariesList, setBoundariesList] = useState([0, 0, 0, 0]); const updateTagPosition = (ref: RefObject, userId: string) => { if (ref !== null && ref.current !== null) { @@ -92,18 +90,22 @@ const MomentTags: React.FC = ({ // Checks for and adds boundaries if (boundaries) { + console.log(boundaries); + const newBounds = [...boundariesList]; if (boundaries.top) { - setMinYBoundary(boundaries.top); + newBounds[2] = boundaries.top; } if (boundaries.bottom) { - setMaxYBoundary(boundaries.bottom); + newBounds[3] = boundaries.bottom; } if (boundaries.left) { - setMinXBoundary(boundaries.left); + newBounds[0] = boundaries.left; } if (boundaries.right) { - setMaxXBoundary(boundaries.right); + newBounds[1] = boundaries.right; } + console.log(newBounds); + setBoundariesList(newBounds); } }, editing ? 100 : 0, @@ -122,10 +124,10 @@ const MomentTags: React.FC = ({ x={(imageDimensions[0] * tag.x) / 100 + offset[0]} y={(imageDimensions[1] * tag.y) / 100 + offset[1]} z={tag.z} - minX={offset[0] + minXBoundary} - minY={offset[1] + minYBoundary} - maxX={imageDimensions[0] + offset[0] - maxXBoundary} - maxY={imageDimensions[1] + offset[1] - maxYBoundary} + minX={offset[0] + boundariesList[0]} + minY={offset[1] + boundariesList[2]} + maxX={imageDimensions[0] + offset[0] - boundariesList[1]} + maxY={imageDimensions[1] + offset[1] - boundariesList[3]} onDragStart={() => { const currZIndex = maxZIndex; setMaxZIndex(currZIndex + 1); diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 1852e6a6..5c3501bb 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -38,19 +38,8 @@ const TagFriendsScreen: React.FC = ({route}) => { const [tags, setTags] = useState([]); const [imageWidth, setImageWidth] = useState(0); const [imageHeight, setImageHeight] = useState(0); - - // Calculate boundary (if any) for drag from bottom - let bottomBound; - if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) { - if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { - bottomBound = SCREEN_HEIGHT * 0.15; - } else { - bottomBound = - SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2); - } - } else { - bottomBound = 0; - } + const [bottomBound, setBottomBound] = useState(0); + const [topBound, setTopBound] = useState(0); /* * Update list of tagged users from route params @@ -104,6 +93,21 @@ const TagFriendsScreen: React.FC = ({route}) => { } }; + /* + * Calculate boundary (if any) for drag from bottom + */ + useEffect(() => { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { + setBottomBound(SCREEN_HEIGHT * 0.15); + } else { + setBottomBound( + SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2), + ); + } + } + }, [imageHeight, imageWidth]); + /* * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images. */ @@ -171,7 +175,21 @@ const TagFriendsScreen: React.FC = ({route}) => { )} - + { + const {_x, y, _width, height} = event.nativeEvent.layout; + const tempBound = y + height; + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { + setTopBound(tempBound + 15); + } else { + setTopBound( + tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15, + ); + } + } + }}> { navigation.goBack(); @@ -218,7 +236,7 @@ const TagFriendsScreen: React.FC = ({route}) => { deleteFromList={(user) => setTags(tags.filter((tag) => tag.user.id !== user.id)) } - boundaries={{bottom: bottomBound}} + boundaries={{top: topBound, bottom: bottomBound}} /> )} {tags.length !== 0 && ( -- cgit v1.2.3-70-g09d2 From 9acc152bb1aa7dabdd846ec7fb9a508ace41c9ce Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 8 Jul 2021 17:06:22 -0400 Subject: Fix lint --- src/components/common/MomentTags.tsx | 8 ++++---- src/screens/moments/TagFriendsScreen.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 62b551f0..6ea76508 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -153,10 +153,10 @@ const MomentTags: React.FC = ({ x={(imageDimensions[0] * tag.x) / 100 + offset[0]} y={(imageDimensions[1] * tag.y) / 100 + offset[1]} z={tag.z} - minX={offset[0] + minXBoundary} - minY={offset[1] + minYBoundary} - maxX={imageDimensions[0] + offset[0] - maxXBoundary} - maxY={imageDimensions[1] + offset[1] - maxYBoundary} + minX={offset[0] + boundariesList[0]} + minY={offset[1] + boundariesList[2]} + maxX={imageDimensions[0] + offset[0] - boundariesList[1]} + maxY={imageDimensions[1] + offset[1] - boundariesList[3]} disabled={true}> = ({route}) => { { - const {_x, y, _width, height} = event.nativeEvent.layout; + const {y, height} = event.nativeEvent.layout; const tempBound = y + height; if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) { if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { -- cgit v1.2.3-70-g09d2 From e62ba8ca223d92f662016445264030d28009288f Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 8 Jul 2021 17:22:56 -0400 Subject: Fixed boundaries --- src/components/common/MomentTags.tsx | 2 -- src/screens/moments/TagFriendsScreen.tsx | 26 ++++++++++++++------------ 2 files changed, 14 insertions(+), 14 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx index 6ea76508..37069e18 100644 --- a/src/components/common/MomentTags.tsx +++ b/src/components/common/MomentTags.tsx @@ -90,7 +90,6 @@ const MomentTags: React.FC = ({ // Checks for and adds boundaries if (boundaries) { - console.log(boundaries); const newBounds = [...boundariesList]; if (boundaries.top) { newBounds[2] = boundaries.top; @@ -104,7 +103,6 @@ const MomentTags: React.FC = ({ if (boundaries.right) { newBounds[1] = boundaries.right; } - console.log(newBounds); setBoundariesList(newBounds); } }, diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 983b1be3..6c982936 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -38,6 +38,7 @@ const TagFriendsScreen: React.FC = ({route}) => { const [imageWidth, setImageWidth] = useState(0); const [imageHeight, setImageHeight] = useState(0); const [bottomBound, setBottomBound] = useState(0); + const [topHeight, setTopHeight] = useState(0); const [topBound, setTopBound] = useState(0); /* @@ -77,9 +78,10 @@ const TagFriendsScreen: React.FC = ({route}) => { }; /* - * Calculate boundary (if any) for drag from bottom + * Calculate boundary (if any) for drag from bottom and top */ useEffect(() => { + // Bottom dead zone if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) { if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { setBottomBound(SCREEN_HEIGHT * 0.15); @@ -89,7 +91,16 @@ const TagFriendsScreen: React.FC = ({route}) => { ); } } - }, [imageHeight, imageWidth]); + + // Top dead zone + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < topHeight) { + if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { + setTopBound(topHeight + 15); + } else { + setTopBound(topHeight - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15); + } + } + }, [imageHeight, imageWidth, topHeight]); /* * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images. @@ -162,16 +173,7 @@ const TagFriendsScreen: React.FC = ({route}) => { style={styles.titleContainer} onLayout={(event) => { const {y, height} = event.nativeEvent.layout; - const tempBound = y + height; - if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) { - if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) { - setTopBound(tempBound + 15); - } else { - setTopBound( - tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15, - ); - } - } + setTopHeight(y + height); }}> { -- cgit v1.2.3-70-g09d2