Basic functionality

1 files changed, 36 insertions, 8 deletions

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<Image>;
   deleteFromList?: (user: ProfilePreviewType) => void;
+  boundaries?: DraggableBoundaries;
+}
+interface DraggableBoundaries {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
 }
 
 const MomentTags: React.FC<MomentTagsProps> = ({
@@ -18,11 +25,16 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   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<RefObject<View>[]>([]);
+  const [minXBoundary, setMinXBoundary] = useState<number>(0);
+  const [maxXBoundary, setMaxXBoundary] = useState<number>(0);
+  const [minYBoundary, setMinYBoundary] = useState<number>(0);
+  const [maxYBoundary, setMaxYBoundary] = useState<number>(0);
 
   const updateTagPosition = (ref: RefObject<Image>, userId: string) => {
     if (ref !== null && ref.current !== null) {
@@ -77,6 +89,22 @@ const MomentTags: React.FC<MomentTagsProps> = ({
             },
           );
         }
+
+        // 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<MomentTagsProps> = ({
           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<MomentTagsProps> = ({
           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}>
           <TaggDraggable
             draggableRef={draggableRefs[index]}