From 2e212854d4dc5e995778b2903db0749e903a4e81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Or=C5=82=C3=B3w?= <adrian.orlow@fishbrain.com>
Date: Fri, 17 Nov 2023 16:29:56 +0100
Subject: [PATCH] fix: esthetics of the pin rendering
---
.../Map/MapViewer/utils/config/getCanvasIcon.ts | 11 +++++++----
.../Map/MapViewer/utils/config/useOlMapPinsLayer.ts | 3 ++-
src/constants/dividers.ts | 2 ++
3 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/src/components/Map/MapViewer/utils/config/getCanvasIcon.ts b/src/components/Map/MapViewer/utils/config/getCanvasIcon.ts
index 163511b5..0229e86b 100644
--- a/src/components/Map/MapViewer/utils/config/getCanvasIcon.ts
+++ b/src/components/Map/MapViewer/utils/config/getCanvasIcon.ts
@@ -1,5 +1,5 @@
import { PIN_PATH2D, PIN_SIZE } from '@/constants/canvas';
-import { HALF, QUARTER, THIRD } from '@/constants/dividers';
+import { HALF, ONE_AND_HALF, QUARTER, THIRD, TWO_AND_HALF } from '@/constants/dividers';
import { DEFAULT_FONT_FAMILY } from '@/constants/font';
import { Point } from '@/types/map';
import { getCanvas } from '@/utils/canvas/getCanvas';
@@ -7,6 +7,7 @@ import { getFontSizeToFit } from '@/utils/canvas/getFontSizeToFit';
const SMALL_TEXT_VALUE = 1;
const MEDIUM_TEXT_VALUE = 10;
+const BIG_TEXT_VALUE = 100;
interface Args {
color: string;
@@ -25,14 +26,16 @@ const getTextWidth = (value: number): number => {
return PIN_SIZE.width / QUARTER;
case value < MEDIUM_TEXT_VALUE:
return PIN_SIZE.width / THIRD;
- default:
+ case value < BIG_TEXT_VALUE:
return PIN_SIZE.width / HALF;
+ default:
+ return PIN_SIZE.width / ONE_AND_HALF;
}
};
const getTextPosition = (textWidth: number, textHeight: number): Point => ({
x: (PIN_SIZE.width - textWidth) / HALF,
- y: (PIN_SIZE.height - textHeight) / QUARTER,
+ y: (PIN_SIZE.height - textHeight) / TWO_AND_HALF,
});
const drawNumberOnCanvas = ({ value }: Args, ctx: CanvasRenderingContext2D): void => {
@@ -41,7 +44,7 @@ const drawNumberOnCanvas = ({ value }: Args, ctx: CanvasRenderingContext2D): voi
const textWidth = getTextWidth(value);
const fontSize = getFontSizeToFit(ctx, text, DEFAULT_FONT_FAMILY, textWidth);
- const textHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
+ const textHeight = textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;
const { x, y } = getTextPosition(textWidth, textHeight);
ctx.fillStyle = 'white';
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts b/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts
index 701a25c1..275a28d3 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts
@@ -1,4 +1,5 @@
/* 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 { Feature } from 'ol';
@@ -31,7 +32,7 @@ export const useOlMapPinsLayer = (): BaseLayer => {
const style = new Style({
image: new Icon({
- displacement: [0, 32],
+ displacement: [0, PIN_SIZE.height],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
img: getCanvasIcon({
diff --git a/src/constants/dividers.ts b/src/constants/dividers.ts
index c73dd7aa..402936ad 100644
--- a/src/constants/dividers.ts
+++ b/src/constants/dividers.ts
@@ -1,3 +1,5 @@
+export const ONE_AND_HALF = 1.5;
export const HALF = 2;
+export const TWO_AND_HALF = 2.5;
export const THIRD = 3;
export const QUARTER = 4;
--
GitLab