fix(layer-text): correct color model in ColorTilePicker

src/components/FunctionalArea/Modal/LayerTextFactoryModal/LayerTextFactoryModal.component.tsx

@@ -23,7 +23,7 @@ import { addLayerText } from '@/redux/layers/layers.thunks';
 import { layerAddText } from '@/redux/layers/layers.slice';
 import drawElementOnLayer from '@/components/Map/MapViewer/utils/shapes/layer/utils/drawElementOnLayer';
 import { useMapInstance } from '@/utils/context/mapInstanceContext';
-import { BLACK_COLOR, WHITE_COLOR } from '@/components/Map/MapViewer/MapViewer.constants';
+import { BLACK_COLOR } from '@/components/Map/MapViewer/MapViewer.constants';
 
 export const LayerTextFactoryModal: React.FC = () => {
   const activeLayer = useAppSelector(layersActiveLayerSelector);
@@ -40,7 +40,7 @@ export const LayerTextFactoryModal: React.FC = () => {
     horizontalAlign: DEFAULT_HORIZONTAL_ALIGNMENT,
     verticalAlign: DEFAULT_VERTICAL_ALIGNMENT,
     color: BLACK_COLOR,
-    borderColor: { ...WHITE_COLOR, alpha: 0 },
+    borderColor: BLACK_COLOR,
   });
 
   const handleSubmit = async (): Promise<void> => {
@@ -87,10 +87,6 @@ export const LayerTextFactoryModal: React.FC = () => {
     } finally {
       setIsSending(false);
     }
-    setIsSending(true);
-    setTimeout(() => {
-      setIsSending(false);
-    }, 5000);
   };
 
   const changeValues = (value: string | number | Color, key: string): void => {

src/components/FunctionalArea/Modal/LayerTextFactoryModal/LayerTextForm.component.tsx

@@ -58,11 +58,15 @@ export const LayerTextForm = ({ data, onChange }: LayerTextFormProps): React.JSX
         </div>
         <div>
           <span>Color:</span>
-          <ColorTilePicker colorChange={color => onChange(hexToRgbIntAlpha(color), 'color')} />
+          <ColorTilePicker
+            initialColor={data.color}
+            colorChange={color => onChange(hexToRgbIntAlpha(color), 'color')}
+          />
         </div>
         <div>
           <span>Border color:</span>
           <ColorTilePicker
+            initialColor={data.borderColor}
             colorChange={color => onChange(hexToRgbIntAlpha(color), 'borderColor')}
           />
         </div>

src/components/Map/MapViewer/utils/shapes/layer/Layer.ts

@@ -134,6 +134,7 @@ export default class Layer {
         width: text.width,
         height: text.height,
         fontColor: text.color,
+        borderColor: text.borderColor,
         fontSize: text.fontSize,
         text: text.notes,
         verticalAlign: text.verticalAlign as VerticalAlign,
@@ -158,6 +159,7 @@ export default class Layer {
       width: text.width,
       height: text.height,
       fontColor: text.color,
+      borderColor: text.borderColor,
       fontSize: text.fontSize,
       text: text.notes,
       verticalAlign: text.verticalAlign as VerticalAlign,

src/components/Map/MapViewer/utils/shapes/text/Text.test.ts

@@ -34,9 +34,10 @@ describe('Text', () => {
       text: 'Test',
       fontSize: 12,
       fontColor: BLACK_COLOR,
+      borderColor: BLACK_COLOR,
       verticalAlign: 'MIDDLE',
       horizontalAlign: 'CENTER',
-      pointToProjection: jest.fn(),
+      pointToProjection: jest.fn(({ x, y }) => [x, y]),
       mapInstance,
     };
 

src/components/Map/MapViewer/utils/shapes/text/Text.ts

@@ -11,6 +11,11 @@ import { HorizontalAlign, VerticalAlign } from '@/components/Map/MapViewer/MapVi
 import getTextCoords from '@/components/Map/MapViewer/utils/shapes/text/getTextCoords';
 import getTextStyle from '@/components/Map/MapViewer/utils/shapes/text/getTextStyle';
 import { rgbToHex } from '@/components/Map/MapViewer/utils/shapes/style/rgbToHex';
+import Polygon from 'ol/geom/Polygon';
+import getStroke from '@/components/Map/MapViewer/utils/shapes/style/getStroke';
+import getStyle from '@/components/Map/MapViewer/utils/shapes/style/getStyle';
+import getScaledElementStyle from '@/components/Map/MapViewer/utils/shapes/style/getScaledElementStyle';
+import { Stroke } from 'ol/style';
 
 export interface TextProps {
   x: number;
@@ -21,6 +26,7 @@ export interface TextProps {
   text: string;
   fontSize: number;
   fontColor: Color;
+  borderColor: Color;
   verticalAlign: VerticalAlign;
   horizontalAlign: HorizontalAlign;
   pointToProjection: UsePointToProjectionResult;
@@ -34,6 +40,10 @@ export default class Text {
 
   style: Style;
 
+  polygonStyle: Style;
+
+  strokeStyle: Stroke;
+
   point: Point;
 
   feature: Feature<Point>;
@@ -47,6 +57,7 @@ export default class Text {
     text,
     fontSize,
     fontColor,
+    borderColor,
     verticalAlign,
     horizontalAlign,
     pointToProjection,
@@ -65,6 +76,27 @@ export default class Text {
       horizontalAlign,
       pointToProjection,
     });
+    const borderPolygon = new Polygon([
+      [
+        pointToProjection({ x, y }),
+        pointToProjection({ x: x + width, y }),
+        pointToProjection({ x: x + width, y: y + height }),
+        pointToProjection({ x, y: y + height }),
+        pointToProjection({ x, y }),
+      ],
+    ]);
+    this.strokeStyle = getStroke({
+      color: rgbToHex(borderColor),
+      width: 1,
+    });
+    this.polygonStyle = getStyle({
+      geometry: borderPolygon,
+      borderColor,
+      fillColor: { rgb: 0, alpha: 0 },
+      lineWidth: 1,
+      zIndex,
+    });
+
     const textStyle = getTextStyle({
       text,
       fontSize,
@@ -78,7 +110,7 @@ export default class Text {
 
     this.feature = new Feature({
       geometry: this.point,
-      getTextScale: (resolution: number): number => {
+      getScale: (resolution: number): number => {
         const maxZoom = mapInstance?.getView().get('originalMaxZoom');
         if (maxZoom) {
           const minResolution = mapInstance?.getView().getResolutionForZoom(maxZoom);
@@ -94,15 +126,17 @@ export default class Text {
   }
 
   protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
-    const getTextScale = feature.get('getTextScale');
-    let textScale = 1;
-    if (getTextScale instanceof Function) {
-      textScale = getTextScale(resolution);
+    const getScale = feature.get('getScale');
+    let scale = 1;
+    if (getScale instanceof Function) {
+      scale = getScale(resolution);
     }
-    if (textScale < TEXT_CUTOFF_SCALE) {
+    if (scale < TEXT_CUTOFF_SCALE) {
       return undefined;
     }
-    this.style.getText()?.setScale(textScale);
-    return this.style;
+    return [
+      getScaledElementStyle(this.polygonStyle, this.strokeStyle, scale),
+      getScaledElementStyle(this.style, undefined, scale),
+    ];
   }
 }

src/shared/ColorPicker/ColorTilePicker.component.test.tsx

@@ -4,13 +4,13 @@ import { ColorTilePicker } from './ColorTilePicker.component';
 
 describe('ColorTilePicker', () => {
   it('renders with the initial color', () => {
-    render(<ColorTilePicker initialColor="#00ff00" colorChange={jest.fn()} />);
+    render(<ColorTilePicker initialColor={{ rgb: 65280, alpha: 255 }} colorChange={jest.fn()} />);
     const colorTile = screen.getByRole('button');
     expect(colorTile).toHaveStyle({ backgroundColor: '#00ff00' });
   });
 
   it('toggles color picker visibility on click', () => {
-    render(<ColorTilePicker initialColor="#000000" colorChange={jest.fn()} />);
+    render(<ColorTilePicker initialColor={{ rgb: 0, alpha: 255 }} colorChange={jest.fn()} />);
     const colorTile = screen.getByRole('button');
 
     expect(screen.queryByTestId('color-picker')).not.toBeInTheDocument();
@@ -23,7 +23,7 @@ describe('ColorTilePicker', () => {
   });
 
   it('closes color picker when clicking outside', () => {
-    render(<ColorTilePicker initialColor="#000000" colorChange={jest.fn()} />);
+    render(<ColorTilePicker initialColor={{ rgb: 0, alpha: 255 }} colorChange={jest.fn()} />);
     const colorTile = screen.getByRole('button');
 
     fireEvent.click(colorTile);
@@ -34,7 +34,7 @@ describe('ColorTilePicker', () => {
   });
 
   it('handles keyboard interaction (Enter key)', () => {
-    render(<ColorTilePicker initialColor="#000000" colorChange={jest.fn()} />);
+    render(<ColorTilePicker initialColor={{ rgb: 0, alpha: 255 }} colorChange={jest.fn()} />);
     const colorTile = screen.getByRole('button');
 
     expect(screen.queryByTestId('color-picker')).not.toBeInTheDocument();

src/shared/ColorPicker/ColorTilePicker.component.tsx

 import React, { useState, useEffect, useRef } from 'react';
 import ColorPicker, { Color, ColorPickerProps } from '@rc-component/color-picker';
+import { Color as RgbIntAlphaColor } from '@/types/models';
 import '@rc-component/color-picker/assets/index.css';
+import { rgbToHex } from '@/components/Map/MapViewer/utils/shapes/style/rgbToHex';
 
 type ColorTilePickerProps = {
-  initialColor?: string;
+  initialColor?: RgbIntAlphaColor;
   colorChange: (color: string) => void;
   height?: string;
   testId?: string;
@@ -15,14 +17,16 @@ export const ColorTilePicker: React.FC<ColorTilePickerProps> = ({
   height = '40px',
   testId = 'color-tile-picker',
 }) => {
-  const [color, setColor] = useState<string>(initialColor || '#000000');
+  const [color, setColor] = useState<Color>(
+    () => new Color(initialColor ? rgbToHex(initialColor) : '#000000'),
+  );
   const [visible, setVisible] = useState<boolean>(false);
 
   const pickerRef = useRef<HTMLDivElement>(null); // Referencja do elementu pickera
 
   const handleChange: ColorPickerProps['onChange'] = (newColor: Color) => {
-    setColor(newColor.toHexString());
-    colorChange(color);
+    setColor(newColor);
+    colorChange(newColor.toHexString());
   };
 
   const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>): void => {
@@ -54,7 +58,7 @@ export const ColorTilePicker: React.FC<ColorTilePickerProps> = ({
         onKeyDown={handleKeyPress}
         style={{
           height,
-          backgroundColor: color,
+          backgroundColor: color.toHexString(),
         }}
       />
       {visible && (