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 b53e6ee62b0f31e13f674d07cdc944194cbb1a63..5997a743aa0b5c5c1151d4a2cfd6dcd75d96302e 100644 --- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts +++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts @@ -166,7 +166,7 @@ export default abstract class BaseMultiPolygon { protected drawMultiPolygonFeature(mapInstance: MapInstance): void { this.feature = new Feature({ geometry: new MultiPolygon(this.polygons), - getTextScale: (resolution: number): number => { + getScale: (resolution: number): number => { const maxZoom = mapInstance?.getView().get('originalMaxZoom'); if (maxZoom) { const minResolution = mapInstance?.getView().getResolutionForZoom(maxZoom); @@ -185,10 +185,10 @@ export default abstract class BaseMultiPolygon { protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void { const styles: Array<Style> = []; - const getTextScale = feature.get('getTextScale'); - let textScale = 1; - if (getTextScale instanceof Function) { - textScale = getTextScale(resolution); + const getScale = feature.get('getScale'); + let scale = 1; + if (getScale instanceof Function) { + scale = getScale(resolution); } let type: string; @@ -206,7 +206,7 @@ export default abstract class BaseMultiPolygon { } if ( [MAP_ELEMENT_TYPES.MODIFICATION, MAP_ELEMENT_TYPES.TEXT].includes(type) && - textScale * fontSize <= 4 + scale * fontSize <= 4 ) { return; } @@ -215,14 +215,19 @@ export default abstract class BaseMultiPolygon { const textStyle = clonedStyle.getText(); const strokeStyle = clonedStyle.getStroke(); if (type === 'text' && textStyle) { - textStyle.setScale(textScale); + textStyle.setScale(scale); textStyle.setText(text); } if (strokeStyle && lineWidth) { - if (lineWidth * textScale < 0.08 && this.sboTerm !== COMPLEX_SBO_TERM) { + if (lineWidth * scale < 0.08 && this.sboTerm !== COMPLEX_SBO_TERM) { clonedStyle.setStroke(null); } else { - strokeStyle.setWidth(lineWidth * textScale); + strokeStyle.setWidth(lineWidth * scale); + const lineDash = strokeStyle.getLineDash(); + if (lineDash) { + const newLineDash = lineDash.map(width => width * scale); + strokeStyle.setLineDash(newLineDash); + } } } styles.push(clonedStyle); 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 dd8b81dcb77da06649703b9cb128cc71fb22bad4..9a91384f61b9cc86d3e76530e9e95bcf374301bf 100644 --- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts +++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts @@ -20,6 +20,7 @@ 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 getScaledElementStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getScaledElementStyle'; export interface LayerProps { texts: Array<LayerText>; @@ -298,23 +299,19 @@ export default class Layer { } const scale = minResolution / resolution; - const lineWidth = feature.get('lineWidth') * scale; + const lineWidth = feature.get('lineWidth'); const type = feature.get('elementType'); if (type === LAYER_ELEMENT_TYPES.ARROW && scale <= 0.08) { return []; } - let clonedStyle: Style; + if (style instanceof Style) { - clonedStyle = style.clone(); - clonedStyle.getStroke()?.setWidth(lineWidth); - styles.push(clonedStyle); + styles.push(getScaledElementStyle(style, lineWidth, scale)); } else if (Array.isArray(style)) { style.forEach(singleStyle => { if (singleStyle instanceof Style) { - clonedStyle = singleStyle.clone(); - clonedStyle.getStroke()?.setWidth(lineWidth); - styles.push(clonedStyle); + styles.push(getScaledElementStyle(singleStyle, lineWidth, scale)); } }); } 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 c4fc7499db4ae0b3f4e268d01714ba73bc62c61c..f81407649044d907650be43c9c1908023f2cd7da 100644 --- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts +++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts @@ -19,6 +19,7 @@ import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shape import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex'; import { ArrowTypeDict, LineTypeDict } from '@/redux/shapes/shapes.types'; import { FEATURE_TYPE } from '@/constants/features'; +import getScaledElementStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getScaledElementStyle'; export interface ReactionProps { id: number; @@ -332,7 +333,7 @@ export default class Reaction { } const scale = minResolution / resolution; - const lineWidth = feature.get('lineWidth') * scale; + const lineWidth = feature.get('lineWidth'); const type = feature.get('elementType'); const fontSize = feature.get('fontSize'); @@ -344,15 +345,11 @@ export default class Reaction { } if (style instanceof Style) { - style.getStroke()?.setWidth(lineWidth); - style.getText()?.setScale(scale); - styles.push(style); + styles.push(getScaledElementStyle(style, lineWidth, scale)); } else if (Array.isArray(style)) { style.forEach(singleStyle => { if (singleStyle instanceof Style) { - singleStyle.getStroke()?.setWidth(lineWidth); - singleStyle.getText()?.setScale(scale); - styles.push(singleStyle); + styles.push(getScaledElementStyle(singleStyle, lineWidth, scale)); } }); } diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getScaledElementStyle.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getScaledElementStyle.ts new file mode 100644 index 0000000000000000000000000000000000000000..f4a4f77a1cbda590ae52c23d94b63910157ae0bb --- /dev/null +++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getScaledElementStyle.ts @@ -0,0 +1,17 @@ +import Style from 'ol/style/Style'; + +export default function getScaledElementStyle( + style: Style, + lineWidth: number, + scale: number, +): Style { + const clonedStyle = style.clone(); + const lineDash = clonedStyle.getStroke()?.getLineDash(); + if (lineDash) { + const newLineDash = lineDash.map(width => width * scale); + clonedStyle.getStroke()?.setLineDash(newLineDash); + } + clonedStyle.getStroke()?.setWidth(lineWidth * scale); + clonedStyle.getText()?.setScale(scale); + return clonedStyle; +}