Fix #2990 solve problem to import/export and print for annotation

buildConfig.js

@@ -178,14 +178,6 @@ module.exports = (bundles, themeEntries, paths, extractThemesPlugin, prod, publi
                     host: "dev.mapstore.geo-solutions.it"
                 }
             },
-            '/pdf': {
-                target: "https://dev.mapstore2.geo-solutions.it/mapstore",
-                secure: false
-            },
-            '/mapstore/pdf': {
-                target: "https://dev.mapstore2.geo-solutions.it",
-                secure: false
-            },
             '/proxy': {
                 target: "https://dev.mapstore.geo-solutions.it/mapstore",
                 secure: false,

docs/developer-guide/local-config.md

@@ -154,15 +154,33 @@ Inside defaultState you can set lengthFormula, showLabel, uom:
 <br>For the unit you can chose between:
  - unit length values : ft, m, km, mi, nm standing for feets, meters, kilometers, miles, nautical miles
  - unit area values : sqft, sqm, sqkm, sqmi, sqnm standing for square feets, square meters, square kilometers, square miles, square nautical miles
+- Customize the style for the start/endPoint for the measure features. You can set *startEndPoint* to:
+  - false if you want to disable it
+  - true (defaults will be used)
+  - object for customizing styles by placing *startPointOptions* and/or *endPointOptions*<br>
+ - You can either change the radius or set the fillColor or decide to apply this customization to the first and second-last point for polygons<br>
+For lineString endPointOptions refers to the last point of the polyline
 
-example:<br>
+Example:<br>
 ```
 "measurement": {
   "lengthFormula": "vincenty",
   "showLabel": true,
   "uom": {
     "length": {"unit": "m", "label": "m"},
     "area": {"unit": "sqm", "label": "m²"}
+  },
+  "startEndPoint": {
+    "startPointOptions": {
+        "radius": 3,
+        "fillColor": "green",
+        "applyToPolygon": false
+    },
+    "endPointOptions": {
+        "radius": 3,
+        "fillColor": "red",
+        "applyToPolygon": false
+    }
   }
 }
 ```

web/client/components/map/openlayers/MeasurementSupport.jsx

@@ -14,10 +14,12 @@ const ol = require('openlayers');
 const wgs84Sphere = new ol.Sphere(6378137);
 const {reprojectGeoJson, reproject, calculateAzimuth, calculateDistance, transformLineToArcs} = require('../../../utils/CoordinatesUtils');
 const {convertUom, getFormattedBearingValue} = require('../../../utils/MeasureUtils');
+const {startEndPolylineStyle} = require('./VectorStyle');
 const {getMessageById} = require('../../../utils/LocaleUtils');
 
 class MeasurementSupport extends React.Component {
     static propTypes = {
+        startEndPoint: PropTypes.object,
         map: PropTypes.object,
         projection: PropTypes.string,
         measurement: PropTypes.object,
@@ -32,6 +34,16 @@ class MeasurementSupport extends React.Component {
     };
 
     static defaultProps = {
+        startEndPoint: {
+            startPointOptions: {
+                radius: 3,
+                fillColor: "green"
+            },
+            endPointOptions: {
+                radius: 3,
+                fillColor: "red"
+            }
+        },
         updateOnMouseMove: false
     };
 
@@ -84,6 +96,7 @@ class MeasurementSupport extends React.Component {
         var vector;
         var draw;
         var geometryType;
+        let {startEndPoint} = newProps.measurement;
         this.continueLineMsg = getMessageById(this.context.messages, "measureSupport.continueLine");
         this.continuePolygonMsg = getMessageById(this.context.messages, "measureSupport.continuePolygon");
 
@@ -93,25 +106,34 @@ class MeasurementSupport extends React.Component {
         }
         // create a layer to draw on
         this.source = new ol.source.Vector();
+        let styles = [
+            new ol.style.Style({
+            fill: new ol.style.Fill({
+                color: 'rgba(255, 255, 255, 0.2)'
+            }),
+            stroke: new ol.style.Stroke({
+                color: '#ffcc33',
+                width: 2
+            }),
+            image: new ol.style.Circle({
+                radius: 7,
+                fill: new ol.style.Fill({
+                    color: '#ffcc33'
+                })
+            })
+        })];
+        let startEndPointStyles = [];
+        let applyStartEndPointStyle = startEndPoint || startEndPoint === true;
+        if (applyStartEndPointStyle || startEndPoint === undefined ) {
+            // if startPointOptions or endPointOptions is undefined it will use the default values set in VectorStyle for that point
+            let options = applyStartEndPointStyle ? startEndPoint === undefined ? {} : startEndPoint : newProps.startEndPoint;
+            startEndPointStyles = startEndPolylineStyle(options.startPointOptions, options.endPointOptions);
+        }
 
         vector = new ol.layer.Vector({
             source: this.source,
             zIndex: 1000000,
-            style: new ol.style.Style({
-                fill: new ol.style.Fill({
-                    color: 'rgba(255, 255, 255, 0.2)'
-                }),
-                stroke: new ol.style.Stroke({
-                    color: '#ffcc33',
-                    width: 2
-                }),
-                image: new ol.style.Circle({
-                    radius: 7,
-                    fill: new ol.style.Fill({
-                        color: '#ffcc33'
-                    })
-                })
-            })
+            style: [...styles, ...startEndPointStyles]
         });
 
         this.props.map.addLayer(vector);

web/client/components/map/openlayers/VectorStyle.js

@@ -19,36 +19,65 @@ const image = new ol.style.Circle({
   stroke: new ol.style.Stroke({color: 'red', width: 1})
 });
 
-const lastPointOfPolylineStyle = (radius = 5, useSelectedStyle = false) => new ol.style.Style({
-    image: useSelectedStyle ? new ol.style.Circle({
+/**
+ * it creates a custom style for the first point of a polyline
+ * @param {object} options possible configuration of start point
+ * @param {number} options.radius radius of the circle
+ * @param {string} options.fillColor ol color for the circle fill style
+ * @param {boolean} options.applyToPolygon tells if this style can be applied to a polygon
+ * @return {ol.style.Style} style of the point
+*/
+const firstPointOfPolylineStyle = ({radius = 5, fillColor = 'green', applyToPolygon = false}) => new ol.style.Style({
+    image: new ol.style.Circle({
         radius,
         fill: new ol.style.Fill({
-            color: 'red'
+            color: fillColor
         })
-    }) : null,
+    }),
     geometry: function(feature) {
         const geom = feature.getGeometry();
         const type = geom.getType();
+        if (!applyToPolygon && type === "Polygon") {
+            return null;
+        }
         let coordinates = type === "Polygon" ? geom.getCoordinates()[0] : geom.getCoordinates();
-        return new ol.geom.Point(coordinates.length > 3 ? coordinates[coordinates.length - (type === "Polygon" ? 2 : 1)] : last(coordinates));
+        return coordinates.length > 1 ? new ol.geom.Point(head(coordinates)) : null;
     }
 });
 
-const firstPointOfPolylineStyle = (radius = 5, useSelectedStyle = false) =>new ol.style.Style({
-    image: useSelectedStyle ? new ol.style.Circle({
+/**
+ * it creates a custom style for the last point of a polyline
+ * @param {object} options possible configuration of start point
+ * @param {number} options.radius radius of the circle
+ * @param {string} options.fillColor ol color for the circle fill style
+ * @param {boolean} options.applyToPolygon tells if this style can be applied to a polygon
+ * @return {ol.style.Style} style of the point
+*/
+const lastPointOfPolylineStyle = ({radius = 5, fillColor = 'red', applyToPolygon = false}) => new ol.style.Style({
+    image: new ol.style.Circle({
         radius,
         fill: new ol.style.Fill({
-            color: 'green'
+            color: fillColor
         })
-    }) : null,
+    }),
     geometry: function(feature) {
         const geom = feature.getGeometry();
         const type = geom.getType();
+        if (!applyToPolygon && type === "Polygon") {
+            return null;
+        }
         let coordinates = type === "Polygon" ? geom.getCoordinates()[0] : geom.getCoordinates();
-        return coordinates.length > 1 ? new ol.geom.Point(head(coordinates)) : null;
+        return new ol.geom.Point(coordinates.length > 3 ? coordinates[coordinates.length - (type === "Polygon" ? 2 : 1)] : last(coordinates));
     }
 });
 
+/**
+    creates styles to highlight/customize start and end point of a polylin
+*/
+const startEndPolylineStyle = (startPointOptions, endPointOptions) => {
+    return [firstPointOfPolylineStyle(startPointOptions), lastPointOfPolylineStyle(endPointOptions)];
+};
+
 const getTextStyle = (tempStyle, valueText, highlight = false) => {
 
     return new ol.style.Style({
@@ -251,15 +280,13 @@ function getMarkerStyle(options) {
 const getValidStyle = (geomType, options = { style: defaultStyles}, isDrawing, textValues, fallbackStyle, radius = 0 ) => {
     let tempStyle = options.style[geomType] || options.style;
     if (geomType === "MultiLineString" || geomType === "LineString") {
-        return [
+        let styles = [
             new ol.style.Style({
                 stroke: options.style.useSelectedStyle ? new ol.style.Stroke({
                     color: [255, 255, 255, 1],
                     width: tempStyle.weight + 2
                 }) : null
             }),
-            lastPointOfPolylineStyle(tempStyle.weight, options.style.useSelectedStyle),
-            firstPointOfPolylineStyle(tempStyle.weight, options.style.useSelectedStyle),
             new ol.style.Style(tempStyle ? {
                 stroke: new ol.style.Stroke( tempStyle && tempStyle.stroke ? tempStyle.stroke : {
                     color: colorToRgbaStr(options.style && tempStyle.color || "#0000FF", tempStyle.opacity || 1),
@@ -275,7 +302,8 @@ const getValidStyle = (geomType, options = { style: defaultStyles}, isDrawing, t
                 })
             })
         ];
-
+        let startEndPointStyles = options.style.useSelectedStyle ? startEndPolylineStyle({radius: tempStyle.weight, applyToPolygon: true}, {radius: tempStyle.weight, applyToPolygon: true}) : [];
+        return [...styles, ...startEndPointStyles];
     }
 
     if ((geomType === "MultiPoint" || geomType === "Point") && (tempStyle.iconUrl || tempStyle.iconGlyph) ) {
@@ -319,27 +347,27 @@ const getValidStyle = (geomType, options = { style: defaultStyles}, isDrawing, t
         return [getTextStyle(tempStyle, textValues[0], options.style.useSelectedStyle)];
     }
     if (geomType === "MultiPolygon" || geomType === "Polygon") {
-        return [
-               new ol.style.Style({
-                   stroke: options.style.useSelectedStyle ? new ol.style.Stroke({
-                       color: [255, 255, 255, 1],
-                       width: tempStyle.weight + 2
-                   }) : null
-               }),
-               lastPointOfPolylineStyle(tempStyle.weight, options.style.useSelectedStyle),
-               firstPointOfPolylineStyle(tempStyle.weight, options.style.useSelectedStyle),
-               new ol.style.Style({
-                   stroke: new ol.style.Stroke( tempStyle.stroke ? tempStyle.stroke : {
-                       color: colorToRgbaStr(options.style && tempStyle.color || "#0000FF", tempStyle.opacity || 1),
-                       lineDash: options.style.highlight ? [10] : [0],
-                       width: tempStyle.weight || 1
-                   }),
-                   image: isDrawing ? image : null,
-                   fill: new ol.style.Fill(tempStyle.fill ? tempStyle.fill : {
-                       color: colorToRgbaStr(options.style && tempStyle.fillColor || "#0000FF", tempStyle.fillOpacity || 1)
-                   })
-               })
-            ];
+        let styles = [
+            new ol.style.Style({
+                stroke: options.style.useSelectedStyle ? new ol.style.Stroke({
+                    color: [255, 255, 255, 1],
+                    width: tempStyle.weight + 2
+                }) : null
+            }),
+            new ol.style.Style({
+                stroke: new ol.style.Stroke( tempStyle.stroke ? tempStyle.stroke : {
+                    color: colorToRgbaStr(options.style && tempStyle.color || "#0000FF", tempStyle.opacity || 1),
+                    lineDash: options.style.highlight ? [10] : [0],
+                    width: tempStyle.weight || 1
+                }),
+                image: isDrawing ? image : null,
+                fill: new ol.style.Fill(tempStyle.fill ? tempStyle.fill : {
+                    color: colorToRgbaStr(options.style && tempStyle.fillColor || "#0000FF", tempStyle.fillOpacity || 1)
+                })
+            })
+        ];
+        let startEndPointStyles = options.style.useSelectedStyle ? startEndPolylineStyle({radius: tempStyle.weight, applyToPolygon: true}, {radius: tempStyle.weight, applyToPolygon: true}) : [];
+        return [...styles, ...startEndPointStyles];
     }
     return fallbackStyle;
 };
@@ -491,6 +519,9 @@ function getStyle(options, isDrawing = false, textValues = []) {
 
 
 module.exports = {
+    startEndPolylineStyle,
+    lastPointOfPolylineStyle,
+    firstPointOfPolylineStyle,
     selectedStyleConfiguration,
     getStyle,
     getMarkerStyle,

web/client/components/print/MapPreview.jsx

@@ -96,11 +96,13 @@ class MapPreview extends React.Component {
                         key={feature.id}
                         type={feature.type}
                         geometry={feature.geometry}
+                        features={feature.features}
                         msId={feature.id}
                         featuresCrs={ layer.featuresCrs || 'EPSG:4326' }
                         layerStyle={layer.style}
                         style={ feature.style || layer.style || null }
-                        properties={feature.properties}/>
+                        properties={feature.properties}
+                    />
                 );
             });
         }

web/client/epics/__tests__/annotations-test.js

@@ -20,17 +20,19 @@ const {editAnnotation, confirmRemoveAnnotation, saveAnnotation, cancelEditAnnota
     setStyle, highlight, cleanHighlight, download, loadAnnotations, SET_STYLE, toggleStyle,
     resetCoordEditor, changeRadius, changeText, changeSelected
 } = require('../../actions/annotations');
+const {TOGGLE_CONTROL, toggleControl} = require('../../actions/controls');
 const {addAnnotationsLayerEpic, editAnnotationEpic, removeAnnotationEpic, saveAnnotationEpic, newAnnotationEpic, addAnnotationEpic,
     disableInteractionsEpic, cancelEditAnnotationEpic, startDrawingMultiGeomEpic, endDrawGeomEpic, endDrawTextEpic, cancelTextAnnotationsEpic,
     setStyleEpic, restoreStyleEpic, highlighAnnotationEpic, cleanHighlightAnnotationEpic, closeAnnotationsEpic, confirmCloseAnnotationsEpic,
     downloadAnnotations, onLoadAnnotations, onChangedSelectedFeatureEpic, onBackToEditingFeatureEpic, redrawOnChangeRadiusTextEpic,
-    editSelectedFeatureEpic, editCircleFeatureEpic
+    editSelectedFeatureEpic, editCircleFeatureEpic, closeMeasureToolEpic
 } = require('../annotations')({});
 const rootEpic = combineEpics(addAnnotationsLayerEpic, editAnnotationEpic, removeAnnotationEpic, saveAnnotationEpic, newAnnotationEpic, addAnnotationEpic,
     disableInteractionsEpic, cancelEditAnnotationEpic, startDrawingMultiGeomEpic, endDrawGeomEpic, endDrawTextEpic, cancelTextAnnotationsEpic,
     setStyleEpic, restoreStyleEpic, highlighAnnotationEpic, cleanHighlightAnnotationEpic, closeAnnotationsEpic, confirmCloseAnnotationsEpic,
     downloadAnnotations, onLoadAnnotations, onChangedSelectedFeatureEpic, onBackToEditingFeatureEpic, redrawOnChangeRadiusTextEpic,
-    editSelectedFeatureEpic, editCircleFeatureEpic);
+    editSelectedFeatureEpic, editCircleFeatureEpic, closeMeasureToolEpic
+);
 const epicMiddleware = createEpicMiddleware(rootEpic);
 const mockStore = configureMockStore([epicMiddleware]);
 const {testEpic, addTimeoutEpic, TEST_TIMEOUT} = require('./epicTestUtils');
@@ -526,5 +528,28 @@ describe('annotations Epics', () => {
         const action = changeSelected(polygonCoords, 200, undefined);
         store.dispatch(action);
     });
+    it('opening annotations closing measure tool', (done) => {
+        store = mockStore({
+            controls: {
+                annotations: {
+                    enabled: true
+                },
+                measure: {
+                    enabled: true
+                }
+            }
+        });
+
+        store.subscribe(() => {
+            const actions = store.getActions();
+            if (actions.length >= 2) {
+                expect(actions[1].type).toBe(TOGGLE_CONTROL);
+                expect(actions[1].control).toBe("measure");
+                done();
+            }
+        });
+        const action = toggleControl("annotations");
+        store.dispatch(action);
+    });
 
 });

web/client/epics/annotations.js

@@ -325,6 +325,15 @@ module.exports = (viewer) => ({
             }
             return Rx.Observable.empty();
         }),
+        /**
+        this epic closes the measure tool becasue can conflict with the draw interaction in others
+        */
+    closeMeasureToolEpic: (action$, store) => action$.ofType(TOGGLE_CONTROL)
+        .filter((action) => action.control === 'annotations' && store.getState().controls.annotations.enabled)
+        .switchMap(() => {
+            const state = store.getState();
+            return state.controls.measure.enabled ? Rx.Observable.from([toggleControl("measure")]) : Rx.Observable.empty();
+        }),
     closeAnnotationsEpic: (action$, store) => action$.ofType(TOGGLE_CONTROL)
         .filter((action) => action.control === 'annotations' && !store.getState().controls.annotations.enabled)
         .switchMap(() => {

web/client/plugins/Annotations.jsx

@@ -200,6 +200,8 @@ const AnnotationsPlugin = connect(annotationsSelector, {
 
 module.exports = {
     AnnotationsPlugin: assign(AnnotationsPlugin, {
+            disablePluginIf: "{state('mapType') === 'cesium'}"
+        }, {
         BurgerMenu: {
             name: 'annotations',
             position: 2000,