feat: implemented focal point picker inside ImageVault

remix/app/components/ImageEditModal.tsx

@@ -10,7 +10,8 @@ import {
   TextInput,
 } from "@contentstack/venus-components"
 
-import type { InsertResponse } from "~/types/imagevault"
+import type { FocalPoint, InsertResponse } from "~/types/imagevault"
+import FocalPointPicker from "./FocalPointPicker"
 
 type ImageEditModalProps = {
   fieldData: InsertResponse
@@ -25,6 +26,7 @@ export default function ImageEditModal({
 }: ImageEditModalProps) {
   const [altText, setAltText] = useState("")
   const [caption, setCaption] = useState("")
+  const [focalPoint, setFocalPoint] = useState<FocalPoint>({ x: 50, y: 50 })
 
   const assetUrl = fieldData.MediaConversions[0].Url
 
@@ -43,6 +45,12 @@ export default function ImageEditModal({
     }
   }, [fieldData.Metadata])
 
+  useEffect(() => {
+    if (fieldData.FocalPoint) {
+      setFocalPoint(fieldData.FocalPoint)
+    }
+  }, [fieldData.FocalPoint])
+
   function handleSave() {
     const metaData = fieldData.Metadata ?? []
 
@@ -59,31 +67,34 @@ export default function ImageEditModal({
     setData({
       ...fieldData,
       Metadata: newMetadata,
+      FocalPoint: focalPoint,
     })
     closeModal()
   }
 
+  function changeFocalPoint(focalPoint: FocalPoint) {
+    setFocalPoint(focalPoint)
+  }
+
   return (
     <>
       <ModalHeader title="Update image" closeModal={closeModal} />
       <ModalBody
         style={{
-          display: "flex",
+          display: "grid",
+          gridTemplateColumns: "1fr minmax(max-content, 250px)",
           gap: "1rem",
-          justifyContent: "space-between",
           alignItems: "center",
-          width: "100%",
+          width: "auto",
+          maxHeight: "none",
         }}
       >
-        <div style={{ flex: 1, overflowY: "auto" }}>
-          <img
-            src={assetUrl}
-            alt={altText}
-            height="100%"
-            style={{ maxHeight: "345px" }}
-          />
-        </div>
-        <div style={{ flex: 1 }}>
+        <FocalPointPicker
+          imageSrc={assetUrl}
+          focalPoint={focalPoint}
+          onChange={changeFocalPoint}
+        />
+        <div>
           <FieldComponent>
             <FieldLabel htmlFor="alt">Alt text</FieldLabel>
             <TextInput
@@ -107,6 +118,16 @@ export default function ImageEditModal({
               }
             />
           </FieldComponent>
+
+          <FieldComponent>
+            <FieldLabel htmlFor="focalPoint">Focal Point</FieldLabel>
+            <TextInput
+              value={`X: ${focalPoint.x}, Y: ${focalPoint.y}`}
+              placeholder="Caption for image..."
+              name="caption"
+              disabled
+            />
+          </FieldComponent>
         </div>
       </ModalBody>
       <ModalFooter>