From 5020277ba85e5b7e28c7dced97dd6e368ef147e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Wed, 27 Nov 2024 13:44:52 +0100
Subject: [PATCH 1/3] feat(vector-map): add support for compartment mouse click
---
.../mouseClick/mouseLeftClick/onMapLeftClick.ts | 12 ++++++++++--
.../mouseClick/mouseRightClick/onMapRightClick.ts | 15 +++++++++------
.../utils/shapes/reaction/Reaction.ts | 5 +++++
src/constants/features.ts | 1 +
4 files changed, 25 insertions(+), 8 deletions(-)
diff --git a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
index be79fe07..d426caaa 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
@@ -27,7 +27,15 @@ export const onMapLeftClick =
let featureAtPixel: FeatureLike | undefined;
mapInstance.forEachFeatureAtPixel(pixel, (feature, ) => {
- if(feature.get('id') && [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('zIndex') >= 0) {
+ if(
+ feature.get('id') &&
+ (
+ feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled') ||
+ [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('type') !== FEATURE_TYPE.COMPARTMENT
+ )
+ && feature.get('zIndex') >= 0
+ && !feature.get('hidden')
+ ) {
featureAtPixel = feature;
return true;
}
@@ -53,7 +61,7 @@ export const onMapLeftClick =
const type = featureAtPixel.get('type');
const id = featureAtPixel.get('id');
- if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].includes(type)) {
+ if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
await leftClickHandleAlias(dispatch)(featureAtPixel, modelId);
} else if (type === FEATURE_TYPE.REACTION) {
clickHandleReaction(dispatch)(modelElements, reactions, id, modelId);
diff --git a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
index 38a214a5..5a6429c6 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
@@ -31,11 +31,14 @@ export const onMapRightClick =
const source = layer.getSource();
if (source instanceof VectorSource) {
foundFeature = source.getClosestFeatureToCoordinate(coordinate, (feature) => {
- return [
- FEATURE_TYPE.ALIAS,
- FEATURE_TYPE.REACTION,
- FEATURE_TYPE.GLYPH
- ].includes(feature.get('type')) && feature.get('zIndex') >= 0;
+ return (
+ feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled') ||
+ [
+ FEATURE_TYPE.ALIAS,
+ FEATURE_TYPE.REACTION,
+ FEATURE_TYPE.GLYPH
+ ].includes(feature.get('type'))
+ ) && feature.get('zIndex') >= 0 && !feature.get('hidden');
});
}
}
@@ -49,7 +52,7 @@ export const onMapRightClick =
const type = foundFeature.get('type');
const id = foundFeature.get('id');
- if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].includes(type)) {
+ if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
const modelElement = modelElements.find(element => element.id === id);
if(!modelElement) {
return;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
index 0dd2370d..43310864 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
@@ -340,9 +340,14 @@ export default class Reaction {
}
protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+ if (!(feature instanceof Feature)) {
+ return undefined;
+ }
if (this.isAnyOfElementsHidden()) {
+ feature.set('hidden', true);
return undefined;
}
+ feature.set('hidden', false);
const styles: Array<Style> = [];
const maxZoom = this.mapInstance?.getView().get('originalMaxZoom');
diff --git a/src/constants/features.ts b/src/constants/features.ts
index 7faacd6d..5266a713 100644
--- a/src/constants/features.ts
+++ b/src/constants/features.ts
@@ -7,6 +7,7 @@ export const FEATURE_TYPE = {
ALIAS: 'ALIAS',
REACTION: 'REACTION',
GLYPH: 'GLYPH',
+ COMPARTMENT: 'COMPARTMENT',
} as const;
export const PIN_ICON_ANY = [
--
GitLab
From 91a35789cac7b930290bf91daa9096dcdb650a19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Wed, 27 Nov 2024 15:11:58 +0100
Subject: [PATCH 2/3] fix(vector-map-glyph): add image scale to calculate
correct image size and and auto switch map background when overlay is enabled
---
.../reactionsLayer/useOlMapReactionsLayer.ts | 8 +++++
.../utils/shapes/elements/Glyph.test.ts | 6 +---
.../utils/shapes/elements/Glyph.ts | 35 ++++++++++++-------
3 files changed, 31 insertions(+), 18 deletions(-)
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
index 4e289297..7c10c120 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
@@ -39,6 +39,8 @@ import MarkerOverlay from '@/components/Map/MapViewer/MapViewerVector/utils/shap
import processModelElements from '@/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements';
import useDebouncedValue from '@/utils/useDebouncedValue';
import { mapBackgroundTypeSelector, mapDataSizeSelector } from '@/redux/map/map.selectors';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
+import { setMapBackgroundType } from '@/redux/map/map.slice';
export const useOlMapReactionsLayer = ({
mapInstance,
@@ -74,6 +76,12 @@ export const useOlMapReactionsLayer = ({
}
}, [currentModelId, dispatch]);
+ useEffect(() => {
+ if (overlaysOrder.length) {
+ dispatch(setMapBackgroundType(MapBackgroundsEnum.NETWORK));
+ }
+ }, [dispatch, overlaysOrder]);
+
const groupedElementsOverlays = useMemo(() => {
const elementsBioEntitesOverlay = debouncedBioEntities.filter(
bioEntity => bioEntity.type !== 'line',
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.test.ts
index 2f8d4777..f2fc4d4d 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.test.ts
@@ -1,13 +1,12 @@
/* eslint-disable no-magic-numbers */
import { Feature, Map, View } from 'ol';
-import { Style, Icon } from 'ol/style';
+import { Style } from 'ol/style';
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
import Glyph, {
GlyphProps,
} from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph';
import { MapInstance } from '@/types/map';
import Polygon from 'ol/geom/Polygon';
-import { BASE_NEW_API_URL } from '@/constants';
describe('Glyph', () => {
let props: GlyphProps;
@@ -57,9 +56,6 @@ describe('Glyph', () => {
]);
expect(glyph.style).toBeInstanceOf(Style);
- const image = glyph.style.getImage() as Icon;
- expect(image).toBeInstanceOf(Icon);
- expect(image.getSrc()).toBe(`${BASE_NEW_API_URL}projects/pdmap_appu_test/glyphs/1/fileContent`);
});
it('should scale image based on map resolution', () => {
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
index 60318446..41cc21a6 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
@@ -29,7 +29,9 @@ export type GlyphProps = {
export default class Glyph {
feature: Feature<Polygon>;
- style: Style;
+ style: Style = new Style({});
+
+ imageScale: number = 1;
polygonStyle: Style;
@@ -88,7 +90,7 @@ export default class Glyph {
borderColor: { ...WHITE_COLOR, alpha: 0 },
fillColor: { ...WHITE_COLOR, alpha: 0 },
});
- const iconFeature = new Feature({
+ this.feature = new Feature({
geometry: polygon,
id: elementId,
type: FEATURE_TYPE.GLYPH,
@@ -112,16 +114,23 @@ export default class Glyph {
return { anchor: [anchorX, anchorY], coords: center || [0, 0] };
},
});
- this.style = new Style({
- image: new Icon({
- anchor: [0, 0],
- src: `${BASE_NEW_API_URL}${apiPath.getGlyphImage(glyphId)}`,
- size: [width, height],
- }),
- zIndex,
- });
- iconFeature.setStyle(this.getStyle.bind(this));
- this.feature = iconFeature;
+
+ const img = new Image();
+ img.onload = (): void => {
+ const imageWidth = img.naturalWidth;
+ const imageHeight = img.naturalHeight;
+ this.imageScale = width / imageWidth;
+ this.style = new Style({
+ image: new Icon({
+ anchor: [0, 0],
+ img,
+ size: [imageWidth, imageHeight],
+ }),
+ zIndex,
+ });
+ this.feature.setStyle(this.getStyle.bind(this));
+ };
+ img.src = `${BASE_NEW_API_URL}${apiPath.getGlyphImage(glyphId)}`;
}
protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
@@ -139,7 +148,7 @@ export default class Glyph {
coords = anchorAndCoords.coords;
}
if (this.style.getImage()) {
- this.style.getImage()?.setScale(imageScale * this.pixelRatio);
+ this.style.getImage()?.setScale(imageScale * this.pixelRatio * this.imageScale);
(this.style.getImage() as Icon).setAnchor(anchor);
this.style.setGeometry(new Point(coords));
}
--
GitLab
From bdb6166d8bdcaee12c049b7ce6cdf253f9f6deb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Wed, 27 Nov 2024 15:30:03 +0100
Subject: [PATCH 3/3] fix(vector-map): change fill color to transparent and
disable line hiding when overlays are enabled
---
.../MapViewerVector/MapViewerVector.constants.ts | 5 +++++
.../config/reactionsLayer/processModelElements.ts | 4 +++-
.../utils/shapes/elements/BaseMultiPolygon.ts | 11 ++++++++++-
.../utils/shapes/elements/Compartment.ts | 10 +++++++---
.../utils/shapes/elements/CompartmentPathway.ts | 4 +++-
.../utils/shapes/elements/MapElement.test.ts | 1 +
.../utils/shapes/elements/MapElement.ts | 8 ++++++--
.../MapViewerVector/utils/shapes/layer/Layer.ts | 7 +++++--
8 files changed, 40 insertions(+), 10 deletions(-)
diff --git a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts
index 0cd65f9a..79fab6da 100644
--- a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts
@@ -14,6 +14,11 @@ export const BLACK_COLOR: Color = {
rgb: -16777216,
};
+export const TRANSPARENT_COLOR: Color = {
+ alpha: 0,
+ rgb: 0,
+};
+
export const REACTION_ELEMENT_TYPES = {
OPERATOR: 'operator',
SQUARE: 'square',
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements.ts
index ec32f17c..c92820ed 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements.ts
@@ -30,6 +30,7 @@ export default function processModelElements(
mapBackgroundType: number,
mapSize: MapSize,
): Array<MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway | Glyph> {
+ const overlaysVisible = Boolean(overlaysOrder.length);
const validElements: Array<
MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway | Glyph
> = [];
@@ -74,7 +75,7 @@ export default function processModelElements(
nameHorizontalAlign: element.nameHorizontalAlign as HorizontalAlign,
text: element.name,
fontSize: element.fontSize,
- overlaysVisible: Boolean(overlaysOrder.length),
+ overlaysVisible,
pointToProjection,
mapInstance,
vectorSource,
@@ -127,6 +128,7 @@ export default function processModelElements(
bioShapes: shapes,
overlays: groupedElementsOverlays[element.id],
overlaysOrder,
+ overlaysVisible,
getOverlayColor,
mapBackgroundType,
mapSize,
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
index fab80515..ff0f8e35 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
@@ -47,6 +47,7 @@ export interface BaseMapElementProps {
fillColor: Color;
borderColor: Color;
pointToProjection: UsePointToProjectionResult;
+ overlaysVisible: boolean;
vectorSource: VectorSource;
mapBackgroundType: number;
mapSize: MapSize;
@@ -103,6 +104,8 @@ export default abstract class BaseMultiPolygon {
pointToProjection: UsePointToProjectionResult;
+ overlaysVisible: boolean;
+
vectorSource: VectorSource;
mapBackgroundType: number;
@@ -132,6 +135,7 @@ export default abstract class BaseMultiPolygon {
fillColor,
borderColor,
pointToProjection,
+ overlaysVisible,
vectorSource,
mapBackgroundType,
mapSize,
@@ -157,6 +161,7 @@ export default abstract class BaseMultiPolygon {
this.nameHorizontalAlign = nameHorizontalAlign;
this.fillColor = fillColor;
this.borderColor = borderColor;
+ this.overlaysVisible = overlaysVisible;
this.pointToProjection = pointToProjection;
this.vectorSource = vectorSource;
this.mapBackgroundType = mapBackgroundType;
@@ -315,7 +320,11 @@ export default abstract class BaseMultiPolygon {
textStyle.setText(text);
}
if (strokeStyle && lineWidth) {
- if (lineWidth * scale < 0.08 && this.sboTerm !== COMPLEX_SBO_TERM) {
+ if (
+ !this.overlaysVisible &&
+ lineWidth * scale < 0.08 &&
+ this.sboTerm !== COMPLEX_SBO_TERM
+ ) {
clonedStyle.setStroke(null);
} else {
strokeStyle.setWidth(lineWidth * scale);
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
index 84bbba02..b851e10a 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
@@ -13,7 +13,10 @@ import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shape
import getStroke from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStroke';
import { MapInstance } from '@/types/map';
import { Color } from '@/types/models';
-import { MAP_ELEMENT_TYPES } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
+import {
+ MAP_ELEMENT_TYPES,
+ TRANSPARENT_COLOR,
+} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
import VectorSource from 'ol/source/Vector';
import { MapSize } from '@/redux/map/map.types';
@@ -113,6 +116,7 @@ export default abstract class Compartment extends BaseMultiPolygon {
fillColor,
borderColor,
pointToProjection,
+ overlaysVisible,
vectorSource,
mapBackgroundType,
mapSize,
@@ -148,7 +152,7 @@ export default abstract class Compartment extends BaseMultiPolygon {
new Style({
geometry: framePolygon,
fill: this.overlaysVisible
- ? undefined
+ ? getFill({ color: rgbToHex(TRANSPARENT_COLOR) })
: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 128 }) }),
zIndex: this.zIndex,
}),
@@ -179,7 +183,7 @@ export default abstract class Compartment extends BaseMultiPolygon {
? getStroke({ width: this.innerWidth })
: getStroke({ color: rgbToHex(this.borderColor), width: this.innerWidth }),
fill: this.overlaysVisible
- ? undefined
+ ? getFill({ color: rgbToHex(TRANSPARENT_COLOR) })
: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 9 }) }),
zIndex: this.zIndex,
}),
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts
index 3c9f586a..d51153e6 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts
@@ -8,6 +8,7 @@ import {
import {
BLACK_COLOR,
MAP_ELEMENT_TYPES,
+ TRANSPARENT_COLOR,
WHITE_COLOR,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
import Polygon from 'ol/geom/Polygon';
@@ -104,6 +105,7 @@ export default class CompartmentPathway extends BaseMultiPolygon {
fillColor,
borderColor,
pointToProjection,
+ overlaysVisible,
vectorSource,
mapBackgroundType,
mapSize,
@@ -136,7 +138,7 @@ export default class CompartmentPathway extends BaseMultiPolygon {
getStyle({
geometry: compartmentPolygon,
borderColor: this.borderColor,
- fillColor: this.overlaysVisible ? undefined : { ...this.fillColor, alpha: 9 },
+ fillColor: this.overlaysVisible ? TRANSPARENT_COLOR : { ...this.fillColor, alpha: 9 },
lineWidth: this.outerWidth,
zIndex: this.zIndex,
}),
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.test.ts
index a3c6c679..9dbf5336 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.test.ts
@@ -66,6 +66,7 @@ describe('MapElement', () => {
nameHorizontalAlign: 'CENTER',
pointToProjection: jest.fn(),
mapInstance,
+ overlaysVisible: false,
vectorSource: new VectorSource(),
getOverlayColor: (): string => '#ffffff',
mapBackgroundType: MapBackgroundsEnum.SEMANTIC,
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
index fc005145..6ef7a733 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
@@ -14,6 +14,7 @@ import {
import {
BLACK_COLOR,
MAP_ELEMENT_TYPES,
+ TRANSPARENT_COLOR,
WHITE_COLOR,
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
import BaseMultiPolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon';
@@ -65,6 +66,7 @@ export type MapElementProps = {
modifications?: Array<Modification>;
overlays?: Array<OverlayBioEntityRender>;
overlaysOrder?: Array<OverlayOrder>;
+ overlaysVisible: boolean;
getOverlayColor: GetOverlayBioEntityColorByAvailableProperties;
mapBackgroundType: number;
mapSize: MapSize;
@@ -129,6 +131,7 @@ export default class MapElement extends BaseMultiPolygon {
modifications = [],
overlays = [],
overlaysOrder = [],
+ overlaysVisible,
getOverlayColor,
mapBackgroundType,
mapSize,
@@ -157,6 +160,7 @@ export default class MapElement extends BaseMultiPolygon {
borderColor,
pointToProjection,
vectorSource,
+ overlaysVisible,
mapBackgroundType,
mapSize,
});
@@ -275,7 +279,7 @@ export default class MapElement extends BaseMultiPolygon {
activityBorderPolygon.set('lineWidth', 1);
const activityBorderStyle = getStyle({
geometry: activityBorderPolygon,
- fillColor: { rgb: 0, alpha: 0 },
+ fillColor: TRANSPARENT_COLOR,
lineDash: [3, 5],
zIndex: this.zIndex,
});
@@ -299,7 +303,7 @@ export default class MapElement extends BaseMultiPolygon {
const elementStyle = getStyle({
geometry: elementPolygon,
borderColor: this.borderColor,
- fillColor: this.overlaysOrder.length ? undefined : this.fillColor,
+ fillColor: this.overlaysVisible ? TRANSPARENT_COLOR : this.fillColor,
lineWidth: this.lineWidth,
lineDash: this.lineDash,
zIndex: this.zIndex,
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts
index 9a91384f..ec4cab79 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts
@@ -19,7 +19,10 @@ import getArrowFeature from '@/components/Map/MapViewer/MapViewerVector/utils/sh
import { FeatureLike } from 'ol/Feature';
import Style from 'ol/style/Style';
import { ArrowTypeDict, LineTypeDict } from '@/redux/shapes/shapes.types';
-import { LAYER_ELEMENT_TYPES } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
+import {
+ LAYER_ELEMENT_TYPES,
+ TRANSPARENT_COLOR,
+} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
import getScaledElementStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getScaledElementStyle';
export interface LayerProps {
@@ -174,7 +177,7 @@ export default class Layer {
const polygonStyle = getStyle({
geometry: polygon,
borderColor: oval.borderColor,
- fillColor: { rgb: 0, alpha: 0 },
+ fillColor: TRANSPARENT_COLOR,
lineWidth: oval.lineWidth,
zIndex: oval.z,
});
--
GitLab