From 29f1f9d001a22cc5c095494c4e06866e5c21eb70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mi=C5=82osz=20Grocholewski?= <m.grocholewski@atcomp.pl>
Date: Wed, 27 Nov 2024 11:19:19 +0100
Subject: [PATCH] feat(vector-map): disable elements background color when data
overlays are visible
---
.../reactionsLayer/processModelElements.ts | 1 +
.../utils/shapes/elements/Compartment.ts | 21 +++++++++++++++----
.../shapes/elements/CompartmentCircle.test.ts | 1 +
.../shapes/elements/CompartmentCircle.ts | 3 +++
.../elements/CompartmentPathway.test.ts | 1 +
.../shapes/elements/CompartmentPathway.ts | 7 ++++++-
.../shapes/elements/CompartmentSquare.test.ts | 1 +
.../shapes/elements/CompartmentSquare.ts | 3 +++
.../utils/shapes/elements/MapElement.ts | 2 +-
9 files changed, 34 insertions(+), 6 deletions(-)
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 2eaeebda..ec32f17c 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements.ts
+++ b/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,
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 a74beed4..84bbba02 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
+++ b/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,
}),
);
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.test.ts
index 376e0408..876dd762 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.test.ts
+++ b/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(),
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.ts
index bd80b095..3dd38183 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.ts
+++ b/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,
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.test.ts
index ef3d8cde..5e1df810 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.test.ts
+++ b/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(),
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 92bb522d..3c9f586a 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts
+++ b/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,
}),
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.test.ts
index ac2f9d52..c7721148 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.test.ts
+++ b/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(),
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.ts
index f5f1df81..b4905d61 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.ts
+++ b/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,
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 826e5fca..fc005145 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
+++ b/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,
--
GitLab