aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/common/Draggable.tsx3
-rw-r--r--src/components/common/MomentTags.tsx89
-rw-r--r--src/components/taggs/TaggDraggable.tsx34
3 files changed, 42 insertions, 84 deletions
diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index 0a480e92..15ba3325 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -60,7 +60,6 @@ interface IProps {
maxX?: number;
maxY?: number;
onDragStart?: () => number;
- measureAdd?: () => void;
}
export default function Draggable(props: IProps) {
@@ -91,7 +90,6 @@ export default function Draggable(props: IProps) {
maxX,
maxY,
onDragStart,
- measureAdd,
} = props;
// The Animated object housing our xy value so that we can spring back
@@ -141,7 +139,6 @@ export default function Draggable(props: IProps) {
}
if (onRelease) {
onRelease(e, gestureState);
- measureAdd();
}
if (!shouldReverse) {
pan.current.flattenOffset();
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index d76e1481..12a7d70a 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -1,4 +1,4 @@
-import React, {MutableRefObject, useEffect, useState} from 'react';
+import React, {createRef, MutableRefObject, useEffect, useState} from 'react';
import {MomentTagType, ProfilePreviewType} from '../../types';
import TaggDraggable from '../taggs/TaggDraggable';
import Draggable from './Draggable';
@@ -6,6 +6,7 @@ import Draggable from './Draggable';
interface MomentTagsProps {
editing: boolean;
tags: MomentTagType[];
+ // setTags: (tag: MomentTagType[]) => void;
imageRef: MutableRefObject<null>;
deleteFromList?: (user: ProfilePreviewType) => void;
}
@@ -13,19 +14,44 @@ interface MomentTagsProps {
const MomentTags: React.FC<MomentTagsProps> = ({
editing,
tags,
+ // setTags,
imageRef,
deleteFromList,
}) => {
const [offset, setOffset] = useState([0, 0]);
const [imageDimensions, setImageDimensions] = useState([0, 0]);
- const [curStart, setCurStart] = useState({});
const [maxZIndex, setMaxZIndex] = useState(1);
+ const [draggableRefs, setDraggableRefs] = useState<
+ React.MutableRefObject<null>[]
+ >([]);
- const editCurStart = (idName: number, dimensions: number[]) => {
- setCurStart((prev) => ({...prev, [idName]: dimensions}));
+ const updateTagPosition = (
+ ref: React.MutableRefObject<null>,
+ userId: string,
+ ) => {
+ if (ref !== null && ref.current !== null) {
+ ref.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,
+ ) => {
+ const x = Math.floor(((px - offset[0]) / imageDimensions[0]) * 100);
+ const y = Math.floor(((py - offset[1]) / imageDimensions[1]) * 100);
+ console.log(x, y);
+ },
+ );
+ }
};
useEffect(() => {
+ setDraggableRefs(tags.map((_) => createRef()));
+ }, [tags]);
+
+ useEffect(() => {
setTimeout(
() => {
imageRef.current.measure(
@@ -50,32 +76,13 @@ const MomentTags: React.FC<MomentTagsProps> = ({
return null;
}
- const measureAdd = () => {};
-
return editing && deleteFromList ? (
<>
{tags.map((tag, index) => (
<Draggable
key={tag.user.id}
- measureAdd={measureAdd}
- //imageDimensions width, height
- // tag.x, tag.y % from backend
- // offset - the padding/offset
- //curStart - list ofevery momentTag's dimensions
- x={
- curStart[index]
- ? (imageDimensions[0] * tag.x) / 100 +
- offset[0] -
- curStart[index][0] / 2
- : (imageDimensions[0] * tag.x) / 100 + offset[0]
- }
- y={
- curStart[index]
- ? (imageDimensions[1] * tag.y) / 100 +
- offset[1] -
- curStart[index][1] / 2
- : (imageDimensions[1] * tag.y) / 100 + offset[1]
- }
+ 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]}
@@ -86,20 +93,14 @@ const MomentTags: React.FC<MomentTagsProps> = ({
setMaxZIndex(currZIndex + 1);
return currZIndex;
}}
- onDragRelease={() => {
- console.log('fooo');
- // TODO: george
- }}>
+ onDragRelease={() =>
+ updateTagPosition(draggableRefs[index], tag.user.id)
+ }>
<TaggDraggable
+ draggableRef={draggableRefs[index]}
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>
))}
@@ -109,20 +110,8 @@ const MomentTags: React.FC<MomentTagsProps> = ({
{tags.map((tag, index) => (
<Draggable
key={tag.user.id}
- x={
- curStart[index]
- ? (imageDimensions[0] * tag.x) / 100 +
- offset[0] -
- curStart[index][0] / 2
- : (imageDimensions[0] * tag.x) / 100 + offset[0]
- }
- y={
- curStart[index]
- ? (imageDimensions[1] * tag.y) / 100 +
- offset[1] -
- curStart[index][1] / 2
- : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1]
- }
+ 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]}
@@ -130,10 +119,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
maxY={imageDimensions[1] + offset[1]}
disabled={true}>
<TaggDraggable
+ draggableRef={draggableRefs[index]}
taggedUser={tag.user}
editingView={editing}
deleteFromList={() => null}
- setStart={(coords: number[]) => editCurStart(index, coords)}
/>
</Draggable>
))}
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index e964d3d1..06825641 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, {useRef} from 'react';
+import React from 'react';
import {
Image,
StyleSheet,
@@ -17,12 +17,10 @@ import {normalize} from '../../utils';
import {navigateToProfile} from '../../utils/users';
interface TaggDraggableProps extends ViewProps {
+ draggableRef: React.MutableRefObject<null>;
taggedUser: ProfilePreviewType;
editingView: boolean;
deleteFromList: () => void;
- setStart: Function;
- offset: {fx: number; fy: number};
- imageDimensions: {width: number; height: number};
}
const TaggDraggable: React.FC<TaggDraggableProps> = (
@@ -31,36 +29,10 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
const navigation = useNavigation();
const dispatch = useDispatch();
const state = useSelector((rs: RootState) => rs);
- const {
- taggedUser,
- editingView,
- deleteFromList,
- setStart,
- offset,
- imageDimensions,
- } = props;
+ const {draggableRef, taggedUser, editingView, deleteFromList} = props;
let uriX = require('../../assets/images/draggableX.png');
let uriTip = require('../../assets/images/Tagg-Triangle.png');
- const draggableRef = useRef(null);
-
- const getPositions = () =>
- 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 [
- Math.floor(((px - offset.fx) / imageDimensions.width) * 100),
- Math.floor(((py - offset.fy) / imageDimensions.height) * 100),
- ];
- },
- );
-
const user: UserType = {
userId: taggedUser.id,
username: taggedUser.username,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:21:39 +0000