geosolutions-it#10342: Markers are not printed correctly

Description: - resolve review comments by creating 'getCachedImageById' function - edit unit test
mahmoudadel54 · Jun 6, 2024 · 3f0acd9 · 3f0acd9
1 parent 83874cb
commit 3f0acd9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/web/client/utils/styleparser/PrintStyleParser.js b/web/client/utils/styleparser/PrintStyleParser.js
@@ -13,7 +13,8 @@ import {
     geoStylerStyleFilter,
     drawWellKnownNameImageFromSymbolizer,
     drawIcons,
-    parseSymbolizerExpressions
+    parseSymbolizerExpressions,
+    getCachedImageById
 } from './StyleParserUtils';
 import { geometryFunctionsLibrary } from './GeometryFunctionsUtils';
 import { circleToPolygon } from '../DrawGeometryUtils';
@@ -70,7 +71,7 @@ const anchorToLabelAlign = (anchor) => {
     }
 };
 
-const symbolizerToPrintMSStyle = (symbolizer, feature, layer) => {
+const symbolizerToPrintMSStyle = (symbolizer, feature, layer, originalSymbolizer) => {
     const globalOpacity = layer.opacity === undefined ? 1 : layer.opacity;
     if (symbolizer.kind === 'Mark') {
         const { width, height, canvas }  = drawWellKnownNameImageFromSymbolizer(symbolizer);
@@ -85,7 +86,7 @@ const symbolizerToPrintMSStyle = (symbolizer, feature, layer) => {
         };
     }
     if (symbolizer.kind === 'Icon') {
-        const { width = symbolizer.size, height = symbolizer.size }  = drawWellKnownNameImageFromSymbolizer(symbolizer);
+        const { width = symbolizer.size, height = symbolizer.size }  = getCachedImageById(originalSymbolizer);
         const aspect = width / height;
         let iconSizeW = symbolizer.size;
         let iconSizeH = iconSizeW / aspect;
@@ -207,11 +208,12 @@ export const getPrintStyleFuncFromRules = (geoStylerStyle) => {
                                 : true)
                         )
                     );
+                    const originalSymbolizer = circleGeometrySymbolizers[circleGeometrySymbolizers.length - 1]
+                    || pointGeometrySymbolizers[pointGeometrySymbolizers.length - 1]
+                    || polylineGeometrySymbolizers[polylineGeometrySymbolizers.length - 1]
+                    || polygonGeometrySymbolizers[polygonGeometrySymbolizers.length - 1];
 
-                    const symbolizer = parseSymbolizerExpressions(circleGeometrySymbolizers[circleGeometrySymbolizers.length - 1]
-                        || pointGeometrySymbolizers[pointGeometrySymbolizers.length - 1]
-                        || polylineGeometrySymbolizers[polylineGeometrySymbolizers.length - 1]
-                        || polygonGeometrySymbolizers[polygonGeometrySymbolizers.length - 1], feature);
+                    const symbolizer = parseSymbolizerExpressions(originalSymbolizer, feature);
 
                     let geometry = feature.geometry;
                     const geometryFunction = getGeometryFunction(symbolizer);
@@ -233,7 +235,7 @@ export const getPrintStyleFuncFromRules = (geoStylerStyle) => {
                             geometry,
                             properties: {
                                 ...feature?.properties,
-                                ms_style: symbolizerToPrintMSStyle(symbolizer, feature, layer)
+                                ms_style: symbolizerToPrintMSStyle(symbolizer, feature, layer, originalSymbolizer)
                             }
                         },
                         ...additionalPointSymbolizers.map((_additionalSymbolizer) => {
@@ -250,7 +252,7 @@ export const getPrintStyleFuncFromRules = (geoStylerStyle) => {
                                         },
                                         properties: {
                                             ...feature?.properties,
-                                            ms_style: symbolizerToPrintMSStyle(additionalSymbolizer, feature, layer)
+                                            ms_style: symbolizerToPrintMSStyle(additionalSymbolizer, feature, layer, _additionalSymbolizer)
                                         }
                                     };
                                 }

diff --git a/web/client/utils/styleparser/StyleParserUtils.js b/web/client/utils/styleparser/StyleParserUtils.js
@@ -613,14 +613,14 @@ export const drawWellKnownNameImageFromSymbolizer = (symbolizer) => {
         && !(symbolizer.wellKnownName || '').includes('shape://');
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
-    const radius = (symbolizer.radius || symbolizer?.size / 2);
+    const radius = symbolizer.radius;
     const strokePadding = hasStroke ? symbolizer.strokeWidth / 2 : 4;
     const x = strokePadding;
     const y = strokePadding;
     const cx = radius + strokePadding;
     const cy = radius + strokePadding;
-    const width = radius * 2;
-    const height = radius * 2;
+    const width = symbolizer.radius * 2;
+    const height = symbolizer.radius * 2;
     canvas.setAttribute('width', width + strokePadding * 2);
     canvas.setAttribute('height', height + strokePadding * 2);
 
@@ -933,3 +933,7 @@ export const drawIcons = (geoStylerStyle, options) => {
             })
         );
 };
+export const getCachedImageById = (symbolizer) => {
+    const id = getImageIdFromSymbolizer(symbolizer);
+    return imagesCache[id] || {};
+};
diff --git a/web/client/utils/styleparser/__tests__/StyleParserUtils-test.js b/web/client/utils/styleparser/__tests__/StyleParserUtils-test.js
@@ -13,7 +13,7 @@ import {
     geoStylerStyleFilter,
     getWellKnownNameImageFromSymbolizer,
     parseSymbolizerExpressions,
-    drawWellKnownNameImageFromSymbolizer
+    getCachedImageById
 } from '../StyleParserUtils';
 
 describe("StyleParserUtils ", () => {
@@ -237,20 +237,29 @@ describe("StyleParserUtils ", () => {
                 outlineDasharray: [ 10, 10 ]
             });
     });
-    it('test drawWellKnownNameImageFromSymbolizer method for Icon symbolizer to return width, height = size /2 in case radius not included within symbolizer', () => {
-        const symbolizer1 = {
-            "symbolizerId": "1",
+    it('test getCachedImageById method for Icon annotationSymbolizer to return width, height = size in case of returning undefined from getCachedImageById', () => {
+        const annotationSymbolizer = {
+            "symbolizerId": "5ba7eae188a0",
             "kind": "Icon",
-            "image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAqCAYAAACk2+",
+            "image": {
+                "name": "msMarkerIcon",
+                "args": [
+                    {
+                        "color": "blue",
+                        "shape": "circle",
+                        "glyph": "comment"
+                    }
+                ]
+            },
             "opacity": 1,
             "size": 46,
             "rotate": 0,
             "msBringToFront": false,
             "anchor": "bottom",
             "msHeightReference": "none"
         };
-        const {width, height} = drawWellKnownNameImageFromSymbolizer(symbolizer1);
-        expect(width).toBe(symbolizer1.size);
-        expect(height).toBe(symbolizer1.size);
+        const { width = annotationSymbolizer.size, height = annotationSymbolizer.size } = getCachedImageById(annotationSymbolizer);
+        expect(width).toBe(annotationSymbolizer.size);
+        expect(height).toBe(annotationSymbolizer.size);
     });
 });