geosolutions-it#9839: Ability to print image legend with an appropria…

…te scale (geosolutions-it#9847)
dsuren1 · Jan 9, 2024 · e4a2a3a · e4a2a3a
1 parent 6ed5877
commit e4a2a3a
Show file tree

Hide file tree

Showing 12 changed files with 103 additions and 24 deletions.
diff --git a/web/client/plugins/__tests__/Print-test.jsx b/web/client/plugins/__tests__/Print-test.jsx
@@ -82,7 +82,9 @@ function expectDefaultItems() {
     expect(getByXPath("//*[text()='print.alternatives.portrait']")).toExist();
     expect(getByXPath("//*[text()='print.legend.font']")).toExist();
     expect(getByXPath("//*[text()='print.legend.forceLabels']")).toExist();
-    expect(getByXPath("//*[text()='print.legend.iconsSize']")).toExist();
+    expect(getByXPath("//*[text()='print.legend.forceIconsSize']")).toExist();
+    expect(getByXPath("//*[text()='print.legend.iconsWidth']")).toExist();
+    expect(getByXPath("//*[text()='print.legend.iconsHeight']")).toExist();
     expect(getByXPath("//*[text()='print.legend.dpi']")).toExist();
     expect(getByXPath("//*[text()='print.resolution']")).toExist();
     expect(getByXPath("//*[text()='print.submit']")).toExist();

diff --git a/web/client/plugins/print/LegendOptions.jsx b/web/client/plugins/print/LegendOptions.jsx
@@ -27,12 +27,28 @@ export const LegendOptions = ({spec, onChangeParameter, actions}, context) => {
                 label={getMessageById(context.messages, "print.legend.antiAliasing")}
                 checked={!!spec?.antiAliasing}
                 onChange={a => onChangeParameter("antiAliasing", a)}/>
+            <PrintOption
+                label={getMessageById(context.messages, "print.legend.forceIconsSize")}
+                checked={!!spec?.forceIconsSize}
+                onChange={a => onChangeParameter("forceIconsSize", a)}/>
+            <TextInput
+                label={getMessageById(context.messages, "print.legend.iconsWidth")}
+                spec={spec}
+                disabled={!spec?.forceIconsSize}
+                type="number"
+                additionalProperty={false}
+                property="iconsWidth"
+                path=""
+                onChangeParameter={onChangeParameter}
+                actions={actions}
+            />
             <TextInput
-                label={getMessageById(context.messages, "print.legend.iconsSize")}
+                label={getMessageById(context.messages, "print.legend.iconsHeight")}
                 spec={spec}
+                disabled={!spec?.forceIconsSize}
                 type="number"
                 additionalProperty={false}
-                property="iconSize"
+                property="iconsHeight"
                 path=""
                 onChangeParameter={onChangeParameter}
                 actions={actions}

diff --git a/web/client/plugins/print/TextInput.jsx b/web/client/plugins/print/TextInput.jsx
@@ -17,7 +17,7 @@ function getType(type) {
     return {componentClass: type};
 }
 
-export const TextInput = ({spec, property, label, placeholder, actions, onChangeParameter, path = "params.", type = "text", additionalProperty = true}, context) => {
+export const TextInput = ({spec, property, label, placeholder, actions, onChangeParameter, path = "params.", type = "text", additionalProperty = true, disabled}, context) => {
     const fullProperty = path + property;
     useEffect(() => {
         if (additionalProperty) actions.addParameter(property, get(spec, fullProperty) ?? "");
@@ -26,7 +26,7 @@ export const TextInput = ({spec, property, label, placeholder, actions, onChange
         <FormGroup>
             {label && <ControlLabel>{getMessageById(context.messages, label)}</ControlLabel> || null}
             <FormControl {...getType(type)} value={get(spec, fullProperty)} placeholder={placeholder && getMessageById(context.messages, placeholder)}
-                onChange={(e) => onChangeParameter(fullProperty, e.target.value)}/>
+                onChange={(e) => onChangeParameter(fullProperty, e.target.value)} disabled={disabled}/>
         </FormGroup>
     );
 };

diff --git a/web/client/reducers/__tests__/print-test.js b/web/client/reducers/__tests__/print-test.js
@@ -263,4 +263,10 @@ describe('Test the print reducer', () => {
         expect(state.map.layers[0].title).toBe('Layer001');
         expect(state.map.projection).toBe('EPSG:4326');
     });
+    it('default legend options', () => {
+        const state = print(undefined, {});
+        expect(state.spec.iconsWidth).toBe(24);
+        expect(state.spec.iconsWidth).toBe(24);
+        expect(state.spec.forceIconsSize).toBeFalsy();
+    });
 });
diff --git a/web/client/reducers/print.js b/web/client/reducers/print.js
@@ -28,7 +28,8 @@ import set from "lodash/set";
 
 const initialSpec = {
     antiAliasing: true,
-    iconSize: 24,
+    iconsWidth: 24,
+    iconsHeight: 24,
     legendDpi: 96,
     fontFamily: "Verdana",
     fontSize: 8,

diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json
@@ -759,9 +759,11 @@
             },
             "legend": {
                 "font": "Beschriftungseinstellungen:",
-                "forceLabels": "Beschriftungen erzwingen:",
-                "antiAliasing": "Anti Aliasing Schrift:",
-                "iconsSize": "Symbolgröße:",
+                "forceLabels": "Beschriftungen erzwingen",
+                "antiAliasing": "Anti Aliasing Schrift",
+                "forceIconsSize": "Überschreiben Sie die Symbolgröße",
+                "iconsWidth": "Breite der Symbole:",
+                "iconsHeight": "Höhe der Symbole:",
                 "dpi": "dpi:"
             },
             "rotation": "Rotation",

diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json
@@ -720,9 +720,11 @@
             },
             "legend": {
                 "font": "Labels Config:",
-                "forceLabels": "Force Labels:",
-                "antiAliasing": "Font Anti Aliasing:",
-                "iconsSize": "Icons size:",
+                "forceLabels": "Force Labels",
+                "antiAliasing": "Font Anti Aliasing",
+                "forceIconsSize": "Override icons size",
+                "iconsWidth": "Icons width:",
+                "iconsHeight": "Icons height:",
                 "dpi": "Dpi:"
             },
             "rotation": "Rotation",

diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json
@@ -720,9 +720,11 @@
             },
             "legend": {
                 "font": "Configuración de las etiquetas:",
-                "forceLabels": "Forzar las etiquetas:",
-                "antiAliasing": "Fuentes Anti Aliasing:",
-                "iconsSize": "Tamaño de los iconos:",
+                "forceLabels": "Forzar las etiquetas",
+                "antiAliasing": "Fuentes Anti Aliasing",
+                "forceIconsSize": "Anular el tamaño de los iconos",
+                "iconsWidth": "Ancho de los iconos:",
+                "iconsHeight": "Altura de los iconos:",
                 "dpi": "ppp:"
             },
             "rotation": "Rotation",

diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json
@@ -720,9 +720,11 @@
             },
             "legend": {
                 "font": "Configuration des étiquettes :",
-                "forceLabels": "Forcer les étiquettes :",
-                "antiAliasing": "Anti crénelage des polices :",
-                "iconsSize": "Taille d'icône :",
+                "forceLabels": "Forcer les étiquettes",
+                "antiAliasing": "Anti crénelage des polices",
+                "forceIconsSize": "Remplacer la taille des icônes",
+                "iconsWidth": "Largeur des icônes :",
+                "iconsHeight": "Hauteur des icônes :",
                 "dpi": "Ppp :"
             },
             "rotation": "Rotation",

diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json
@@ -721,8 +721,10 @@
             "legend": {
                 "font": "Config. Etichette:",
                 "forceLabels": "Forza etichette:",
-                "antiAliasing": "Font Anti Aliasing:",
-                "iconsSize": "Dimensione icone:",
+                "antiAliasing": "Font Anti Aliasing",
+                "forceIconsSize": "Sostituisci la dimensione delle icone",
+                "iconsWidth": "Larghezza delle icone:",
+                "iconsHeight": "Altezza delle icone:",
                 "dpi": "Dpi:"
             },
             "rotation": "Rotation",

diff --git a/web/client/utils/PrintUtils.js b/web/client/utils/PrintUtils.js
@@ -32,6 +32,8 @@ import assign from 'object-assign';
 import sortBy from "lodash/sortBy";
 import head from "lodash/head";
 import isNil from "lodash/isNil";
+import get from "lodash/get";
+import min from "lodash/min";
 
 import { getGridGeoJson } from "./grids/MapGridsUtils";
 
@@ -509,6 +511,17 @@ export const getPrintVendorParams = (layer) => {
     return { "TILED": true };
 };
 
+export const getLegendIconsSize = (spec = {}, layer = {}) => {
+    const forceIconSize = (spec.forceIconsSize || layer.group === 'background');
+    const width = forceIconSize ? spec.iconsWidth : get(layer, 'legendOptions.legendWidth', 12);
+    const height = forceIconSize ? spec.iconsHeight : get(layer, 'legendOptions.legendHeight', 12);
+    return {
+        width,
+        height,
+        minSymbolSize: min([width, height])
+    };
+};
+
 /**
  * Generate the layers (or legend) specification for print.
  * @param  {array} layers  the layers configurations
@@ -566,9 +579,7 @@ export const specCreators = {
                                 LANGUAGE: spec.language || '',
                                 STYLE: layer.style || '',
                                 SCALE: spec.scale,
-                                height: spec.iconSize,
-                                width: spec.iconSize,
-                                minSymbolSize: spec.iconSize,
+                                ...getLegendIconsSize(spec, layer),
                                 LEGEND_OPTIONS: "forceLabels:" + (spec.forceLabels ? "on" : "") + ";fontAntialiasing:" + spec.antiAliasing + ";dpi:" + spec.legendDpi + ";fontStyle:" + (spec.bold && "bold" || (spec.italic && "italic") || '') + ";fontName:" + spec.fontFamily + ";fontSize:" + spec.fontSize,
                                 format: "image/png",
                                 ...assign({}, layer.params)

diff --git a/web/client/utils/__tests__/PrintUtils-test.js b/web/client/utils/__tests__/PrintUtils-test.js
@@ -26,7 +26,8 @@ import {
     getValidatorsChain,
     getPrintVendorParams,
     resetDefaultPrintingService,
-    getDefaultPrintingService
+    getDefaultPrintingService,
+    getLegendIconsSize
 } from '../PrintUtils';
 import ConfigUtils from '../ConfigUtils';
 import { KVP1, REST1 } from '../../test-resources/layers/wmts';
@@ -569,6 +570,38 @@ describe('PrintUtils', () => {
         expect(params).toExist();
         expect(params).toEqual({});
     });
+    it('getLegendIconsSize', () => {
+        // with layer legend options
+        let spec = {forceIconsSize: false};
+        let _layer = {legendOptions: {legendWidth: 20, legendHeight: 20}};
+        let iconSize = getLegendIconsSize(spec, _layer);
+        expect(iconSize.width).toBe(20);
+        expect(iconSize.height).toBe(20);
+        expect(iconSize.minSymbolSize).toBe(20);
+
+        // with override legend options
+        spec = {forceIconsSize: true, iconsWidth: 10, iconsHeight: 10};
+        iconSize = getLegendIconsSize(spec, _layer);
+        expect(iconSize.width).toBe(10);
+        expect(iconSize.height).toBe(10);
+        expect(iconSize.minSymbolSize).toBe(10);
+
+        // with layer as background
+        spec = {forceIconsSize: false, iconsWidth: 10, iconsHeight: 10};
+        _layer = {..._layer, group: "background"};
+        iconSize = getLegendIconsSize(spec, _layer);
+        expect(iconSize.width).toBe(10);
+        expect(iconSize.height).toBe(10);
+        expect(iconSize.minSymbolSize).toBe(10);
+
+        // with default layer legend option
+        spec = {forceIconsSize: false, iconsWidth: 10, iconsHeight: 10};
+        iconSize = getLegendIconsSize(spec, {});
+        expect(iconSize.width).toBe(12);
+        expect(iconSize.height).toBe(12);
+        expect(iconSize.minSymbolSize).toBe(12);
+
+    });
 
     describe('specCreators', () => {
         describe('opacity', () => {