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

map fixed + fullscreen mode + adaptive fixing

Browse Source
This commit is contained in:
zojgame
2024-02-26 17:10:10 +05:00
parent 911cad2daf
commit 8d6d627c66
13 changed files with 136 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -16,6 +16,7 @@
"react": "^18.2.0",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-full-screen": "^1.1.1",
"react-router-dom": "^6.21.3",
"react-swipeable": "^7.0.1",
"react-unity-webgl": "^9.5.0",
src/components/ImagesButton.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ const ImagesButton = ({ onClick }: ImagesButtonProps) => {
return (
<button
onClick={onClick}
className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] flex gap-1 items-center hover:bg-secondary transition-all duration-200"
className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] flex gap-1 items-center hover:bg-secondary transition-all duration-200 h-10 "
>
<ImagesIcon />
Images
src/components/LayoutButton.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ const LayoutButton = ({ onClick }: LayoutButtonProps) => {
return (
<button
onClick={onClick}
className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] text-[16px] flex gap-1 justify-center items-center hover:bg-secondary transition-all duration-200"
className="bg-white py-[6px] pr-5 pl-4 rounded-full border border-[#C7BDBA] text-[16px] flex gap-1 justify-center items-center hover:bg-secondary transition-all duration-200 h-10"
>
<LayoutIcon />
Layout
src/components/Map/Map.tsx
+2 -57
View File
@@ -1,59 +1,16 @@
import PictureMarkerSymbol from "@arcgis/core/symbols/PictureMarkerSymbol";
import { useState, useEffect } from "react";
import Polygon from "@arcgis/core/geometry/Polygon";
import { MapGraphic } from "./MapGraphic";
import { MapViewComponent } from "./MapView";
import { MapGraphicsLayer } from "./MapGraphicsLayer";
import { MapMediaLayer } from "./MapMediaLayer";
import {
GRAPHIC_WIDTH,
GRAPHIC_HEIGHT,
ACTIVE_VILLAS_IMAGE,
GRAPHIC_X_POSITION,
GRAPHIC_Y_POSITION,
} from "../../consts/map";
import { ACTIVE_VILLAS_IMAGE } from "../../consts/map";
import { VillaImage } from "../../types/map";
import useStore from "../../store/store";
const createPolygon = (polygonProperties: __esri.PolygonProperties) =>
new Polygon(polygonProperties);
const ring = [
// [54.657801, 24.359971],
[GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION],
// [54.666801, 24.338971],
];
// const ring = [[GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION]];
// const ring = [[GRAPHIC_X_POSITION, GRAPHIC_Y_POSITION]];
const polygon = createPolygon({
rings: [ring],
});
const villas = new PictureMarkerSymbol({
url: "/images/map/Villas1.png",
width: GRAPHIC_WIDTH,
height: GRAPHIC_HEIGHT,
xoffset: -2,
yoffset: -5,
});
// const villas = {
// type: "picture-marker",
// contentType: "image/png",
// url: "/images/map/Villas.png",
// width: GRAPHIC_WIDTH,
// height: GRAPHIC_HEIGHT,
// };
type MapComponentProps = {
className?: string;
};
const MapComponent = ({ className }: MapComponentProps) => {
const { selectedOnMapVilla } = useStore();
const [villaSymbol, setVillaSymbol] = useState<PictureMarkerSymbol | null>(
null
);
const [selectedVilla, setSelectedVilla] = useState<VillaImage | null>(null);
useEffect(() => {
@@ -64,25 +21,13 @@ const MapComponent = ({ className }: MapComponentProps) => {
);
if (_selectedVilla) {
const _villaSymbol = new PictureMarkerSymbol({
url: `/images/map/${_selectedVilla.image}`,
width: GRAPHIC_WIDTH,
height: GRAPHIC_HEIGHT,
});
setSelectedVilla(_selectedVilla);
setVillaSymbol(_villaSymbol);
}
}, [selectedOnMapVilla]);
return (
<MapViewComponent className={className}>
<MapMediaLayer selectedVilla={selectedVilla}>
{/* <MapGraphic geometry={polygon} symbol={villas} />
{selectedVilla && villaSymbol && (
<MapGraphic geometry={polygon} symbol={villaSymbol} />
)} */}
</MapMediaLayer>
<MapMediaLayer selectedVilla={selectedVilla}></MapMediaLayer>
</MapViewComponent>
);
};
src/components/Map/MapMediaLayer.tsx
+2 -4
View File
@@ -1,3 +1,4 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useContext, useEffect, useState } from "react";
import Extent from "@arcgis/core/geometry/Extent.js";
import MediaLayer from "@arcgis/core/layers/MediaLayer.js";
@@ -38,7 +39,6 @@ export const MapMediaLayer = ({
extent: extent,
}),
});
setAllVillas(allVillasImage);
const _imagesLayer = new MediaLayer({
@@ -62,14 +62,12 @@ export const MapMediaLayer = ({
});
setImagesLayer(_imagesLayer);
return;
}
}, [selectedVilla, allVillas]);
}, [selectedVilla, allVillas, view]);
useEffect(() => {
if (!view || !imagesLayer) return;
view.map.add(imagesLayer);
console.log("loaded");
}, [view, imagesLayer]);
return (
src/components/Map/MapView.tsx
+1 -4
View File
@@ -52,7 +52,6 @@ const createMapView = (container: HTMLDivElement) => {
event.stopPropagation();
}
});
return view;
}
@@ -111,7 +110,7 @@ export const MapViewComponent = (props: MapViewComponentProps) => {
return () => {
_view && _view.destroy();
};
}, []);
}, [selectedOnMapVilla]);
useEffect(() => {
if (isLoading) {
@@ -139,8 +138,6 @@ export const MapViewComponent = (props: MapViewComponentProps) => {
handle.remove();
}
});
return () => {};
}, [view, selectedOnMapVilla]);
return (
src/components/desktop/Appartment/ButtonPanel.tsx
+87 -26
View File
@@ -1,4 +1,6 @@
import { useNavigate } from "react-router-dom";
import { useNavigate, useLocation } from "react-router-dom";
import { FullScreenHandle } from "react-full-screen";
import { useState } from "react";
import HelpButton from "../../HelpButton";
import ResizeButton from "../../ResizeButton";
import BackButton from "../../BackButton";
@@ -10,11 +12,18 @@ import LayoutModal from "./LayoutModal";
import ImagesModal from "./ImagesModal";
import PedestrianIcon from "../../../icons/Pedestrianicon";
const ButtonPanel = () => {
type ButtonPanelProps = {
handleFullscreen: FullScreenHandle;
};
const ButtonPanel = ({ handleFullscreen }: ButtonPanelProps) => {
const navigate = useNavigate();
const location = useLocation();
// const history = useHistory();
const {
setIsFullMode,
isFullMode,
// setIsFullMode,
// isFullMode,
setModal,
is3DTour,
sendMessageToUnity,
@@ -22,12 +31,20 @@ const ButtonPanel = () => {
setIs3DTour,
} = useStore();
const [isFullMode, setIsFullMode] = useState(false);
const handleOnMapClick = () => {
navigate("../");
// navigate("../");
};
const handleOnResizeClick = () => {
setIsFullMode(!isFullMode);
// setIsFullMode(!isFullMode);
setIsFullMode((prev) => !prev);
if (isFullMode) {
handleFullscreen.enter();
} else {
handleFullscreen.exit();
}
};
const handleOnHelpClick = () => {
@@ -51,26 +68,34 @@ const ButtonPanel = () => {
};
return (
<div className="absolute top-0 w-full p-4 flex justify-between select-none">
{is3DTour || currentView !== 1 ? (
<BackButton
onClick={handleOnBackClick}
className="pl-[6px] pr-[6px] w-[40px] h-10"
/>
) : (
<BackButton
onClick={handleOnMapClick}
title="Map"
className="w-[90px] h-10"
/>
)}
{currentView !== 1 && !is3DTour && (
<div className="flex items-center bg-[#EAE5E0] h-fit px-12 py-2 gap-2 rounded-full">
<PedestrianIcon color="#000" className="w-5 h-5" />
Choose a room to start the 3D tour
</div>
)}
<div className="flex gap-2 w-fit">
<div className="absolute top-0 w-screen max-w-screen p-4 flex select-none">
<div className="w-1/3">
{location.key !== "default" && (
<>
{is3DTour || currentView !== 1 ? (
<BackButton
onClick={handleOnBackClick}
className="pl-[6px] pr-[6px] w-[40px] h-10"
/>
) : (
<BackButton
onClick={handleOnMapClick}
title="Map"
className="w-[90px] h-10"
/>
)}
</>
)}
</div>
<div className="w-1/3">
{currentView !== 1 && !is3DTour && (
<div className="flex items-center justify-center bg-[#EAE5E0] h-fit px-12 w-fit py-2 gap-2 rounded-full mx-auto">
<PedestrianIcon color="#000" className="w-5 h-5" />
Choose a room to start the 3D tour
</div>
)}
</div>
<div className="flex gap-2 w-fit ml-auto">
<ImagesButton onClick={handleOnImagesClick} />
<LayoutButton onClick={handleOnLayoutClick} />
<HelpButton
@@ -83,6 +108,42 @@ const ButtonPanel = () => {
/>
</div>
</div>
// <div className="absolute top-0 w-screen max-w-screen p-4 grid grid-cols-3 select-none">
// <div className="">
// {is3DTour || currentView !== 1 ? (
// <BackButton
// onClick={handleOnBackClick}
// className="pl-[6px] pr-[6px] w-[40px] h-10"
// />
// ) : (
// <BackButton
// onClick={handleOnMapClick}
// title="Map"
// className="w-[90px] h-10"
// />
// )}
// </div>
// <div>
// {currentView !== 1 && !is3DTour && (
// <div className="flex items-center justify-center bg-[#EAE5E0] h-fit px-12 w-fit py-2 gap-2 rounded-full mx-auto">
// <PedestrianIcon color="#000" className="w-5 h-5" />
// Choose a room to start the 3D tour
// </div>
// )}
// </div>
// <div className="flex gap-2 w-fit ml-auto">
// <ImagesButton onClick={handleOnImagesClick} />
// <LayoutButton onClick={handleOnLayoutClick} />
// <HelpButton
// className="h-10 w-10"
// handleOnHelpClick={handleOnHelpClick}
// />
// <ResizeButton
// className="h-10 w-10"
// handleOnHelpClick={handleOnResizeClick}
// />
// </div>
// </div>
);
};
src/components/desktop/Appartment/LayoutModal.tsx
+2 -2
View File
@@ -31,7 +31,7 @@ const LayoutModal = () => {
setModal(null);
};
return (
<div className="w-screen h-screen bg-white absolute z-10 flex flex-col">
<div className="min-w-screen w-screen min-h-[100vh] bg-white absolute z-10 flex flex-col">
<div className="flex justify-between pt-8 pr-8">
<div />
<CrossButton onClick={handleOnCloseClick} />
@@ -46,7 +46,7 @@ const LayoutModal = () => {
setCurrentView={setCurrentView}
/>
<LayoutToggle
className="w-[340px] mx-auto"
className="max-w-[340px] mx-auto"
currentView={currentView}
setCurrentView={setCurrentView}
/>
src/components/desktop/Appartment/ParameterDescription.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ const ParameterDescription = () => {
const { currentVilla } = useStore();
return (
<div className="flex py-6 gap-6 items-center justify-center border select-none">
<div className="flex py-6 gap-6 items-center justify-center select-none">
<h2 className="text-[#050409] font-medium text-2xl uppercase ">
{currentVilla && currentVilla.type}
</h2>
src/index.css
+4
View File
@@ -32,3 +32,7 @@ body {
background: #c7bdba;
border-radius: 99px;
}
:fullscreen::backdrop {
background: none;
}
src/pages/Desktop/DesktopApartmentPage.tsx
+22 -25
View File
@@ -1,6 +1,8 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { Unity } from "react-unity-webgl";
import { useEffect, useState } from "react";
import { ReactUnityEventParameter } from "react-unity-webgl/distribution/types/react-unity-event-parameters";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import useStore from "../../store/store";
import LoaderModal from "../../components/LoaderModal";
import ButtonPanel from "../../components/desktop/Appartment/ButtonPanel";
@@ -10,13 +12,8 @@ import ViewToggle from "../../components/ViewToggle";
import ParameterDescription from "../../components/desktop/Appartment/ParameterDescription";
const DesktopApartmentPage = () => {
const {
setCurrentView,
setSendMessageToUnity,
setLoader,
setIs3DTour,
isFullMode,
} = useStore();
const { setCurrentView, setSendMessageToUnity, setLoader, setIs3DTour } =
useStore();
const { villa } = useVilla();
@@ -69,27 +66,27 @@ const DesktopApartmentPage = () => {
}
}, [isContainerLoaded]);
const onFullscreenHandle = useFullScreenHandle();
return (
<>
<div
className={` ${
!isFullMode ? "pt-[101px] px-[215px]" : ""
} relative transition-all duration-300 max-h-screen`}
>
<div
className={`relative h-[calc(100vh-199px)] ${
!isFullMode ? "h-[calc(100vh-199px)]" : "h-[calc(100vh-98px)]"
}`}
>
<ButtonPanel />
<Unity
unityProvider={unityProvider}
style={{ width: "100%", height: "100%" }}
/>
<ViewToggle isDesktop />
<FullScreen handle={onFullscreenHandle}>
<div className={`relative transition-all duration-300 max-h-screen`}>
<div
className={`relative h-[calc(100vh-98px)]
`}
>
<ButtonPanel handleFullscreen={onFullscreenHandle} />
<Unity
unityProvider={unityProvider}
style={{ width: "100%", height: "100%" }}
/>
<ViewToggle isDesktop />
</div>
<ParameterDescription />
</div>
<ParameterDescription />
</div>
</FullScreen>
</>
);
};
src/store/store.ts
-4
View File
@@ -9,7 +9,6 @@ interface StoreType {
loader: React.ReactNode | null;
panel: React.ReactNode | null;
modal: React.ReactNode | null;
isFullMode: boolean;
sendMessageToUnity:
| ((
gameObjectName: string,
@@ -21,7 +20,6 @@ interface StoreType {
is3DTour: boolean;
setIs3DTour: (is3D: boolean) => void;
setIsFullMode: (isFullMode: boolean) => void;
setCurrentVilla: (villa: Villa) => void;
setSelectedOnMapVilla: (villa: Villa | null) => void;
setCurrentView: (view: number) => void;
@@ -39,7 +37,6 @@ interface StoreType {
const useStore = create<StoreType>((set) => ({
// currentVilla: null,
isFullMode: true,
currentVilla: VILLAS[0],
is3DTour: false,
selectedOnMapVilla: null,
@@ -50,7 +47,6 @@ const useStore = create<StoreType>((set) => ({
currentView: 1,
setIsFullMode: (isFullMode) => set(() => ({isFullMode: isFullMode})),
setIs3DTour: (is3DTour) => set(() => ({ is3DTour: is3DTour })),
setSelectedOnMapVilla: (villa) => set(() => ({ selectedOnMapVilla: villa })),
setCurrentVilla: (villa) => set(() => ({ currentVilla: villa })),
yarn.lock
+12
View File
@@ -1140,6 +1140,11 @@ fs.realpath@^1.0.0:
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
fscreen@^1.0.2:
version "1.2.0"
resolved "https://registry.yarnpkg.com/fscreen/-/fscreen-1.2.0.tgz#1a8c88e06bc16a07b473ad96196fb06d6657f59e"
integrity sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==
fsevents@~2.3.2:
version "2.3.3"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
@@ -1674,6 +1679,13 @@ react-dom@^18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"
react-full-screen@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-full-screen/-/react-full-screen-1.1.1.tgz#b707d56891015a71c503a65dbab3086d75be97d7"
integrity sha512-xoEgkoTiN0dw9cjYYGViiMCBYbkS97BYb4bHPhQVWXj1UnOs8PZ1rPzpX+2HMhuvQV1jA5AF9GaRbO3fA5aZtg==
dependencies:
fscreen "^1.0.2"
react-router-dom@^6.21.3:
version "6.21.3"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.3.tgz#ef3a7956a3699c7b82c21fcb3dbc63c313ed8c5d"