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] 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