qwc2 2025.4.14 → 2025.4.30

package/components/map3d/Map3D.js

@@ -4,26 +4,28 @@ 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 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{fromUrl}from"geotiff";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{Vector2,CubeTextureLoader,Group,Raycaster,Mesh}from"three";import{GLTFExporter}from"three/addons/exporters/GLTFExporter.js";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import{v4 as uuidv4}from"uuid";import{LayerRole}from"../../actions/layers";import{setCurrentTask}from"../../actions/task";import{BackgroundSwitcher}from"../../plugins/BackgroundSwitcher";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import{registerPermalinkDataStoreHook,unregisterPermalinkDataStoreHook,UrlParams}from"../../utils/PermaLinkUtils";import BottomBar3D from"./BottomBar3D";import Compare3D from"./Compare3D";import Draw3D from"./Draw3D";import ExportObjects3D from"./ExportObjects3D";import HideObjects3D from"./HideObjects3D";import Identify3D from"./Identify3D";import LayerTree3D from"./LayerTree3D";import Map3DLight from"./Map3DLight";import MapControls3D from"./MapControls3D";import MapExport3D from"./MapExport3D";import Measure3D from"./Measure3D";import OverviewMap3D from"./OverviewMap3D";import TopBar3D from"./TopBar3D";import View3DSwitcher from"./View3DSwitcher";import LayerRegistry from"./layers/index";import Tiles3DStyle from"./utils/Tiles3DStyle";import"./style/Map3D.css";var UnloadWrapper=/*#__PURE__*/function(_React$Component){function UnloadWrapper(){var _this;_classCallCheck(this,UnloadWrapper);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,UnloadWrapper,[].concat(args));_defineProperty(_this,"onUnload",function(el){if(!el){_this.props.onUnload(_this.props.sceneId)}});return _this}_inherits(UnloadWrapper,_React$Component);return _createClass(UnloadWrapper,[{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",null,this.props.children,/*#__PURE__*/React.createElement("span",{ref:this.onUnload}))}}])}(React.Component);_defineProperty(UnloadWrapper,"propTypes",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),onUnload:PropTypes.func,sceneId:PropTypes.string});var Map3D=/*#__PURE__*/function(_React$Component2){function Map3D(props){var _this2;_classCallCheck(this,Map3D);_this2=_callSuper(this,Map3D,[props]);_defineProperty(_this2,"state",{sceneContext:_objectSpread(_objectSpread({},Map3D.defaultSceneState),{},{addLayer:function addLayer(layer){},getLayer:function getLayer(layerId){},removeLayer:function removeLayer(layerId){},updateColorLayer:function updateColorLayer(layerId,options){},addSceneObject:function addSceneObject(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{}},getSceneObject:function getSceneObject(objectId){},removeSceneObject:function removeSceneObject(objectId){},updateSceneObject:function updateSceneObject(objectId,options){},getMap:function getMap(){},setViewToExtent:function setViewToExtent(bounds,angle){},getTerrainHeightFromDTM:function getTerrainHeightFromDTM(scenePos){},getTerrainHeightFromMap:function getTerrainHeightFromMap(scenePos){},getSceneIntersection:function getSceneIntersection(x,y){}}),sceneId:null});_defineProperty(_this2,"applyBaseLayer",function(){var baseLayer=_this2.state.sceneContext.baseLayers.find(function(e){return e.visibility===true});_this2.removeLayer("__baselayer");if(!baseLayer){return}var layerCreator=LayerRegistry[baseLayer.type];if(layerCreator!==null&&layerCreator!==void 0&&layerCreator.create3d){var layer3d=layerCreator.create3d(baseLayer,_this2.state.sceneContext.mapCrs);_this2.addLayer("__baselayer",layer3d);_this2.map.insertLayerAfter(layer3d,null)}});_defineProperty(_this2,"setBaseLayer",function(layer,visibility){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{baseLayers:state.sceneContext.baseLayers.map(function(entry){return _objectSpread(_objectSpread({},entry),{},{visibility:entry.name===layer.name?visibility:false})})})}})});_defineProperty(_this2,"collectColorLayers",function(prevColorLayers){return _this2.props.layers.reduce(function(colorLayers,layer){var _prevOptions$visibili,_prevOptions$opacity,_prevOptions$extrusio;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.uuid];colorLayers[layer.uuid]=_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});return colorLayers},{})});_defineProperty(_this2,"applyColorLayerUpdates",function(colorLayers,prevColorLayers){// Add-update new layers
+ */import React from"react";import{connect}from"react-redux";import Instance from"@giro3d/giro3d/core/Instance.js";import Coordinates from"@giro3d/giro3d/core/geographic/Coordinates";import Extent from"@giro3d/giro3d/core/geographic/Extent.js";import ElevationLayer from"@giro3d/giro3d/core/layer/ElevationLayer.js";import FeatureCollection from"@giro3d/giro3d/entities/FeatureCollection.js";import Map from"@giro3d/giro3d/entities/Map.js";import Tiles3D from"@giro3d/giro3d/entities/Tiles3D.js";import Inspector from"@giro3d/giro3d/gui/Inspector.js";import GeoTIFFSource from"@giro3d/giro3d/sources/GeoTIFFSource.js";import axios from"axios";import{fromUrl}from"geotiff";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{Vector2,CubeTextureLoader,Group,Raycaster,Mesh}from"three";import{GLTFExporter}from"three/addons/exporters/GLTFExporter.js";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import{CSS2DObject}from"three/addons/renderers/CSS2DRenderer";import{v4 as uuidv4}from"uuid";import{LayerRole}from"../../actions/layers";import{setCurrentTask}from"../../actions/task";import{BackgroundSwitcher}from"../../plugins/BackgroundSwitcher";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import MiscUtils from"../../utils/MiscUtils";import{registerPermalinkDataStoreHook,unregisterPermalinkDataStoreHook,UrlParams}from"../../utils/PermaLinkUtils";import BottomBar3D from"./BottomBar3D";import Compare3D from"./Compare3D";import Draw3D from"./Draw3D";import ExportObjects3D from"./ExportObjects3D";import HideObjects3D from"./HideObjects3D";import Identify3D from"./Identify3D";import LayerTree3D from"./LayerTree3D";import Map3DLight from"./Map3DLight";import MapControls3D from"./MapControls3D";import MapExport3D from"./MapExport3D";import Measure3D from"./Measure3D";import OverviewMap3D from"./OverviewMap3D";import TopBar3D from"./TopBar3D";import View3DSwitcher from"./View3DSwitcher";import LayerRegistry from"./layers/index";import Tiles3DStyle from"./utils/Tiles3DStyle";import"./style/Map3D.css";var UnloadWrapper=/*#__PURE__*/function(_React$Component){function UnloadWrapper(){var _this;_classCallCheck(this,UnloadWrapper);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,UnloadWrapper,[].concat(args));_defineProperty(_this,"onUnload",function(el){if(!el){_this.props.onUnload(_this.props.sceneId)}});return _this}_inherits(UnloadWrapper,_React$Component);return _createClass(UnloadWrapper,[{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",null,this.props.children,/*#__PURE__*/React.createElement("span",{ref:this.onUnload}))}}])}(React.Component);_defineProperty(UnloadWrapper,"propTypes",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),onUnload:PropTypes.func,sceneId:PropTypes.string});var Map3D=/*#__PURE__*/function(_React$Component2){function Map3D(props){var _this2;_classCallCheck(this,Map3D);_this2=_callSuper(this,Map3D,[props]);_defineProperty(_this2,"state",{sceneContext:_objectSpread(_objectSpread({},Map3D.defaultSceneState),{},{addLayer:function addLayer(layer){},getLayer:function getLayer(layerId){},removeLayer:function removeLayer(layerId){},updateColorLayer:function updateColorLayer(layerId,options){},addSceneObject:function addSceneObject(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{}},getSceneObject:function getSceneObject(objectId){},removeSceneObject:function removeSceneObject(objectId){},updateSceneObject:function updateSceneObject(objectId,options){},updateObjectLabel:function updateObjectLabel(object){},getMap:function getMap(){},setViewToExtent:function setViewToExtent(bounds,angle){},getTerrainHeightFromDTM:function getTerrainHeightFromDTM(scenePos){},getTerrainHeightFromMap:function getTerrainHeightFromMap(scenePos){},getSceneIntersection:function getSceneIntersection(x,y){}}),sceneId:null});_defineProperty(_this2,"applyBaseLayer",function(){var baseLayer=_this2.state.sceneContext.baseLayers.find(function(e){return e.visibility===true});_this2.removeLayer("__baselayer");if(!baseLayer){return}var layerCreator=LayerRegistry[baseLayer.type];if(layerCreator!==null&&layerCreator!==void 0&&layerCreator.create3d){var layer3d=layerCreator.create3d(baseLayer,_this2.state.sceneContext.mapCrs);_this2.addLayer("__baselayer",layer3d);_this2.map.insertLayerAfter(layer3d,null)}});_defineProperty(_this2,"setBaseLayer",function(layer,visibility){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{baseLayers:state.sceneContext.baseLayers.map(function(entry){return _objectSpread(_objectSpread({},entry),{},{visibility:entry.name===layer.name?visibility:false})})})}})});_defineProperty(_this2,"collectColorLayers",function(prevColorLayers){return _this2.props.layers.reduce(function(colorLayers,layer){var _prevOptions$visibili,_prevOptions$opacity,_prevOptions$extrusio;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.uuid];colorLayers[layer.uuid]=_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});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.uuid)}});// 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){_this2.removeExtrudedLayer(options.uuid)}_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.uuid+":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,elevation:function elevation(feature){var coordinates=feature.getGeometry().getCoordinates();while(Array.isArray(coordinates[0])){coordinates=coordinates[0]}return coordinates[2]||_this2.getTerrainHeightFromMap(coordinates)||0},extrusionOffset:function extrusionOffset(){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.traverse(function(mesh){mesh.castShadow=true;mesh.receiveShadow=true});obj.opacity=mapLayer.opacity;obj.visible=mapLayer.visible;obj.updateStyles()});_defineProperty(_this2,"removeExtrudedLayer",function(layerId){var objId=layerId+":extruded";if(_this2.objectMap[objId]){_this2.instance.remove(_this2.objectMap[objId]);delete _this2.objectMap[objId]}_this2.instance.notifyChange()});_defineProperty(_this2,"applySceneObjectUpdates",function(sceneObjects){Object.entries(sceneObjects).forEach(function(_ref5){var _ref6=_slicedToArray(_ref5,2),objectId=_ref6[0],options=_ref6[1];var object=_this2.objectMap[objectId];object.visible=options.visibility&&options.opacity>0;if(object.opacity!==undefined){object.opacity=options.opacity/255}else{object.traverse(function(child){if(child instanceof Mesh){child.material.transparent=options.opacity<255;child.material.opacity=options.opacity/255;child.material.needsUpdate=true}})}_this2.instance.notifyChange(object)})});_defineProperty(_this2,"addLayer",function(layerId,layer){layer.userData.layerId=layerId;_this2.map.addLayer(layer)});_defineProperty(_this2,"getLayer",function(layerId){var _this2$map$getLayers$;return(_this2$map$getLayers$=_this2.map.getLayers(function(l){return l.userData.layerId===layerId})[0])!==null&&_this2$map$getLayers$!==void 0?_this2$map$getLayers$:null});_defineProperty(_this2,"removeLayer",function(layerId){_this2.map.getLayers(function(l){return l.userData.layerId===layerId}).forEach(function(layer){_this2.map.removeLayer(layer,{dispose:true})})});_defineProperty(_this2,"updateColorLayer",function(layerId,options){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_objectSpread(_objectSpread({},state.sceneContext.colorLayers),{},_defineProperty({},layerId,_objectSpread(_objectSpread({},state.sceneContext.colorLayers[layerId]),options)))})}})});_defineProperty(_this2,"addSceneObject",function(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};_this2.sceneObjectGroup.add(object);_this2.objectMap[objectId]=object;_this2.setState(function(state){var objectState=_objectSpread({visibility:true,opacity:255,layertree:false},options);return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,objectState))})}})});_defineProperty(_this2,"getSceneObject",function(objectId){return _this2.objectMap[objectId]});_defineProperty(_this2,"removeSceneObject",function(objectId){if(!_this2.objectMap[objectId]){return}_this2.sceneObjectGroup.remove(_this2.objectMap[objectId]);delete _this2.objectMap[objectId];_this2.setState(function(state){var newSceneObjects=_objectSpread({},state.sceneContext.sceneObjects);delete newSceneObjects[objectId];return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:newSceneObjects})}})});_defineProperty(_this2,"updateSceneObject",function(objectId,options){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,_objectSpread(_objectSpread({},state.sceneContext.sceneObjects[objectId]),options)))})}})});_defineProperty(_this2,"getMap",function(){return _this2.map});_defineProperty(_this2,"setupContainer",function(el){if(el){_this2.container=el;_this2.setupInstance()}});_defineProperty(_this2,"setupInstance",function(){var _this2$props$theme$ma,_this2$props$theme$ma2,_this2$props$theme$ma3,_this2$props$theme$ma6,_this2$props$theme$ma7;if(_this2.instance){_this2.disposeInstance()}var projection=_this2.props.theme.mapCrs;// Setup instance
+Object.entries(prevColorLayers).forEach(function(_ref3){var _ref4=_slicedToArray(_ref3,2),layerId=_ref4[0],options=_ref4[1];if(!(layerId in colorLayers)){if(options.extrusionHeight){_this2.removeExtrudedLayer(options.uuid)}_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.uuid+":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,elevation:function elevation(feature){var coordinates=feature.getGeometry().getCoordinates();while(Array.isArray(coordinates[0])){coordinates=coordinates[0]}return coordinates[2]||_this2.getTerrainHeightFromMap(coordinates)||0},extrusionOffset:function extrusionOffset(){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.traverse(function(mesh){mesh.castShadow=true;mesh.receiveShadow=true});obj.opacity=mapLayer.opacity;obj.visible=mapLayer.visible;obj.updateStyles()});_defineProperty(_this2,"removeExtrudedLayer",function(layerId){var objId=layerId+":extruded";if(_this2.objectMap[objId]){_this2.instance.remove(_this2.objectMap[objId]);delete _this2.objectMap[objId]}_this2.instance.notifyChange()});_defineProperty(_this2,"applySceneObjectUpdates",function(sceneObjects){Object.entries(sceneObjects).forEach(function(_ref5){var _ref6=_slicedToArray(_ref5,2),objectId=_ref6[0],options=_ref6[1];var object=_this2.objectMap[objectId];object.visible=options.visibility&&options.opacity>0;if(object.opacity!==undefined){object.opacity=options.opacity/255}else{object.traverse(function(child){if(child instanceof Mesh){child.material.transparent=options.opacity<255;child.material.opacity=options.opacity/255;child.material.needsUpdate=true}})}_this2.instance.notifyChange(object)})});_defineProperty(_this2,"updateObjectLabel",function(sceneObject){var labelObject=sceneObject.children.find(function(child){return child.isCSS2DObject});if(sceneObject.userData.label){if(!labelObject){var labelEl=document.createElement("span");labelEl.className="map3d-object-label";labelObject=new CSS2DObject(labelEl);labelObject.updateMatrixWorld();sceneObject.add(labelObject);labelObject.userData.removeCallback=function(){// Explicitly remove label DOM element
+labelEl.parentNode.removeChild(labelEl)};sceneObject.addEventListener("removed",labelObject.userData.removeCallback);sceneObject.updateMatrixWorld()}labelObject.element.textContent=sceneObject.userData.label}else if(labelObject){sceneObject.removeEventListener("removed",labelObject.userData.removeCallback);sceneObject.remove(labelObject)}_this2.instance.notifyChange(sceneObject)});_defineProperty(_this2,"addLayer",function(layerId,layer){layer.userData.layerId=layerId;_this2.map.addLayer(layer)});_defineProperty(_this2,"getLayer",function(layerId){var _this2$map$getLayers$;return(_this2$map$getLayers$=_this2.map.getLayers(function(l){return l.userData.layerId===layerId})[0])!==null&&_this2$map$getLayers$!==void 0?_this2$map$getLayers$:null});_defineProperty(_this2,"removeLayer",function(layerId){_this2.map.getLayers(function(l){return l.userData.layerId===layerId}).forEach(function(layer){_this2.map.removeLayer(layer,{dispose:true})})});_defineProperty(_this2,"updateColorLayer",function(layerId,options){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_objectSpread(_objectSpread({},state.sceneContext.colorLayers),{},_defineProperty({},layerId,_objectSpread(_objectSpread({},state.sceneContext.colorLayers[layerId]),options)))})}})});_defineProperty(_this2,"addSceneObject",function(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};_this2.sceneObjectGroup.add(object);_this2.objectMap[objectId]=object;_this2.setState(function(state){var objectState=_objectSpread({visibility:true,opacity:255,layertree:false},options);return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,objectState))})}})});_defineProperty(_this2,"getSceneObject",function(objectId){return _this2.objectMap[objectId]});_defineProperty(_this2,"removeSceneObject",function(objectId){var callback=arguments.length>1&&arguments[1]!==undefined?arguments[1]:undefined;if(!_this2.objectMap[objectId]){return}_this2.objectMap[objectId].traverse(function(child){child.dispatchEvent({type:"removed"})});_this2.sceneObjectGroup.remove(_this2.objectMap[objectId]);delete _this2.objectMap[objectId];_this2.setState(function(state){var newSceneObjects=_objectSpread({},state.sceneContext.sceneObjects);delete newSceneObjects[objectId];return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:newSceneObjects})}},callback)});_defineProperty(_this2,"updateSceneObject",function(objectId,options){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,_objectSpread(_objectSpread({},state.sceneContext.sceneObjects[objectId]),options)))})}})});_defineProperty(_this2,"getMap",function(){return _this2.map});_defineProperty(_this2,"setupContainer",function(el){if(el){_this2.container=el;_this2.setupInstance()}});_defineProperty(_this2,"setupInstance",function(){var _this2$props$theme$ma,_this2$props$theme$ma2,_this2$props$theme$ma3,_this2$props$theme$ma6,_this2$props$theme$ma7;if(_this2.instance){_this2.disposeInstance()}var projection=_this2.props.theme.mapCrs;// Setup instance
 _this2.instance=new Instance({target:_this2.container,crs:projection,renderer:{clearColor:0,preserveDrawingBuffer:true}});_this2.sceneObjectGroup=new Group;_this2.instance.add(_this2.sceneObjectGroup);// Setup map
 var bounds=CoordinatesUtils.reprojectBbox(_this2.props.theme.initialBbox.bounds,_this2.props.theme.initialBbox.crs,projection);var extent=new Extent(projection,bounds[0],bounds[2],bounds[1],bounds[3]);_this2.map=new Map({extent:extent,backgroundColor:"white"});_this2.instance.add(_this2.map);// Setup camera
 var center=extent.center();_this2.instance.view.camera.position.set(center.x,center.y,0.5*(extent.east-extent.west));// Skybox
 var cubeTextureLoader=new CubeTextureLoader;cubeTextureLoader.setPath(ConfigUtils.getAssetsPath()+"/3d/skybox/");var cubeTexture=cubeTextureLoader.load(["px.jpg","nx.jpg","py.jpg","ny.jpg","pz.jpg","nz.jpg"]);_this2.instance.scene.background=cubeTexture;// Setup elevation
-var demUrl=(_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:"";if(demUrl.startsWith(":")){demUrl=location.href.split("?")[0]+ConfigUtils.getAssetsPath()+demUrl.substr(1)}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 demUrl=MiscUtils.resolveAssetsPath((_this2$props$theme$ma=(_this2$props$theme$ma2=_this2.props.theme.map3d)===null||_this2$props$theme$ma2===void 0||(_this2$props$theme$ma2=_this2$props$theme$ma2.dtm)===null||_this2$props$theme$ma2===void 0?void 0:_this2$props$theme$ma2.url)!==null&&_this2$props$theme$ma!==void 0?_this2$props$theme$ma:"");var demCrs=((_this2$props$theme$ma3=_this2.props.theme.map3d)===null||_this2$props$theme$ma3===void 0||(_this2$props$theme$ma3=_this2$props$theme$ma3.dtm)===null||_this2$props$theme$ma3===void 0?void 0:_this2$props$theme$ma3.crs)||"EPSG:3857";if(demUrl){var _this2$props$theme$ma4,_this2$props$theme$ma5;var demSource=new GeoTIFFSource({url:demUrl,crs:demCrs});var demMin=(_this2$props$theme$ma4=_this2.props.theme.map3d.dtm.min)!==null&&_this2$props$theme$ma4!==void 0?_this2$props$theme$ma4:undefined;var demMax=(_this2$props$theme$ma5=_this2.props.theme.map3d.dtm.max)!==null&&_this2$props$theme$ma5!==void 0?_this2$props$theme$ma5:undefined;var elevationLayer=new ElevationLayer({name:"dem",extent:extent,source:demSource,minmax:demMin!==undefined&&demMax!==undefined?{demMin:demMin,demMax:demMax}:undefined});_this2.addLayer("__dtm",elevationLayer)}// Collect baselayers
 var visibleBaseLayer=null;var baseLayers=(((_this2$props$theme$ma6=_this2.props.theme.map3d)===null||_this2$props$theme$ma6===void 0?void 0:_this2$props$theme$ma6.basemaps)||[]).map(function(e){var baseLayer=_objectSpread(_objectSpread({},_this2.props.layers.find(function(bl){return bl.name===e.name})),{},{visibility:e.visibility===true});if(baseLayer.visibility){visibleBaseLayer=baseLayer}return baseLayer});if(visibleBaseLayer){_this2.setBaseLayer(visibleBaseLayer,true)}// Collect color layers
 var colorLayers=_this2.collectColorLayers([]);// Add 3d tiles
-_this2.objectMap={};var sceneObjects={};(((_this2$props$theme$ma7=_this2.props.theme.map3d)===null||_this2$props$theme$ma7===void 0?void 0:_this2$props$theme$ma7.tiles3d)||[]).forEach(function(entry){var _entry$title;var tilesUrl=entry.url;if(tilesUrl.startsWith(":")){tilesUrl=location.href.split("?")[0]+ConfigUtils.getAssetsPath()+tilesUrl.substr(1)}var tiles=new Tiles3D({url:tilesUrl});tiles.tiles.addEventListener("load-model",function(_ref7){var scene=_ref7.scene;return Tiles3DStyle.applyDeclarativeStyle(scene,entry)});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}});_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{scene:_this2.instance,map:_this2.map,mapCrs:projection,dtmUrl:demUrl,dtmCrs:demCrs,baseLayers:baseLayers,colorLayers:colorLayers,sceneObjects:sceneObjects}),sceneId:uuidv4()}});// Inspector
-if(["1","true"].includes((UrlParams.getParam("inspector")||"").toLowerCase())){_this2.inspector=new Inspector(_this2.container.previousElementSibling,_this2.instance)}});_defineProperty(_this2,"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
+_this2.objectMap={};var sceneObjects={};(((_this2$props$theme$ma7=_this2.props.theme.map3d)===null||_this2$props$theme$ma7===void 0?void 0:_this2$props$theme$ma7.tiles3d)||[]).forEach(function(entry){if(entry.tilesetStyleUrl){axios.get(MiscUtils.resolveAssetsPath(entry.tilesetStyleUrl)).then(function(response){_this2.add3dTiles(_objectSpread(_objectSpread({},entry),{},{tilesetStyle:response.data}))})["catch"](function(){/* eslint-disable-next-line */console.warn("Failed to load tilset style");_this2.add3dTiles(entry)})}else{// Delay one cycle, to ensure setState below executed
+setTimeout(function(){_this2.add3dTiles(entry)},0)}});_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{scene:_this2.instance,map:_this2.map,mapCrs:projection,dtmUrl:demUrl,dtmCrs:demCrs,baseLayers:baseLayers,colorLayers:colorLayers,sceneObjects:sceneObjects}),sceneId:uuidv4()}});// Inspector
+if(["1","true"].includes((UrlParams.getParam("inspector")||"").toLowerCase())){_this2.inspector=new Inspector(_this2.container.previousElementSibling,_this2.instance)}});_defineProperty(_this2,"add3dTiles",function(entry){var tiles=new Tiles3D({url:MiscUtils.resolveAssetsPath(entry.url),errorTarget:32});tiles.tiles.addEventListener("load-model",function(_ref7){var _entry$idAttr;var scene=_ref7.scene;scene.userData.tilesetName=entry.name;scene.userData.batchIdAttr=(_entry$idAttr=entry.idAttr)!==null&&_entry$idAttr!==void 0?_entry$idAttr:"id";Tiles3DStyle.handleModelLoad(scene,entry)});tiles.tiles.addEventListener("tile-visibility-change",function(_ref8){var scene=_ref8.scene,visible=_ref8.visible;Tiles3DStyle.handleTileVisibilityChange(scene,visible)});tiles.castShadow=true;tiles.receiveShadow=true;tiles.userData.layertree=true;_this2.instance.add(tiles);_this2.objectMap[entry.name]=tiles;_this2.setState(function(state){var _entry$title;var objectState={visibility:true,opacity:255,layertree:true,title:(_entry$title=entry.title)!==null&&_entry$title!==void 0?_entry$title:entry.name};return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},entry.name,objectState))})}})});_defineProperty(_this2,"disposeInstance",function(){if(_this2.inspector){_this2.inspector.detach()}_this2.map.dispose({disposeLayers:true});Object.values(_this2.objectMap).forEach(function(object){_this2.instance.remove(object)});_this2.instance.dispose();_this2.inspector=null;_this2.map=null;_this2.objectMap={};_this2.sceneObjectGroup=null;_this2.instance=null;_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),Map3D.defaultSceneState)}});_this2.props.setCurrentTask(null)});_defineProperty(_this2,"onUnload",function(key){// Ensure scene has not already been disposed
 if(_this2.state.sceneId===key){_this2.disposeInstance()}});_defineProperty(_this2,"setupControls",function(instance){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{setViewToExtent:instance===null||instance===void 0?void 0:instance.setViewToExtent})}},_this2.props.onMapInitialized)});_defineProperty(_this2,"getTerrainHeightFromDTM",function(scenePos){var returnArray=true;if(!Array.isArray(scenePos[0])){returnArray=false;scenePos=[scenePos]}var dtmPos=scenePos.map(function(p){return CoordinatesUtils.reproject(p,_this2.state.sceneContext.mapCrs,_this2.state.sceneContext.dtmCrs)});var dtmExt=[Infinity,Infinity,-Infinity,-Infinity];dtmPos.forEach(function(p){dtmExt[0]=Math.min(dtmExt[0],p[0]);dtmExt[1]=Math.min(dtmExt[1],p[1]);dtmExt[2]=Math.max(dtmExt[2],p[0]);dtmExt[3]=Math.max(dtmExt[3],p[1])});return new Promise(function(resolve){fromUrl(_this2.state.sceneContext.dtmUrl).then(function(tiff){tiff.getImage().then(function(image){var _image$fileDirectory=image.fileDirectory,ModelTiepoint=_image$fileDirectory.ModelTiepoint,ModelPixelScale=_image$fileDirectory.ModelPixelScale;// Extract scale and tiepoint values
-var _ref8=[ModelPixelScale[0],ModelPixelScale[1]],scaleX=_ref8[0],scaleY=_ref8[1];var _ref9=[ModelTiepoint[3],ModelTiepoint[4]],tiepointX=_ref9[0],tiepointY=_ref9[1];// Tiepoint world coordinates
+var _ref9=[ModelPixelScale[0],ModelPixelScale[1]],scaleX=_ref9[0],scaleY=_ref9[1];var _ref10=[ModelTiepoint[3],ModelTiepoint[4]],tiepointX=_ref10[0],tiepointY=_ref10[1];// Tiepoint world coordinates
 // Calculate pixel indices (rounded to nearest integers)
 var minPixelX=Math.round((dtmExt[0]-tiepointX)/scaleX);var minPixelY=Math.round((tiepointY-dtmExt[3])/scaleY);// Inverted Y-axis in image
 var maxPixelY=Math.round((tiepointY-dtmExt[1])/scaleY)+1;// Inverted Y-axis in image
 var maxPixelX=Math.round((dtmExt[2]-tiepointX)/scaleX)+1;var width=maxPixelX-minPixelX;var height=maxPixelY-minPixelY;image.readRasters({window:[minPixelX,minPixelY,maxPixelX,maxPixelY]}).then(function(raster){if(!returnArray){resolve(raster[0][0])}else{var h=dtmPos.map(function(p){var x=Math.round((p[0]-dtmExt[0])/(dtmExt[2]-dtmExt[0])*(width-1));var y=Math.round((1-(p[1]-dtmExt[1])/(dtmExt[3]-dtmExt[1]))*(height-1));return raster[0][x+y*width]});resolve(h)}})})})})});_defineProperty(_this2,"getTerrainHeightFromMap",function(scenePos){var _elevationResult$samp;var coordinates=new Coordinates(_this2.state.sceneContext.mapCrs,scenePos[0],scenePos[1],0);var elevationResult=_this2.state.sceneContext.map.getElevation({coordinates:coordinates});elevationResult.samples.sort(function(a,b){return b.resolution-a.resolution});return(_elevationResult$samp=elevationResult.samples[0])===null||_elevationResult$samp===void 0?void 0:_elevationResult$samp.elevation});_defineProperty(_this2,"getSceneIntersection",function(x,y){var objects=arguments.length>2&&arguments[2]!==undefined?arguments[2]:true;var raycaster=new Raycaster;var camera=_this2.instance.view.camera;raycaster.setFromCamera(new Vector2(x,y),camera);// Query object intersection
-var intersectionObjects=objects?Object.entries(_this2.state.sceneContext.sceneObjects).map(function(_ref10){var _ref11=_slicedToArray(_ref10,2),objId=_ref11[0],options=_ref11[1];if(options.layertree&&options.visibility){var _obj$tiles$group,_obj$tiles;var obj=_this2.objectMap[objId];return(_obj$tiles$group=(_obj$tiles=obj.tiles)===null||_obj$tiles===void 0?void 0:_obj$tiles.group)!==null&&_obj$tiles$group!==void 0?_obj$tiles$group:obj}return null}).filter(Boolean):null;var objInter=objects?raycaster.intersectObjects(intersectionObjects,true)[0]:undefined;// Query highest resolution terrain tile (i.e. tile with no children)
+var intersectionObjects=objects?Object.entries(_this2.state.sceneContext.sceneObjects).map(function(_ref11){var _ref12=_slicedToArray(_ref11,2),objId=_ref12[0],options=_ref12[1];if(options.layertree&&options.visibility){var _obj$tiles$group,_obj$tiles;var obj=_this2.objectMap[objId];return(_obj$tiles$group=(_obj$tiles=obj.tiles)===null||_obj$tiles===void 0?void 0:_obj$tiles.group)!==null&&_obj$tiles$group!==void 0?_obj$tiles$group:obj}return null}).filter(Boolean):null;var objInter=objects?raycaster.intersectObjects(intersectionObjects,true)[0]:undefined;// Query highest resolution terrain tile (i.e. tile with no children)
 var terrInter=raycaster.intersectObjects([_this2.map.object3d]).filter(function(result){return result.object.children.length===0})[0];// Return closest result
-if(objInter&&terrInter){return objInter.distance<terrInter.distance?objInter:terrInter}return objInter!==null&&objInter!==void 0?objInter:terrInter});_defineProperty(_this2,"redrawScene",function(ev){var width=ev.target.innerWidth;var height=ev.target.innerHeight;_this2.instance.renderer.setSize(width,height);_this2.instance.view.camera.aspect=width/height;_this2.instance.view.camera.updateProjectionMatrix();_this2.instance.renderer.render(_this2.instance.scene,_this2.instance.view.camera)});_defineProperty(_this2,"setViewToExtent",function(bounds,rotation){_this2.state.sceneContext.setViewToExtent(bounds,rotation)});_defineProperty(_this2,"store3dState",function(){var promises=Object.entries(_this2.state.sceneContext.sceneObjects).map(function(_ref12){var _ref13=_slicedToArray(_ref12,2),objectId=_ref13[0],entry=_ref13[1];if(!entry.layertree){return null}return new Promise(function(resolve){if(entry.drawGroup){var exporter=new GLTFExporter;exporter.parse(_this2.state.sceneContext.getSceneObject(objectId),function(result){resolve({id:objectId,options:entry,data:result})})}else{resolve({id:objectId,options:entry})}})}).filter(Boolean);return new Promise(function(resolve){Promise.all(promises).then(function(objects){var cameraPos=_this2.state.sceneContext.scene.view.camera.position;var target=_this2.state.sceneContext.scene.view.controls.target;var layers=Object.entries(_this2.state.sceneContext.colorLayers).map(function(_ref14){var _ref15=_slicedToArray(_ref14,2),layerId=_ref15[0],options=_ref15[1];return{id:layerId,options:{visibility:options.visibility,opacity:options.opacity,extrusionHeight:options.extrusionHeight}}});resolve({objects:objects,colorLayers:layers,cameraPos:[cameraPos.x,cameraPos.y,cameraPos.z],center:[target.x,target.y,target.z]})})})});_defineProperty(_this2,"restore3dState",function(data){if(isEmpty(data)){return}(data.objects||[]).forEach(function(item){if(item.data){var loader=new GLTFLoader;loader.parse(item.data,ConfigUtils.getAssetsPath(),function(gltf){gltf.scene.traverse(function(obj){if(obj.isMesh){obj.castShadow=true;obj.receiveShadow=true}});_this2.state.sceneContext.addSceneObject(item.id,gltf.scene,item.options)})}else if(item.id in _this2.state.sceneContext.sceneObjects){_this2.state.sceneContext.updateSceneObject(item.id,item.options)}});(data.colorLayers||[]).forEach(function(item){if(item.id in _this2.state.sceneContext.colorLayers){_this2.state.sceneContext.updateColorLayer(item.id,item.options)}});if(data.cameraPos&&data.center){var cameraPos=_this2.state.sceneContext.scene.view.camera.position;cameraPos.x=data.cameraPos[0];cameraPos.y=data.cameraPos[1];cameraPos.z=data.cameraPos[2];var controlsTarget=_this2.state.sceneContext.scene.view.controls.target;controlsTarget.x=data.center[0];controlsTarget.y=data.center[1];controlsTarget.z=data.center[2]}_this2.state.sceneContext.scene.notifyChange()});_this2.container=null;_this2.inspector=null;_this2.instance=null;_this2.map=null;_this2.sceneObjectGroup=null;_this2.objectMap={};_this2.state.sceneContext.addLayer=_this2.addLayer;_this2.state.sceneContext.getLayer=_this2.getLayer;_this2.state.sceneContext.removeLayer=_this2.removeLayer;_this2.state.sceneContext.updateColorLayer=_this2.updateColorLayer;_this2.state.sceneContext.addSceneObject=_this2.addSceneObject;_this2.state.sceneContext.getSceneObject=_this2.getSceneObject;_this2.state.sceneContext.removeSceneObject=_this2.removeSceneObject;_this2.state.sceneContext.updateSceneObject=_this2.updateSceneObject;_this2.state.sceneContext.getMap=_this2.getMap;_this2.state.sceneContext.getTerrainHeightFromDTM=_this2.getTerrainHeightFromDTM;_this2.state.sceneContext.getTerrainHeightFromMap=_this2.getTerrainHeightFromMap;_this2.state.sceneContext.getSceneIntersection=_this2.getSceneIntersection;registerPermalinkDataStoreHook("map3d",_this2.store3dState);return _this2}_inherits(Map3D,_React$Component2);return _createClass(Map3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.innerRef(this)}},{key:"componentWillUnmount",value:function componentWillUnmount(){unregisterPermalinkDataStoreHook("map3d")}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this3=this;if(this.props.theme!==prevProps.theme){this.setupInstance()}else if(this.props.layers!==prevProps.layers){this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_this3.collectColorLayers(state.sceneContext.colorLayers)})}})}// Update map layers
+if(objInter&&terrInter){return objInter.distance<terrInter.distance?objInter:terrInter}return objInter!==null&&objInter!==void 0?objInter:terrInter});_defineProperty(_this2,"redrawScene",function(ev){var width=ev.target.innerWidth;var height=ev.target.innerHeight;_this2.instance.renderer.setSize(width,height);_this2.instance.view.camera.aspect=width/height;_this2.instance.view.camera.updateProjectionMatrix();_this2.instance.renderer.render(_this2.instance.scene,_this2.instance.view.camera)});_defineProperty(_this2,"setViewToExtent",function(bounds,rotation){_this2.state.sceneContext.setViewToExtent(bounds,rotation)});_defineProperty(_this2,"store3dState",function(){var promises=Object.entries(_this2.state.sceneContext.sceneObjects).map(function(_ref13){var _ref14=_slicedToArray(_ref13,2),objectId=_ref14[0],entry=_ref14[1];if(!entry.layertree){return null}return new Promise(function(resolve){if(entry.drawGroup){var exporter=new GLTFExporter;exporter.parse(_this2.state.sceneContext.getSceneObject(objectId),function(result){resolve({id:objectId,options:entry,data:result})})}else{resolve({id:objectId,options:entry})}})}).filter(Boolean);return new Promise(function(resolve){Promise.all(promises).then(function(objects){var cameraPos=_this2.state.sceneContext.scene.view.camera.position;var target=_this2.state.sceneContext.scene.view.controls.target;var layers=Object.entries(_this2.state.sceneContext.colorLayers).map(function(_ref15){var _ref16=_slicedToArray(_ref15,2),layerId=_ref16[0],options=_ref16[1];return{id:layerId,options:{visibility:options.visibility,opacity:options.opacity,extrusionHeight:options.extrusionHeight}}});resolve({objects:objects,colorLayers:layers,cameraPos:[cameraPos.x,cameraPos.y,cameraPos.z],center:[target.x,target.y,target.z]})})})});_defineProperty(_this2,"restore3dState",function(data){if(isEmpty(data)){return}(data.objects||[]).forEach(function(item){if(item.data){var loader=new GLTFLoader;loader.parse(item.data,ConfigUtils.getAssetsPath(),function(gltf){gltf.scene.traverse(function(obj){if(obj.isMesh){obj.castShadow=true;obj.receiveShadow=true}});_this2.state.sceneContext.addSceneObject(item.id,gltf.scene,item.options)})}else if(item.id in _this2.state.sceneContext.sceneObjects){_this2.state.sceneContext.updateSceneObject(item.id,item.options)}});(data.colorLayers||[]).forEach(function(item){if(item.id in _this2.state.sceneContext.colorLayers){_this2.state.sceneContext.updateColorLayer(item.id,item.options)}});if(data.cameraPos&&data.center){var cameraPos=_this2.state.sceneContext.scene.view.camera.position;cameraPos.x=data.cameraPos[0];cameraPos.y=data.cameraPos[1];cameraPos.z=data.cameraPos[2];var controlsTarget=_this2.state.sceneContext.scene.view.controls.target;controlsTarget.x=data.center[0];controlsTarget.y=data.center[1];controlsTarget.z=data.center[2]}_this2.state.sceneContext.scene.notifyChange()});_this2.container=null;_this2.inspector=null;_this2.instance=null;_this2.map=null;_this2.sceneObjectGroup=null;_this2.objectMap={};_this2.state.sceneContext.addLayer=_this2.addLayer;_this2.state.sceneContext.getLayer=_this2.getLayer;_this2.state.sceneContext.removeLayer=_this2.removeLayer;_this2.state.sceneContext.updateColorLayer=_this2.updateColorLayer;_this2.state.sceneContext.addSceneObject=_this2.addSceneObject;_this2.state.sceneContext.getSceneObject=_this2.getSceneObject;_this2.state.sceneContext.removeSceneObject=_this2.removeSceneObject;_this2.state.sceneContext.updateSceneObject=_this2.updateSceneObject;_this2.state.sceneContext.updateObjectLabel=_this2.updateObjectLabel;_this2.state.sceneContext.getMap=_this2.getMap;_this2.state.sceneContext.getTerrainHeightFromDTM=_this2.getTerrainHeightFromDTM;_this2.state.sceneContext.getTerrainHeightFromMap=_this2.getTerrainHeightFromMap;_this2.state.sceneContext.getSceneIntersection=_this2.getSceneIntersection;registerPermalinkDataStoreHook("map3d",_this2.store3dState);return _this2}_inherits(Map3D,_React$Component2);return _createClass(Map3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.innerRef(this)}},{key:"componentWillUnmount",value:function componentWillUnmount(){unregisterPermalinkDataStoreHook("map3d")}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this3=this;if(this.props.theme!==prevProps.theme){this.setupInstance()}else if(this.props.layers!==prevProps.layers){this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_this3.collectColorLayers(state.sceneContext.colorLayers)})}})}// Update map layers
 if(this.state.sceneContext.baseLayers!==prevState.sceneContext.baseLayers){this.applyBaseLayer()}if(this.state.sceneContext.colorLayers!==prevState.sceneContext.colorLayers){this.applyColorLayerUpdates(this.state.sceneContext.colorLayers,prevState.sceneContext.colorLayers)}// Update scene objects
-if(this.state.sceneContext.sceneObjects!==prevState.sceneContext.sceneObjects){this.applySceneObjectUpdates(this.state.sceneContext.sceneObjects)}}},{key:"render",value:function render(){var baseLayer=this.state.sceneContext.baseLayers.find(function(l){return l.visibility===true});var style={marginTop:this.props.mapMargins.top,marginRight:this.props.mapMargins.right,marginBottom:this.props.mapMargins.bottom,marginLeft:this.props.mapMargins.left};return/*#__PURE__*/React.createElement("div",{className:"map3d-body"},/*#__PURE__*/React.createElement("div",{className:"map3d-inspector"}),/*#__PURE__*/React.createElement("div",{className:"map3d-map",onMouseDown:this.stopAnimations,ref:this.setupContainer,style:style}),/*#__PURE__*/React.createElement(View3DSwitcher,{position:2}),this.state.sceneContext.scene?/*#__PURE__*/React.createElement(UnloadWrapper,{key:this.state.sceneId,onUnload:this.onUnload,sceneId:this.state.sceneId},/*#__PURE__*/React.createElement(MapControls3D,{onControlsSet:this.setupControls,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(BackgroundSwitcher,{changeLayerVisibility:this.setBaseLayer,layers:this.state.sceneContext.baseLayers,mapMargins:this.props.mapMargins}),/*#__PURE__*/React.createElement(TopBar3D,{options:this.props.options,sceneContext:this.state.sceneContext,searchProviders:this.props.searchProviders}),/*#__PURE__*/React.createElement(LayerTree3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(BottomBar3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(OverviewMap3D,{baseLayer:baseLayer,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Map3DLight,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Measure3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Identify3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Compare3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Draw3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(MapExport3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(ExportObjects3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(HideObjects3D,{sceneContext:this.state.sceneContext})):null)}}])}(React.Component);_defineProperty(Map3D,"propTypes",{innerRef:PropTypes.func,layers:PropTypes.array,mapMargins:PropTypes.object,onMapInitialized:PropTypes.func,options:PropTypes.object,searchProviders:PropTypes.object,setCurrentTask:PropTypes.func,theme:PropTypes.object});_defineProperty(Map3D,"defaultProps",{geometry:{initialWidth:600,initialHeight:800,initialX:0,initialY:0,initiallyDocked:true},options:{searchMinScaleDenom:1000}});_defineProperty(Map3D,"defaultSceneState",{scene:null,map:null,mapCrs:null,dtmUrl:null,dtmCrs:null,baseLayers:[],colorLayers:{},sceneObjects:{}});export default connect(function(state){return{mapMargins:state.windows.mapMargins,theme:state.theme.current,layers:state.layers.flat}},{setCurrentTask:setCurrentTask})(Map3D);
+if(this.state.sceneContext.sceneObjects!==prevState.sceneContext.sceneObjects){this.applySceneObjectUpdates(this.state.sceneContext.sceneObjects)}}},{key:"render",value:function render(){var baseLayer=this.state.sceneContext.baseLayers.find(function(l){return l.visibility===true});var style={marginTop:this.props.mapMargins.top,marginRight:this.props.mapMargins.right,marginBottom:this.props.mapMargins.bottom,marginLeft:this.props.mapMargins.left};return/*#__PURE__*/React.createElement("div",{className:"map3d-body"},/*#__PURE__*/React.createElement("div",{className:"map3d-inspector"}),/*#__PURE__*/React.createElement("div",{className:"map3d-map",onMouseDown:this.stopAnimations,ref:this.setupContainer,style:style}),/*#__PURE__*/React.createElement(View3DSwitcher,{position:2}),this.state.sceneContext.scene?/*#__PURE__*/React.createElement(UnloadWrapper,{key:this.state.sceneId,onUnload:this.onUnload,sceneId:this.state.sceneId},/*#__PURE__*/React.createElement(MapControls3D,{onControlsSet:this.setupControls,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(BackgroundSwitcher,{changeLayerVisibility:this.setBaseLayer,layers:this.state.sceneContext.baseLayers,mapMargins:this.props.mapMargins}),/*#__PURE__*/React.createElement(TopBar3D,{options:this.props.options,sceneContext:this.state.sceneContext,searchProviders:this.props.searchProviders}),/*#__PURE__*/React.createElement(LayerTree3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(BottomBar3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(OverviewMap3D,{baseLayer:baseLayer,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Map3DLight,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Measure3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Identify3D,{sceneContext:this.state.sceneContext,tileInfoServiceUrl:this.props.options.tileInfoServiceUrl}),/*#__PURE__*/React.createElement(Compare3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Draw3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(MapExport3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(ExportObjects3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(HideObjects3D,{sceneContext:this.state.sceneContext})):null)}}])}(React.Component);_defineProperty(Map3D,"propTypes",{innerRef:PropTypes.func,layers:PropTypes.array,mapMargins:PropTypes.object,onMapInitialized:PropTypes.func,options:PropTypes.object,searchProviders:PropTypes.object,setCurrentTask:PropTypes.func,theme:PropTypes.object});_defineProperty(Map3D,"defaultProps",{geometry:{initialWidth:600,initialHeight:800,initialX:0,initialY:0,initiallyDocked:true},options:{searchMinScaleDenom:1000}});_defineProperty(Map3D,"defaultSceneState",{scene:null,map:null,mapCrs:null,dtmUrl:null,dtmCrs:null,baseLayers:[],colorLayers:{},sceneObjects:{}});export default connect(function(state){return{mapMargins:state.windows.mapMargins,theme:state.theme.current,layers:state.layers.flat}},{setCurrentTask:setCurrentTask})(Map3D);

package/components/map3d/MapExport3D.js

@@ -4,7 +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 React from"react";import{connect}from"react-redux";import axios from"axios";import FileSaver from"file-saver";import formDataEntries from"formdata-json";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import utif from"utif";import{setCurrentTask}from"../../actions/task";import LocaleUtils from"../../utils/LocaleUtils";import MiscUtils from"../../utils/MiscUtils";import Icon from"../Icon";import SideBar from"../SideBar";import Spinner from"../widgets/Spinner";import"./../../plugins/style/MapExport.css";import"./style/MapExport3D.css";var MapExport3D=/*#__PURE__*/function(_React$Component){function MapExport3D(){var _this;_classCallCheck(this,MapExport3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapExport3D,[].concat(args));_defineProperty(_this,"state",{minimized:false,selectedFormat:"image/jpeg",layout:"",x:0,y:0,width:0,height:0,exporting:false});_defineProperty(_this,"onShow",function(){var _this$props$theme;if(!isEmpty((_this$props$theme=_this.props.theme)===null||_this$props$theme===void 0?void 0:_this$props$theme.print)){var layouts=_this.props.theme.print.filter(function(l){return l.map}).sort(function(a,b){return a.name.localeCompare(b.name,undefined,{numeric:true})});var layout=layouts.find(function(l){return l["default"]})||layouts[0];_this.setState({layout:layout})}});_defineProperty(_this,"formatChanged",function(ev){_this.setState({selectedFormat:ev.target.value})});_defineProperty(_this,"layoutChanged",function(ev){var layout=_this.props.theme.print.find(function(item){return item.name===ev.target.value});_this.setState({layout:layout})});_defineProperty(_this,"renderBody",function(){var _this$state$layout,_this$state$layout2,_this$state$layout3;var formatMap={"image/jpeg":"JPEG","image/png":"PNG","image/tiff":"TIFF","application/pdf":"PDF"};var layouts=_this.props.theme.print.filter(function(l){return l.map}).sort(function(a,b){return a.name.localeCompare(b.name,undefined,{numeric:true})});var exportDisabled=_this.state.exporting||_this.state.width===0||_this.state.selectedFormat==="application/pdf"&&!_this.state.layout;var mapName=((_this$state$layout=_this.state.layout)===null||_this$state$layout===void 0||(_this$state$layout=_this$state$layout.map)===null||_this$state$layout===void 0?void 0:_this$state$layout.name)||"";return/*#__PURE__*/React.createElement("div",{className:"mapexport-body"},/*#__PURE__*/React.createElement("form",{onSubmit:_this["export"]},/*#__PURE__*/React.createElement("table",{className:"options-table"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.format")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{name:"FORMAT",onChange:_this.formatChanged,value:_this.state.selectedFormat},Object.entries(formatMap).map(function(_ref){var _ref2=_slicedToArray(_ref,2),format=_ref2[0],label=_ref2[1];return/*#__PURE__*/React.createElement("option",{key:format,value:format},label)})))),_this.state.selectedFormat==="application/pdf"?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("print.layout")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:_this.layoutChanged,value:_this.state.layout.name},layouts.map(function(item){return/*#__PURE__*/React.createElement("option",{key:item.name,value:item.name},item.name.split("/").pop())})))):null,_this.state.selectedFormat==="application/pdf"?(((_this$state$layout2=_this.state.layout)===null||_this$state$layout2===void 0?void 0:_this$state$layout2.labels)||[]).map(function(label){var _this$props$theme$pri;// Omit labels which start with __
+ */import React from"react";import{connect}from"react-redux";import axios from"axios";import FileSaver from"file-saver";import formDataEntries from"formdata-json";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import utif from"utif";import{setCurrentTask}from"../../actions/task";import LocaleUtils from"../../utils/LocaleUtils";import MiscUtils from"../../utils/MiscUtils";import Icon from"../Icon";import SideBar from"../SideBar";import Spinner from"../widgets/Spinner";import"./../../plugins/style/MapExport.css";import"./style/MapExport3D.css";var MapExport3D=/*#__PURE__*/function(_React$Component){function MapExport3D(){var _this;_classCallCheck(this,MapExport3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapExport3D,[].concat(args));_defineProperty(_this,"state",{minimized:false,layouts:[],selectedFormat:"image/jpeg",layout:"",x:0,y:0,width:0,height:0,exporting:false});_defineProperty(_this,"onShow",function(){var _this$props$theme;if(!isEmpty((_this$props$theme=_this.props.theme)===null||_this$props$theme===void 0?void 0:_this$props$theme.print)){var layouts=_this.props.theme.print.filter(function(l){return l.map}).sort(function(a,b){return a.name.split("/").pop().localeCompare(b.name.split("/").pop(),undefined,{numeric:true})});var layout=layouts.find(function(l){return l["default"]})||layouts[0];_this.setState({layouts:layouts,layout:layout})}else{_this.setState({layouts:[],layout:""})}});_defineProperty(_this,"formatChanged",function(ev){_this.setState({selectedFormat:ev.target.value})});_defineProperty(_this,"layoutChanged",function(ev){var layout=_this.props.theme.print.find(function(item){return item.name===ev.target.value});_this.setState({layout:layout})});_defineProperty(_this,"renderBody",function(){var _this$state$layout,_this$state$layout2,_this$state$layout3;var formatMap={"image/jpeg":"JPEG","image/png":"PNG","image/tiff":"TIFF","application/pdf":"PDF"};var exportDisabled=_this.state.exporting||_this.state.width===0||_this.state.selectedFormat==="application/pdf"&&!_this.state.layout;var mapName=((_this$state$layout=_this.state.layout)===null||_this$state$layout===void 0||(_this$state$layout=_this$state$layout.map)===null||_this$state$layout===void 0?void 0:_this$state$layout.name)||"";return/*#__PURE__*/React.createElement("div",{className:"mapexport-body"},/*#__PURE__*/React.createElement("form",{onSubmit:_this["export"]},/*#__PURE__*/React.createElement("table",{className:"options-table"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.format")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{name:"FORMAT",onChange:_this.formatChanged,value:_this.state.selectedFormat},Object.entries(formatMap).map(function(_ref){var _ref2=_slicedToArray(_ref,2),format=_ref2[0],label=_ref2[1];return/*#__PURE__*/React.createElement("option",{key:format,value:format},label)})))),_this.state.selectedFormat==="application/pdf"?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("print.layout")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:_this.layoutChanged,value:_this.state.layout.name},_this.state.layouts.map(function(item){return/*#__PURE__*/React.createElement("option",{key:item.name,value:item.name},item.name.split("/").pop())})))):null,_this.state.selectedFormat==="application/pdf"?(((_this$state$layout2=_this.state.layout)===null||_this$state$layout2===void 0?void 0:_this$state$layout2.labels)||[]).map(function(label){var _this$props$theme$pri;// Omit labels which start with __
 if(label.startsWith("__")){return null}var opts=_objectSpread({rows:1,name:label.toUpperCase()},(_this$props$theme$pri=_this.props.theme.printLabelConfig)===null||_this$props$theme$pri===void 0?void 0:_this$props$theme$pri[label]);return _this.renderPrintLabelField(label,opts)}):null)),_this.state.selectedFormat==="application/pdf"?/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("input",{name:"TEMPLATE",type:"hidden",value:((_this$state$layout3=_this.state.layout)===null||_this$state$layout3===void 0?void 0:_this$state$layout3.name)||""}),/*#__PURE__*/React.createElement("input",{name:"csrf_token",type:"hidden",value:MiscUtils.getCsrfToken()}),/*#__PURE__*/React.createElement("input",{name:mapName+":extent",readOnly:true,type:"hidden",value:"0,0,0,0"}),/*#__PURE__*/React.createElement("input",{name:"SERVICE",readOnly:true,type:"hidden",value:"WMS"}),/*#__PURE__*/React.createElement("input",{name:"VERSION",readOnly:true,type:"hidden",value:_this.props.theme.version}),/*#__PURE__*/React.createElement("input",{name:"REQUEST",readOnly:true,type:"hidden",value:"GetPrint"}),/*#__PURE__*/React.createElement("input",{name:"TRANSPARENT",readOnly:true,type:"hidden",value:"true"}),/*#__PURE__*/React.createElement("input",{name:"SRS",readOnly:true,type:"hidden",value:_this.props.theme.mapCrs}),/*#__PURE__*/React.createElement("input",{name:"LAYERS",readOnly:true,type:"hidden",value:""}),/*#__PURE__*/React.createElement("input",{name:mapName+":LAYERS",readOnly:true,type:"hidden",value:""})):null,/*#__PURE__*/React.createElement("div",{className:"button-bar"},/*#__PURE__*/React.createElement("button",{className:"button",disabled:exportDisabled,type:"submit"},_this.state.exporting?/*#__PURE__*/React.createElement("span",{className:"mapexport-wait"},/*#__PURE__*/React.createElement(Spinner,null)," ",LocaleUtils.tr("mapexport.wait")):LocaleUtils.tr("mapexport.submit")))))});_defineProperty(_this,"renderExportFrame",function(){var boxStyle={left:_this.state.x+"px",top:_this.state.y+"px",width:_this.state.width+"px",height:_this.state.height+"px"};return/*#__PURE__*/React.createElement("div",{className:"mapexport3d-event-container",onPointerDown:_this.startSelection},/*#__PURE__*/React.createElement("div",{className:"mapexport3d-frame",style:boxStyle},/*#__PURE__*/React.createElement("span",{className:"mapexport3d-frame-label"},_this.state.width+" x "+_this.state.height)))});_defineProperty(_this,"startSelection",function(ev){if(ev.shiftKey){var target=ev.currentTarget;var view=ev.view;view.addEventListener("pointerup",function(){target.style.pointerEvents="";view.document.body.style.userSelect=""},{once:true});// Move behind
 target.style.pointerEvents="none";view.document.body.style.userSelect="none";_this.props.sceneContext.scene.domElement.dispatchEvent(new PointerEvent("pointerdown",ev));return}else if(ev.button===0){var rect=ev.currentTarget.getBoundingClientRect();_this.setState({x:Math.round(ev.clientX-rect.left),y:Math.round(ev.clientY-rect.top),width:0,height:0});var constrainRatio=_this.state.selectedFormat==="application/pdf"&&_this.state.layout;var ratio=constrainRatio?_this.state.layout.map.height/_this.state.layout.map.width:null;var onMouseMove=function onMouseMove(event){_this.setState(function(state){var width=Math.round(Math.max(0,Math.round(event.clientX-rect.left)-state.x));var height=constrainRatio?Math.round(width*ratio):Math.round(Math.max(0,Math.round(event.clientY-rect.top)-state.y));return{width:width,height:height}})};ev.view.addEventListener("pointermove",onMouseMove);ev.view.addEventListener("pointerup",function(){ev.view.removeEventListener("pointermove",onMouseMove)},{once:true})}});_defineProperty(_this,"export",function(ev){ev.preventDefault();var form=ev.target;_this.setState({exporting:true});var _this$state=_this.state,x=_this$state.x,y=_this$state.y,width=_this$state.width,height=_this$state.height;if(width>0&&height>0){var data=_this.props.sceneContext.scene.renderer.domElement.toDataURL("image/png");var canvas=document.createElement("canvas");var ctx=canvas.getContext("2d");var img=new Image;img.src=data;img.onload=function(){canvas.width=width;canvas.height=height;ctx.drawImage(img,-x,-y);if(_this.state.selectedFormat==="application/pdf"){canvas.toBlob(function(blob){blob.arrayBuffer().then(function(imgBuffer){return _this.exportToPdf(form,imgBuffer)})},"image/png")}else if(_this.state.selectedFormat==="image/tiff"){var imageData=ctx.getImageData(0,0,width,height);var blob=new Blob([utif.encodeImage(imageData.data,width,height)],{type:"image/tiff"});FileSaver.saveAs(blob,"export."+_this.state.selectedFormat.replace(/.*\//,""));_this.setState({exporting:false})}else{canvas.toBlob(function(blob){FileSaver.saveAs(blob,"export."+_this.state.selectedFormat.replace(/.*\//,""));_this.setState({exporting:false})},_this.state.selectedFormat)}}}});_defineProperty(_this,"renderPrintLabelField",function(label,opts){var defaultValue=opts.defaultValue||"";var autopopulated=false;if(label===_this.props.theme.printLabelForSearchResult){defaultValue=_this.getSearchMarkerLabel();autopopulated=true}else if(label===_this.props.theme.printLabelForAttribution){defaultValue=_this.getAttributionLabel();autopopulated=true}if(autopopulated&&_this.props.hideAutopopulatedFields){return/*#__PURE__*/React.createElement("tr",{key:"label."+label},/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("input",{defaultValue:defaultValue,name:opts.name,type:"hidden"})))}else{if(opts.options){return/*#__PURE__*/React.createElement("tr",{key:"label."+label},/*#__PURE__*/React.createElement("td",null,MiscUtils.capitalizeFirst(label)),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{defaultValue:defaultValue,name:opts.name},opts.options.map(function(value){return/*#__PURE__*/React.createElement("option",{key:value,value:value},value)}))))}else{var style={};if(opts.rows||opts.cols){style.resize="none"}if(opts.cols){style.width="initial"}return/*#__PURE__*/React.createElement("tr",{key:"label."+label},/*#__PURE__*/React.createElement("td",null,MiscUtils.capitalizeFirst(label)),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("textarea",_extends({},opts,{defaultValue:defaultValue,readOnly:autopopulated,style:style}))))}}});_defineProperty(_this,"getSearchMarkerLabel",function(){// TODO
 return""});_defineProperty(_this,"getAttributionLabel",function(){// TODO

package/components/map3d/Measure3D.js

@@ -1,15 +1,17 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
  * Copyright 2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import ColorLayer from"@giro3d/giro3d/core/layer/ColorLayer";import Shape from"@giro3d/giro3d/entities/Shape";import DrawTool,{conditions}from"@giro3d/giro3d/interactions/DrawTool.js";import VectorSource from"@giro3d/giro3d/sources/VectorSource";import ol from"openlayers";import pointInPolygon from"point-in-polygon";import PropTypes from"prop-types";import{CurvePath,LineCurve,Vector2,Vector3}from"three";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import MeasureUtils from"../../utils/MeasureUtils";import TaskBar from"../TaskBar";import ButtonBar from"../widgets/ButtonBar";import CopyButton from"../widgets/CopyButton";import HeightProfile3D from"./HeightProfile3D";import"../../plugins/style/Measure.css";var Measure3D=/*#__PURE__*/function(_React$Component){function Measure3D(props){var _this;_classCallCheck(this,Measure3D);_this=_callSuper(this,Measure3D,[props]);_defineProperty(_this,"state",{mode:null,result:null,lenUnit:"metric",areaUnit:"metric",elevUnit:"absolute"});_defineProperty(_this,"onShow",function(mode){_this.setState({mode:mode!==null&&mode!==void 0?mode:"Point"});_this.abortController=new AbortController;_this.measureTool=new DrawTool({instance:_this.props.sceneContext.scene});_this.drawLayer=new ColorLayer({source:new VectorSource({data:[],format:new ol.format.GeoJSON,style:_this.featureStyleFunction})});_this.props.sceneContext.map.addLayer(_this.drawLayer)});_defineProperty(_this,"onHide",function(){_this.clearResult();_this.setState({mode:null});_this.abortController.abort();_this.abortController=null;_this.measureTool.dispose();_this.measureTool=null;_this.props.sceneContext.map.removeLayer(_this.drawLayer,{dispose:true});_this.drawLayer=null});_defineProperty(_this,"renderModeSwitcher",function(){var buttons=[{key:"Point",label:LocaleUtils.tr("measureComponent.pointLabel")},{key:"LineString",label:LocaleUtils.tr("measureComponent.lengthLabel")},{key:"Polygon",label:LocaleUtils.tr("measureComponent.areaLabel")}];return/*#__PURE__*/React.createElement(ButtonBar,{active:_this.state.mode,buttons:buttons,onClick:function onClick(mode){return _this.setState({mode:mode,result:null})}})});_defineProperty(_this,"renderResult",function(){if(!_this.state.result){return null}var text="";var unitSelector=null;if(_this.state.mode==="Point"){text=CoordinatesUtils.getFormattedCoordinate(_this.state.result.pos.slice(0,2),_this.props.sceneContext.mapCrs);var prec=ConfigUtils.getConfigProp("measurementPrecision");text+=", "+(_this.state.result.ground>0&&_this.state.elevUnit==="ground"?_this.state.result.ground:_this.state.result.pos[2]).toFixed(prec);if(_this.state.result.ground>0){unitSelector=/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({elevUnit:ev.target.value})},value:_this.state.elevUnit},/*#__PURE__*/React.createElement("option",{value:"ground"},LocaleUtils.tr("measureComponent.ground")),/*#__PURE__*/React.createElement("option",{value:"absolute"},LocaleUtils.tr("measureComponent.absolute")))}else{unitSelector=/*#__PURE__*/React.createElement("span",{className:"measure-unit-label"},LocaleUtils.tr("measureComponent.absolute"))}}else if(_this.state.mode==="LineString"){text=MeasureUtils.formatMeasurement(_this.state.result.length,false,_this.state.lenUnit);unitSelector=/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({lenUnit:ev.target.value})},value:_this.state.lenUnit},/*#__PURE__*/React.createElement("option",{value:"metric"},LocaleUtils.tr("measureComponent.metric")),/*#__PURE__*/React.createElement("option",{value:"imperial"},LocaleUtils.tr("measureComponent.imperial")),/*#__PURE__*/React.createElement("option",{value:"m"},"m"),/*#__PURE__*/React.createElement("option",{value:"km"},"km"),/*#__PURE__*/React.createElement("option",{value:"ft"},"ft"),/*#__PURE__*/React.createElement("option",{value:"mi"},"mi"))}else if(_this.state.mode==="Polygon"){text=MeasureUtils.formatMeasurement(_this.state.result,true,_this.state.areaUnit);unitSelector=/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({areaUnit:ev.target.value})},value:_this.state.areaUnit},/*#__PURE__*/React.createElement("option",{value:"metric"},LocaleUtils.tr("measureComponent.metric")),/*#__PURE__*/React.createElement("option",{value:"imperial"},LocaleUtils.tr("measureComponent.imperial")),/*#__PURE__*/React.createElement("option",{value:"sqm"},"m\xB2"),/*#__PURE__*/React.createElement("option",{value:"ha"},"ha"),/*#__PURE__*/React.createElement("option",{value:"sqkm"},"km\xB2"),/*#__PURE__*/React.createElement("option",{value:"sqft"},"ft\xB2"),/*#__PURE__*/React.createElement("option",{value:"acre"},"acre"),/*#__PURE__*/React.createElement("option",{value:"sqmi"},"mi\xB2"))}return/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("input",{className:"measure-result",readOnly:true,type:"text",value:text}),unitSelector,/*#__PURE__*/React.createElement(CopyButton,{text:text}))});_defineProperty(_this,"featureStyleFunction",function(){return[new ol.style.Style({fill:new ol.style.Fill({color:[41,120,180,0.5]})}),new ol.style.Style({stroke:new ol.style.Stroke({color:[255,255,255],width:4})}),new ol.style.Style({stroke:new ol.style.Stroke({color:[41,120,180],width:1.5})})]});_defineProperty(_this,"clearResult",function(){_this.drawLayer.source.clear();_this.measurementObjects.forEach(function(object){_this.props.sceneContext.scene.remove(object)});_this.measurementObjects=[];_this.setState({result:null})});_defineProperty(_this,"restart",function(){if(_this.abortController){_this.abortController.abort()}_this.abortController=new AbortController;var pick=_this.state.mode==="Point"?null// default pick
-:function(e){return _this.props.sceneContext.scene.pickObjectsAt(e,{sortByDistance:true,where:[_this.props.sceneContext.getMap()]})};var options={signal:_this.abortController.signal,endCondition:conditions.doubleClick,pick:pick};if(_this.state.mode==="Point"){_this.measureTool.createPoint(options).then(_this.measurePoint)["catch"](function(){})}else if(_this.state.mode==="LineString"){_this.measureTool.createLineString(options).then(_this.measureLine)["catch"](function(){})}else if(_this.state.mode==="Polygon"){_this.measureTool.createPolygon(options).then(_this.measureArea)["catch"](function(){})}else if(_this.state.mode==="Height"){_this.measureTool.createVerticalMeasure(options).then(_this.measureHeight)["catch"](function(){})}});_defineProperty(_this,"measurePoint",function(point){if(point===null){_this.restart();return}_this.clearResult();var pos=point.points[0];// Measure point above terrain
-_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(elevation){var ground=pos.z-elevation>0.3?pos.z-elevation:0;var elevationLabelFormatter=function elevationLabelFormatter(options){if(options.index===0){return MeasureUtils.formatMeasurement(elevation,false,LocaleUtils.tr("measureComponent.absolute"))}else if(ground>0&&_this.state.elevUnit==="ground"){return MeasureUtils.formatMeasurement(pos.z-elevation,false,LocaleUtils.tr("measureComponent.ground"))}else{return MeasureUtils.formatMeasurement(pos.z,false,LocaleUtils.tr("measureComponent.absolute"))}};var shape=null;if(ground>0){// Add line
+ */import React from"react";import ColorLayer from"@giro3d/giro3d/core/layer/ColorLayer";import Shape from"@giro3d/giro3d/entities/Shape";import DrawTool,{conditions}from"@giro3d/giro3d/interactions/DrawTool.js";import VectorSource from"@giro3d/giro3d/sources/VectorSource";import ol from"openlayers";import pointInPolygon from"point-in-polygon";import PropTypes from"prop-types";import{CurvePath,LineCurve,Vector2,Vector3}from"three";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import MeasureUtils from"../../utils/MeasureUtils";import TaskBar from"../TaskBar";import ButtonBar from"../widgets/ButtonBar";import CopyButton from"../widgets/CopyButton";import HeightProfile3D from"./HeightProfile3D";import"../../plugins/style/Measure.css";var Measure3D=/*#__PURE__*/function(_React$Component){function Measure3D(props){var _this;_classCallCheck(this,Measure3D);_this=_callSuper(this,Measure3D,[props]);_defineProperty(_this,"state",{mode:null,result:null,lenUnit:"metric",areaUnit:"metric",elevUnit:"absolute"});_defineProperty(_this,"onShow",function(mode){_this.setState({mode:mode!==null&&mode!==void 0?mode:"Point"});_this.abortController=new AbortController;_this.measureTool=new DrawTool({instance:_this.props.sceneContext.scene});_this.drawLayer=new ColorLayer({source:new VectorSource({data:[],format:new ol.format.GeoJSON,style:_this.featureStyleFunction})});_this.props.sceneContext.map.addLayer(_this.drawLayer)});_defineProperty(_this,"onHide",function(){_this.clearResult();_this.setState({mode:null});_this.abortController.abort();_this.abortController=null;_this.measureTool.dispose();_this.measureTool=null;_this.props.sceneContext.map.removeLayer(_this.drawLayer,{dispose:true});_this.drawLayer=null});_defineProperty(_this,"renderModeSwitcher",function(){var buttons=[{key:"Point",label:LocaleUtils.tr("measureComponent.pointLabel")},{key:"HeightDiff",label:LocaleUtils.tr("measureComponent.heightDiffLabel")},{key:"LineString",label:LocaleUtils.tr("measureComponent.lengthLabel")},{key:"Polygon",label:LocaleUtils.tr("measureComponent.areaLabel")}];return/*#__PURE__*/React.createElement(ButtonBar,{active:_this.state.mode,buttons:buttons,onClick:function onClick(mode){return _this.setState({mode:mode,result:null})}})});_defineProperty(_this,"renderResult",function(){if(!_this.state.result){return null}var text="";var unitSelector=null;if(_this.state.mode==="Point"){text=CoordinatesUtils.getFormattedCoordinate(_this.state.result.pos.slice(0,2),_this.props.sceneContext.mapCrs);var prec=ConfigUtils.getConfigProp("measurementPrecision");text+=", "+(_this.state.result.ground>0&&_this.state.elevUnit==="ground"?_this.state.result.ground:_this.state.result.pos[2]).toFixed(prec);if(_this.state.result.ground>0){unitSelector=/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({elevUnit:ev.target.value})},value:_this.state.elevUnit},/*#__PURE__*/React.createElement("option",{value:"ground"},LocaleUtils.tr("measureComponent.ground")),/*#__PURE__*/React.createElement("option",{value:"absolute"},LocaleUtils.tr("measureComponent.absolute")))}else{unitSelector=/*#__PURE__*/React.createElement("span",{className:"measure-unit-label"},LocaleUtils.tr("measureComponent.absolute"))}}else if(_this.state.mode==="HeightDiff"){text=(_this.state.result||[]).length===2?MeasureUtils.formatMeasurement(Math.abs(_this.state.result[1].z-_this.state.result[0].z),false,_this.state.lenUnit):"";unitSelector=/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({lenUnit:ev.target.value})},value:_this.state.lenUnit},/*#__PURE__*/React.createElement("option",{value:"metric"},LocaleUtils.tr("measureComponent.metric")),/*#__PURE__*/React.createElement("option",{value:"imperial"},LocaleUtils.tr("measureComponent.imperial")),/*#__PURE__*/React.createElement("option",{value:"m"},"m"),/*#__PURE__*/React.createElement("option",{value:"km"},"km"),/*#__PURE__*/React.createElement("option",{value:"ft"},"ft"),/*#__PURE__*/React.createElement("option",{value:"mi"},"mi"))}else if(_this.state.mode==="LineString"){text=MeasureUtils.formatMeasurement(_this.state.result.length,false,_this.state.lenUnit);unitSelector=/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({lenUnit:ev.target.value})},value:_this.state.lenUnit},/*#__PURE__*/React.createElement("option",{value:"metric"},LocaleUtils.tr("measureComponent.metric")),/*#__PURE__*/React.createElement("option",{value:"imperial"},LocaleUtils.tr("measureComponent.imperial")),/*#__PURE__*/React.createElement("option",{value:"m"},"m"),/*#__PURE__*/React.createElement("option",{value:"km"},"km"),/*#__PURE__*/React.createElement("option",{value:"ft"},"ft"),/*#__PURE__*/React.createElement("option",{value:"mi"},"mi"))}else if(_this.state.mode==="Polygon"){text=MeasureUtils.formatMeasurement(_this.state.result,true,_this.state.areaUnit);unitSelector=/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({areaUnit:ev.target.value})},value:_this.state.areaUnit},/*#__PURE__*/React.createElement("option",{value:"metric"},LocaleUtils.tr("measureComponent.metric")),/*#__PURE__*/React.createElement("option",{value:"imperial"},LocaleUtils.tr("measureComponent.imperial")),/*#__PURE__*/React.createElement("option",{value:"sqm"},"m\xB2"),/*#__PURE__*/React.createElement("option",{value:"ha"},"ha"),/*#__PURE__*/React.createElement("option",{value:"sqkm"},"km\xB2"),/*#__PURE__*/React.createElement("option",{value:"sqft"},"ft\xB2"),/*#__PURE__*/React.createElement("option",{value:"acre"},"acre"),/*#__PURE__*/React.createElement("option",{value:"sqmi"},"mi\xB2"))}return/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("input",{className:"measure-result",readOnly:true,type:"text",value:text}),unitSelector,/*#__PURE__*/React.createElement(CopyButton,{text:text}))});_defineProperty(_this,"featureStyleFunction",function(){return[new ol.style.Style({fill:new ol.style.Fill({color:[41,120,180,0.5]})}),new ol.style.Style({stroke:new ol.style.Stroke({color:[255,255,255],width:4})}),new ol.style.Style({stroke:new ol.style.Stroke({color:[41,120,180],width:1.5})})]});_defineProperty(_this,"clearResult",function(){_this.drawLayer.source.clear();_this.measurementObjects.forEach(function(object){_this.props.sceneContext.scene.remove(object)});_this.measurementObjects=[];_this.setState({result:null})});_defineProperty(_this,"restart",function(){if(_this.abortController){_this.abortController.abort()}_this.abortController=new AbortController;var terrainPick=function terrainPick(e){return _this.props.sceneContext.scene.pickObjectsAt(e,{sortByDistance:true,where:[_this.props.sceneContext.getMap()]})};var options={signal:_this.abortController.signal,endCondition:conditions.doubleClick,pick:null// default pick
+};if(_this.state.mode==="Point"){_this.measureTool.createPoint(options).then(_this.measurePoint)["catch"](function(){})}else if(_this.state.mode==="LineString"){options.pick=terrainPick;_this.measureTool.createLineString(options).then(_this.measureLine)["catch"](function(){})}else if(_this.state.mode==="Polygon"){options.pick=terrainPick;_this.measureTool.createPolygon(options).then(_this.measureArea)["catch"](function(){})}else if(_this.state.mode==="HeightDiff"){_this.measureTool.createPoint(options).then(_this.measureHeightDiff)["catch"](function(){})}});_defineProperty(_this,"measurePoint",function(point){if(point===null){_this.restart();return}_this.clearResult();var pos=point.points[0];// Measure point above terrain
+_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(elevation){var ground=pos.z-elevation>0.3?pos.z-elevation:0;var elevationLabelFormatter=function elevationLabelFormatter(options){if(options.index===0){return MeasureUtils.formatMeasurement(elevation,false,"m")+" "+LocaleUtils.tr("measureComponent.absolute")}else if(ground>0&&_this.state.elevUnit==="ground"){return MeasureUtils.formatMeasurement(pos.z-elevation,false,"m")+" "+LocaleUtils.tr("measureComponent.ground")}else{return MeasureUtils.formatMeasurement(pos.z,false,LocaleUtils.tr("measureComponent.absolute"))}};var shape=null;if(ground>0){// Add line
 shape=new Shape({showVertexLabels:true,showLine:true,showVertices:true,vertexLabelFormatter:elevationLabelFormatter});shape.setPoints([new Vector3(pos.x,pos.y,elevation),pos])}else{// Add point
 shape=new Shape({showVertexLabels:true,showLine:false,showVertices:true,vertexLabelFormatter:elevationLabelFormatter});shape.setPoints([new Vector3(pos.x,pos.y,pos.z)])}_this.props.sceneContext.scene.add(shape);_this.measurementObjects.push(shape);_this.props.sceneContext.scene.remove(point);_this.setState({result:{pos:[pos.x,pos.y,pos.z],ground:ground}});// Setup for next measurement
-_this.restart()})});_defineProperty(_this,"measureLine",function(lineString){if(lineString===null){_this.restart();return}_this.clearResult();var features=new ol.format.GeoJSON().readFeatures(lineString.toGeoJSON(),{dataProjection:"EPSG:4326",featureProjection:_this.props.sceneContext.mapCrs});_this.drawLayer.source.addFeatures(features);_this.props.sceneContext.scene.remove(lineString);// Compute 2d length and nSamples spaced points
+_this.restart()})});_defineProperty(_this,"measureHeightDiff",function(point){if(point===null){_this.restart();return}if((_this.state.result||[]).length>=2){_this.clearResult()}var pos=point.points[0];if((_this.state.result||[]).length===1){// Add line if two points drawn
+var points=[_this.state.result[0],pos];if(points[0].z>points[1].z){points.reverse()}var line=new Shape({showVertexLabels:true,vertexLabelFormatter:function vertexLabelFormatter(options){return options.index===2?MeasureUtils.formatMeasurement(points[1].z-points[0].z,false,_this.state.lenUnit):null},showLine:true});line.setPoints([new Vector3(points[0].x,points[0].y,points[0].z),new Vector3(points[1].x,points[1].y,points[0].z),new Vector3(points[1].x,points[1].y,points[1].z)]);_this.props.sceneContext.scene.add(line);_this.measurementObjects.push(line)}else{// Add first drawn point
+var shape=new Shape({showVertices:true});shape.setPoints([new Vector3(pos.x,pos.y,pos.z)]);_this.props.sceneContext.scene.add(shape);_this.measurementObjects.push(shape)}_this.props.sceneContext.scene.remove(point);_this.setState(function(state){return{result:[].concat(_toConsumableArray(state.result||[]),[{x:pos.x,y:pos.y,z:pos.z}])}});_this.restart()});_defineProperty(_this,"measureLine",function(lineString){if(lineString===null){_this.restart();return}_this.clearResult();var features=new ol.format.GeoJSON().readFeatures(lineString.toGeoJSON(),{dataProjection:"EPSG:4326",featureProjection:_this.props.sceneContext.mapCrs});_this.drawLayer.source.addFeatures(features);_this.props.sceneContext.scene.remove(lineString);// Compute 2d length and nSamples spaced points
 var path=new CurvePath;var len2d=0;for(var i=0;i<lineString.points.length-1;i++){var v0=lineString.points[i];var v1=lineString.points[i+1];var line=new LineCurve(new Vector2(v0.x,v0.y),new Vector2(v1.x,v1.y));path.add(line);len2d+=Math.sqrt((v1.x-v0.x)*(v1.x-v0.x)+(v1.y-v0.y)*(v1.y-v0.y))}var nSamples=Math.min(_this.props.maxSampleCount,Math.round(len2d/_this.props.minMeasureLength));var points=path.getSpacedPoints(nSamples-1).map(function(p){return[p.x,p.y]});_this.props.sceneContext.getTerrainHeightFromDTM(points).then(function(elevations){var line3d=points.map(function(p,i){return[p[0],p[1],elevations[i],0]});var len3d=0;for(var _i=1;_i<nSamples;++_i){var dx=line3d[_i][0]-line3d[_i-1][0];var dy=line3d[_i][1]-line3d[_i-1][1];var dz=line3d[_i][2]-line3d[_i-1][2];len3d+=Math.sqrt(dx*dx+dy*dy+dz*dz);line3d[_i][3]=len3d;// Also store incremental length for height profie
 }_this.setState({result:{length:len3d,profile:line3d}});// Setup for next measurement
 _this.restart()})});_defineProperty(_this,"measureArea",function(polygon){if(polygon===null){_this.restart();return}_this.clearResult();var features=new ol.format.GeoJSON().readFeatures(polygon.toGeoJSON(),{dataProjection:"EPSG:4326",featureProjection:_this.props.sceneContext.mapCrs});_this.drawLayer.source.addFeatures(features);_this.props.sceneContext.scene.remove(polygon);// Compute boundingbox of polygon, divide boundingbox into quads,

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";import"./style/SearchField3D.css";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;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 higlight geometry
+ */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;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 higlight 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):[scenePos[0],scenePos[1],scenePos[0],scenePos[1]];// 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.options.searchMinScaleDenom;var minHeight=sceneRect.height*px2m*_this.props.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
 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-pin-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(1,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(){sceneContext.scene.view.controls.removeEventListener("change",scaleSearchMarker);// The label DOM element is not removed when the searchMarker group is removed from the instance
+var labelEl=document.createElement("span");labelEl.innerText=(_result$label=result.label)!==null&&_result$label!==void 0?_result$label:result.text;labelEl.className="map3d-object-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(){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.removeChild(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",{options:PropTypes.object,sceneContext:PropTypes.object,searchProviders:PropTypes.object});export{SearchField3D as default};

package/components/map3d/drawtool/EditTool3D.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 PropTypes from"prop-types";import{Color,Group,Vector3}from"three";import{TransformControls}from"three/addons/controls/TransformControls";import{CSG}from"three-csg-ts";import LocaleUtils from"../../../utils/LocaleUtils";import Icon from"../../Icon";import ButtonBar from"../../widgets/ButtonBar";import ColorButton from"../../widgets/ColorButton";import NumericInput3D from"./NumericInput3D";var GroupSelection=/*#__PURE__*/function(_Group){function GroupSelection(){var _this;_classCallCheck(this,GroupSelection);_this=_callSuper(this,GroupSelection);_defineProperty(_this,"hasObject",function(object){return _this.children.indexOf(object)>=0});_defineProperty(_this,"addToSelection",function(object){_this.children.forEach(function(child){child.position.add(_this.position)});_this.add(object);object.userData.originalColor=object.material.color.clone();object.material.color.set(16711680);_this.recomputePosition()});_defineProperty(_this,"removeFromSelection",function(object){_this.parent.attach(object);object.material.color.set(object.userData.originalColor);delete object.userData.originalColor;_this.children.forEach(function(child){child.position.add(_this.position)});_this.recomputePosition()});_defineProperty(_this,"dissolve",function(){while(_this.children.length){var object=_this.children.pop();object.material.color.set(object.userData.originalColor);delete object.userData.originalColor;_this.parent.attach(object)}_this.removeFromParent()});_defineProperty(_this,"recomputePosition",function(){if(_this.children.length===0){_this.position.set(0,0,0)}else{var center=new Vector3;_this.children.forEach(function(child){center.add(child.position)});center.divideScalar(_this.children.length);_this.position.copy(center);_this.updateMatrixWorld();_this.children.forEach(function(child){child.position.sub(_this.position);child.updateMatrixWorld()})}});_this.isGroupSelection=true;return _this}_inherits(GroupSelection,_Group);return _createClass(GroupSelection)}(Group);var EditTool3D=/*#__PURE__*/function(_React$Component){function EditTool3D(){var _this2;_classCallCheck(this,EditTool3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this2=_callSuper(this,EditTool3D,[].concat(args));_defineProperty(_this2,"state",{mode:"translate",numericInput:false,selectCount:0,csgBackup:null});_defineProperty(_this2,"selectShapeOnRelease",function(ev){if(ev.button===0&&!_this2.transformControls.dragging){var renderer=_this2.props.sceneContext.scene.renderer;renderer.domElement.addEventListener("pointerup",_this2.selectShape,{once:true});renderer.domElement.addEventListener("pointermove",function(){renderer.domElement.removeEventListener("pointerup",_this2.selectShape)})}});_defineProperty(_this2,"selectShape",function(ev){var rect=ev.target.getBoundingClientRect();var x=(ev.clientX-rect.left)/rect.width*2-1;var y=-((ev.clientY-rect.top)/rect.height)*2+1;var intersection=_this2.props.sceneContext.getSceneIntersection(x,y);if(intersection){// Check if closest (first) intersected object is within the current draw group
+ */import React from"react";import PropTypes from"prop-types";import{Color,Group,Vector3}from"three";import{TransformControls}from"three/addons/controls/TransformControls";import{CSG}from"three-csg-ts";import LocaleUtils from"../../../utils/LocaleUtils";import Icon from"../../Icon";import ButtonBar from"../../widgets/ButtonBar";import ColorButton from"../../widgets/ColorButton";import TextInput from"../../widgets/TextInput";import NumericInput3D from"./NumericInput3D";var GroupSelection=/*#__PURE__*/function(_Group){function GroupSelection(){var _this;_classCallCheck(this,GroupSelection);_this=_callSuper(this,GroupSelection);_defineProperty(_this,"hasObject",function(object){return _this.children.indexOf(object)>=0});_defineProperty(_this,"addToSelection",function(object){_this.children.forEach(function(child){child.position.add(_this.position)});_this.add(object);object.userData.originalColor=object.material.color.clone();object.material.color.set(16711680);_this.recomputePosition()});_defineProperty(_this,"removeFromSelection",function(object){_this.parent.attach(object);object.material.color.set(object.userData.originalColor);delete object.userData.originalColor;_this.children.forEach(function(child){child.position.add(_this.position)});_this.recomputePosition()});_defineProperty(_this,"dissolve",function(){while(_this.children.length){var object=_this.children.pop();object.material.color.set(object.userData.originalColor);delete object.userData.originalColor;_this.parent.attach(object)}_this.removeFromParent()});_defineProperty(_this,"recomputePosition",function(){if(_this.children.length===0){_this.position.set(0,0,0)}else{var center=new Vector3;_this.children.forEach(function(child){center.add(child.position)});center.divideScalar(_this.children.length);_this.position.copy(center);_this.updateMatrixWorld();_this.children.forEach(function(child){child.position.sub(_this.position);child.updateMatrixWorld()})}});_this.isGroupSelection=true;return _this}_inherits(GroupSelection,_Group);return _createClass(GroupSelection)}(Group);var EditTool3D=/*#__PURE__*/function(_React$Component){function EditTool3D(){var _this2;_classCallCheck(this,EditTool3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this2=_callSuper(this,EditTool3D,[].concat(args));_defineProperty(_this2,"state",{mode:"translate",numericInput:false,selectCount:0,csgBackup:null,label:""});_defineProperty(_this2,"selectShapeOnRelease",function(ev){if(ev.button===0&&!_this2.transformControls.dragging){var renderer=_this2.props.sceneContext.scene.renderer;renderer.domElement.addEventListener("pointerup",_this2.selectShape,{once:true});renderer.domElement.addEventListener("pointermove",function(){renderer.domElement.removeEventListener("pointerup",_this2.selectShape)})}});_defineProperty(_this2,"selectShape",function(ev){var rect=ev.target.getBoundingClientRect();var x=(ev.clientX-rect.left)/rect.width*2-1;var y=-((ev.clientY-rect.top)/rect.height)*2+1;var intersection=_this2.props.sceneContext.getSceneIntersection(x,y);if(intersection){// Check if closest (first) intersected object is within the current draw group
 var object=intersection.object;var drawGroup=_this2.props.sceneContext.getSceneObject(_this2.props.drawGroupId);for(var parent=object.parent;parent;parent=parent.parent){if(parent===drawGroup){if(ev.ctrlKey&&_this2.props.selectedObject){_this2.addRemoveFromSelection(object)}else{_this2.dissolveSelectionGroup();_this2.props.objectPicked(object)}return}}}if(!ev.ctrlKey){_this2.dissolveSelectionGroup();_this2.props.objectPicked(null)}});_defineProperty(_this2,"addRemoveFromSelection",function(object){if(_this2.props.selectedObject.isGroupSelection){if(_this2.props.selectedObject.hasObject(object)){_this2.props.selectedObject.removeFromSelection(object)}else{_this2.props.selectedObject.addToSelection(object)}_this2.setState({selectCount:_this2.props.selectedObject.children.length});_this2.updateTransformHelper()}else{var groupSelection=new GroupSelection;object.parent.add(groupSelection);groupSelection.addToSelection(object);if(_this2.props.selectedObject&&_this2.props.selectedObject!==object){groupSelection.addToSelection(_this2.props.selectedObject)}_this2.props.objectPicked(groupSelection)}});_defineProperty(_this2,"dissolveSelectionGroup",function(){var _this2$props$selected;if((_this2$props$selected=_this2.props.selectedObject)!==null&&_this2$props$selected!==void 0&&_this2$props$selected.isGroupSelection){_this2.props.selectedObject.dissolve()}});_defineProperty(_this2,"updateTransformHelper",function(){_this2.transformControls.getHelper().updateMatrixWorld();_this2.props.sceneContext.scene.notifyChange()});_defineProperty(_this2,"toolChanged",function(){var _this2$props$selected2,_this2$props$selected3;(_this2$props$selected2=_this2.props.selectedObject)===null||_this2$props$selected2===void 0||(_this2$props$selected3=_this2$props$selected2.updateMatrixWorld)===null||_this2$props$selected3===void 0||_this2$props$selected3.call(_this2$props$selected2);_this2.transformControls.getHelper().updateMatrixWorld();_this2.props.sceneContext.scene.notifyChange()});_defineProperty(_this2,"onKeyDown",function(ev){if(ev.key==="Escape"){_this2.transformControls.reset()}else if(ev.key==="Control"){_this2.transformControls.enabled=false}});_defineProperty(_this2,"onKeyUp",function(ev){if(ev.key==="Control"){_this2.transformControls.enabled=true}});_defineProperty(_this2,"toggleNumericInput",function(){_this2.setState(function(state){return{numericInput:!state.numericInput}})});_defineProperty(_this2,"applyCsgOperation",function(operation){var result=null;var children=_toConsumableArray(_this2.props.selectedObject.children);if(operation==="union"){result=CSG.union.apply(CSG,_toConsumableArray(children))}else if(operation==="subtract"){result=CSG.subtract.apply(CSG,_toConsumableArray(children))}else if(operation==="intersect"){result=CSG.intersect.apply(CSG,_toConsumableArray(children))}if(result){var parent=_this2.props.selectedObject.parent;result.position.add(_this2.props.selectedObject.position);_this2.props.selectedObject.dissolve();children[0].removeFromParent();children[1].removeFromParent();result.material.color=new Color().lerpColors(children[0].material.color,children[1].material.color,0.5);result.userData.originalChildren=children;parent.attach(result);// Re-center object
-var offset=result.geometry.boundingBox.getCenter(new Vector3);offset.applyQuaternion(result.quaternion);result.position.add(offset);result.geometry.center();_this2.props.objectPicked(result)}});_defineProperty(_this2,"undoCsgOperation",function(){var parent=_this2.props.selectedObject.parent;var children=_this2.state.csgBackup;parent.attach(children[0]);parent.attach(children[1]);_this2.props.selectedObject.removeFromParent();var group=new GroupSelection;group.addToSelection(children[0]);group.addToSelection(children[1]);parent.add(group);_this2.props.objectPicked(group)});_defineProperty(_this2,"clearCsgBackup",function(){_this2.setState({csgBackup:null})});return _this2}_inherits(EditTool3D,_React$Component);return _createClass(EditTool3D,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;var camera=this.props.sceneContext.scene.view.camera;var renderer=this.props.sceneContext.scene.renderer;this.transformControls=new TransformControls(camera,renderer.domElement);this.props.sceneContext.scene.add(this.transformControls.getHelper());this.transformControls.setMode(this.state.mode);this.transformControls.addEventListener("change",this.toolChanged);this.transformControls.addEventListener("mouseUp",this.toolChanged);this.transformControls.addEventListener("mouseUp",this.clearCsgBackup);this.transformControls.addEventListener("dragging-changed",function(event){_this3.props.sceneContext.scene.view.controls.enabled=!event.value});renderer.domElement.addEventListener("pointerdown",this.selectShapeOnRelease);renderer.domElement.addEventListener("keydown",this.onKeyDown);renderer.domElement.addEventListener("keyup",this.onKeyUp);if(this.props.selectedObject){this.transformControls.attach(this.props.selectedObject);this.transformControls.getHelper().updateMatrixWorld();this.props.colorChanged(this.props.selectedObject.material.color.toArray().map(function(c){return c*255}))}this.props.sceneContext.scene.view.controls.addEventListener("change",this.updateTransformHelper);this.props.sceneContext.scene.notifyChange()}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this4=this;if(this.props.selectedObject!==prevProps.selectedObject){if(prevProps.selectedObject){this.transformControls.detach();this.clearCsgBackup()}var selectCount=0;if(this.props.selectedObject){this.transformControls.attach(this.props.selectedObject);if(!this.props.selectedObject.isGroupSelection){selectCount=1;this.props.colorChanged(this.props.selectedObject.material.color.toArray().map(function(c){return c*255}))}else{selectCount=this.props.selectedObject.children.length}if(this.props.selectedObject.userData.originalChildren){this.setState({csgBackup:this.props.selectedObject.userData.originalChildren});delete this.props.selectedObject.userData.originalChildren}}this.transformControls.getHelper().updateMatrixWorld();this.props.sceneContext.scene.notifyChange();this.setState({selectCount:selectCount})}if(this.state.mode!==prevState.mode){this.transformControls.setMode(this.state.mode);this.transformControls.getHelper().updateMatrixWorld();this.props.sceneContext.scene.notifyChange()}if(this.props.color!==prevProps.color&&this.props.selectedObject){if(!this.props.selectedObject.isGroupSelection){var _this$props$selectedO;(_this$props$selectedO=this.props.selectedObject.material.color).setRGB.apply(_this$props$selectedO,_toConsumableArray(this.props.color.map(function(c){return c/255})))}else{this.props.selectedObject.children.forEach(function(child){var _child$userData$origi;(_child$userData$origi=child.userData.originalColor).setRGB.apply(_child$userData$origi,_toConsumableArray(_this4.props.color.map(function(c){return c/255})))})}this.props.sceneContext.scene.notifyChange()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.clearCsgBackup();this.dissolveSelectionGroup();this.transformControls.detach();this.props.sceneContext.scene.remove(this.transformControls.getHelper());this.transformControls.dispose();var domElement=this.props.sceneContext.scene.renderer.domElement;this.props.sceneContext.scene.view.controls.removeEventListener("change",this.updateTransformHelper);domElement.removeEventListener("pointerdown",this.selectShapeOnRelease);domElement.removeEventListener("keydown",this.onKeyDown);this.props.sceneContext.scene.notifyChange()}},{key:"render",value:function render(){var _this5=this;var editButtons=[{key:"translate",label:LocaleUtils.tr("draw3d.translate")},{key:"scale",label:LocaleUtils.tr("draw3d.scale")},{key:"rotate",label:LocaleUtils.tr("draw3d.rotate")}];var extraButtons=[{key:"NumericInput",tooltip:LocaleUtils.tr("draw3d.numericinput"),icon:"numericinput"}];var csgButtons=[{key:"union",label:LocaleUtils.tr("draw3d.union")},{key:"subtract",label:LocaleUtils.tr("draw3d.subtract")},{key:"intersect",label:LocaleUtils.tr("draw3d.intersect")}];return[/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"BasicControls"},/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(Icon,{className:"redlining-control-icon",icon:"pen",size:"large"}),/*#__PURE__*/React.createElement(ColorButton,{alpha:false,color:this.props.color,onColorChanged:this.props.colorChanged})),/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.mode,buttons:editButtons,onClick:function onClick(mode){return _this5.setState({mode:mode})}})),/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.numericInput?"NumericInput":null,buttons:extraButtons,onClick:this.toggleNumericInput})),this.state.numericInput?/*#__PURE__*/React.createElement(NumericInput3D,{sceneContext:this.props.sceneContext,selectedObject:this.props.selectedObject,toggleNumericInput:this.toggleNumericInput,transformControls:this.transformControls}):null),this.state.selectCount===2?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"CSGControls"},/*#__PURE__*/React.createElement(ButtonBar,{buttons:csgButtons,className:"buttonbar-fill",onClick:this.applyCsgOperation})):null,this.state.csgBackup?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"CSGControls"},/*#__PURE__*/React.createElement(ButtonBar,{buttons:[{key:"undo",label:LocaleUtils.tr("draw3d.undoBool")}],className:"buttonbar-fill",onClick:this.undoCsgOperation})):null]}}])}(React.Component);_defineProperty(EditTool3D,"propTypes",{color:PropTypes.array,colorChanged:PropTypes.func,drawGroupId:PropTypes.string,objectPicked:PropTypes.func,sceneContext:PropTypes.object,selectedObject:PropTypes.object});export{EditTool3D as default};
+var offset=result.geometry.boundingBox.getCenter(new Vector3);offset.applyQuaternion(result.quaternion);result.position.add(offset);result.geometry.center();_this2.props.objectPicked(result)}});_defineProperty(_this2,"undoCsgOperation",function(){var parent=_this2.props.selectedObject.parent;var children=_this2.state.csgBackup;parent.attach(children[0]);parent.attach(children[1]);_this2.props.selectedObject.removeFromParent();var group=new GroupSelection;group.addToSelection(children[0]);group.addToSelection(children[1]);parent.add(group);_this2.props.objectPicked(group)});_defineProperty(_this2,"clearCsgBackup",function(){_this2.setState({csgBackup:null})});_defineProperty(_this2,"setLabel",function(text){_this2.setState({label:text});_this2.props.selectedObject.userData.label=text;_this2.props.sceneContext.updateObjectLabel(_this2.props.selectedObject)});return _this2}_inherits(EditTool3D,_React$Component);return _createClass(EditTool3D,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;var camera=this.props.sceneContext.scene.view.camera;var renderer=this.props.sceneContext.scene.renderer;this.transformControls=new TransformControls(camera,renderer.domElement);this.props.sceneContext.scene.add(this.transformControls.getHelper());this.transformControls.setMode(this.state.mode);this.transformControls.addEventListener("change",this.toolChanged);this.transformControls.addEventListener("mouseUp",this.toolChanged);this.transformControls.addEventListener("mouseUp",this.clearCsgBackup);this.transformControls.addEventListener("dragging-changed",function(event){_this3.props.sceneContext.scene.view.controls.enabled=!event.value});renderer.domElement.addEventListener("pointerdown",this.selectShapeOnRelease);renderer.domElement.addEventListener("keydown",this.onKeyDown);renderer.domElement.addEventListener("keyup",this.onKeyUp);if(this.props.selectedObject){var _this$props$selectedO;this.transformControls.attach(this.props.selectedObject);this.transformControls.getHelper().updateMatrixWorld();this.props.colorChanged(this.props.selectedObject.material.color.toArray().map(function(c){return c*255}));this.setState({label:((_this$props$selectedO=this.props.selectedObject.userData)===null||_this$props$selectedO===void 0?void 0:_this$props$selectedO.label)||"",selectCount:1})}this.props.sceneContext.scene.view.controls.addEventListener("change",this.updateTransformHelper);this.props.sceneContext.scene.notifyChange()}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this4=this;if(this.props.selectedObject!==prevProps.selectedObject){if(prevProps.selectedObject){this.transformControls.detach();this.clearCsgBackup()}var selectCount=0;if(this.props.selectedObject){var _this$props$selectedO2;this.transformControls.attach(this.props.selectedObject);if(!this.props.selectedObject.isGroupSelection){selectCount=1;this.props.colorChanged(this.props.selectedObject.material.color.toArray().map(function(c){return c*255}))}else{selectCount=this.props.selectedObject.children.length}if(this.props.selectedObject.userData.originalChildren){this.setState({csgBackup:this.props.selectedObject.userData.originalChildren});delete this.props.selectedObject.userData.originalChildren}this.setState({label:((_this$props$selectedO2=this.props.selectedObject.userData)===null||_this$props$selectedO2===void 0?void 0:_this$props$selectedO2.label)||""})}this.transformControls.getHelper().updateMatrixWorld();this.props.sceneContext.scene.notifyChange();this.setState({selectCount:selectCount})}if(this.state.mode!==prevState.mode){this.transformControls.setMode(this.state.mode);this.transformControls.getHelper().updateMatrixWorld();this.props.sceneContext.scene.notifyChange()}if(this.props.color!==prevProps.color&&this.props.selectedObject){if(!this.props.selectedObject.isGroupSelection){var _this$props$selectedO3;(_this$props$selectedO3=this.props.selectedObject.material.color).setRGB.apply(_this$props$selectedO3,_toConsumableArray(this.props.color.map(function(c){return c/255})))}else{this.props.selectedObject.children.forEach(function(child){var _child$userData$origi;(_child$userData$origi=child.userData.originalColor).setRGB.apply(_child$userData$origi,_toConsumableArray(_this4.props.color.map(function(c){return c/255})))})}this.props.sceneContext.scene.notifyChange()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.clearCsgBackup();this.dissolveSelectionGroup();this.transformControls.detach();this.props.sceneContext.scene.remove(this.transformControls.getHelper());this.transformControls.dispose();var domElement=this.props.sceneContext.scene.renderer.domElement;this.props.sceneContext.scene.view.controls.removeEventListener("change",this.updateTransformHelper);domElement.removeEventListener("pointerdown",this.selectShapeOnRelease);domElement.removeEventListener("keydown",this.onKeyDown);this.props.sceneContext.scene.notifyChange()}},{key:"render",value:function render(){var _this5=this;var editButtons=[{key:"translate",label:LocaleUtils.tr("draw3d.translate")},{key:"scale",label:LocaleUtils.tr("draw3d.scale")},{key:"rotate",label:LocaleUtils.tr("draw3d.rotate")}];var extraButtons=[{key:"NumericInput",tooltip:LocaleUtils.tr("draw3d.numericinput"),icon:"numericinput"}];var csgButtons=[{key:"union",label:LocaleUtils.tr("draw3d.union")},{key:"subtract",label:LocaleUtils.tr("draw3d.subtract")},{key:"intersect",label:LocaleUtils.tr("draw3d.intersect")}];return[/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"BasicControls"},/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(Icon,{className:"redlining-control-icon",icon:"pen",size:"large"}),/*#__PURE__*/React.createElement(ColorButton,{alpha:false,color:this.props.color,onColorChanged:this.props.colorChanged})),/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.mode,buttons:editButtons,onClick:function onClick(mode){return _this5.setState({mode:mode})}})),/*#__PURE__*/React.createElement("span",null,/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.numericInput?"NumericInput":null,buttons:extraButtons,onClick:this.toggleNumericInput})),this.state.numericInput?/*#__PURE__*/React.createElement(NumericInput3D,{sceneContext:this.props.sceneContext,selectedObject:this.props.selectedObject,toggleNumericInput:this.toggleNumericInput,transformControls:this.transformControls}):null),this.state.selectCount===1?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar draw3d-label-controls",key:"Label"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("draw3d.label"),": "),/*#__PURE__*/React.createElement(TextInput,{onChange:this.setLabel,value:this.state.label})):null,this.state.selectCount===2?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"CSGControls"},/*#__PURE__*/React.createElement(ButtonBar,{buttons:csgButtons,className:"buttonbar-fill",onClick:this.applyCsgOperation})):null,this.state.csgBackup?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"CSGControls"},/*#__PURE__*/React.createElement(ButtonBar,{buttons:[{key:"undo",label:LocaleUtils.tr("draw3d.undoBool")}],className:"buttonbar-fill",onClick:this.undoCsgOperation})):null]}}])}(React.Component);_defineProperty(EditTool3D,"propTypes",{color:PropTypes.array,colorChanged:PropTypes.func,drawGroupId:PropTypes.string,objectPicked:PropTypes.func,sceneContext:PropTypes.object,selectedObject:PropTypes.object});export{EditTool3D as default};

package/components/map3d/style/Draw3D.css

@@ -5,3 +5,12 @@ div.draw3d-numeric-input-body {
 div.draw3d-numeric-input-body > table {
     width: 100%;
 }
+
+
+div.draw3d-label-controls {
+    display: flex;
+}
+
+div.draw3d-label-controls > div.TextInput {
+    flex: 1 1 auto;
+}

package/components/map3d/style/Map3D.css

@@ -39,4 +39,14 @@ div.map3d-inspector {
 
 div.map3d-inspector input {
     color: black!important;
+}
+
+span.map3d-object-label {
+    background-color: rgba(41, 120, 180, 0.75);
+    border: 1px solid white;
+    color: white;
+    font-weight: bold;
+    padding: 0.25em 0.5em;
+    border-radius: 8px;
+    margin-top: -2em;
 }

package/components/map3d/utils/Tiles3DStyle.js

@@ -1 +1,11 @@
-function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}import{Float32BufferAttribute}from"three";var Tiles3DStyle={getBatchColor:function getBatchColor(group,batchId){var _group$batchTable$get;var colorAttr=group.userData.batchColorAttr;if(!colorAttr){return 16777215}return(_group$batchTable$get=group.batchTable.getDataFromId(batchId)[colorAttr])!==null&&_group$batchTable$get!==void 0?_group$batchTable$get:16777215},applyDeclarativeStyle:function applyDeclarativeStyle(group,tilesetConfig){group.userData.batchColorAttr=tilesetConfig.colorAttr;var batchColorCache={};var batchColor=function batchColor(batchId){if(!batchColorCache[batchId]){var color=Tiles3DStyle.getBatchColor(group,batchId);var r=(color>>16&255)/255;var g=(color>>8&255)/255;var b=(color&255)/255;batchColorCache[batchId]=[r,g,b]}return batchColorCache[batchId]};group.traverse(function(c){if(c.geometry){if(tilesetConfig.colorAttr){var batchidAttr=c.geometry.getAttribute("_batchid");var colors=[];batchidAttr.array.forEach(function(batchId){colors.push.apply(colors,_toConsumableArray(batchColor(batchId)))});c.geometry.setAttribute("color",new Float32BufferAttribute(colors,3));c.material.vertexColors=true}}})}};export default Tiles3DStyle;
+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 _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 _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}/**
+ * Copyright 2025 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 isEmpty from"lodash.isempty";import parseCssColor from"parse-css-color";import{Float32BufferAttribute,Group,Vector3}from"three";import{CSS2DObject}from"three/addons/renderers/CSS2DRenderer";function createLabelObject(entry){var labelEl=document.createElement("span");labelEl.innerText=entry.label;labelEl.className="map3d-object-label";var label=new CSS2DObject(labelEl);label.position.copy(entry.pos);label.updateMatrixWorld();return label}function batchColor(batchId,batchAttr,config){var _config$tilesetStyle$,_config$tilesetStyle;if(((_config$tilesetStyle$=(_config$tilesetStyle=config.tilesetStyle)===null||_config$tilesetStyle===void 0||(_config$tilesetStyle=_config$tilesetStyle[batchId])===null||_config$tilesetStyle===void 0?void 0:_config$tilesetStyle.color)!==null&&_config$tilesetStyle$!==void 0?_config$tilesetStyle$:null)!==null){var color=parseCssColor(config.tilesetStyle[batchId].color);return[].concat(_toConsumableArray(color.values.map(function(c){return c/255})),[color.alpha])}else if(batchAttr[config.colorAttr]){var _batchAttr$config$alp;var _color=batchAttr[config.colorAttr];var alpha=config.alphaAttr?(_batchAttr$config$alp=batchAttr[config.alphaAttr])!==null&&_batchAttr$config$alp!==void 0?_batchAttr$config$alp:255:255;var r=(_color>>16&255)/255;var g=(_color>>8&255)/255;var b=(_color&255)/255;return[r,g,b,alpha/255]}else{return null}}function batchLabel(batchId,batchAttr,config){var _config$tilesetStyle$2,_config$tilesetStyle2;if(((_config$tilesetStyle$2=(_config$tilesetStyle2=config.tilesetStyle)===null||_config$tilesetStyle2===void 0||(_config$tilesetStyle2=_config$tilesetStyle2[batchId])===null||_config$tilesetStyle2===void 0?void 0:_config$tilesetStyle2.label)!==null&&_config$tilesetStyle$2!==void 0?_config$tilesetStyle$2:null)!==null){return config.tilesetStyle[batchId].label}else if(config.labelAttr){return batchAttr[config.labelAttr]}else{return null}}var Tiles3DStyle={handleModelLoad:function handleModelLoad(group,config){var _config$idAttr;var batchColorCache={};var batchLabelCache={};var labels={};var idAttr=(_config$idAttr=config.idAttr)!==null&&_config$idAttr!==void 0?_config$idAttr:"id";group.traverse(function(c){if(c.geometry){var batchidxAttr=c.geometry.getAttribute("_batchid");var batchPosAttr=c.geometry.getAttribute("position");var rgbaColors=[];var rgbColors=[];var haveColor=false;var haveAlpha=false;batchidxAttr.array.forEach(function(batchIdx,idx){var batchAttr=group.batchTable.getDataFromId(batchIdx);var batchId=String(batchAttr[idAttr]);// Handle color
+var color=batchColorCache[batchIdx];if(color===undefined){color=batchColorCache[batchIdx]=batchColor(batchId,batchAttr,config)}if(color){haveColor=true;haveAlpha|=color[3]<1;rgbaColors.push.apply(rgbaColors,_toConsumableArray(color));rgbColors.push.apply(rgbColors,_toConsumableArray(color.slice(0,3)))}else{rgbaColors.push.apply(rgbaColors,[1,1,1,1]);rgbColors.push.apply(rgbColors,[1,1,1])}// Handle label
+var label=batchLabelCache[batchIdx];if(label===undefined){label=batchLabelCache[batchIdx]=batchLabel(batchId,batchAttr,config)}if(label){var pos=batchPosAttr.array.slice(3*idx,3*idx+3);var entry=labels[batchIdx];if(!entry){entry=labels[batchIdx]={label:label,pos:pos,count:1,matrix:c.matrixWorld}}else{entry.pos[0]+=pos[0];entry.pos[1]+=pos[1];entry.pos[2]=Math.max(entry.pos[2],pos[2]);++entry.count}}});if(haveColor){if(haveAlpha){c.geometry.setAttribute("color",new Float32BufferAttribute(rgbaColors,4))}else{// Discard alpha
+var count=rgbaColors.length/4;var bufAttr=new Float32BufferAttribute(count*3,3);for(var i=0,j=0;i<count;++i){bufAttr.array[j++]=rgbaColors[4*i];bufAttr.array[j++]=rgbaColors[4*i+1];bufAttr.array[j++]=rgbaColors[4*i+2]}c.geometry.setAttribute("color",bufAttr)}c.material.vertexColors=true;c.material.transparent=haveAlpha}}});if(!isEmpty(labels)){var tileLabels={};var labelObjects=new Group;Object.entries(labels).forEach(function(_ref){var _ref2=_slicedToArray(_ref,2),batchId=_ref2[0],entry=_ref2[1];var pos=new Vector3(entry.pos[0]/entry.count,entry.pos[1]/entry.count,entry.pos[2]+10).applyMatrix4(entry.matrix);tileLabels[batchId]={pos:pos,label:entry.label};labelObjects.add(createLabelObject(tileLabels[batchId]))});group.userData.tileLabels=tileLabels;group.add(labelObjects)}},handleTileVisibilityChange:function handleTileVisibilityChange(group,visible){// Re-add labels
+if(visible&&group.userData.tileLabels){var labelObjects=new Group;Object.values(group.userData.tileLabels).forEach(function(entry){labelObjects.add(createLabelObject(entry))});group.add(labelObjects)}}};export default Tiles3DStyle;

package/components/widgets/NumberInput.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 classNames from"classnames";import PropTypes from"prop-types";import Icon from"../Icon";import"./style/NumberInput.css";var NumberInput=/*#__PURE__*/function(_React$Component){function NumberInput(){var _this;_classCallCheck(this,NumberInput);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,NumberInput,[].concat(args));_defineProperty(_this,"state",{propValue:"",value:"",changed:false});_defineProperty(_this,"onChange",function(ev){var len=ev.target.value.length;var value=ev.target.value.substring(_this.props.prefix.length,len-_this.props.suffix.length);_this.setState({value:value,changed:true})});_defineProperty(_this,"currentFloatValue",function(){var floatValue=parseFloat(_this.state.value);return isNaN(floatValue)?null:floatValue});_defineProperty(_this,"startStep",function(delta){if(_this.props.disabled||_this.props.readOnly){return}_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta));var stepInterval=null;var stepTimeout=setTimeout(function(){stepInterval=setInterval(function(){_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta))},50)},500);document.addEventListener("mouseup",function(){clearTimeout(stepTimeout);clearInterval(stepInterval)},{once:true})});_defineProperty(_this,"onKeyDown",function(ev){if(ev.key==="Enter"){_this.commit()}// Ensure prefix/suffix isn't changed
+ */import React from"react";import classNames from"classnames";import PropTypes from"prop-types";import Icon from"../Icon";import"./style/NumberInput.css";var NumberInput=/*#__PURE__*/function(_React$Component){function NumberInput(){var _this;_classCallCheck(this,NumberInput);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,NumberInput,[].concat(args));_defineProperty(_this,"state",{propValue:"",value:"",changed:false,valid:false});_defineProperty(_this,"onChange",function(ev){var len=ev.target.value.length;var value=ev.target.value.substring(_this.props.prefix.length,len-_this.props.suffix.length);_this.setState({value:value,changed:true})});_defineProperty(_this,"currentFloatValue",function(){var floatValue=parseFloat(_this.state.value);return isNaN(floatValue)?null:floatValue});_defineProperty(_this,"startStep",function(delta){if(_this.props.disabled||_this.props.readOnly){return}_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta));var stepInterval=null;var stepTimeout=setTimeout(function(){stepInterval=setInterval(function(){_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta))},50)},500);document.addEventListener("mouseup",function(){clearTimeout(stepTimeout);clearInterval(stepInterval)},{once:true})});_defineProperty(_this,"onKeyDown",function(ev){if(ev.key==="Enter"){_this.commit()}// Ensure prefix/suffix isn't changed
 var selStart=ev.target.selectionStart;var selEnd=ev.target.selectionEnd;var len=ev.target.value.length;var startOffset=ev.key==="Backspace"&&selStart===selEnd?1:0;var endOffset=ev.key==="Delete"&&selStart===selEnd?1:0;if(selStart<_this.props.prefix.length+startOffset||selEnd>len-_this.props.suffix.length-endOffset){ev.preventDefault()}});_defineProperty(_this,"commit",function(){if(_this.state.changed){var value=_this.constrainValue(_this.currentFloatValue());_this.setState({value:value===null?"":value.toFixed(_this.props.decimals)});_this.props.onChange(value)}});_defineProperty(_this,"constrainValue",function(value){if(value===null){return null}if(_this.props.min!==undefined){value=Math.max(_this.props.min,value)}if(_this.props.max!==undefined){value=Math.min(_this.props.max,value)}var k=Math.pow(10,_this.props.decimals);return Math.round(value*k)/k});_defineProperty(_this,"setupSelectionListener",function(event){var input=event.target;var selectionHandler=function selectionHandler(ev){if(ev.target===input){// Ensure prefix/suffix isn't selected
-var len=input.value.length;var prefixLen=_this.props.prefix.length;var suffixLen=_this.props.suffix.length;var selStart=Math.min(Math.max(input.selectionStart,prefixLen),len-suffixLen);var selEnd=Math.max(Math.min(input.selectionEnd,len-suffixLen),prefixLen);if(selStart!==input.selectionStart||selEnd!==input.selectionEnd){input.setSelectionRange(selStart,selEnd)}}};document.addEventListener("selectionchange",selectionHandler);input.addEventListener("blur",function(){document.removeEventListener("selectionchange",selectionHandler)},{once:true})});return _this}_inherits(NumberInput,_React$Component);return _createClass(NumberInput,[{key:"render",value:function render(){var _this$props$step,_this2=this;var className=classNames({"number-input":true,"number-input-mobile":this.props.mobile,"number-input-normal":!this.props.mobile,"number-input-disabled":this.props.disabled||this.props.readOnly});var paddingLength=(this.props.mobile?4:1.5)+"em";var prefixSuffixLength=this.props.prefix.length+this.props.suffix.length+"ch";var numberLength=2+Math.max((this.props.min||0).toFixed(this.props.decimals).length,(this.props.max||0).toFixed(this.props.decimals).length)+"ch";var style={width:"calc(".concat(paddingLength," + ").concat(prefixSuffixLength," + ").concat(numberLength,")")};var step=(_this$props$step=this.props.step)!==null&&_this$props$step!==void 0?_this$props$step:Math.pow(10,-this.props.decimals);var plusIcon=this.props.mobile?"plus":"chevron-up";var minusIcon=this.props.mobile?"minus":"chevron-down";return/*#__PURE__*/React.createElement("div",{className:className+" "+this.props.className},/*#__PURE__*/React.createElement("input",{disabled:this.props.disabled,onBlur:this.commit,onChange:this.onChange,onFocus:this.setupSelectionListener,onKeyDown:this.onKeyDown,placeholder:this.props.placeholder,readOnly:this.props.readOnly,required:this.props.required,style:style,type:"text",value:this.props.prefix+this.state.value+this.props.suffix}),/*#__PURE__*/React.createElement("input",{name:this.props.name,type:"hidden",value:this.state.value}),/*#__PURE__*/React.createElement(Icon,{icon:plusIcon,onMouseDown:function onMouseDown(){return _this2.startStep(+step)}}),/*#__PURE__*/React.createElement(Icon,{icon:minusIcon,onMouseDown:function onMouseDown(){return _this2.startStep(-step)}}))}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(state.propValue!==nextProps.value){return{propValue:nextProps.value,value:typeof nextProps.value==="number"?nextProps.value.toFixed(nextProps.decimals):"",changed:false}}return null}}])}(React.Component);_defineProperty(NumberInput,"propTypes",{className:PropTypes.string,decimals:PropTypes.number,disabled:PropTypes.bool,max:PropTypes.number,min:PropTypes.number,mobile:PropTypes.bool,name:PropTypes.string,onChange:PropTypes.func,placeholder:PropTypes.string,prefix:PropTypes.string,readOnly:PropTypes.bool,required:PropTypes.bool,step:PropTypes.number,style:PropTypes.object,suffix:PropTypes.string,value:PropTypes.number});_defineProperty(NumberInput,"defaultProps",{className:"",decimals:0,mobile:false,prefix:"",suffix:""});export{NumberInput as default};
+var len=input.value.length;var prefixLen=_this.props.prefix.length;var suffixLen=_this.props.suffix.length;var selStart=Math.min(Math.max(input.selectionStart,prefixLen),len-suffixLen);var selEnd=Math.max(Math.min(input.selectionEnd,len-suffixLen),prefixLen);if(selStart!==input.selectionStart||selEnd!==input.selectionEnd){input.setSelectionRange(selStart,selEnd)}}};document.addEventListener("selectionchange",selectionHandler);input.addEventListener("blur",function(){document.removeEventListener("selectionchange",selectionHandler)},{once:true})});return _this}_inherits(NumberInput,_React$Component);return _createClass(NumberInput,[{key:"render",value:function render(){var _this$props$step,_this2=this;var className=classNames({"number-input":true,"number-input-mobile":this.props.mobile,"number-input-normal":!this.props.mobile,"number-input-disabled":this.props.disabled||this.props.readOnly,"number-input-invalid":this.props.required&&!this.state.value});var paddingLength=(this.props.mobile?4:1.5)+"em";var prefixSuffixLength=this.props.prefix.length+this.props.suffix.length+"ch";var numberLength=2+Math.max((this.props.min||0).toFixed(this.props.decimals).length,(this.props.max||0).toFixed(this.props.decimals).length)+"ch";var style={width:"calc(".concat(paddingLength," + ").concat(prefixSuffixLength," + ").concat(numberLength,")")};var step=(_this$props$step=this.props.step)!==null&&_this$props$step!==void 0?_this$props$step:Math.pow(10,-this.props.decimals);var plusIcon=this.props.mobile?"plus":"chevron-up";var minusIcon=this.props.mobile?"minus":"chevron-down";return/*#__PURE__*/React.createElement("div",{className:className+" "+this.props.className},/*#__PURE__*/React.createElement("input",{disabled:this.props.disabled,onBlur:this.commit,onChange:this.onChange,onFocus:this.setupSelectionListener,onKeyDown:this.onKeyDown,placeholder:this.props.placeholder,readOnly:this.props.readOnly,required:this.props.required,style:style,type:"text",value:this.props.prefix+this.state.value+this.props.suffix}),/*#__PURE__*/React.createElement("input",{name:this.props.name,required:this.props.required,type:"hidden",value:this.state.value}),/*#__PURE__*/React.createElement(Icon,{icon:plusIcon,onMouseDown:function onMouseDown(){return _this2.startStep(+step)}}),/*#__PURE__*/React.createElement(Icon,{icon:minusIcon,onMouseDown:function onMouseDown(){return _this2.startStep(-step)}}))}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(state.propValue!==nextProps.value){return{propValue:nextProps.value,value:typeof nextProps.value==="number"?nextProps.value.toFixed(nextProps.decimals):"",changed:false}}return null}}])}(React.Component);_defineProperty(NumberInput,"propTypes",{className:PropTypes.string,decimals:PropTypes.number,disabled:PropTypes.bool,max:PropTypes.number,min:PropTypes.number,mobile:PropTypes.bool,name:PropTypes.string,onChange:PropTypes.func,placeholder:PropTypes.string,prefix:PropTypes.string,readOnly:PropTypes.bool,required:PropTypes.bool,step:PropTypes.number,style:PropTypes.object,suffix:PropTypes.string,value:PropTypes.number});_defineProperty(NumberInput,"defaultProps",{className:"",decimals:0,mobile:false,prefix:"",suffix:""});export{NumberInput as default};

package/components/widgets/style/NumberInput.css

@@ -7,6 +7,10 @@ div.number-input {
     align-items: center;
 }
 
+div.number-input-invalid {
+    background-color: #FFAAAA;
+}
+
 div.number-input > input {
     min-width: 0;
     width: 0;

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "qwc2",
-    "version": "2025.04.14",
+    "version": "2025.04.30",
     "description": "QGIS Web Client",
     "author": "Sourcepole AG",
     "license": "BSD-2-Clause",
-    "repository": "git@github.com:qgis/qwc2.git",
+    "repository": "git+ssh://git@github.com/qgis/qwc2.git",
     "homepage": "https://https://qwc-services.github.io/",
     "bugs": {
         "url": "https://github.com/qgis/qwc2/issues"
@@ -17,7 +17,7 @@
     ],
     "dependencies": {
         "@furkot/webfonts-generator": "^2.0.2",
-        "@giro3d/giro3d": "^0.42.2",
+        "@giro3d/giro3d": "^0.42.4",
         "@kayahr/text-encoding": "^2.0.0",
         "@loaders.gl/core": "^4.3.3",
         "@loaders.gl/shapefile": "^4.3.3",
@@ -55,6 +55,7 @@
         "ol-ext": "^4.0.24",
         "ol-mapbox-style": "^12.3.5",
         "painterro": "^1.2.87",
+        "parse-css-color": "^0.2.1",
         "path-browserify": "^1.0.1",
         "pdf-lib": "^1.17.1",
         "pdfjs-dist": "^4.9.155",

package/plugins/API.js

@@ -104,11 +104,11 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
      * * `message`: A descriptive string to display in the tool taskbar.
      * * `callback`: A `function(result, crs)`, the `result` being an array of GeoJSON features, and `crs` the projection of the feature coordinates.
      * * `options`: Optional configuration:
-     *   * `drawMultiple`: Whether to allow drawing multiple geometries (default: `false`).
-     *   * `style`: A custom style object to use for the drawn features, in the same format as `DEFAULT_FEATURE_STYLE` in `qwc2/utils/FeatureStyles.js`.
-     *   * `initialFeatures`: Array of initial geometries.
-     *   * `snapping`: Whether snapping is available while drawing (default: `false`).
-     *   * `snappingActive`: Whether snapping is initially active (default: `false`)
+     *     * `drawMultiple`: Whether to allow drawing multiple geometries (default: `false`).
+     *     * `style`: A custom style object to use for the drawn features, in the same format as `DEFAULT_FEATURE_STYLE` in `qwc2/utils/FeatureStyles.js`.
+     *     * `initialFeatures`: Array of initial geometries.
+     *     * `snapping`: Whether snapping is available while drawing (default: `false`).
+     *     * `snappingActive`: Whether snapping is initially active (default: `false`)
      */_defineProperty(_this,"drawGeometry",function(geomType,message,callback){var options=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};_this.props.setCurrentTask("ScratchDrawing",null,null,{callback:callback,geomType:geomType,message:message,drawMultiple:options.drawMultiple||false,style:options.style,snapping:options.snapping||false,snappingActive:options.snappingActive||false,initialFeatures:options.initialFeatures})});/**
      * Return the current application state.
      */_defineProperty(_this,"getState",function(){return _this.props.state});return _this}_inherits(API,_React$Component);return _createClass(API,[{key:"componentDidMount",value:function componentDidMount(){window.qwc2={__customPlugins:{},__attributeCalculators:{},__identifyExportes:{}};// Auto-binded functions