diff --git a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants.ts
index 0cd65f9a6ffe685712f4660eaa27850603cfea75..79fab6da0b00d8ecbf3ea959d8fc8a964e105f7f 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/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
index be79fe07dfc43ed838dfff4ce47ff2003f411e44..d426caaa9a22ef47fbee37ca21295d91b8324e38 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts
@@ -27,7 +27,15 @@ export const onMapLeftClick =
let featureAtPixel: FeatureLike | undefined;
mapInstance.forEachFeatureAtPixel(pixel, (feature, ) => {
- if(feature.get('id') && [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('zIndex') >= 0) {
+ if(
+ feature.get('id') &&
+ (
+ feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled') ||
+ [...Object.values(FEATURE_TYPE)].includes(feature.get('type')) && feature.get('type') !== FEATURE_TYPE.COMPARTMENT
+ )
+ && feature.get('zIndex') >= 0
+ && !feature.get('hidden')
+ ) {
featureAtPixel = feature;
return true;
}
@@ -53,7 +61,7 @@ export const onMapLeftClick =
const type = featureAtPixel.get('type');
const id = featureAtPixel.get('id');
- if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].includes(type)) {
+ if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
await leftClickHandleAlias(dispatch)(featureAtPixel, modelId);
} else if (type === FEATURE_TYPE.REACTION) {
clickHandleReaction(dispatch)(modelElements, reactions, id, modelId);
diff --git a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
index 38a214a58252060d254fa77845db4cc670771ed7..5a6429c6031da2a234471d5f42c58d43c201a8d7 100644
--- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts
@@ -31,11 +31,14 @@ export const onMapRightClick =
const source = layer.getSource();
if (source instanceof VectorSource) {
foundFeature = source.getClosestFeatureToCoordinate(coordinate, (feature) => {
- return [
- FEATURE_TYPE.ALIAS,
- FEATURE_TYPE.REACTION,
- FEATURE_TYPE.GLYPH
- ].includes(feature.get('type')) && feature.get('zIndex') >= 0;
+ return (
+ feature.get('type') === FEATURE_TYPE.COMPARTMENT && feature.get('filled') ||
+ [
+ FEATURE_TYPE.ALIAS,
+ FEATURE_TYPE.REACTION,
+ FEATURE_TYPE.GLYPH
+ ].includes(feature.get('type'))
+ ) && feature.get('zIndex') >= 0 && !feature.get('hidden');
});
}
}
@@ -49,7 +52,7 @@ export const onMapRightClick =
const type = foundFeature.get('type');
const id = foundFeature.get('id');
- if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].includes(type)) {
+ if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH, FEATURE_TYPE.COMPARTMENT].includes(type)) {
const modelElement = modelElements.find(element => element.id === id);
if(!modelElement) {
return;
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 ec32f17ca2619d61dab29a3bba9dea1da02cab11..c92820ed42c913c231fa006e2177da80b9f06490 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/config/reactionsLayer/useOlMapReactionsLayer.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
index 4e289297b127de56bb0bbda73f398ae625ef2383..7c10c120fa017a3972d9b5b71b0f7ba5c20887e6 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
@@ -39,6 +39,8 @@ import MarkerOverlay from '@/components/Map/MapViewer/MapViewerVector/utils/shap
import processModelElements from '@/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements';
import useDebouncedValue from '@/utils/useDebouncedValue';
import { mapBackgroundTypeSelector, mapDataSizeSelector } from '@/redux/map/map.selectors';
+import MapBackgroundsEnum from '@/redux/map/map.enums';
+import { setMapBackgroundType } from '@/redux/map/map.slice';
export const useOlMapReactionsLayer = ({
mapInstance,
@@ -74,6 +76,12 @@ export const useOlMapReactionsLayer = ({
}
}, [currentModelId, dispatch]);
+ useEffect(() => {
+ if (overlaysOrder.length) {
+ dispatch(setMapBackgroundType(MapBackgroundsEnum.NETWORK));
+ }
+ }, [dispatch, overlaysOrder]);
+
const groupedElementsOverlays = useMemo(() => {
const elementsBioEntitesOverlay = debouncedBioEntities.filter(
bioEntity => bioEntity.type !== 'line',
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 fab805158ec53aa81d2eefe3d88f359949f6620f..ff0f8e35266f36e552ef40dea1a4c07f7603b5e2 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 84bbba026d0215a47d00ddeb9e1e00b9decd034a..b851e10ae7959d90a2117167e6343cc35d664570 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 3c9f586af1f3a18e68f97a7929f107eecd48fffa..d51153e65ff94ef08906849a27a6706df801f3b0 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/Glyph.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.test.ts
index 2f8d4777750896b50556e628bd1ec50b30df3bca..f2fc4d4d3422efc7fae549446118bc37c8da47da 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.test.ts
@@ -1,13 +1,12 @@
/* eslint-disable no-magic-numbers */
import { Feature, Map, View } from 'ol';
-import { Style, Icon } from 'ol/style';
+import { Style } from 'ol/style';
import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection';
import Glyph, {
GlyphProps,
} from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph';
import { MapInstance } from '@/types/map';
import Polygon from 'ol/geom/Polygon';
-import { BASE_NEW_API_URL } from '@/constants';
describe('Glyph', () => {
let props: GlyphProps;
@@ -57,9 +56,6 @@ describe('Glyph', () => {
]);
expect(glyph.style).toBeInstanceOf(Style);
- const image = glyph.style.getImage() as Icon;
- expect(image).toBeInstanceOf(Icon);
- expect(image.getSrc()).toBe(`${BASE_NEW_API_URL}projects/pdmap_appu_test/glyphs/1/fileContent`);
});
it('should scale image based on map resolution', () => {
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
index 603184469b16dda895e68718027da2f231509019..41cc21a6bca428fb2c11b8c58e08b2bc8dc90796 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
@@ -29,7 +29,9 @@ export type GlyphProps = {
export default class Glyph {
feature: Feature<Polygon>;
- style: Style;
+ style: Style = new Style({});
+
+ imageScale: number = 1;
polygonStyle: Style;
@@ -88,7 +90,7 @@ export default class Glyph {
borderColor: { ...WHITE_COLOR, alpha: 0 },
fillColor: { ...WHITE_COLOR, alpha: 0 },
});
- const iconFeature = new Feature({
+ this.feature = new Feature({
geometry: polygon,
id: elementId,
type: FEATURE_TYPE.GLYPH,
@@ -112,16 +114,23 @@ export default class Glyph {
return { anchor: [anchorX, anchorY], coords: center || [0, 0] };
},
});
- this.style = new Style({
- image: new Icon({
- anchor: [0, 0],
- src: `${BASE_NEW_API_URL}${apiPath.getGlyphImage(glyphId)}`,
- size: [width, height],
- }),
- zIndex,
- });
- iconFeature.setStyle(this.getStyle.bind(this));
- this.feature = iconFeature;
+
+ const img = new Image();
+ img.onload = (): void => {
+ const imageWidth = img.naturalWidth;
+ const imageHeight = img.naturalHeight;
+ this.imageScale = width / imageWidth;
+ this.style = new Style({
+ image: new Icon({
+ anchor: [0, 0],
+ img,
+ size: [imageWidth, imageHeight],
+ }),
+ zIndex,
+ });
+ this.feature.setStyle(this.getStyle.bind(this));
+ };
+ img.src = `${BASE_NEW_API_URL}${apiPath.getGlyphImage(glyphId)}`;
}
protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
@@ -139,7 +148,7 @@ export default class Glyph {
coords = anchorAndCoords.coords;
}
if (this.style.getImage()) {
- this.style.getImage()?.setScale(imageScale * this.pixelRatio);
+ this.style.getImage()?.setScale(imageScale * this.pixelRatio * this.imageScale);
(this.style.getImage() as Icon).setAnchor(anchor);
this.style.setGeometry(new Point(coords));
}
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 a3c6c67997f8c3ced49597d5f4790b6cb58f3e3b..9dbf5336fcfc8dd1293ca55c43a01ccbfc86f258 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 fc005145c7b5eada1ad268fb2e2d2cefad5522d1..6ef7a733034a74132b8562a6993aea0535c08b13 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 9a91384f61b9cc86d3e76530e9e95bcf374301bf..ec4cab79d3fe8b6383b9bb32abb341d4812cb873 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,
});
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
index 0dd2370db107794ff8ea7be3852fa3e6b43a4518..433108642e9a9a08fa5044005c8b4cbb20c07f30 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
@@ -340,9 +340,14 @@ export default class Reaction {
}
protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+ if (!(feature instanceof Feature)) {
+ return undefined;
+ }
if (this.isAnyOfElementsHidden()) {
+ feature.set('hidden', true);
return undefined;
}
+ feature.set('hidden', false);
const styles: Array<Style> = [];
const maxZoom = this.mapInstance?.getView().get('originalMaxZoom');
diff --git a/src/constants/features.ts b/src/constants/features.ts
index 7faacd6d9d218caa63921eb66fb1e306ca611d9a..5266a7137c184bbb7ddb73d04c012e27f47680b2 100644
--- a/src/constants/features.ts
+++ b/src/constants/features.ts
@@ -7,6 +7,7 @@ export const FEATURE_TYPE = {
ALIAS: 'ALIAS',
REACTION: 'REACTION',
GLYPH: 'GLYPH',
+ COMPARTMENT: 'COMPARTMENT',
} as const;
export const PIN_ICON_ANY = [