Improve Computation to anchor next to the click

ohcnetwork · Aug 22, 2024 · d374af0 · d374af0
1 parent 8705e06
commit d374af0
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 33 deletions.
diff --git a/src/CAREUI/display/PopupModal.tsx b/src/CAREUI/display/PopupModal.tsx
@@ -9,6 +9,7 @@ type Props = {
   show: boolean;
   onHide: () => void;
   children: ReactNode;
+  anchorRef: React.RefObject<HTMLElement>;
   className?: string;
   onSubmit?: () => void;
 };
@@ -74,46 +75,38 @@ const DesktopView = (props: Props) => {
       const currentMousePosition = mousePosition;
       const modalHeight = modal.current?.clientHeight || 0;
       const modalWidth = modal.current?.clientWidth || 0;
-      const xRelative = currentMousePosition.x;
-      const yRelative = currentMousePosition.y;
-      const containerHeight = window.innerHeight;
-      const containerWidth = window.innerWidth;
-      const verticalCenter = containerHeight / 2;
-      const horizontalCenter = containerWidth / 2;
-      // place the modal on the bottom right of the mouse
-      // if the modal is going out of the screen, place it on the top left of the mouse
-      // if the modal is still going out of the screen, place it on the bottom left of the mouse
-      // if the modal is still going out of the screen, place it on the top right of the mouse
-      console.log(
-        xRelative,
-        xRelative + modalWidth,
-        yRelative,
-        yRelative + modalHeight,
-        containerWidth,
-        containerHeight,
-      );
+      const clickX = currentMousePosition.x;
+      const clickY = currentMousePosition.y;
+      const windowHeight = window.innerHeight;
+      const windowWidth = window.innerWidth;
+
+      const anchorPosition = props.anchorRef.current?.getBoundingClientRect();
+      const anchorX = anchorPosition?.x || 0;
+      const anchorY = anchorPosition?.y || 0;
+      const verticalCenter = windowHeight / 2;
+      const horizontalCenter = windowWidth / 2;
+      const mountLeft = clickX - anchorX;
+      const mountTop = clickY - anchorY;
+
       let position;
-      if (xRelative > horizontalCenter) {
-        position = { right: containerWidth - xRelative };
+      if (clickX > horizontalCenter) {
+        position = { left: mountLeft - modalWidth };
       } else {
-        position = { left: xRelative };
+        position = { left: mountLeft };
       }
-      if (yRelative > verticalCenter) {
-        position = { ...position, bottom: containerHeight - yRelative };
+      if (clickY > verticalCenter) {
+        position = { ...position, top: mountTop - modalHeight };
       } else {
-        position = { ...position, top: yRelative };
+        position = { ...position, top: mountTop };
       }
-      const mountingTo = Object.keys(position).reduce((acc, key) => {
-        return `${acc} ${key}`;
-      }, "");
-      console.log("mounting to ", mountingTo);
       setPosition(position);
     }
 
     document.addEventListener("mousedown", handleOutsideClick);
     return () => {
       document.removeEventListener("mousedown", handleOutsideClick);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.show]);
 
   useEffect(() => {

diff --git a/src/Components/LogUpdate/Sections/PressureSore/PressureSore.tsx b/src/Components/LogUpdate/Sections/PressureSore/PressureSore.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import PopupModal from "../../../../CAREUI/display/PopupModal";
 import HumanBodyChart from "../../../../CAREUI/interactive/HumanChart";
 import { SelectFormField } from "../../../Form/FormFields/SelectFormField";
@@ -17,6 +17,7 @@ import { calculatePushScore } from "./utils";
 
 const PressureSore = ({ log, onChange, readonly }: LogUpdateSectionProps) => {
   const value = log.pressure_sore ?? [];
+  const containerRef = useRef<HTMLDivElement>(null);
   const [current, setCurrent] = useState<IPressureSore>();
 
   const regionPushScore = (region: IPressureSore["region"]) => {
@@ -35,9 +36,10 @@ const PressureSore = ({ log, onChange, readonly }: LogUpdateSectionProps) => {
 
   // TODO: wrap with a div with relative class so that the editor sticks on scroll.
   return (
-    <div className="relative">
+    <div className="relative" ref={containerRef}>
       <RegionEditor
         show={!!current}
+        anchorRef={containerRef}
         value={current ?? getRegionInitialData("AnteriorAbdomen")}
         onCancel={() => setCurrent(undefined)}
         onSave={
@@ -88,6 +90,7 @@ export default PressureSore;
 type RegionEditorProps = {
   show: boolean;
   value: IPressureSore;
+  anchorRef: React.RefObject<HTMLElement>;
   onCancel: () => void;
   onSave?: (value: IPressureSore) => void;
 };
@@ -106,6 +109,7 @@ const RegionEditor = (props: RegionEditorProps) => {
     <PopupModal
       show={props.show}
       onHide={props.onCancel}
+      anchorRef={props.anchorRef}
       className="flex w-72 flex-col items-center gap-4"
       onSubmit={
         props.onSave

diff --git a/src/Components/LogUpdate/components/PainChart.tsx b/src/Components/LogUpdate/components/PainChart.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { IPainScale } from "../../Patient/models";
 import RangeFormField from "../../Form/FormFields/RangeFormField";
 import HumanBodyChart from "../../../CAREUI/interactive/HumanChart";
@@ -15,6 +15,7 @@ type Props = {
 
 export default function PainChart({ pain, onChange }: Props) {
   const [current, setCurrent] = useState<IPainScale>();
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const valueDescription = (region: IPainScale["region"]) => {
     const scale = pain.find((obj) => obj.region === region)?.scale;
@@ -24,10 +25,11 @@ export default function PainChart({ pain, onChange }: Props) {
   };
 
   return (
-    <>
+    <div className="relative" ref={containerRef}>
       <RegionEditor
         show={!!current}
         value={current ?? getInitialData("AnteriorAbdomen")}
+        anchorRef={containerRef}
         onCancel={() => setCurrent(undefined)}
         onSave={
           onChange
@@ -60,13 +62,14 @@ export default function PainChart({ pain, onChange }: Props) {
           pain.find((p) => p.region === region)?.scale.toString() ?? ""
         }
       />
-    </>
+    </div>
   );
 }
 
 type RegionEditorProps = {
   show: boolean;
   value: IPainScale;
+  anchorRef: React.RefObject<HTMLElement>;
   onCancel: () => void;
   onSave?: (value: IPainScale) => void;
 };
@@ -85,6 +88,7 @@ const RegionEditor = (props: RegionEditorProps) => {
     <PopupModal
       show={props.show}
       onHide={props.onCancel}
+      anchorRef={props.anchorRef}
       className="flex flex-col items-center gap-4"
       onSubmit={
         props.onSave