feat(map): display pins map interactive elements

Closes MIN-78

Objective:

Implement displaying pins on the map with it's number

Simplification decision:

• This PR implements displaying pins only for data in bioEntity reducer.
• Due to the fact above, pins colors are always the same
• Also that's why useOlMapPinsLayer is not tested - it will be after we'll implement all the possible cases

How it works? - overall

1. Pins layer uses bioEntites selector as source for pins rendering
2. Every bioEntity position is converted to an projection
3. Every bioEntity data is mapped to instances of Feature and Style which are used to place (Feature) and style/show (Style) the element on the map. Check the docs for more info about them
4. Style instance in our case utilises getCanvasIcon (described below)
5. All Feature instances are then combined into one layer and its source
6. Finally all layers are combined in one array

How it works? - getCanvasIcon

1. getCanvas - returns the Canvas instance of provided size
2. drawPinOnCanvas - draws pin icon (without number) of provided color with use of Path2D (svg path)
3. getTextWidth - returns text width depending of number value. For eg. 1 should be narower than 999 as its visual width is smaller
4. getTextPosition - returns top-left position of the text (start point of drawing on the canvas as textBaseline is set to top)
5. getFontSizeToFit - returns the fitting font size for provided text width
6. drawNumberOnCanvas
   • with use of text metrics, gets text height - what is an ascend/descend is described below
   • with use of utils and text metrics, gets text size and position
   • draws text on the canvas

Important info:

• layers rendering functions has been divided into separate hooks as there will be more of them in the future
• if !54 (merged) is not merged, changes from this PR may appear here

src/components/Map/MapViewer/utils/config/getCanvasIcon.test.ts

+/* eslint-disable no-magic-numbers */
+import { DEFAULT_FONT_FAMILY } from '@/constants/font';
+import { getCanvas } from '@/utils/canvas/getCanvas';
+import {
+  drawNumberOnCanvas,
+  drawPinOnCanvas,
+  getTextPosition,
+  getTextWidth,
+} from './getCanvasIcon';
+
+const getContext = (): CanvasRenderingContext2D => {
+  const canvas = getCanvas({ width: 100, height: 100 });
+  return canvas.getContext('2d') as CanvasRenderingContext2D;
+};
+
+const ONCE = 1;
+
+describe('getCanvasIcon - util', () => {
+  beforeEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('getTextWidth - subUtil', () => {
+    const cases: [number, number][] = [
+      [1, 6.25],
+      [7, 8.333],
+      [43, 12.5],
+      [105, 16.666],
+    ];
+
+    it.each(cases)('on value=%s should return %s', (input, output) => {
+      expect(getTextWidth(input)).toBeCloseTo(output);
+    });
+  });
+
+  describe('getTextPosition - subUtil', () => {
+    const cases: [number, number, number, number][] = [
+      [100, 100, -37.5, -27.2],
+      [532, 443, -253.5, -164.4],
+      [10, 0, 7.5, 12.8],
+      [0, 10, 12.5, 8.8],
+      [0, 0, 12.5, 12.8],
+    ];
+
+    it.each(cases)(
+      'on textWidth=%s textHeight=%s should return x=%s y=%s',
+      (textWidth, textHeight, x, y) => {
+        expect(getTextPosition(textWidth, textHeight)).toMatchObject({
+          x,
+          y,
+        });
+      },
+    );
+  });
+
+  describe('drawPinOnCanvas - subUtil', () => {
+    const color = '#000000';
+
+    it('should run set fillStyle with color', () => {
+      const ctx = getContext();
+      drawPinOnCanvas({ color }, ctx);
+      expect(ctx.fillStyle).toBe(color);
+    });
+
+    it('should run fill method with valid arguments', () => {
+      const ctx = getContext();
+      const fillSpy = jest.spyOn(ctx, 'fill');
+      drawPinOnCanvas({ color }, ctx);
+
+      const call = fillSpy.mock.calls[0][0];
+      expect(call).toBeInstanceOf(Path2D);
+      expect(fillSpy).toBeCalledTimes(ONCE);
+    });
+  });
+
+  describe('drawNumberOnCanvas - subUtil', () => {
+    const ctx = getContext();
+    const fillTextSpy = jest.spyOn(ctx, 'fillText');
+    const value = 69;
+
+    beforeAll(() => {
+      drawNumberOnCanvas(
+        {
+          value,
+        },
+        ctx,
+      );
+    });
+    it('should set valid ctx fields', () => {
+      expect(ctx.fillStyle).toBe('#ffffff');
+      expect(ctx.textBaseline).toBe('top');
+      expect(ctx.font).toBe(`6.25px ${DEFAULT_FONT_FAMILY}`);
+    });
+
+    it('should run fillText once with valid args', () => {
+      expect(fillTextSpy).toBeCalledWith(`${value}`, 6.25, 12.8);
+      expect(fillTextSpy).toBeCalledTimes(ONCE);
+    });
+  });
+});