From 3ddd65cef922110bc52d83a9c86645f5dc4f7dd4 Mon Sep 17 00:00:00 2001 From: Kai Volland Date: Thu, 30 Sep 2021 14:01:03 +0200 Subject: [PATCH 1/2] set dependabot interval to weekly --- .github/dependabot.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 02fee0c4..8dfca0dc 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -10,5 +10,5 @@ updates: directory: "/" # Check the npm registry for updates every day (weekdays) schedule: - interval: "daily" + interval: "weekly" versioning-strategy: increase-if-necessary From 02bdbeb5e206b2df1f43db148d1bc75007ed289f Mon Sep 17 00:00:00 2001 From: Kai Volland Date: Thu, 30 Sep 2021 14:11:50 +0200 Subject: [PATCH 2/2] add support for offset to Mark- and IconSymbolizer --- data/olStyles/point_fontglyph.ts | 2 + data/olStyles/point_icon.ts | 3 +- data/olStyles/point_simpletriangle.ts | 1 + data/styles/point_fontglyph.ts | 3 +- data/styles/point_icon.ts | 3 +- data/styles/point_simpletriangle.ts | 3 +- src/OlStyleParser.ts | 106 ++++++++++++++------------ 7 files changed, 69 insertions(+), 52 deletions(-) diff --git a/data/olStyles/point_fontglyph.ts b/data/olStyles/point_fontglyph.ts index 7f16a498..f5570487 100644 --- a/data/olStyles/point_fontglyph.ts +++ b/data/olStyles/point_fontglyph.ts @@ -7,6 +7,8 @@ const olFontGlyph = new OlStyle({ text: new OlStyleText({ text: '|', font: 'Normal 12px \'My Font Name\', geostyler-mark-symbolizer', + offsetX: 10, + offsetY: 20, fill: new OlStyleFill({ color: '#FF0000' }), diff --git a/data/olStyles/point_icon.ts b/data/olStyles/point_icon.ts index 061902ef..d198d3be 100644 --- a/data/olStyles/point_icon.ts +++ b/data/olStyles/point_icon.ts @@ -6,7 +6,8 @@ const olIconPoint = new OlStyle({ src: 'https://avatars1.githubusercontent.com/u/1849416?s=460&v=4', scale: 0.1, rotation: Math.PI / 4, - opacity: 0.5 + opacity: 0.5, + displacement: [10, 20] }) }); diff --git a/data/olStyles/point_simpletriangle.ts b/data/olStyles/point_simpletriangle.ts index 164163d2..3c89b97b 100644 --- a/data/olStyles/point_simpletriangle.ts +++ b/data/olStyles/point_simpletriangle.ts @@ -6,6 +6,7 @@ const olSimpleTriangle = new OlStyle({ image: new OlStyleRegularshape({ points: 3, radius: 6, + displacement: [10, 20], fill: new OlStyleFill({ color: '#FF0000' }) diff --git a/data/styles/point_fontglyph.ts b/data/styles/point_fontglyph.ts index e5cf976a..b843e939 100644 --- a/data/styles/point_fontglyph.ts +++ b/data/styles/point_fontglyph.ts @@ -11,7 +11,8 @@ const pointFontglyph: Style = { color: '#FF0000', radius: 12, rotate: 0, - strokeColor: '#112233' + strokeColor: '#112233', + offset: [10, 20] }] } ] diff --git a/data/styles/point_icon.ts b/data/styles/point_icon.ts index 2449da0d..77980402 100644 --- a/data/styles/point_icon.ts +++ b/data/styles/point_icon.ts @@ -10,7 +10,8 @@ const pointSimplePoint: Style = { image: 'https://avatars1.githubusercontent.com/u/1849416?s=460&v=4', size: 0.1, opacity: 0.5, - rotate: 45 + rotate: 45, + offset: [10, 20] }] } ] diff --git a/data/styles/point_simpletriangle.ts b/data/styles/point_simpletriangle.ts index d3cf5948..b79834c9 100644 --- a/data/styles/point_simpletriangle.ts +++ b/data/styles/point_simpletriangle.ts @@ -10,7 +10,8 @@ const pointSimpleTriangle: Style = { wellKnownName: 'triangle', color: '#FF0000', radius: 6, - rotate: 0 + rotate: 0, + offset: [10, 20] }] } ] diff --git a/src/OlStyleParser.ts b/src/OlStyleParser.ts index 0b7f466f..8968b335 100644 --- a/src/OlStyleParser.ts +++ b/src/OlStyleParser.ts @@ -15,14 +15,14 @@ import { UnsupportedProperties } from 'geostyler-style'; -import OlStyle from 'ol/style/Style'; +import OlStyle, { StyleFunction as OlStyleFunction, StyleLike as OlStyleLike} from 'ol/style/Style'; import OlStyleImage from 'ol/style/Image'; import OlStyleFill from 'ol/style/Fill'; import OlStyleStroke from 'ol/style/Stroke'; import OlStyleText from 'ol/style/Text'; import OlStyleCircle from 'ol/style/Circle'; import OlStyleIcon from 'ol/style/Icon'; -import OlStyleRegularshape from 'ol/style/RegularShape'; +import OlStyleRegularshape, { Options as OlStyleRegularshapeOptions } from 'ol/style/RegularShape'; import OlStyleUtil from './Util/OlStyleUtil'; import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil'; @@ -52,7 +52,6 @@ export class OlStyleParser implements StyleParser { MarkSymbolizer: { avoidEdges: 'none', blur: 'none', - offset: 'none', fillOpacity: 'none', offsetAnchor: 'none', pitchAlignment: 'none', @@ -77,7 +76,6 @@ export class OlStyleParser implements StyleParser { haloColor: 'none', haloWidth: 'none', keepUpright: 'none', - offset: 'none', offsetAnchor: 'none', optional: 'none', padding: 'none', @@ -138,13 +136,15 @@ export class OlStyleParser implements StyleParser { * @param {object} olStyle The OpenLayers Style object * @return {PointSymbolizer} The GeoStyler-Style PointSymbolizer */ - getPointSymbolizerFromOlStyle(olStyle: any): PointSymbolizer { + getPointSymbolizerFromOlStyle(olStyle: OlStyle): PointSymbolizer { let pointSymbolizer: PointSymbolizer; if (olStyle.getImage() instanceof this.OlStyleCircleConstructor) { // circle - const olCircleStyle = olStyle.getImage(); + const olCircleStyle: OlStyleCircle = olStyle.getImage() as OlStyleCircle; const olFillStyle = olCircleStyle.getFill(); const olStrokeStyle = olCircleStyle.getStroke(); + const offset = olCircleStyle.getDisplacement() as [number, number]; + const circleSymbolizer: MarkSymbolizer = { kind: 'Mark', wellKnownName: 'circle', @@ -153,18 +153,20 @@ export class OlStyleParser implements StyleParser { radius: (olCircleStyle.getRadius() !== 0) ? olCircleStyle.getRadius() : 5, strokeColor: olStrokeStyle ? olStrokeStyle.getColor() as string : undefined, strokeOpacity: olStrokeStyle ? OlStyleUtil.getOpacity(olStrokeStyle.getColor() as string) : undefined, - strokeWidth: olStrokeStyle ? olStrokeStyle.getWidth() : undefined + strokeWidth: olStrokeStyle ? olStrokeStyle.getWidth() : undefined, + offset: offset[0] || offset[1] ? offset : undefined }; pointSymbolizer = circleSymbolizer; } else if (olStyle.getImage() instanceof this.OlStyleRegularshapeConstructor) { // square, triangle, star, cross or x - const olRegularStyle = olStyle.getImage(); + const olRegularStyle: OlStyleRegularshape = olStyle.getImage() as OlStyleRegularshape; const olFillStyle = olRegularStyle.getFill(); const olStrokeStyle = olRegularStyle.getStroke(); const radius = olRegularStyle.getRadius(); const radius2 = olRegularStyle.getRadius2(); const points = olRegularStyle.getPoints(); const angle = olRegularStyle.getAngle(); + const offset = olRegularStyle.getDisplacement() as [number, number]; const markSymbolizer: MarkSymbolizer = { kind: 'Mark', @@ -175,7 +177,8 @@ export class OlStyleParser implements StyleParser { strokeWidth: olStrokeStyle ? olStrokeStyle.getWidth() : undefined, radius: (radius !== 0) ? radius : 5, // Rotation in openlayers is radians while we use degree - rotate: olRegularStyle.getRotation() / Math.PI * 180 + rotate: olRegularStyle.getRotation() / Math.PI * 180, + offset: offset[0] || offset[1] ? offset : undefined } as MarkSymbolizer; switch (points) { @@ -233,14 +236,15 @@ export class OlStyleParser implements StyleParser { } pointSymbolizer = markSymbolizer; } else if (olStyle.getText() instanceof this.OlStyleTextConstructor) { - const olTextStyle = olStyle.getText(); + const olTextStyle: OlStyleText = olStyle.getText() as OlStyleText; const olFillStyle = olTextStyle.getFill(); const olStrokeStyle = olTextStyle.getStroke(); const rotation = olTextStyle.getRotation(); - const char = olTextStyle.getText(); - const font = olTextStyle.getFont(); + const char = olTextStyle.getText() || 'a'; + const font = olTextStyle.getFont() || '10px sans-serif'; const fontName = OlStyleUtil.getFontNameFromOlFont(font); const radius = OlStyleUtil.getSizeFromOlFont(font); + const offset = [olTextStyle.getOffsetX(), olTextStyle.getOffsetY()]; pointSymbolizer = { kind: 'Mark', @@ -252,18 +256,22 @@ export class OlStyleParser implements StyleParser { strokeWidth: olStrokeStyle ? olStrokeStyle.getWidth() : undefined, radius: (radius !== 0) ? radius : 5, // Rotation in openlayers is radians while we use degree - rotate: rotation ? rotation / Math.PI * 180 : 0 + rotate: rotation ? rotation / Math.PI * 180 : 0, + offset: offset[0] || offset[1] ? offset : undefined } as MarkSymbolizer; } else { // icon const olIconStyle: any = olStyle.getImage(); + const offset = olIconStyle.getDisplacement() as [number, number]; + const iconSymbolizer: IconSymbolizer = { kind: 'Icon', image: olIconStyle.getSrc() ? olIconStyle.getSrc() : undefined, opacity: olIconStyle.getOpacity(), size: (olIconStyle.getScale() !== 0) ? olIconStyle.getScale() : 5, // Rotation in openlayers is radians while we use degree - rotate: olIconStyle.getRotation() / Math.PI * 180 + rotate: olIconStyle.getRotation() / Math.PI * 180, + offset: offset[0] || offset[1] ? offset : undefined }; pointSymbolizer = iconSymbolizer; } @@ -276,7 +284,7 @@ export class OlStyleParser implements StyleParser { * @param {object} olStyle The OpenLayers Style object * @return {LineSymbolizer} The GeoStyler-Style LineSymbolizer */ - getLineSymbolizerFromOlStyle(olStyle: any): LineSymbolizer { + getLineSymbolizerFromOlStyle(olStyle: OlStyle): LineSymbolizer { const olStrokeStyle = olStyle.getStroke(); // getLineDash returns null not undefined. So we have to double check const dashArray = olStrokeStyle ? olStrokeStyle.getLineDash() : undefined; @@ -301,7 +309,7 @@ export class OlStyleParser implements StyleParser { * @param {OlStyle} olStyle The OpenLayers Style object * @return {FillSymbolizer} The GeoStyler-Style FillSymbolizer */ - getFillSymbolizerFromOlStyle(olStyle: any): FillSymbolizer { + getFillSymbolizerFromOlStyle(olStyle: OlStyle): FillSymbolizer { const olFillStyle = olStyle.getFill(); const olStrokeStyle = olStyle.getStroke(); // getLineDash returns null not undefined. So we have to double check @@ -322,8 +330,8 @@ export class OlStyleParser implements StyleParser { * Get the GeoStyler-Style TextSymbolizer from an OpenLayers Style object. * * - * @param {OlStyle} olStyle The OpenLayers Style object - * @return {TextSymbolizer} The GeoStyler-Style TextSymbolizer + * @param olStyle The OpenLayers Style object + * @return The GeoStyler-Style TextSymbolizer */ getTextSymbolizerFromOlStyle(olStyle: OlStyle): TextSymbolizer { const olTextStyle = olStyle.getText(); @@ -373,17 +381,17 @@ export class OlStyleParser implements StyleParser { /** * Get the GeoStyler-Style Symbolizer from an OpenLayers Style object. * - * @param {OlStyle} olStyle The OpenLayers Style object - * @return {Symbolizer[]} The GeoStyler-Style Symbolizer array + * @param olStyle The OpenLayers Style object + * @return The GeoStyler-Style Symbolizer array */ - getSymbolizersFromOlStyle(olStyles: any[]): Symbolizer[] { + getSymbolizersFromOlStyle(olStyles: OlStyle[]): Symbolizer[] { const symbolizers: Symbolizer[] = []; - olStyles.forEach((olStyle: any) => { + olStyles.forEach(olStyle => { let symbolizer: Symbolizer; const styleType: StyleType = this.getStyleTypeFromOlStyle(olStyle); switch (styleType) { case 'Point': - if (olStyle.getText() && !OlStyleUtil.getIsMarkSymbolizerFont(olStyle.getText().getFont())) { + if (olStyle.getText() && !OlStyleUtil.getIsMarkSymbolizerFont((olStyle as any).getText().getFont())) { symbolizer = this.getTextSymbolizerFromOlStyle(olStyle); } else { symbolizer = this.getPointSymbolizerFromOlStyle(olStyle); @@ -410,7 +418,7 @@ export class OlStyleParser implements StyleParser { * @param {OlStyle} olStyle The OpenLayers Style object * @return {Rule} The GeoStyler-Style Rule */ - getRuleFromOlStyle(olStyles: any): Rule { + getRuleFromOlStyle(olStyles: OlStyle | OlStyle[]): Rule { let symbolizers: Symbolizer[]; const name = 'OL Style Rule 0'; @@ -431,7 +439,7 @@ export class OlStyleParser implements StyleParser { * @param {OlStyle} olStyle The OpenLayers Style object * @return {Symbolizer} The GeoStyler-Style Symbolizer */ - getStyleTypeFromOlStyle(olStyle: any): StyleType { + getStyleTypeFromOlStyle(olStyle: OlStyle): StyleType { let styleType: StyleType; if (olStyle.getImage() instanceof this.OlStyleImageConstructor) { @@ -452,10 +460,10 @@ export class OlStyleParser implements StyleParser { /** * Get the GeoStyler-Style Style from an OpenLayers Style object. * - * @param {object} olStyle The OpenLayers Style object - * @return {Style} The GeoStyler-Style Style + * @param olStyle The OpenLayers Style object + * @return The GeoStyler-Style Style */ - olStyleToGeoStylerStyle(olStyle: any): Style { + olStyleToGeoStylerStyle(olStyle: OlStyle | OlStyle[]): Style { const name = 'OL Style'; const rule = this.getRuleFromOlStyle(olStyle); return { @@ -470,19 +478,19 @@ export class OlStyleParser implements StyleParser { * * The Promise itself resolves with a GeoStyler-Style Style. * - * @param {OlStyle|OlStyle[]|OlParserStyleFct} olStyle The style to be parsed - * @return {Promise} The Promise resolving with the GeoStyler-Style Style + * @param olStyle The style to be parsed + * @return The Promise resolving with the GeoStyler-Style Style */ - readStyle(olStyle: any): Promise