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
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>