qwc2 2025.8.7 → 2025.8.20

package/components/map/OlMap.js

@@ -5,7 +5,7 @@ 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 ol from"openlayers";import PropTypes from"prop-types";import{changeMapView,clickOnMap}from"../../actions/map";import{setCurrentTask}from"../../actions/task";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import MapUtils from"../../utils/MapUtils";ol.Map.prototype.setRequestsPaused=function(paused){this.requestsPaused_=paused;this.tileQueue_.setRequestsPaused(paused);this.getView().setRequestsPaused(paused);if(!paused){this.render()}};var OlMap=/*#__PURE__*/function(_React$Component){function OlMap(props){var _this;_classCallCheck(this,OlMap);_this=_callSuper(this,OlMap,[props]);_defineProperty(_this,"state",{mapOptions:{},projection:null,resolutions:[],rebuildView:false});_defineProperty(_this,"recreateKeyboardInteractions",function(){_this.keyboardPanInteractions.forEach(function(interaction){_this.map.removeInteraction(interaction)});_this.keyboardPanInteractions=[new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panStepSize*document.body.offsetWidth,condition:_this.panHStepCondition}),new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panStepSize*document.body.offsetHeight,condition:_this.panVStepCondition}),new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panPageSize*document.body.offsetWidth,condition:_this.panHPageCondition}),new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panPageSize*document.body.offsetHeight,condition:_this.panVPageCondition})];_this.keyboardPanInteractions.forEach(function(interaction){_this.map.addInteraction(interaction)})});_defineProperty(_this,"unblockRequests",function(){if(_this.moving){if(_this.unpauseTimeout){clearTimeout(_this.unpauseTimeout)}_this.unpauseTimeout=setTimeout(function(){_this.updateMapInfoState();_this.map.setRequestsPaused(false);_this.unpauseTimeout=null;_this.moving=false},500)}});_defineProperty(_this,"panHStepCondition",function(ev){var horiz=ev.originalEvent.key==="ArrowLeft"||ev.originalEvent.key==="ArrowRight";return horiz&&ol.events.condition.noModifierKeys(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"panVStepCondition",function(ev){var vert=ev.originalEvent.key==="ArrowUp"||ev.originalEvent.key==="ArrowDown";return vert&&ol.events.condition.noModifierKeys(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"panHPageCondition",function(ev){var horiz=ev.originalEvent.key==="ArrowLeft"||ev.originalEvent.key==="ArrowRight";return horiz&&ol.events.condition.shiftKeyOnly(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"panVPageCondition",function(ev){var vert=ev.originalEvent.key==="ArrowUp"||ev.originalEvent.key==="ArrowDown";return vert&&ol.events.condition.shiftKeyOnly(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"onClick",function(button,event,pixel){if(_this.ignoreNextClick){_this.ignoreNextClick=false;return}if(button===2){event.preventDefault()}if(_this.props.unsetTaskOnMapClick){_this.props.setCurrentTask(null);return}var features=[];var format=new ol.format.GeoJSON;_this.map.forEachFeatureAtPixel(pixel,function(feature,layer){// Picked vector tile features cause an exception when passed to format.writeFeatureObject
-try{var featureObj=format.writeFeatureObject(feature);featureObj.layerId=layer?layer.get("id"):null;features.push(featureObj)}catch(e){/* pass */}},{hitTolerance:5});var evpixel=_this.map.getEventPixel(event);var data={ts:+new Date,coordinate:_this.map.getEventCoordinate(event),pixel:[evpixel[0],evpixel[1]-_this.props.topbarHeight],features:features,modifiers:{alt:event.altKey,ctrl:event.ctrlKey,shift:event.shiftKey},button:button};_this.props.onClick(data)});_defineProperty(_this,"updateMapInfoState",function(){var view=_this.map.getView();var c=view.getCenter()||[0,0];var bbox={bounds:view.calculateExtent(_this.map.getSize()),rotation:view.getRotation()};var size={width:_this.map.getSize()[0],height:_this.map.getSize()[1]};_this.props.onMapViewChanges(c,view.getZoom()||0,bbox,size,_this.props.id,_this.props.projection)});_defineProperty(_this,"createView",function(center,zoom,projection,resolutions,enableRotation,rotation){var extent=_this.props.mapOptions.constrainExtent&&_this.props.fullExtent?CoordinatesUtils.reprojectBbox(_this.props.fullExtent.bounds,_this.props.fullExtent.crs,projection):undefined;var viewOptions={projection:projection,center:center,zoom:zoom,constrainResolution:ConfigUtils.getConfigProp("allowFractionalZoom")===true?false:true,resolutions:resolutions,constrainRotation:false,enableRotation:enableRotation!==false,rotation:MapUtils.degreesToRadians(rotation)||0,extent:extent};return new ol.View(viewOptions)});_defineProperty(_this,"registerHooks",function(){MapUtils.registerHook(MapUtils.GET_MAP,_this.map);MapUtils.registerHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK,function(pos){var compensateTopbarHeight=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;var pixel=_this.map.getPixelFromCoordinate(pos);return[pixel[0],pixel[1]-(compensateTopbarHeight?_this.props.topbarHeight:0)]});MapUtils.registerHook(MapUtils.GET_COORDINATES_FROM_PIXEL_HOOK,function(pixel){return _this.map.getCoordinateFromPixel([pixel[0],pixel[1]+_this.props.topbarHeight])});MapUtils.registerHook(MapUtils.GET_SNAPPED_COORDINATES_FROM_PIXEL_HOOK,function(pixel){return _this.map.getCoordinateFromPixel(pixel)});MapUtils.registerHook(MapUtils.GET_NATIVE_LAYER,function(id){return _this.map.getLayers().getArray().find(function(layer){return layer.get("id")===id})});MapUtils.registerHook(MapUtils.ADD_POINTER_MOVE_LISTENER,function(callback){_this.callbackMap[callback]=function(event){var pixel=_toConsumableArray(event.pixel);callback({coordinate:event.coordinate,pixel:[pixel[0],pixel[1]-_this.props.topbarHeight]})};_this.map.on("pointermove",_this.callbackMap[callback])});MapUtils.registerHook(MapUtils.REMOVE_POINTER_MOVE_LISTENER,function(callback){_this.map.un("pointermove",_this.callbackMap[callback]);delete _this.callbackMap[callback]})});_this.ignoreNextClick=false;_this.callbackMap={};_this.state.mapOptions=_objectSpread(_objectSpread({},OlMap.defaultProps.mapOptions),props.mapOptions);var interactions=ol.interaction.defaults({// don't create these default interactions, but create them below with custom params
+ */import React from"react";import{connect}from"react-redux";import ol from"openlayers";import PropTypes from"prop-types";import{changeMapView,clickOnMap}from"../../actions/map";import{setCurrentTask}from"../../actions/task";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import MapUtils from"../../utils/MapUtils";ol.Map.prototype.setRequestsPaused=function(paused){this.requestsPaused_=paused;this.tileQueue_.setRequestsPaused(paused);this.getView().setRequestsPaused(paused);if(!paused){this.render()}};var OlMap=/*#__PURE__*/function(_React$Component){function OlMap(props){var _this;_classCallCheck(this,OlMap);_this=_callSuper(this,OlMap,[props]);_defineProperty(_this,"state",{mapOptions:{},projection:null,resolutions:[],rebuildView:false});_defineProperty(_this,"recreateKeyboardInteractions",function(){_this.keyboardPanInteractions.forEach(function(interaction){_this.map.removeInteraction(interaction)});_this.keyboardPanInteractions=[new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panStepSize*document.body.offsetWidth,condition:_this.panHStepCondition}),new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panStepSize*document.body.offsetHeight,condition:_this.panVStepCondition}),new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panPageSize*document.body.offsetWidth,condition:_this.panHPageCondition}),new ol.interaction.KeyboardPan({pixelDelta:_this.state.mapOptions.panPageSize*document.body.offsetHeight,condition:_this.panVPageCondition})];_this.keyboardPanInteractions.forEach(function(interaction){_this.map.addInteraction(interaction)})});_defineProperty(_this,"unblockRequests",function(){if(_this.moving){if(_this.unpauseTimeout){clearTimeout(_this.unpauseTimeout)}_this.unpauseTimeout=setTimeout(function(){_this.updateMapInfoState();_this.map.setRequestsPaused(false);_this.unpauseTimeout=null;_this.moving=false},500)}});_defineProperty(_this,"panHStepCondition",function(ev){var horiz=ev.originalEvent.key==="ArrowLeft"||ev.originalEvent.key==="ArrowRight";return horiz&&ol.events.condition.noModifierKeys(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"panVStepCondition",function(ev){var vert=ev.originalEvent.key==="ArrowUp"||ev.originalEvent.key==="ArrowDown";return vert&&ol.events.condition.noModifierKeys(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"panHPageCondition",function(ev){var horiz=ev.originalEvent.key==="ArrowLeft"||ev.originalEvent.key==="ArrowRight";return horiz&&ol.events.condition.shiftKeyOnly(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"panVPageCondition",function(ev){var vert=ev.originalEvent.key==="ArrowUp"||ev.originalEvent.key==="ArrowDown";return vert&&ol.events.condition.shiftKeyOnly(ev)&&ol.events.condition.targetNotEditable(ev)});_defineProperty(_this,"onClick",function(button,event,pixel){if(_this.ignoreNextClick){_this.ignoreNextClick=false;return}if(button===2){event.preventDefault()}if(_this.props.unsetTaskOnMapClick){_this.props.setCurrentTask(null);return}var features=[];var format=new ol.format.GeoJSON;var suppressClick=false;_this.map.forEachFeatureAtPixel(pixel,function(feature,layer){if(suppressClick){return}else if(feature.get("__suppress_map_click")){suppressClick=true;return}// Picked vector tile features cause an exception when passed to format.writeFeatureObject
+try{var featureObj=format.writeFeatureObject(feature);featureObj.layerId=layer?layer.get("id"):null;features.push(featureObj)}catch(e){/* pass */}},{hitTolerance:5});if(suppressClick){return}var evpixel=_this.map.getEventPixel(event);var data={ts:+new Date,coordinate:_this.map.getEventCoordinate(event),pixel:[evpixel[0],evpixel[1]-_this.props.topbarHeight],features:features,modifiers:{alt:event.altKey,ctrl:event.ctrlKey,shift:event.shiftKey},button:button};_this.props.onClick(data)});_defineProperty(_this,"updateMapInfoState",function(){var view=_this.map.getView();var c=view.getCenter()||[0,0];var bbox={bounds:view.calculateExtent(_this.map.getSize()),rotation:view.getRotation()};var size={width:_this.map.getSize()[0],height:_this.map.getSize()[1]};_this.props.onMapViewChanges(c,view.getZoom()||0,bbox,size,_this.props.id,_this.props.projection)});_defineProperty(_this,"createView",function(center,zoom,projection,resolutions,enableRotation,rotation){var extent=_this.props.mapOptions.constrainExtent&&_this.props.fullExtent?CoordinatesUtils.reprojectBbox(_this.props.fullExtent.bounds,_this.props.fullExtent.crs,projection):undefined;var viewOptions={projection:projection,center:center,zoom:zoom,constrainResolution:ConfigUtils.getConfigProp("allowFractionalZoom")===true?false:true,resolutions:resolutions,constrainRotation:false,enableRotation:enableRotation!==false,rotation:MapUtils.degreesToRadians(rotation)||0,extent:extent};return new ol.View(viewOptions)});_defineProperty(_this,"registerHooks",function(){MapUtils.registerHook(MapUtils.GET_MAP,_this.map);MapUtils.registerHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK,function(pos){var compensateTopbarHeight=arguments.length>1&&arguments[1]!==undefined?arguments[1]:true;var pixel=_this.map.getPixelFromCoordinate(pos);return[pixel[0],pixel[1]-(compensateTopbarHeight?_this.props.topbarHeight:0)]});MapUtils.registerHook(MapUtils.GET_COORDINATES_FROM_PIXEL_HOOK,function(pixel){return _this.map.getCoordinateFromPixel([pixel[0],pixel[1]+_this.props.topbarHeight])});MapUtils.registerHook(MapUtils.GET_SNAPPED_COORDINATES_FROM_PIXEL_HOOK,function(pixel){return _this.map.getCoordinateFromPixel(pixel)});MapUtils.registerHook(MapUtils.GET_NATIVE_LAYER,function(id){return _this.map.getLayers().getArray().find(function(layer){return layer.get("id")===id})});MapUtils.registerHook(MapUtils.ADD_POINTER_MOVE_LISTENER,function(callback){_this.callbackMap[callback]=function(event){var pixel=_toConsumableArray(event.pixel);callback({coordinate:event.coordinate,pixel:[pixel[0],pixel[1]-_this.props.topbarHeight]})};_this.map.on("pointermove",_this.callbackMap[callback])});MapUtils.registerHook(MapUtils.REMOVE_POINTER_MOVE_LISTENER,function(callback){_this.map.un("pointermove",_this.callbackMap[callback]);delete _this.callbackMap[callback]})});_this.ignoreNextClick=false;_this.callbackMap={};_this.state.mapOptions=_objectSpread(_objectSpread({},OlMap.defaultProps.mapOptions),props.mapOptions);var interactions=ol.interaction.defaults({// don't create these default interactions, but create them below with custom params
 dragPan:false,mouseWheelZoom:false,keyboard:false});_this.keyboardPanInteractions=[];var kinetic=null;if(_this.state.mapOptions.kineticPanParams){kinetic=new ol.Kinetic(_this.state.mapOptions.kineticPanParams.decay,_this.state.mapOptions.kineticPanParams.minVelocity,_this.state.mapOptions.kineticPanParams.delay)}interactions.extend([new ol.interaction.DragPan({kinetic:kinetic,condition:function condition(ev){var oev=ev.originalEvent;return!oev.altKey&&!(oev.metaKey||oev.ctrlKey)&&!oev.shiftKey&&oev.isPrimary!==false&&(oev.button===0||oev.button===1)}}),new ol.interaction.MouseWheelZoom({duration:_this.state.mapOptions.zoomDuration||250,constrainResolution:ConfigUtils.getConfigProp("allowFractionalZoom")===true?false:true}),new ol.interaction.KeyboardZoom]);var controls=ol.control.defaults({zoom:false,attribution:false,rotateOptions:{tipLabel:LocaleUtils.tr("map.resetrotation")}});var map=new ol.Map({layers:[],controls:controls,interactions:interactions,view:_this.createView(props.center,props.zoom,props.projection,props.resolutions,_this.state.mapOptions.enableRotation,_this.state.mapOptions.rotation)});_this.unpauseTimeout=null;_this.moving=false;map.on("movestart",function(){_this.moving=true;_this.map.setRequestsPaused(true)});map.on("moveend",function(){_this.unblockRequests()});map.on("singleclick",function(event){return _this.onClick(0,event.originalEvent,event.pixel)});map.getViewport().addEventListener("contextmenu",function(event){return _this.onClick(2,event,_this.map.getEventPixel(event))});map.set("id",props.id);map.setIgnoreNextClick=function(ignore){_this.ignoreNextClick=ignore};_this.map=map;_this.registerHooks();_this.recreateKeyboardInteractions();window.addEventListener("resize",_this.recreateKeyboardInteractions);return _this}_inherits(OlMap,_React$Component);return _createClass(OlMap,[{key:"componentDidMount",value:function componentDidMount(){this.map.setTarget(this.props.id);this.updateMapInfoState()}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.recreateKeyboardInteractions)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.id!==this.props.mapStateSource){var view=this.map.getView();if(prevProps.center!==this.props.center){view.setCenter(this.props.center)}if(prevProps.zoom!==this.props.zoom){view.setZoom(this.props.zoom)}if(prevProps.bbox.rotation!==this.props.bbox.rotation){view.setRotation(this.props.bbox.rotation)}}if(this.state.rebuildView){this.setState({rebuildView:false})}}},{key:"render",value:function render(){var _this2=this;if(this.state.rebuildView){var overviewMap=this.map.getControls().getArray().find(function(control){return control instanceof ol.control.OverviewMap});var view=this.createView(this.props.center,this.props.zoom,this.props.projection,this.props.resolutions,this.state.mapOptions.enableRotation,this.state.mapOptions.rotation);if(overviewMap){overviewMap.getOverviewMap().setView(view)}this.map.setView(view);// We have to force ol to drop tile and reload
 this.map.getLayers().forEach(function(l){if(l instanceof ol.layer.Group){l.getLayers().forEach(function(sublayer){var source=sublayer.getSource();if(source.getTileLoadFunction){source.setTileLoadFunction(source.getTileLoadFunction())}})}else{var source=l.getSource();if(source.getTileLoadFunction){source.setTileLoadFunction(source.getTileLoadFunction())}}});view.setZoom(this.props.zoom);view.setCenter(this.props.center);this.map.render()}var children=React.Children.map(this.props.children,function(child){return child?/*#__PURE__*/React.cloneElement(child,{map:_this2.map,projection:_this2.props.projection}):null});return children}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(nextProps.projection!==state.projection||nextProps.resolutions!==state.resolutions){return{rebuildView:true,projection:nextProps.projection,resolutions:nextProps.resolutions}}return null}}])}(React.Component);_defineProperty(OlMap,"propTypes",{bbox:PropTypes.object,center:PropTypes.array,children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),fullExtent:PropTypes.object,id:PropTypes.string,mapOptions:PropTypes.object,mapStateSource:PropTypes.string,onClick:PropTypes.func,onMapViewChanges:PropTypes.func,onMouseMove:PropTypes.func,panPageSize:PropTypes.number,panStepSize:PropTypes.number,projection:PropTypes.string,resolutions:PropTypes.array,setCurrentTask:PropTypes.func,topbarHeight:PropTypes.number,unsetTaskOnMapClick:PropTypes.bool,zoom:PropTypes.number.isRequired});_defineProperty(OlMap,"defaultProps",{id:"map",mapOptions:{panPageSize:1,panStepSize:0.25}});export default connect(function(state){return{unsetTaskOnMapClick:state.task.unsetOnMapClick,topbarHeight:state.windows.topbarHeight}},{onMapViewChanges:changeMapView,onClick:clickOnMap,setCurrentTask:setCurrentTask})(OlMap);

package/components/map3d/ImportObjects3D.js

@@ -4,4 +4,4 @@ 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 PropTypes from"prop-types";import{v1 as uuidv1}from"uuid";import{processStarted,processFinished}from"../../actions/processNotifications";import ConfigUtils from"../../utils/ConfigUtils";import LocaleUtils from"../../utils/LocaleUtils";import FileSelector from"../widgets/FileSelector";import Spinner from"../widgets/Spinner";import{importGltf}from"./utils/MiscUtils3D";import"./style/ImportObjects3D.css";var ImportObjects3D=/*#__PURE__*/function(_React$Component){function ImportObjects3D(){var _this;_classCallCheck(this,ImportObjects3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,ImportObjects3D,[].concat(args));_defineProperty(_this,"state",{importing:false,selectedfile:null});_defineProperty(_this,"importFile",function(){if(!_this.state.selectedfile){return}var file=_this.state.selectedfile;var taskid=uuidv1();_this.setState({importing:true});_this.props.processStarted(taskid,LocaleUtils.tr("import3d.importing",file.name));if(file.name.endsWith(".gltf")){_this.importGltf(file,taskid)}else{_this.importTo3DTiles(file,taskid)}});_defineProperty(_this,"importGltf",function(file,taskid){var reader=new FileReader;reader.onload=function(ev){importGltf(ev.target.result,file.name,_this.props.sceneContext,{drawGroup:true,imported:true});_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,true)};reader.onerror=function(){_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,false)};reader.readAsArrayBuffer(_this.state.selectedfile)});_defineProperty(_this,"importTo3DTiles",function(file,taskid){var target=_this.props.sceneContext.scene.view.controls.target;var height=_this.props.sceneContext.getTerrainHeightFromMap([target.x,target.y]);var formData=new FormData;var jsonBlob=new Blob([JSON.stringify({inputs:[String(target.x),String(target.y),String(height),_this.props.sceneContext.mapCrs]})],{type:"application/json"});formData.set("json",jsonBlob);formData.set("file",file);var headers={"Content-Type":"multipart/form-data"};var ogcProcessesUrl=ConfigUtils.getConfigProp("ogcProcessesUrl");if(!ogcProcessesUrl){_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,false,LocaleUtils.tr("import3d.noprocessesserver"));return}axios.post(ogcProcessesUrl.replace(/\/$/,"")+"/modelimport/execution_multipart",formData,{headers:headers}).then(function(response){var tilesetUrl=_this.props.sceneContext.options.importedTilesBaseUrl+response.data.result.value;_this.props.sceneContext.add3dTiles(tilesetUrl,taskid,{title:file.name},true);_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,true)})["catch"](function(err){_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,false)})});return _this}_inherits(ImportObjects3D,_React$Component);return _createClass(ImportObjects3D,[{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement("div",{className:"importobjects3d-widget"},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(FileSelector,{accept:".gltf,.ifc,.gml,.citygml,.cityjson,.gpkg",file:this.state.selectedfile,onFileSelected:function onFileSelected(file){return _this2.setState({selectedfile:file})},title:LocaleUtils.tr("layertree3d.supportedformats")})),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("button",{className:"button",disabled:this.state.selectedfile===null||this.state.importing,onClick:this.importFile,type:"button"},this.state.importing?/*#__PURE__*/React.createElement(Spinner,null):null,LocaleUtils.tr("layertree3d.import"))))}}])}(React.Component);_defineProperty(ImportObjects3D,"propTypes",{processFinished:PropTypes.func,processStarted:PropTypes.func,sceneContext:PropTypes.object});export default connect(function(state){return{}},{processFinished:processFinished,processStarted:processStarted})(ImportObjects3D);
+ */import React from"react";import{connect}from"react-redux";import axios from"axios";import PropTypes from"prop-types";import{v1 as uuidv1}from"uuid";import{processStarted,processFinished}from"../../actions/processNotifications";import ConfigUtils from"../../utils/ConfigUtils";import LocaleUtils from"../../utils/LocaleUtils";import FileSelector from"../widgets/FileSelector";import Spinner from"../widgets/Spinner";import{importGltf}from"./utils/MiscUtils3D";import"./style/ImportObjects3D.css";var ImportObjects3D=/*#__PURE__*/function(_React$Component){function ImportObjects3D(){var _this;_classCallCheck(this,ImportObjects3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,ImportObjects3D,[].concat(args));_defineProperty(_this,"state",{importing:false,selectedfile:null});_defineProperty(_this,"importFile",function(){if(!_this.state.selectedfile){return}var file=_this.state.selectedfile;var taskid=uuidv1();_this.setState({importing:true});_this.props.processStarted(taskid,LocaleUtils.tr("import3d.importing",file.name));if(file.name.endsWith(".gltf")){_this.importGltf(file,taskid)}else{_this.importTo3DTiles(file,taskid)}});_defineProperty(_this,"importGltf",function(file,taskid){var reader=new FileReader;reader.onload=function(ev){importGltf(ev.target.result,file.name,_this.props.sceneContext,{drawGroup:true,imported:true});_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,true)};reader.onerror=function(){_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,false)};reader.readAsArrayBuffer(_this.state.selectedfile)});_defineProperty(_this,"importTo3DTiles",function(file,taskid){var target=_this.props.sceneContext.scene.view.controls.target;var height=_this.props.sceneContext.getTerrainHeightFromMap([target.x,target.y]);var formData=new FormData;var jsonBlob=new Blob([JSON.stringify({inputs:[String(target.x),String(target.y),String(height),_this.props.sceneContext.mapCrs]})],{type:"application/json"});formData.set("json",jsonBlob);formData.set("file",file);var headers={"Content-Type":"multipart/form-data"};var ogcProcessesUrl=ConfigUtils.getConfigProp("ogcProcessesUrl");if(!ogcProcessesUrl){_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,false,LocaleUtils.tr("import3d.noprocessesserver"));return}axios.post(ogcProcessesUrl.replace(/\/$/,"")+"/modelimport/execution_multipart",formData,{headers:headers}).then(function(response){var tilesetUrl=_this.props.importedTilesBaseUrl+response.data.result.value;_this.props.sceneContext.add3dTiles(tilesetUrl,taskid,{title:file.name},true);_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,true)})["catch"](function(err){_this.setState({selectedfile:null,importing:false});_this.props.processFinished(taskid,false)})});return _this}_inherits(ImportObjects3D,_React$Component);return _createClass(ImportObjects3D,[{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement("div",{className:"importobjects3d-widget"},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(FileSelector,{accept:".gltf,.ifc,.gml,.citygml,.cityjson,.gpkg",file:this.state.selectedfile,onFileSelected:function onFileSelected(file){return _this2.setState({selectedfile:file})},title:LocaleUtils.tr("layertree3d.supportedformats")})),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("button",{className:"button",disabled:this.state.selectedfile===null||this.state.importing,onClick:this.importFile,type:"button"},this.state.importing?/*#__PURE__*/React.createElement(Spinner,null):null,LocaleUtils.tr("layertree3d.import"))))}}])}(React.Component);_defineProperty(ImportObjects3D,"propTypes",{importedTilesBaseUrl:PropTypes.string,processFinished:PropTypes.func,processStarted:PropTypes.func,sceneContext:PropTypes.object});export default connect(function(state){return{}},{processFinished:processFinished,processStarted:processStarted})(ImportObjects3D);

package/components/map3d/Map3D.js

@@ -1,16 +1,16 @@
-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)}/**
+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 _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}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 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,Box3,Vector3,Matrix4}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 EditDataset3D from"./EditDataset3D";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 Settings3D from"./Settings3D";import TopBar3D from"./TopBar3D";import View3DSwitcher from"./View3DSwitcher";import LayerRegistry from"./layers/index";import{importGltf,updateObjectLabel}from"./utils/MiscUtils3D";import Tiles3DStyle from"./utils/Tiles3DStyle";import"./style/Map3D.css";// Ensures unUnload is called *after* all other children have unmounted
-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){},zoomToObject:function zoomToObject(objectId){},getMap:function getMap(){},setViewToExtent:function setViewToExtent(bounds,angle){},getTerrainHeightFromDTM:function getTerrainHeightFromDTM(scenePos){},getTerrainHeightFromMap:function getTerrainHeightFromMap(scenePos){},getSceneIntersection:function getSceneIntersection(x,y,objects){},getSetting:function getSetting(key){},setSetting:function setSetting(key,value){}}),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){var _this2$state$sceneCon;var currentBaseLayer=((_this2$state$sceneCon=_this2.state.sceneContext.baseLayers.find(function(l){return l.visibility===true}))===null||_this2$state$sceneCon===void 0?void 0:_this2$state$sceneCon.name)||"";if(visibility&&(layer===null||layer===void 0?void 0:layer.name)===currentBaseLayer){// Nothing changed
-return}_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
+ */import React,{Suspense}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,Box3,Vector3,Matrix4}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 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 ServiceLayerUtils from"../../utils/ServiceLayerUtils";import ThemeUtils from"../../utils/ThemeUtils";import{MapContainerPortalContext}from"../PluginsContainer";import EditDataset3D from"./EditDataset3D";import MapControls3D from"./MapControls3D";import View3DSwitcher from"./View3DSwitcher";import LayerRegistry from"./layers/index";import{importGltf,updateObjectLabel}from"./utils/MiscUtils3D";import Tiles3DStyle from"./utils/Tiles3DStyle";import"./style/Map3D.css";// Ensures unUnload is called *after* all other children have unmounted
+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){},setBaseLayer:function setBaseLayer(layer,visibility){},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){},zoomToObject:function zoomToObject(objectId){},getMap:function getMap(){},setViewToExtent:function setViewToExtent(bounds,angle){},getTerrainHeightFromDTM:function getTerrainHeightFromDTM(scenePos){},getTerrainHeightFromMap:function getTerrainHeightFromMap(scenePos){},getSceneIntersection:function getSceneIntersection(x,y,objects){},getSetting:function getSetting(key){},setSetting:function setSetting(key,value){}}),sceneId:null});_defineProperty(_this2,"applyBaseLayer",function(){var _baseLayer$name;var baseLayer=_this2.state.sceneContext.baseLayers.find(function(e){return e.visibility===true});_this2.removeLayer("__baselayer");UrlParams.updateParams({bl3d:(_baseLayer$name=baseLayer===null||baseLayer===void 0?void 0:baseLayer.name)!==null&&_baseLayer$name!==void 0?_baseLayer$name:""});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){var _this2$state$sceneCon;var currentBaseLayer=((_this2$state$sceneCon=_this2.state.sceneContext.baseLayers.find(function(l){return l.visibility===true}))===null||_this2$state$sceneCon===void 0?void 0:_this2$state$sceneCon.name)||"";if(visibility&&(layer===null||layer===void 0?void 0:layer.name)===currentBaseLayer){// Nothing changed
+return}_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];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,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.state.sceneContext)});_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 showEditTool=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var matrix=arguments.length>4&&arguments[4]!==undefined?arguments[4]:null;var label=arguments.length>5&&arguments[5]!==undefined?arguments[5]:null;var tiles=new Tiles3D({url:MiscUtils.resolveAssetsPath(url)});// Recenter tile group
 tiles.tiles.addEventListener("load-tile-set",function(_ref7){var tileSet=_ref7.tileSet;if(tileSet.root.parent===null){var bbox=new Box3;tiles.tiles.getBoundingBox(bbox);var center=bbox.getCenter(new Vector3);tiles.tiles.group.position.sub(center);if(matrix){tiles.tiles.group.parent.applyMatrix4(matrix)}else{tiles.tiles.group.parent.position.copy(center)}tiles.tiles.group.parent.updateMatrixWorld(true);if(label){tiles.tiles.group.parent.userData.label=label;updateObjectLabel(tiles.tiles.group.parent,_this2.state.sceneContext)}}_this2.instance.notifyChange(tiles);if(showEditTool){_this2.zoomToObject(name);_this2.props.setCurrentTask("EditDataset3D",null,null,{objectId:name})}});tiles.tiles.addEventListener("needs-update",function(){_this2.instance.notifyChange(tiles)});// Apply style when loading tile
-tiles.tiles.addEventListener("load-model",function(_ref8){var scene=_ref8.scene;scene.userData.tilesetName=name;scene.userData.batchIdAttr="id";Tiles3DStyle.applyTileStyle(scene,_this2.state.sceneContext.sceneObjects[name],_this2.state.sceneContext);_this2.instance.notifyChange(tiles)});// Show/hide labels when tile visibility changes
+tiles.tiles.addEventListener("load-model",function(_ref8){var scene=_ref8.scene;scene.userData.tilesetName=name;scene.userData.featureIdAttr="id";Tiles3DStyle.applyTileStyle(scene,_this2.state.sceneContext.sceneObjects[name],_this2.state.sceneContext);_this2.instance.notifyChange(tiles)});// Show/hide labels when tile visibility changes
 tiles.tiles.addEventListener("tile-visibility-change",function(_ref9){var scene=_ref9.scene,visible=_ref9.visible;Object.values(scene.userData.tileLabels||{}).forEach(function(l){l.labelObject.visible=visible;l.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}// Ensure labels are removed
 object.traverse(function(c){if(c.isCSS2DObject){c.element.parentNode.removeChild(c.element)}});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,"zoomToObject",function(objectId){var margin=arguments.length>1&&arguments[1]!==undefined?arguments[1]:20;var obj=_this2.state.sceneContext.getSceneObject(objectId);var bbox=new Box3;if(obj!==null&&obj!==void 0&&obj.tiles){obj.tiles.getBoundingBox(bbox)}else{bbox.setFromObject(obj)}if(!bbox.isEmpty()){var bounds=[bbox.min.x-margin,bbox.min.y-margin,bbox.max.x+margin,bbox.max.y+margin];_this2.state.sceneContext.setViewToExtent(bounds,0)}});_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
@@ -18,14 +18,15 @@ var bounds=CoordinatesUtils.reprojectBbox(_this2.props.theme.initialBbox.bounds,
 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,overview:e.overview===true});if(baseLayer.visibility){visibleBaseLayer=baseLayer}return baseLayer});if(visibleBaseLayer){_this2.setBaseLayer(visibleBaseLayer,true)}// Collect color layers
+var externalLayers={};var baseLayers=ThemeUtils.createThemeBackgroundLayers(((_this2$props$theme$ma6=_this2.props.theme.map3d)===null||_this2$props$theme$ma6===void 0?void 0:_this2$props$theme$ma6.basemaps)||[],_this2.props.themes,null,externalLayers);for(var _i=0,_Object$keys=Object.keys(externalLayers);_i<_Object$keys.length;_i++){var key=_Object$keys[_i];var idx=key.indexOf(":");var service=key.slice(0,idx);var serviceUrl=key.slice(idx+1);ServiceLayerUtils.findLayers(service,serviceUrl,externalLayers[key],projection,function(id,layer){// Don't expose sublayers
+if(layer){layer.sublayers=null}_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{baseLayers:LayerUtils.replacePlaceholderLayer(state.sceneContext.baseLayers,id,layer)})}})})}// 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});tiles.tiles.addEventListener("load-tile-set",function(){_this2.instance.notifyChange(tiles)});tiles.tiles.addEventListener("needs-update",function(){_this2.instance.notifyChange(tiles)});// Apply style when loading tile
-tiles.tiles.addEventListener("load-model",function(_ref10){var _entry$idAttr;var scene=_ref10.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);_this2.instance.notifyChange(tiles)});// Show/hide labels when tile visibility changes
+tiles.tiles.addEventListener("load-model",function(_ref10){var _entry$idAttr;var scene=_ref10.scene;scene.userData.tilesetName=entry.name;scene.userData.featureIdAttr=(_entry$idAttr=entry.idAttr)!==null&&_entry$idAttr!==void 0?_entry$idAttr:"id";Tiles3DStyle.applyTileStyle(scene,_this2.state.sceneContext.sceneObjects[entry.name],_this2.state.sceneContext);_this2.instance.notifyChange(tiles)});// Show/hide labels when tile visibility changes
 tiles.tiles.addEventListener("tile-visibility-change",function(_ref11){var scene=_ref11.scene,visible=_ref11.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)});_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)}_this2.instance.addEventListener("update-start",function(){var camera=_this2.instance.view.camera;var quality=_this2.state.sceneContext.settings.sceneQuality;var isFirstPerson=_this2.state.sceneContext.scene.view.controls.isFirstPerson;var maxDistance=isFirstPerson?200+20*quality:500+quality*quality;// Hide scene objects according to scene quality
-Object.entries(_this2.state.sceneContext.sceneObjects).forEach(function(_ref12){var _ref13=_slicedToArray(_ref12,2),objId=_ref13[0],options=_ref13[1];var object=_this2.objectMap[objId];if(options.layertree&&object.isObject3D){object.children.forEach(function(child){var distance=camera.position.distanceTo(child.getWorldPosition(new Vector3));child.userData.__wasVisible=child.visible;if(distance>maxDistance){child.visible=false}})}})});_this2.instance.addEventListener("update-end",function(){Object.entries(_this2.state.sceneContext.sceneObjects).forEach(function(_ref14){var _ref15=_slicedToArray(_ref14,2),objId=_ref15[0],options=_ref15[1];var object=_this2.objectMap[objId];if(options.layertree&&object.isObject3D){object.children.forEach(function(child){child.visible=child.userData.__wasVisible;delete child.userData.__wasVisible})}})});_this2.instance.addEventListener("before-entity-update",function(_ref16){var entity=_ref16.entity;if(entity!==_this2.map){_this2.instance.view.camera.userData.__previousFar=_this2.instance.view.camera.far;var quality=_this2.state.sceneContext.settings.sceneQuality;var isFirstPerson=_this2.state.sceneContext.scene.view.controls.isFirstPerson;_this2.instance.view.camera.far=isFirstPerson?200+20*quality:500+quality*quality;_this2.instance.view.camera.updateProjectionMatrix()}});_this2.instance.addEventListener("after-entity-update",function(_ref17){var entity=_ref17.entity;if(entity!==_this2.map){_this2.instance.view.camera.far=_this2.instance.view.camera.userData.__previousFar;delete _this2.instance.view.camera.userData.__previousFar;_this2.instance.view.camera.updateProjectionMatrix()}})});_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(["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)}_this2.instance.addEventListener("update-start",_this2.instanceOnUpdateStart);_this2.instance.addEventListener("update-end",_this2.instanceOnUpdateEnd);_this2.instance.addEventListener("before-entity-update",_this2.instanceOnBeforeEntityUpdate);_this2.instance.addEventListener("after-entity-update",_this2.instanceOnAfterEntityUpdate)});_defineProperty(_this2,"instanceOnUpdateStart",function(){var camera=_this2.instance.view.camera;var quality=_this2.state.sceneContext.settings.sceneQuality;var isFirstPerson=_this2.state.sceneContext.scene.view.controls.isFirstPerson;var maxDistance=isFirstPerson?200+20*quality:500+quality*quality;// Hide scene objects according to scene quality
+Object.entries(_this2.state.sceneContext.sceneObjects).forEach(function(_ref12){var _ref13=_slicedToArray(_ref12,2),objId=_ref13[0],options=_ref13[1];var object=_this2.objectMap[objId];if(options.layertree&&object.isObject3D){object.children.forEach(function(child){var distance=camera.position.distanceTo(child.getWorldPosition(new Vector3));child.userData.__wasVisible=child.visible;if(distance>maxDistance){child.visible=false}})}})});_defineProperty(_this2,"instanceOnUpdateEnd",function(){Object.entries(_this2.state.sceneContext.sceneObjects).forEach(function(_ref14){var _ref15=_slicedToArray(_ref14,2),objId=_ref15[0],options=_ref15[1];var object=_this2.objectMap[objId];if(options.layertree&&object.isObject3D){object.children.forEach(function(child){child.visible=child.userData.__wasVisible;delete child.userData.__wasVisible})}})});_defineProperty(_this2,"instanceOnBeforeEntityUpdate",function(_ref16){var entity=_ref16.entity;if(entity!==_this2.map){_this2.instance.view.camera.userData.__previousFar=_this2.instance.view.camera.far;var quality=_this2.state.sceneContext.settings.sceneQuality;var isFirstPerson=_this2.state.sceneContext.scene.view.controls.isFirstPerson;_this2.instance.view.camera.far=isFirstPerson?200+20*quality:500+quality*quality;_this2.instance.view.camera.updateProjectionMatrix()}});_defineProperty(_this2,"instanceOnAfterEntityUpdate",function(_ref17){var entity=_ref17.entity;if(entity!==_this2.map){_this2.instance.view.camera.far=_this2.instance.view.camera.userData.__previousFar;delete _this2.instance.view.camera.userData.__previousFar;_this2.instance.view.camera.updateProjectionMatrix()}});_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(){_this2.instance.removeEventListener("update-start",_this2.instanceOnUpdateStart);_this2.instance.removeEventListener("update-end",_this2.instanceOnUpdateEnd);_this2.instance.removeEventListener("before-entity-update",_this2.instanceOnBeforeEntityUpdate);_this2.instance.removeEventListener("after-entity-update",_this2.instanceOnAfterEntityUpdate);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 _ref18=[ModelPixelScale[0],ModelPixelScale[1]],scaleX=_ref18[0],scaleY=_ref18[1];var _ref19=[ModelTiepoint[3],ModelTiepoint[4]],tiepointX=_ref19[0],tiepointY=_ref19[1];// Tiepoint world coordinates
 // Calculate pixel indices (rounded to nearest integers)
@@ -36,7 +37,7 @@ var maxPixelX=Math.round((dtmExt[2]-tiepointX)/scaleX)+1;var width=maxPixelX-min
 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,"getSetting",function(key){return _this2.state.sceneContext.settings[key]});_defineProperty(_this2,"setSetting",function(key,value){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{settings:_objectSpread(_objectSpread({},state.sceneContext.settings),{},_defineProperty({},key,value))})}})});_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(_ref20){var _ref21=_slicedToArray(_ref20,2),objectId=_ref21[0],entry=_ref21[1];if(!entry.layertree){return null}return new Promise(function(resolve){var object=_this2.state.sceneContext.getSceneObject(objectId);if(entry.drawGroup){var exporter=new GLTFExporter;exporter.parse(object,function(result){resolve({id:objectId,options:entry,data:result})})}else if(entry.imported&&object.tiles){var container=object.tiles.group.parent;var tileset={matrix:container.matrix.elements,label:container.userData.label,url:object.tiles.rootURL};resolve({id:objectId,options:entry,tileset:tileset})}else{resolve({id:objectId,options:entry})}})}).filter(Boolean);return new Promise(function(resolve){Promise.all(promises).then(function(objects){var _this2$state$sceneCon2,_this2$state$sceneCon3;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(_ref22){var _ref23=_slicedToArray(_ref22,2),layerId=_ref23[0],options=_ref23[1];return{id:layerId,options:{visibility:options.visibility,opacity:options.opacity,extrusionHeight:options.extrusionHeight}}});resolve({objects:objects,colorLayers:layers,baseLayer:((_this2$state$sceneCon2=_this2.state.sceneContext.baseLayers.find(function(layer){return layer.visibility===true}))===null||_this2$state$sceneCon2===void 0?void 0:_this2$state$sceneCon2.name)||"",personHeight:(_this2$state$sceneCon3=_this2.state.sceneContext.scene.view.controls.personHeight)!==null&&_this2$state$sceneCon3!==void 0?_this2$state$sceneCon3: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(c){if(c.isMesh){c.castShadow=true;c.receiveShadow=true}updateObjectLabel(c,_this2.state.sceneContext)});_this2.state.sceneContext.addSceneObject(item.id,gltf.scene,item.options)})}else if(item.tileset){_this2.add3dTiles(item.tileset.url,item.id,item.options,false,new Matrix4().fromArray(item.tileset.matrix),item.tileset.label)}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.sceneSettings={};_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.zoomToObject=_this2.zoomToObject;_this2.state.sceneContext.getMap=_this2.getMap;_this2.state.sceneContext.getTerrainHeightFromDTM=_this2.getTerrainHeightFromDTM;_this2.state.sceneContext.getTerrainHeightFromMap=_this2.getTerrainHeightFromMap;_this2.state.sceneContext.getSceneIntersection=_this2.getSceneIntersection;_this2.state.sceneContext.getSetting=_this2.getSetting;_this2.state.sceneContext.setSetting=_this2.setSetting;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,"getSetting",function(key){return _this2.state.sceneContext.settings[key]});_defineProperty(_this2,"setSetting",function(key,value){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{settings:_objectSpread(_objectSpread({},state.sceneContext.settings),{},_defineProperty({},key,value))})}})});_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(_ref20){var _ref21=_slicedToArray(_ref20,2),objectId=_ref21[0],entry=_ref21[1];if(!entry.layertree){return null}return new Promise(function(resolve){var object=_this2.state.sceneContext.getSceneObject(objectId);if(entry.drawGroup){var exporter=new GLTFExporter;exporter.parse(object,function(result){resolve({id:objectId,options:entry,data:result})})}else if(entry.imported&&object.tiles){var container=object.tiles.group.parent;var tileset={matrix:container.matrix.elements,label:container.userData.label,url:object.tiles.rootURL};resolve({id:objectId,options:entry,tileset:tileset})}else{resolve({id:objectId,options:entry})}})}).filter(Boolean);return new Promise(function(resolve){Promise.all(promises).then(function(objects){var _this2$state$sceneCon2,_this2$state$sceneCon3;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(_ref22){var _ref23=_slicedToArray(_ref22,2),layerId=_ref23[0],options=_ref23[1];return{id:layerId,options:{visibility:options.visibility,opacity:options.opacity,extrusionHeight:options.extrusionHeight}}});resolve({objects:objects,colorLayers:layers,baseLayer:((_this2$state$sceneCon2=_this2.state.sceneContext.baseLayers.find(function(layer){return layer.visibility===true}))===null||_this2$state$sceneCon2===void 0?void 0:_this2$state$sceneCon2.name)||"",personHeight:(_this2$state$sceneCon3=_this2.state.sceneContext.scene.view.controls.personHeight)!==null&&_this2$state$sceneCon3!==void 0?_this2$state$sceneCon3: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(c){if(c.isMesh){c.castShadow=true;c.receiveShadow=true}updateObjectLabel(c,_this2.state.sceneContext)});_this2.state.sceneContext.addSceneObject(item.id,gltf.scene,item.options)})}else if(item.tileset){_this2.add3dTiles(item.tileset.url,item.id,item.options,false,new Matrix4().fromArray(item.tileset.matrix),item.tileset.label)}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.sceneSettings={};_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.setBaseLayer=_this2.setBaseLayer;_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.zoomToObject=_this2.zoomToObject;_this2.state.sceneContext.getMap=_this2.getMap;_this2.state.sceneContext.getTerrainHeightFromDTM=_this2.getTerrainHeightFromDTM;_this2.state.sceneContext.getTerrainHeightFromMap=_this2.getTerrainHeightFromMap;_this2.state.sceneContext.getSceneIntersection=_this2.getSceneIntersection;_this2.state.sceneContext.getSetting=_this2.getSetting;_this2.state.sceneContext.setSetting=_this2.setSetting;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,prevState.sceneContext.sceneObjects);// Update collision objects
-this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{collisionObjects:Object.entries(state.sceneContext.sceneObjects).map(function(_ref24){var _ref25=_slicedToArray(_ref24,2),objId=_ref25[0],options=_ref25[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)})}})}if(this.state.sceneContext.settings.sceneQuality!==prevState.sceneContext.settings.sceneQuality){var quality=Math.max(20,this.state.sceneContext.settings.sceneQuality);this.map.segments=Math.pow(2,Math.floor(quality/20));this.instance.notifyChange(this.instance.view.camera)}}},{key:"render",value:function render(){var _this$state$sceneCont;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",id:"map3d",key:"Map3D",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(BottomBar3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Compare3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Draw3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(EditDataset3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(ExportObjects3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(HideObjects3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Identify3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(LayerTree3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Map3DLight,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(MapExport3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Measure3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(OverviewMap3D,{baseLayer:overviewLayer,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Settings3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(TopBar3D,{sceneContext:this.state.sceneContext,searchProviders:this.props.searchProviders}),/*#__PURE__*/React.createElement(View3DSwitcher,{position:2}))):null]}}])}(React.Component);_defineProperty(Map3D,"contextType",MapContainerPortalContext);_defineProperty(Map3D,"propTypes",{innerRef:PropTypes.func,layers:PropTypes.array,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:[],settings:{sceneQuality:100}});export default connect(function(state){return{theme:state.theme.current,layers:state.layers.flat}},{setCurrentTask:setCurrentTask})(Map3D);
+this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{collisionObjects:Object.entries(state.sceneContext.sceneObjects).map(function(_ref24){var _ref25=_slicedToArray(_ref24,2),objId=_ref25[0],options=_ref25[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)})}})}if(this.state.sceneContext.settings.sceneQuality!==prevState.sceneContext.settings.sceneQuality){var quality=Math.max(20,this.state.sceneContext.settings.sceneQuality);this.map.segments=Math.pow(2,Math.floor(quality/20));this.instance.notifyChange(this.instance.view.camera)}}},{key:"render",value:function render(){var _this4=this;return[/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-map",id:"map3d",key:"Map3D",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,{controlsPosition:this.props.controlsPosition,onCameraChanged:this.props.onCameraChanged,onControlsSet:this.setupControls,sceneContext:this.state.sceneContext},/*#__PURE__*/React.createElement(EditDataset3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(View3DSwitcher,{position:1}),Object.entries(this.props.plugins3d).map(function(_ref26){var _ref27=_slicedToArray(_ref26,2),name=_ref27[0],Component=_ref27[1];return/*#__PURE__*/React.createElement(Suspense,{key:name},/*#__PURE__*/React.createElement(Component,_extends({sceneContext:_this4.state.sceneContext},_this4.props.pluginOptions[name])))}))):null]}}])}(React.Component);_defineProperty(Map3D,"contextType",MapContainerPortalContext);_defineProperty(Map3D,"propTypes",{controlsPosition:PropTypes.string,innerRef:PropTypes.func,layers:PropTypes.array,onCameraChanged:PropTypes.func,onMapInitialized:PropTypes.func,pluginOptions:PropTypes.object,plugins3d:PropTypes.object,setCurrentTask:PropTypes.func,theme:PropTypes.object,themes: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:[],settings:{sceneQuality:100}});export default connect(function(state){return{theme:state.theme.current,themes:state.theme.themes,layers:state.layers.flat}},{setCurrentTask:setCurrentTask})(Map3D);

package/components/map3d/MapControls3D.js

@@ -4,9 +4,9 @@ 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 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";// FIXME: camera.fov is 30, but in reality seems to be 50 (as would be the threejs default)
+ */import React from"react";import ReactDOM from"react-dom";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{MapButtonPortalContext}from"../PluginsContainer";import FirstPersonControls3D from"./utils/FirstPersonControls3D";import OrbitControls3D from"./utils/OrbitControls3D";import"./style/MapControls3D.css";// FIXME: camera.fov is 30, but in reality seems to be 50 (as would be the threejs default)
 var CAMERA_FOV=50;var MapControls3D=/*#__PURE__*/function(_React$Component){function MapControls3D(props){var _this;_classCallCheck(this,MapControls3D);_this=_callSuper(this,MapControls3D,[props]);_defineProperty(_this,"state",{pickingFirstPerson:false,firstPerson:false});_defineProperty(_this,"unload",function(el){// componentWillUnmount is called too early, so do cleanup when the element is actually removed
 if(!el){_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)}});_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 angle=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;_this.leaveFirstPerson();var fov=CAMERA_FOV/180*Math.PI;var cameraHeight=(bounds[2]-bounds[0])/(2*Math.tan(fov/2));var center={x:0.5*(bounds[0]+bounds[2]),y:0.5*(bounds[1]+bounds[3])};var camerapos=new Vector3(center.x,center.y,cameraHeight);var target=new Vector3(center.x,center.y,0);var h=_this.props.sceneContext.getTerrainHeightFromMap([center.x,center.y]);// Fall back to getTerrainHeightFromDTM if map is not yet loaded
-if(h===undefined){_this.props.sceneContext.getTerrainHeightFromDTM([center.x,center.y]).then(function(h2){camerapos.z+=h2;target.z+=h2;_this.controls.animateTo(camerapos,target,angle)})}else{camerapos.z+=h;target.z+=h;_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(){var camerapos=_this.props.sceneContext.scene.view.camera.position;var target=_this.controls.target;var k=Math.min(150,Math.sqrt(target.distanceTo(camerapos)));_this.props.sceneContext.scene.view.controls.zoomView(delta*k)},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],[cpos.x,cpos.y,cpos.z],CAMERA_FOV)});_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],null)});_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)}}});var sceneElement=props.sceneContext.scene.domElement;sceneElement.tabIndex=0;_this.controls=new OrbitControls3D(props.sceneContext.scene.view.camera);_this.fpcontrols=new FirstPersonControls3D(props.sceneContext.scene.view.camera);_this.controls.connect(props.sceneContext);var targetPos=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);props.onControlsSet(_this);_this.updateUrlParams();return _this}_inherits(MapControls3D,_React$Component);return _createClass(MapControls3D,[{key:"render",value:function render(){var _this2=this;var firstPersonButtonClasses=classNames({"map3d-firstperson-button":true,"map3d-firstperson-button-active":this.state.firstPerson});return[this.props.children,/*#__PURE__*/React.createElement("div",{className:"map3d-nav",key:"MapControls3D",ref:this.unload},/*#__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",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),currentTask:PropTypes.string,onCameraChanged:PropTypes.func,onControlsSet:PropTypes.func,sceneContext:PropTypes.object});export default connect(function(state){return{currentTask:state.task.id}},{})(MapControls3D);
+if(h===undefined){_this.props.sceneContext.getTerrainHeightFromDTM([center.x,center.y]).then(function(h2){camerapos.z+=h2;target.z+=h2;_this.controls.animateTo(camerapos,target,angle)})}else{camerapos.z+=h;target.z+=h;_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(){var camerapos=_this.props.sceneContext.scene.view.camera.position;var target=_this.controls.target;var k=Math.min(150,Math.sqrt(target.distanceTo(camerapos)));_this.props.sceneContext.scene.view.controls.zoomView(delta*k)},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],[cpos.x,cpos.y,cpos.z],CAMERA_FOV)});_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],null)});_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)}}});var sceneElement=props.sceneContext.scene.domElement;sceneElement.tabIndex=0;_this.controls=new OrbitControls3D(props.sceneContext.scene.view.camera);_this.fpcontrols=new FirstPersonControls3D(props.sceneContext.scene.view.camera);_this.controls.connect(props.sceneContext);var targetPos=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);props.onControlsSet(_this);_this.updateUrlParams();return _this}_inherits(MapControls3D,_React$Component);return _createClass(MapControls3D,[{key:"render",value:function render(){var _this2=this;var firstPersonButtonClasses=classNames({"map3d-firstperson-button":true,"map3d-firstperson-button-active":this.state.firstPerson});return[this.props.children,/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-nav-pan","data-slot":0,key:"MapControlsPan",style:{order:1000}},/*#__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)),this.context),/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-nav-rotate","data-slot":0,key:"MapControlsRotate",style:{order:999}},/*#__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.context),/*#__PURE__*/ReactDOM.createPortal(!this.state.firstPerson?/*#__PURE__*/React.createElement("div",{className:"map3d-nav-zoom","data-slot":0,key:"MapControlsSpacerZoom",style:{order:998}},/*#__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,this.context),/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:firstPersonButtonClasses,"data-slot":0,key:"MapControlsFirstPerson",onClick:this.toggleFirstPersonControls,style:{order:997}},/*#__PURE__*/React.createElement(Icon,{icon:"person"})),this.context),this.props.controlsPosition!=="bottom"?/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-nav-spacer",key:"MapControlsSpacer",style:{order:997}}),this.context):null]}}])}(React.Component);_defineProperty(MapControls3D,"contextType",MapButtonPortalContext);_defineProperty(MapControls3D,"propTypes",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),controlsPosition:PropTypes.string,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/SearchField3D.js

@@ -4,13 +4,13 @@ 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 ColorLayer from"@giro3d/giro3d/core/layer/ColorLayer";import VectorSource from"@giro3d/giro3d/sources/VectorSource";import ol from"openlayers";import PropTypes from"prop-types";import{Group}from"three";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import{CSS2DObject}from"three/addons/renderers/CSS2DRenderer";import CoordinatesUtils from"../../utils/CoordinatesUtils";import FeatureStyles from"../../utils/FeatureStyles";import VectorLayerUtils from"../../utils/VectorLayerUtils";import SearchWidget from"../widgets/SearchWidget";import pinModel from"./models/pin.glb";var SearchField3D=/*#__PURE__*/function(_React$Component){function SearchField3D(){var _this;_classCallCheck(this,SearchField3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,SearchField3D,[].concat(args));_defineProperty(_this,"searchResultSelected",function(result){var _result$crs,_result$feature,_result$crs3;var sceneContext=_this.props.sceneContext;sceneContext.removeLayer("__searchHighlight");sceneContext.removeSceneObject("__searchMarker");if(!result){return}var mapCrs=sceneContext.mapCrs;var scenePos=CoordinatesUtils.reproject([result.x,result.y],(_result$crs=result.crs)!==null&&_result$crs!==void 0?_result$crs:mapCrs,mapCrs);// Add highlight geometry
+ */import React from"react";import{connect}from"react-redux";import ColorLayer from"@giro3d/giro3d/core/layer/ColorLayer";import VectorSource from"@giro3d/giro3d/sources/VectorSource";import ol from"openlayers";import PropTypes from"prop-types";import{Group}from"three";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import{CSS2DObject}from"three/addons/renderers/CSS2DRenderer";import pinModel from"../../resources/pin.glb";import CoordinatesUtils from"../../utils/CoordinatesUtils";import FeatureStyles from"../../utils/FeatureStyles";import{collectSearchProviders}from"../../utils/SearchProviders";import VectorLayerUtils from"../../utils/VectorLayerUtils";import SearchWidget from"../widgets/SearchWidget";var SearchField3D=/*#__PURE__*/function(_React$Component){function SearchField3D(){var _this;_classCallCheck(this,SearchField3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,SearchField3D,[].concat(args));_defineProperty(_this,"state",{searchProviders:{}});_defineProperty(_this,"searchResultSelected",function(result){var _result$crs,_result$feature,_result$crs3;var sceneContext=_this.props.sceneContext;sceneContext.removeLayer("__searchHighlight");sceneContext.removeSceneObject("__searchMarker");if(!result){return}var mapCrs=sceneContext.mapCrs;var scenePos=CoordinatesUtils.reproject([result.x,result.y],(_result$crs=result.crs)!==null&&_result$crs!==void 0?_result$crs:mapCrs,mapCrs);// Add highlight geometry
 if(result.feature&&((_result$feature=result.feature)===null||_result$feature===void 0||(_result$feature=_result$feature.geometry)===null||_result$feature===void 0?void 0:_result$feature.type)!=="Point"){var _result$crs2;var format=new ol.format.GeoJSON;var olFeatures=format.readFeatures(result.feature,{dataProjection:(_result$crs2=result.crs)!==null&&_result$crs2!==void 0?_result$crs2:mapCrs,featureProjection:mapCrs});var highlightLayer=new ColorLayer({source:new VectorSource({data:olFeatures,format:format,style:function style(feat){return FeatureStyles["default"](feat,{})}})});sceneContext.addLayer("__searchHighlight",highlightLayer)}// Zoom to bounds
 var bounds=result.feature?VectorLayerUtils.computeFeatureBBox(result.feature):CoordinatesUtils.reprojectBbox(result.bbox,(_result$crs3=result.crs)!==null&&_result$crs3!==void 0?_result$crs3:mapCrs,mapCrs);// Adjust bounds so that we do not zoom further than 1:searchMinScaleDenom
 var bbWidth=bounds[2]-bounds[0];var bbHeight=bounds[3]-bounds[1];var sceneRect=_this.props.sceneContext.scene.viewport.getBoundingClientRect();// Compute maximum allowed dimensions at the given scale
-var px2m=0.0254/96;var minWidth=sceneRect.width*px2m*_this.props.sceneContext.options.searchMinScaleDenom;var minHeight=sceneRect.height*px2m*_this.props.sceneContext.options.searchMinScaleDenom;var scaleFactor=Math.max(bbWidth/minWidth,bbHeight/minHeight);if(scaleFactor<1){var bbCenterX=0.5*(bounds[0]+bounds[2]);var bbCenterY=0.5*(bounds[1]+bounds[3]);bounds=[bbCenterX-minWidth/2,bbCenterY-minHeight/2,bbCenterX+minWidth/2,bbCenterY+minHeight/2]}sceneContext.setViewToExtent(bounds,0);// Add pin and label at result position above terrain
+var px2m=0.0254/96;var minWidth=sceneRect.width*px2m*_this.props.searchOptions.minScaleDenom;var minHeight=sceneRect.height*px2m*_this.props.searchOptions.minScaleDenom;var scaleFactor=Math.max(bbWidth/minWidth,bbHeight/minHeight);if(scaleFactor<1){var bbCenterX=0.5*(bounds[0]+bounds[2]);var bbCenterY=0.5*(bounds[1]+bounds[3]);bounds=[bbCenterX-minWidth/2,bbCenterY-minHeight/2,bbCenterX+minWidth/2,bbCenterY+minHeight/2]}sceneContext.setViewToExtent(bounds,0);// Add pin and label at result position above terrain
 sceneContext.getTerrainHeightFromDTM(scenePos).then(function(terrainHeight){var loader=new GLTFLoader;loader.load(pinModel,function(gltf){var _result$label;var searchMarker=new Group;// Add pin
 var pin=gltf.scene;pin.position.x=scenePos[0];pin.position.y=scenePos[1];pin.position.z=terrainHeight;pin.rotation.x=Math.PI/2;pin.updateMatrixWorld();searchMarker.add(pin);// Add label
 var labelEl=document.createElement("span");labelEl.innerText=(_result$label=result.label)!==null&&_result$label!==void 0?_result$label:result.text;labelEl.className="map3d-search-label";var label=new CSS2DObject(labelEl);label.position.set(scenePos[0],scenePos[1],terrainHeight+2);label.updateMatrixWorld();searchMarker.add(label);sceneContext.addSceneObject("__searchMarker",searchMarker);// Scale search marker with distance
 var scaleSearchMarker=function scaleSearchMarker(){var distance=sceneContext.scene.view.camera.position.distanceTo(pin.position)/30;var scale=Math.max(20,distance);label.position.z=terrainHeight+2*scale;label.updateMatrixWorld();pin.scale.set(scale,scale,scale);pin.updateMatrixWorld()};sceneContext.scene.view.controls.addEventListener("change",scaleSearchMarker);searchMarker.addEventListener("removed",function(){var _labelEl$parentNode,_labelEl$parentNode$r;sceneContext.scene.view.controls.removeEventListener("change",scaleSearchMarker);// The label DOM element is not removed when the searchMarker group is removed from the instance
-(_labelEl$parentNode=labelEl.parentNode)===null||_labelEl$parentNode===void 0||(_labelEl$parentNode$r=_labelEl$parentNode.removeChild)===null||_labelEl$parentNode$r===void 0||_labelEl$parentNode$r.call(_labelEl$parentNode,labelEl)})})})});return _this}_inherits(SearchField3D,_React$Component);return _createClass(SearchField3D,[{key:"render",value:function render(){return/*#__PURE__*/React.createElement(SearchWidget,{queryGeometries:true,resultSelected:this.searchResultSelected,searchParams:{mapcrs:this.props.sceneContext.mapCrs,displaycrs:this.props.sceneContext.mapCrs},searchProviders:Object.values(this.props.searchProviders),value:""})}}])}(React.Component);_defineProperty(SearchField3D,"propTypes",{sceneContext:PropTypes.object,searchProviders:PropTypes.object});export{SearchField3D as default};
+(_labelEl$parentNode=labelEl.parentNode)===null||_labelEl$parentNode===void 0||(_labelEl$parentNode$r=_labelEl$parentNode.removeChild)===null||_labelEl$parentNode$r===void 0||_labelEl$parentNode$r.call(_labelEl$parentNode,labelEl)})})})});return _this}_inherits(SearchField3D,_React$Component);return _createClass(SearchField3D,[{key:"componentDidMount",value:function componentDidMount(){this.componentDidUpdate({})}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _this$props$sceneCont,_prevProps$sceneConte;if(((_this$props$sceneCont=this.props.sceneContext)===null||_this$props$sceneCont===void 0?void 0:_this$props$sceneCont.colorLayers)!==((_prevProps$sceneConte=prevProps.sceneContext)===null||_prevProps$sceneConte===void 0?void 0:_prevProps$sceneConte.colorLayers)){var layers=Object.values(this.props.sceneContext.colorLayers);this.setState({searchProviders:collectSearchProviders(this.props.theme,layers)})}}},{key:"render",value:function render(){return/*#__PURE__*/React.createElement(SearchWidget,{queryGeometries:true,resultSelected:this.searchResultSelected,searchParams:{mapcrs:this.props.sceneContext.mapCrs,displaycrs:this.props.sceneContext.mapCrs},searchProviders:Object.values(this.state.searchProviders),value:""})}}])}(React.Component);_defineProperty(SearchField3D,"propTypes",{sceneContext:PropTypes.object,searchOptions:PropTypes.shape({minScaleDenom:PropTypes.number}),theme:PropTypes.object});export default connect(function(state){return{theme:state.theme.current}})(SearchField3D);

package/components/map3d/drawtool/NumericInput3D.js

@@ -4,6 +4,6 @@ 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 ReactDOM from"react-dom";import PropTypes from"prop-types";import{Box3}from"three";import CoordinatesUtils from"../../../utils/CoordinatesUtils";import LocaleUtils from"../../../utils/LocaleUtils";import ResizeableWindow from"../../ResizeableWindow";import ButtonBar from"../../widgets/ButtonBar";import NumberInput from"../../widgets/NumberInput";import"./style/NumericInput3D.css";var NumericInput3D=/*#__PURE__*/function(_React$Component){function NumericInput3D(props){var _this;_classCallCheck(this,NumericInput3D);_this=_callSuper(this,NumericInput3D,[props]);_defineProperty(_this,"state",{pos:[0,0,0],rot:[0,0,0],scale:[1,1,1],size:null,anchors:["center","center","begin"]});_defineProperty(_this,"updateStateFromObject",function(){if(_this.props.selectedObject){// Temporarily remove rotation and compute bbox
-var originalRotation=_this.props.selectedObject.rotation.clone();_this.props.selectedObject.rotation.set(0,0,0);_this.props.selectedObject.updateMatrixWorld(true);var bbox=new Box3().setFromObject(_this.props.selectedObject);var size=[bbox.max.x-bbox.min.x,bbox.max.y-bbox.min.y,bbox.max.z-bbox.min.z];_this.props.selectedObject.rotation.copy(originalRotation);_this.props.selectedObject.updateMatrixWorld(true);_this.setState({pos:_this.props.selectedObject.position.toArray(),rot:_this.props.selectedObject.rotation.toArray().slice(0,3).map(function(x){return x/Math.PI*180}),scale:_this.props.selectedObject.scale.toArray(),size:size})}else{_this.setState({pos:[0,0,0],rot:[0,0,0],scale:[1,1,1],size:null})}});_defineProperty(_this,"updatePosition",function(idx,value){var _this$props$selectedO;var newPos=_toConsumableArray(_this.state.pos);newPos[idx]=value;(_this$props$selectedO=_this.props.selectedObject.position).set.apply(_this$props$selectedO,_toConsumableArray(newPos));_this.update()});_defineProperty(_this,"updateRotation",function(idx,value){var _this$props$selectedO2;var newRot=_toConsumableArray(_this.state.rot);newRot[idx]=value;(_this$props$selectedO2=_this.props.selectedObject.rotation).set.apply(_this$props$selectedO2,_toConsumableArray(newRot.map(function(x){return x/180*Math.PI})).concat([_this.props.selectedObject.rotation.order]));_this.update()});_defineProperty(_this,"updateScale",function(idx,value){var _this$props$selectedO3;var newScale=_toConsumableArray(_this.state.scale);newScale[idx]=value;(_this$props$selectedO3=_this.props.selectedObject.scale).set.apply(_this$props$selectedO3,_toConsumableArray(newScale));_this.update()});_defineProperty(_this,"updateSize",function(idx,value){var _this$props$selectedO4,_this$props$selectedO5;var scaleDiff=value/_this.state.size[idx];var newScale=_toConsumableArray(_this.state.scale);newScale[idx]=newScale[idx]*scaleDiff;// Offset for anchor
-var newPos=_toConsumableArray(_this.state.pos);if(_this.state.anchors[idx]==="begin"){newPos[idx]+=0.5*(value-_this.state.size[idx])}else if(_this.state.anchors[idx]==="end"){newPos[idx]-=0.5*(value-_this.state.size[idx])}(_this$props$selectedO4=_this.props.selectedObject.scale).set.apply(_this$props$selectedO4,_toConsumableArray(newScale));(_this$props$selectedO5=_this.props.selectedObject.position).set.apply(_this$props$selectedO5,_toConsumableArray(newPos));_this.update()});_defineProperty(_this,"setAnchor",function(idx,value){_this.setState(function(state){return{anchors:[].concat(_toConsumableArray(state.anchors.slice(0,idx)),[value],_toConsumableArray(state.anchors.slice(idx+1)))}})});_defineProperty(_this,"update",function(){_this.props.selectedObject.updateMatrixWorld();_this.props.transformControls.getHelper().updateMatrixWorld();_this.updateStateFromObject();_this.props.sceneContext.scene.notifyChange()});_this.el=document.createElement("div");_this.props.sceneContext.scene.viewport.parentElement.appendChild(_this.el);return _this}_inherits(NumericInput3D,_React$Component);return _createClass(NumericInput3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.transformControls.addEventListener("objectChange",this.updateStateFromObject);this.updateStateFromObject()}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.selectedObject!==prevProps.selectedObject){this.updateStateFromObject()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.props.sceneContext.scene.viewport.parentElement.removeChild(this.el);this.props.transformControls.removeEventListener("objectChange",this.updateStateFromObject)}},{key:"render",value:function render(){var _this2=this;var pos=this.state.pos;var rot=this.state.rot;var scale=this.state.scale;var size=this.state.size;var disabled=!this.props.selectedObject;var unit=CoordinatesUtils.getUnits(this.props.sceneContext.mapCrs);var hanchors=[{key:"begin",icon:"after"},{key:"center",icon:"middle_h"},{key:"end",icon:"before"}];var vanchors=[{key:"begin",icon:"above"},{key:"center",icon:"middle_v"},{key:"end",icon:"below"}];var contents=/*#__PURE__*/React.createElement(ResizeableWindow,{fitHeight:true,icon:"numericinput",initialWidth:350,initialX:-1,onClose:this.props.toggleNumericInput,scrollable:true,title:LocaleUtils.tr("draw3d.numericinput")},/*#__PURE__*/React.createElement("div",{className:"draw3d-numeric-input-body",role:"body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.position")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(x){return _this2.updatePosition(0,x)},value:pos[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(y){return _this2.updatePosition(1,y)},value:pos[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(z){return _this2.updatePosition(2,z)},value:pos[2]}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.rotation")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(x){return _this2.updateRotation(0,x)},suffix:"\xB0",value:rot[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(y){return _this2.updateRotation(1,y)},suffix:"\xB0",value:rot[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(z){return _this2.updateRotation(2,z)},suffix:"\xB0",value:rot[2]}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.thescale")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(x){return _this2.updateScale(0,x)},value:scale[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(y){return _this2.updateScale(1,y)},value:scale[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(z){return _this2.updateScale(2,z)},value:scale[2]}))),size?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.thesize")," [",unit,"]"),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(x){return _this2.updateSize(0,x)},value:size[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(y){return _this2.updateSize(1,y)},value:size[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(z){return _this2.updateSize(2,z)},value:size[2]}))):null,size?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.anchors[0],buttons:hanchors,onClick:function onClick(x){return _this2.setAnchor(0,x)}})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.anchors[1],buttons:hanchors,onClick:function onClick(y){return _this2.setAnchor(0,y)}})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.anchors[2],buttons:vanchors,onClick:function onClick(z){return _this2.setAnchor(0,z)}}))):null))));return/*#__PURE__*/ReactDOM.createPortal(contents,this.el)}}])}(React.Component);_defineProperty(NumericInput3D,"propTypes",{sceneContext:PropTypes.object,selectedObject:PropTypes.object,toggleNumericInput:PropTypes.func,transformControls:PropTypes.object});export{NumericInput3D as default};
+ */import React from"react";import ReactDOM from"react-dom";import Coordinates from"@giro3d/giro3d/core/geographic/Coordinates";import PropTypes from"prop-types";import{Box3}from"three";import CoordinatesUtils from"../../../utils/CoordinatesUtils";import LocaleUtils from"../../../utils/LocaleUtils";import ResizeableWindow from"../../ResizeableWindow";import ButtonBar from"../../widgets/ButtonBar";import NumberInput from"../../widgets/NumberInput";import"./style/NumericInput3D.css";var NumericInput3D=/*#__PURE__*/function(_React$Component){function NumericInput3D(props){var _this;_classCallCheck(this,NumericInput3D);_this=_callSuper(this,NumericInput3D,[props]);_defineProperty(_this,"state",{pos:[0,0,0],rot:[0,0,0],scale:[1,1,1],size:null,anchors:["center","center","begin"],zMode:"absolute",currentTerrainHeight:0});_defineProperty(_this,"updateStateFromObject",function(){if(_this.props.selectedObject){var _this$props$sceneCont;// Temporarily remove rotation and compute bbox
+var originalRotation=_this.props.selectedObject.rotation.clone();_this.props.selectedObject.rotation.set(0,0,0);_this.props.selectedObject.updateMatrixWorld(true);var bbox=new Box3().setFromObject(_this.props.selectedObject);var size=[bbox.max.x-bbox.min.x,bbox.max.y-bbox.min.y,bbox.max.z-bbox.min.z];_this.props.selectedObject.rotation.copy(originalRotation);_this.props.selectedObject.updateMatrixWorld(true);var pos=_this.props.selectedObject.position.toArray();var terrainHeight=(_this$props$sceneCont=_this.props.sceneContext.getTerrainHeightFromMap([pos[0],pos[1]]))!==null&&_this$props$sceneCont!==void 0?_this$props$sceneCont:0;_this.setState({pos:pos,rot:_this.props.selectedObject.rotation.toArray().slice(0,3).map(function(x){return x/Math.PI*180}),scale:_this.props.selectedObject.scale.toArray(),size:size,currentTerrainHeight:terrainHeight})}else{_this.setState({pos:[0,0,0],rot:[0,0,0],scale:[1,1,1],size:null,currentTerrainHeight:0})}});_defineProperty(_this,"updatePosition",function(idx,value){var _this$props$selectedO;var newPos=_toConsumableArray(_this.state.pos);newPos[idx]=value;(_this$props$selectedO=_this.props.selectedObject.position).set.apply(_this$props$selectedO,_toConsumableArray(newPos));_this.update()});_defineProperty(_this,"updateRotation",function(idx,value){var _this$props$selectedO2;var newRot=_toConsumableArray(_this.state.rot);newRot[idx]=value;(_this$props$selectedO2=_this.props.selectedObject.rotation).set.apply(_this$props$selectedO2,_toConsumableArray(newRot.map(function(x){return x/180*Math.PI})).concat([_this.props.selectedObject.rotation.order]));_this.update()});_defineProperty(_this,"updateScale",function(idx,value){var _this$props$selectedO3;var newScale=_toConsumableArray(_this.state.scale);newScale[idx]=value;(_this$props$selectedO3=_this.props.selectedObject.scale).set.apply(_this$props$selectedO3,_toConsumableArray(newScale));_this.update()});_defineProperty(_this,"updateSize",function(idx,value){var _this$props$selectedO4,_this$props$selectedO5;var scaleDiff=value/_this.state.size[idx];var newScale=_toConsumableArray(_this.state.scale);newScale[idx]=newScale[idx]*scaleDiff;// Offset for anchor
+var newPos=_toConsumableArray(_this.state.pos);if(_this.state.anchors[idx]==="begin"){newPos[idx]+=0.5*(value-_this.state.size[idx])}else if(_this.state.anchors[idx]==="end"){newPos[idx]-=0.5*(value-_this.state.size[idx])}(_this$props$selectedO4=_this.props.selectedObject.scale).set.apply(_this$props$selectedO4,_toConsumableArray(newScale));(_this$props$selectedO5=_this.props.selectedObject.position).set.apply(_this$props$selectedO5,_toConsumableArray(newPos));_this.update()});_defineProperty(_this,"setAnchor",function(idx,value){_this.setState(function(state){return{anchors:[].concat(_toConsumableArray(state.anchors.slice(0,idx)),[value],_toConsumableArray(state.anchors.slice(idx+1)))}})});_defineProperty(_this,"update",function(){_this.props.selectedObject.updateMatrixWorld();_this.props.transformControls.getHelper().updateMatrixWorld();_this.updateStateFromObject();_this.props.sceneContext.scene.notifyChange()});_defineProperty(_this,"elevationChanged",function(_ref){var extent=_ref.extent;var crs=_this.props.sceneContext.mapCrs;var coo=new Coordinates(crs,_this.state.pos[0],_this.state.pos[1]);if(extent.isPointInside(coo)){var _this$props$sceneCont2;var terrainHeight=(_this$props$sceneCont2=_this.props.sceneContext.getTerrainHeightFromMap([_this.state.pos[0],_this.state.pos[1]]))!==null&&_this$props$sceneCont2!==void 0?_this$props$sceneCont2:0;_this.setState(function(state){return{currentTerrainHeight:terrainHeight}})}});_this.el=document.createElement("div");_this.props.sceneContext.scene.viewport.parentElement.appendChild(_this.el);return _this}_inherits(NumericInput3D,_React$Component);return _createClass(NumericInput3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.transformControls.addEventListener("objectChange",this.updateStateFromObject);this.updateStateFromObject();this.props.sceneContext.map.addEventListener("elevation-changed",this.elevationChanged)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.selectedObject!==prevProps.selectedObject){this.updateStateFromObject()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.props.sceneContext.scene.viewport.parentElement.removeChild(this.el);this.props.transformControls.removeEventListener("objectChange",this.updateStateFromObject);this.props.sceneContext.map.removeEventListener("elevation-changed",this.elevationChanged)}},{key:"render",value:function render(){var _this2=this;var pos=this.state.pos;var rot=this.state.rot;var scale=this.state.scale;var size=this.state.size;var disabled=!this.props.selectedObject;var unit=CoordinatesUtils.getUnits(this.props.sceneContext.mapCrs);var hanchors=[{key:"begin",icon:"after"},{key:"center",icon:"middle_h"},{key:"end",icon:"before"}];var zmodes=[{key:"absolute",icon:"above_zero"},{key:"terrain",icon:"above_terr"}];var voffset=(this.state.zMode==="terrain"?this.state.currentTerrainHeight:0)+(size?0.5*size[2]:0);var contents=/*#__PURE__*/React.createElement(ResizeableWindow,{fitHeight:true,icon:"numericinput",initialWidth:350,initialX:-1,onClose:this.props.toggleNumericInput,scrollable:true,title:LocaleUtils.tr("draw3d.numericinput")},/*#__PURE__*/React.createElement("div",{className:"draw3d-numeric-input-body",role:"body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.position")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(x){return _this2.updatePosition(0,x)},value:pos[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(y){return _this2.updatePosition(1,y)},value:pos[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(z){return _this2.updatePosition(2,z+voffset)},value:pos[2]-voffset}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.rotation")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(x){return _this2.updateRotation(0,x)},suffix:"\xB0",value:rot[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(y){return _this2.updateRotation(1,y)},suffix:"\xB0",value:rot[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(z){return _this2.updateRotation(2,z)},suffix:"\xB0",value:rot[2]}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.thescale")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(x){return _this2.updateScale(0,x)},value:scale[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(y){return _this2.updateScale(1,y)},value:scale[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(z){return _this2.updateScale(2,z)},value:scale[2]}))),size?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.thesize")," [",unit,"]"),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(x){return _this2.updateSize(0,x)},value:size[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(y){return _this2.updateSize(1,y)},value:size[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,min:0.1,onChange:function onChange(z){return _this2.updateSize(2,z)},value:size[2]}))):null,size?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.anchors[0],buttons:hanchors,onClick:function onClick(key){return _this2.setAnchor(0,key)}})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.anchors[1],buttons:hanchors,onClick:function onClick(key){return _this2.setAnchor(1,key)}})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.zMode,buttons:zmodes,onClick:function onClick(key){return _this2.setState({zMode:key})}}))):null))));return/*#__PURE__*/ReactDOM.createPortal(contents,this.el)}}])}(React.Component);_defineProperty(NumericInput3D,"propTypes",{sceneContext:PropTypes.object,selectedObject:PropTypes.object,toggleNumericInput:PropTypes.func,transformControls:PropTypes.object});export{NumericInput3D as default};

package/components/map3d/style/MapControls3D.css

@@ -1,18 +1,3 @@
-div.map3d-nav {
-    position: absolute;
-    right: 1em;
-    top: 5.5em;
-    z-index: 1;
-    pointer-events: none;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-div.map3d-nav > div:not(:last-child) {
-    margin-bottom: 0.5em;
-}
-
 div.map3d-nav-pan,
 div.map3d-nav-rotate {
     pointer-events: initial;
@@ -26,6 +11,7 @@ div.map3d-nav-rotate {
     color: var(--map-button-text-color);
     background-color: var(--map-button-bg-color);
     box-shadow: 0px 5px 10px rgba(136, 136, 136, 0.5);
+    margin-bottom: 0.5em;
 }
 
 div.map3d-nav-pan > span,
@@ -50,6 +36,7 @@ div.map3d-nav-zoom {
     cursor: pointer;
     transition: background-color 0.5s, color 0.5s;
     flex-direction: column;
+    margin: 0 1em 0.5em 1em;
 }
 
 div.map3d-nav-zoom > div {
@@ -65,7 +52,6 @@ div.map3d-nav-zoom > div:first-child {
 }
 
 
-
 div.map3d-firstperson-button {
     pointer-events: initial;
     width: 2em;
@@ -80,9 +66,16 @@ div.map3d-firstperson-button {
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.5s, color 0.5s;
+    margin: 0 1em 0.5em 1em;
 }
 
 div.map3d-firstperson-button-active {
     background-color: var(--map-button-text-color);
     color: var(--map-button-bg-color);
+}
+
+div.map3d-nav-spacer {
+    display: inline-block;
+    width: 1em;
+    flex: 1 1 auto;
 }

package/components/map3d/utils/MiscUtils3D.js

@@ -1,4 +1,4 @@
-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 ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _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 ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
  * Copyright 2025 Sourcepole AG
  * All rights reserved.
  *
@@ -9,4 +9,9 @@ var linegeom=new MeshLine;linegeom.setGeometry(new BufferGeometry().setFromPoint
 (_labelObject$element$=labelObject.element.parentNode)===null||_labelObject$element$===void 0||(_labelObject$element$2=_labelObject$element$.removeChild)===null||_labelObject$element$2===void 0||_labelObject$element$2.call(_labelObject$element$,labelObject.element)};sceneObject.addEventListener("removed",labelObject.userData.removeCallback)}else{labelObject.element.textContent=sceneObject.userData.label}}else if(labelObject){sceneObject.removeEventListener("removed",labelObject.userData.removeCallback);sceneContext.scene.view.removeEventListener("view-resized",labelObject.userData.sceneResizeCallback);// Remove leaderline first, as the remove trigger of the CSS2DObject assumes children are CSS2DObjects as well
 labelObject.children[0].removeFromParent();labelObject.removeFromParent()}}export function importGltf(dataOrUrl,name,sceneContext){var options=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};var loader=new GLTFLoader;var processor=function processor(gltf){// GLTF is Y-UP, we need Z-UP
 gltf.scene.rotation.x=Math.PI/2;gltf.scene.updateMatrixWorld(true);var objectId=uuidv4();options=_objectSpread({layertree:true,title:name},options);gltf.scene.traverse(function(c){if(c.geometry){c.castShadow=true;c.receiveShadow=true}updateObjectLabel(c,sceneContext)});// Center group on object
-var bbox=new Box3().setFromObject(gltf.scene);var center=bbox.getCenter(new Vector3);var offset=new Vector3().subVectors(center,gltf.scene.position).applyQuaternion(gltf.scene.quaternion.clone().invert());gltf.scene.children.forEach(function(child){child.position.sub(offset)});gltf.scene.position.copy(center);gltf.scene.updateMatrixWorld(true);sceneContext.addSceneObject(objectId,gltf.scene,options)};if(typeof dataOrUrl==="string"){loader.load(dataOrUrl,processor,function(){},function(err){/* eslint-disable-next-line */console.warn(err)})}else{loader.parse(dataOrUrl,ConfigUtils.getAssetsPath(),processor,function(err){/* eslint-disable-next-line */console.warn(err)})}}
+var bbox=new Box3().setFromObject(gltf.scene);var center=bbox.getCenter(new Vector3);var offset=new Vector3().subVectors(center,gltf.scene.position).applyQuaternion(gltf.scene.quaternion.clone().invert());gltf.scene.children.forEach(function(child){child.position.sub(offset)});gltf.scene.position.copy(center);gltf.scene.updateMatrixWorld(true);sceneContext.addSceneObject(objectId,gltf.scene,options)};if(typeof dataOrUrl==="string"){loader.load(dataOrUrl,processor,function(){},function(err){/* eslint-disable-next-line */console.warn(err)})}else{loader.parse(dataOrUrl,ConfigUtils.getAssetsPath(),processor,function(err){/* eslint-disable-next-line */console.warn(err)})}}export var TileMeshHelper=/*#__PURE__*/function(){function TileMeshHelper(object){_classCallCheck(this,TileMeshHelper);this.object=object;var _object$userData=object.userData,meshFeatures=_object$userData.meshFeatures,structuralMetadata=_object$userData.structuralMetadata;if(meshFeatures&&structuralMetadata){// Get featureId via featureId attribute
+var featureSetIndex=0;// usually 0 unless multiple feature sets
+this.featureSet=meshFeatures.featureIds[featureSetIndex];this.featureIdAttr=object.geometry.getAttribute("_feature_id_".concat(this.featureSet.attribute))}else if("_batchid"in object.geometry.attributes){// Get featureId via batchId attribute
+this.featureSet=null;this.featureIdAttr=object.geometry.getAttribute("_batchid")}else{/* eslint-disable-next-line */console.warn("Cannot determine tile mesh feature index attribute");this.featureIdAttr=null}this.tileObject=object;while(this.tileObject.parent&&!this.tileObject.parent.isTilesGroup){this.tileObject=this.tileObject.parent}}return _createClass(TileMeshHelper,[{key:"isValid",value:function isValid(){return this.featureIdAttr!==null}},{key:"getFeatureId",value:function getFeatureId(face){return this.featureIdAttr?this.featureIdAttr.getX(face.a):null}},{key:"getFeatureIdAttr",value:function getFeatureIdAttr(){return this.featureIdAttr}},{key:"getFeatureIds",value:function getFeatureIds(){var featureIds=new Set;for(var i=0;i<this.featureIdAttr.count;i++){featureIds.add(this.featureIdAttr.getX(i))}return featureIds}},{key:"getFeatureProperties",value:function getFeatureProperties(featureId){if(this.object.userData.structuralMetadata){return this.object.userData.structuralMetadata.getPropertyTableData([this.featureSet.propertyTable],[featureId])[0]}else if(this.tileObject.batchTable){return this.tileObject.batchTable.getDataFromId(featureId)}else{return{}}}},{key:"getTileUserData",value:function getTileUserData(){return this.tileObject.userData}},{key:"forEachFeatureTriangle",value:function forEachFeatureTriangle(featureId,callback){if(!this.featureIdAttr){return}else if(this.object.geometry.index){// For indexed geometries, index attribute contains a sequence of triangle index triplets
+var indices=this.object.geometry.index.array;for(var tri=0;tri<indices.length;tri+=3){var i0=indices[tri];if(this.featureIdAttr.getX(i0)===featureId){var i1=indices[tri+1];var i2=indices[tri+2];callback(i0,i1,i2)}}}else{// For non-index geometries, the id attribute contains a sequence of triangle vertex indices
+for(var _tri=0;_tri<this.featureIdAttr.count;_tri+=3){if(this.featureIdAttr.getX(_tri)===featureId){callback(_tri,_tri+1,_tri+2)}}}}}])}();

package/components/map3d/utils/OrbitControls3D.js

@@ -4,6 +4,7 @@ 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{Vector3}from"three";import{MapControls}from"three/addons/controls/MapControls";import{v4 as uuidv4}from"uuid";var OrbitControls3D=/*#__PURE__*/function(_MapControls){function OrbitControls3D(object){var _this;_classCallCheck(this,OrbitControls3D);_this=_callSuper(this,OrbitControls3D,[object]);_defineProperty(_this,"updateControlsTarget",function(){var _this$sceneContext$ge;var camerapos=_this.object.position;var x=_this.target.x;var y=_this.target.y;var height=(_this$sceneContext$ge=_this.sceneContext.getTerrainHeightFromMap([x,y]))!==null&&_this$sceneContext$ge!==void 0?_this$sceneContext$ge:0;// If camera height is at terrain height, target height should be at terrain height
+ */import{Vector3}from"three";import{MapControls}from"three/addons/controls/MapControls";import{v4 as uuidv4}from"uuid";var OrbitControls3D=/*#__PURE__*/function(_MapControls){function OrbitControls3D(object){var _this;_classCallCheck(this,OrbitControls3D);_this=_callSuper(this,OrbitControls3D,[object]);_defineProperty(_this,"updateControlsTarget",function(){var _this$sceneContext$ge;if(_this.animationId){// Do nothing if animating
+return}var camerapos=_this.object.position;var x=_this.target.x;var y=_this.target.y;var height=(_this$sceneContext$ge=_this.sceneContext.getTerrainHeightFromMap([x,y]))!==null&&_this$sceneContext$ge!==void 0?_this$sceneContext$ge:0;// 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 newHeight=Math.max(0,1-(camerapos.z-height)/height)*height;_this.target.z=newHeight});_defineProperty(_this,"stopAnimations",function(){_this.animationId=null});_this.animationId=null;_this.sceneContext=null;_this.enabled=false;_this.zoomToCursor=true;_this.enableDamping=true;_this.dampingFactor=0.2;_this.keyPanSpeed=10;_this.maxPolarAngle=Math.PI*0.5;return _this}_inherits(OrbitControls3D,_MapControls);return _createClass(OrbitControls3D,[{key:"connect",value:function connect(sceneContext){this.domElement=sceneContext.scene.domElement;this.sceneContext=sceneContext;this.enabled=true;_superPropGet(OrbitControls3D,"connect",this,3)([]);this.listenToKeyEvents(this.domElement);this.domElement.addEventListener("pointerdown",this.stopAnimations);this.domElement.addEventListener("wheel",this.stopAnimations);this.addEventListener("change",this.updateControlsTarget);this.object.near=2;this.sceneContext.scene.view.setControls(this)}},{key:"disconnect",value:function disconnect(){this.animationId=null;_superPropGet(OrbitControls3D,"disconnect",this,3)([]);this.enabled=false;this.sceneContext.scene.view.setControls(null);this.domElement.removeEventListener("pointerdown",this.stopAnimations);this.domElement.removeEventListener("wheel",this.stopAnimations);this.removeEventListener("change",this.updateControlsTarget)}},{key:"setView",value:function setView(camerapos,target){this.object.position.copy(camerapos);this.target.copy(target);this.update()}},{key:"panView",value:function panView(dx,dy){if(dx||dy){this._pan(-dx*10,dy*10);this.update()}}},{key:"tiltView",value:function tiltView(azimuth,polar){if(azimuth){this._rotateLeft(azimuth)}if(polar){this._rotateUp(polar)}if(azimuth||polar){this.update()}}},{key:"zoomView",value:function zoomView(delta){if(delta>0){this._dollyIn(this._getZoomScale(-delta));this.update()}else if(delta<0){this._dollyOut(this._getZoomScale(-delta));this.update()}}},{key:"animateTo",value:function animateTo(camerapos,target,azimuth){var _this2=this;var callback=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;var oldPosition=this.object.position.clone();var oldTarget=this.target.clone();var oldYaw=this.getAzimuthalAngle();var newPosition=camerapos;var newTarget=target;var rotateAngle=-oldYaw+azimuth;while(rotateAngle>Math.PI)rotateAngle-=2*Math.PI;while(rotateAngle<-Math.PI)rotateAngle+=2*Math.PI;var startTime=new Date/1000;var animationId=uuidv4();this.animationId=animationId;this.enableDamping=false;var _animate=function animate(){if(_this2.animationId!==animationId){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;_this2.object.position.copy(currentPosition);_this2.target.copy(currentTarget);_this2.update();if(elapsed<duration){requestAnimationFrame(_animate)}else{_this2.object.position.copy(newPosition);_this2.target.copy(newTarget);_this2.update();_this2._rotateLeft(_this2.getAzimuthalAngle()-azimuth);_this2.update();_this2.enableDamping=true;_this2.animationId=null;callback===null||callback===void 0||callback()}};requestAnimationFrame(_animate)}}])}(MapControls);export{OrbitControls3D as default};