From 3f0acd9f3fef324416ec4ac122463763aa1ed83d Mon Sep 17 00:00:00 2001 From: mahmoudadel54 Date: Thu, 6 Jun 2024 15:55:47 +0300 Subject: [PATCH] #10342: Markers are not printed correctly Description: - resolve review comments by creating 'getCachedImageById' function - edit unit test --- .../utils/styleparser/PrintStyleParser.js | 20 ++++++++------- .../utils/styleparser/StyleParserUtils.js | 10 +++++--- .../__tests__/StyleParserUtils-test.js | 25 +++++++++++++------ 3 files changed, 35 insertions(+), 20 deletions(-) diff --git a/web/client/utils/styleparser/PrintStyleParser.js b/web/client/utils/styleparser/PrintStyleParser.js index 97981556c3..61b83ee14e 100644 --- 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 index bd2e9182c5..b6f4d96334 100644 --- 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 index 74c480cf0b..3340e09b9e 100644 --- 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,11 +237,20 @@ 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, @@ -249,8 +258,8 @@ describe("StyleParserUtils ", () => { "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); }); });