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 839ef138cb6e80ebce57c311ccff3f02673ae10a..d5fca4ab769cec5dda7568752a9c90fc911cd4ea 100644 --- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts +++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseLeftClick/onMapLeftClick.ts @@ -53,7 +53,7 @@ export const onMapLeftClick = const type = featureAtPixel.get('type'); const id = featureAtPixel.get('id'); - if(type === FEATURE_TYPE.ALIAS) { + if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].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 902f7d52763fbb88f768c0e854aa55919800ef6c..d781719b9e915fd73c1accc45948fed57d8832dc 100644 --- a/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts +++ b/src/components/Map/MapViewer/MapViewerVector/listeners/mouseClick/mouseRightClick/onMapRightClick.ts @@ -30,7 +30,7 @@ export const onMapRightClick = const source = layer.getSource(); if (source instanceof VectorSource) { foundFeature = source.getClosestFeatureToCoordinate(coordinate, (feature) => { - return [FEATURE_TYPE.ALIAS, FEATURE_TYPE.REACTION].includes(feature.get('type')); + return [FEATURE_TYPE.ALIAS, FEATURE_TYPE.REACTION, FEATURE_TYPE.GLYPH].includes(feature.get('type')); }); } } @@ -44,7 +44,7 @@ export const onMapRightClick = const type = foundFeature.get('type'); const id = foundFeature.get('id'); - if(type === FEATURE_TYPE.ALIAS) { + if([FEATURE_TYPE.ALIAS, FEATURE_TYPE.GLYPH].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 066712d01a07dfc03dc7d8ab86ebf0b9b9c3d158..dc49f6fd2e09f6770c32a5b1a529661dac3cd3c0 100644 --- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements.ts +++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/processModelElements.ts @@ -31,7 +31,8 @@ export default function processModelElements( modelElements.content.forEach((element: ModelElement) => { if (element.glyph) { const glyph = new Glyph({ - id: element.glyph.id, + elementId: element.id, + glyphId: element.glyph.id, x: element.x, y: element.y, width: element.width, 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 e0235269d1d38a2002ceca0cfd41b4a951528dd2..2f8d4777750896b50556e628bd1ec50b30df3bca 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 @@ -29,7 +29,8 @@ describe('Glyph', () => { pointToProjectionMock = jest.fn().mockReturnValue([10, 20]); props = { - id: 1, + elementId: 1, + glyphId: 1, x: 10, y: 20, width: 32, 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 963a69c4c788ae050d866d4eee54ed5c176e8ce8..ede963f10300e109d54ce1698935aa0f29dc7625 100644 --- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts +++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts @@ -10,9 +10,13 @@ import { BASE_NEW_API_URL } from '@/constants'; import Polygon from 'ol/geom/Polygon'; import { Point } from 'ol/geom'; import { Coordinate } from 'ol/coordinate'; +import { FEATURE_TYPE } from '@/constants/features'; +import getStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStyle'; +import { WHITE_COLOR } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants'; export type GlyphProps = { - id: number; + elementId: number; + glyphId: number; x: number; y: number; width: number; @@ -27,6 +31,8 @@ export default class Glyph { style: Style; + polygonStyle: Style; + width: number; height: number; @@ -43,7 +49,17 @@ export default class Glyph { pointToProjection: UsePointToProjectionResult; - constructor({ id, x, y, width, height, zIndex, pointToProjection, mapInstance }: GlyphProps) { + constructor({ + elementId, + glyphId, + x, + y, + width, + height, + zIndex, + pointToProjection, + mapInstance, + }: GlyphProps) { this.width = width; this.height = height; this.x = x; @@ -66,8 +82,16 @@ export default class Glyph { pointToProjection({ x, y }), ], ]); + this.polygonStyle = getStyle({ + geometry: polygon, + zIndex, + borderColor: { ...WHITE_COLOR, alpha: 0 }, + fillColor: { ...WHITE_COLOR, alpha: 0 }, + }); const iconFeature = new Feature({ geometry: polygon, + id: elementId, + type: FEATURE_TYPE.GLYPH, getImageScale: (resolution: number): number => { if (mapInstance) { return mapInstance.getView().getMinResolution() / resolution; @@ -90,7 +114,7 @@ export default class Glyph { this.style = new Style({ image: new Icon({ anchor: [0, 0], - src: `${BASE_NEW_API_URL}${apiPath.getGlyphImage(id)}`, + src: `${BASE_NEW_API_URL}${apiPath.getGlyphImage(glyphId)}`, size: [width, height], }), zIndex, @@ -118,6 +142,6 @@ export default class Glyph { (this.style.getImage() as Icon).setAnchor(anchor); this.style.setGeometry(new Point(coords)); } - return this.style; + return [this.style, this.polygonStyle]; } } diff --git a/src/constants/features.ts b/src/constants/features.ts index 036bfd09e4ae6ad2cf9cbf1ee6172ccc896a5234..7faacd6d9d218caa63921eb66fb1e306ca611d9a 100644 --- a/src/constants/features.ts +++ b/src/constants/features.ts @@ -6,6 +6,7 @@ export const FEATURE_TYPE = { PIN_ICON_COMMENT: 'PIN_ICON_COMMENT', ALIAS: 'ALIAS', REACTION: 'REACTION', + GLYPH: 'GLYPH', } as const; export const PIN_ICON_ANY = [