diff --git a/public/images/virtual-tour/studio1/previews/preview.jpg b/public/images/virtual-tour/studio1/previews/preview.jpg new file mode 100644 index 0000000..d04ddaf Binary files /dev/null and b/public/images/virtual-tour/studio1/previews/preview.jpg differ diff --git a/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx b/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx index 64208c2..364ea4e 100644 --- a/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx +++ b/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx @@ -1,18 +1,12 @@ -import { useEffect } from "react"; - interface ApartmentDescriptionProps { isVisible: boolean; } const ApartmentDescription = ({ isVisible }: ApartmentDescriptionProps) => { - useEffect(() => { - console.log("isVisible", isVisible); - }, [isVisible]); - return ( -
+
diff --git a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx index 898f532..0896fb5 100644 --- a/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx +++ b/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx @@ -3,6 +3,8 @@ import { IDesctiptionFloor } from "../../../types/descriptionFloor"; import ApartmentDescription from "./ApartmentDescription"; import FloorWestWingHighlighting from "./FloorWestWingHighlighting"; import FloorWestWingLayout from "./FloorWestWingLayout"; +import { useNavigate } from "react-router-dom"; +import useWingSidebar from "../../../store/useWingSidebar"; interface IFloorSidebarProps { currentFloor: IDesctiptionFloor | null; @@ -11,12 +13,29 @@ interface IFloorSidebarProps { const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => { const [mousePos, setMousePos] = useState([0, 0]); - const [isDescVisible, setIsDescVisible] = useState(true); + const [isDescVisible, setIsDescVisible] = useState(false); + const { setIsSidebar } = useWingSidebar(); + + const navigate = useNavigate(); + + function handleOnApartmentClick() { + navigate("../virtual-tour/apartments-studio-1"); + setIsDescVisible(false); + setIsSidebar(false); + } function handleMouseMove(e: MouseEvent) { const top = window.innerWidth / 2 - window.innerHeight / 2; - // setMousePos([e.clientX, e.clientY - top]); - setMousePos([e.clientX - 752, e.clientY - Math.abs(top) + 5]); + // setMousePos([e.clientX - 752, e.clientY - Math.abs(top) + 5]); + const y = e.clientY - 210; + const x = e.clientX - 800; + setMousePos([x, y]); + console.log("e.clientX", e.clientX); + console.log("e.clientY", e.clientY); + // setMousePos([ + // e.clientX - window.innerWidth / 2 - 48, + // e.clientY - window.innerHeight / 2 - top, + // ]); } function handleOnMouseOut(): void { @@ -73,8 +92,8 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
@@ -85,6 +104,7 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => { > diff --git a/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx b/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx index 7c94ff9..fb652e0 100644 --- a/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx +++ b/src/components/complexWingPage/FloorSidebar/FloorWestWingHighlighting.tsx @@ -1,11 +1,13 @@ interface FloorWestWingHighlightingProps { handleOnMouseOut: () => void; handleOnMouseOver: () => void; + handleOnApartmentClick: () => void; } const FloorWestWingHighlighting = ({ handleOnMouseOut, handleOnMouseOver, + handleOnApartmentClick, }: FloorWestWingHighlightingProps) => { return ( <> @@ -20,6 +22,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={36} x={205} width="44" @@ -44,6 +47,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={36} x={250} width="79" @@ -68,6 +72,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={36} x={328} width="45" @@ -92,6 +97,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={36} x={371} width="44" @@ -116,6 +122,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={36} x={415} width="71" @@ -140,6 +147,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={36} x={484} width="73" @@ -164,6 +172,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={159} x={415} width="71" @@ -188,6 +197,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={158} x={370} width="44" @@ -212,6 +222,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={158} x={328} width="45" @@ -236,6 +247,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={158} x={285} width="43" @@ -260,6 +272,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={158} x={242} width="42" @@ -284,6 +297,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} x={70} y={157} width="71" @@ -308,6 +322,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} xmlns="http://www.w3.org/2000/svg" y={157} x={2} @@ -326,6 +341,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} xmlns="http://www.w3.org/2000/svg" y={4.94} x={92.12} @@ -356,6 +372,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={35.26} x={555.27} xmlns="http://www.w3.org/2000/svg" @@ -379,6 +396,7 @@ const FloorWestWingHighlighting = ({ className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer" onMouseOut={handleOnMouseOut} onMouseOver={handleOnMouseOver} + onClick={handleOnApartmentClick} y={158.26} x={556} xmlns="http://www.w3.org/2000/svg" diff --git a/src/components/complexWingPage/SequenceWing.tsx b/src/components/complexWingPage/SequenceWing.tsx index b4530e9..d7491fe 100644 --- a/src/components/complexWingPage/SequenceWing.tsx +++ b/src/components/complexWingPage/SequenceWing.tsx @@ -159,7 +159,7 @@ const SequenceWing = () => { }} >