hotfix ui freeze (zoom in map)

This commit is contained in:
Фролов 2021-09-15 12:03:03 +05:00
parent 0914449d92
commit dd9c49c626
2 changed files with 20 additions and 23 deletions

View File

@ -4,7 +4,7 @@ import {Link} from "react-router-dom";
import LoaderPortal from '../components/LoaderPortal' import LoaderPortal from '../components/LoaderPortal'
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import {ClusterService} from '../services/api' import {ClusterService} from '../services/api'
import { notify } from "../components/factory" import { invokeWebApiWrapperAsync } from "../components/factory"
const calcViewParams = (clusters) => { const calcViewParams = (clusters) => {
if ((!clusters) || clusters.length === 0) if ((!clusters) || clusters.length === 0)
@ -23,31 +23,30 @@ const calcViewParams = (clusters) => {
return d > max ? d : max return d > max ? d : max
}, 0) }, 0)
return {center, zoom: maxDeg*25} // zoom max = 20 (too close)
// zoom min = 1 (mega far)
// 4 - full Russia (161.6 deg)
// 13.5 - Khanty-Mansiysk
let zoom = 5 + 5/maxDeg
zoom = zoom < 5 ? 5: zoom
zoom = zoom > 15 ? 15: zoom
return {center, zoom}
} }
export default function Deposit() { export default function Deposit() {
const [clustersData, setClustersData] = useState([]) const [clustersData, setClustersData] = useState([])
const [showLoader, setShowLoader] = useState(false) const [showLoader, setShowLoader] = useState(false)
useEffect(()=>{ useEffect(()=>invokeWebApiWrapperAsync(async()=>{
const update = async()=>{
setShowLoader(true)
try{
const data = await ClusterService.getClusters() const data = await ClusterService.getClusters()
setClustersData(data) setClustersData(data)
} },
catch(ex) { setShowLoader,
notify(`Не удалось загрузить список кустов`, 'error') `Не удалось загрузить список кустов`),
console.log(ex) [])
}
setShowLoader(false)
}
update()
}, [])
const viewParams = calcViewParams(clustersData) const viewParams = calcViewParams(clustersData)
const markers = clustersData.map(cluster => const markers = clustersData.map(cluster =>
<Overlay <Overlay
width={32} width={32}
@ -62,9 +61,7 @@ export default function Deposit() {
return ( return (
<LoaderPortal show={showLoader}> <LoaderPortal show={showLoader}>
<div className={'h-100vh'}> <div className={'h-100vh'}>
<Map <Map {...viewParams}>
center={viewParams.center}
zoom={viewParams.zoom}>
{markers} {markers}
</Map> </Map>
</div> </div>

View File

@ -8,12 +8,12 @@ export default function Main() {
return ( return (
<Switch> <Switch>
<Route path="/deposit"> <Route path="/deposit">
<LayoutPortal noSheet> <LayoutPortal noSheet title='Месторождение'>
<Deposit /> <Deposit />
</LayoutPortal> </LayoutPortal>
</Route> </Route>
<Route path="/cluster/:idClaster/:tab?"> <Route path="/cluster/:idClaster/:tab?">
<LayoutPortal> <LayoutPortal title="Анализ скважин куста">
<Cluster /> <Cluster />
</LayoutPortal> </LayoutPortal>
</Route> </Route>