Merge branch 'feat/MIN-110-element-background-color-data-overlays' into 'development'

feat(vector-map): disable elements background color when data overlays are visible

Closes MIN-110

See merge request !322

src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements.ts

@@ -74,6 +74,7 @@ export default function processModelElements(
         nameHorizontalAlign: element.nameHorizontalAlign as HorizontalAlign,
         text: element.name,
         fontSize: element.fontSize,
+        overlaysVisible: Boolean(overlaysOrder.length),
         pointToProjection,
         mapInstance,
         vectorSource,

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts

@@ -40,6 +40,7 @@ export interface CompartmentProps {
   nameHorizontalAlign: HorizontalAlign;
   fillColor: Color;
   borderColor: Color;
+  overlaysVisible: boolean;
   pointToProjection: UsePointToProjectionResult;
   mapInstance: MapInstance;
   vectorSource: VectorSource;
@@ -58,6 +59,8 @@ export default abstract class Compartment extends BaseMultiPolygon {
 
   thickness: number;
 
+  overlaysVisible: boolean;
+
   constructor({
     id,
     complexId,
@@ -81,6 +84,7 @@ export default abstract class Compartment extends BaseMultiPolygon {
     nameHorizontalAlign,
     fillColor,
     borderColor,
+    overlaysVisible,
     pointToProjection,
     mapInstance,
     vectorSource,
@@ -116,6 +120,7 @@ export default abstract class Compartment extends BaseMultiPolygon {
     this.outerWidth = outerWidth;
     this.innerWidth = innerWidth;
     this.thickness = thickness;
+    this.overlaysVisible = overlaysVisible;
     this.getCompartmentCoords();
     this.createPolygons();
     this.drawText();
@@ -142,7 +147,9 @@ export default abstract class Compartment extends BaseMultiPolygon {
     this.styles.push(
       new Style({
         geometry: framePolygon,
-        fill: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 128 }) }),
+        fill: this.overlaysVisible
+          ? undefined
+          : getFill({ color: rgbToHex({ ...this.fillColor, alpha: 128 }) }),
         zIndex: this.zIndex,
       }),
     );
@@ -154,7 +161,9 @@ export default abstract class Compartment extends BaseMultiPolygon {
     this.styles.push(
       new Style({
         geometry: outerPolygon,
-        stroke: getStroke({ color: rgbToHex(this.borderColor), width: this.outerWidth }),
+        stroke: this.overlaysVisible
+          ? getStroke({ width: this.outerWidth })
+          : getStroke({ color: rgbToHex(this.borderColor), width: this.outerWidth }),
         zIndex: this.zIndex,
       }),
     );
@@ -166,8 +175,12 @@ export default abstract class Compartment extends BaseMultiPolygon {
     this.styles.push(
       new Style({
         geometry: innerPolygon,
-        stroke: getStroke({ color: rgbToHex(this.borderColor), width: this.innerWidth }),
-        fill: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 9 }) }),
+        stroke: this.overlaysVisible
+          ? getStroke({ width: this.innerWidth })
+          : getStroke({ color: rgbToHex(this.borderColor), width: this.innerWidth }),
+        fill: this.overlaysVisible
+          ? undefined
+          : getFill({ color: rgbToHex({ ...this.fillColor, alpha: 9 }) }),
         zIndex: this.zIndex,
       }),
     );

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.test.ts

@@ -65,6 +65,7 @@ describe('CompartmentCircle', () => {
       nameWidth: 40,
       nameVerticalAlign: 'MIDDLE',
       nameHorizontalAlign: 'CENTER',
+      overlaysVisible: false,
       pointToProjection: jest.fn(),
       mapInstance,
       vectorSource: new VectorSource(),

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.ts

@@ -40,6 +40,7 @@ export type CompartmentCircleProps = {
   nameWidth: number;
   nameVerticalAlign?: VerticalAlign;
   nameHorizontalAlign?: HorizontalAlign;
+  overlaysVisible: boolean;
   pointToProjection: UsePointToProjectionResult;
   mapInstance: MapInstance;
   vectorSource: VectorSource;
@@ -71,6 +72,7 @@ export default class CompartmentCircle extends Compartment {
     nameWidth,
     nameVerticalAlign = 'MIDDLE',
     nameHorizontalAlign = 'CENTER',
+    overlaysVisible,
     pointToProjection,
     mapInstance,
     vectorSource,
@@ -100,6 +102,7 @@ export default class CompartmentCircle extends Compartment {
       nameHorizontalAlign,
       fillColor,
       borderColor,
+      overlaysVisible,
       pointToProjection,
       mapInstance,
       vectorSource,

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.test.ts

@@ -63,6 +63,7 @@ describe('CompartmentPathway', () => {
       nameWidth: 40,
       nameVerticalAlign: 'MIDDLE',
       nameHorizontalAlign: 'CENTER',
+      overlaysVisible: false,
       pointToProjection: jest.fn(() => [10, 10]),
       mapInstance,
       vectorSource: new VectorSource(),

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts

@@ -41,6 +41,7 @@ export type CompartmentPathwayProps = {
   nameWidth: number;
   nameVerticalAlign?: VerticalAlign;
   nameHorizontalAlign?: HorizontalAlign;
+  overlaysVisible: boolean;
   pointToProjection: UsePointToProjectionResult;
   mapInstance: MapInstance;
   vectorSource: VectorSource;
@@ -51,6 +52,8 @@ export type CompartmentPathwayProps = {
 export default class CompartmentPathway extends BaseMultiPolygon {
   outerWidth: number;
 
+  overlaysVisible: boolean;
+
   constructor({
     id,
     complexId,
@@ -72,6 +75,7 @@ export default class CompartmentPathway extends BaseMultiPolygon {
     nameWidth,
     nameVerticalAlign = 'MIDDLE',
     nameHorizontalAlign = 'CENTER',
+    overlaysVisible,
     pointToProjection,
     mapInstance,
     vectorSource,
@@ -105,6 +109,7 @@ export default class CompartmentPathway extends BaseMultiPolygon {
       mapSize,
     });
     this.outerWidth = outerWidth;
+    this.overlaysVisible = overlaysVisible;
     this.createPolygons();
     this.drawText();
     this.drawMultiPolygonFeature(mapInstance);
@@ -131,7 +136,7 @@ export default class CompartmentPathway extends BaseMultiPolygon {
       getStyle({
         geometry: compartmentPolygon,
         borderColor: this.borderColor,
-        fillColor: { ...this.fillColor, alpha: 9 },
+        fillColor: this.overlaysVisible ? undefined : { ...this.fillColor, alpha: 9 },
         lineWidth: this.outerWidth,
         zIndex: this.zIndex,
       }),

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.test.ts

@@ -63,6 +63,7 @@ describe('CompartmentSquare', () => {
       nameWidth: 40,
       nameVerticalAlign: 'MIDDLE',
       nameHorizontalAlign: 'CENTER',
+      overlaysVisible: false,
       pointToProjection: jest.fn(),
       mapInstance,
       vectorSource: new VectorSource(),

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.ts

@@ -39,6 +39,7 @@ export type CompartmentSquareProps = {
   nameWidth: number;
   nameVerticalAlign?: VerticalAlign;
   nameHorizontalAlign?: HorizontalAlign;
+  overlaysVisible: boolean;
   pointToProjection: UsePointToProjectionResult;
   mapInstance: MapInstance;
   vectorSource: VectorSource;
@@ -70,6 +71,7 @@ export default class CompartmentSquare extends Compartment {
     nameWidth,
     nameVerticalAlign = 'MIDDLE',
     nameHorizontalAlign = 'CENTER',
+    overlaysVisible,
     pointToProjection,
     mapInstance,
     vectorSource,
@@ -99,6 +101,7 @@ export default class CompartmentSquare extends Compartment {
       nameHorizontalAlign,
       fillColor,
       borderColor,
+      overlaysVisible,
       pointToProjection,
       mapInstance,
       vectorSource,

src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts

@@ -299,7 +299,7 @@ export default class MapElement extends BaseMultiPolygon {
       const elementStyle = getStyle({
         geometry: elementPolygon,
         borderColor: this.borderColor,
-        fillColor: this.overlays.length ? undefined : this.fillColor,
+        fillColor: this.overlaysOrder.length ? undefined : this.fillColor,
         lineWidth: this.lineWidth,
         lineDash: this.lineDash,
         zIndex: this.zIndex,