diff --git a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts
index 0cd65f9a6ffe685712f4660eaa27850603cfea75..79fab6da0b00d8ecbf3ea959d8fc8a964e105f7f 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 ec32f17ca2619d61dab29a3bba9dea1da02cab11..c92820ed42c913c231fa006e2177da80b9f06490 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 fab805158ec53aa81d2eefe3d88f359949f6620f..ff0f8e35266f36e552ef40dea1a4c07f7603b5e2 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 84bbba026d0215a47d00ddeb9e1e00b9decd034a..b851e10ae7959d90a2117167e6343cc35d664570 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 3c9f586af1f3a18e68f97a7929f107eecd48fffa..d51153e65ff94ef08906849a27a6706df801f3b0 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 a3c6c67997f8c3ced49597d5f4790b6cb58f3e3b..9dbf5336fcfc8dd1293ca55c43a01ccbfc86f258 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 fc005145c7b5eada1ad268fb2e2d2cefad5522d1..6ef7a733034a74132b8562a6993aea0535c08b13 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 9a91384f61b9cc86d3e76530e9e95bcf374301bf..ec4cab79d3fe8b6383b9bb32abb341d4812cb873 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,
});