antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

animate select position

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-31 18:32:24 +02:00
parent c075d474c4
commit a57c51d676
2 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Components/Map/Subcomponents/SelectPosition.tsx Normal file
View File

@ -0,0 +1,16 @@
export const SelectPosition = ({ setSelectNewItemPosition }: { setSelectNewItemPosition }) => {
return (
<div className="tw-animate-pulseGrow tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
<label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
setSelectNewItemPosition(null)
}}>
<p className='tw-text-center '>✕</p></label>
<div className="tw-alert tw-bg-base-100 tw-text-base-content">
<div>
<span className="tw-text-lg">Select position on the map!</span>
</div>
</div>
</div>
)
}

35
src/Components/Map/UtopiaMap.tsx
View File

@ -13,13 +13,14 @@ import { SearchControl } from "./Subcomponents/Controls/SearchControl";
import { Control } from "./Subcomponents/Controls/Control";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { TagsControl } from "./Subcomponents/Controls/TagsControl";
import { useSelectPosition, useSetMapClicked,useSetSelectPosition } from "./hooks/useSelectPosition";
import { useSelectPosition, useSetMapClicked, useSetSelectPosition } from "./hooks/useSelectPosition";
import { useClusterRef, useSetClusterRef } from "./hooks/useClusterRef";
import { Feature, Geometry as GeoJSONGeometry } from 'geojson';
import {FilterControl} from "./Subcomponents/Controls/FilterControl";
import {LayerControl} from "./Subcomponents/Controls/LayerControl";
import { FilterControl } from "./Subcomponents/Controls/FilterControl";
import { LayerControl } from "./Subcomponents/Controls/LayerControl";
import { useLayers } from "./hooks/useLayers";
import { useAddVisibleLayer } from "./hooks/useFilter";
import { SelectPosition } from "./Subcomponents/SelectPosition";
// for refreshing map on resize (needs to be implemented)
const mapDivRef = React.createRef();
@ -31,9 +32,9 @@ function UtopiaMap({
zoom = 10,
children,
geo,
showFilterControl=false,
showFilterControl = false,
showLayerControl = true
}
}
: UtopiaMapProps) {
function MapEventListener() {
@ -51,7 +52,9 @@ function UtopiaMap({
const resetMetaTags = () => {
let params = new URLSearchParams(window.location.search);
window.history.pushState({}, "", `/` + `${params.toString() !== "" ? `?${params}` : ""}`)
if (!location.pathname.includes("/item/")) {
window.history.pushState({}, "", `/` + `${params.toString() !== "" ? `?${params}` : ""}`)
}
document.title = document.title.split("-")[0];
document.querySelector('meta[property="og:title"]')?.setAttribute("content", document.title);
document.querySelector('meta[property="og:description"]')?.setAttribute("content", `${document.querySelector('meta[name="description"]')?.getAttribute("content")}`);
@ -82,9 +85,9 @@ function UtopiaMap({
useEffect(() => {
layers.map(l => addVisibleLayer(l))
}, [layers])
@ -107,7 +110,7 @@ function UtopiaMap({
{/*{!embedded && (*/}
{/* <QuestControl></QuestControl>*/}
{/*)}*/}
{showFilterControl && <FilterControl/>}
{showFilterControl && <FilterControl />}
{/*todo: needed layer handling is located LayerControl*/}
{showLayerControl && <LayerControl></LayerControl>}
</Control>
@ -131,19 +134,9 @@ function UtopiaMap({
}} />}
<MapEventListener />
</MapContainer>
<AddButton triggerAction={setSelectNewItemPosition}></AddButton>
<AddButton triggerAction={setSelectNewItemPosition}></AddButton>
{selectNewItemPosition != null &&
<div className="tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md">
<label className="tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600" onClick={() => {
setSelectNewItemPosition(null)
}}>
<p className='tw-text-center '>✕</p></label>
<div className="tw-alert tw-bg-base-100 tw-text-base-content">
<div>
<span>Select {selectNewItemPosition.name} position!</span>
</div>
</div>
</div>
<SelectPosition setSelectNewItemPosition={setSelectNewItemPosition} />
}
</div>