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 2b3680b0a29c7a00edce8d9d6a2867c6e5245697..c520efb6b76118e00576523c711810c59e8a0aec 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts
@@ -63,10 +63,11 @@ export const useOlMapReactionsLayer = ({
arrowTypes,
shapes: shape.shapes,
pointToProjection,
+ mapInstance,
});
return reactionObject.features;
});
- }, [arrowTypes, lineTypes, modelReactions, pointToProjection, shapes]);
+ }, [arrowTypes, lineTypes, mapInstance, modelReactions, pointToProjection, shapes]);
const elements: Array<
MapElement | CompartmentCircle | CompartmentSquare | CompartmentPathway | Glyph
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 1852806c020ed102c5bae9743a8a935086475311..05baa60d4460dec6aaf166d6dbcd7f373ef068dc 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts
@@ -73,6 +73,8 @@ export default abstract class BaseMultiPolygon {
polygonsTexts: Array<string> = [];
+ lineWidths: Array<number> = [];
+
feature: Feature = new Feature();
pointToProjection: UsePointToProjectionResult;
@@ -159,26 +161,32 @@ export default abstract class BaseMultiPolygon {
},
});
- this.feature.setStyle(this.styleFunction.bind(this));
+ this.feature.setStyle(this.getStyle.bind(this));
}
- protected styleFunction(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+ protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
const getTextScale = feature.get('getTextScale');
let textScale = 1;
if (getTextScale instanceof Function) {
textScale = getTextScale(resolution);
}
- let index = 0;
+ let textIndex = 0;
+ let strokeIndex = 0;
this.styles.forEach(style => {
if (style.getText()) {
if (this.fontSize * textScale > 4) {
style.getText()?.setScale(textScale);
- style.getText()?.setText(this.polygonsTexts[index]);
- index += 1;
+ style.getText()?.setText(this.polygonsTexts[textIndex]);
+ textIndex += 1;
} else {
style.getText()?.setText(undefined);
}
}
+ if (style.getStroke()) {
+ const lineWidth = this.lineWidths[strokeIndex] * textScale;
+ style.getStroke()?.setWidth(lineWidth);
+ strokeIndex += 1;
+ }
});
return this.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 bdf6026934bf9f8b697885cdd0feb391fcd1f5ad..342529b7f6e19872a8ea146cc453645f0da093ca 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Compartment.ts
@@ -121,6 +121,7 @@ export default abstract class Compartment extends BaseMultiPolygon {
zIndex: this.zIndex,
}),
);
+ this.lineWidths.push(this.outerWidth);
this.polygons.push(outerPolygon);
const innerPolygon = new Polygon([this.innerCoords]);
@@ -132,6 +133,7 @@ export default abstract class Compartment extends BaseMultiPolygon {
zIndex: this.zIndex,
}),
);
+ this.lineWidths.push(this.innerWidth);
this.polygons.push(innerPolygon);
}
}
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.test.ts
index 70fb9ce7bc355513eb4d16875dfb1ab618962962..84c2b16b42b6f4356e37f5b0e61572751d061d97 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentCircle.test.ts
@@ -1,6 +1,6 @@
/* eslint-disable no-magic-numbers */
import { Feature, Map } from 'ol';
-import { Fill, Style, Text } from 'ol/style';
+import { Fill, Stroke, Style, Text } from 'ol/style';
import { Polygon, MultiPolygon } from 'ol/geom';
import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
import getShapePolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getShapePolygon';
@@ -87,7 +87,7 @@ describe('MapElement', () => {
],
]),
);
- (getStroke as jest.Mock).mockReturnValue(new Style());
+ (getStroke as jest.Mock).mockReturnValue(new Stroke());
(getFill as jest.Mock).mockReturnValue(new Style());
(rgbToHex as jest.Mock).mockReturnValue('#FFFFFF');
(getEllipseCoords as jest.Mock).mockReturnValue([
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.test.ts
index caa015c610e4c6c65b282acae535e5cf462899bd..8d0e6e989c9c62672870b56f739e300e6ecc6085 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.test.ts
@@ -1,6 +1,6 @@
/* eslint-disable no-magic-numbers */
import { Feature, Map } from 'ol';
-import { Fill, Style, Text } from 'ol/style';
+import { Fill, Stroke, Style, Text } from 'ol/style';
import { Polygon, MultiPolygon } from 'ol/geom';
import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
import getShapePolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getShapePolygon';
@@ -85,7 +85,7 @@ describe('MapElement', () => {
],
]),
);
- (getStroke as jest.Mock).mockReturnValue(new Style());
+ (getStroke as jest.Mock).mockReturnValue(new Stroke());
(getFill as jest.Mock).mockReturnValue(new Style());
(rgbToHex as jest.Mock).mockReturnValue('#FFFFFF');
(getEllipseCoords as jest.Mock).mockReturnValue([
@@ -107,7 +107,7 @@ describe('MapElement', () => {
const multiPolygon = new CompartmentPathway(props);
const { feature } = multiPolygon;
- const style = feature.getStyleFunction()?.call(multiPolygon, feature, 1);
+ const style = feature.getStyleFunction()?.call(multiPolygon, feature, 3000);
if (Array.isArray(style)) {
expect(style.length).toBeGreaterThan(0);
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 c61f35609e9b4e1c9d64ce5e856d81bef35d75ef..bc6622c460ae42041ebd71231d7d09da9549a5cd 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentPathway.ts
@@ -94,6 +94,7 @@ export default class CompartmentPathway extends BaseMultiPolygon {
this.pointToProjection({ x: this.x, y: this.y + this.height }),
],
]);
+ this.lineWidths.push(this.outerWidth);
this.styles.push(
getStyle({
geometry: compartmentPolygon,
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.test.ts
index 17bc27013654817113e830a393c49269ec8eccd9..73b47eb7274ece9bf3f4c95af6d98e52df8d7725 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/CompartmentSquare.test.ts
@@ -1,6 +1,6 @@
/* eslint-disable no-magic-numbers */
import { Feature, Map } from 'ol';
-import { Fill, Style, Text } from 'ol/style';
+import { Fill, Stroke, Style, Text } from 'ol/style';
import { MultiPolygon } from 'ol/geom';
import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
import getStroke from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStroke';
@@ -76,7 +76,7 @@ describe('MapElement', () => {
}),
);
(getTextCoords as jest.Mock).mockReturnValue([10, 10]);
- (getStroke as jest.Mock).mockReturnValue(new Style());
+ (getStroke as jest.Mock).mockReturnValue(new Stroke());
(getFill as jest.Mock).mockReturnValue(new Style());
(rgbToHex as jest.Mock).mockReturnValue('#FFFFFF');
(getPolygonCoords as jest.Mock).mockReturnValue([
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 0d497ac9641f91e3cb1883f48a22661673f8c078..963a69c4c788ae050d866d4eee54ed5c176e8ce8 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/Glyph.ts
@@ -95,11 +95,11 @@ export default class Glyph {
}),
zIndex,
});
- iconFeature.setStyle(this.styleFunction.bind(this));
+ iconFeature.setStyle(this.getStyle.bind(this));
this.feature = iconFeature;
}
- protected styleFunction(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+ protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
const getImageScale = feature.get('getImageScale');
const getAnchorAndCoords = feature.get('getAnchorAndCoords');
let imageScale = 1;
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 eddaf77da5a4bc09713ef1c1247e425ef5a6cbba..392ff91967766b5460a28be859deaa2b5964dc31 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
@@ -1,6 +1,6 @@
/* eslint-disable no-magic-numbers */
import { Feature, Map } from 'ol';
-import { Fill, Style, Text } from 'ol/style';
+import { Fill, Stroke, Style, Text } from 'ol/style';
import { Polygon, MultiPolygon } from 'ol/geom';
import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
import getShapePolygon from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getShapePolygon';
@@ -85,7 +85,7 @@ describe('MapElement', () => {
],
]),
);
- (getStroke as jest.Mock).mockReturnValue(new Style());
+ (getStroke as jest.Mock).mockReturnValue(new Stroke());
(getFill as jest.Mock).mockReturnValue(new Style());
(rgbToHex as jest.Mock).mockReturnValue('#FFFFFF');
});
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 4dc8eebc89f334166598c01119111cc9f32ceb42..b81bb1f06abda517599992e9670bc92c67416fcb 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/MapElement.ts
@@ -176,6 +176,7 @@ export default class MapElement extends BaseMultiPolygon {
fill: getFill({ color: rgbToHex(modification.fillColor) }),
zIndex: modification.z,
});
+ this.lineWidths.push(1);
this.polygons.push(modificationPolygon);
this.styles.push(modificationStyle);
});
@@ -228,6 +229,7 @@ export default class MapElement extends BaseMultiPolygon {
zIndex: this.zIndex,
});
this.polygons.push(activityBorderPolygon);
+ this.lineWidths.push(1);
this.styles.push(activityBorderStyle);
});
}
@@ -251,6 +253,7 @@ export default class MapElement extends BaseMultiPolygon {
zIndex: this.zIndex,
});
this.polygons.push(elementPolygon);
+ this.lineWidths.push(this.lineWidth);
this.styles.push(elementStyle);
});
}
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getArrowFeature.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getArrowFeature.ts
index 7d7e53d60d3db92f920399748a88e41eb0c7514b..36de565bcbeceb7b4fcecaae6d22fb12586400f3 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getArrowFeature.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getArrowFeature.ts
@@ -57,6 +57,7 @@ export default function getArrowFeature({
});
const arrowFeature = new Feature({
geometry: new MultiPolygon(arrowPolygons),
+ style: arrowStyles,
});
arrowFeature.setStyle(arrowStyles);
return arrowFeature;
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.test.ts
index ab6e4eb00b44740e62fdecc33d08a60d26b8e88e..10c29480c6fe795114a0592e4e3252063ba370c5 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.test.ts
@@ -1,6 +1,6 @@
/* eslint-disable no-magic-numbers */
import { Map } from 'ol';
-import { Style, Text } from 'ol/style';
+import { Stroke, Style, Text } from 'ol/style';
import getTextStyle from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/text/getTextStyle';
import getStroke from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/getStroke';
import { rgbToHex } from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/style/rgbToHex';
@@ -129,7 +129,7 @@ describe('Layer', () => {
}),
);
(getTextCoords as jest.Mock).mockReturnValue([10, 10]);
- (getStroke as jest.Mock).mockReturnValue(new Style());
+ (getStroke as jest.Mock).mockReturnValue(new Stroke());
(rgbToHex as jest.Mock).mockReturnValue('#FFFFFF');
});
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 a9adc4d4298e6f353262c251fc499fce19c64f15..924c529612b670b7c6e6631d33eacec6157e6054 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/layer/Layer.ts
@@ -16,6 +16,8 @@ import {
} from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types';
import getRotation from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/coords/getRotation';
import getArrowFeature from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/getArrowFeature';
+import { FeatureLike } from 'ol/Feature';
+import Style from 'ol/style/Style';
export interface LayerProps {
texts: Array<LayerText>;
@@ -55,6 +57,8 @@ export default class Layer {
pointToProjection: UsePointToProjectionResult;
+ mapInstance: MapInstance;
+
vectorSource: VectorSource<
Feature<Point> | Feature<Polygon> | Feature<LineString> | Feature<MultiPolygon>
>;
@@ -82,7 +86,8 @@ export default class Layer {
this.lineTypes = lineTypes;
this.arrowTypes = arrowTypes;
this.pointToProjection = pointToProjection;
- this.textFeatures = this.getTextsFeatures(mapInstance);
+ this.mapInstance = mapInstance;
+ this.textFeatures = this.getTextsFeatures();
this.rectFeatures = this.getRectsFeatures();
this.ovalFeatures = this.getOvalsFeatures();
const { linesFeatures, arrowsFeatures } = this.getLinesFeatures();
@@ -104,7 +109,7 @@ export default class Layer {
this.vectorLayer.set('id', layerId);
}
- private getTextsFeatures = (mapInstance: MapInstance): Array<Feature<Point>> => {
+ private getTextsFeatures = (): Array<Feature<Point>> => {
const textObjects = this.texts.map(text => {
return new Text({
x: text.x,
@@ -118,7 +123,7 @@ export default class Layer {
verticalAlign: text.verticalAlign as VerticalAlign,
horizontalAlign: text.horizontalAlign as HorizontalAlign,
pointToProjection: this.pointToProjection,
- mapInstance,
+ mapInstance: this.mapInstance,
});
});
return textObjects.map(text => text.feature);
@@ -143,8 +148,10 @@ export default class Layer {
});
const rectFeature = new Feature<Polygon>({
geometry: polygon,
+ style: polygonStyle,
+ lineWidth: rect.lineWidth,
});
- rectFeature.setStyle(polygonStyle);
+ rectFeature.setStyle(this.getStyle.bind(this));
return rectFeature;
});
};
@@ -169,8 +176,10 @@ export default class Layer {
});
const ovalFeature = new Feature<Polygon>({
geometry: polygon,
+ style: polygonStyle,
+ lineWidth: oval.lineWidth,
});
- ovalFeature.setStyle(polygonStyle);
+ ovalFeature.setStyle(this.getStyle.bind(this));
return ovalFeature;
});
};
@@ -217,6 +226,8 @@ export default class Layer {
pointToProjection: this.pointToProjection,
});
if (startArrowFeature) {
+ startArrowFeature.set('lineWidth', line.width);
+ startArrowFeature.setStyle(this.getStyle.bind(this));
arrowsFeatures.push(startArrowFeature);
}
}
@@ -243,6 +254,8 @@ export default class Layer {
pointToProjection: this.pointToProjection,
});
if (endArrowFeature) {
+ endArrowFeature.set('lineWidth', line.width);
+ endArrowFeature.setStyle(this.getStyle.bind(this));
arrowsFeatures.push(endArrowFeature);
}
}
@@ -263,10 +276,34 @@ export default class Layer {
});
const lineFeature = new Feature<LineString>({
geometry: lineString,
+ style: lineStyle,
+ lineWidth: line.width,
});
- lineFeature.setStyle(lineStyle);
+ lineFeature.setStyle(this.getStyle.bind(this));
linesFeatures.push(lineFeature);
});
return { linesFeatures, arrowsFeatures };
};
+
+ protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+ const minResolution = this.mapInstance?.getView().getMinResolution();
+ const style = feature.get('style');
+ if (!minResolution || !style) {
+ return [];
+ }
+
+ const scale = minResolution / resolution;
+ const lineWidth = feature.get('lineWidth') * scale;
+
+ if (style instanceof Style && style.getStroke()) {
+ style.getStroke()?.setWidth(lineWidth);
+ } else if (Array.isArray(style)) {
+ style.forEach(singleStyle => {
+ if (singleStyle instanceof Style && singleStyle.getStroke()) {
+ singleStyle.getStroke()?.setWidth(lineWidth);
+ }
+ });
+ }
+ return style;
+ }
}
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.test.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.test.ts
index 2b3e02ca7db937cba0f308004080c6ebb8979325..57129a7da639eca5a7dc22a0d790cf1d01a8a1d8 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.test.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.test.ts
@@ -1,5 +1,5 @@
/* eslint-disable no-magic-numbers */
-import { Feature } from 'ol';
+import { Feature, Map } from 'ol';
import Reaction, {
ReactionProps,
} from '@/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction';
@@ -7,11 +7,21 @@ import { newReactionFixture } from '@/models/fixtures/newReactionFixture';
import { lineTypesFixture } from '@/models/fixtures/lineTypesFixture';
import { arrowTypesFixture } from '@/models/fixtures/arrowTypesFixture';
import { shapesFixture } from '@/models/fixtures/shapesFixture';
+import View from 'ol/View';
describe('Layer', () => {
let props: ReactionProps;
beforeEach(() => {
+ const dummyElement = document.createElement('div');
+ const mapInstance = new Map({
+ target: dummyElement,
+ view: new View({
+ zoom: 5,
+ minZoom: 3,
+ maxZoom: 7,
+ }),
+ });
props = {
line: newReactionFixture.line,
products: newReactionFixture.products,
@@ -21,6 +31,7 @@ describe('Layer', () => {
pointToProjection: jest.fn(() => [10, 10]),
lineTypes: lineTypesFixture,
arrowTypes: arrowTypesFixture,
+ mapInstance,
};
});
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 d1ace47e79724b01c4db0b59093d97e2561cc8c7..2733d5b6ba5bba2add2448e536392a3dc01cc1d6 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/reaction/Reaction.ts
@@ -10,6 +10,8 @@ import getShapePolygon from '@/components/Map/MapViewer/MapViewerVector/utils/sh
import Polygon from 'ol/geom/Polygon';
import Style from 'ol/style/Style';
import { WHITE_COLOR } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.constants';
+import { FeatureLike } from 'ol/Feature';
+import { MapInstance } from '@/types/map';
export interface ReactionProps {
line: Line;
@@ -20,6 +22,7 @@ export interface ReactionProps {
arrowTypes: Array<ArrowType>;
shapes: Array<Shape>;
pointToProjection: UsePointToProjectionResult;
+ mapInstance: MapInstance;
}
export default class Reaction {
@@ -39,6 +42,8 @@ export default class Reaction {
pointToProjection: UsePointToProjectionResult;
+ mapInstance: MapInstance;
+
features: Array<Feature> = [];
constructor({
@@ -50,6 +55,7 @@ export default class Reaction {
arrowTypes,
shapes,
pointToProjection,
+ mapInstance,
}: ReactionProps) {
this.line = line;
this.products = products;
@@ -59,6 +65,7 @@ export default class Reaction {
this.arrowTypes = arrowTypes;
this.shapes = shapes;
this.pointToProjection = pointToProjection;
+ this.mapInstance = mapInstance;
this.drawReaction();
}
@@ -120,6 +127,8 @@ export default class Reaction {
pointToProjection: this.pointToProjection,
});
if (startArrowFeature) {
+ startArrowFeature.set('lineWidth', line.width);
+ startArrowFeature.setStyle(this.getStyle.bind(this));
arrowsFeatures.push(startArrowFeature);
}
}
@@ -145,6 +154,8 @@ export default class Reaction {
pointToProjection: this.pointToProjection,
});
if (endArrowFeature) {
+ endArrowFeature.set('lineWidth', line.width);
+ endArrowFeature.setStyle(this.getStyle.bind(this));
arrowsFeatures.push(endArrowFeature);
}
}
@@ -165,8 +176,10 @@ export default class Reaction {
});
const lineFeature = new Feature<LineString>({
geometry: lineString,
+ style: lineStyle,
+ lineWidth: line.width,
});
- lineFeature.setStyle(lineStyle);
+ lineFeature.setStyle(this.getStyle.bind(this));
return { lineFeature, arrowsFeatures };
}
@@ -207,8 +220,32 @@ export default class Reaction {
});
const squareFeature = new Feature({
geometry: new MultiPolygon(polygons),
+ style: styles,
+ lineWidth: 1,
});
- squareFeature.setStyle(styles);
+ squareFeature.setStyle(this.getStyle.bind(this));
return squareFeature;
}
+
+ protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+ const minResolution = this.mapInstance?.getView().getMinResolution();
+ const style = feature.get('style');
+ if (!minResolution || !style) {
+ return [];
+ }
+
+ const scale = minResolution / resolution;
+ const lineWidth = feature.get('lineWidth') * scale;
+
+ if (style instanceof Style && style.getStroke()) {
+ style.getStroke()?.setWidth(lineWidth);
+ } else if (Array.isArray(style)) {
+ style.forEach(singleStyle => {
+ if (singleStyle instanceof Style && singleStyle.getStroke()) {
+ singleStyle.getStroke()?.setWidth(lineWidth);
+ }
+ });
+ }
+ return style;
+ }
}
diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/Text.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/Text.ts
index d1ca669968c33476a1c1e2e43490fbf41f89e88a..a5a72e4ca7ed4c8f5ba88acee1e0395a1bfb1577 100644
--- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/Text.ts
+++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/text/Text.ts
@@ -92,10 +92,10 @@ export default class Text {
},
});
- this.feature.setStyle(this.styleFunction.bind(this));
+ this.feature.setStyle(this.getStyle.bind(this));
}
- protected styleFunction(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
+ protected getStyle(feature: FeatureLike, resolution: number): Style | Array<Style> | void {
const getTextScale = feature.get('getTextScale');
let textScale = 1;
if (getTextScale instanceof Function) {