qwc2 2025.6.13 → 2025.7.1

package/components/map3d/Map3D.js

@@ -1,31 +1,37 @@
-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 _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,e)||_unsupportedIterableToArray(r,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}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 _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}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 _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,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 _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,e)||_unsupportedIterableToArray(r,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}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 _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}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 _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,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 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 React from"react";import{connect}from"react-redux";import Instance from"@giro3d/giro3d/core/Instance.js";import Coordinates from"@giro3d/giro3d/core/geographic/Coordinates";import Extent from"@giro3d/giro3d/core/geographic/Extent.js";import ElevationLayer from"@giro3d/giro3d/core/layer/ElevationLayer.js";import FeatureCollection from"@giro3d/giro3d/entities/FeatureCollection.js";import Map from"@giro3d/giro3d/entities/Map.js";import Tiles3D from"@giro3d/giro3d/entities/Tiles3D.js";import Inspector from"@giro3d/giro3d/gui/Inspector.js";import GeoTIFFSource from"@giro3d/giro3d/sources/GeoTIFFSource.js";import axios from"axios";import{fromUrl}from"geotiff";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{Vector2,CubeTextureLoader,Group,Raycaster,Mesh}from"three";import{GLTFExporter}from"three/addons/exporters/GLTFExporter.js";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import{CSS2DObject}from"three/addons/renderers/CSS2DRenderer";import{v4 as uuidv4}from"uuid";import{LayerRole}from"../../actions/layers";import{setCurrentTask}from"../../actions/task";import{BackgroundSwitcher}from"../../plugins/BackgroundSwitcher";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import MiscUtils from"../../utils/MiscUtils";import{registerPermalinkDataStoreHook,unregisterPermalinkDataStoreHook,UrlParams}from"../../utils/PermaLinkUtils";import BottomBar3D from"./BottomBar3D";import Compare3D from"./Compare3D";import Draw3D from"./Draw3D";import ExportObjects3D from"./ExportObjects3D";import HideObjects3D from"./HideObjects3D";import Identify3D from"./Identify3D";import LayerTree3D from"./LayerTree3D";import Map3DLight from"./Map3DLight";import MapControls3D from"./MapControls3D";import MapExport3D from"./MapExport3D";import Measure3D from"./Measure3D";import OverviewMap3D from"./OverviewMap3D";import TopBar3D from"./TopBar3D";import View3DSwitcher from"./View3DSwitcher";import LayerRegistry from"./layers/index";import Tiles3DStyle from"./utils/Tiles3DStyle";import"./style/Map3D.css";var UnloadWrapper=/*#__PURE__*/function(_React$Component){function UnloadWrapper(){var _this;_classCallCheck(this,UnloadWrapper);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,UnloadWrapper,[].concat(args));_defineProperty(_this,"onUnload",function(el){if(!el){_this.props.onUnload(_this.props.sceneId)}});return _this}_inherits(UnloadWrapper,_React$Component);return _createClass(UnloadWrapper,[{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",null,this.props.children,/*#__PURE__*/React.createElement("span",{ref:this.onUnload}))}}])}(React.Component);_defineProperty(UnloadWrapper,"propTypes",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),onUnload:PropTypes.func,sceneId:PropTypes.string});var Map3D=/*#__PURE__*/function(_React$Component2){function Map3D(props){var _this2;_classCallCheck(this,Map3D);_this2=_callSuper(this,Map3D,[props]);_defineProperty(_this2,"state",{sceneContext:_objectSpread(_objectSpread({},Map3D.defaultSceneState),{},{addLayer:function addLayer(layer){},getLayer:function getLayer(layerId){},removeLayer:function removeLayer(layerId){},updateColorLayer:function updateColorLayer(layerId,options){},addSceneObject:function addSceneObject(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{}},getSceneObject:function getSceneObject(objectId){},removeSceneObject:function removeSceneObject(objectId){},updateSceneObject:function updateSceneObject(objectId,options){},updateObjectLabel:function updateObjectLabel(object){},getMap:function getMap(){},setViewToExtent:function setViewToExtent(bounds,angle){},getTerrainHeightFromDTM:function getTerrainHeightFromDTM(scenePos){},getTerrainHeightFromMap:function getTerrainHeightFromMap(scenePos){},getSceneIntersection:function getSceneIntersection(x,y){}}),sceneId:null});_defineProperty(_this2,"applyBaseLayer",function(){var baseLayer=_this2.state.sceneContext.baseLayers.find(function(e){return e.visibility===true});_this2.removeLayer("__baselayer");if(!baseLayer){return}var layerCreator=LayerRegistry[baseLayer.type];if(layerCreator!==null&&layerCreator!==void 0&&layerCreator.create3d){var layer3d=layerCreator.create3d(baseLayer,_this2.state.sceneContext.mapCrs);_this2.addLayer("__baselayer",layer3d);_this2.map.insertLayerAfter(layer3d,null)}});_defineProperty(_this2,"setBaseLayer",function(layer,visibility){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{baseLayers:state.sceneContext.baseLayers.map(function(entry){return _objectSpread(_objectSpread({},entry),{},{visibility:entry.name===layer.name?visibility:false})})})}})});_defineProperty(_this2,"collectColorLayers",function(prevColorLayers){return _this2.props.layers.reduce(function(colorLayers,layer){var _prevOptions$visibili,_prevOptions$opacity,_prevOptions$extrusio,_prevOptions$fields;if(layer.role!==LayerRole.THEME&&layer.role!==LayerRole.USERLAYER){return colorLayers}var layerCreator=LayerRegistry[layer.type];if(!layerCreator||!layerCreator.create3d){return colorLayers}var prevOptions=prevColorLayers[layer.id];colorLayers[layer.id]=_objectSpread(_objectSpread({},layer),{},{visibility:(_prevOptions$visibili=prevOptions===null||prevOptions===void 0?void 0:prevOptions.visibility)!==null&&_prevOptions$visibili!==void 0?_prevOptions$visibili:false,opacity:(_prevOptions$opacity=prevOptions===null||prevOptions===void 0?void 0:prevOptions.opacity)!==null&&_prevOptions$opacity!==void 0?_prevOptions$opacity:255,extrusionHeight:(_prevOptions$extrusio=prevOptions===null||prevOptions===void 0?void 0:prevOptions.extrusionHeight)!==null&&_prevOptions$extrusio!==void 0?_prevOptions$extrusio:["vector","wfs"].includes(layer.type)?0:undefined,fields:(_prevOptions$fields=prevOptions===null||prevOptions===void 0?void 0:prevOptions.fields)!==null&&_prevOptions$fields!==void 0?_prevOptions$fields:undefined});if(colorLayers[layer.id].fields===undefined&&layerCreator.getFields){layerCreator.getFields(layer).then(function(fields){_this2.updateColorLayer(layer.id,{fields:fields})})}return colorLayers},{})});_defineProperty(_this2,"applyColorLayerUpdates",function(colorLayers,prevColorLayers){// Add-update new layers
+ */import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import Instance from"@giro3d/giro3d/core/Instance.js";import Coordinates from"@giro3d/giro3d/core/geographic/Coordinates";import Extent from"@giro3d/giro3d/core/geographic/Extent.js";import ElevationLayer from"@giro3d/giro3d/core/layer/ElevationLayer.js";import FeatureCollection from"@giro3d/giro3d/entities/FeatureCollection.js";import Map from"@giro3d/giro3d/entities/Map.js";import Tiles3D from"@giro3d/giro3d/entities/Tiles3D.js";import Inspector from"@giro3d/giro3d/gui/Inspector.js";import GeoTIFFSource from"@giro3d/giro3d/sources/GeoTIFFSource.js";import axios from"axios";import{fromUrl}from"geotiff";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{Vector2,CubeTextureLoader,Group,Raycaster,Mesh}from"three";import{GLTFExporter}from"three/addons/exporters/GLTFExporter.js";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import{v4 as uuidv4}from"uuid";import{LayerRole}from"../../actions/layers";import{setCurrentTask}from"../../actions/task";import{BackgroundSwitcher}from"../../plugins/BackgroundSwitcher";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LayerUtils from"../../utils/LayerUtils";import MiscUtils from"../../utils/MiscUtils";import{registerPermalinkDataStoreHook,unregisterPermalinkDataStoreHook,UrlParams}from"../../utils/PermaLinkUtils";import{MapContainerPortalContext}from"../PluginsContainer";import BottomBar3D from"./BottomBar3D";import Compare3D from"./Compare3D";import Draw3D from"./Draw3D";import ExportObjects3D from"./ExportObjects3D";import HideObjects3D from"./HideObjects3D";import Identify3D from"./Identify3D";import LayerTree3D from"./LayerTree3D";import Map3DLight from"./Map3DLight";import MapControls3D from"./MapControls3D";import MapExport3D from"./MapExport3D";import Measure3D from"./Measure3D";import OverviewMap3D from"./OverviewMap3D";import TopBar3D from"./TopBar3D";import View3DSwitcher from"./View3DSwitcher";import LayerRegistry from"./layers/index";import{importGltf}from"./utils/MiscUtils3D";import Tiles3DStyle from"./utils/Tiles3DStyle";import"./style/Map3D.css";var UnloadWrapper=/*#__PURE__*/function(_React$Component){function UnloadWrapper(){var _this;_classCallCheck(this,UnloadWrapper);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,UnloadWrapper,[].concat(args));_defineProperty(_this,"onUnload",function(el){if(!el){_this.props.onUnload(_this.props.sceneId)}});return _this}_inherits(UnloadWrapper,_React$Component);return _createClass(UnloadWrapper,[{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",null,this.props.children,/*#__PURE__*/React.createElement("span",{ref:this.onUnload}))}}])}(React.Component);_defineProperty(UnloadWrapper,"propTypes",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),onUnload:PropTypes.func,sceneId:PropTypes.string});var Map3D=/*#__PURE__*/function(_React$Component2){function Map3D(props){var _this2;_classCallCheck(this,Map3D);_this2=_callSuper(this,Map3D,[props]);_defineProperty(_this2,"state",{sceneContext:_objectSpread(_objectSpread({},Map3D.defaultSceneState),{},{addLayer:function addLayer(layer){},getLayer:function getLayer(layerId){},removeLayer:function removeLayer(layerId){},updateColorLayer:function updateColorLayer(layerId,options,path){},add3dTiles:function add3dTiles(url,options){},addSceneObject:function addSceneObject(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{}},getSceneObject:function getSceneObject(objectId){},removeSceneObject:function removeSceneObject(objectId){},updateSceneObject:function updateSceneObject(objectId,options){},getMap:function getMap(){},setViewToExtent:function setViewToExtent(bounds,angle){},getTerrainHeightFromDTM:function getTerrainHeightFromDTM(scenePos){},getTerrainHeightFromMap:function getTerrainHeightFromMap(scenePos){},getSceneIntersection:function getSceneIntersection(x,y,objects){}}),sceneId:null});_defineProperty(_this2,"applyBaseLayer",function(){var baseLayer=_this2.state.sceneContext.baseLayers.find(function(e){return e.visibility===true});_this2.removeLayer("__baselayer");if(!baseLayer){return}var layerCreator=LayerRegistry[baseLayer.type];if(layerCreator!==null&&layerCreator!==void 0&&layerCreator.create3d){var layer3d=layerCreator.create3d(baseLayer,_this2.state.sceneContext.mapCrs);_this2.addLayer("__baselayer",layer3d);_this2.map.insertLayerAfter(layer3d,null)}});_defineProperty(_this2,"setBaseLayer",function(layer,visibility){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{baseLayers:state.sceneContext.baseLayers.map(function(entry){return _objectSpread(_objectSpread({},entry),{},{visibility:entry.name===layer.name?visibility:false})})})}});UrlParams.updateParams({bl3d:visibility?layer.name:""})});_defineProperty(_this2,"collectColorLayers",function(prevColorLayers){return _this2.props.layers.reduce(function(colorLayers,layer){var _prevOptions$visibili,_prevOptions$opacity,_prevOptions$extrusio,_prevOptions$fields;if(layer.role!==LayerRole.THEME&&layer.role!==LayerRole.USERLAYER){return colorLayers}var layerCreator=LayerRegistry[layer.type];if(!layerCreator||!layerCreator.create3d){return colorLayers}var prevOptions=prevColorLayers[layer.id];var _preserveSublayerOptions=function preserveSublayerOptions(entry,prevEntry){var _entry$sublayers,_entry$sublayers$map;return(_entry$sublayers=entry.sublayers)===null||_entry$sublayers===void 0||(_entry$sublayers$map=_entry$sublayers.map)===null||_entry$sublayers$map===void 0?void 0:_entry$sublayers$map.call(_entry$sublayers,function(child){var _prevEntry$sublayers,_prevEntry$sublayers$;var prevChild=prevEntry===null||prevEntry===void 0||(_prevEntry$sublayers=prevEntry.sublayers)===null||_prevEntry$sublayers===void 0||(_prevEntry$sublayers$=_prevEntry$sublayers.find)===null||_prevEntry$sublayers$===void 0?void 0:_prevEntry$sublayers$.call(_prevEntry$sublayers,function(x){return x.name===child.name});if((prevChild===null||prevChild===void 0?void 0:prevChild.name)===child.name){return _objectSpread(_objectSpread({},child),{},{visibility:prevChild.visibility,opacity:prevChild.opacity,sublayers:_preserveSublayerOptions(child,prevChild)})}else{return child}})};colorLayers[layer.id]=_objectSpread(_objectSpread({},layer),{},{visibility:(_prevOptions$visibili=prevOptions===null||prevOptions===void 0?void 0:prevOptions.visibility)!==null&&_prevOptions$visibili!==void 0?_prevOptions$visibili:false,opacity:(_prevOptions$opacity=prevOptions===null||prevOptions===void 0?void 0:prevOptions.opacity)!==null&&_prevOptions$opacity!==void 0?_prevOptions$opacity:255,extrusionHeight:(_prevOptions$extrusio=prevOptions===null||prevOptions===void 0?void 0:prevOptions.extrusionHeight)!==null&&_prevOptions$extrusio!==void 0?_prevOptions$extrusio:["vector","wfs"].includes(layer.type)?0:undefined,fields:(_prevOptions$fields=prevOptions===null||prevOptions===void 0?void 0:prevOptions.fields)!==null&&_prevOptions$fields!==void 0?_prevOptions$fields:undefined,sublayers:_preserveSublayerOptions(layer,prevOptions)});Object.assign(colorLayers[layer.id],LayerUtils.buildWMSLayerParams(colorLayers[layer.id]));if(colorLayers[layer.id].fields===undefined&&layerCreator.getFields){layerCreator.getFields(layer).then(function(fields){_this2.updateColorLayer(layer.id,{fields:fields})})}return colorLayers},{})});_defineProperty(_this2,"applyColorLayerUpdates",function(colorLayers,prevColorLayers){// Add-update new layers
 var layerBelow=_this2.getLayer("__baselayer");Object.entries(colorLayers).reverse().forEach(function(_ref){var _ref2=_slicedToArray(_ref,2),layerId=_ref2[0],options=_ref2[1];var prevOptions=prevColorLayers[layerId];var layerCreator=LayerRegistry[options.type];var mapLayer=_this2.getLayer(layerId);if(mapLayer){layerCreator.update3d(mapLayer.source,options,prevOptions,_this2.state.sceneContext.mapCrs)}else{mapLayer=layerCreator.create3d(options,_this2.state.sceneContext.mapCrs);_this2.addLayer(layerId,mapLayer)}_this2.map.insertLayerAfter(mapLayer,layerBelow);mapLayer.visible=options.visibility;mapLayer.opacity=options.opacity/255;layerBelow=mapLayer;if(options.extrusionHeight!==0){_this2.createUpdateExtrudedLayer(mapLayer,options,options.features!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.features))}else if((prevOptions===null||prevOptions===void 0?void 0:prevOptions.extrusionHeight)!==0){_this2.removeExtrudedLayer(options.id)}});// Remove old layers
-Object.entries(prevColorLayers).forEach(function(_ref3){var _ref4=_slicedToArray(_ref3,2),layerId=_ref4[0],options=_ref4[1];if(!(layerId in colorLayers)){if(options.extrusionHeight!==0){_this2.removeExtrudedLayer(options.id)}_this2.removeLayer(layerId)}});_this2.instance.notifyChange(_this2.map)});_defineProperty(_this2,"createUpdateExtrudedLayer",function(mapLayer,options){var _options$features,_options$features$red;var forceCreate=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;var bounds=options.bbox.bounds;var extent=new Extent(options.bbox.crs,bounds[0],bounds[2],bounds[1],bounds[3]);var objId=options.id+":extruded";var makeColor=function makeColor(c){if(Array.isArray(c)){return c[0]<<16|c[1]<<8|c[2]}else if(typeof c==="string"){return parseInt(c.replace("#",""),16)}else{return c}};var obj=_this2.objectMap[objId];if(!obj||forceCreate){var _options$color;if(obj){_this2.instance.remove(obj)}var layercolor=makeColor((_options$color=options.color)!==null&&_options$color!==void 0?_options$color:"#FF0000");obj=new FeatureCollection({source:mapLayer.source.source,extent:extent,minLevel:1,maxLevel:1,ignoreZ:true,elevation:function elevation(feature){var _this2$getTerrainHeig;var coordinates=feature.getGeometry().getCoordinates();while(Array.isArray(coordinates[0])){coordinates=coordinates[0]}return(_this2$getTerrainHeig=_this2.getTerrainHeightFromMap(coordinates))!==null&&_this2$getTerrainHeig!==void 0?_this2$getTerrainHeig:0},extrusionOffset:function extrusionOffset(feature){if(typeof obj.userData.extrusionHeight==="string"){return parseFloat(feature.getProperties()[obj.userData.extrusionHeight])||0}else{return obj.userData.extrusionHeight}},style:function style(feature){var _obj$userData$feature,_obj$userData$feature2;return(_obj$userData$feature=(_obj$userData$feature2=obj.userData.featureStyles)===null||_obj$userData$feature2===void 0?void 0:_obj$userData$feature2[feature.getId()])!==null&&_obj$userData$feature!==void 0?_obj$userData$feature:{fill:{color:layercolor,shading:true}}}});obj.castShadow=true;obj.receiveShadow=true;_this2.instance.add(obj);_this2.objectMap[objId]=obj}obj.userData.extrusionHeight=options.extrusionHeight;obj.userData.featureStyles=(_options$features=options.features)===null||_options$features===void 0||(_options$features$red=_options$features.reduce)===null||_options$features$red===void 0?void 0:_options$features$red.call(_options$features,function(res,feature){return _objectSpread(_objectSpread({},res),{},_defineProperty({},feature.id,{fill:{color:makeColor(feature.styleOptions.fillColor),shading:true}}))},{});obj.opacity=mapLayer.opacity;obj.visible=mapLayer.visible;obj.updateStyles()});_defineProperty(_this2,"removeExtrudedLayer",function(layerId){var objId=layerId+":extruded";if(_this2.objectMap[objId]){_this2.instance.remove(_this2.objectMap[objId]);delete _this2.objectMap[objId]}_this2.instance.notifyChange()});_defineProperty(_this2,"applySceneObjectUpdates",function(sceneObjects){Object.entries(sceneObjects).forEach(function(_ref5){var _ref6=_slicedToArray(_ref5,2),objectId=_ref6[0],options=_ref6[1];var object=_this2.objectMap[objectId];object.visible=options.visibility&&options.opacity>0;if(object.opacity!==undefined){object.opacity=options.opacity/255}else{object.traverse(function(child){if(child instanceof Mesh){child.material.transparent=options.opacity<255;child.material.opacity=options.opacity/255;child.material.needsUpdate=true}})}_this2.instance.notifyChange(object)})});_defineProperty(_this2,"updateObjectLabel",function(sceneObject){var labelObject=sceneObject.children.find(function(child){return child.isCSS2DObject});if(sceneObject.userData.label){if(!labelObject){var labelEl=document.createElement("span");labelEl.className="map3d-object-label";labelObject=new CSS2DObject(labelEl);labelObject.updateMatrixWorld();sceneObject.add(labelObject);labelObject.userData.removeCallback=function(){// Explicitly remove label DOM element
-labelEl.parentNode.removeChild(labelEl)};sceneObject.addEventListener("removed",labelObject.userData.removeCallback);sceneObject.updateMatrixWorld()}labelObject.element.textContent=sceneObject.userData.label}else if(labelObject){sceneObject.removeEventListener("removed",labelObject.userData.removeCallback);sceneObject.remove(labelObject)}_this2.instance.notifyChange(sceneObject)});_defineProperty(_this2,"addLayer",function(layerId,layer){layer.userData.layerId=layerId;_this2.map.addLayer(layer)});_defineProperty(_this2,"getLayer",function(layerId){var _this2$map$getLayers$;return(_this2$map$getLayers$=_this2.map.getLayers(function(l){return l.userData.layerId===layerId})[0])!==null&&_this2$map$getLayers$!==void 0?_this2$map$getLayers$:null});_defineProperty(_this2,"removeLayer",function(layerId){_this2.map.getLayers(function(l){return l.userData.layerId===layerId}).forEach(function(layer){_this2.map.removeLayer(layer,{dispose:true})})});_defineProperty(_this2,"updateColorLayer",function(layerId,options){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_objectSpread(_objectSpread({},state.sceneContext.colorLayers),{},_defineProperty({},layerId,_objectSpread(_objectSpread({},state.sceneContext.colorLayers[layerId]),options)))})}})});_defineProperty(_this2,"addSceneObject",function(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};_this2.sceneObjectGroup.add(object);_this2.objectMap[objectId]=object;_this2.setState(function(state){var objectState=_objectSpread({visibility:true,opacity:255,layertree:false},options);return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,objectState))})}})});_defineProperty(_this2,"getSceneObject",function(objectId){return _this2.objectMap[objectId]});_defineProperty(_this2,"removeSceneObject",function(objectId){var callback=arguments.length>1&&arguments[1]!==undefined?arguments[1]:undefined;if(!_this2.objectMap[objectId]){return}_this2.objectMap[objectId].traverse(function(child){child.dispatchEvent({type:"removed"})});_this2.sceneObjectGroup.remove(_this2.objectMap[objectId]);delete _this2.objectMap[objectId];_this2.setState(function(state){var newSceneObjects=_objectSpread({},state.sceneContext.sceneObjects);delete newSceneObjects[objectId];return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:newSceneObjects})}},callback)});_defineProperty(_this2,"updateSceneObject",function(objectId,options){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,_objectSpread(_objectSpread({},state.sceneContext.sceneObjects[objectId]),options)))})}})});_defineProperty(_this2,"getMap",function(){return _this2.map});_defineProperty(_this2,"setupContainer",function(el){if(el){_this2.container=el;_this2.setupInstance()}});_defineProperty(_this2,"setupInstance",function(){var _this2$props$theme$ma,_this2$props$theme$ma2,_this2$props$theme$ma3,_this2$props$theme$ma6,_this2$props$theme$ma7;if(_this2.instance){_this2.disposeInstance()}var projection=_this2.props.theme.mapCrs;// Setup instance
+Object.entries(prevColorLayers).forEach(function(_ref3){var _ref4=_slicedToArray(_ref3,2),layerId=_ref4[0],options=_ref4[1];if(!(layerId in colorLayers)){if(options.extrusionHeight!==0){_this2.removeExtrudedLayer(options.id)}_this2.removeLayer(layerId)}});_this2.instance.notifyChange(_this2.map)});_defineProperty(_this2,"createUpdateExtrudedLayer",function(mapLayer,options){var _options$features,_options$features$red;var forceCreate=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;var bounds=options.bbox.bounds;var extent=new Extent(options.bbox.crs,bounds[0],bounds[2],bounds[1],bounds[3]);var objId=options.id+":extruded";var makeColor=function makeColor(c){if(Array.isArray(c)){return c[0]<<16|c[1]<<8|c[2]}else if(typeof c==="string"){return parseInt(c.replace("#",""),16)}else{return c}};var obj=_this2.objectMap[objId];if(!obj||forceCreate){var _options$color;if(obj){_this2.instance.remove(obj)}var layercolor=makeColor((_options$color=options.color)!==null&&_options$color!==void 0?_options$color:"#FF0000");obj=new FeatureCollection({source:mapLayer.source.source,extent:extent,minLevel:1,maxLevel:1,ignoreZ:true,elevation:function elevation(feature){var _this2$getTerrainHeig;var coordinates=feature.getGeometry().getCoordinates();while(Array.isArray(coordinates[0])){coordinates=coordinates[0]}return(_this2$getTerrainHeig=_this2.getTerrainHeightFromMap(coordinates))!==null&&_this2$getTerrainHeig!==void 0?_this2$getTerrainHeig:0},extrusionOffset:function extrusionOffset(feature){if(typeof obj.userData.extrusionHeight==="string"){return parseFloat(feature.getProperties()[obj.userData.extrusionHeight])||0}else{return obj.userData.extrusionHeight}},style:function style(feature){var _obj$userData$feature,_obj$userData$feature2;return(_obj$userData$feature=(_obj$userData$feature2=obj.userData.featureStyles)===null||_obj$userData$feature2===void 0?void 0:_obj$userData$feature2[feature.getId()])!==null&&_obj$userData$feature!==void 0?_obj$userData$feature:{fill:{color:layercolor,shading:true}}}});obj.castShadow=true;obj.receiveShadow=true;_this2.instance.add(obj);_this2.objectMap[objId]=obj}obj.userData.extrusionHeight=options.extrusionHeight;obj.userData.featureStyles=(_options$features=options.features)===null||_options$features===void 0||(_options$features$red=_options$features.reduce)===null||_options$features$red===void 0?void 0:_options$features$red.call(_options$features,function(res,feature){return _objectSpread(_objectSpread({},res),{},_defineProperty({},feature.id,{fill:{color:makeColor(feature.styleOptions.fillColor),shading:true}}))},{});obj.opacity=mapLayer.opacity;obj.visible=mapLayer.visible;obj.updateStyles()});_defineProperty(_this2,"removeExtrudedLayer",function(layerId){var objId=layerId+":extruded";if(_this2.objectMap[objId]){_this2.instance.remove(_this2.objectMap[objId]);delete _this2.objectMap[objId]}_this2.instance.notifyChange()});_defineProperty(_this2,"applySceneObjectUpdates",function(sceneObjects,prevSceneObjects){Object.entries(sceneObjects).forEach(function(_ref5){var _ref6=_slicedToArray(_ref5,2),objectId=_ref6[0],options=_ref6[1];var prevOptions=prevSceneObjects===null||prevSceneObjects===void 0?void 0:prevSceneObjects[objectId];var object=_this2.objectMap[objectId];if(options.opacity!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.opacity)||options.visibility!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.visibility)){object.visible=options.visibility&&options.opacity>0;if(object.opacity!==undefined){object.opacity=options.opacity/255}else{object.traverse(function(child){if(child instanceof Mesh){child.material.transparent=options.opacity<255;child.material.opacity=options.opacity/255;child.material.needsUpdate=true}})}_this2.instance.notifyChange(object)}if(options.style!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.style)){_this2.loadTilesetStyle(objectId,options)}if(options.tilesetStyle!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.tilesetStyle)){object.tiles.group.children.forEach(function(group){Tiles3DStyle.applyTileStyle(group,options)});_this2.instance.notifyChange(object)}})});_defineProperty(_this2,"addLayer",function(layerId,layer){layer.userData.layerId=layerId;_this2.map.addLayer(layer)});_defineProperty(_this2,"getLayer",function(layerId){var _this2$map$getLayers$;return(_this2$map$getLayers$=_this2.map.getLayers(function(l){return l.userData.layerId===layerId})[0])!==null&&_this2$map$getLayers$!==void 0?_this2$map$getLayers$:null});_defineProperty(_this2,"removeLayer",function(layerId){_this2.map.getLayers(function(l){return l.userData.layerId===layerId}).forEach(function(layer){_this2.map.removeLayer(layer,{dispose:true})})});_defineProperty(_this2,"updateColorLayer",function(layerId,options){var path=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];_this2.setState(function(state){var entry=_objectSpread({},state.sceneContext.colorLayers[layerId]);var subentry=entry;path.forEach(function(idx){subentry.sublayers=_toConsumableArray(subentry.sublayers);subentry.sublayers[idx]=_objectSpread({},subentry.sublayers[idx]);subentry=subentry.sublayers[idx]});Object.assign(subentry,options);Object.assign(entry,LayerUtils.buildWMSLayerParams(entry));return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_objectSpread(_objectSpread({},state.sceneContext.colorLayers),{},_defineProperty({},layerId,entry))})}})});_defineProperty(_this2,"add3dTiles",function(url,name){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};var tiles=new Tiles3D({url:MiscUtils.resolveAssetsPath(url),errorTarget:32});// Apply style when loading tile
+tiles.tiles.addEventListener("load-model",function(_ref7){var scene=_ref7.scene;scene.userData.tilesetName=name;scene.userData.batchIdAttr="id";Tiles3DStyle.applyTileStyle(scene,_this2.state.sceneContext.sceneObjects[name],_this2.state.sceneContext)});// Show/hide labels when tile visibility changes
+tiles.tiles.addEventListener("tile-visibility-change",function(_ref8){var scene=_ref8.scene,visible=_ref8.visible;Object.values(scene.userData.tileLabels||{}).forEach(function(label){label.labelObject.visible=visible;label.labelObject.element.style.display=visible?"initial":"none"})});tiles.castShadow=true;tiles.receiveShadow=true;tiles.userData.layertree=true;_this2.instance.add(tiles);_this2.objectMap[name]=tiles;_this2.setState(function(state){var objectState=_objectSpread({imported:true,visibility:true,opacity:255,layertree:true,title:name},options);return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},name,objectState))})}})});_defineProperty(_this2,"addSceneObject",function(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};_this2.sceneObjectGroup.add(object);_this2.objectMap[objectId]=object;_this2.instance.notifyChange(object);_this2.setState(function(state){var objectState=_objectSpread({visibility:true,opacity:255,layertree:false},options);return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,objectState))})}})});_defineProperty(_this2,"getSceneObject",function(objectId){return _this2.objectMap[objectId]});_defineProperty(_this2,"removeSceneObject",function(objectId){var callback=arguments.length>1&&arguments[1]!==undefined?arguments[1]:undefined;var object=_this2.objectMap[objectId];if(!object){return}object.traverse(function(child){child.dispatchEvent({type:"removed"})});if(object.tiles){_this2.instance.remove(object)}else{_this2.sceneObjectGroup.remove(object)}delete _this2.objectMap[objectId];_this2.instance.notifyChange();_this2.setState(function(state){var newSceneObjects=_objectSpread({},state.sceneContext.sceneObjects);delete newSceneObjects[objectId];return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:newSceneObjects})}},callback)});_defineProperty(_this2,"updateSceneObject",function(objectId,options){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,_objectSpread(_objectSpread({},state.sceneContext.sceneObjects[objectId]),options)))})}})});_defineProperty(_this2,"getMap",function(){return _this2.map});_defineProperty(_this2,"setupContainer",function(el){if(el){_this2.container=el;el.resizeObserver=new ResizeObserver(function(entries){var rect=entries[0].contentRect;_this2.state.sceneContext.scene.view.dispatchEvent({type:"view-resized",width:rect.width,height:rect.height})});el.resizeObserver.observe(el);_this2.setupInstance()}});_defineProperty(_this2,"setupInstance",function(){var _this2$props$theme$ma,_this2$props$theme$ma2,_this2$props$theme$ma3,_this2$props$theme$ma6,_this2$props$theme$ma7,_this2$props$theme$ma8;if(_this2.instance){_this2.disposeInstance()}var projection=_this2.props.theme.mapCrs;// Setup instance
 _this2.instance=new Instance({target:_this2.container,crs:projection,renderer:{clearColor:0,preserveDrawingBuffer:true}});_this2.sceneObjectGroup=new Group;_this2.instance.add(_this2.sceneObjectGroup);// Setup map
 var bounds=CoordinatesUtils.reprojectBbox(_this2.props.theme.initialBbox.bounds,_this2.props.theme.initialBbox.crs,projection);var extent=new Extent(projection,bounds[0],bounds[2],bounds[1],bounds[3]);_this2.map=new Map({extent:extent,backgroundColor:"white"});_this2.instance.add(_this2.map);// Setup camera
 var center=extent.center();_this2.instance.view.camera.position.set(center.x,center.y,0.5*(extent.east-extent.west));// Skybox
 var cubeTextureLoader=new CubeTextureLoader;cubeTextureLoader.setPath(ConfigUtils.getAssetsPath()+"/3d/skybox/");var cubeTexture=cubeTextureLoader.load(["px.jpg","nx.jpg","py.jpg","ny.jpg","pz.jpg","nz.jpg"]);_this2.instance.scene.background=cubeTexture;// Setup elevation
 var demUrl=MiscUtils.resolveAssetsPath((_this2$props$theme$ma=(_this2$props$theme$ma2=_this2.props.theme.map3d)===null||_this2$props$theme$ma2===void 0||(_this2$props$theme$ma2=_this2$props$theme$ma2.dtm)===null||_this2$props$theme$ma2===void 0?void 0:_this2$props$theme$ma2.url)!==null&&_this2$props$theme$ma!==void 0?_this2$props$theme$ma:"");var demCrs=((_this2$props$theme$ma3=_this2.props.theme.map3d)===null||_this2$props$theme$ma3===void 0||(_this2$props$theme$ma3=_this2$props$theme$ma3.dtm)===null||_this2$props$theme$ma3===void 0?void 0:_this2$props$theme$ma3.crs)||"EPSG:3857";if(demUrl){var _this2$props$theme$ma4,_this2$props$theme$ma5;var demSource=new GeoTIFFSource({url:demUrl,crs:demCrs});var demMin=(_this2$props$theme$ma4=_this2.props.theme.map3d.dtm.min)!==null&&_this2$props$theme$ma4!==void 0?_this2$props$theme$ma4:undefined;var demMax=(_this2$props$theme$ma5=_this2.props.theme.map3d.dtm.max)!==null&&_this2$props$theme$ma5!==void 0?_this2$props$theme$ma5:undefined;var elevationLayer=new ElevationLayer({name:"dem",extent:extent,source:demSource,minmax:demMin!==undefined&&demMax!==undefined?{demMin:demMin,demMax:demMax}:undefined});_this2.addLayer("__dtm",elevationLayer)}// Collect baselayers
-var visibleBaseLayer=null;var baseLayers=(((_this2$props$theme$ma6=_this2.props.theme.map3d)===null||_this2$props$theme$ma6===void 0?void 0:_this2$props$theme$ma6.basemaps)||[]).map(function(e){var baseLayer=_objectSpread(_objectSpread({},_this2.props.layers.find(function(bl){return bl.name===e.name})),{},{visibility:e.visibility===true});if(baseLayer.visibility){visibleBaseLayer=baseLayer}return baseLayer});if(visibleBaseLayer){_this2.setBaseLayer(visibleBaseLayer,true)}// Collect color layers
-var colorLayers=_this2.collectColorLayers([]);// Add 3d tiles
-_this2.objectMap={};var sceneObjects={};(((_this2$props$theme$ma7=_this2.props.theme.map3d)===null||_this2$props$theme$ma7===void 0?void 0:_this2$props$theme$ma7.tiles3d)||[]).forEach(function(entry){if(entry.tilesetStyleUrl){axios.get(MiscUtils.resolveAssetsPath(entry.tilesetStyleUrl)).then(function(response){_this2.add3dTiles(_objectSpread(_objectSpread({},entry),{},{tilesetStyle:response.data}))})["catch"](function(){/* eslint-disable-next-line */console.warn("Failed to load tilset style");_this2.add3dTiles(entry)})}else{// Delay one cycle, to ensure setState below executed
-setTimeout(function(){_this2.add3dTiles(entry)},0)}});_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{scene:_this2.instance,map:_this2.map,mapCrs:projection,dtmUrl:demUrl,dtmCrs:demCrs,baseLayers:baseLayers,colorLayers:colorLayers,sceneObjects:sceneObjects}),sceneId:uuidv4()}});// Inspector
-if(["1","true"].includes((UrlParams.getParam("inspector")||"").toLowerCase())){_this2.inspector=new Inspector(_this2.container.previousElementSibling,_this2.instance)}});_defineProperty(_this2,"add3dTiles",function(entry){var tiles=new Tiles3D({url:MiscUtils.resolveAssetsPath(entry.url),errorTarget:32});tiles.tiles.addEventListener("load-model",function(_ref7){var _entry$idAttr;var scene=_ref7.scene;scene.userData.tilesetName=entry.name;scene.userData.batchIdAttr=(_entry$idAttr=entry.idAttr)!==null&&_entry$idAttr!==void 0?_entry$idAttr:"id";Tiles3DStyle.handleModelLoad(scene,entry)});tiles.castShadow=true;tiles.receiveShadow=true;tiles.userData.layertree=true;_this2.instance.add(tiles);_this2.objectMap[entry.name]=tiles;_this2.setState(function(state){var _entry$title;var objectState={visibility:true,opacity:255,layertree:true,title:(_entry$title=entry.title)!==null&&_entry$title!==void 0?_entry$title:entry.name};return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},entry.name,objectState))})}})});_defineProperty(_this2,"disposeInstance",function(){if(_this2.inspector){_this2.inspector.detach()}_this2.map.dispose({disposeLayers:true});Object.values(_this2.objectMap).forEach(function(object){_this2.instance.remove(object)});_this2.instance.dispose();_this2.inspector=null;_this2.map=null;_this2.objectMap={};_this2.sceneObjectGroup=null;_this2.instance=null;_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),Map3D.defaultSceneState)}});_this2.props.setCurrentTask(null)});_defineProperty(_this2,"onUnload",function(key){// Ensure scene has not already been disposed
-if(_this2.state.sceneId===key){_this2.disposeInstance()}});_defineProperty(_this2,"setupControls",function(instance){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{setViewToExtent:instance===null||instance===void 0?void 0:instance.setViewToExtent,restoreView:instance===null||instance===void 0?void 0:instance.restoreView})}},_this2.props.onMapInitialized)});_defineProperty(_this2,"getTerrainHeightFromDTM",function(scenePos){var returnArray=true;if(!Array.isArray(scenePos[0])){returnArray=false;scenePos=[scenePos]}var dtmPos=scenePos.map(function(p){return CoordinatesUtils.reproject(p,_this2.state.sceneContext.mapCrs,_this2.state.sceneContext.dtmCrs)});var dtmExt=[Infinity,Infinity,-Infinity,-Infinity];dtmPos.forEach(function(p){dtmExt[0]=Math.min(dtmExt[0],p[0]);dtmExt[1]=Math.min(dtmExt[1],p[1]);dtmExt[2]=Math.max(dtmExt[2],p[0]);dtmExt[3]=Math.max(dtmExt[3],p[1])});return new Promise(function(resolve){fromUrl(_this2.state.sceneContext.dtmUrl).then(function(tiff){tiff.getImage().then(function(image){var _image$fileDirectory=image.fileDirectory,ModelTiepoint=_image$fileDirectory.ModelTiepoint,ModelPixelScale=_image$fileDirectory.ModelPixelScale;// Extract scale and tiepoint values
-var _ref8=[ModelPixelScale[0],ModelPixelScale[1]],scaleX=_ref8[0],scaleY=_ref8[1];var _ref9=[ModelTiepoint[3],ModelTiepoint[4]],tiepointX=_ref9[0],tiepointY=_ref9[1];// Tiepoint world coordinates
+var visibleBaseLayer=null;var baseLayers=(((_this2$props$theme$ma6=_this2.props.theme.map3d)===null||_this2$props$theme$ma6===void 0?void 0:_this2$props$theme$ma6.basemaps)||[]).map(function(e){var baseLayer=_objectSpread(_objectSpread({},_this2.props.layers.find(function(bl){return bl.name===e.name})),{},{visibility:e.visibility===true,overview:e.overview===true});if(baseLayer.visibility){visibleBaseLayer=baseLayer}return baseLayer});if(visibleBaseLayer){_this2.setBaseLayer(visibleBaseLayer,true)}// Collect color layers
+var colorLayers=_this2.collectColorLayers([]);var sceneObjects={};_this2.objectMap={};// Add 3d tiles
+(((_this2$props$theme$ma7=_this2.props.theme.map3d)===null||_this2$props$theme$ma7===void 0?void 0:_this2$props$theme$ma7.tiles3d)||[]).forEach(function(entry){var _entry$title;var tiles=new Tiles3D({url:MiscUtils.resolveAssetsPath(entry.url),errorTarget:32});// Apply style when loading tile
+tiles.tiles.addEventListener("load-model",function(_ref9){var _entry$idAttr;var scene=_ref9.scene;scene.userData.tilesetName=entry.name;scene.userData.batchIdAttr=(_entry$idAttr=entry.idAttr)!==null&&_entry$idAttr!==void 0?_entry$idAttr:"id";Tiles3DStyle.applyTileStyle(scene,_this2.state.sceneContext.sceneObjects[entry.name],_this2.state.sceneContext)});// Show/hide labels when tile visibility changes
+tiles.tiles.addEventListener("tile-visibility-change",function(_ref10){var scene=_ref10.scene,visible=_ref10.visible;Object.values(scene.userData.tileLabels||{}).forEach(function(label){label.labelObject.visible=visible;label.labelObject.element.style.display=visible?"initial":"none"})});tiles.castShadow=true;tiles.receiveShadow=true;tiles.userData.layertree=true;_this2.instance.add(tiles);_this2.objectMap[entry.name]=tiles;sceneObjects[entry.name]={visibility:true,opacity:255,layertree:true,title:(_entry$title=entry.title)!==null&&_entry$title!==void 0?_entry$title:entry.name,baseColor:entry.baseColor,styles:entry.styles,style:entry.style||Object.keys(entry.styles||{})[0]||null,tilesetStyle:null,idAttr:entry.idAttr,colorAttr:entry.colorAttr,alphaAttr:entry.alphaAttr,labelAttr:entry.labelAttr}});// Add other objects
+(((_this2$props$theme$ma8=_this2.props.theme.map3d)===null||_this2$props$theme$ma8===void 0?void 0:_this2$props$theme$ma8.objects3d)||[]).forEach(function(entry){importGltf(MiscUtils.resolveAssetsPath(entry.url),entry.name,_this2.state.sceneContext,false)});_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{scene:_this2.instance,map:_this2.map,mapCrs:projection,dtmUrl:demUrl,dtmCrs:demCrs,baseLayers:baseLayers,colorLayers:colorLayers,sceneObjects:sceneObjects}),sceneId:uuidv4()}});// Inspector
+if(["1","true"].includes((UrlParams.getParam("inspector")||"").toLowerCase())){var inspectorContainer=document.createElement("div");inspectorContainer.className="map3d-inspector";_this2.container.appendChild(inspectorContainer);_this2.inspector=new Inspector(inspectorContainer,_this2.instance)}});_defineProperty(_this2,"loadTilesetStyle",function(objectId,options){var _options$styles;var url=(_options$styles=options.styles)===null||_options$styles===void 0?void 0:_options$styles[options.style];if(_this2.tilesetStyles[url]){_this2.updateSceneObject(objectId,{tilesetStyle:_this2.tilesetStyles[url]})}else if(url){var fullUrl=MiscUtils.resolveAssetsPath(url);axios.get(fullUrl).then(function(response){_this2.tilesetStyles[url]=response.data;_this2.updateSceneObject(objectId,{tilesetStyle:_this2.tilesetStyles[url]})})["catch"](function(){_this2.tilesetStyles[url]={};_this2.updateSceneObject(objectId,{tilesetStyle:_this2.tilesetStyles[url]})})}else{_this2.tilesetStyles[url]=null;_this2.updateSceneObject(objectId,{tilesetStyle:_this2.tilesetStyles[url]})}});_defineProperty(_this2,"disposeInstance",function(){if(_this2.inspector){_this2.inspector.detach()}_this2.map.dispose({disposeLayers:true});Object.values(_this2.objectMap).forEach(function(object){_this2.instance.remove(object)});_this2.instance.dispose();_this2.inspector=null;_this2.map=null;_this2.objectMap={};_this2.sceneObjectGroup=null;_this2.instance=null;_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),Map3D.defaultSceneState)}});_this2.props.setCurrentTask(null)});_defineProperty(_this2,"onUnload",function(key){// Ensure scene has not already been disposed
+if(_this2.state.sceneId===key){_this2.disposeInstance()}});_defineProperty(_this2,"setupControls",function(instance){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{setViewToExtent:instance===null||instance===void 0?void 0:instance.setViewToExtent,restoreView:instance===null||instance===void 0?void 0:instance.restoreView})}},_this2.props.onMapInitialized)});_defineProperty(_this2,"getTerrainHeightFromDTM",function(scenePos){var returnArray=true;if(!Array.isArray(scenePos[0])){returnArray=false;scenePos=[scenePos]}var dtmPos=scenePos.map(function(p){return CoordinatesUtils.reproject(p,_this2.state.sceneContext.mapCrs,_this2.state.sceneContext.dtmCrs)});var dtmExt=[Infinity,Infinity,-Infinity,-Infinity];dtmPos.forEach(function(p){dtmExt[0]=Math.min(dtmExt[0],p[0]);dtmExt[1]=Math.min(dtmExt[1],p[1]);dtmExt[2]=Math.max(dtmExt[2],p[0]);dtmExt[3]=Math.max(dtmExt[3],p[1])});return new Promise(function(resolve){if(!_this2.state.sceneContext.dtmUrl){resolve(returnArray?scenePos.map(function(x){return 0}):0);return}fromUrl(_this2.state.sceneContext.dtmUrl).then(function(tiff){tiff.getImage().then(function(image){var _image$fileDirectory=image.fileDirectory,ModelTiepoint=_image$fileDirectory.ModelTiepoint,ModelPixelScale=_image$fileDirectory.ModelPixelScale;// Extract scale and tiepoint values
+var _ref11=[ModelPixelScale[0],ModelPixelScale[1]],scaleX=_ref11[0],scaleY=_ref11[1];var _ref12=[ModelTiepoint[3],ModelTiepoint[4]],tiepointX=_ref12[0],tiepointY=_ref12[1];// Tiepoint world coordinates
 // Calculate pixel indices (rounded to nearest integers)
 var minPixelX=Math.round((dtmExt[0]-tiepointX)/scaleX);var minPixelY=Math.round((tiepointY-dtmExt[3])/scaleY);// Inverted Y-axis in image
 var maxPixelY=Math.round((tiepointY-dtmExt[1])/scaleY)+1;// Inverted Y-axis in image
-var maxPixelX=Math.round((dtmExt[2]-tiepointX)/scaleX)+1;var width=maxPixelX-minPixelX;var height=maxPixelY-minPixelY;image.readRasters({window:[minPixelX,minPixelY,maxPixelX,maxPixelY]}).then(function(raster){if(!returnArray){resolve(raster[0][0])}else{var h=dtmPos.map(function(p){var x=Math.round((p[0]-dtmExt[0])/(dtmExt[2]-dtmExt[0])*(width-1));var y=Math.round((1-(p[1]-dtmExt[1])/(dtmExt[3]-dtmExt[1]))*(height-1));return raster[0][x+y*width]});resolve(h)}})})})})});_defineProperty(_this2,"getTerrainHeightFromMap",function(scenePos){var _elevationResult$samp;var coordinates=new Coordinates(_this2.state.sceneContext.mapCrs,scenePos[0],scenePos[1],0);var elevationResult=_this2.state.sceneContext.map.getElevation({coordinates:coordinates});elevationResult.samples.sort(function(a,b){return b.resolution-a.resolution});return(_elevationResult$samp=elevationResult.samples[0])===null||_elevationResult$samp===void 0?void 0:_elevationResult$samp.elevation});_defineProperty(_this2,"getSceneIntersection",function(x,y){var objects=arguments.length>2&&arguments[2]!==undefined?arguments[2]:true;var raycaster=new Raycaster;var camera=_this2.instance.view.camera;raycaster.setFromCamera(new Vector2(x,y),camera);// Query object intersection
-var intersectionObjects=objects?Object.entries(_this2.state.sceneContext.sceneObjects).map(function(_ref10){var _ref11=_slicedToArray(_ref10,2),objId=_ref11[0],options=_ref11[1];if(options.layertree&&options.visibility){var _obj$tiles$group,_obj$tiles;var obj=_this2.objectMap[objId];return(_obj$tiles$group=(_obj$tiles=obj.tiles)===null||_obj$tiles===void 0?void 0:_obj$tiles.group)!==null&&_obj$tiles$group!==void 0?_obj$tiles$group:obj}return null}).filter(Boolean):null;var objInter=objects?raycaster.intersectObjects(intersectionObjects,true)[0]:undefined;// Query highest resolution terrain tile (i.e. tile with no children)
+var maxPixelX=Math.round((dtmExt[2]-tiepointX)/scaleX)+1;var width=maxPixelX-minPixelX;var height=maxPixelY-minPixelY;image.readRasters({window:[minPixelX,minPixelY,maxPixelX,maxPixelY]}).then(function(raster){if(!returnArray){resolve(raster[0][0])}else{var h=dtmPos.map(function(p){var x=Math.round((p[0]-dtmExt[0])/(dtmExt[2]-dtmExt[0])*(width-1));var y=Math.round((1-(p[1]-dtmExt[1])/(dtmExt[3]-dtmExt[1]))*(height-1));return raster[0][x+y*width]});resolve(h)}})})})})});_defineProperty(_this2,"getTerrainHeightFromMap",function(scenePos){var _elevationResult$samp;var coordinates=new Coordinates(_this2.state.sceneContext.mapCrs,scenePos[0],scenePos[1],0);var elevationResult=_this2.state.sceneContext.map.getElevation({coordinates:coordinates});// const raycaster = new Raycaster(new Vector3(scenePos[0], scenePos[1], 10000));
+// const terrInter = raycaster.intersectObjects([this.map.object3d]).filter(result => result.object.children.length === 0)[0];
+elevationResult.samples.sort(function(a,b){return a.resolution-b.resolution});return(_elevationResult$samp=elevationResult.samples[0])===null||_elevationResult$samp===void 0?void 0:_elevationResult$samp.elevation});_defineProperty(_this2,"getSceneIntersection",function(x,y){var objects=arguments.length>2&&arguments[2]!==undefined?arguments[2]:true;var raycaster=new Raycaster;var camera=_this2.instance.view.camera;raycaster.setFromCamera(new Vector2(x,y),camera);// Query object intersection
+var objInter=objects?raycaster.intersectObjects(_this2.state.sceneContext.collisionObjects,true)[0]:undefined;// Query highest resolution terrain tile (i.e. tile with no children)
 var terrInter=raycaster.intersectObjects([_this2.map.object3d]).filter(function(result){return result.object.children.length===0})[0];// Return closest result
-if(objInter&&terrInter){return objInter.distance<terrInter.distance?objInter:terrInter}return objInter!==null&&objInter!==void 0?objInter:terrInter});_defineProperty(_this2,"redrawScene",function(ev){var width=ev.target.innerWidth;var height=ev.target.innerHeight;_this2.instance.renderer.setSize(width,height);_this2.instance.view.camera.aspect=width/height;_this2.instance.view.camera.updateProjectionMatrix();_this2.instance.renderer.render(_this2.instance.scene,_this2.instance.view.camera)});_defineProperty(_this2,"setViewToExtent",function(bounds,rotation){_this2.state.sceneContext.setViewToExtent(bounds,rotation)});_defineProperty(_this2,"store3dState",function(){var promises=Object.entries(_this2.state.sceneContext.sceneObjects).map(function(_ref12){var _ref13=_slicedToArray(_ref12,2),objectId=_ref13[0],entry=_ref13[1];if(!entry.layertree){return null}return new Promise(function(resolve){if(entry.drawGroup){var exporter=new GLTFExporter;exporter.parse(_this2.state.sceneContext.getSceneObject(objectId),function(result){resolve({id:objectId,options:entry,data:result})})}else{resolve({id:objectId,options:entry})}})}).filter(Boolean);return new Promise(function(resolve){Promise.all(promises).then(function(objects){var cameraPos=_this2.state.sceneContext.scene.view.camera.position;var target=_this2.state.sceneContext.scene.view.controls.target;var layers=Object.entries(_this2.state.sceneContext.colorLayers).map(function(_ref14){var _ref15=_slicedToArray(_ref14,2),layerId=_ref15[0],options=_ref15[1];return{id:layerId,options:{visibility:options.visibility,opacity:options.opacity,extrusionHeight:options.extrusionHeight}}});resolve({objects:objects,colorLayers:layers,cameraPos:[cameraPos.x,cameraPos.y,cameraPos.z],center:[target.x,target.y,target.z]})})})});_defineProperty(_this2,"restore3dState",function(data){if(isEmpty(data)){return}(data.objects||[]).forEach(function(item){if(item.data){var loader=new GLTFLoader;loader.parse(item.data,ConfigUtils.getAssetsPath(),function(gltf){gltf.scene.traverse(function(obj){if(obj.isMesh){obj.castShadow=true;obj.receiveShadow=true}});_this2.state.sceneContext.addSceneObject(item.id,gltf.scene,item.options)})}else if(item.id in _this2.state.sceneContext.sceneObjects){_this2.state.sceneContext.updateSceneObject(item.id,item.options)}});(data.colorLayers||[]).forEach(function(item){if(item.id in _this2.state.sceneContext.colorLayers){_this2.state.sceneContext.updateColorLayer(item.id,item.options)}});_this2.state.sceneContext.restoreView(data);_this2.state.sceneContext.scene.notifyChange()});_this2.container=null;_this2.inspector=null;_this2.instance=null;_this2.map=null;_this2.sceneObjectGroup=null;_this2.objectMap={};_this2.state.sceneContext.addLayer=_this2.addLayer;_this2.state.sceneContext.getLayer=_this2.getLayer;_this2.state.sceneContext.removeLayer=_this2.removeLayer;_this2.state.sceneContext.updateColorLayer=_this2.updateColorLayer;_this2.state.sceneContext.addSceneObject=_this2.addSceneObject;_this2.state.sceneContext.getSceneObject=_this2.getSceneObject;_this2.state.sceneContext.removeSceneObject=_this2.removeSceneObject;_this2.state.sceneContext.updateSceneObject=_this2.updateSceneObject;_this2.state.sceneContext.updateObjectLabel=_this2.updateObjectLabel;_this2.state.sceneContext.getMap=_this2.getMap;_this2.state.sceneContext.getTerrainHeightFromDTM=_this2.getTerrainHeightFromDTM;_this2.state.sceneContext.getTerrainHeightFromMap=_this2.getTerrainHeightFromMap;_this2.state.sceneContext.getSceneIntersection=_this2.getSceneIntersection;registerPermalinkDataStoreHook("map3d",_this2.store3dState);return _this2}_inherits(Map3D,_React$Component2);return _createClass(Map3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.innerRef(this)}},{key:"componentWillUnmount",value:function componentWillUnmount(){unregisterPermalinkDataStoreHook("map3d")}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this3=this;if(this.props.theme!==prevProps.theme){this.setupInstance()}else if(this.props.layers!==prevProps.layers){this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_this3.collectColorLayers(state.sceneContext.colorLayers)})}})}// Update map layers
+if(objInter&&terrInter){return objInter.distance<terrInter.distance?objInter:terrInter}return objInter!==null&&objInter!==void 0?objInter:terrInter});_defineProperty(_this2,"redrawScene",function(ev){var width=ev.target.innerWidth;var height=ev.target.innerHeight;_this2.instance.renderer.setSize(width,height);_this2.instance.view.camera.aspect=width/height;_this2.instance.view.camera.updateProjectionMatrix();_this2.instance.renderer.render(_this2.instance.scene,_this2.instance.view.camera)});_defineProperty(_this2,"setViewToExtent",function(bounds,rotation){_this2.state.sceneContext.setViewToExtent(bounds,rotation)});_defineProperty(_this2,"store3dState",function(){var promises=Object.entries(_this2.state.sceneContext.sceneObjects).map(function(_ref13){var _ref14=_slicedToArray(_ref13,2),objectId=_ref14[0],entry=_ref14[1];if(!entry.layertree){return null}return new Promise(function(resolve){if(entry.drawGroup){var exporter=new GLTFExporter;exporter.parse(_this2.state.sceneContext.getSceneObject(objectId),function(result){resolve({id:objectId,options:entry,data:result})})}else{resolve({id:objectId,options:entry})}})}).filter(Boolean);return new Promise(function(resolve){Promise.all(promises).then(function(objects){var _this2$state$sceneCon;var camera=_this2.state.sceneContext.scene.view.camera.position;var target=_this2.state.sceneContext.scene.view.controls.target;var layers=Object.entries(_this2.state.sceneContext.colorLayers).map(function(_ref15){var _ref16=_slicedToArray(_ref15,2),layerId=_ref16[0],options=_ref16[1];return{id:layerId,options:{visibility:options.visibility,opacity:options.opacity,extrusionHeight:options.extrusionHeight}}});resolve({objects:objects,colorLayers:layers,personHeight:(_this2$state$sceneCon=_this2.state.sceneContext.scene.view.controls.personHeight)!==null&&_this2$state$sceneCon!==void 0?_this2$state$sceneCon:0,camera:[camera.x,camera.y,camera.z],target:[target.x,target.y,target.z]})})})});_defineProperty(_this2,"restore3dState",function(data){if(isEmpty(data)){return}(data.objects||[]).forEach(function(item){if(item.data){var loader=new GLTFLoader;loader.parse(item.data,ConfigUtils.getAssetsPath(),function(gltf){gltf.scene.traverse(function(obj){if(obj.isMesh){obj.castShadow=true;obj.receiveShadow=true}});_this2.state.sceneContext.addSceneObject(item.id,gltf.scene,item.options)})}else if(item.id in _this2.state.sceneContext.sceneObjects){_this2.state.sceneContext.updateSceneObject(item.id,item.options)}});(data.colorLayers||[]).forEach(function(item){if(item.id in _this2.state.sceneContext.colorLayers){_this2.state.sceneContext.updateColorLayer(item.id,item.options)}});_this2.state.sceneContext.restoreView(data);if(data.baselayer!==undefined){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{baseLayers:state.sceneContext.baseLayers.map(function(l){return _objectSpread(_objectSpread({},l),{},{visibility:l.name===data.baselayer})})})}});UrlParams.updateParams({bl3d:data.baselayer})}_this2.state.sceneContext.scene.notifyChange()});_this2.container=null;_this2.inspector=null;_this2.instance=null;_this2.map=null;_this2.sceneObjectGroup=null;_this2.objectMap={};_this2.tilesetStyles={};_this2.state.sceneContext.options=_this2.props.options;_this2.state.sceneContext.addLayer=_this2.addLayer;_this2.state.sceneContext.getLayer=_this2.getLayer;_this2.state.sceneContext.removeLayer=_this2.removeLayer;_this2.state.sceneContext.updateColorLayer=_this2.updateColorLayer;_this2.state.sceneContext.add3dTiles=_this2.add3dTiles;_this2.state.sceneContext.addSceneObject=_this2.addSceneObject;_this2.state.sceneContext.getSceneObject=_this2.getSceneObject;_this2.state.sceneContext.removeSceneObject=_this2.removeSceneObject;_this2.state.sceneContext.updateSceneObject=_this2.updateSceneObject;_this2.state.sceneContext.getMap=_this2.getMap;_this2.state.sceneContext.getTerrainHeightFromDTM=_this2.getTerrainHeightFromDTM;_this2.state.sceneContext.getTerrainHeightFromMap=_this2.getTerrainHeightFromMap;_this2.state.sceneContext.getSceneIntersection=_this2.getSceneIntersection;registerPermalinkDataStoreHook("map3d",_this2.store3dState);return _this2}_inherits(Map3D,_React$Component2);return _createClass(Map3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.innerRef(this)}},{key:"componentWillUnmount",value:function componentWillUnmount(){unregisterPermalinkDataStoreHook("map3d")}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this3=this;if(this.props.theme!==prevProps.theme){this.setupInstance()}else if(this.props.layers!==prevProps.layers){this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_this3.collectColorLayers(state.sceneContext.colorLayers)})}})}// Update map layers
 if(this.state.sceneContext.baseLayers!==prevState.sceneContext.baseLayers){this.applyBaseLayer()}if(this.state.sceneContext.colorLayers!==prevState.sceneContext.colorLayers){this.applyColorLayerUpdates(this.state.sceneContext.colorLayers,prevState.sceneContext.colorLayers)}// Update scene objects
-if(this.state.sceneContext.sceneObjects!==prevState.sceneContext.sceneObjects){this.applySceneObjectUpdates(this.state.sceneContext.sceneObjects)}}},{key:"render",value:function render(){var baseLayer=this.state.sceneContext.baseLayers.find(function(l){return l.visibility===true});var style={marginTop:this.props.mapMargins.top,marginRight:this.props.mapMargins.right,marginBottom:this.props.mapMargins.bottom,marginLeft:this.props.mapMargins.left};return/*#__PURE__*/React.createElement("div",{className:"map3d-body"},/*#__PURE__*/React.createElement("div",{className:"map3d-inspector"}),/*#__PURE__*/React.createElement("div",{className:"map3d-map",onMouseDown:this.stopAnimations,ref:this.setupContainer,style:style}),/*#__PURE__*/React.createElement(View3DSwitcher,{position:2}),this.state.sceneContext.scene?/*#__PURE__*/React.createElement(UnloadWrapper,{key:this.state.sceneId,onUnload:this.onUnload,sceneId:this.state.sceneId},/*#__PURE__*/React.createElement(MapControls3D,{onControlsSet:this.setupControls,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(BackgroundSwitcher,{changeLayerVisibility:this.setBaseLayer,layers:this.state.sceneContext.baseLayers,mapMargins:this.props.mapMargins}),/*#__PURE__*/React.createElement(TopBar3D,{options:this.props.options,sceneContext:this.state.sceneContext,searchProviders:this.props.searchProviders}),/*#__PURE__*/React.createElement(LayerTree3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(BottomBar3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(OverviewMap3D,{baseLayer:baseLayer,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Map3DLight,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Measure3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Identify3D,{sceneContext:this.state.sceneContext,tileInfoServiceUrl:this.props.options.tileInfoServiceUrl}),/*#__PURE__*/React.createElement(Compare3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Draw3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(MapExport3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(ExportObjects3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(HideObjects3D,{sceneContext:this.state.sceneContext})):null)}}])}(React.Component);_defineProperty(Map3D,"propTypes",{innerRef:PropTypes.func,layers:PropTypes.array,mapMargins:PropTypes.object,onMapInitialized:PropTypes.func,options:PropTypes.object,searchProviders:PropTypes.object,setCurrentTask:PropTypes.func,theme:PropTypes.object});_defineProperty(Map3D,"defaultProps",{geometry:{initialWidth:600,initialHeight:800,initialX:0,initialY:0,initiallyDocked:true},options:{searchMinScaleDenom:1000}});_defineProperty(Map3D,"defaultSceneState",{scene:null,map:null,mapCrs:null,dtmUrl:null,dtmCrs:null,baseLayers:[],colorLayers:{},sceneObjects:{}});export default connect(function(state){return{mapMargins:state.windows.mapMargins,theme:state.theme.current,layers:state.layers.flat}},{setCurrentTask:setCurrentTask})(Map3D);
+if(this.state.sceneContext.sceneObjects!==prevState.sceneContext.sceneObjects){this.applySceneObjectUpdates(this.state.sceneContext.sceneObjects,prevState.sceneContext.sceneObjects);// Update collision objects
+this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{collisionObjects:Object.entries(state.sceneContext.sceneObjects).map(function(_ref17){var _ref18=_slicedToArray(_ref17,2),objId=_ref18[0],options=_ref18[1];if(options.layertree&&options.visibility){var _obj$tiles$group,_obj$tiles;var obj=_this3.objectMap[objId];return(_obj$tiles$group=(_obj$tiles=obj.tiles)===null||_obj$tiles===void 0?void 0:_obj$tiles.group)!==null&&_obj$tiles$group!==void 0?_obj$tiles$group:obj}return null}).filter(Boolean)})}})}}},{key:"render",value:function render(){var _this$state$sceneCont,_this4=this;var baseLayer=this.state.sceneContext.baseLayers.find(function(l){return l.visibility===true});var overviewLayer=(_this$state$sceneCont=this.state.sceneContext.baseLayers.find(function(l){return l.overview===true}))!==null&&_this$state$sceneCont!==void 0?_this$state$sceneCont:baseLayer;return[/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-map",key:"Map3D",onBlur:function onBlur(){return _this4.props.mapFocusChange(false)},onFocus:function onFocus(){return _this4.props.mapFocusChange(true)},ref:this.setupContainer}),this.context),this.state.sceneContext.scene?/*#__PURE__*/React.createElement(UnloadWrapper,{key:this.state.sceneId,onUnload:this.onUnload,sceneId:this.state.sceneId},/*#__PURE__*/React.createElement(MapControls3D,{onCameraChanged:this.props.onCameraChanged,onControlsSet:this.setupControls,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(BackgroundSwitcher,{changeLayerVisibility:this.setBaseLayer,layers:this.state.sceneContext.baseLayers}),/*#__PURE__*/React.createElement(TopBar3D,{sceneContext:this.state.sceneContext,searchProviders:this.props.searchProviders}),/*#__PURE__*/React.createElement(LayerTree3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(BottomBar3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(OverviewMap3D,{baseLayer:overviewLayer,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Map3DLight,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Measure3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Identify3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Compare3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Draw3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(MapExport3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(ExportObjects3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(HideObjects3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(View3DSwitcher,{position:2})):null]}}])}(React.Component);_defineProperty(Map3D,"contextType",MapContainerPortalContext);_defineProperty(Map3D,"propTypes",{innerRef:PropTypes.func,layers:PropTypes.array,mapFocusChange:PropTypes.func,onCameraChanged:PropTypes.func,onMapInitialized:PropTypes.func,options:PropTypes.object,searchProviders:PropTypes.object,setCurrentTask:PropTypes.func,theme:PropTypes.object});_defineProperty(Map3D,"defaultProps",{geometry:{initialWidth:600,initialHeight:800,initialX:0,initialY:0,initiallyDocked:true}});_defineProperty(Map3D,"defaultSceneState",{scene:null,map:null,mapCrs:null,dtmUrl:null,dtmCrs:null,baseLayers:[],colorLayers:{},sceneObjects:{},collisionObjects:[]});export default connect(function(state){return{theme:state.theme.current,layers:state.layers.flat}},{setCurrentTask:setCurrentTask})(Map3D);

package/components/map3d/Map3DLight.js

@@ -4,7 +4,8 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import Sun from"@giro3d/giro3d/core/geographic/Sun.js";import{MapLightingMode}from"@giro3d/giro3d/entities/MapLightingOptions";import PropTypes from"prop-types";import suncalc from"suncalc";import{AmbientLight,BasicShadowMap,CameraHelper,DirectionalLight,DirectionalLightHelper,PCFShadowMap,PCFSoftShadowMap,VSMShadowMap}from"three";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import Icon from"../Icon";import SideBar from"../SideBar";import NumberInput from"../widgets/NumberInput";import ToggleSwitch from"../widgets/ToggleSwitch";import"./style/Map3DLight.css";var Map3DLight=/*#__PURE__*/function(_React$Component){function Map3DLight(){var _this;_classCallCheck(this,Map3DLight);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Map3DLight,[].concat(args));_defineProperty(_this,"state",{showAdvanced:false,lightParams:{day:182,time:720,helpersVisible:false,ambientLightIntensity:2.1,directionalLightIntensity:1.8,zFactor:1,lightElevationLayersOnly:false,shadowsEnabled:true,shadowType:PCFShadowMap,shadowMapSize:4096,shadowBias:-0.0001,sunDistance:80000,normalBias:0,shadowIntensity:0.9,shadowVolumeNear:60000,shadowVolumeFar:100000},dayAnimation:false,dayAnimationSettings:false,dayStep:30,timeAnimation:false,timeAnimationSettings:false,timeStep:30});_defineProperty(_this,"onHide",function(){clearInterval(_this.animationInterval);_this.setState({dayAnimation:false,timeAnimation:false})});_defineProperty(_this,"renderBody",function(){var lightParams=_this.state.lightParams;var dateValue=new Date(new Date().getFullYear(),0,1+lightParams.day).toISOString().split("T")[0];var dateToDay=function dateToDay(date){var d=new Date(date+"T00:00:00");return(d-new Date(d.getFullYear(),0,0))/(1000*60*60*24)};var isLeapYear=function isLeapYear(year){return new Date(year,1,29).getDate()===29};var timeValue="".concat(String(Math.trunc(lightParams.time/60)).padStart(2,"0"),":").concat(String(lightParams.time%60).padStart(2,"0"));var timeToMin=function timeToMin(time){var parts=time.split(":");return parseInt(parts[0],10)*60+parseInt(parts[1],10)};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.date")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.dayAnimation?"square":"triangle-right",onClick:_this.toggleDayAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:365+isLeapYear(),min:1,onChange:function onChange(ev){return _this.updateLightParams("day",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.day}),/*#__PURE__*/React.createElement("input",{onChange:function onChange(ev){return dateToDay(ev.target.value)},type:"date",value:dateValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.dayAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{dayAnimationSettings:!state.dayAnimationSettings}})}})))),_this.state.dayAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(dayStep){return _this.setState({dayStep:dayStep})},suffix:" "+LocaleUtils.tr("maplight3d.dayspersec"),value:_this.state.dayStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.time")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.timeAnimation?"square":"triangle-right",onClick:_this.toggleTimeAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:1439,min:0,onChange:function onChange(ev){return _this.updateLightParams("time",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.time}),/*#__PURE__*/React.createElement("input",{onChange:function onChange(ev){return timeToMin(ev.target.value)},type:"time",value:timeValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.timeAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{timeAnimationSettings:!state.timeAnimationSettings}})}})))),_this.state.timeAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(timeStep){return _this.setState({timeStep:timeStep})},suffix:" "+LocaleUtils.tr("maplight3d.minspersec"),value:_this.state.timeStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.ambientLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("ambientLightIntensity",0,5,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.directionalLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("directionalLightIntensity",0,10,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadows")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.shadowsEnabled,onChange:function onChange(value){return _this.updateLightParams("shadowsEnabled",value)}}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowintensity")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:!lightParams.shadowsEnabled,max:2,min:0,onChange:function onChange(value){return _this.updateLightParams("shadowIntensity",value)},value:lightParams.shadowIntensity}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{className:"maplight3d-advanced",colSpan:"2"},/*#__PURE__*/React.createElement("label",null,/*#__PURE__*/React.createElement("input",{checked:_this.state.showAdvanced,onChange:function onChange(ev){return _this.setState(function(state){return{showAdvanced:!state.showAdvanced}})},type:"checkbox"})," ",LocaleUtils.tr("maplight3d.showadvanced")))),_this.state.showAdvanced?[/*#__PURE__*/React.createElement("tr",{key:"helpersVisible"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.helpersVisible")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.helpersVisible,onChange:function onChange(value){return _this.updateLightParams("helpersVisible",value)}}))),/*#__PURE__*/React.createElement("tr",{key:"zFactor"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.zFactor")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("input",{max:10,min:0,onChange:function onChange(ev){return _this.updateLightParams("zFactor",ev.target.value)},step:0.1,type:"range",value:lightParams.zFactor}))),/*#__PURE__*/React.createElement("tr",{key:"shadowType"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowType")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.updateLightParams("shadowType",parseInt(ev.target.value,10))},value:lightParams.shadowType},/*#__PURE__*/React.createElement("option",{value:BasicShadowMap},"BasicShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFShadowMap},"PCFShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFSoftShadowMap},"PCFSoftShadowMap"),/*#__PURE__*/React.createElement("option",{value:VSMShadowMap},"VSMShadowMap")))),/*#__PURE__*/React.createElement("tr",{key:"shadowMapSize"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowMapSize")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:8192,min:64,onChange:function onChange(value){return _this.updateLightParams("shadowMapSize",value)},value:lightParams.shadowMapSize}))),/*#__PURE__*/React.createElement("tr",{key:"shadowBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:5,max:0.01,min:-0.01,onChange:function onChange(value){return _this.updateLightParams("shadowBias",value)},value:lightParams.shadowBias}))),/*#__PURE__*/React.createElement("tr",{key:"normalBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.normalBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,max:10,min:-10,onChange:function onChange(value){return _this.updateLightParams("normalBias",value)},value:lightParams.normalBias}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeNear"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeNear")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeNear",value)},value:lightParams.shadowVolumeNear}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeFar"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeFar")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeFar",value)},value:lightParams.shadowVolumeFar})))]:null)))});_defineProperty(_this,"toggleDayAnimation",function(){_this.setState(function(state){return{dayAnimation:!state.dayAnimation,timeAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.dayAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("day",(_this.state.lightParams.day+_this.state.dayStep/10)%365)},100)}})});_defineProperty(_this,"toggleTimeAnimation",function(){_this.setState(function(state){return{timeAnimation:!state.timeAnimation,dayAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.timeAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("time",(_this.state.lightParams.time+_this.state.timeStep/10)%1440)},100)}})});_defineProperty(_this,"renderSlider",function(key,min,max,step){var labelFormatter=arguments.length>4&&arguments[4]!==undefined?arguments[4]:undefined;var value=_this.state.lightParams[key];var parseValue=function parseValue(x){return Number.isInteger(step)?parseInt(x,10):parseFloat(x)};labelFormatter=labelFormatter!==null&&labelFormatter!==void 0?labelFormatter:function(x){return x.toFixed(-Math.log10(step))};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:max,min:min,onChange:function onChange(ev){return _this.updateLightParams(key,parseValue(ev.target.value))},step:step,type:"range",value:value}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider-label"},/*#__PURE__*/React.createElement("span",{style:{left:(value-min)*100/(max-min)+"%"}},labelFormatter(value))))});_defineProperty(_this,"updateLightParams",function(key,value){_this.setState(function(state){return{lightParams:_objectSpread(_objectSpread({},state.lightParams),{},_defineProperty({},key,value))}})});_defineProperty(_this,"computeShadowVolume",function(directionalLight,lightParams){if(!lightParams.shadowsEnabled){_this.props.sceneContext.scene.renderer.shadowMap.enabled=false;return}var cameraHeight=_this.props.sceneContext.scene.view.camera.position.z;var targetHeight=_this.props.sceneContext.scene.view.controls.target.z;var volumeSize=Math.min(20000,Math.max(1000,cameraHeight-targetHeight));directionalLight.shadow.camera.top=volumeSize;directionalLight.shadow.camera.bottom=-volumeSize;directionalLight.shadow.camera.left=-volumeSize;directionalLight.shadow.camera.right=volumeSize;directionalLight.shadow.camera.near=lightParams.shadowVolumeNear;directionalLight.shadow.camera.far=lightParams.shadowVolumeFar;_this.props.sceneContext.scene.renderer.shadowMap.enabled=true});_defineProperty(_this,"setLighting",function(){var sceneContext=_this.props.sceneContext;var lightParams=_this.state.lightParams;var ambientLight=sceneContext.getSceneObject("__ambientLight");var directionalLight=sceneContext.getSceneObject("__directionalLight");var lightTarget=sceneContext.scene.view.controls.target.clone();lightTarget.z=0;// Compute azimuth / zenith and sun position
-var date=new Date(new Date().getFullYear(),0,lightParams.day,Math.trunc(lightParams.time/60),lightParams.time%60);var latlon=CoordinatesUtils.reproject([lightTarget.x,lightTarget.y],sceneContext.mapCrs,"EPSG:4326");var sunPos=suncalc.getPosition(date,latlon[1],latlon[0]);var zenith=90-sunPos.altitude/Math.PI*180;var azimuth=180+sunPos.azimuth/Math.PI*180;var sunLocalPos=Sun.getLocalPosition({point:lightTarget,zenith:zenith,azimuth:azimuth,distance:lightParams.sunDistance});directionalLight.position.copy(sunLocalPos);// Set lighting params
-sceneContext.map.lighting.enabled=true;sceneContext.map.lighting.mode=lightParams.shadowsEnabled?MapLightingMode.LightBased:MapLightingMode.Hillshade;sceneContext.map.lighting.elevationLayersOnly=lightParams.lightElevationLayersOnly;sceneContext.map.lighting.hillshadeAzimuth=azimuth;sceneContext.map.lighting.hillshadeZenith=zenith;sceneContext.map.lighting.zFactor=lightParams.zFactor;sceneContext.scene.notifyChange(sceneContext.map);sceneContext.scene.renderer.shadowMap.type=lightParams.shadowType;var zenithAttenuation=Math.pow(zenith/90,4);ambientLight.intensity=lightParams.ambientLightIntensity-3*zenithAttenuation;directionalLight.intensity=lightParams.directionalLightIntensity-0.5*zenithAttenuation;directionalLight.shadow.mapSize.set(lightParams.shadowMapSize,lightParams.shadowMapSize);directionalLight.shadow.bias=lightParams.shadowBias;directionalLight.shadow.normalBias=lightParams.normalBias;directionalLight.shadow.intensity=lightParams.shadowIntensity;directionalLight.target.position.copy(lightTarget);_this.computeShadowVolume(directionalLight,lightParams);// Update scene
-directionalLight.updateMatrixWorld(true);directionalLight.target.updateMatrixWorld(true);directionalLight.shadow.updateMatrices(directionalLight);directionalLight.shadow.camera.updateProjectionMatrix();directionalLight.shadow.camera.updateMatrix();if(lightParams.helpersVisible){var directionalLightHelper=sceneContext.getSceneObject("__directionalLightHelper");directionalLightHelper.update();directionalLightHelper.updateMatrixWorld(true);var shadowCameraHelper=sceneContext.getSceneObject("__shadowCameraHelper");shadowCameraHelper.update();shadowCameraHelper.updateMatrixWorld(true)}sceneContext.scene.notifyChange()});return _this}_inherits(Map3DLight,_React$Component);return _createClass(Map3DLight,[{key:"componentDidMount",value:function componentDidMount(){this.animationInterval=null;this.componentDidUpdate({})}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _prevProps$sceneConte;if(this.props.sceneContext.scene!==((_prevProps$sceneConte=prevProps.sceneContext)===null||_prevProps$sceneConte===void 0?void 0:_prevProps$sceneConte.scene)){var ambientLight=new AmbientLight(16777215,this.state.ambientLightIntensity);this.props.sceneContext.addSceneObject("__ambientLight",ambientLight);var directionalLight=new DirectionalLight(16777215,this.state.directionalLightIntensity);directionalLight.castShadow=true;this.props.sceneContext.addSceneObject("__directionalLight",directionalLight);if(this.state.lightParams.helpersVisible){var directionalLightHelper=new DirectionalLightHelper(directionalLight,200,"white");this.props.sceneContext.addSceneObject("__directionalLightHelper",directionalLightHelper);var shadowCameraHelper=new CameraHelper(directionalLight.shadow.camera);this.props.sceneContext.addSceneObject("__shadowCameraHelper",shadowCameraHelper)}this.props.sceneContext.scene.view.controls.addEventListener("change",this.setLighting);this.setLighting()}else if(this.state.lightParams!==prevState.lightParams){if(this.state.lightParams.helpersVisible&&!prevState.lightParams.helpersVisible){var _directionalLight=this.props.sceneContext.getSceneObject("__directionalLight");var _directionalLightHelper=new DirectionalLightHelper(_directionalLight,200,"white");this.props.sceneContext.addSceneObject("__directionalLightHelper",_directionalLightHelper);var _shadowCameraHelper=new CameraHelper(_directionalLight.shadow.camera);this.props.sceneContext.addSceneObject("__shadowCameraHelper",_shadowCameraHelper)}else if(prevState.lightParams.helpersVisible&&!this.state.lightParams.helpersVisible){this.props.sceneContext.removeSceneObject("__directionalLightHelper");this.props.sceneContext.removeSceneObject("__shadowCameraHelper")}this.setLighting()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearInterval(this.lightPositionInterval)}},{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(SideBar,{icon:"light",id:"MapLight3D",onHide:this.onHide,title:LocaleUtils.tr("appmenu.items.MapLight3D"),width:"25em"},function(){return{body:_this2.renderBody()}}))}}])}(React.Component);_defineProperty(Map3DLight,"propTypes",{sceneContext:PropTypes.object});export{Map3DLight as default};
+ */import React from"react";import Sun from"@giro3d/giro3d/core/geographic/Sun.js";import{MapLightingMode}from"@giro3d/giro3d/entities/MapLightingOptions";import PropTypes from"prop-types";import suncalc from"suncalc";import{AmbientLight,BasicShadowMap,CameraHelper,DirectionalLight,DirectionalLightHelper,PCFShadowMap,PCFSoftShadowMap,VSMShadowMap}from"three";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import Icon from"../Icon";import SideBar from"../SideBar";import Input from"../widgets/Input";import NumberInput from"../widgets/NumberInput";import ToggleSwitch from"../widgets/ToggleSwitch";import"./style/Map3DLight.css";var Map3DLight=/*#__PURE__*/function(_React$Component){function Map3DLight(props){var _this;_classCallCheck(this,Map3DLight);_this=_callSuper(this,Map3DLight,[props]);_defineProperty(_this,"state",{showAdvanced:false,lightParams:{day:182,time:720,helpersVisible:false,moonLightIntensity:0.06,sunLightIntensity:3.5,zFactor:1,lightElevationLayersOnly:false,shadowsEnabled:true,shadowType:PCFShadowMap,shadowMapSize:4096,shadowBias:-0.0001,sunDistance:80000,normalBias:0,shadowIntensity:1,shadowVolumeNear:60000,shadowVolumeFar:100000},dayAnimation:false,dayAnimationSettings:false,dayStep:30,timeAnimation:false,timeAnimationSettings:false,timeStep:30});_defineProperty(_this,"onHide",function(){clearInterval(_this.animationInterval);_this.setState({dayAnimation:false,timeAnimation:false})});_defineProperty(_this,"renderBody",function(){var lightParams=_this.state.lightParams;var dateValue=new Date(new Date().getFullYear(),0,1+lightParams.day).toISOString().split("T")[0];var dateToDay=function dateToDay(date){var d=new Date(date+"T00:00:00");return(d-new Date(d.getFullYear(),0,0))/(1000*60*60*24)};var isLeapYear=function isLeapYear(year){return new Date(year,1,29).getDate()===29};var timeValue="".concat(String(Math.trunc(lightParams.time/60)).padStart(2,"0"),":").concat(String(lightParams.time%60).padStart(2,"0"));var timeToMin=function timeToMin(time){var parts=time.split(":");return parseInt(parts[0],10)*60+parseInt(parts[1],10)};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.date")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.dayAnimation?"square":"triangle-right",onClick:_this.toggleDayAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:365+isLeapYear(),min:1,onChange:function onChange(ev){return _this.updateLightParams("day",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.day}),/*#__PURE__*/React.createElement(Input,{onChange:function onChange(value){return _this.updateLightParams("day",dateToDay(value))},type:"date",value:dateValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.dayAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{dayAnimationSettings:!state.dayAnimationSettings}})}})))),_this.state.dayAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(dayStep){return _this.setState({dayStep:dayStep})},suffix:" "+LocaleUtils.tr("maplight3d.dayspersec"),value:_this.state.dayStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.time")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.timeAnimation?"square":"triangle-right",onClick:_this.toggleTimeAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:1439,min:0,onChange:function onChange(ev){return _this.updateLightParams("time",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.time}),/*#__PURE__*/React.createElement(Input,{onChange:function onChange(value){return _this.updateLightParams("time",timeToMin(value))},type:"time",value:timeValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.timeAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{timeAnimationSettings:!state.timeAnimationSettings}})}})))),_this.state.timeAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(timeStep){return _this.setState({timeStep:timeStep})},suffix:" "+LocaleUtils.tr("maplight3d.minspersec"),value:_this.state.timeStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.sunLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("sunLightIntensity",0,10,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.moonLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("moonLightIntensity",0,0.5,0.01))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadows")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.shadowsEnabled,onChange:function onChange(value){return _this.updateLightParams("shadowsEnabled",value)}}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowintensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("shadowIntensity",0,2,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{className:"maplight3d-advanced",colSpan:"2"},/*#__PURE__*/React.createElement("label",null,/*#__PURE__*/React.createElement("input",{checked:_this.state.showAdvanced,onChange:function onChange(ev){return _this.setState(function(state){return{showAdvanced:!state.showAdvanced}})},type:"checkbox"})," ",LocaleUtils.tr("maplight3d.showadvanced")))),_this.state.showAdvanced?[/*#__PURE__*/React.createElement("tr",{key:"helpersVisible"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.helpersVisible")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.helpersVisible,onChange:function onChange(value){return _this.updateLightParams("helpersVisible",value)}}))),/*#__PURE__*/React.createElement("tr",{key:"zFactor"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.zFactor")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("input",{max:10,min:0,onChange:function onChange(ev){return _this.updateLightParams("zFactor",ev.target.value)},step:0.1,type:"range",value:lightParams.zFactor}))),/*#__PURE__*/React.createElement("tr",{key:"shadowType"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowType")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.updateLightParams("shadowType",parseInt(ev.target.value,10))},value:lightParams.shadowType},/*#__PURE__*/React.createElement("option",{value:BasicShadowMap},"BasicShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFShadowMap},"PCFShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFSoftShadowMap},"PCFSoftShadowMap"),/*#__PURE__*/React.createElement("option",{value:VSMShadowMap},"VSMShadowMap")))),/*#__PURE__*/React.createElement("tr",{key:"shadowMapSize"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowMapSize")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:8192,min:64,onChange:function onChange(value){return _this.updateLightParams("shadowMapSize",value)},value:lightParams.shadowMapSize}))),/*#__PURE__*/React.createElement("tr",{key:"shadowBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:5,max:0.01,min:-0.01,onChange:function onChange(value){return _this.updateLightParams("shadowBias",value)},value:lightParams.shadowBias}))),/*#__PURE__*/React.createElement("tr",{key:"normalBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.normalBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,max:10,min:-10,onChange:function onChange(value){return _this.updateLightParams("normalBias",value)},value:lightParams.normalBias}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeNear"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeNear")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeNear",value)},value:lightParams.shadowVolumeNear}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeFar"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeFar")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeFar",value)},value:lightParams.shadowVolumeFar})))]:null)))});_defineProperty(_this,"toggleDayAnimation",function(){_this.setState(function(state){return{dayAnimation:!state.dayAnimation,timeAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.dayAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("day",(_this.state.lightParams.day+_this.state.dayStep/10)%365)},100)}})});_defineProperty(_this,"toggleTimeAnimation",function(){_this.setState(function(state){return{timeAnimation:!state.timeAnimation,dayAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.timeAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("time",(_this.state.lightParams.time+_this.state.timeStep/10)%1440)},100)}})});_defineProperty(_this,"renderSlider",function(key,min,max,step){var labelFormatter=arguments.length>4&&arguments[4]!==undefined?arguments[4]:undefined;var value=_this.state.lightParams[key];var parseValue=function parseValue(x){return Number.isInteger(step)?parseInt(x,10):parseFloat(x)};labelFormatter=labelFormatter!==null&&labelFormatter!==void 0?labelFormatter:function(x){return x.toFixed(-Math.log10(step))};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:max,min:min,onChange:function onChange(ev){return _this.updateLightParams(key,parseValue(ev.target.value))},step:step,type:"range",value:value}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider-label"},/*#__PURE__*/React.createElement("span",{style:{left:(value-min)*100/(max-min)+"%"}},labelFormatter(value))))});_defineProperty(_this,"updateLightParams",function(key,value){_this.setState(function(state){return{lightParams:_objectSpread(_objectSpread({},state.lightParams),{},_defineProperty({},key,value))}})});_defineProperty(_this,"computeShadowVolume",function(directionalLight,lightParams){if(!lightParams.shadowsEnabled){_this.props.sceneContext.scene.renderer.shadowMap.enabled=false;return}var cameraHeight=_this.props.sceneContext.scene.view.camera.position.z;var targetHeight=_this.props.sceneContext.scene.view.controls.target.z;var volumeSize=Math.min(20000,Math.max(1000,cameraHeight-targetHeight));directionalLight.shadow.camera.top=volumeSize;directionalLight.shadow.camera.bottom=-volumeSize;directionalLight.shadow.camera.left=-volumeSize;directionalLight.shadow.camera.right=volumeSize;directionalLight.shadow.camera.near=lightParams.shadowVolumeNear;directionalLight.shadow.camera.far=lightParams.shadowVolumeFar;_this.props.sceneContext.scene.renderer.shadowMap.enabled=true});_defineProperty(_this,"setLighting",function(){var sceneContext=_this.props.sceneContext;var lightParams=_this.state.lightParams;var ambientLight=sceneContext.getSceneObject("__ambientLight");var sunLight=sceneContext.getSceneObject("__sunLight");var moonLight=sceneContext.getSceneObject("__moonLight");var lightTarget=sceneContext.scene.view.controls.target.clone();lightTarget.z=0;// Compute azimuth / zenith and sun position
+var date=new Date(new Date().getFullYear(),0,lightParams.day,Math.trunc(lightParams.time/60),lightParams.time%60);var latlon=CoordinatesUtils.reproject([lightTarget.x,lightTarget.y],sceneContext.mapCrs,"EPSG:4326");var sunPos=suncalc.getPosition(date,latlon[1],latlon[0]);var zenith=Math.min(90,90-sunPos.altitude/Math.PI*180);var azimuth=180+sunPos.azimuth/Math.PI*180;var sunLocalPos=Sun.getLocalPosition({point:lightTarget,zenith:zenith,azimuth:azimuth,distance:lightParams.sunDistance});// Compute dynamic params
+var noonColor={r:1,g:0.98,b:0.98};var horizonColor={r:1,g:0.5,b:0.3};var fade=Math.pow(zenith/90,3);var sunColor={r:(1-fade)*noonColor.r+fade*horizonColor.r,g:(1-fade)*noonColor.g+fade*horizonColor.g,b:(1-fade)*noonColor.b+fade*horizonColor.b};var ambientIntensity=(1-zenith/90)*1.5;var shadowIntensityK=(1-fade)*0.9+0.2*fade;var sunLightIntensityK=Math.min(1,(90-zenith)/3);// Set lighting params
+sceneContext.map.lighting.enabled=true;sceneContext.map.lighting.mode=lightParams.shadowsEnabled?MapLightingMode.LightBased:MapLightingMode.Hillshade;sceneContext.map.lighting.elevationLayersOnly=lightParams.lightElevationLayersOnly;sceneContext.map.lighting.hillshadeAzimuth=azimuth;sceneContext.map.lighting.hillshadeZenith=zenith;sceneContext.map.lighting.zFactor=lightParams.zFactor;sceneContext.scene.notifyChange(sceneContext.map);sceneContext.scene.renderer.shadowMap.type=lightParams.shadowType;ambientLight.intensity=ambientIntensity;sunLight.position.copy(sunLocalPos);sunLight.intensity=lightParams.sunLightIntensity*sunLightIntensityK;sunLight.color=sunColor;sunLight.shadow.mapSize.set(lightParams.shadowMapSize,lightParams.shadowMapSize);sunLight.shadow.bias=lightParams.shadowBias;sunLight.shadow.normalBias=lightParams.normalBias;sunLight.shadow.intensity=lightParams.shadowIntensity*shadowIntensityK;sunLight.target.position.copy(lightTarget);_this.computeShadowVolume(sunLight,lightParams);sunLight.updateMatrixWorld(true);sunLight.target.updateMatrixWorld(true);sunLight.shadow.updateMatrices(sunLight);sunLight.shadow.camera.updateProjectionMatrix();sunLight.shadow.camera.updateMatrix();// NOTE: just a top-down light
+moonLight.position.set(lightTarget.x,lightTarget.y,8000);moonLight.intensity=lightParams.moonLightIntensity*(1-sunLightIntensityK);moonLight.target.position.copy(lightTarget);moonLight.updateMatrixWorld(true);moonLight.target.updateMatrixWorld(true);if(lightParams.helpersVisible){var sunLightHelper=sceneContext.getSceneObject("__sunLightHelper");sunLightHelper.update();sunLightHelper.updateMatrixWorld(true);var shadowCameraHelper=sceneContext.getSceneObject("__shadowCameraHelper");shadowCameraHelper.update();shadowCameraHelper.updateMatrixWorld(true)}sceneContext.scene.notifyChange()});_this.state.lightParams.day=props.sceneContext.options.defaultDay;var _parts=props.sceneContext.options.defaultTime.split(":").slice(0,2).map(Number);_this.state.lightParams.time=_parts[0]*60+_parts[1];return _this}_inherits(Map3DLight,_React$Component);return _createClass(Map3DLight,[{key:"componentDidMount",value:function componentDidMount(){this.animationInterval=null;this.componentDidUpdate({})}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _prevProps$sceneConte;if(this.props.sceneContext.scene!==((_prevProps$sceneConte=prevProps.sceneContext)===null||_prevProps$sceneConte===void 0?void 0:_prevProps$sceneConte.scene)){var ambientLight=new AmbientLight(16777215,1);this.props.sceneContext.addSceneObject("__ambientLight",ambientLight);var sunLight=new DirectionalLight(16777215,this.state.sunLightIntensity);sunLight.castShadow=true;this.props.sceneContext.addSceneObject("__sunLight",sunLight);var moonLight=new DirectionalLight(16777215,this.state.moonLightIntensity);this.props.sceneContext.addSceneObject("__moonLight",moonLight);if(this.state.lightParams.helpersVisible){var sunLightHelper=new DirectionalLightHelper(sunLight,200,"white");this.props.sceneContext.addSceneObject("__sunLightHelper",sunLightHelper);var shadowCameraHelper=new CameraHelper(sunLight.shadow.camera);this.props.sceneContext.addSceneObject("__shadowCameraHelper",shadowCameraHelper)}this.props.sceneContext.scene.view.controls.addEventListener("change",this.setLighting);this.setLighting()}else if(this.state.lightParams!==prevState.lightParams){if(this.state.lightParams.helpersVisible&&!prevState.lightParams.helpersVisible){var _sunLight=this.props.sceneContext.getSceneObject("__sunLight");var _sunLightHelper=new DirectionalLightHelper(_sunLight,200,"white");this.props.sceneContext.addSceneObject("__sunLightHelper",_sunLightHelper);var _shadowCameraHelper=new CameraHelper(_sunLight.shadow.camera);this.props.sceneContext.addSceneObject("__shadowCameraHelper",_shadowCameraHelper)}else if(prevState.lightParams.helpersVisible&&!this.state.lightParams.helpersVisible){this.props.sceneContext.removeSceneObject("__sunLightHelper");this.props.sceneContext.removeSceneObject("__shadowCameraHelper")}this.setLighting()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearInterval(this.lightPositionInterval)}},{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(SideBar,{icon:"light",id:"MapLight3D",onHide:this.onHide,title:LocaleUtils.tr("appmenu.items.MapLight3D"),width:"25em"},function(){return{body:_this2.renderBody()}}))}}])}(React.Component);_defineProperty(Map3DLight,"propTypes",{sceneContext:PropTypes.object});export{Map3DLight as default};

package/components/map3d/MapControls3D.js

@@ -1,22 +1,10 @@
-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 _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,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 _construct(t,e,r){if(_isNativeReflectConstruct())return Reflect.construct.apply(null,arguments);var o=[null];o.push.apply(o,e);var p=new(t.bind.apply(t,o));return r&&_setPrototypeOf(p,r.prototype),p}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}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 _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}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 _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,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 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 React from"react";import{connect}from"react-redux";import classNames from"classnames";import PropTypes from"prop-types";import{Raycaster,Vector2,Vector3}from"three";import{MapControls}from"three/addons/controls/MapControls";import ConfigUtils from"../../utils/ConfigUtils";import{UrlParams}from"../../utils/PermaLinkUtils";import Icon from"../Icon";import"./style/MapControls3D.css";var MapControls3D=/*#__PURE__*/function(_React$Component){function MapControls3D(props){var _this;_classCallCheck(this,MapControls3D);_this=_callSuper(this,MapControls3D,[props]);_defineProperty(_this,"state",{firstPerson:false});_defineProperty(_this,"keyHandler",function(event){if(event.repeat){return}else if(event.key==="ArrowUp"){if(event.ctrlKey)_this.tilt(event,0,1,true);else _this.pan(event,0,1,true)}else if(event.key==="ArrowDown"){if(event.ctrlKey)_this.tilt(event,0,-1,true);else _this.pan(event,0,-1,true)}else if(event.key==="ArrowLeft"){if(event.ctrlKey)_this.tilt(event,1,0,true);else _this.pan(event,1,0,true)}else if(event.key==="ArrowRight"){if(event.ctrlKey)_this.tilt(event,-1,0,true);else _this.pan(event,-1,0,true)}else if(event.key==="PageUp"){_this.moveCameraHeight(event,+1)}else if(event.key==="PageDown"){_this.moveCameraHeight(event,-1)}});_defineProperty(_this,"home",function(){var extent=_this.props.sceneContext.map.extent;var bounds=[extent.west,extent.south,extent.east,extent.north];_this.setViewToExtent(bounds);_this.updateUrlParams()});_defineProperty(_this,"pan",function(ev,dx,dy){var keyboard=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;// Pan faster the heigher one is above the terrain
-var d=_this.state.firstPerson?200000:300+(_this.props.sceneContext.scene.view.camera.position.z-_this.props.sceneContext.scene.view.controls.target.z)/250;var delta=new Vector2(dx,dy).multiplyScalar(d);_this.animationInterrupted=false;var lastTimestamp=new Date/1000;var _animate=function animate(){if(_this.animationInterrupted){return}// Pan <delta> distance per second
-var timestamp=new Date/1000;var k=timestamp-lastTimestamp;lastTimestamp=timestamp;_this.props.sceneContext.scene.view.controls._pan(delta.x*k,delta.y*k);_this.props.sceneContext.scene.notifyChange();requestAnimationFrame(_animate)};requestAnimationFrame(_animate);var element=keyboard?ev.target:ev.view;var event=keyboard?"keyup":"mouseup";element.addEventListener(event,function(){_this.animationInterrupted=true;_this.updateUrlParams()},{once:true})});_defineProperty(_this,"tilt",function(ev,yaw,az){var keyboard=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;if(_this.state.firstPerson){az*=-1;yaw*=-1}// Pan faster the heigher one is above the terrain
-_this.animationInterrupted=false;var lastTimestamp=new Date/1000;var _animate2=function animate(){if(_this.animationInterrupted){return}// Pan <delta> distance per second
-var timestamp=new Date/1000;var k=timestamp-lastTimestamp;lastTimestamp=timestamp;if(az){_this.props.sceneContext.scene.view.controls._rotateUp(az*k)}if(yaw){_this.props.sceneContext.scene.view.controls._rotateLeft(yaw*k)}_this.props.sceneContext.scene.notifyChange();requestAnimationFrame(_animate2)};requestAnimationFrame(_animate2);var element=keyboard?ev.target:ev.view;var event=keyboard?"keyup":"mouseup";element.addEventListener(event,function(){_this.animationInterrupted=true;_this.updateUrlParams()},{once:true})});_defineProperty(_this,"moveCameraHeight",function(ev,dir){if(!_this.state.firstPerson){return}var pos=_this.props.sceneContext.scene.view.camera.position;_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(terrHeight){_this.animationInterrupted=false;var lastTimestamp=new Date/1000;var _animate3=function animate(){if(_this.animationInterrupted){return}// Move <delta> distance per second
-var timestamp=new Date/1000;var k=timestamp-lastTimestamp;lastTimestamp=timestamp;var z=_this.props.sceneContext.scene.view.camera.position.z;var delta=0.5*(z-terrHeight);_this.personHeight=Math.max(2,_this.personHeight+delta*k*dir);var newZ=terrHeight+_this.personHeight;_this.props.sceneContext.scene.view.camera.position.z=newZ;_this.props.sceneContext.scene.view.controls.target.z=newZ;_this.props.sceneContext.scene.notifyChange();requestAnimationFrame(_animate3)};requestAnimationFrame(_animate3)});ev.target.addEventListener("keyup",function(){_this.animationInterrupted=true;_this.updateUrlParams()},{once:true})});_defineProperty(_this,"resetTilt",function(){if(_this.state.firstPerson){var target=_this.props.sceneContext.scene.view.controls.target;var camerapos=_this.props.sceneContext.scene.view.camera.position;_this.props.sceneContext.scene.view.controls.target.set(target.x,target.y,camerapos.z)}else{// Animate from old to new position
-var _target=_this.props.sceneContext.scene.view.controls.target;var oldPosition=_this.props.sceneContext.scene.view.camera.position.clone();var oldYaw=_this.props.sceneContext.scene.view.controls.getAzimuthalAngle();var newPosition=new Vector3(_target.x,_target.y,_target.distanceTo(oldPosition));var startTime=new Date/1000;_this.animationInterrupted=false;var _animate4=function animate(){if(!_this.props.sceneContext.scene||_this.animationInterrupted){return}var duration=2;var elapsed=new Date/1000-startTime;var x=elapsed/duration;var k=0.5*(1-Math.cos(x*Math.PI));var currentPosition=new Vector3().lerpVectors(oldPosition,newPosition,k);currentPosition.x-=_target.x;currentPosition.y-=_target.y;currentPosition.applyAxisAngle(new Vector3(0,0,1),-oldYaw*k);currentPosition.x+=_target.x;currentPosition.y+=_target.y;_this.props.sceneContext.scene.view.camera.position.copy(currentPosition);_this.props.sceneContext.scene.notifyChange();if(elapsed<duration){requestAnimationFrame(_animate4)}else{_this.props.sceneContext.scene.view.camera.position.copy(newPosition);_this.props.sceneContext.scene.notifyChange()}};requestAnimationFrame(_animate4)}_this.updateUrlParams()});_defineProperty(_this,"setViewToExtent",function(bounds){var _this$props$sceneCont;var angle=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;_this.leaveFirstPerson();var center={x:0.5*(bounds[0]+bounds[2]),y:0.5*(bounds[1]+bounds[3])};center.z=(_this$props$sceneCont=_this.props.sceneContext.getTerrainHeightFromMap([center.x,center.y]))!==null&&_this$props$sceneCont!==void 0?_this$props$sceneCont:0;// Camera height to width bbox width
-var fov=35/180*Math.PI;var cameraHeight=(bounds[2]-bounds[0])/(2*Math.tan(fov/2));// Animate from old to new position/target
-var oldPosition=_this.props.sceneContext.scene.view.camera.position.clone();var oldTarget=_this.props.sceneContext.scene.view.controls.target.clone();var oldYaw=_this.props.sceneContext.scene.view.controls.getAzimuthalAngle();var newPosition=new Vector3(center.x,center.y,center.z+cameraHeight);var newTarget=new Vector3(center.x,center.y,center.z);var rotateAngle=-oldYaw+angle;while(rotateAngle>Math.PI){rotateAngle-=2*Math.PI}while(rotateAngle<-Math.PI){rotateAngle+=2*Math.PI}var startTime=new Date/1000;_this.animationInterrupted=false;var _animate5=function animate(){if(!_this.props.sceneContext.scene||_this.animationInterrupted){return}var duration=2;var elapsed=new Date/1000-startTime;var x=elapsed/duration;var k=0.5*(1-Math.cos(x*Math.PI));var currentPosition=new Vector3().lerpVectors(oldPosition,newPosition,k);var currentTarget=new Vector3().lerpVectors(oldTarget,newTarget,k);currentPosition.x-=currentTarget.x;currentPosition.y-=currentTarget.y;currentPosition.applyAxisAngle(new Vector3(0,0,1),rotateAngle*k);currentPosition.x+=currentTarget.x;currentPosition.y+=currentTarget.y;_this.props.sceneContext.scene.view.camera.position.copy(currentPosition);_this.props.sceneContext.scene.view.controls.target.copy(currentTarget);_this.props.sceneContext.scene.notifyChange();if(elapsed<duration){requestAnimationFrame(_animate5)}else{_this.props.sceneContext.scene.view.camera.position.copy(newPosition);_this.props.sceneContext.scene.view.controls.target.copy(newTarget);_this.props.sceneContext.scene.view.controls._rotateLeft(-angle);_this.props.sceneContext.scene.notifyChange()}};requestAnimationFrame(_animate5)});_defineProperty(_this,"updateControlsTarget",function(){var _raycaster$intersectO,_terrInter$z;var controls=_this.props.sceneContext.scene.view.controls;var camera=_this.props.sceneContext.scene.view.camera;var target=controls.target;var raycaster=new Raycaster;// Query highest resolution terrain tile (i.e. tile with no children)
-var x=target.x;var y=target.y;raycaster.set(new Vector3(x,y,target.z+100000),new Vector3(0,0,-1));var terrInter=(_raycaster$intersectO=raycaster.intersectObjects([_this.props.sceneContext.map.object3d]).filter(function(result){return result.object.children.length===0})[0])===null||_raycaster$intersectO===void 0?void 0:_raycaster$intersectO.point;// FIXME: Why does raycaster.intersectObjects on terrain return 0-ish even when above terrain?
-if(((_terrInter$z=terrInter===null||terrInter===void 0?void 0:terrInter.z)!==null&&_terrInter$z!==void 0?_terrInter$z:0)<=1){return}if(_this.state.firstPerson){var delta=terrInter.z+_this.personHeight-camera.position.z;camera.position.z+=delta;target.z+=delta}else{var cameraHeight=camera.position.z;// If camera height is at terrain height, target height should be at terrain height
-// If camera height is at twice the terrain height or further, target height should be zero
-var k=Math.max(0,1-(cameraHeight-terrInter.z)/terrInter.z);target.lerpVectors(new Vector3(x,y,0),terrInter,k)}_this.updateUrlParams()});_defineProperty(_this,"stopAnimations",function(){_this.animationInterrupted=true});_defineProperty(_this,"switchToFirstPersonView",function(ev){// Don't do anything if a task is set, may interfere
-if(_this.props.currentTask){return}if(!_this.state.firstPerson){_this.setupFirstPerson(ev)}});_defineProperty(_this,"toggleFirstPersonControls",function(){if(_this.state.firstPerson){_this.leaveFirstPerson()}else{_this.props.sceneContext.scene.domElement.addEventListener("click",_this.setupFirstPerson,{once:true});var cursor=ConfigUtils.getAssetsPath()+"/img/person.svg";_this.props.sceneContext.scene.domElement.style.cursor="url(".concat(cursor,"), pointer")}});_defineProperty(_this,"setupFirstPerson",function(ev){_this.props.sceneContext.scene.domElement.style.cursor="";var rect=ev.target.getBoundingClientRect();var mouseX=(ev.clientX-rect.left)/rect.width*2-1;var mouseY=-((ev.clientY-rect.top)/rect.height)*2+1;var intersection=_this.props.sceneContext.getSceneIntersection(mouseX,mouseY,false);if(!intersection){return}var pos=intersection.point;_this.personHeight=2;_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(z){// Animate from old to new position/target
-var oldPosition=_this.props.sceneContext.scene.view.camera.position.clone();var oldTarget=_this.props.sceneContext.scene.view.controls.target.clone();var newPosition=new Vector3(pos.x,pos.y,z+_this.personHeight);var newTarget=new Vector3(pos.x,pos.y+300,z+_this.personHeight);var startTime=new Date/1000;_this.animationInterrupted=false;var _animate6=function animate(){if(!_this.props.sceneContext.scene||_this.animationInterrupted){return}var duration=2;var elapsed=new Date/1000-startTime;var x=elapsed/duration;var k=0.5*(1-Math.cos(x*Math.PI));var currentPosition=new Vector3().lerpVectors(oldPosition,newPosition,k);var currentTarget=new Vector3().lerpVectors(oldTarget,newTarget,k);_this.props.sceneContext.scene.view.camera.position.copy(currentPosition);_this.props.sceneContext.scene.view.controls.target.copy(currentTarget);_this.props.sceneContext.scene.notifyChange();if(elapsed<duration){requestAnimationFrame(_animate6)}else{_this.props.sceneContext.scene.view.camera.position.copy(newPosition);_this.props.sceneContext.scene.view.controls.target.set(pos.x,pos.y+0.1,z+_this.personHeight);_this.props.sceneContext.scene.notifyChange();_this.controls.maxPolarAngle=0.8*Math.PI;_this.controls.panSpeed=600;_this.controls.enableZoom=false;_this.setState({firstPerson:true},_this.updateUrlParams)}};requestAnimationFrame(_animate6)})});_defineProperty(_this,"leaveFirstPerson",function(){if(_this.state.firstPerson){_this.controls.maxPolarAngle=Math.PI*0.5;_this.controls.panSpeed=1;_this.controls.enableZoom=true;_this.setState({firstPerson:false},function(){var cameraPos=_this.props.sceneContext.scene.view.camera.position;var bounds=[cameraPos.x-1000,cameraPos.y-1000,cameraPos.x+1000,cameraPos.y+1000];_this.setViewToExtent(bounds);_this.updateUrlParams()})}});_defineProperty(_this,"updateUrlParams",function(){var tpos=_this.props.sceneContext.scene.view.controls.target;var cpos=_this.props.sceneContext.scene.view.camera.position;UrlParams.updateParams({v3d:[tpos.x,tpos.y,tpos.z,cpos.x,cpos.y,cpos.z,_this.state.firstPerson?_this.personHeight:0].map(function(v){return v.toFixed(1)}).join(",")})});_defineProperty(_this,"restoreView",function(viewState){if(viewState.cameraPos&&viewState.center){var cameraPos=_this.props.sceneContext.scene.view.camera.position;cameraPos.x=viewState.cameraPos[0];cameraPos.y=viewState.cameraPos[1];cameraPos.z=viewState.cameraPos[2];var controlsTarget=_this.props.sceneContext.scene.view.controls.target;controlsTarget.x=viewState.center[0];controlsTarget.y=viewState.center[1];controlsTarget.z=viewState.center[2];_this.personHeight=viewState.personHeight;if(_this.personHeight>0){_this.controls.maxPolarAngle=0.8*Math.PI;_this.controls.panSpeed=600;_this.controls.enableZoom=false;_this.setState({firstPerson:true})}_this.props.sceneContext.scene.notifyChange()}});_this.animationInterrupted=false;_this.personHeight=2;_this.prevTarget=null;return _this}_inherits(MapControls3D,_React$Component);return _createClass(MapControls3D,[{key:"componentDidMount",value:function componentDidMount(){var sceneElement=this.props.sceneContext.scene.domElement;sceneElement.tabIndex=0;this.controls=new MapControls(this.props.sceneContext.scene.view.camera,sceneElement);this.controls.zoomToCursor=true;this.controls.enableDamping=true;this.controls.dampingFactor=0.2;this.controls.maxPolarAngle=Math.PI*0.5;sceneElement.addEventListener("keydown",this.keyHandler);this.props.sceneContext.scene.view.setControls(this.controls);var targetPos=this.props.sceneContext.scene.view.camera.position.clone();targetPos.z=0;this.controls.target=targetPos;this.controls.addEventListener("change",this.updateControlsTarget);sceneElement.addEventListener("dblclick",this.switchToFirstPersonView);this.props.onControlsSet(this)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.animationInterrupted=true;var sceneElement=this.props.sceneContext.scene.domElement;sceneElement.addEventListener("keydown",this.keyHandler);this.controls.removeEventListener("change",this.updateControlsTarget);this.props.sceneContext.scene.domElement.removeEventListener("dblclick",this.switchToFirstPersonView);// Don't explicitly remove controls from the view, they will be removed with the instance
-}},{key:"render",value:function render(){var _this2=this;var firstPersonButtonClasses=classNames({"map3d-firstperson-button":true,"map3d-firstperson-button-active":this.state.firstPerson});return[/*#__PURE__*/React.createElement("div",{className:"map3d-nav-pan",key:"MapPanWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-up",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,0,1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-left",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"home",onClick:function onClick(){return _this2.home()}}),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-right",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,-1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-down",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,0,-1)}}),/*#__PURE__*/React.createElement("span",null)),/*#__PURE__*/React.createElement("div",{className:"map3d-nav-rotate",key:"MapRotateWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-up",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,0,1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-left",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"point",onClick:function onClick(){return _this2.resetTilt()}}),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-right",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,-1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-down",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,0,-1)}}),/*#__PURE__*/React.createElement("span",null)),/*#__PURE__*/React.createElement("div",{className:firstPersonButtonClasses,key:"FirstPersonButton",onClick:this.toggleFirstPersonControls},/*#__PURE__*/React.createElement(Icon,{icon:"person"}))]}}])}(React.Component);_defineProperty(MapControls3D,"propTypes",{currentTask:PropTypes.string,onControlsSet:PropTypes.func,sceneContext:PropTypes.object});export default connect(function(state){return{currentTask:state.task.id}},{})(MapControls3D);
+ */import React from"react";import{connect}from"react-redux";import classNames from"classnames";import PropTypes from"prop-types";import{Vector3}from"three";import ConfigUtils from"../../utils/ConfigUtils";import{UrlParams}from"../../utils/PermaLinkUtils";import Icon from"../Icon";import FirstPersonControls3D from"./utils/FirstPersonControls3D";import OrbitControls3D from"./utils/OrbitControls3D";import"./style/MapControls3D.css";var MapControls3D=/*#__PURE__*/function(_React$Component){function MapControls3D(){var _this;_classCallCheck(this,MapControls3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapControls3D,[].concat(args));_defineProperty(_this,"state",{pickingFirstPerson:false,firstPerson:false});_defineProperty(_this,"switchToFirstPersonView",function(ev){// Don't do anything if a task is set, may interfere
+if(!_this.props.currentTask&&!_this.state.firstPerson){_this.setupFirstPerson(ev)}});_defineProperty(_this,"toggleFirstPersonControls",function(){if(_this.state.firstPerson){_this.leaveFirstPerson()}else if(_this.state.pickingFirstPerson){_this.props.sceneContext.scene.domElement.removeEventListener("click",_this.setupFirstPerson);_this.props.sceneContext.scene.domElement.style.cursor="";_this.setState({pickingFirstPerson:false})}else{_this.props.sceneContext.scene.domElement.addEventListener("click",_this.setupFirstPerson,{once:true});var cursor=ConfigUtils.getAssetsPath()+"/img/person.svg";_this.props.sceneContext.scene.domElement.style.cursor="url(".concat(cursor,"), pointer");_this.setState({pickingFirstPerson:true})}});_defineProperty(_this,"setupFirstPerson",function(ev){_this.props.sceneContext.scene.domElement.style.cursor="";var rect=ev.target.getBoundingClientRect();var mouseX=(ev.clientX-rect.left)/rect.width*2-1;var mouseY=-((ev.clientY-rect.top)/rect.height)*2+1;var intersection=_this.props.sceneContext.getSceneIntersection(mouseX,mouseY,false);if(!intersection){return}var pos=intersection.point;_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(z){var camerapos=new Vector3(pos.x,pos.y,z+_this.fpcontrols.personHeight);var targetpos=new Vector3(pos.x,pos.y+300,z+_this.fpcontrols.personHeight);_this.controls.animateTo(camerapos,targetpos,0,function(){_this.controls.disconnect();_this.fpcontrols.connect(_this.props.sceneContext);_this.fpcontrols.setView(camerapos,new Vector3(0,1,0));_this.setState({firstPerson:true,pickingFirstPerson:false})})})});_defineProperty(_this,"leaveFirstPerson",function(){if(_this.state.firstPerson){_this.setState({firstPerson:false},function(){// Need to ensure this.state.firstPerson is false to avoid endless loop
+var camerapos=_this.props.sceneContext.scene.view.camera.position;_this.fpcontrols.disconnect();_this.controls.connect(_this.props.sceneContext);_this.controls.setView(camerapos,new Vector3().addVectors(camerapos,_this.fpcontrols.lookAt));var bounds=[camerapos.x-750,camerapos.y-750,camerapos.x+750,camerapos.y+750];_this.setViewToExtent(bounds)})}});_defineProperty(_this,"home",function(){var extent=_this.props.sceneContext.map.extent;var bounds=[extent.west,extent.south,extent.east,extent.north];_this.setViewToExtent(bounds)});_defineProperty(_this,"setViewToExtent",function(bounds){var _this$props$sceneCont;var angle=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;_this.leaveFirstPerson();var center={x:0.5*(bounds[0]+bounds[2]),y:0.5*(bounds[1]+bounds[3])};center.z=(_this$props$sceneCont=_this.props.sceneContext.getTerrainHeightFromMap([center.x,center.y]))!==null&&_this$props$sceneCont!==void 0?_this$props$sceneCont:0;// Camera height to width bbox width
+var fov=35/180*Math.PI;var cameraHeight=(bounds[2]-bounds[0])/(2*Math.tan(fov/2));var camerapos=new Vector3(center.x,center.y,center.z+cameraHeight);var target=new Vector3(center.x,center.y,center.z);_this.controls.animateTo(camerapos,target,angle)});_defineProperty(_this,"pan",function(ev,dx,dy){var panInterval=setInterval(function(){_this.props.sceneContext.scene.view.controls.panView(dx,dy)},50);ev.view.addEventListener("pointerup",function(){clearInterval(panInterval)},{once:true})});_defineProperty(_this,"tilt",function(ev,azimuth,polar){var tiltInterval=setInterval(function(){_this.props.sceneContext.scene.view.controls.tiltView(azimuth,polar)},50);ev.view.addEventListener("pointerup",function(){clearInterval(tiltInterval)},{once:true})});_defineProperty(_this,"resetTilt",function(){var camerapos=_this.props.sceneContext.scene.view.camera.position;if(_this.state.firstPerson){var newLookAt=_this.fpcontrols.lookAt.clone();newLookAt.z=0;_this.fpcontrols.setView(camerapos,newLookAt.normalize())}else{var target=_this.controls.target;var newcamerapos=new Vector3(target.x,target.y,target.distanceTo(camerapos));_this.controls.animateTo(newcamerapos,target,0)}});_defineProperty(_this,"zoom",function(ev,delta){var zoomInterval=setInterval(function(){_this.props.sceneContext.scene.view.controls.zoomView(delta)},50);ev.view.addEventListener("pointerup",function(){clearInterval(zoomInterval)},{once:true})});_defineProperty(_this,"updateUrlParams",function(){var cpos=_this.props.sceneContext.scene.view.camera.position;var tpos=_this.controls.target;UrlParams.updateParams({v3d:[cpos.x,cpos.y,cpos.z,tpos.x,tpos.y,tpos.z,0].map(function(v){return v.toFixed(1)}).join(",")});_this.props.onCameraChanged([tpos.x,tpos.y,tpos.z])});_defineProperty(_this,"updateFpUrlParams",function(){var cpos=_this.fpcontrols.target;var lkat=_this.fpcontrols.lookAt;var h=_this.fpcontrols.personHeight;UrlParams.updateParams({v3d:[cpos.x,cpos.y,cpos.z,lkat.x,lkat.y,lkat.z,h].map(function(v){return v.toFixed(1)}).join(",")});_this.props.onCameraChanged([cpos.x,cpos.y,cpos.z])});_defineProperty(_this,"restoreView",function(viewState){if(viewState.camera&&viewState.target){var camera=_construct(Vector3,_toConsumableArray(viewState.camera));var target=_construct(Vector3,_toConsumableArray(viewState.target));if(viewState.personHeight>0){_this.controls.disconnect();_this.fpcontrols.connect(_this.props.sceneContext);_this.fpcontrols.setView(camera,target,viewState.personHeight);_this.setState({firstPerson:true})}else{_this.controls.setView(camera,target)}}});return _this}_inherits(MapControls3D,_React$Component);return _createClass(MapControls3D,[{key:"componentDidMount",value:function componentDidMount(){var sceneElement=this.props.sceneContext.scene.domElement;sceneElement.tabIndex=0;this.controls=new OrbitControls3D(this.props.sceneContext.scene.view.camera);this.fpcontrols=new FirstPersonControls3D(this.props.sceneContext.scene.view.camera);this.controls.connect(this.props.sceneContext);var targetPos=this.props.sceneContext.scene.view.camera.position.clone();targetPos.z=0;this.controls.target=targetPos;this.controls.addEventListener("change",this.updateUrlParams);this.fpcontrols.addEventListener("change",this.updateFpUrlParams);sceneElement.addEventListener("dblclick",this.switchToFirstPersonView);this.props.onControlsSet(this);this.updateUrlParams()}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.controls.removeEventListener("change",this.updateControlsTarget);this.fpcontrols.removeEventListener("change",this.updateFpUrlParams);if(this.state.firstPerson){this.fpcontrols.disconnect()}else{this.controls.disconnect()}this.props.sceneContext.scene.domElement.removeEventListener("dblclick",this.switchToFirstPersonView)}},{key:"render",value:function render(){var _this2=this;var firstPersonButtonClasses=classNames({"map3d-firstperson-button":true,"map3d-firstperson-button-active":this.state.firstPerson});return/*#__PURE__*/React.createElement("div",{className:"map3d-nav"},/*#__PURE__*/React.createElement("div",{className:"map3d-nav-pan",key:"MapPanWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-up",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,0,1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-left",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,-1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"home",onClick:function onClick(){return _this2.home()}}),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-right",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-down",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,0,-1)}}),/*#__PURE__*/React.createElement("span",null)),/*#__PURE__*/React.createElement("div",{className:"map3d-nav-rotate",key:"MapRotateWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-up",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,0,0.1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-left",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,0.1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"point",onClick:function onClick(){return _this2.resetTilt()}}),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-right",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,-0.1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-down",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,0,-0.1)}}),/*#__PURE__*/React.createElement("span",null)),!this.state.firstPerson?/*#__PURE__*/React.createElement("div",{className:"map3d-nav-zoom"},/*#__PURE__*/React.createElement("div",{onPointerDown:function onPointerDown(ev){return _this2.zoom(ev,+1)}},/*#__PURE__*/React.createElement(Icon,{icon:"plus"})),/*#__PURE__*/React.createElement("div",{onPointerDown:function onPointerDown(ev){return _this2.zoom(ev,-1)}},/*#__PURE__*/React.createElement(Icon,{icon:"minus"}))):null,/*#__PURE__*/React.createElement("div",{className:firstPersonButtonClasses,key:"FirstPersonButton",onClick:this.toggleFirstPersonControls},/*#__PURE__*/React.createElement(Icon,{icon:"person"})))}}])}(React.Component);_defineProperty(MapControls3D,"propTypes",{currentTask:PropTypes.string,onCameraChanged:PropTypes.func,onControlsSet:PropTypes.func,sceneContext:PropTypes.object});export default connect(function(state){return{currentTask:state.task.id}},{})(MapControls3D);

package/components/map3d/MapExport3D.js

@@ -4,8 +4,12 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import axios from"axios";import FileSaver from"file-saver";import formDataEntries from"formdata-json";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import utif from"utif";import{setCurrentTask}from"../../actions/task";import LocaleUtils from"../../utils/LocaleUtils";import MiscUtils from"../../utils/MiscUtils";import Icon from"../Icon";import SideBar from"../SideBar";import Spinner from"../widgets/Spinner";import"./../../plugins/style/MapExport.css";import"./style/MapExport3D.css";var MapExport3D=/*#__PURE__*/function(_React$Component){function MapExport3D(){var _this;_classCallCheck(this,MapExport3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapExport3D,[].concat(args));_defineProperty(_this,"state",{minimized:false,layouts:[],selectedFormat:"image/jpeg",layout:"",x:0,y:0,width:0,height:0,exporting:false});_defineProperty(_this,"onShow",function(){var _this$props$theme;if(!isEmpty((_this$props$theme=_this.props.theme)===null||_this$props$theme===void 0?void 0:_this$props$theme.print)){var layouts=_this.props.theme.print.filter(function(l){return l.map}).sort(function(a,b){return a.name.split("/").pop().localeCompare(b.name.split("/").pop(),undefined,{numeric:true})});var layout=layouts.find(function(l){return l["default"]})||layouts[0];_this.setState({layouts:layouts,layout:layout})}else{_this.setState({layouts:[],layout:""})}});_defineProperty(_this,"formatChanged",function(ev){_this.setState({selectedFormat:ev.target.value})});_defineProperty(_this,"layoutChanged",function(ev){var layout=_this.props.theme.print.find(function(item){return item.name===ev.target.value});_this.setState({layout:layout})});_defineProperty(_this,"renderBody",function(){var _this$state$layout,_this$state$layout2,_this$state$layout3;var formatMap={"image/jpeg":"JPEG","image/png":"PNG","image/tiff":"TIFF","application/pdf":"PDF"};var exportDisabled=_this.state.exporting||_this.state.width===0||_this.state.selectedFormat==="application/pdf"&&!_this.state.layout;var mapName=((_this$state$layout=_this.state.layout)===null||_this$state$layout===void 0||(_this$state$layout=_this$state$layout.map)===null||_this$state$layout===void 0?void 0:_this$state$layout.name)||"";return/*#__PURE__*/React.createElement("div",{className:"mapexport-body"},/*#__PURE__*/React.createElement("form",{onSubmit:_this["export"]},/*#__PURE__*/React.createElement("table",{className:"options-table"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.format")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{name:"FORMAT",onChange:_this.formatChanged,value:_this.state.selectedFormat},Object.entries(formatMap).map(function(_ref){var _ref2=_slicedToArray(_ref,2),format=_ref2[0],label=_ref2[1];return/*#__PURE__*/React.createElement("option",{key:format,value:format},label)})))),_this.state.selectedFormat==="application/pdf"?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("print.layout")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:_this.layoutChanged,value:_this.state.layout.name},_this.state.layouts.map(function(item){return/*#__PURE__*/React.createElement("option",{key:item.name,value:item.name},item.name.split("/").pop())})))):null,_this.state.selectedFormat==="application/pdf"?(((_this$state$layout2=_this.state.layout)===null||_this$state$layout2===void 0?void 0:_this$state$layout2.labels)||[]).map(function(label){var _this$props$theme$pri;// Omit labels which start with __
-if(label.startsWith("__")){return null}var opts=_objectSpread({rows:1,name:label.toUpperCase()},(_this$props$theme$pri=_this.props.theme.printLabelConfig)===null||_this$props$theme$pri===void 0?void 0:_this$props$theme$pri[label]);return _this.renderPrintLabelField(label,opts)}):null)),_this.state.selectedFormat==="application/pdf"?/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("input",{name:"TEMPLATE",type:"hidden",value:((_this$state$layout3=_this.state.layout)===null||_this$state$layout3===void 0?void 0:_this$state$layout3.name)||""}),/*#__PURE__*/React.createElement("input",{name:"csrf_token",type:"hidden",value:MiscUtils.getCsrfToken()}),/*#__PURE__*/React.createElement("input",{name:mapName+":extent",readOnly:true,type:"hidden",value:"0,0,0,0"}),/*#__PURE__*/React.createElement("input",{name:"SERVICE",readOnly:true,type:"hidden",value:"WMS"}),/*#__PURE__*/React.createElement("input",{name:"VERSION",readOnly:true,type:"hidden",value:_this.props.theme.version}),/*#__PURE__*/React.createElement("input",{name:"REQUEST",readOnly:true,type:"hidden",value:"GetPrint"}),/*#__PURE__*/React.createElement("input",{name:"TRANSPARENT",readOnly:true,type:"hidden",value:"true"}),/*#__PURE__*/React.createElement("input",{name:"SRS",readOnly:true,type:"hidden",value:_this.props.theme.mapCrs}),/*#__PURE__*/React.createElement("input",{name:"LAYERS",readOnly:true,type:"hidden",value:""}),/*#__PURE__*/React.createElement("input",{name:mapName+":LAYERS",readOnly:true,type:"hidden",value:""})):null,/*#__PURE__*/React.createElement("div",{className:"button-bar"},/*#__PURE__*/React.createElement("button",{className:"button",disabled:exportDisabled,type:"submit"},_this.state.exporting?/*#__PURE__*/React.createElement("span",{className:"mapexport-wait"},/*#__PURE__*/React.createElement(Spinner,null)," ",LocaleUtils.tr("mapexport.wait")):LocaleUtils.tr("mapexport.submit")))))});_defineProperty(_this,"renderExportFrame",function(){var boxStyle={left:_this.state.x+"px",top:_this.state.y+"px",width:_this.state.width+"px",height:_this.state.height+"px"};return/*#__PURE__*/React.createElement("div",{className:"mapexport3d-event-container",onPointerDown:_this.startSelection},/*#__PURE__*/React.createElement("div",{className:"mapexport3d-frame",style:boxStyle},/*#__PURE__*/React.createElement("span",{className:"mapexport3d-frame-label"},_this.state.width+" x "+_this.state.height)))});_defineProperty(_this,"startSelection",function(ev){if(ev.shiftKey){var target=ev.currentTarget;var view=ev.view;view.addEventListener("pointerup",function(){target.style.pointerEvents="";view.document.body.style.userSelect=""},{once:true});// Move behind
-target.style.pointerEvents="none";view.document.body.style.userSelect="none";_this.props.sceneContext.scene.domElement.dispatchEvent(new PointerEvent("pointerdown",ev));return}else if(ev.button===0){var rect=ev.currentTarget.getBoundingClientRect();_this.setState({x:Math.round(ev.clientX-rect.left),y:Math.round(ev.clientY-rect.top),width:0,height:0});var constrainRatio=_this.state.selectedFormat==="application/pdf"&&_this.state.layout;var ratio=constrainRatio?_this.state.layout.map.height/_this.state.layout.map.width:null;var onMouseMove=function onMouseMove(event){_this.setState(function(state){var width=Math.round(Math.max(0,Math.round(event.clientX-rect.left)-state.x));var height=constrainRatio?Math.round(width*ratio):Math.round(Math.max(0,Math.round(event.clientY-rect.top)-state.y));return{width:width,height:height}})};ev.view.addEventListener("pointermove",onMouseMove);ev.view.addEventListener("pointerup",function(){ev.view.removeEventListener("pointermove",onMouseMove)},{once:true})}});_defineProperty(_this,"export",function(ev){ev.preventDefault();var form=ev.target;_this.setState({exporting:true});var _this$state=_this.state,x=_this$state.x,y=_this$state.y,width=_this$state.width,height=_this$state.height;if(width>0&&height>0){var data=_this.props.sceneContext.scene.renderer.domElement.toDataURL("image/png");var canvas=document.createElement("canvas");var ctx=canvas.getContext("2d");var img=new Image;img.src=data;img.onload=function(){canvas.width=width;canvas.height=height;ctx.drawImage(img,-x,-y);if(_this.state.selectedFormat==="application/pdf"){canvas.toBlob(function(blob){blob.arrayBuffer().then(function(imgBuffer){return _this.exportToPdf(form,imgBuffer)})},"image/png")}else if(_this.state.selectedFormat==="image/tiff"){var imageData=ctx.getImageData(0,0,width,height);var blob=new Blob([utif.encodeImage(imageData.data,width,height)],{type:"image/tiff"});FileSaver.saveAs(blob,"export."+_this.state.selectedFormat.replace(/.*\//,""));_this.setState({exporting:false})}else{canvas.toBlob(function(blob){FileSaver.saveAs(blob,"export."+_this.state.selectedFormat.replace(/.*\//,""));_this.setState({exporting:false})},_this.state.selectedFormat)}}}});_defineProperty(_this,"renderPrintLabelField",function(label,opts){var defaultValue=opts.defaultValue||"";var autopopulated=false;if(label===_this.props.theme.printLabelForSearchResult){defaultValue=_this.getSearchMarkerLabel();autopopulated=true}else if(label===_this.props.theme.printLabelForAttribution){defaultValue=_this.getAttributionLabel();autopopulated=true}if(autopopulated&&_this.props.hideAutopopulatedFields){return/*#__PURE__*/React.createElement("tr",{key:"label."+label},/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("input",{defaultValue:defaultValue,name:opts.name,type:"hidden"})))}else{if(opts.options){return/*#__PURE__*/React.createElement("tr",{key:"label."+label},/*#__PURE__*/React.createElement("td",null,MiscUtils.capitalizeFirst(label)),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{defaultValue:defaultValue,name:opts.name},opts.options.map(function(value){return/*#__PURE__*/React.createElement("option",{key:value,value:value},value)}))))}else{var style={};if(opts.rows||opts.cols){style.resize="none"}if(opts.cols){style.width="initial"}return/*#__PURE__*/React.createElement("tr",{key:"label."+label},/*#__PURE__*/React.createElement("td",null,MiscUtils.capitalizeFirst(label)),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("textarea",_extends({},opts,{defaultValue:defaultValue,readOnly:autopopulated,style:style}))))}}});_defineProperty(_this,"getSearchMarkerLabel",function(){// TODO
+ */import React from"react";import{connect}from"react-redux";import axios from"axios";import FileSaver from"file-saver";import formDataEntries from"formdata-json";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{SRGBColorSpace,Vector2,WebGLRenderTarget}from"three";import utif from"utif";import{setCurrentTask}from"../../actions/task";import LocaleUtils from"../../utils/LocaleUtils";import MiscUtils from"../../utils/MiscUtils";import Icon from"../Icon";import SideBar from"../SideBar";import NumberInput from"../widgets/NumberInput";import Spinner from"../widgets/Spinner";import"./../../plugins/style/MapExport.css";import"./style/MapExport3D.css";var MapExport3D=/*#__PURE__*/function(_React$Component){function MapExport3D(){var _this;_classCallCheck(this,MapExport3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapExport3D,[].concat(args));_defineProperty(_this,"state",MapExport3D.defaultState);_defineProperty(_this,"onShow",function(){var _this$props$theme;if(!isEmpty((_this$props$theme=_this.props.theme)===null||_this$props$theme===void 0?void 0:_this$props$theme.print)){var _ref,_this$props$theme$pri,_this$props$theme$pri2,_this$props$theme$pri3;var layouts=_this.props.theme.print.filter(function(l){return l.map}).sort(function(a,b){return a.name.split("/").pop().localeCompare(b.name.split("/").pop(),undefined,{numeric:true})});var exportDpi=(_ref=(_this$props$theme$pri=(_this$props$theme$pri2=_this.props.theme.printResolutions)===null||_this$props$theme$pri2===void 0?void 0:_this$props$theme$pri2.find(function(x){return x===300}))!==null&&_this$props$theme$pri!==void 0?_this$props$theme$pri:(_this$props$theme$pri3=_this.props.theme.printResolutions)===null||_this$props$theme$pri3===void 0?void 0:_this$props$theme$pri3[0])!==null&&_ref!==void 0?_ref:300;_this.setState({layouts:layouts,exportDpi:exportDpi})}else{_this.setState({layouts:[]})}});_defineProperty(_this,"onHide",function(){_this.setState(MapExport3D.defaultState)});_defineProperty(_this,"formatChanged",function(ev){var layout="";var frameRatio=null;if(ev.target.value==="application/pdf"){layout=_this.state.layouts.find(function(l){return l["default"]})||_this.state.layouts[0];frameRatio=layout.map.height/layout.map.width}_this.setState(function(state){return{selectedFormat:ev.target.value,layout:layout,frameRatio:frameRatio,height:frameRatio?Math.round(state.width*frameRatio):state.height}})});_defineProperty(_this,"layoutChanged",function(ev){var layout=_this.props.theme.print.find(function(item){return item.name===ev.target.value});var frameRatio=layout.map.height/layout.map.width;_this.setState(function(state){return{layout:layout,frameRatio:frameRatio,height:Math.round(state.width*frameRatio)}})});_defineProperty(_this,"renderBody",function(){var _this$state$layout,_this$state$layout2,_this$state$layout3;var formatMap={"image/jpeg":"JPEG","image/png":"PNG","image/tiff":"TIFF","application/pdf":"PDF"};var exportDisabled=_this.state.exporting||_this.state.width===0||_this.state.selectedFormat==="application/pdf"&&!_this.state.layout;var mapName=((_this$state$layout=_this.state.layout)===null||_this$state$layout===void 0||(_this$state$layout=_this$state$layout.map)===null||_this$state$layout===void 0?void 0:_this$state$layout.name)||"";var resolutionChooser=null;if(_this.state.selectedFormat==="application/pdf"){if(!isEmpty(_this.props.theme.printResolutions)){resolutionChooser=/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({exportDpi:ev.target.value})},value:_this.state.exportDpi},_this.props.theme.printResolutions.map(function(res){return/*#__PURE__*/React.createElement("option",{disabled:isEmpty(_this.state.layouts),key:res,value:res},res," dpi")}))}else{resolutionChooser=/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:500,min:50,onChange:function onChange(val){return _this.setState({exportDpi:val})},suffix:" dpi",value:_this.state.exportDpi})}}else{resolutionChooser=/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({exportScaleFactor:ev.target.value})},value:_this.state.exportScaleFactor},[100,150,200,250,300,350,400,450,500].map(function(res){return/*#__PURE__*/React.createElement("option",{key:res,value:res},res,"%")}))}return/*#__PURE__*/React.createElement("div",{className:"mapexport-body"},/*#__PURE__*/React.createElement("form",{onSubmit:_this["export"]},/*#__PURE__*/React.createElement("table",{className:"options-table"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.format")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{name:"FORMAT",onChange:_this.formatChanged,value:_this.state.selectedFormat},Object.entries(formatMap).map(function(_ref2){var _ref3=_slicedToArray(_ref2,2),format=_ref3[0],label=_ref3[1];return/*#__PURE__*/React.createElement("option",{key:format,value:format},label)})))),_this.state.selectedFormat==="application/pdf"?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("print.layout")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:_this.layoutChanged,value:_this.state.layout.name},_this.state.layouts.map(function(item){return/*#__PURE__*/React.createElement("option",{key:item.name,value:item.name},item.name.split("/").pop())})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.resolution")),/*#__PURE__*/React.createElement("td",null,resolutionChooser)),_this.state.selectedFormat==="application/pdf"?(((_this$state$layout2=_this.state.layout)===null||_this$state$layout2===void 0?void 0:_this$state$layout2.labels)||[]).map(function(label){var _this$props$theme$pri4;// Omit labels which start with __
+if(label.startsWith("__")){return null}var opts=_objectSpread({rows:1,name:label.toUpperCase()},(_this$props$theme$pri4=_this.props.theme.printLabelConfig)===null||_this$props$theme$pri4===void 0?void 0:_this$props$theme$pri4[label]);return _this.renderPrintLabelField(label,opts)}):null)),_this.state.selectedFormat==="application/pdf"?/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("input",{name:"TEMPLATE",type:"hidden",value:((_this$state$layout3=_this.state.layout)===null||_this$state$layout3===void 0?void 0:_this$state$layout3.name)||""}),/*#__PURE__*/React.createElement("input",{name:"csrf_token",type:"hidden",value:MiscUtils.getCsrfToken()}),/*#__PURE__*/React.createElement("input",{name:mapName+":extent",readOnly:true,type:"hidden",value:"0,0,0,0"}),/*#__PURE__*/React.createElement("input",{name:"SERVICE",readOnly:true,type:"hidden",value:"WMS"}),/*#__PURE__*/React.createElement("input",{name:"VERSION",readOnly:true,type:"hidden",value:_this.props.theme.version}),/*#__PURE__*/React.createElement("input",{name:"REQUEST",readOnly:true,type:"hidden",value:"GetPrint"}),/*#__PURE__*/React.createElement("input",{name:"TRANSPARENT",readOnly:true,type:"hidden",value:"true"}),/*#__PURE__*/React.createElement("input",{name:"SRS",readOnly:true,type:"hidden",value:_this.props.theme.mapCrs}),/*#__PURE__*/React.createElement("input",{name:"LAYERS",readOnly:true,type:"hidden",value:""}),/*#__PURE__*/React.createElement("input",{name:mapName+":LAYERS",readOnly:true,type:"hidden",value:""})):null,/*#__PURE__*/React.createElement("div",{className:"button-bar"},/*#__PURE__*/React.createElement("button",{className:"button",disabled:exportDisabled,type:"submit"},_this.state.exporting?/*#__PURE__*/React.createElement("span",{className:"mapexport-wait"},/*#__PURE__*/React.createElement(Spinner,null)," ",LocaleUtils.tr("mapexport.wait")):LocaleUtils.tr("mapexport.submit")))))});_defineProperty(_this,"renderExportFrame",function(){var boxStyle={left:_this.state.x+"px",top:_this.state.y+"px",width:_this.state.width+"px",height:_this.state.height+"px"};return/*#__PURE__*/React.createElement("div",{className:"mapexport3d-event-container",onPointerDown:_this.startSelection},/*#__PURE__*/React.createElement("div",{className:"mapexport3d-frame",style:boxStyle},/*#__PURE__*/React.createElement("span",{className:"mapexport3d-frame-label"},_this.state.width+" x "+_this.state.height)))});_defineProperty(_this,"startSelection",function(ev){if(ev.shiftKey){var target=ev.currentTarget;var view=ev.view;view.addEventListener("pointerup",function(){target.style.pointerEvents="";view.document.body.style.userSelect=""},{once:true});// Move behind
+target.style.pointerEvents="none";view.document.body.style.userSelect="none";_this.props.sceneContext.scene.domElement.dispatchEvent(new PointerEvent("pointerdown",ev));return}else if(ev.button===0){var rect=ev.currentTarget.getBoundingClientRect();_this.setState({x:Math.round(ev.clientX-rect.left),y:Math.round(ev.clientY-rect.top),width:0,height:0});var onMouseMove=function onMouseMove(event){_this.setState(function(state){var ratio=_this.state.frameRatio;var width=Math.round(Math.max(0,Math.round(event.clientX-rect.left)-state.x));var height=ratio?Math.round(width*ratio):Math.round(Math.max(0,Math.round(event.clientY-rect.top)-state.y));return{width:width,height:height}})};ev.view.addEventListener("pointermove",onMouseMove);ev.view.addEventListener("pointerup",function(){ev.view.removeEventListener("pointermove",onMouseMove)},{once:true})}});_defineProperty(_this,"takeScreenshot",function(scale,window){var renderer=_this.props.sceneContext.scene.renderer;var scene=_this.props.sceneContext.scene.scene;var camera=_this.props.sceneContext.scene.view.camera;var originalSize=renderer.getSize(new Vector2);var originalRenderTarget=renderer.getRenderTarget();var renderWidth=Math.round(originalSize.x*scale);var renderHeight=Math.round(originalSize.y*scale);var winX=Math.round(window.x*scale);var winY=Math.round(window.y*scale);var winWidth=Math.round(window.width*scale);var winHeight=Math.round(window.height*scale);// Render to high-resolution offscreen target
+var renderTarget=new WebGLRenderTarget(renderWidth,renderHeight,{colorSpace:SRGBColorSpace});renderer.setSize(renderWidth,renderHeight);renderer.setPixelRatio(1);// important! avoid devicePixelRatio scaling
+renderer.setRenderTarget(renderTarget);renderer.render(scene,camera);renderer.setRenderTarget(null);// Read the pixels from the render target and write to offscreen canvas
+var readBuffer=new Uint8Array(renderWidth*renderHeight*4);renderer.readRenderTargetPixels(renderTarget,0,0,renderWidth,renderHeight,readBuffer);var canvas=document.createElement("canvas");canvas.width=winWidth;canvas.height=winHeight;var context=canvas.getContext("2d");var imageData=context.createImageData(winWidth,winHeight);for(var y=0;y<winHeight;y++){var srcRow=(winX+(renderHeight-1-winY-y)*renderWidth)*4;var destRow=y*winWidth*4;imageData.data.set(readBuffer.subarray(srcRow,srcRow+winWidth*4),destRow)}context.putImageData(imageData,0,0);// Restore original renderer target
+renderer.setSize(originalSize.x,originalSize.y);renderer.setPixelRatio(window.devicePixelRatio);renderer.setRenderTarget(originalRenderTarget);renderer.render(scene,camera);return{canvas:canvas,imageData:imageData}});_defineProperty(_this,"export",function(ev){ev.preventDefault();if(_this.state.width<=0||_this.state.height<=0){return}var form=ev.target;var exportScale=_this.state.exportScaleFactor/100;if(_this.state.selectedFormat==="application/pdf"){var mapWidthMM=_this.state.layout.map.width;var exportWidthPx=_this.state.width;exportScale=Math.min(5,_this.state.exportDpi/(exportWidthPx*25.4/mapWidthMM))}_this.setState({exporting:true});var _this$takeScreenshot=_this.takeScreenshot(exportScale,_this.state),canvas=_this$takeScreenshot.canvas,context=_this$takeScreenshot.context;if(_this.state.selectedFormat==="application/pdf"){canvas.toBlob(function(blob){blob.arrayBuffer().then(function(imgBuffer){return _this.exportToPdf(form,imgBuffer)})},"image/png")}else if(_this.state.selectedFormat==="image/tiff"){var imageData=context.getImageData(0,0,canvas.width,canvas.height);var blob=new Blob([utif.encodeImage(imageData.data,canvas.width,canvas.height)],{type:"image/tiff"});FileSaver.saveAs(blob,"export."+_this.state.selectedFormat.replace(/.*\//,""));_this.setState({exporting:false})}else{canvas.toBlob(function(blob){FileSaver.saveAs(blob,"export."+_this.state.selectedFormat.replace(/.*\//,""));_this.setState({exporting:false})},_this.state.selectedFormat)}});_defineProperty(_this,"renderPrintLabelField",function(label,opts){var defaultValue=opts.defaultValue||"";var autopopulated=false;if(label===_this.props.theme.printLabelForSearchResult){defaultValue=_this.getSearchMarkerLabel();autopopulated=true}else if(label===_this.props.theme.printLabelForAttribution){defaultValue=_this.getAttributionLabel();autopopulated=true}if(autopopulated&&_this.props.hideAutopopulatedFields){return/*#__PURE__*/React.createElement("tr",{key:"label."+label},/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("input",{defaultValue:defaultValue,name:opts.name,type:"hidden"})))}else{if(opts.options){return/*#__PURE__*/React.createElement("tr",{key:"label."+label},/*#__PURE__*/React.createElement("td",null,MiscUtils.capitalizeFirst(label)),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{defaultValue:defaultValue,name:opts.name},opts.options.map(function(value){return/*#__PURE__*/React.createElement("option",{key:value,value:value},value)}))))}else{var style={};if(opts.rows||opts.cols){style.resize="none"}if(opts.cols){style.width="initial"}return/*#__PURE__*/React.createElement("tr",{key:"label."+label},/*#__PURE__*/React.createElement("td",null,MiscUtils.capitalizeFirst(label)),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("textarea",_extends({},opts,{defaultValue:defaultValue,readOnly:autopopulated,style:style}))))}}});_defineProperty(_this,"getSearchMarkerLabel",function(){// TODO
 return""});_defineProperty(_this,"getAttributionLabel",function(){// TODO
-return""});return _this}_inherits(MapExport3D,_React$Component);return _createClass(MapExport3D,[{key:"render",value:function render(){var _this2=this;var minMaxTooltip=this.state.minimized?LocaleUtils.tr("print.maximize"):LocaleUtils.tr("print.minimize");var minMaxIcon=this.state.minimized?"chevron-down":"chevron-up";var extraTitlebarContent=/*#__PURE__*/React.createElement(Icon,{className:"mapexport-minimize-maximize",icon:minMaxIcon,onClick:function onClick(){return _this2.setState(function(state){return{minimized:!state.minimized}})},title:minMaxTooltip});return/*#__PURE__*/React.createElement(SideBar,{extraClasses:"MapExport",extraTitlebarContent:extraTitlebarContent,icon:"rasterexport",id:"MapExport3D",onShow:this.onShow,title:LocaleUtils.tr("appmenu.items.MapExport3D"),width:"20em"},function(){return{body:_this2.renderBody(),extra:_this2.renderExportFrame()}})}},{key:"exportToPdf",value:function(){var _exportToPdf=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(form,imgBuffer){var formData,data,config,response,_yield$import,PDFDocument,doc,page,pngImage,x,y,width,height,pdfData,blob;return _regeneratorRuntime().wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:formData=_objectSpread(_objectSpread({},formDataEntries(new FormData(form))),Object.fromEntries((this.props.theme.extraPrintParameters||"").split("&").filter(Boolean).map(function(entry){return entry.split("=")})));data=Object.entries(formData).map(function(pair){return pair.map(function(entry){return encodeURIComponent(entry).replace(/%20/g,"+")}).join("=")}).join("&");config={headers:{"Content-Type":"application/x-www-form-urlencoded"},responseType:"arraybuffer"};_context.next=5;return axios.post(this.props.theme.printUrl,data,config);case 5:response=_context.sent;if(!response){_context.next=31;break}_context.next=9;return import("pdf-lib");case 9:_yield$import=_context.sent;PDFDocument=_yield$import.PDFDocument;_context.next=13;return PDFDocument.load(response.data);case 13:doc=_context.sent;page=doc.getPages()[0];_context.next=17;return doc.embedPng(imgBuffer);case 17:pngImage=_context.sent;x=this.state.layout.map.x*2.8346;y=this.state.layout.map.y*2.8346;width=this.state.layout.map.width*2.8346;height=this.state.layout.map.height*2.8346;page.drawImage(pngImage,{x:x,y:y,width:width,height:height});_context.next=25;return doc.save();case 25:pdfData=_context.sent;blob=new Blob([pdfData],{type:"application/pdf"});FileSaver.saveAs(blob,this.state.layout.name+".pdf");this.setState({exporting:false});_context.next=33;break;case 31:/* eslint-disable-next-line */alert("Print failed");this.setState({exporting:false});case 33:case"end":return _context.stop()}},_callee,this)}));function exportToPdf(_x,_x2){return _exportToPdf.apply(this,arguments)}return exportToPdf}()}])}(React.Component);_defineProperty(MapExport3D,"propTypes",{hideAutopopulatedFields:PropTypes.bool,sceneContext:PropTypes.object,setCurrentTask:PropTypes.func,theme:PropTypes.object});export default connect(function(state){return{theme:state.theme.current}},{setCurrentTask:setCurrentTask})(MapExport3D);
+return""});return _this}_inherits(MapExport3D,_React$Component);return _createClass(MapExport3D,[{key:"render",value:function render(){var _this2=this;var minMaxTooltip=this.state.minimized?LocaleUtils.tr("print.maximize"):LocaleUtils.tr("print.minimize");var minMaxIcon=this.state.minimized?"chevron-down":"chevron-up";var extraTitlebarContent=/*#__PURE__*/React.createElement(Icon,{className:"mapexport-minimize-maximize",icon:minMaxIcon,onClick:function onClick(){return _this2.setState(function(state){return{minimized:!state.minimized}})},title:minMaxTooltip});return/*#__PURE__*/React.createElement(SideBar,{extraClasses:"MapExport",extraTitlebarContent:extraTitlebarContent,icon:"rasterexport",id:"MapExport3D",onShow:this.onShow,title:LocaleUtils.tr("appmenu.items.MapExport3D"),width:"20em"},function(){return{body:_this2.renderBody(),extra:_this2.renderExportFrame()}})}},{key:"exportToPdf",value:function(){var _exportToPdf=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(form,imgBuffer){var formData,data,config,response,_yield$import,PDFDocument,doc,page,pngImage,x,y,width,height,pdfData,blob;return _regeneratorRuntime().wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:formData=_objectSpread(_objectSpread({},formDataEntries(new FormData(form))),Object.fromEntries((this.props.theme.extraPrintParameters||"").split("&").filter(Boolean).map(function(entry){return entry.split("=")})));data=Object.entries(formData).map(function(pair){return pair.map(function(entry){return encodeURIComponent(entry).replace(/%20/g,"+")}).join("=")}).join("&");config={headers:{"Content-Type":"application/x-www-form-urlencoded"},responseType:"arraybuffer"};_context.next=5;return axios.post(this.props.theme.printUrl,data,config);case 5:response=_context.sent;if(!response){_context.next=31;break}_context.next=9;return import("pdf-lib");case 9:_yield$import=_context.sent;PDFDocument=_yield$import.PDFDocument;_context.next=13;return PDFDocument.load(response.data);case 13:doc=_context.sent;page=doc.getPages()[0];_context.next=17;return doc.embedPng(imgBuffer);case 17:pngImage=_context.sent;x=this.state.layout.map.x*2.8346;y=this.state.layout.map.y*2.8346;width=this.state.layout.map.width*2.8346;height=this.state.layout.map.height*2.8346;page.drawImage(pngImage,{x:x,y:y,width:width,height:height});_context.next=25;return doc.save();case 25:pdfData=_context.sent;blob=new Blob([pdfData],{type:"application/pdf"});FileSaver.saveAs(blob,this.state.layout.name+".pdf");this.setState({exporting:false});_context.next=33;break;case 31:/* eslint-disable-next-line */alert("Print failed");this.setState({exporting:false});case 33:case"end":return _context.stop()}},_callee,this)}));function exportToPdf(_x,_x2){return _exportToPdf.apply(this,arguments)}return exportToPdf}()}])}(React.Component);_defineProperty(MapExport3D,"propTypes",{hideAutopopulatedFields:PropTypes.bool,sceneContext:PropTypes.object,setCurrentTask:PropTypes.func,theme:PropTypes.object});_defineProperty(MapExport3D,"defaultState",{minimized:false,layouts:[],selectedFormat:"image/jpeg",layout:"",x:0,y:0,width:0,height:0,frameRatio:null,exporting:false,exportScaleFactor:100,exportDpi:300});export default connect(function(state){return{theme:state.theme.current}},{setCurrentTask:setCurrentTask})(MapExport3D);