Skip to content
Snippets Groups Projects
Commit e3c0a5dd authored by Miłosz Grocholewski's avatar Miłosz Grocholewski
Browse files

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

parent 9490b91f
No related branches found
No related tags found
2 merge requests!392Resolve MIN-136 "Feat/ appearance of layer editing",!391fix(layer-text): correct color model in ColorTilePicker
Pipeline #101166 passed
......@@ -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 => {
......
......@@ -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>
......
......@@ -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,
......
......@@ -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,
};
......
......@@ -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),
];
}
}
......@@ -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();
......
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 && (
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment