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 2eaeebda4dd16f78781b9facfcde3a9f6e8b8cc7..ec32f17ca2619d61dab29a3bba9dea1da02cab11 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 a74beed43155e5da2edf7641e5116d1142f68454..84bbba026d0215a47d00ddeb9e1e00b9decd034a 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 376e0408f23fb0f6692e1eda9c0e39fde8307596..876dd762cb714b5cefe1d6d8c1ce1599c8b46a54 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 bd80b0958be5bb639c9bfb6296b7b211dc63cd7b..3dd381839b3031d3ab651eba15a991983c6631a9 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 ef3d8cde19da7f38a0a7746bcb378e660153165c..5e1df8106f1107df13050f142c98190e7ea55248 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 92bb522d23eb04a138c1780ac37a392cdb804cea..3c9f586af1f3a18e68f97a7929f107eecd48fffa 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 ac2f9d5231589c1e1bbfa632c19f0493fa437f31..c7721148a489219765bcb0936193a8514fb484fd 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 f5f1df8147bf3c07e02487c5c114f65f2525fd6b..b4905d61d4188aaea63fbb78ea20f314b581f7d0 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 826e5fca10286f45e954e2e98b23daaa035d072b..fc005145c7b5eada1ad268fb2e2d2cefad5522d1 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,