zojgame/IRTH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

pos fix start

Browse Source
This commit is contained in:
zojgame
2024-07-09 18:36:08 +05:00
parent da79d499b2
commit af5c7c10f4
6 changed files with 189 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/complexWingPage/SequenceWing/MobileFloorDescription.tsx
+2
View File
@@ -7,11 +7,13 @@ import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
interface MobileFloorDescriptionProps {
descriptionFloor: IDesctiptionFloor | null;
floorApartments: IAparmentRes[];
isLeft: boolean;
}
const MobileFloorDescription = ({
descriptionFloor,
floorApartments,
isLeft,
}: MobileFloorDescriptionProps) => {
return (
<>
client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+120 -33
View File
@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { MouseEvent, useEffect, useState } from "react";
import FloorDescription from "../FloorDescription";
@@ -52,6 +53,7 @@ const SequenceWing = () => {
const [selectedApartments, setSelectedApartments] = useState<IAparmentRes[]>(
[]
);
const [isLeft, setIsLeft] = useState(false);
const [isDescriptionFloorMobile, setIsDescriptionFloorMobile] =
useState(false);
@@ -122,57 +124,123 @@ const SequenceWing = () => {
const handleMouseMove = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
};
function handleOnMouseDown(e: MouseEvent | any) {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// >1072
// const _top = screenHeight / 16;
if (screenWidth > laptopWidth) {
const _top = screenWidth / 2 - screenHeight / 2;
setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
setMousePos([e.clientX - 384, e.clientY + top - 25]);
} else {
// 640-1072
if (screenWidth > mobileWidht) {
const _top = screenHeight / 4;
const _left = laptopWidth - screenWidth;
setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
setMousePos([e.clientX - 354, e.clientY + top - 25]);
// <640
} else {
const _top = screenHeight / 2.5;
const _left = laptopWidth - screenWidth;
setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
}
}
}
};
const handleOnMouseDown = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
const screenWidth = window.innerWidth;
if (screenWidth > laptopWidth) {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
} else {
// 640-1072
if (screenWidth > mobileWidht) {
setMousePos([e.clientX - 444 + left, e.clientY + Math.abs(top) + 30]);
// <640
} else {
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
}
}
};
// function handleOnMouseDown(e: MouseEvent | any) {
// const screenWidth = window.innerWidth;
// const screenHeight = window.innerHeight;
// // >1072
// if (screenWidth > laptopWidth) {
// const _top = screenWidth / 2 - screenHeight / 2;
// setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
// } else {
// // 640-1072
// if (screenWidth > mobileWidht) {
// const _top = screenHeight / 4;
// const _left = laptopWidth - screenWidth;
// setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
// // setMousePos([e.clientX - 444 + _left, e.clientY + Math.abs(_top) + 30]);
// // <640
// } else {
// const _top = screenHeight / 2.5;
// const _left = laptopWidth - screenWidth;
// setMousePos([e.clientX - 440 + _left, e.clientY + Math.abs(_top) + 20]);
// }
// }
// }
function handleResize() {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// >1072
if (screenWidth > laptopWidth) {
setWidth(screenWidth);
setTop(screenWidth / 2 - screenHeight / 2);
setLeft(0);
} else {
// 640-1072
if (screenWidth > mobileWidht) {
const _top = screenHeight / 4;
const _top = screenHeight / 16;
setTop(_top);
// <640
} else {
const _top = screenHeight / 2.5;
const _top = screenHeight / 5.5;
setTop(_top);
}
const _left = laptopWidth - screenWidth;
const _width = screenWidth + _left * 2;
const _left = (laptopWidth - screenWidth) * 1.1;
const _width = screenWidth + _left * 1.9;
setWidth(_width);
setLeft(_left);
}
}
const handleOnExploreFloorClick = (
e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
) => {
e.stopPropagation();
if (!currentHoveredFloor) return;
// setModal(
// <WingFloorModal
// currentFloor={currentHoveredFloor}
// floorApartments={currentHoveredApartments}
// />
// );
setIsDescriptionFloorMobile(false);
};
// function handleResize() {
// const screenWidth = window.innerWidth;
// const screenHeight = window.innerHeight;
// // >1072
// if (screenWidth > laptopWidth) {
// setWidth(screenWidth);
// setTop(screenWidth / 2 - screenHeight / 2);
// setLeft(0);
// } else {
// // 640-1072
// if (screenWidth > mobileWidht) {
// const _top = screenHeight / 4;
// setTop(_top);
// // <640
// } else {
// const _top = screenHeight / 2.5;
// setTop(_top);
// }
// const _left = laptopWidth - screenWidth;
// const _width = screenWidth + _left * 2;
// setWidth(_width);
// setLeft(_left);
// }
// }
useEffect(() => {
handleResize();
window.addEventListener("resize", handleResize);
@@ -245,16 +313,16 @@ const SequenceWing = () => {
sortList,
]);
useEffect(() => {
if (isLoading) {
setModal(<LoaderModal />);
} else {
setModal(null);
}
}, [isLoading, setModal]);
// useEffect(() => {
// if (isLoading) {
// setModal(<LoaderModal />);
// } else {
// setModal(null);
// }
// }, [isLoading, setModal]);
return (
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none">
<div
className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all "
style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }}
@@ -302,7 +370,7 @@ const SequenceWing = () => {
</div>
<div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:flex hidden ${
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out sm:flex hidden ${
currentHoveredFloor?.floor !== skyGardenFloor &&
currentHoveredFloor &&
isWrapperHovered
@@ -323,8 +391,27 @@ const SequenceWing = () => {
floorApartments={currentHoveredApartments}
/>
</div>
{/* */}
<div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out lg:hidden flex ${
currentHoveredFloor?.floor !== skyGardenFloor &&
currentHoveredFloor &&
isWrapperHovered
? "opacity-100"
: "opacity-0"
}`}
style={{
top: mousePos[1],
left: `${mousePos[0]}px`,
}}
>
<MobileFloorDescription
isLeft={isLeft}
onClick={handleOnExploreFloorClick}
descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
/>
</div>
{/* <div
className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${
isDescriptionFloorMobile ? "opacity-100" : "opacity-0"
}`}
@@ -339,7 +426,7 @@ const SequenceWing = () => {
descriptionFloor={currentHoveredFloor}
floorApartments={currentHoveredApartments}
/>
</div>
</div> */}
<img
width={`${width}px`}