From 8511866b7fbdd2071fb8c2fc5540d99f8509ddc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Or=C5=82=C3=B3w?= <adrian.orlow@fishbrain.com>
Date: Tue, 21 Nov 2023 11:19:04 +0100
Subject: [PATCH] fix: add pr cr fixes
---
.../utils/config/useOlMapPinsLayer.ts | 60 +++++++++++--------
.../utils/config/useOlMapTileLayer.ts | 2 +
src/utils/map/usePointToProjection.ts | 2 +-
3 files changed, 39 insertions(+), 25 deletions(-)
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts b/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts
index 275a28d3..3244cf3a 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts
@@ -1,9 +1,10 @@
/* eslint-disable no-magic-numbers */
import { PIN_SIZE } from '@/constants/canvas';
import { allBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEntity.selectors';
-import { usePointToProjection } from '@/utils/map/usePointToProjection';
+import { BioEntity } from '@/types/models';
+import { UsePointToProjectionResult, usePointToProjection } from '@/utils/map/usePointToProjection';
import { Feature } from 'ol';
-import { Point } from 'ol/geom';
+import { Point as OlPoint } from 'ol/geom';
import BaseLayer from 'ol/layer/Base';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
@@ -13,37 +14,48 @@ import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { getCanvasIcon } from './getCanvasIcon';
+const getPinFeature = (
+ { x, y, width, height, name }: BioEntity,
+ pointToProjection: UsePointToProjectionResult,
+): Feature => {
+ const point = {
+ x: x + width / 2,
+ y: y + height / 2,
+ };
+
+ return new Feature({
+ geometry: new OlPoint(pointToProjection(point)),
+ name,
+ });
+};
+
+const getPinStyle = ({ value, color }: { value: number; color: string }): Style =>
+ new Style({
+ image: new Icon({
+ displacement: [0, PIN_SIZE.height],
+ anchorXUnits: 'fraction',
+ anchorYUnits: 'pixels',
+ img: getCanvasIcon({
+ color,
+ value,
+ }),
+ }),
+ });
+
export const useOlMapPinsLayer = (): BaseLayer => {
const pointToProjection = usePointToProjection();
const bioEntites = useSelector(allBioEntitesSelectorOfCurrentMap);
const bioEntityFeatures = useMemo(
() =>
- bioEntites.map(({ bioEntity: { x, y, name, width, height } }, index) => {
- const point = {
- x: x + width / 2,
- y: y + height / 2,
- };
-
- const feature = new Feature({
- geometry: new Point(pointToProjection(point)),
- name,
- });
-
- const style = new Style({
- image: new Icon({
- displacement: [0, PIN_SIZE.height],
- anchorXUnits: 'fraction',
- anchorYUnits: 'pixels',
- img: getCanvasIcon({
- color: '#106AD7',
- value: index + 1,
- }),
- }),
+ bioEntites.map(({ bioEntity }, index) => {
+ const feature = getPinFeature(bioEntity, pointToProjection);
+ const style = getPinStyle({
+ color: '#106AD7',
+ value: index + 1,
});
feature.setStyle(style);
-
return feature;
}),
[bioEntites, pointToProjection],
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapTileLayer.ts b/src/components/Map/MapViewer/utils/config/useOlMapTileLayer.ts
index 83599a29..b50d5c15 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapTileLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapTileLayer.ts
@@ -10,6 +10,8 @@ import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { getMapTileUrl } from './getMapTileUrl';
+// useOlMapTileLayer returns visual tile layer of the map
+// it makes it possible to view the map, scroll, zoom etc.
export const useOlMapTileLayer = (): BaseLayer => {
const mapSize = useSelector(mapDataSizeSelector);
const currentBackgroundImagePath = useSelector(currentBackgroundImagePathSelector);
diff --git a/src/utils/map/usePointToProjection.ts b/src/utils/map/usePointToProjection.ts
index d0b0066b..b6309fe6 100644
--- a/src/utils/map/usePointToProjection.ts
+++ b/src/utils/map/usePointToProjection.ts
@@ -7,7 +7,7 @@ import { useCallback } from 'react';
import { useSelector } from 'react-redux';
import { pointToLngLat } from './pointToLatLng';
-type UsePointToProjectionResult = (point: Point) => Coordinate;
+export type UsePointToProjectionResult = (point: Point) => Coordinate;
type UsePointToProjection = () => UsePointToProjectionResult;
--
GitLab