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 553893c422c52f5565777cfc798ec7b4d5d8c0cf..dd541d11a2fa883efd7a50da87b7d5f8ed5a9a77 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
@@ -22,7 +22,6 @@ import {
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
import VectorSource from 'ol/source/Vector';
import MapBackgroundsEnum from '@/redux/map/map.enums';
-import { Extent } from 'ol/extent';
import { MapSize } from '@/redux/map/map.types';
import getCoverStyles from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getCoverStyles';
import handleSemanticView from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/handleSemanticView';
@@ -105,6 +104,14 @@ export default abstract class BaseMultiPolygon {
styles: Array<Style> = [];
+ overlaysPolygons: Array<Polygon> = [];
+
+ overlaysStyles: Array<Style> = [];
+
+ coverStyle: Style | undefined;
+
+ coverStrokeStyle: Stroke | undefined;
+
feature: Feature = new Feature();
pointToProjection: UsePointToProjectionResult;
@@ -216,7 +223,7 @@ export default abstract class BaseMultiPolygon {
protected drawMultiPolygonFeature(mapInstance: MapInstance): void {
this.feature = new Feature({
- geometry: new MultiPolygon(this.polygons),
+ geometry: new MultiPolygon([...this.polygons, ...this.overlaysPolygons]),
zIndex: this.zIndex,
getMapExtent: (resolution: number): [number, number, number, number] | undefined => {
if (this.mapExtentCache.has(resolution)) {
@@ -253,15 +260,38 @@ export default abstract class BaseMultiPolygon {
this.feature.setStyle(this.getStyle.bind(this));
}
- protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
- if (!(feature instanceof Feature)) {
- return undefined;
+ protected setStrokeStyle(scale: number, style: Style, strokeStyle: Stroke): void {
+ if (
+ !this.overlaysVisible &&
+ scale < OUTLINE_CUTOFF_SCALE &&
+ !COMPLEX_SBO_TERMS.includes(this.sboTerm) &&
+ this.type !== MAP_ELEMENT_TYPES.COMPARTMENT
+ ) {
+ style.setStroke(null);
+ } else {
+ style.setStroke(getScaledStrokeStyle(strokeStyle, scale));
}
+ }
+
+ protected processOverlayStyle(scale: number): Array<Style> {
+ let strokeStyle: Stroke | undefined;
const styles: Array<Style> = [];
- const scale = this.minResolution / resolution;
- let cover = false;
- let largestExtent: Extent | null;
+ this.overlaysStyles.forEach(style => {
+ const styleGeometry = style.getGeometry();
+ if (styleGeometry instanceof Polygon) {
+ strokeStyle = styleGeometry.get('strokeStyle');
+ }
+
+ if (strokeStyle) {
+ this.setStrokeStyle(scale, style, strokeStyle);
+ }
+ styles.push(style);
+ });
+ return styles;
+ }
+
+ protected processElementStyles(scale: number): Array<Style> {
if (
this.complexId &&
!COMPLEX_SBO_TERMS.includes(this.sboTerm) &&
@@ -270,54 +300,17 @@ export default abstract class BaseMultiPolygon {
return [];
}
- let hide = false;
- if (this.mapBackgroundType === MapBackgroundsEnum.SEMANTIC && scale < TEXT_CUTOFF_SCALE) {
- const semanticViewData = handleSemanticView({
- vectorSource: this.vectorSource,
- feature,
- resolution,
- sboTerm: this.sboTerm,
- compartmentId: this.compartmentId,
- complexId: this.complexId,
- });
- cover = semanticViewData.cover;
- hide = semanticViewData.hide;
- largestExtent = semanticViewData.largestExtent;
-
- if (hide) {
- return undefined;
- }
- }
-
- let type: string;
- let coverStyle: Style | undefined;
let strokeStyle: Stroke | undefined;
+ let type: string;
+ const styles: Array<Style> = [];
this.styles.forEach(style => {
const styleGeometry = style.getGeometry();
if (styleGeometry instanceof Polygon) {
type = styleGeometry.get('type');
- coverStyle = styleGeometry.get('coverStyle');
strokeStyle = styleGeometry.get('strokeStyle');
}
- if (cover) {
- if (coverStyle && largestExtent) {
- styles.push(
- ...getCoverStyles({
- coverStyle,
- largestExtent,
- text: this.text,
- scale,
- zIndex: this.zIndex + 100000,
- mapSize: this.mapSize,
- strokeStyle,
- }),
- );
- }
- return;
- }
-
if (
[MAP_ELEMENT_TYPES.MODIFICATION, MAP_ELEMENT_TYPES.TEXT].includes(type) &&
scale < TEXT_CUTOFF_SCALE
@@ -330,19 +323,69 @@ export default abstract class BaseMultiPolygon {
textStyle.setScale(scale);
}
if (strokeStyle) {
- if (
- !this.overlaysVisible &&
- scale < OUTLINE_CUTOFF_SCALE &&
- !COMPLEX_SBO_TERMS.includes(this.sboTerm) &&
- this.type !== MAP_ELEMENT_TYPES.COMPARTMENT
- ) {
- style.setStroke(null);
- } else {
- style.setStroke(getScaledStrokeStyle(strokeStyle, scale));
- }
+ this.setStrokeStyle(scale, style, strokeStyle);
}
styles.push(style);
});
+ return styles;
+ }
+
+ protected processSemanticView(
+ feature: Feature,
+ resolution: number,
+ scale: number,
+ ): { hide: boolean; coverStyle: Array<Style> | null } {
+ let coverStyle = null;
+ const semanticViewData = handleSemanticView({
+ vectorSource: this.vectorSource,
+ feature,
+ resolution,
+ sboTerm: this.sboTerm,
+ compartmentId: this.compartmentId,
+ complexId: this.complexId,
+ });
+ const { cover } = semanticViewData;
+ const { hide } = semanticViewData;
+ const { largestExtent } = semanticViewData;
+
+ if (hide) {
+ return { hide, coverStyle };
+ }
+
+ if (cover && largestExtent && this.coverStyle) {
+ coverStyle = getCoverStyles({
+ coverStyle: this.coverStyle,
+ largestExtent,
+ text: this.text,
+ scale,
+ zIndex: this.zIndex + 100000,
+ mapSize: this.mapSize,
+ strokeStyle: this.coverStrokeStyle,
+ });
+ }
+
+ return { hide, coverStyle };
+ }
+
+ protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+ if (!(feature instanceof Feature)) {
+ return undefined;
+ }
+ const styles: Array<Style> = [];
+ const scale = this.minResolution / resolution;
+
+ if (this.mapBackgroundType === MapBackgroundsEnum.SEMANTIC && scale < TEXT_CUTOFF_SCALE) {
+ const { hide, coverStyle } = this.processSemanticView(feature, resolution, scale);
+ if (hide) {
+ return undefined;
+ }
+ if (coverStyle) {
+ return coverStyle;
+ }
+ }
+
+ styles.push(...this.processOverlayStyle(scale));
+ styles.push(...this.processElementStyles(scale));
return styles;
}
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 987fd2cee18029603d330e2f7512ac7069554ba5..75c519ef4b09f649f7d0217756d44c994fff7bbf 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
@@ -139,16 +139,10 @@ export default abstract class Compartment extends BaseMultiPolygon {
protected createPolygons(): void {
const coverPolygon = new Polygon([this.outerCoords]);
- const coverStyle = new Style({
+ this.coverStyle = new Style({
geometry: coverPolygon,
fill: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 255 }) }),
});
- coverPolygon.set('coverStyle', coverStyle);
- this.styles.push(
- new Style({
- geometry: coverPolygon,
- }),
- );
const framePolygon = new Polygon([this.outerCoords, this.innerCoords]);
framePolygon.set('type', MAP_ELEMENT_TYPES.COMPARTMENT);
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 2850176f0d50cf9617d7fa0ea50bd33aa6732b57..eef5c0f716975c91569ec3053d79a52f2391a918 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts
@@ -133,11 +133,11 @@ export default class CompartmentPathway extends BaseMultiPolygon {
],
]);
compartmentPolygon.set('type', MAP_ELEMENT_TYPES.COMPARTMENT);
- const coverStyle = new Style({
+ this.coverStyle = new Style({
geometry: compartmentPolygon,
fill: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 255 }) }),
});
- compartmentPolygon.set('coverStyle', coverStyle);
+
compartmentPolygon.set(
'strokeStyle',
getStroke({
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 a8ee5425b17bb4ceff214cccd31dcfbca218c891..38b6b16db7194a06f8433b6793015c8373c6cfec 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
@@ -319,12 +319,12 @@ export default class MapElement extends BaseMultiPolygon {
});
elementPolygon.set('strokeStyle', strokeStyle);
if (COMPLEX_SBO_TERMS.includes(this.sboTerm)) {
- const coverStyle = new Style({
+ this.coverStyle = new Style({
geometry: elementPolygon,
fill: getFill({ color: rgbToHex({ ...this.fillColor, alpha: 255 }) }),
stroke: strokeStyle,
});
- elementPolygon.set('coverStyle', coverStyle);
+ this.coverStrokeStyle = strokeStyle;
}
this.polygons.push(elementPolygon);
this.styles.push(elementStyle);
@@ -365,8 +365,8 @@ export default class MapElement extends BaseMultiPolygon {
color,
}),
);
- this.polygons.push(polygon);
- this.styles.push(style);
+ this.overlaysPolygons.push(polygon);
+ this.overlaysStyles.push(style);
});
}
}