Currently pushes tags offscreen

3 files changed, 32 insertions, 6 deletions

diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index 15ba3325..0a480e92 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -60,6 +60,7 @@ interface IProps {
   maxX?: number;
   maxY?: number;
   onDragStart?: () => number;
+  measureAdd?: () => void;
 }
 
 export default function Draggable(props: IProps) {
@@ -90,6 +91,7 @@ export default function Draggable(props: IProps) {
     maxX,
     maxY,
     onDragStart,
+    measureAdd,
   } = props;
 
   // The Animated object housing our xy value so that we can spring back
@@ -139,6 +141,7 @@ 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 56113758..2ba16a6b 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -21,19 +21,19 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   const [curStart, setCurStart] = useState({});
   const [maxZIndex, setMaxZIndex] = useState(1);
 
-  const editCurStart = (idName: number, coords: number[]) => {
-    setCurStart((prev) => ({...prev, [idName]: coords}));
+  const editCurStart = (idName: number, dimensions: number[]) => {
+    setCurStart((prev) => ({...prev, [idName]: dimensions}));
   };
 
   useEffect(() => {
     setTimeout(() => {
       imageRef.current.measure(
         (
-          fx: number,
+          fx: number, // location of ref relative to parent element
           fy: number,
           width: number,
           height: number,
-          _x: number,
+          _x: number, // location of ref relative to entire screen
           _y: number,
         ) => {
           setOffset([fx, fy]);
@@ -46,11 +46,19 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   if (!tags) {
     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 +
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 1c7b2524..7be4a88f 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -47,11 +47,11 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
   useEffect(() => {
     draggableRef.current.measure(
       (
-        fx: number,
+        fx: number, // location of ref relative to parent element
         fy: number,
         width: number,
         height: number,
-        px: number,
+        px: number, // location of ref relative to entire screen
         py: number,
       ) => {
         console.log(px);
@@ -60,6 +60,21 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
     );
   });
 
+  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,
     username: taggedUser.username,