qwc2 2025.10.9 → 2025.10.14

package/utils/IdentifyUtils.js

@@ -1,12 +1,448 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _createForOfIteratorHelper(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(!t){if(Array.isArray(r)||(t=_unsupportedIterableToArray(r))||e&&r&&"number"==typeof r.length){t&&(r=t);var _n=0,F=function F(){};return{s:F,n:function n(){return _n>=r.length?{done:!0}:{done:!1,value:r[_n++]}},e:function e(r){throw r},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,u=!1;return{s:function s(){t=t.call(r)},n:function n(){var r=t.next();return a=r.done,r},e:function e(r){u=!0,o=r},f:function f(){try{a||null==t["return"]||t["return"]()}finally{if(u)throw o}}}}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2016-2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import axios from"axios";import geojsonBbox from"geojson-bounding-box";import isEmpty from"lodash.isempty";import ol from"openlayers";import url from"url";import{v4 as uuidv4}from"uuid";import{LayerRole}from"../actions/layers";import ConfigUtils from"../utils/ConfigUtils";import CoordinatesUtils from"../utils/CoordinatesUtils";import LayerUtils from"../utils/LayerUtils";import MapUtils from"../utils/MapUtils";import VectorLayerUtils from"./VectorLayerUtils";function identifyRequestParams(layer,queryLayers,projection,params){var _layer$format;var format="text/plain";var infoFormats=layer.infoFormats||[];if(infoFormats.includes("text/xml")&&(layer.serverType==="qgis"||infoFormats.length===1)){format="text/xml"}else if(infoFormats.includes("application/geojson")){format="application/geojson"}else if(infoFormats.includes("application/geo+json")){format="application/geo+json"}else if(infoFormats.includes("application/json")){format="application/json"}else if(infoFormats.includes("text/xml;subtype=gml/3.2.1")){format="text/xml;subtype=gml/3.2.1"}else if(infoFormats.includes("text/xml;subtype=gml/3.2.0")){format="text/xml;subtype=gml/3.2.0"}else if(infoFormats.includes("text/xml;subtype=gml/3.2")){format="text/xml;subtype=gml/3.2"}else if(infoFormats.includes("text/xml;subtype=gml/3.1.1")){format="text/xml;subtype=gml/3.1.1"}else if(infoFormats.includes("text/xml;subtype=gml/3.1.0")){format="text/xml;subtype=gml/3.1.0"}else if(infoFormats.includes("text/xml;subtype=gml/3.1")){format="text/xml;subtype=gml/3.1"}else if(infoFormats.includes("text/xml;subtype=gml/3.0")){format="text/xml;subtype=gml/3.0"}else if(infoFormats.includes("text/html")){format="text/html"}else if(infoFormats.includes("application/vnd.ogc.gml")){format="application/vnd.ogc.gml"}var styles=(layer.params.STYLES||"").split(",");var styleMap=layer.params.LAYERS.split(",").reduce(function(res,lyr,idx){var _styles$idx;return _objectSpread(_objectSpread({},res),{},_defineProperty({},lyr,(_styles$idx=styles[idx])!==null&&_styles$idx!==void 0?_styles$idx:""))});var queryStyles=queryLayers.split(",").map(function(lyr){var _styleMap$lyr;return(_styleMap$lyr=styleMap[lyr])!==null&&_styleMap$lyr!==void 0?_styleMap$lyr:""}).join(",");return{url:layer.featureInfoUrl.split("?")[0],params:_objectSpread(_objectSpread(_objectSpread({},url.parse(layer.featureInfoUrl,true).query),{},{service:"WMS",version:layer.version,request:"GetFeatureInfo",id:layer.id,layers:queryLayers,query_layers:queryLayers,styles:queryStyles,srs:projection,crs:projection,format:(_layer$format=layer.format)!==null&&_layer$format!==void 0?_layer$format:"image/png",info_format:format,with_geometry:true,with_maptip:false},layer.dimensionValues),params)}}var IdentifyUtils={getQueryLayers:function getQueryLayers(maplayers,map){var queryableLayers=maplayers.filter(function(l){// All non-background WMS layers with a non-empty queryLayers list
-return l.visibility&&l.type==="wms"&&l.role!==LayerRole.BACKGROUND&&(l.queryLayers||[]).length>0});var mapScale=MapUtils.computeForZoom(map.scales,map.zoom);var result=[];queryableLayers.forEach(function(layer){var layers=[];var queryLayers=layer.queryLayers;for(var i=0;i<queryLayers.length;++i){if(layer.externalLayerMap&&layer.externalLayerMap[queryLayers[i]]){var sublayer=LayerUtils.searchSubLayer(layer,"name",queryLayers[i]);var sublayerVisible=LayerUtils.layerScaleInRange(sublayer,mapScale);if(!isEmpty(layer.externalLayerMap[queryLayers[i]].queryLayers)&&sublayerVisible){layers.push(layer.externalLayerMap[queryLayers[i]])}}else if(layers.length>0&&layers[layers.length-1].id===layer.id){layers[layers.length-1].queryLayers.push(queryLayers[i])}else{layers.push(_objectSpread(_objectSpread({},layer),{},{queryLayers:[queryLayers[i]]}))}}result=result.concat(layers)});return result},buildRequest:function buildRequest(layer,queryLayers,center,map){var _layer$params$FILTER;var options=arguments.length>4&&arguments[4]!==undefined?arguments[4]:{};var size=[101,101];var resolution=MapUtils.computeForZoom(map.resolutions,map.zoom);var dx=0.5*resolution*size[0];var dy=0.5*resolution*size[1];var version=layer.version;var bbox=[center[0]-dx,center[1]-dy,center[0]+dx,center[1]+dy];if(CoordinatesUtils.getAxisOrder(map.projection).substr(0,2)==="ne"&&version==="1.3.0"){bbox=[center[1]-dx,center[0]-dy,center[1]+dx,center[0]+dy]}var params=_objectSpread({height:size[0],width:size[1],feature_count:100,x:Math.round(size[0]*0.5),y:Math.round(size[1]*0.5),i:Math.round(size[0]*0.5),j:Math.round(size[1]*0.5),bbox:bbox.join(","),filter:(_layer$params$FILTER=layer.params.FILTER)!==null&&_layer$params$FILTER!==void 0?_layer$params$FILTER:""},options);return identifyRequestParams(layer,queryLayers,map.projection,params)},buildFilterRequest:function buildFilterRequest(layer,queryLayers,filterGeom,map){var options=arguments.length>4&&arguments[4]!==undefined?arguments[4]:{};var params=_objectSpread({feature_count:100,FILTER_GEOM:filterGeom},options);return identifyRequestParams(layer,queryLayers,map.projection,params)},sendRequest:function sendRequest(request,responseHandler){var urlParts=url.parse(request.url,true);urlParts.query=_objectSpread(_objectSpread({},urlParts.query),request.params);delete urlParts.search;var requestUrl=url.format(urlParts);var maxUrlLength=ConfigUtils.getConfigProp("wmsMaxGetUrlLength",null,2048);if(requestUrl.length>maxUrlLength){// Switch to POST if url is too long
-var reqUrlParts=requestUrl.split("?");var options={headers:{"content-type":"application/x-www-form-urlencoded"}};axios.post(reqUrlParts[0],reqUrlParts[1],options).then(function(postResp){responseHandler(postResp.data)})["catch"](function(){axios.get(request.url,{params:request.params}).then(function(getResp){responseHandler(getResp.data)})["catch"](function(){responseHandler(null)})})}else{axios.get(request.url,{params:request.params}).then(function(getResp){responseHandler(getResp.data)})["catch"](function(){responseHandler(null)})}},parseResponse:function parseResponse(response,layer,format,clickPoint,projection,featureInfoReturnsLayerName){var decimals=CoordinatesUtils.getPrecision(projection);var posstr=clickPoint?clickPoint[0].toFixed(decimals)+", "+clickPoint[1].toFixed(decimals):"";var results={};if(["application/json","application/geojson","application/geo+json","GeoJSON"].includes(format)){results=IdentifyUtils.parseGeoJSONResponse(response,projection,layer)}else if(format==="text/xml"){results=IdentifyUtils.parseXmlResponse(response,projection,layer,posstr,featureInfoReturnsLayerName)}else if(format==="application/vnd.ogc.gml"){results=IdentifyUtils.parseGmlResponse(response,projection,layer,posstr)}else if(format.startsWith("text/xml;subtype=gml/3.1")||format.startsWith("text/xml;subtype=gml/3.0")){results=IdentifyUtils.parseGml3Response(response,projection,layer)}else if(format.startsWith("text/xml;subtype=gml/3.2")){results=IdentifyUtils.parseGml32Response(response,projection,layer)}else if(format==="text/plain"){results[layer.name]=[{type:"text",text:response,id:posstr,layername:layer.name,layertitle:layer.title}]}else if(format==="text/html"){results[layer.name]=[{type:"html",text:response,id:posstr,layername:layer.name,layertitle:layer.title}]}// Add clickPos, bounding box, displayname and layer name / title
-for(var _i=0,_Object$keys=Object.keys(results);_i<_Object$keys.length;_i++){var layername=_Object$keys[_i];var _iterator=_createForOfIteratorHelper(results[layername]),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var _item$layertitle;var item=_step.value;if(item.type==="Feature"&&!item.bbox&&item.geometry){item.crs=projection;item.bbox=geojsonBbox(item)}item.clickPos=clickPoint;item.displayname=IdentifyUtils.determineDisplayName(layer,layername,item);item.layertitle=(_item$layertitle=item.layertitle)!==null&&_item$layertitle!==void 0?_item$layertitle:layername}}catch(err){_iterator.e(err)}finally{_iterator.f()}}return results},determineDisplayName:function determineDisplayName(layer,layername,item){var properties=item.properties||{};if(item.displayfield){if(properties[item.displayfield]&&properties[item.displayfield][0]!=="<"){return properties[item.displayfield]}}var sublayer=LayerUtils.searchSubLayer(layer,"name",layername);if(sublayer&&sublayer.displayField){if(properties[sublayer.displayField]&&properties[sublayer.displayField][0]!=="<"){return properties[sublayer.displayField]}}return properties.name||properties.Name||properties.NAME||item.id},parseXmlFeature:function parseXmlFeature(feature,geometrycrs,id,featurereport,displayfield,layername,layertitle,layerinfo,translations){var featureResult={};featureResult.type="Feature";featureResult.id=id;featureResult.featurereport=featurereport;featureResult.displayfield=displayfield;featureResult.layername=layername;featureResult.layertitle=layertitle;featureResult.layerinfo=layerinfo;var bboxes=feature.getElementsByTagName("BoundingBox");if(bboxes.length>0){var bbox=bboxes[0];var crs=bbox.attributes.CRS?bbox.attributes.CRS.value:bbox.attributes.SRS.value;featureResult.bbox=[parseFloat(bbox.attributes.minx.value),parseFloat(bbox.attributes.miny.value),parseFloat(bbox.attributes.maxx.value),parseFloat(bbox.attributes.maxy.value)];featureResult.crs=crs}featureResult.properties={};var attrmapping={};var attributes=feature.getElementsByTagName("Attribute");for(var i=0;i<attributes.length;++i){var attribute=attributes[i];if(attribute.attributes.name.value==="geometry"){var wkt=attribute.attributes.value.value;var geoJsonFeature=VectorLayerUtils.wktToGeoJSON(wkt,geometrycrs,featureResult.crs);if(geoJsonFeature){featureResult.geometry=geoJsonFeature.geometry}}else{var _translations$layers$,_translations$layers;var attrname=(_translations$layers$=translations===null||translations===void 0||(_translations$layers=translations.layers)===null||_translations$layers===void 0||(_translations$layers=_translations$layers[layername])===null||_translations$layers===void 0||(_translations$layers=_translations$layers.fields)===null||_translations$layers===void 0?void 0:_translations$layers[attribute.attributes.name.value])!==null&&_translations$layers$!==void 0?_translations$layers$:attribute.attributes.name.value;featureResult.properties[attrname]=attribute.attributes.value.value;if(attribute.attributes.attrname){attrmapping[attrname]=attribute.attributes.attrname.value}}}var htmlContent=feature.getElementsByTagName("HtmlContent");if(htmlContent.length>0){featureResult.properties.htmlContent=htmlContent[0].textContent;featureResult.properties.htmlContentInline=htmlContent[0].getAttribute("inline")==="1"||htmlContent[0].getAttribute("inline")==="true"}if(!isEmpty(attrmapping)){featureResult.attribnames=attrmapping}return featureResult},parseXmlResponse:function parseXmlResponse(response,geometrycrs,layer){var _doc$firstChild,_doc$firstChild$getEl,_this=this;var posstr=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;var featureInfoReturnsLayerName=arguments.length>4&&arguments[4]!==undefined?arguments[4]:false;var mapLayers=arguments.length>5&&arguments[5]!==undefined?arguments[5]:null;var parser=new DOMParser;var doc=parser.parseFromString(response,"text/xml");var layersEl=[].slice.call(((_doc$firstChild=doc.firstChild)===null||_doc$firstChild===void 0||(_doc$firstChild$getEl=_doc$firstChild.getElementsByTagName)===null||_doc$firstChild$getEl===void 0?void 0:_doc$firstChild$getEl.call(_doc$firstChild,"Layer"))||[]);var result={};var idcounter=0;var _iterator2=_createForOfIteratorHelper(layersEl),_step2;try{var _loop=function _loop(){var layerEl=_step2.value;var featurereport=layerEl.attributes.featurereport?layerEl.attributes.featurereport.value:null;var displayfield=layerEl.attributes.displayfield?layerEl.attributes.displayfield.value:null;var layername="";var layertitle="";if(layerEl.attributes.layername){var _layer$translations$l,_layer$translations;layername=layerEl.attributes.layername.value;layertitle=(_layer$translations$l=(_layer$translations=layer.translations)===null||_layer$translations===void 0||(_layer$translations=_layer$translations.layertree)===null||_layer$translations===void 0?void 0:_layer$translations[layername])!==null&&_layer$translations$l!==void 0?_layer$translations$l:layerEl.attributes.name.value}else if(featureInfoReturnsLayerName){var _LayerUtils$searchSub,_LayerUtils$searchSub2;layername=layerEl.attributes.name.value;layertitle=(_LayerUtils$searchSub=(_LayerUtils$searchSub2=LayerUtils.searchSubLayer(layer,"name",layername))===null||_LayerUtils$searchSub2===void 0?void 0:_LayerUtils$searchSub2.title)!==null&&_LayerUtils$searchSub!==void 0?_LayerUtils$searchSub:layername}else{var _LayerUtils$searchSub3,_LayerUtils$searchSub4;layertitle=layerEl.attributes.name.value;layername=(_LayerUtils$searchSub3=(_LayerUtils$searchSub4=LayerUtils.searchSubLayer(layer,"title",layertitle))===null||_LayerUtils$searchSub4===void 0?void 0:_LayerUtils$searchSub4.name)!==null&&_LayerUtils$searchSub3!==void 0?_LayerUtils$searchSub3:layertitle}var layerinfo=layerEl.attributes.layerinfo?layerEl.attributes.layerinfo.value:null;var features=[].slice.call(layerEl.getElementsByTagName("Feature"));if(features.length>0){result[layername]=features.map(function(feature){return _this.parseXmlFeature(feature,geometrycrs,feature.attributes.id.value,featurereport,displayfield,layername,layertitle,layerinfo,layer.translations)})}else{var attributes=[].slice.call(layerEl.getElementsByTagName("Attribute"));if(attributes.length>0){var id=posstr||""+idcounter++;result[layername]=[_this.parseXmlFeature(layerEl,geometrycrs,id,featurereport,displayfield,layername,layertitle,layerinfo)]}}};for(_iterator2.s();!(_step2=_iterator2.n()).done;){_loop()}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}return result},parseGeoJSONResponse:function parseGeoJSONResponse(response,geometrycrs,layer){var result={};(response.features||[]).map(function(feature){// Deduce layer name as far as possible from feature id
-var id=feature.id||(feature.properties||{}).OBJECTID||uuidv4();if(result[layer.name]===undefined){result[layer.name]=[]}var geometry=feature.geometry;if(geometry&&response.crs){var _response$crs$propert,_response$crs$propert2;// Reproject geometry only if there is crs information in GetFeatureInfo response
-geometry=VectorLayerUtils.reprojectGeometry(geometry,(_response$crs$propert=(_response$crs$propert2=response.crs.properties)===null||_response$crs$propert2===void 0?void 0:_response$crs$propert2.name)!==null&&_response$crs$propert!==void 0?_response$crs$propert:"EPSG:4326",geometrycrs)}result[layer.name].push(_objectSpread(_objectSpread({},feature),{},{id:id,geometry:geometry,layername:layer.name,layertitle:layer.title}))});return result},parseGmlResponse:function parseGmlResponse(response,geometrycrs,layer,posstr){var parser=new DOMParser;var doc=parser.parseFromString(response,"text/xml");var result={};var msGMLOutput=doc.getElementsByTagName("msGMLOutput")[0];if(msGMLOutput){var count=0;var _iterator3=_createForOfIteratorHelper([].slice.call(msGMLOutput.children)),_step3;try{for(_iterator3.s();!(_step3=_iterator3.n()).done;){var layerEl=_step3.value;var layerName=layerEl.nodeName.replace(/_layer$/,"");var featureName=layerName+"_feature";result[layerName]=[];var _iterator4=_createForOfIteratorHelper([].slice.call(layerEl.getElementsByTagName(featureName))),_step4;try{for(_iterator4.s();!(_step4=_iterator4.n()).done;){var featureEl=_step4.value;var context=[{featureType:featureName}];var feature=new ol.format.GeoJSON().writeFeatureObject(new ol.format.GML2().readFeatureElement(featureEl,context));feature.id=count++;feature.layername=layer.name;feature.layertitle=layer.title;delete feature.properties.boundedBy;result[layerName].push(feature)}}catch(err){_iterator4.e(err)}finally{_iterator4.f()}}}catch(err){_iterator3.e(err)}finally{_iterator3.f()}}else{result[layer.name]=[{type:"text",text:response,id:posstr}]}return result},parseGml3Response:function parseGml3Response(response,geometrycrs,layer){var _fmtGeoJson$writeFeat,_fmtGeoJson$writeFeat2;var fmtGml3=new ol.format.GML3;var fmtGeoJson=new ol.format.GeoJSON;return _defineProperty({},layer.name,(_fmtGeoJson$writeFeat=(_fmtGeoJson$writeFeat2=fmtGeoJson.writeFeaturesObject(fmtGml3.readFeatures(response)))===null||_fmtGeoJson$writeFeat2===void 0?void 0:_fmtGeoJson$writeFeat2.features)!==null&&_fmtGeoJson$writeFeat!==void 0?_fmtGeoJson$writeFeat:[])},parseGml32Response:function parseGml32Response(response,geometrycrs,layer){var _fmtGeoJson$writeFeat3,_fmtGeoJson$writeFeat4;var fmtGml32=new ol.format.GML32;var fmtGeoJson=new ol.format.GeoJSON;return _defineProperty({},layer.name,(_fmtGeoJson$writeFeat3=(_fmtGeoJson$writeFeat4=fmtGeoJson.writeFeaturesObject(fmtGml32.readFeatures(response)))===null||_fmtGeoJson$writeFeat4===void 0?void 0:_fmtGeoJson$writeFeat4.features)!==null&&_fmtGeoJson$writeFeat3!==void 0?_fmtGeoJson$writeFeat3:[])}};export default IdentifyUtils;
+ */
+
+import axios from 'axios';
+import geojsonBbox from 'geojson-bounding-box';
+import isEmpty from 'lodash.isempty';
+import ol from 'openlayers';
+import url from 'url';
+import { v4 as uuidv4 } from 'uuid';
+import { LayerRole } from '../actions/layers';
+import ConfigUtils from '../utils/ConfigUtils';
+import CoordinatesUtils from '../utils/CoordinatesUtils';
+import LayerUtils from '../utils/LayerUtils';
+import MapUtils from '../utils/MapUtils';
+import VectorLayerUtils from './VectorLayerUtils';
+function identifyRequestParams(layer, queryLayers, projection, params) {
+  var _layer$format;
+  var format = 'text/plain';
+  var infoFormats = layer.infoFormats || [];
+  if (infoFormats.includes('text/xml') && (layer.serverType === 'qgis' || infoFormats.length === 1)) {
+    format = 'text/xml';
+  } else if (infoFormats.includes('application/geojson')) {
+    format = 'application/geojson';
+  } else if (infoFormats.includes('application/geo+json')) {
+    format = 'application/geo+json';
+  } else if (infoFormats.includes('application/json')) {
+    format = 'application/json';
+  } else if (infoFormats.includes('text/xml;subtype=gml/3.2.1')) {
+    format = 'text/xml;subtype=gml/3.2.1';
+  } else if (infoFormats.includes('text/xml;subtype=gml/3.2.0')) {
+    format = 'text/xml;subtype=gml/3.2.0';
+  } else if (infoFormats.includes('text/xml;subtype=gml/3.2')) {
+    format = 'text/xml;subtype=gml/3.2';
+  } else if (infoFormats.includes('text/xml;subtype=gml/3.1.1')) {
+    format = 'text/xml;subtype=gml/3.1.1';
+  } else if (infoFormats.includes('text/xml;subtype=gml/3.1.0')) {
+    format = 'text/xml;subtype=gml/3.1.0';
+  } else if (infoFormats.includes('text/xml;subtype=gml/3.1')) {
+    format = 'text/xml;subtype=gml/3.1';
+  } else if (infoFormats.includes('text/xml;subtype=gml/3.0')) {
+    format = 'text/xml;subtype=gml/3.0';
+  } else if (infoFormats.includes('text/html')) {
+    format = 'text/html';
+  } else if (infoFormats.includes('application/vnd.ogc.gml')) {
+    format = 'application/vnd.ogc.gml';
+  }
+  var styles = (layer.params.STYLES || "").split(',');
+  var styleMap = layer.params.LAYERS.split(',').reduce(function (res, lyr, idx) {
+    var _styles$idx;
+    return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, lyr, (_styles$idx = styles[idx]) !== null && _styles$idx !== void 0 ? _styles$idx : ''));
+  });
+  var queryStyles = queryLayers.split(',').map(function (lyr) {
+    var _styleMap$lyr;
+    return (_styleMap$lyr = styleMap[lyr]) !== null && _styleMap$lyr !== void 0 ? _styleMap$lyr : '';
+  }).join(",");
+  return {
+    url: layer.featureInfoUrl.split("?")[0],
+    params: _objectSpread(_objectSpread(_objectSpread({}, url.parse(layer.featureInfoUrl, true).query), {}, {
+      service: 'WMS',
+      version: layer.version,
+      request: 'GetFeatureInfo',
+      id: layer.id,
+      layers: queryLayers,
+      query_layers: queryLayers,
+      styles: queryStyles,
+      srs: projection,
+      crs: projection,
+      format: (_layer$format = layer.format) !== null && _layer$format !== void 0 ? _layer$format : 'image/png',
+      info_format: format,
+      with_geometry: true,
+      with_maptip: false
+    }, layer.dimensionValues), params)
+  };
+}
+var IdentifyUtils = {
+  getQueryLayers: function getQueryLayers(maplayers, map) {
+    var queryableLayers = maplayers.filter(function (l) {
+      // All non-background WMS layers with a non-empty queryLayers list
+      return l.visibility && l.type === 'wms' && l.role !== LayerRole.BACKGROUND && (l.queryLayers || []).length > 0;
+    });
+    var mapScale = MapUtils.computeForZoom(map.scales, map.zoom);
+    var result = [];
+    queryableLayers.forEach(function (layer) {
+      var layers = [];
+      var queryLayers = layer.queryLayers;
+      for (var i = 0; i < queryLayers.length; ++i) {
+        if (layer.externalLayerMap && layer.externalLayerMap[queryLayers[i]]) {
+          var sublayer = LayerUtils.searchSubLayer(layer, "name", queryLayers[i]);
+          var sublayerVisible = LayerUtils.layerScaleInRange(sublayer, mapScale);
+          if (!isEmpty(layer.externalLayerMap[queryLayers[i]].queryLayers) && sublayerVisible) {
+            layers.push(layer.externalLayerMap[queryLayers[i]]);
+          }
+        } else if (layers.length > 0 && layers[layers.length - 1].id === layer.id) {
+          layers[layers.length - 1].queryLayers.push(queryLayers[i]);
+        } else {
+          layers.push(_objectSpread(_objectSpread({}, layer), {}, {
+            queryLayers: [queryLayers[i]]
+          }));
+        }
+      }
+      result = result.concat(layers);
+    });
+    return result;
+  },
+  buildRequest: function buildRequest(layer, queryLayers, center, map) {
+    var _layer$params$FILTER;
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    var size = [101, 101];
+    var resolution = MapUtils.computeForZoom(map.resolutions, map.zoom);
+    var dx = 0.5 * resolution * size[0];
+    var dy = 0.5 * resolution * size[1];
+    var version = layer.version;
+    var bbox = [center[0] - dx, center[1] - dy, center[0] + dx, center[1] + dy];
+    if (CoordinatesUtils.getAxisOrder(map.projection).substr(0, 2) === 'ne' && version === '1.3.0') {
+      bbox = [center[1] - dx, center[0] - dy, center[1] + dx, center[0] + dy];
+    }
+    var params = _objectSpread({
+      height: size[0],
+      width: size[1],
+      feature_count: 100,
+      x: Math.round(size[0] * 0.5),
+      y: Math.round(size[1] * 0.5),
+      i: Math.round(size[0] * 0.5),
+      j: Math.round(size[1] * 0.5),
+      bbox: bbox.join(","),
+      filter: (_layer$params$FILTER = layer.params.FILTER) !== null && _layer$params$FILTER !== void 0 ? _layer$params$FILTER : ''
+    }, options);
+    return identifyRequestParams(layer, queryLayers, map.projection, params);
+  },
+  buildFilterRequest: function buildFilterRequest(layer, queryLayers, filterGeom, map) {
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    var params = _objectSpread({
+      feature_count: 100,
+      FILTER_GEOM: filterGeom
+    }, options);
+    return identifyRequestParams(layer, queryLayers, map.projection, params);
+  },
+  sendRequest: function sendRequest(request, responseHandler) {
+    var urlParts = url.parse(request.url, true);
+    urlParts.query = _objectSpread(_objectSpread({}, urlParts.query), request.params);
+    delete urlParts.search;
+    var requestUrl = url.format(urlParts);
+    var maxUrlLength = ConfigUtils.getConfigProp("wmsMaxGetUrlLength", null, 2048);
+    if (requestUrl.length > maxUrlLength) {
+      // Switch to POST if url is too long
+      var reqUrlParts = requestUrl.split("?");
+      var options = {
+        headers: {
+          'content-type': 'application/x-www-form-urlencoded'
+        }
+      };
+      axios.post(reqUrlParts[0], reqUrlParts[1], options).then(function (postResp) {
+        responseHandler(postResp.data);
+      })["catch"](function () {
+        axios.get(request.url, {
+          params: request.params
+        }).then(function (getResp) {
+          responseHandler(getResp.data);
+        })["catch"](function () {
+          responseHandler(null);
+        });
+      });
+    } else {
+      axios.get(request.url, {
+        params: request.params
+      }).then(function (getResp) {
+        responseHandler(getResp.data);
+      })["catch"](function () {
+        responseHandler(null);
+      });
+    }
+  },
+  parseResponse: function parseResponse(response, layer, format, clickPoint, projection, featureInfoReturnsLayerName) {
+    var decimals = CoordinatesUtils.getPrecision(projection);
+    var posstr = clickPoint ? clickPoint[0].toFixed(decimals) + ", " + clickPoint[1].toFixed(decimals) : "";
+    var results = {};
+    if (["application/json", "application/geojson", "application/geo+json", "GeoJSON"].includes(format)) {
+      results = IdentifyUtils.parseGeoJSONResponse(response, projection, layer);
+    } else if (format === "text/xml") {
+      results = IdentifyUtils.parseXmlResponse(response, projection, layer, posstr, featureInfoReturnsLayerName);
+    } else if (format === "application/vnd.ogc.gml") {
+      results = IdentifyUtils.parseGmlResponse(response, projection, layer, posstr);
+    } else if (format.startsWith("text/xml;subtype=gml/3.1") || format.startsWith("text/xml;subtype=gml/3.0")) {
+      results = IdentifyUtils.parseGml3Response(response, projection, layer);
+    } else if (format.startsWith("text/xml;subtype=gml/3.2")) {
+      results = IdentifyUtils.parseGml32Response(response, projection, layer);
+    } else if (format === "text/plain") {
+      results[layer.name] = [{
+        type: "text",
+        text: response,
+        id: posstr,
+        layername: layer.name,
+        layertitle: layer.title
+      }];
+    } else if (format === "text/html") {
+      results[layer.name] = [{
+        type: "html",
+        text: response,
+        id: posstr,
+        layername: layer.name,
+        layertitle: layer.title
+      }];
+    }
+    // Add clickPos, bounding box, displayname and layer name / title
+    for (var _i = 0, _Object$keys = Object.keys(results); _i < _Object$keys.length; _i++) {
+      var layername = _Object$keys[_i];
+      var _iterator = _createForOfIteratorHelper(results[layername]),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _item$layertitle;
+          var item = _step.value;
+          if (item.type === "Feature" && !item.bbox && item.geometry) {
+            item.crs = projection;
+            item.bbox = geojsonBbox(item);
+          }
+          item.clickPos = clickPoint;
+          item.displayname = IdentifyUtils.determineDisplayName(layer, layername, item);
+          item.layertitle = (_item$layertitle = item.layertitle) !== null && _item$layertitle !== void 0 ? _item$layertitle : layername;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+    return results;
+  },
+  determineDisplayName: function determineDisplayName(layer, layername, item) {
+    var properties = item.properties || {};
+    if (item.displayfield) {
+      if (properties[item.displayfield] && properties[item.displayfield][0] !== "<") {
+        return properties[item.displayfield];
+      }
+    }
+    var sublayer = LayerUtils.searchSubLayer(layer, 'name', layername);
+    if (sublayer && sublayer.displayField) {
+      if (properties[sublayer.displayField] && properties[sublayer.displayField][0] !== "<") {
+        return properties[sublayer.displayField];
+      }
+    }
+    return properties.name || properties.Name || properties.NAME || item.id;
+  },
+  parseXmlFeature: function parseXmlFeature(feature, geometrycrs, id, featurereport, displayfield, layername, layertitle, layerinfo, translations) {
+    var featureResult = {};
+    featureResult.type = "Feature";
+    featureResult.id = id;
+    featureResult.featurereport = featurereport;
+    featureResult.displayfield = displayfield;
+    featureResult.layername = layername;
+    featureResult.layertitle = layertitle;
+    featureResult.layerinfo = layerinfo;
+    var bboxes = feature.getElementsByTagName("BoundingBox");
+    if (bboxes.length > 0) {
+      var bbox = bboxes[0];
+      var crs = bbox.attributes.CRS ? bbox.attributes.CRS.value : bbox.attributes.SRS.value;
+      featureResult.bbox = [parseFloat(bbox.attributes.minx.value), parseFloat(bbox.attributes.miny.value), parseFloat(bbox.attributes.maxx.value), parseFloat(bbox.attributes.maxy.value)];
+      featureResult.crs = crs;
+    }
+    featureResult.properties = {};
+    var attrmapping = {};
+    var attributes = feature.getElementsByTagName("Attribute");
+    for (var i = 0; i < attributes.length; ++i) {
+      var attribute = attributes[i];
+      if (attribute.attributes.name.value === "geometry") {
+        var wkt = attribute.attributes.value.value;
+        var geoJsonFeature = VectorLayerUtils.wktToGeoJSON(wkt, geometrycrs, featureResult.crs);
+        if (geoJsonFeature) {
+          featureResult.geometry = geoJsonFeature.geometry;
+        }
+      } else {
+        var _translations$layers$, _translations$layers;
+        var attrname = (_translations$layers$ = translations === null || translations === void 0 || (_translations$layers = translations.layers) === null || _translations$layers === void 0 || (_translations$layers = _translations$layers[layername]) === null || _translations$layers === void 0 || (_translations$layers = _translations$layers.fields) === null || _translations$layers === void 0 ? void 0 : _translations$layers[attribute.attributes.name.value]) !== null && _translations$layers$ !== void 0 ? _translations$layers$ : attribute.attributes.name.value;
+        featureResult.properties[attrname] = attribute.attributes.value.value;
+        if (attribute.attributes.attrname) {
+          attrmapping[attrname] = attribute.attributes.attrname.value;
+        }
+      }
+    }
+    var htmlContent = feature.getElementsByTagName("HtmlContent");
+    if (htmlContent.length > 0) {
+      featureResult.properties.htmlContent = htmlContent[0].textContent;
+      featureResult.properties.htmlContentInline = htmlContent[0].getAttribute("inline") === "1" || htmlContent[0].getAttribute("inline") === "true";
+    }
+    if (!isEmpty(attrmapping)) {
+      featureResult.attribnames = attrmapping;
+    }
+    return featureResult;
+  },
+  parseXmlResponse: function parseXmlResponse(response, geometrycrs, layer) {
+    var _doc$firstChild,
+      _doc$firstChild$getEl,
+      _this = this;
+    var posstr = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    var featureInfoReturnsLayerName = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+    var mapLayers = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(response, "text/xml");
+    var layersEl = [].slice.call(((_doc$firstChild = doc.firstChild) === null || _doc$firstChild === void 0 || (_doc$firstChild$getEl = _doc$firstChild.getElementsByTagName) === null || _doc$firstChild$getEl === void 0 ? void 0 : _doc$firstChild$getEl.call(_doc$firstChild, "Layer")) || []);
+    var result = {};
+    var idcounter = 0;
+    var _iterator2 = _createForOfIteratorHelper(layersEl),
+      _step2;
+    try {
+      var _loop = function _loop() {
+        var layerEl = _step2.value;
+        var featurereport = layerEl.attributes.featurereport ? layerEl.attributes.featurereport.value : null;
+        var displayfield = layerEl.attributes.displayfield ? layerEl.attributes.displayfield.value : null;
+        var layername = "";
+        var layertitle = "";
+        if (layerEl.attributes.layername) {
+          var _layer$translations$l, _layer$translations;
+          layername = layerEl.attributes.layername.value;
+          layertitle = (_layer$translations$l = (_layer$translations = layer.translations) === null || _layer$translations === void 0 || (_layer$translations = _layer$translations.layertree) === null || _layer$translations === void 0 ? void 0 : _layer$translations[layername]) !== null && _layer$translations$l !== void 0 ? _layer$translations$l : layerEl.attributes.name.value;
+        } else if (featureInfoReturnsLayerName) {
+          var _LayerUtils$searchSub, _LayerUtils$searchSub2;
+          layername = layerEl.attributes.name.value;
+          layertitle = (_LayerUtils$searchSub = (_LayerUtils$searchSub2 = LayerUtils.searchSubLayer(layer, 'name', layername)) === null || _LayerUtils$searchSub2 === void 0 ? void 0 : _LayerUtils$searchSub2.title) !== null && _LayerUtils$searchSub !== void 0 ? _LayerUtils$searchSub : layername;
+        } else {
+          var _LayerUtils$searchSub3, _LayerUtils$searchSub4;
+          layertitle = layerEl.attributes.name.value;
+          layername = (_LayerUtils$searchSub3 = (_LayerUtils$searchSub4 = LayerUtils.searchSubLayer(layer, 'title', layertitle)) === null || _LayerUtils$searchSub4 === void 0 ? void 0 : _LayerUtils$searchSub4.name) !== null && _LayerUtils$searchSub3 !== void 0 ? _LayerUtils$searchSub3 : layertitle;
+        }
+        var layerinfo = layerEl.attributes.layerinfo ? layerEl.attributes.layerinfo.value : null;
+        var features = [].slice.call(layerEl.getElementsByTagName("Feature"));
+        if (features.length > 0) {
+          result[layername] = features.map(function (feature) {
+            return _this.parseXmlFeature(feature, geometrycrs, feature.attributes.id.value, featurereport, displayfield, layername, layertitle, layerinfo, layer.translations);
+          });
+        } else {
+          var attributes = [].slice.call(layerEl.getElementsByTagName("Attribute"));
+          if (attributes.length > 0) {
+            var id = posstr || "" + idcounter++;
+            result[layername] = [_this.parseXmlFeature(layerEl, geometrycrs, id, featurereport, displayfield, layername, layertitle, layerinfo)];
+          }
+        }
+      };
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        _loop();
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return result;
+  },
+  parseGeoJSONResponse: function parseGeoJSONResponse(response, geometrycrs, layer) {
+    var result = {};
+    (response.features || []).map(function (feature) {
+      // Deduce layer name as far as possible from feature id
+      var id = feature.id || (feature.properties || {}).OBJECTID || uuidv4();
+      if (result[layer.name] === undefined) {
+        result[layer.name] = [];
+      }
+      var geometry = feature.geometry;
+      if (geometry && response.crs) {
+        var _response$crs$propert, _response$crs$propert2;
+        // Reproject geometry only if there is crs information in GetFeatureInfo response
+        geometry = VectorLayerUtils.reprojectGeometry(geometry, (_response$crs$propert = (_response$crs$propert2 = response.crs.properties) === null || _response$crs$propert2 === void 0 ? void 0 : _response$crs$propert2.name) !== null && _response$crs$propert !== void 0 ? _response$crs$propert : "EPSG:4326", geometrycrs);
+      }
+      result[layer.name].push(_objectSpread(_objectSpread({}, feature), {}, {
+        id: id,
+        geometry: geometry,
+        layername: layer.name,
+        layertitle: layer.title
+      }));
+    });
+    return result;
+  },
+  parseGmlResponse: function parseGmlResponse(response, geometrycrs, layer, posstr) {
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(response, "text/xml");
+    var result = {};
+    var msGMLOutput = doc.getElementsByTagName("msGMLOutput")[0];
+    if (msGMLOutput) {
+      var count = 0;
+      var _iterator3 = _createForOfIteratorHelper([].slice.call(msGMLOutput.children)),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var layerEl = _step3.value;
+          var layerName = layerEl.nodeName.replace(/_layer$/, "");
+          var featureName = layerName + "_feature";
+          result[layerName] = [];
+          var _iterator4 = _createForOfIteratorHelper([].slice.call(layerEl.getElementsByTagName(featureName))),
+            _step4;
+          try {
+            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+              var featureEl = _step4.value;
+              var context = [{
+                featureType: featureName
+              }];
+              var feature = new ol.format.GeoJSON().writeFeatureObject(new ol.format.GML2().readFeatureElement(featureEl, context));
+              feature.id = count++;
+              feature.layername = layer.name;
+              feature.layertitle = layer.title;
+              delete feature.properties.boundedBy;
+              result[layerName].push(feature);
+            }
+          } catch (err) {
+            _iterator4.e(err);
+          } finally {
+            _iterator4.f();
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    } else {
+      result[layer.name] = [{
+        type: "text",
+        text: response,
+        id: posstr
+      }];
+    }
+    return result;
+  },
+  parseGml3Response: function parseGml3Response(response, geometrycrs, layer) {
+    var _fmtGeoJson$writeFeat, _fmtGeoJson$writeFeat2;
+    var fmtGml3 = new ol.format.GML3();
+    var fmtGeoJson = new ol.format.GeoJSON();
+    return _defineProperty({}, layer.name, (_fmtGeoJson$writeFeat = (_fmtGeoJson$writeFeat2 = fmtGeoJson.writeFeaturesObject(fmtGml3.readFeatures(response))) === null || _fmtGeoJson$writeFeat2 === void 0 ? void 0 : _fmtGeoJson$writeFeat2.features) !== null && _fmtGeoJson$writeFeat !== void 0 ? _fmtGeoJson$writeFeat : []);
+  },
+  parseGml32Response: function parseGml32Response(response, geometrycrs, layer) {
+    var _fmtGeoJson$writeFeat3, _fmtGeoJson$writeFeat4;
+    var fmtGml32 = new ol.format.GML32();
+    var fmtGeoJson = new ol.format.GeoJSON();
+    return _defineProperty({}, layer.name, (_fmtGeoJson$writeFeat3 = (_fmtGeoJson$writeFeat4 = fmtGeoJson.writeFeaturesObject(fmtGml32.readFeatures(response))) === null || _fmtGeoJson$writeFeat4 === void 0 ? void 0 : _fmtGeoJson$writeFeat4.features) !== null && _fmtGeoJson$writeFeat3 !== void 0 ? _fmtGeoJson$writeFeat3 : []);
+  }
+};
+export default IdentifyUtils;

package/utils/ImageEditor.js

@@ -4,12 +4,82 @@
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import Painterro from"painterro";import LocaleUtils from"../utils/LocaleUtils";import"../components/widgets/style/ModalDialog.css";export function showImageEditor(imageData,imageDataCallback){// Do old-school JS rather than react portal as portal event bubbling messes up Painterro
-var modalDialogContainer=document.createElement("div");modalDialogContainer.className="modal-dialog-container";var modalDialog=document.createElement("div");modalDialog.className="modal-dialog";modalDialog.style.width="80%";var modalDialogTitle=document.createElement("div");modalDialogTitle.className="modal-dialog-title";var titleIcon=document.createElement("span");titleIcon.className="icon icon-paint";modalDialogTitle.appendChild(titleIcon);var titleLabel=document.createElement("span");titleLabel.innerText=LocaleUtils.tr("imageeditor.title");modalDialogTitle.appendChild(titleLabel);var closeIcon=document.createElement("span");closeIcon.className="icon icon_clickable icon-remove";modalDialogTitle.appendChild(closeIcon);modalDialog.appendChild(modalDialogTitle);var modalDialogBody=document.createElement("div");modalDialogBody.className="modal-dialog-body";modalDialogBody.id="painterro";modalDialogBody.addEventListener("keypress",function(ev){// Prevent i.e. +/- from triggering map zoom
-ev.stopPropagation()});modalDialog.appendChild(modalDialogBody);modalDialogContainer.appendChild(modalDialog);document.body.appendChild(modalDialogContainer);// eslint-disable-next-line
-window.ptro=Painterro({id:"painterro",hiddenTools:["open"],language:LocaleUtils.lang().slice(0,2).toLowerCase(),onBeforeClose:function onBeforeClose(hasUnsaved,doClose){if(hasUnsaved){// eslint-disable-next-line
-if(confirm(LocaleUtils.tr("imageeditor.confirmclose"))){doClose()}}},onClose:function onClose(){window.ptro.hide();delete window.ptro;// Delay to next iteration to ensure ptro event handlers have executed
-setTimeout(function(){document.body.removeChild(modalDialogContainer)},0)},saveHandler:function saveHandler(image,done){imageDataCallback(image.asDataURL("image/jpeg"));done(true);window.ptro.hide();delete window.ptro;// Delay to next iteration to ensure ptro event handlers have executed
-setTimeout(function(){document.body.removeChild(modalDialogContainer)},0)}}).show(imageData);closeIcon.addEventListener("click",function(){// eslint-disable-next-line
-if(confirm(LocaleUtils.tr("imageeditor.confirmclose"))){window.ptro.hide();delete window.ptro;// Delay to next iteration to ensure ptro event handlers have executed
-setTimeout(function(){document.body.removeChild(modalDialogContainer)},0)}})}
+ */
+
+import Painterro from 'painterro';
+import LocaleUtils from '../utils/LocaleUtils';
+import '../components/widgets/style/ModalDialog.css';
+export function showImageEditor(imageData, imageDataCallback) {
+  // Do old-school JS rather than react portal as portal event bubbling messes up Painterro
+  var modalDialogContainer = document.createElement("div");
+  modalDialogContainer.className = "modal-dialog-container";
+  var modalDialog = document.createElement("div");
+  modalDialog.className = "modal-dialog";
+  modalDialog.style.width = '80%';
+  var modalDialogTitle = document.createElement("div");
+  modalDialogTitle.className = "modal-dialog-title";
+  var titleIcon = document.createElement("span");
+  titleIcon.className = "icon icon-paint";
+  modalDialogTitle.appendChild(titleIcon);
+  var titleLabel = document.createElement("span");
+  titleLabel.innerText = LocaleUtils.tr("imageeditor.title");
+  modalDialogTitle.appendChild(titleLabel);
+  var closeIcon = document.createElement("span");
+  closeIcon.className = "icon icon_clickable icon-remove";
+  modalDialogTitle.appendChild(closeIcon);
+  modalDialog.appendChild(modalDialogTitle);
+  var modalDialogBody = document.createElement("div");
+  modalDialogBody.className = "modal-dialog-body";
+  modalDialogBody.id = 'painterro';
+  modalDialogBody.addEventListener('keypress', function (ev) {
+    // Prevent i.e. +/- from triggering map zoom
+    ev.stopPropagation();
+  });
+  modalDialog.appendChild(modalDialogBody);
+  modalDialogContainer.appendChild(modalDialog);
+  document.body.appendChild(modalDialogContainer);
+
+  // eslint-disable-next-line
+  window.ptro = Painterro({
+    id: 'painterro',
+    hiddenTools: ['open'],
+    language: LocaleUtils.lang().slice(0, 2).toLowerCase(),
+    onBeforeClose: function onBeforeClose(hasUnsaved, doClose) {
+      if (hasUnsaved) {
+        // eslint-disable-next-line
+        if (confirm(LocaleUtils.tr("imageeditor.confirmclose"))) {
+          doClose();
+        }
+      }
+    },
+    onClose: function onClose() {
+      window.ptro.hide();
+      delete window.ptro;
+      // Delay to next iteration to ensure ptro event handlers have executed
+      setTimeout(function () {
+        document.body.removeChild(modalDialogContainer);
+      }, 0);
+    },
+    saveHandler: function saveHandler(image, done) {
+      imageDataCallback(image.asDataURL('image/jpeg'));
+      done(true);
+      window.ptro.hide();
+      delete window.ptro;
+      // Delay to next iteration to ensure ptro event handlers have executed
+      setTimeout(function () {
+        document.body.removeChild(modalDialogContainer);
+      }, 0);
+    }
+  }).show(imageData);
+  closeIcon.addEventListener('click', function () {
+    // eslint-disable-next-line
+    if (confirm(LocaleUtils.tr("imageeditor.confirmclose"))) {
+      window.ptro.hide();
+      delete window.ptro;
+      // Delay to next iteration to ensure ptro event handlers have executed
+      setTimeout(function () {
+        document.body.removeChild(modalDialogContainer);
+      }, 0);
+    }
+  });
+}