From 489dc7e991a8b626c05f3839564bcffc8e37d030 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tadeusz=20Miesi=C4=85c?= <tadeusz.miesiac@gmail.com>
Date: Tue, 19 Dec 2023 12:02:22 +0100
Subject: [PATCH] feat(overlays): cover rendering cases for additional
properties for bioEntities
---
.../OverlayListItem.component.test.tsx | 46 ++++++++++++-
.../OverlayListItem.component.tsx | 3 +
.../hooks/useEmptyBackground.test.ts | 43 +++++++++++++
.../hooks/useEmptyBackground.ts | 22 +++++++
.../overlaysLayer/getOverlayFeatures.ts | 64 +++++++++++++------
.../overlaysLayer/useOlMapOverlaysLayer.ts | 12 +++-
src/constants/hexColors.ts | 1 +
src/hooks/useTriColorLerp.ts | 14 +++-
.../fixtures/overlayBioEntityFixture.ts | 10 +++
src/models/mocks/modelsMock.ts | 18 ++++++
src/redux/backgrounds/background.selectors.ts | 9 +++
.../configuration/configuration.selectors.ts | 6 ++
.../overlayBioEntity.utils.ts | 1 +
src/types/OLrendering.ts | 3 +
src/types/models.ts | 2 +
.../getHexTricolorGradientColorWithAlpha.ts | 3 +-
src/utils/convert/hexToRgb.test.ts | 6 +-
src/utils/convert/hexToRgb.ts | 5 +-
todo.txt | 14 ----
19 files changed, 234 insertions(+), 48 deletions(-)
create mode 100644 src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.test.ts
create mode 100644 src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.ts
create mode 100644 src/constants/hexColors.ts
create mode 100644 src/models/fixtures/overlayBioEntityFixture.ts
delete mode 100644 todo.txt
diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx
index 21e54427..dd3cc6ea 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx
+++ b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.test.tsx
@@ -1,11 +1,28 @@
import { StoreType } from '@/redux/store';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
import {
InitialStoreState,
getReduxWrapperWithStore,
} from '@/utils/testing/getReduxWrapperWithStore';
+import {
+ BACKGROUNDS_MOCK,
+ BACKGROUND_INITIAL_STATE_MOCK,
+} from '@/redux/backgrounds/background.mock';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { mockNetworkNewAPIResponse } from '@/utils/mockNetworkResponse';
+import { OVERLAY_BIO_ENTITY_INITIAL_STATE_MOCK } from '@/redux/overlayBioEntity/overlayBioEntity.mock';
+import { HttpStatusCode } from 'axios';
+import { overlayBioEntityFixture } from '@/models/fixtures/overlayBioEntityFixture';
+import { apiPath } from '@/redux/apiPath';
+import { CORE_PD_MODEL_MOCK } from '@/models/mocks/modelsMock';
+import { MODELS_INITIAL_STATE_MOCK } from '@/redux/models/models.mock';
+import { parseOverlayBioEntityToOlRenderingFormat } from '@/redux/overlayBioEntity/overlayBioEntity.utils';
import { OverlayListItem } from './OverlayListItem.component';
+const mockedAxiosNewClient = mockNetworkNewAPIResponse();
+const DEFAULT_BACKGROUND_ID = 0;
+const EMPTY_BACKGROUND_ID = 15;
+
const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
@@ -29,8 +46,31 @@ describe('OverlayListItem - component', () => {
expect(screen.getByRole('button', { name: 'View' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument();
});
- // TODO implement when connecting logic to component
- it.skip('should trigger view overlays on view button click', () => {});
+
+ it('should trigger view overlays on view button click and switch background to Empty if available', async () => {
+ const OVERLAY_ID = 21;
+ const { store } = renderComponent({
+ map: initialMapStateFixture,
+ backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+ overlayBioEntity: OVERLAY_BIO_ENTITY_INITIAL_STATE_MOCK,
+ models: { ...MODELS_INITIAL_STATE_MOCK, data: [CORE_PD_MODEL_MOCK] },
+ });
+ mockedAxiosNewClient
+ .onGet(apiPath.getOverlayBioEntity({ overlayId: OVERLAY_ID, modelId: 5053 }))
+ .reply(HttpStatusCode.Ok, overlayBioEntityFixture);
+
+ expect(store.getState().map.data.backgroundId).toBe(DEFAULT_BACKGROUND_ID);
+
+ const ViewButton = screen.getByRole('button', { name: 'View' });
+ await act(() => {
+ ViewButton.click();
+ });
+
+ expect(store.getState().map.data.backgroundId).toBe(EMPTY_BACKGROUND_ID);
+ expect(store.getState().overlayBioEntity.data).toEqual(
+ parseOverlayBioEntityToOlRenderingFormat(overlayBioEntityFixture, OVERLAY_ID),
+ );
+ });
// TODO implement when connecting logic to component
it.skip('should trigger download overlay to PC on download button click', () => {});
});
diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx
index b7746386..20f173fe 100644
--- a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx
+++ b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/OverlayListItem.component.tsx
@@ -1,6 +1,7 @@
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { getOverlayBioEntityForAllModels } from '@/redux/overlayBioEntity/overlayBioEntity.thunk';
import { Button } from '@/shared/Button';
+import { useEmptyBackground } from './hooks/useEmptyBackground';
interface OverlayListItemProps {
name: string;
@@ -10,8 +11,10 @@ interface OverlayListItemProps {
export const OverlayListItem = ({ name, overlayId }: OverlayListItemProps): JSX.Element => {
const onDownloadOverlay = (): void => {};
const dispatch = useAppDispatch();
+ const { setBackgroundtoEmptyIfAvailable } = useEmptyBackground();
const onViewOverlay = (): void => {
+ setBackgroundtoEmptyIfAvailable();
dispatch(getOverlayBioEntityForAllModels({ overlayId }));
};
diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.test.ts b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.test.ts
new file mode 100644
index 00000000..9c58dfc3
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.test.ts
@@ -0,0 +1,43 @@
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import {
+ BACKGROUNDS_MOCK,
+ BACKGROUND_INITIAL_STATE_MOCK,
+} from '@/redux/backgrounds/background.mock';
+import { renderHook } from '@testing-library/react';
+import { useEmptyBackground } from './useEmptyBackground';
+
+const DEFAULT_BACKGROUND_ID = 0;
+const EMPTY_BACKGROUND_ID = 15;
+
+describe('useEmptyBackground - hook', () => {
+ describe('returns setEmptyBackground function', () => {
+ it('should not set background to "Empty" if its not available', () => {
+ const { Wrapper, store } = getReduxWrapperWithStore({
+ map: initialMapStateFixture,
+ backgrounds: BACKGROUND_INITIAL_STATE_MOCK,
+ });
+ const { result } = renderHook(() => useEmptyBackground(), { wrapper: Wrapper });
+
+ expect(store.getState().map.data.backgroundId).toBe(DEFAULT_BACKGROUND_ID);
+
+ result.current.setBackgroundtoEmptyIfAvailable();
+
+ expect(store.getState().map.data.backgroundId).toBe(DEFAULT_BACKGROUND_ID);
+ });
+
+ it('should set background to "Empty" if its available', () => {
+ const { Wrapper, store } = getReduxWrapperWithStore({
+ map: initialMapStateFixture,
+ backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+ });
+ const { result } = renderHook(() => useEmptyBackground(), { wrapper: Wrapper });
+
+ expect(store.getState().map.data.backgroundId).toBe(DEFAULT_BACKGROUND_ID);
+
+ result.current.setBackgroundtoEmptyIfAvailable();
+
+ expect(store.getState().map.data.backgroundId).toBe(EMPTY_BACKGROUND_ID);
+ });
+ });
+});
diff --git a/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.ts b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.ts
new file mode 100644
index 00000000..2536fa84
--- /dev/null
+++ b/src/components/Map/Drawer/OverlaysDrawer/GeneralOverlays/OverlayListItem/hooks/useEmptyBackground.ts
@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { emptyBackgroundIdSelector } from '@/redux/backgrounds/background.selectors';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { setMapBackground } from '@/redux/map/map.slice';
+
+type UseEmptyBackgroundReturn = {
+ setBackgroundtoEmptyIfAvailable: () => void;
+};
+
+export const useEmptyBackground = (): UseEmptyBackgroundReturn => {
+ const dispatch = useAppDispatch();
+ const emptyBackgroundId = useAppSelector(emptyBackgroundIdSelector);
+
+ const setBackgroundtoEmptyIfAvailable = useCallback(() => {
+ if (emptyBackgroundId) {
+ dispatch(setMapBackground(emptyBackgroundId));
+ }
+ }, [dispatch, emptyBackgroundId]);
+
+ return { setBackgroundtoEmptyIfAvailable };
+};
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/getOverlayFeatures.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/getOverlayFeatures.ts
index 60a3ea8a..1cb81f70 100644
--- a/src/components/Map/MapViewer/utils/config/overlaysLayer/getOverlayFeatures.ts
+++ b/src/components/Map/MapViewer/utils/config/overlaysLayer/getOverlayFeatures.ts
@@ -1,28 +1,54 @@
import { ZERO } from '@/constants/common';
-import { GetHex3ColorGradientColorWithAlpha } from '@/hooks/useTriColorLerp';
+import type { GetHex3ColorGradientColorWithAlpha } from '@/hooks/useTriColorLerp';
import { OverlayBioEntityRender } from '@/types/OLrendering';
+import { convertDecimalToHex } from '@/utils/convert/convertDecimalToHex';
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
import Feature from 'ol/Feature';
import Polygon, { fromExtent } from 'ol/geom/Polygon';
import { Fill, Style } from 'ol/style';
-export const getOverlayFeatures = (
- bioEntities: OverlayBioEntityRender[],
- pointToProjection: UsePointToProjectionResult,
- getHex3ColorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha,
-): Feature<Polygon>[] =>
- bioEntities.map(entity => {
- const feature = new Feature({
- geometry: fromExtent([
+export const createOverlayGeometryFeature = (
+ [xMin, yMin, xMax, yMax]: number[],
+ color: string,
+): Feature<Polygon> => {
+ const feature = new Feature({ geometry: fromExtent([xMin, yMin, xMax, yMax]) });
+ feature.setStyle(new Style({ fill: new Fill({ color }) }));
+ return feature;
+};
+
+type GetOverlayFeaturesProps = {
+ bioEntities: OverlayBioEntityRender[];
+ pointToProjection: UsePointToProjectionResult;
+ getHex3ColorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha;
+ defaultColor: string;
+};
+
+export const getColorByAvailableProperties = (
+ entity: OverlayBioEntityRender,
+ getHexTricolorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha,
+ defaultColor: string,
+): string => {
+ if (entity.value) {
+ return getHexTricolorGradientColorWithAlpha(entity.value || ZERO);
+ }
+ if (entity.color) {
+ return convertDecimalToHex(entity.color.rgb);
+ }
+ return defaultColor;
+};
+
+export const getOverlayFeatures = ({
+ bioEntities,
+ pointToProjection,
+ getHex3ColorGradientColorWithAlpha,
+ defaultColor,
+}: GetOverlayFeaturesProps): Feature<Polygon>[] =>
+ bioEntities.map(entity =>
+ createOverlayGeometryFeature(
+ [
...pointToProjection({ x: entity.x1, y: entity.y1 }),
...pointToProjection({ x: entity.x2, y: entity.y2 }),
- ]),
- });
- feature.setStyle(
- new Style({
- fill: new Fill({ color: getHex3ColorGradientColorWithAlpha(entity.value || ZERO) }),
- }),
- );
-
- return feature;
- });
+ ],
+ getColorByAvailableProperties(entity, getHex3ColorGradientColorWithAlpha, defaultColor),
+ ),
+ );
diff --git a/src/components/Map/MapViewer/utils/config/overlaysLayer/useOlMapOverlaysLayer.ts b/src/components/Map/MapViewer/utils/config/overlaysLayer/useOlMapOverlaysLayer.ts
index 73fddda3..011dac03 100644
--- a/src/components/Map/MapViewer/utils/config/overlaysLayer/useOlMapOverlaysLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/overlaysLayer/useOlMapOverlaysLayer.ts
@@ -10,12 +10,18 @@ import { getOverlayFeatures } from './getOverlayFeatures';
export const useOlMapOverlaysLayer = (): VectorLayer<VectorSource<Geometry>> => {
const pointToProjection = usePointToProjection();
- const { getHex3ColorGradientColorWithAlpha } = useTriColorLerp();
+ const { getHex3ColorGradientColorWithAlpha, defaultColorHex } = useTriColorLerp();
const bioEntities = useAppSelector(overlayBioEntitiesForCurrentModelSelector);
const features = useMemo(
- () => getOverlayFeatures(bioEntities, pointToProjection, getHex3ColorGradientColorWithAlpha),
- [bioEntities, getHex3ColorGradientColorWithAlpha, pointToProjection],
+ () =>
+ getOverlayFeatures({
+ bioEntities,
+ pointToProjection,
+ getHex3ColorGradientColorWithAlpha,
+ defaultColor: defaultColorHex,
+ }),
+ [bioEntities, getHex3ColorGradientColorWithAlpha, pointToProjection, defaultColorHex],
);
const vectorSource = useMemo(() => {
diff --git a/src/constants/hexColors.ts b/src/constants/hexColors.ts
new file mode 100644
index 00000000..1a81cfbc
--- /dev/null
+++ b/src/constants/hexColors.ts
@@ -0,0 +1 @@
+export const WHITE_HEX_OPACITY_0 = '#00000000';
diff --git a/src/hooks/useTriColorLerp.ts b/src/hooks/useTriColorLerp.ts
index aeff150a..f872b09c 100644
--- a/src/hooks/useTriColorLerp.ts
+++ b/src/hooks/useTriColorLerp.ts
@@ -1,24 +1,30 @@
+import { useCallback } from 'react';
+import { WHITE_HEX_OPACITY_0 } from '@/constants/hexColors';
import {
maxColorValSelector,
minColorValSelector,
neutralColorValSelector,
overlayOpacitySelector,
+ simpleColorValSelector,
} from '@/redux/configuration/configuration.selectors';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { getHexTricolorGradientColorWithAlpha } from '@/utils/convert/getHexTricolorGradientColorWithAlpha';
-import { useCallback } from 'react';
+import { ONE } from '@/constants/common';
+import { addAlphaToHexString } from '../utils/convert/addAlphaToHexString';
export type GetHex3ColorGradientColorWithAlpha = (position: number) => string;
type UseTriColorLerpReturn = {
getHex3ColorGradientColorWithAlpha: GetHex3ColorGradientColorWithAlpha;
+ defaultColorHex: string;
};
export const useTriColorLerp = (): UseTriColorLerpReturn => {
const minColorValHexString = useAppSelector(minColorValSelector) || '';
const maxColorValHexString = useAppSelector(maxColorValSelector) || '';
const neutralColorValHexString = useAppSelector(neutralColorValSelector) || '';
- const overlayOpacityValue = useAppSelector(overlayOpacitySelector) || '';
+ const overlayOpacityValue = useAppSelector(overlayOpacitySelector) || ONE;
+ const simpleColorValue = useAppSelector(simpleColorValSelector) || WHITE_HEX_OPACITY_0;
const getHex3ColorGradientColorWithAlpha = useCallback(
(position: number) =>
@@ -32,5 +38,7 @@ export const useTriColorLerp = (): UseTriColorLerpReturn => {
[minColorValHexString, neutralColorValHexString, maxColorValHexString, overlayOpacityValue],
);
- return { getHex3ColorGradientColorWithAlpha };
+ const defaultColorHex = addAlphaToHexString(simpleColorValue, Number(overlayOpacityValue));
+
+ return { getHex3ColorGradientColorWithAlpha, defaultColorHex };
};
diff --git a/src/models/fixtures/overlayBioEntityFixture.ts b/src/models/fixtures/overlayBioEntityFixture.ts
new file mode 100644
index 00000000..da0c6da6
--- /dev/null
+++ b/src/models/fixtures/overlayBioEntityFixture.ts
@@ -0,0 +1,10 @@
+import { ZOD_SEED } from '@/constants';
+import { z } from 'zod';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { createFixture } from 'zod-fixture';
+import { overlayBioEntitySchema } from '../overlayBioEntitySchema';
+
+export const overlayBioEntityFixture = createFixture(z.array(overlayBioEntitySchema), {
+ seed: ZOD_SEED,
+ array: { min: 3, max: 3 },
+});
diff --git a/src/models/mocks/modelsMock.ts b/src/models/mocks/modelsMock.ts
index 96cd8bf9..5254ae65 100644
--- a/src/models/mocks/modelsMock.ts
+++ b/src/models/mocks/modelsMock.ts
@@ -457,3 +457,21 @@ export const MODELS_MOCK_SHORT: MapModel[] = [
maxZoom: 5,
},
];
+
+export const CORE_PD_MODEL_MOCK: MapModel = {
+ idObject: 5053,
+ width: 26779.25,
+ height: 13503.0,
+ defaultCenterX: null,
+ defaultCenterY: null,
+ description: '',
+ name: 'Core PD map',
+ defaultZoomLevel: null,
+ tileSize: 256,
+ references: [],
+ authors: [],
+ creationDate: null,
+ modificationDates: [],
+ minZoom: 2,
+ maxZoom: 9,
+};
diff --git a/src/redux/backgrounds/background.selectors.ts b/src/redux/backgrounds/background.selectors.ts
index 596301e1..7c3d5924 100644
--- a/src/redux/backgrounds/background.selectors.ts
+++ b/src/redux/backgrounds/background.selectors.ts
@@ -36,3 +36,12 @@ export const currentBackgroundImagePathSelector = createSelector(
currentBackgroundImageSelector,
image => (image ? image.path : ''),
);
+
+const EMPTY_BACKGROUND_NAME = 'Empty';
+
+export const emptyBackgroundIdSelector = createSelector(backgroundsDataSelector, backgrounds => {
+ const emptyBackground = backgrounds?.find(
+ background => background.name === EMPTY_BACKGROUND_NAME,
+ );
+ return emptyBackground?.id;
+});
diff --git a/src/redux/configuration/configuration.selectors.ts b/src/redux/configuration/configuration.selectors.ts
index cb54cee2..7a694a44 100644
--- a/src/redux/configuration/configuration.selectors.ts
+++ b/src/redux/configuration/configuration.selectors.ts
@@ -6,6 +6,7 @@ import {
MIN_COLOR_VAL_NAME_ID,
NEUTRAL_COLOR_VAL_NAME_ID,
OVERLAY_OPACITY_NAME_ID,
+ SIMPLE_COLOR_VAL_NAME_ID,
} from './configuration.constants';
const configurationSelector = createSelector(rootSelector, state => state.configuration);
@@ -31,3 +32,8 @@ export const overlayOpacitySelector = createSelector(
configurationSelector,
state => configurationAdapterSelectors.selectById(state, OVERLAY_OPACITY_NAME_ID)?.value,
);
+
+export const simpleColorValSelector = createSelector(
+ configurationSelector,
+ state => configurationAdapterSelectors.selectById(state, SIMPLE_COLOR_VAL_NAME_ID)?.value,
+);
diff --git a/src/redux/overlayBioEntity/overlayBioEntity.utils.ts b/src/redux/overlayBioEntity/overlayBioEntity.utils.ts
index b4231f70..b875e1bb 100644
--- a/src/redux/overlayBioEntity/overlayBioEntity.utils.ts
+++ b/src/redux/overlayBioEntity/overlayBioEntity.utils.ts
@@ -18,6 +18,7 @@ export const parseOverlayBioEntityToOlRenderingFormat = (
height: entity.left.height,
value: entity.right.value,
overlayId,
+ color: entity.right.color,
});
}
return acc;
diff --git a/src/types/OLrendering.ts b/src/types/OLrendering.ts
index 71ce6cdb..3a651659 100644
--- a/src/types/OLrendering.ts
+++ b/src/types/OLrendering.ts
@@ -1,3 +1,5 @@
+import { Color } from './models';
+
export type OverlayBioEntityRender = {
id: number;
modelId: number;
@@ -9,4 +11,5 @@ export type OverlayBioEntityRender = {
height: number;
value: number | null;
overlayId: number;
+ color: Color | null;
};
diff --git a/src/types/models.ts b/src/types/models.ts
index 885c7fa7..017169d8 100644
--- a/src/types/models.ts
+++ b/src/types/models.ts
@@ -2,6 +2,7 @@ import { bioEntityContentSchema } from '@/models/bioEntityContentSchema';
import { bioEntityResponseSchema } from '@/models/bioEntityResponseSchema';
import { bioEntitySchema } from '@/models/bioEntitySchema';
import { chemicalSchema } from '@/models/chemicalSchema';
+import { colorSchema } from '@/models/colorSchema';
import { configurationOptionSchema } from '@/models/configurationOptionSchema';
import { disease } from '@/models/disease';
import { drugSchema } from '@/models/drugSchema';
@@ -39,3 +40,4 @@ export type ElementSearchResult = z.infer<typeof elementSearchResult>;
export type ElementSearchResultType = z.infer<typeof elementSearchResultType>;
export type ConfigurationOption = z.infer<typeof configurationOptionSchema>;
export type OverlayBioEntity = z.infer<typeof overlayBioEntitySchema>;
+export type Color = z.infer<typeof colorSchema>;
diff --git a/src/utils/convert/getHexTricolorGradientColorWithAlpha.ts b/src/utils/convert/getHexTricolorGradientColorWithAlpha.ts
index d142a465..eacefc8d 100644
--- a/src/utils/convert/getHexTricolorGradientColorWithAlpha.ts
+++ b/src/utils/convert/getHexTricolorGradientColorWithAlpha.ts
@@ -1,3 +1,4 @@
+import { WHITE_HEX_OPACITY_0 } from '@/constants/hexColors';
import { interpolateThreeColors } from '../lerp/interpolateThreeColors';
import { addAlphaToHexString } from './addAlphaToHexString';
import { hexToRgb } from './hexToRgb';
@@ -11,8 +12,6 @@ export type GetHexTricolorGradientColorWithAlphaProps = {
position: number;
};
-const WHITE_HEX_OPACITY_0 = '#00000000';
-
export const getHexTricolorGradientColorWithAlpha = ({
leftColor,
middleColor,
diff --git a/src/utils/convert/hexToRgb.test.ts b/src/utils/convert/hexToRgb.test.ts
index dcd10d20..4801c8cc 100644
--- a/src/utils/convert/hexToRgb.test.ts
+++ b/src/utils/convert/hexToRgb.test.ts
@@ -3,7 +3,7 @@ import { expandHexToFullFormatIfItsShorthanded, hexToRgb } from './hexToRgb';
describe('expandHexToFullFormatIfItsShorthanded', () => {
it('should expand short-handed hex string to full format', () => {
const result = expandHexToFullFormatIfItsShorthanded('#abc');
- expect(result).toBe('aabbcc');
+ expect(result).toBe('#aabbcc');
});
it('should not modify full-format hex string', () => {
@@ -13,12 +13,12 @@ describe('expandHexToFullFormatIfItsShorthanded', () => {
it('should handle hex string without leading #', () => {
const result = expandHexToFullFormatIfItsShorthanded('abc');
- expect(result).toBe('aabbcc');
+ expect(result).toBe('#aabbcc');
});
it('should return original string if it does not match short-hand regex', () => {
const result = expandHexToFullFormatIfItsShorthanded('invalid');
- expect(result).toBe('invalid');
+ expect(result).toBe('#invalid');
});
});
diff --git a/src/utils/convert/hexToRgb.ts b/src/utils/convert/hexToRgb.ts
index 316c0c64..e9b4544b 100644
--- a/src/utils/convert/hexToRgb.ts
+++ b/src/utils/convert/hexToRgb.ts
@@ -4,7 +4,10 @@ export const expandHexToFullFormatIfItsShorthanded = (hexString: string): string
const fullHexString = hexString.replace(SHORT_HAND_REGEX, (m, r, g, b) => {
return r + r + g + g + b + b;
});
- return fullHexString;
+ const fullHexStringWithPrefix = fullHexString.startsWith('#')
+ ? fullHexString
+ : `#${fullHexString}`;
+ return fullHexStringWithPrefix;
};
const FULL_HEX_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
diff --git a/todo.txt b/todo.txt
deleted file mode 100644
index e5ee10e4..00000000
--- a/todo.txt
+++ /dev/null
@@ -1,14 +0,0 @@
-- poinformować zespół ze w czw się spóźnię
-- Check adrian PRs
-- ADD ALPHA to hex color
-- render many squares
-- include case with rgb and value fields
-- create store, add dummy data
-- on button click display dummy data
-- exclude rendering reaction for it
-- push PR
-- Fetch data, organise structure for many overlays and turning on and off
-- add few overlays for element
-- push PR
-- add reaction overlays
-- push PR
\ No newline at end of file
--
GitLab