From 24613e40f4e3364cff4284f28775b78529836b10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Or=C5=82=C3=B3w?= <adrian.orlow@fishbrain.com>
Date: Wed, 10 Jan 2024 12:20:46 +0100
Subject: [PATCH] feat: add map action buttons
---
.../utils/__TEST__useSetBoundingExtent.ts | 39 -------------------
.../config/pinsLayer/useOlMapPinsLayer.ts | 5 ++-
.../MapViewer/utils/config/useOlMapLayers.ts | 8 +++-
3 files changed, 10 insertions(+), 42 deletions(-)
delete mode 100644 src/components/Map/MapViewer/utils/__TEST__useSetBoundingExtent.ts
diff --git a/src/components/Map/MapViewer/utils/__TEST__useSetBoundingExtent.ts b/src/components/Map/MapViewer/utils/__TEST__useSetBoundingExtent.ts
deleted file mode 100644
index b3a30c6a..00000000
--- a/src/components/Map/MapViewer/utils/__TEST__useSetBoundingExtent.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { searchedBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEntity.selectors';
-import { usePointToProjection } from '@/utils/map/usePointToProjection';
-import { boundingExtent } from 'ol/extent';
-import { useEffect } from 'react';
-import { useSelector } from 'react-redux';
-import { MapInstance } from '../MapViewer.types';
-
-interface Props {
- mapInstance: MapInstance;
-}
-
-export const useSetBoundingExtent = ({ mapInstance }: Props): void => {
- const contentBioEntites = useSelector(searchedBioEntitesSelectorOfCurrentMap);
- const pointToProjection = usePointToProjection();
-
- useEffect(() => {
- if (!mapInstance || contentBioEntites.length === 0 || true) {
- return;
- }
-
- const [allX, allY] = [contentBioEntites.map(e => e.x), contentBioEntites.map(e => e.y)];
- const [minX, maxX] = [Math.min(...allX), Math.max(...allX)];
- const [minY, maxY] = [Math.min(...allY), Math.max(...allY)];
-
- console.log([
- [minX, maxY],
- [maxX, minY],
- ]);
-
- const ext = boundingExtent([
- pointToProjection({ x: minX, y: maxY }),
- pointToProjection({ x: maxX, y: minY }),
- ]);
-
- mapInstance.getView().fit(ext, {
- size: mapInstance.getSize(),
- });
- }, [mapInstance, contentBioEntites, pointToProjection]);
-};
diff --git a/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts b/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts
index 0c2079d0..ceecf01f 100644
--- a/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts
@@ -3,14 +3,15 @@ import { searchedBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEnt
import { searchedChemicalsBioEntitesOfCurrentMapSelector } from '@/redux/chemicals/chemicals.selectors';
import { searchedDrugsBioEntitesOfCurrentMapSelector } from '@/redux/drugs/drugs.selectors';
import { usePointToProjection } from '@/utils/map/usePointToProjection';
-import BaseLayer from 'ol/layer/Base';
+import Feature from 'ol/Feature';
+import { Geometry } from 'ol/geom';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { getBioEntitiesFeatures } from './getBioEntitiesFeatures';
-export const useOlMapPinsLayer = (): BaseLayer => {
+export const useOlMapPinsLayer = (): VectorLayer<VectorSource<Feature<Geometry>>> => {
const pointToProjection = usePointToProjection();
const contentBioEntites = useSelector(searchedBioEntitesSelectorOfCurrentMap);
const chemicalsBioEntities = useSelector(searchedChemicalsBioEntitesOfCurrentMapSelector);
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts b/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts
index 6a1247da..51d307da 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts
@@ -30,11 +30,17 @@ export const useOlMapLayers = ({ mapInstance }: UseOlMapLayersInput): MapConfig[
}, [reactionsLayer, tileLayer, pinsLayer, mapInstance, overlaysLayer]);
useEffect(() => {
+ /* TODO: remove when poc not needed */
if (!mapInstance || contentBioEntites.length === 0) {
return;
}
- const extent = pinsLayer.getSource().getExtent();
+ const source = pinsLayer.getSource();
+ if (source === null) {
+ return;
+ }
+
+ const extent = source.getExtent();
mapInstance.getView().fit(extent, {
size: mapInstance.getSize(),
maxZoom,
--
GitLab