feat(LineSymbolizer): support graphicStroke incl. dasharray

Author: jansule

data/styles/line_graphicStroke.ts

@@ -0,0 +1,21 @@
+import { Style } from 'geostyler-style';
+
+const lineSimpleLine: Style = {
+  name: 'OL Style',
+  rules: [
+    {
+      name: 'OL Style Rule 0',
+      symbolizers: [{
+        kind: 'Line',
+        graphicStroke: {
+          kind: 'Mark',
+          wellKnownName: 'square',
+          color: '#000000',
+          radius: 10
+        }
+      }]
+    }
+  ]
+};
+
+export default lineSimpleLine;

data/styles/line_graphicStrokeDashArray.ts

@@ -0,0 +1,22 @@
+import { Style } from 'geostyler-style';
+
+const lineSimpleLine: Style = {
+  name: 'OL Style',
+  rules: [
+    {
+      name: 'OL Style Rule 0',
+      symbolizers: [{
+        kind: 'Line',
+        graphicStroke: {
+          kind: 'Mark',
+          wellKnownName: 'square',
+          color: '#000000',
+          radius: 5
+        },
+        dasharray: [20, 10]
+      }]
+    }
+  ]
+};
+
+export default lineSimpleLine;

src/OlStyleParser.spec.ts

@@ -7,6 +7,8 @@ import OlStyleIcon from 'ol/style/Icon';
 import OlStyleText, { Options as TextOptions } from 'ol/style/Text';
 import OlStyleFill, { Options as FillOptions } from 'ol/style/Fill';
 import OlFeature from 'ol/Feature';
+import OlLineString from 'ol/geom/LineString';
+import OlPoint from 'ol/geom/Point';
 
 import OlStyleParser, { OlParserStyleFct } from './OlStyleParser';
 
@@ -31,6 +33,8 @@ import point_simpledot from '../data/styles/point_simpledot';
 import point_simpleplus from '../data/styles/point_simpleplus';
 import point_simpletimes from '../data/styles/point_simpletimes';
 import line_simpleline from '../data/styles/line_simpleline';
+import line_graphicstroke from '../data/styles/line_graphicStroke';
+import line_graphicstroke_dasharray from '../data/styles/line_graphicStrokeDashArray';
 import filter_simplefilter from '../data/styles/filter_simpleFilter';
 import filter_nestedfilter from '../data/styles/filter_nestedFilter';
 import filter_invalidfilter from '../data/styles/filter_invalidFilter';
@@ -856,6 +860,52 @@ describe('OlStyleParser implements StyleParser', () => {
     expect(olStroke?.getWidth()).toBeCloseTo(expecSymb.width as number);
     expect(olStroke?.getLineDash()).toEqual(expecSymb.dasharray);
   });
+  it('can write an OpenLayers LineSymbolizer with graphicStroke', async () => {
+    let { output: olStyle } = await styleParser.writeStyle(line_graphicstroke);
+    olStyle = olStyle as OlStyle;
+    expect(olStyle).toBeDefined();
+
+    const testFeature = new OlFeature({
+      geometry: new OlLineString([[0, 0], [0, 20]])
+    });
+    const resolution = 1;
+    const expecSymb = (line_graphicstroke.rules[0].symbolizers[0] as LineSymbolizer).graphicStroke as MarkSymbolizer;
+    const evaluatedStyle = (olStyle as unknown as OlParserStyleFct)(testFeature, resolution)[0];
+    const geometry = evaluatedStyle.getGeometry();
+    expect(geometry).toBeInstanceOf(OlPoint);
+
+    const iconStyle = evaluatedStyle.getImage();
+    const svgString = getDecodedSvg(iconStyle.getSrc() as string);
+    const { wellKnownName, color } = getSvgProperties(svgString) as MarkSymbolizer;
+
+    expect(wellKnownName).toEqual(cleanWellKnownName(expecSymb.wellKnownName));
+    expect(color).toEqual(expecSymb.color);
+  });
+  it('can write an OpenLayers LineSymbolizer with graphicStroke with dash array', async () => {
+    let { output: olStyle } = await styleParser.writeStyle(line_graphicstroke_dasharray);
+    olStyle = olStyle as OlStyle;
+    expect(olStyle).toBeDefined();
+
+    const testFeature = new OlFeature({
+      geometry: new OlLineString([[0, 0], [0, 60]])
+    });
+    const resolution = 1;
+    const expecSymb = (line_graphicstroke_dasharray.rules[0].symbolizers[0] as LineSymbolizer).graphicStroke as MarkSymbolizer;
+    const evaluatedStyle = (olStyle as unknown as OlParserStyleFct)(testFeature, resolution);
+    // 4 symbols fit into dash pattern
+    expect(evaluatedStyle).toHaveLength(4);
+
+    const coordsGeom1 = evaluatedStyle[0].getGeometry().getCoordinates();
+    const coordsGeom2 = evaluatedStyle[1].getGeometry().getCoordinates();
+    const coordsGeom3 = evaluatedStyle[2].getGeometry().getCoordinates();
+    const coordsGeom4 = evaluatedStyle[3].getGeometry().getCoordinates();
+
+    // for all geometries the first ordinate is always 0, so we only check the second.
+    expect(coordsGeom1[1]).toBeCloseTo(5);
+    expect(coordsGeom2[1]).toBeCloseTo(15);
+    expect(coordsGeom3[1]).toBeCloseTo(35);
+    expect(coordsGeom4[1]).toBeCloseTo(45);
+  });
   it('can write an OpenLayers PolygonSymbolizer', async () => {
     let { output: olStyle } = await styleParser.writeStyle(polygon_transparentpolygon);
     olStyle = olStyle as OlStyle;

src/OlStyleParser.ts

@@ -38,6 +38,8 @@ import OlStyleCircle from 'ol/style/Circle';
 import OlStyleFill from 'ol/style/Fill';
 import OlStyleIcon, { Options as OlStyleIconOptions }  from 'ol/style/Icon';
 import OlStyleRegularshape from 'ol/style/RegularShape';
+import OlLineString from 'ol/geom/LineString';
+import OlMultiLineString from 'ol/geom/MultiLineString';
 import { METERS_PER_UNIT } from 'ol/proj/Units';
 
 import OlStyleUtil, { DEGREES_TO_RADIANS } from './Util/OlStyleUtil';
@@ -53,6 +55,7 @@ import {
   LINE_WELLKNOWNNAMES,
   NOFILL_WELLKNOWNNAMES
 } from './Util/OlSvgUtil';
+import OlGraphicStrokeUtil from './Util/OlGraphicStrokeUtil';
 
 export interface OlParserStyleFct {
   (feature?: any, resolution?: number): any;
@@ -167,6 +170,9 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
   OlStyleCircleConstructor = OlStyleCircle;
   OlStyleIconConstructor = OlStyleIcon;
   OlStyleRegularshapeConstructor = OlStyleRegularshape;
+  OlLineStringContructor = OlLineString;
+  OlMultiLineStringConstructor = OlMultiLineString;
+  OlPointConstructor = OlGeomPoint;
 
   constructor(ol?: any) {
     if (ol) {
@@ -178,6 +184,9 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
       this.OlStyleCircleConstructor = ol.style.Circle;
       this.OlStyleIconConstructor = ol.style.Icon;
       this.OlStyleRegularshapeConstructor = ol.style.RegularShape;
+      this.OlLineStringContructor = ol.geom.LineString;
+      this.OlMultiLineStringConstructor = ol.geom.MultiLineString;
+      this.OlPointConstructor = ol.geom.Point;
     }
   }
 
@@ -749,6 +758,7 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
       const hasMaxScale = geoStylerStyle?.rules?.[0]?.scaleDenominator?.max !== undefined ? true : false;
       const hasScaleDenominator = hasMinScale || hasMaxScale ? true : false;
       const hasFunctions = OlStyleUtil.containsGeoStylerFunctions(geoStylerStyle);
+      const hasGraphicStroke = OlGraphicStrokeUtil.containsGraphicStroke(geoStylerStyle);
 
       const nrSymbolizers = geoStylerStyle.rules[0].symbolizers.length;
       const hasTextSymbolizer = rules[0].symbolizers.some((symbolizer: Symbolizer) => {
@@ -757,7 +767,14 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
       const hasDynamicIconSymbolizer = rules[0].symbolizers.some((symbolizer: Symbolizer) => {
         return symbolizer.kind === 'Icon' && typeof(symbolizer.image) === 'string' && symbolizer.image.includes('{{');
       });
-      if (!hasFilter && !hasScaleDenominator && !hasTextSymbolizer && !hasDynamicIconSymbolizer && !hasFunctions) {
+      if (
+        !hasFilter
+        && !hasScaleDenominator
+        && !hasTextSymbolizer
+        && !hasDynamicIconSymbolizer
+        && !hasFunctions
+        && !hasGraphicStroke
+      ) {
         if (nrSymbolizers === 1) {
           return this.geoStylerStyleToOlStyle(geoStylerStyle);
         } else {
@@ -848,7 +865,9 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
         if (isWithinScale && matchesFilter) {
           rule.symbolizers.forEach((symb: Symbolizer) => {
             if (symb.visibility === false) {
+              // TODO why pushing null instead of just skipping/returning?
               styles.push(null);
+              return;
             }
 
             if (isGeoStylerBooleanFunction(symb.visibility)) {
@@ -858,16 +877,25 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
               }
             }
 
-            const olSymbolizer: any = this.getOlSymbolizerFromSymbolizer(symb, feature);
-            // either an OlStyle or an ol.StyleFunction. OpenLayers only accepts an array
+            const olSymbolizer: any = this.getOlSymbolizerFromSymbolizer(symb, feature, resolution);
+            // either an OlStyle, OlStyle[] or an ol.StyleFunction. OpenLayers only accepts an array
             // of OlStyles, not ol.StyleFunctions.
             // So we have to check it and in case of an ol.StyleFunction call that function
             // and add the returned style to const styles.
-            if (typeof olSymbolizer !== 'function') {
-              styles.push(olSymbolizer);
-            } else {
+            if (typeof olSymbolizer === 'function') {
               const styleFromFct: any = olSymbolizer(feature, resolution);
               styles.push(styleFromFct);
+            } else if (Array.isArray(olSymbolizer)) {
+              olSymbolizer.forEach((s) => {
+                if (typeof s === 'function') {
+                  const styleFromFct: any = s(feature, resolution);
+                  styles.push(styleFromFct);
+                } else {
+                  styles.push(s);
+                }
+              });
+            } else {
+              styles.push(olSymbolizer);
             }
           });
         }
@@ -995,7 +1023,7 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
    * @param symbolizer A GeoStyler-Style Symbolizer.
    * @return The OpenLayers Style object or a StyleFunction
    */
-  getOlSymbolizerFromSymbolizer(symbolizer: Symbolizer, feature?: OlFeature): OlStyle {
+  getOlSymbolizerFromSymbolizer(symbolizer: Symbolizer, feature?: OlFeature, resolution?: number): OlStyle {
     let olSymbolizer: any;
     symbolizer = structuredClone(symbolizer);
 
@@ -1010,7 +1038,7 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
         olSymbolizer = this.getOlTextSymbolizerFromTextSymbolizer(symbolizer, feature);
         break;
       case 'Line':
-        olSymbolizer = this.getOlLineSymbolizerFromLineSymbolizer(symbolizer, feature);
+        olSymbolizer = this.getOlLineSymbolizerFromLineSymbolizer(symbolizer, feature, resolution);
         break;
       case 'Fill':
         olSymbolizer = this.getOlPolygonSymbolizerFromFillSymbolizer(symbolizer, feature);
@@ -1195,7 +1223,15 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
    * @param symbolizer A GeoStyler-Style LineSymbolizer.
    * @return The OL Style object
    */
-  getOlLineSymbolizerFromLineSymbolizer(symbolizer: LineSymbolizer, feat?: OlFeature): OlStyle | OlStyleStroke {
+  getOlLineSymbolizerFromLineSymbolizer(
+    symbolizer: LineSymbolizer, feat?: OlFeature, resolution?: number
+  ): OlStyle | OlStyleStroke | OlStyle[] {
+    // graphicStroke will always be evaluated in a function, so we
+    // can assume that the feature is available.
+    if (symbolizer.graphicStroke) {
+      // If graphicStroke is set, we ignore unrelated stroke properties
+      return this.getOlGraphicStrokeFromGraphicStroke(symbolizer, feat!, resolution!);
+    }
     for (const key of Object.keys(symbolizer)) {
       if (isGeoStylerFunction(symbolizer[key as keyof LineSymbolizer])) {
         (symbolizer as any)[key] = OlStyleUtil.evaluateFunction((symbolizer as any)[key], feat);
@@ -1218,6 +1254,106 @@ export class OlStyleParser implements StyleParser<OlStyleLike> {
     });
   }
 
+  getOlGraphicStrokeFromGraphicStroke(
+    symbolizer: LineSymbolizer, feat: OlFeature, resolution: number
+  ) {
+    const geom = feat.getGeometry();
+    if (!geom || !(geom instanceof this.OlLineStringContructor || geom instanceof this.OlMultiLineStringConstructor)) {
+      throw new Error(
+        'GraphicStroke can only be applied to (Multi-)LineString geometries'
+      );
+    }
+
+    const graphicStroke = symbolizer.graphicStroke!;
+    const symbolSize = this.getSymbolSizeFromGraphicStroke(graphicStroke, feat);
+    if (symbolSize <= 0) {
+      console.warn('Symbol size must be greater than zero for graphic stroke. No graphic will be drawn.');
+      return [];
+    }
+    const symbolRotation = graphicStroke.rotate;
+    const evaluatedSymbolRotation = isGeoStylerFunction(symbolRotation)
+      ? OlStyleUtil.evaluateNumberFunction(symbolRotation, feat)
+      : symbolRotation ?? 0;
+    // We currently do not support expressions for dasharrays
+    const dashArray = symbolizer.dasharray as number[] | undefined;
+    const dashOffset = symbolizer.dashOffset || 0;
+    const evaluatedDashOffset = isGeoStylerFunction(dashOffset)
+      ? OlStyleUtil.evaluateNumberFunction(dashOffset, feat)
+      : dashOffset;
+
+    const symbolizerGenerator = (modifiedGraphicStroke: any) => {
+      return this.getOlSymbolizerFromSymbolizer(modifiedGraphicStroke, feat, resolution);
+    };
+
+    if (geom instanceof this.OlLineStringContructor) {
+      return OlGraphicStrokeUtil.processLineStringGraphicStroke(
+        geom,
+        symbolSize,
+        resolution,
+        dashArray,
+        evaluatedDashOffset,
+        evaluatedSymbolRotation,
+        graphicStroke,
+        symbolizerGenerator,
+        this.OlPointConstructor
+      );
+    } else {
+      // For every line in the MultiLineString, we start the pattern at the
+      // beginning of the line. This means that the pattern can be
+      // discontinuous at vertices where the lines connect.
+      return geom.getLineStrings().flatMap(line =>
+        OlGraphicStrokeUtil.processLineStringGraphicStroke(
+          line,
+          symbolSize,
+          resolution,
+          dashArray,
+          evaluatedDashOffset,
+          evaluatedSymbolRotation,
+          graphicStroke,
+          symbolizerGenerator,
+          this.OlPointConstructor
+        )
+      );
+    }
+  }
+
+  /**
+   * Get the size of a symbol from graphicStroke.
+   * @param graphicStroke The graphicStroke from the LineSymbolizer.
+   * @param feat The feature.
+   * @returns The size of the symbol in pixels.
+   */
+  getSymbolSizeFromGraphicStroke(
+    graphicStroke: LineSymbolizer['graphicStroke'], feat: OlFeature
+  ) {
+    let size = 0;
+    if (graphicStroke!.kind === 'Mark') {
+      const radius = graphicStroke!.radius;
+      if (isGeoStylerFunction(radius)) {
+        size = OlStyleUtil.evaluateNumberFunction(radius, feat) * 2;
+      } else {
+        size = (radius ?? 0) * 2;
+      }
+      if (size <= 0) {
+        return size;
+      }
+      const strokeWidth = graphicStroke!.strokeWidth;
+      if (isGeoStylerFunction(strokeWidth)) {
+        size += OlStyleUtil.evaluateNumberFunction(strokeWidth, feat);
+      } else {
+        size += strokeWidth ?? 0;
+      }
+    } else if (graphicStroke!.kind === 'Icon') {
+      const iconSize = graphicStroke!.size;
+      if (isGeoStylerFunction(iconSize)) {
+        size = OlStyleUtil.evaluateNumberFunction(iconSize, feat);
+      } else {
+        size = iconSize ?? 0;
+      }
+    }
+    return size;
+  }
+
   /**
    * Get the OL Style object from an GeoStyler-Style FillSymbolizer.
    *