1 files changed, 55 insertions, 16 deletions

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 9a6cd08b..75a81814 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -17,27 +17,56 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   deleteFromList,
 }) => {
   const [offset, setOffset] = useState([0, 0]);
-  const [curStart, setCurStart] = useState([0, 0]);
+  const [curStart, setCurStart] = useState({});
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
   const [maxZIndex, setMaxZIndex] = useState(1);
 
+  const editCurStart = (idName: number, coords: number[]) => {
+    setCurStart((prev) => ({...prev, [idName]: coords}));
+  };
+
   useEffect(() => {
-    imageRef.current.measure((fx, fy, width, height, px, py) => {
-      setOffset([px, py]);
-      setImageDimensions([width, height]);
-    });
+    setTimeout(() => {
+      imageRef.current.measure(
+        (
+          fx: number,
+          fy: number,
+          width: number,
+          height: number,
+          _x: number,
+          _y: number,
+        ) => {
+          setOffset([fx, fy]);
+          setImageDimensions([width, height]);
+        },
+      );
+    }, 250);
   }, []);
 
+  useEffect(() => {}, [curStart]);
+
   if (!tags) {
     return null;
   }
   return editing && deleteFromList ? (
     <>
-      {tags.map((tag) => (
+      {tags.map((tag, index) => (
         <Draggable
           key={tag.user.id}
-          x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
-          y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+          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]
+          }
           z={maxZIndex + 1}
           minX={offset[0]}
           minY={offset[1]}
@@ -51,21 +80,31 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           <TaggDraggable
             taggedUser={tag.user}
             editingView={true}
-            deleteFromList={() => {
-              deleteFromList(tag.user);
-            }}
-            setStart={setCurStart}
+            deleteFromList={() => deleteFromList(tag.user)}
+            setStart={(coords: number[]) => editCurStart(index, coords)}
           />
         </Draggable>
       ))}
     </>
   ) : (
     <>
-      {tags.map((tag) => (
+      {tags.map((tag, index) => (
         <Draggable
           key={tag.user.id}
-          x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
-          y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+          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]
+          }
           z={tag.z}
           minX={offset[0]}
           minY={offset[1]}
@@ -76,7 +115,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
             taggedUser={tag.user}
             editingView={editing}
             deleteFromList={() => null}
-            setStart={setCurStart}
+            setStart={(coords: number[]) => editCurStart(index, coords)}
           />
         </Draggable>
       ))}