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

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

@ -13,13 +13,14 @@ import { SearchControl } from "./Subcomponents/Controls/SearchControl";
import { Control } from "./Subcomponents/Controls/Control"; import { Control } from "./Subcomponents/Controls/Control";
import { Outlet, useLocation, useNavigate } from "react-router-dom"; import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { TagsControl } from "./Subcomponents/Controls/TagsControl"; 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 { useClusterRef, useSetClusterRef } from "./hooks/useClusterRef";
import { Feature, Geometry as GeoJSONGeometry } from 'geojson'; import { Feature, Geometry as GeoJSONGeometry } from 'geojson';
import {FilterControl} from "./Subcomponents/Controls/FilterControl"; import { FilterControl } from "./Subcomponents/Controls/FilterControl";
import {LayerControl} from "./Subcomponents/Controls/LayerControl"; import { LayerControl } from "./Subcomponents/Controls/LayerControl";
import { useLayers } from "./hooks/useLayers"; import { useLayers } from "./hooks/useLayers";
import { useAddVisibleLayer } from "./hooks/useFilter"; import { useAddVisibleLayer } from "./hooks/useFilter";
import { SelectPosition } from "./Subcomponents/SelectPosition";
// for refreshing map on resize (needs to be implemented) // for refreshing map on resize (needs to be implemented)
const mapDivRef = React.createRef(); const mapDivRef = React.createRef();
@ -31,9 +32,9 @@ function UtopiaMap({
zoom = 10, zoom = 10,
children, children,
geo, geo,
showFilterControl=false, showFilterControl = false,
showLayerControl = true showLayerControl = true
} }
: UtopiaMapProps) { : UtopiaMapProps) {
function MapEventListener() { function MapEventListener() {
@ -51,7 +52,9 @@ function UtopiaMap({
const resetMetaTags = () => { const resetMetaTags = () => {
let params = new URLSearchParams(window.location.search); 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.title = document.title.split("-")[0];
document.querySelector('meta[property="og:title"]')?.setAttribute("content", document.title); 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")}`); document.querySelector('meta[property="og:description"]')?.setAttribute("content", `${document.querySelector('meta[name="description"]')?.getAttribute("content")}`);
@ -107,7 +110,7 @@ function UtopiaMap({
{/*{!embedded && (*/} {/*{!embedded && (*/}
{/* <QuestControl></QuestControl>*/} {/* <QuestControl></QuestControl>*/}
{/*)}*/} {/*)}*/}
{showFilterControl && <FilterControl/>} {showFilterControl && <FilterControl />}
{/*todo: needed layer handling is located LayerControl*/} {/*todo: needed layer handling is located LayerControl*/}
{showLayerControl && <LayerControl></LayerControl>} {showLayerControl && <LayerControl></LayerControl>}
</Control> </Control>
@ -131,19 +134,9 @@ function UtopiaMap({
}} />} }} />}
<MapEventListener /> <MapEventListener />
</MapContainer> </MapContainer>
<AddButton triggerAction={setSelectNewItemPosition}></AddButton> <AddButton triggerAction={setSelectNewItemPosition}></AddButton>
{selectNewItemPosition != null && {selectNewItemPosition != null &&
<div className="tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md"> <SelectPosition setSelectNewItemPosition={setSelectNewItemPosition} />
<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>
} }
</div> </div>