qwc2 2025.5.12 → 2025.5.16

package/components/map3d/MapControls3D.js

@@ -4,17 +4,19 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import classNames from"classnames";import PropTypes from"prop-types";import{Raycaster,Vector2,Vector3}from"three";import{MapControls}from"three/addons/controls/MapControls";import{UrlParams}from"../../utils/PermaLinkUtils";import Icon from"../Icon";import{setCenter}from"./slices/map3d";import"./style/MapControls3D.css";var MapControls3D=/*#__PURE__*/function(_React$Component){function MapControls3D(props){var _this;_classCallCheck(this,MapControls3D);_this=_callSuper(this,MapControls3D,[props]);_defineProperty(_this,"state",{firstPerson:false});_defineProperty(_this,"keyHandler",function(event){if(event.repeat){return}else if(event.key==="ArrowUp"){if(event.ctrlKey)_this.tilt(event,0,1,true);else _this.pan(event,0,1,true)}else if(event.key==="ArrowDown"){if(event.ctrlKey)_this.tilt(event,0,-1,true);else _this.pan(event,0,-1,true)}else if(event.key==="ArrowLeft"){if(event.ctrlKey)_this.tilt(event,1,0,true);else _this.pan(event,1,0,true)}else if(event.key==="ArrowRight"){if(event.ctrlKey)_this.tilt(event,-1,0,true);else _this.pan(event,-1,0,true)}});_defineProperty(_this,"home",function(){_this.leaveFirstPerson();var extent=_this.props.sceneContext.map.extent;var bounds=[extent.west,extent.south,extent.east,extent.north];_this.setViewToExtent(bounds)});_defineProperty(_this,"pan",function(ev,dx,dy){var keyboard=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;// Pan faster the heigher one is above the terrain
+ */import React from"react";import{connect}from"react-redux";import classNames from"classnames";import PropTypes from"prop-types";import{Raycaster,Vector2,Vector3}from"three";import{MapControls}from"three/addons/controls/MapControls";import ConfigUtils from"../../utils/ConfigUtils";import{UrlParams}from"../../utils/PermaLinkUtils";import Icon from"../Icon";import"./style/MapControls3D.css";var MapControls3D=/*#__PURE__*/function(_React$Component){function MapControls3D(props){var _this;_classCallCheck(this,MapControls3D);_this=_callSuper(this,MapControls3D,[props]);_defineProperty(_this,"state",{firstPerson:false});_defineProperty(_this,"keyHandler",function(event){if(event.repeat){return}else if(event.key==="ArrowUp"){if(event.ctrlKey)_this.tilt(event,0,1,true);else _this.pan(event,0,1,true)}else if(event.key==="ArrowDown"){if(event.ctrlKey)_this.tilt(event,0,-1,true);else _this.pan(event,0,-1,true)}else if(event.key==="ArrowLeft"){if(event.ctrlKey)_this.tilt(event,1,0,true);else _this.pan(event,1,0,true)}else if(event.key==="ArrowRight"){if(event.ctrlKey)_this.tilt(event,-1,0,true);else _this.pan(event,-1,0,true)}else if(event.key==="PageUp"){_this.moveCameraHeight(event,+1)}else if(event.key==="PageDown"){_this.moveCameraHeight(event,-1)}});_defineProperty(_this,"home",function(){var extent=_this.props.sceneContext.map.extent;var bounds=[extent.west,extent.south,extent.east,extent.north];_this.setViewToExtent(bounds);_this.updateUrlParams()});_defineProperty(_this,"pan",function(ev,dx,dy){var keyboard=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;// Pan faster the heigher one is above the terrain
 var d=_this.state.firstPerson?200000:300+(_this.props.sceneContext.scene.view.camera.position.z-_this.props.sceneContext.scene.view.controls.target.z)/250;var delta=new Vector2(dx,dy).multiplyScalar(d);_this.animationInterrupted=false;var lastTimestamp=new Date/1000;var _animate=function animate(){if(_this.animationInterrupted){return}// Pan <delta> distance per second
-var timestamp=new Date/1000;var k=timestamp-lastTimestamp;lastTimestamp=timestamp;_this.props.sceneContext.scene.view.controls._pan(delta.x*k,delta.y*k);_this.props.sceneContext.scene.notifyChange();requestAnimationFrame(_animate)};requestAnimationFrame(_animate);var element=keyboard?ev.target:ev.view;var event=keyboard?"keyup":"mouseup";element.addEventListener(event,function(){_this.animationInterrupted=true},{once:true})});_defineProperty(_this,"tilt",function(ev,yaw,az){var keyboard=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;if(_this.state.firstPerson){az*=-1;yaw*=-1}// Pan faster the heigher one is above the terrain
+var timestamp=new Date/1000;var k=timestamp-lastTimestamp;lastTimestamp=timestamp;_this.props.sceneContext.scene.view.controls._pan(delta.x*k,delta.y*k);_this.props.sceneContext.scene.notifyChange();requestAnimationFrame(_animate)};requestAnimationFrame(_animate);var element=keyboard?ev.target:ev.view;var event=keyboard?"keyup":"mouseup";element.addEventListener(event,function(){_this.animationInterrupted=true;_this.updateUrlParams()},{once:true})});_defineProperty(_this,"tilt",function(ev,yaw,az){var keyboard=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;if(_this.state.firstPerson){az*=-1;yaw*=-1}// Pan faster the heigher one is above the terrain
 _this.animationInterrupted=false;var lastTimestamp=new Date/1000;var _animate2=function animate(){if(_this.animationInterrupted){return}// Pan <delta> distance per second
-var timestamp=new Date/1000;var k=timestamp-lastTimestamp;lastTimestamp=timestamp;if(az){_this.props.sceneContext.scene.view.controls._rotateUp(az*k)}if(yaw){_this.props.sceneContext.scene.view.controls._rotateLeft(yaw*k)}_this.props.sceneContext.scene.notifyChange();requestAnimationFrame(_animate2)};requestAnimationFrame(_animate2);var element=keyboard?ev.target:ev.view;var event=keyboard?"keyup":"mouseup";element.addEventListener(event,function(){_this.animationInterrupted=true},{once:true})});_defineProperty(_this,"resetTilt",function(){if(_this.state.firstPerson){var target=_this.props.sceneContext.scene.view.controls.target;var camerapos=_this.props.sceneContext.scene.view.camera.position;_this.props.sceneContext.scene.view.controls.target.set(target.x,target.y,camerapos.z)}else{// Animate from old to new position
-var _target=_this.props.sceneContext.scene.view.controls.target;var oldPosition=_this.props.sceneContext.scene.view.camera.position.clone();var oldYaw=_this.props.sceneContext.scene.view.controls.getAzimuthalAngle();var newPosition=new Vector3(_target.x,_target.y,_target.distanceTo(oldPosition));var startTime=new Date/1000;_this.animationInterrupted=false;var _animate3=function animate(){if(!_this.props.sceneContext.scene||_this.animationInterrupted){return}var duration=2;var elapsed=new Date/1000-startTime;var x=elapsed/duration;var k=0.5*(1-Math.cos(x*Math.PI));var currentPosition=new Vector3().lerpVectors(oldPosition,newPosition,k);currentPosition.x-=_target.x;currentPosition.y-=_target.y;currentPosition.applyAxisAngle(new Vector3(0,0,1),-oldYaw*k);currentPosition.x+=_target.x;currentPosition.y+=_target.y;_this.props.sceneContext.scene.view.camera.position.copy(currentPosition);_this.props.sceneContext.scene.notifyChange();if(elapsed<duration){requestAnimationFrame(_animate3)}else{_this.props.sceneContext.scene.view.camera.position.copy(newPosition);_this.props.sceneContext.scene.notifyChange()}};requestAnimationFrame(_animate3)}});_defineProperty(_this,"setViewToExtent",function(bounds){var _this$props$sceneCont;var angle=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;if(_this.state.firstPerson){_this.leaveFirstPerson()}var center={x:0.5*(bounds[0]+bounds[2]),y:0.5*(bounds[1]+bounds[3])};center.z=(_this$props$sceneCont=_this.props.sceneContext.getTerrainHeightFromMap([center.x,center.y]))!==null&&_this$props$sceneCont!==void 0?_this$props$sceneCont:0;// Camera height to width bbox width
+var timestamp=new Date/1000;var k=timestamp-lastTimestamp;lastTimestamp=timestamp;if(az){_this.props.sceneContext.scene.view.controls._rotateUp(az*k)}if(yaw){_this.props.sceneContext.scene.view.controls._rotateLeft(yaw*k)}_this.props.sceneContext.scene.notifyChange();requestAnimationFrame(_animate2)};requestAnimationFrame(_animate2);var element=keyboard?ev.target:ev.view;var event=keyboard?"keyup":"mouseup";element.addEventListener(event,function(){_this.animationInterrupted=true;_this.updateUrlParams()},{once:true})});_defineProperty(_this,"moveCameraHeight",function(ev,dir){if(!_this.state.firstPerson){return}var pos=_this.props.sceneContext.scene.view.camera.position;_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(terrHeight){_this.animationInterrupted=false;var lastTimestamp=new Date/1000;var _animate3=function animate(){if(_this.animationInterrupted){return}// Move <delta> distance per second
+var timestamp=new Date/1000;var k=timestamp-lastTimestamp;lastTimestamp=timestamp;var z=_this.props.sceneContext.scene.view.camera.position.z;var delta=0.5*(z-terrHeight);_this.personHeight=Math.max(2,_this.personHeight+delta*k*dir);var newZ=terrHeight+_this.personHeight;_this.props.sceneContext.scene.view.camera.position.z=newZ;_this.props.sceneContext.scene.view.controls.target.z=newZ;_this.props.sceneContext.scene.notifyChange();requestAnimationFrame(_animate3)};requestAnimationFrame(_animate3)});ev.target.addEventListener("keyup",function(){_this.animationInterrupted=true;_this.updateUrlParams()},{once:true})});_defineProperty(_this,"resetTilt",function(){if(_this.state.firstPerson){var target=_this.props.sceneContext.scene.view.controls.target;var camerapos=_this.props.sceneContext.scene.view.camera.position;_this.props.sceneContext.scene.view.controls.target.set(target.x,target.y,camerapos.z)}else{// Animate from old to new position
+var _target=_this.props.sceneContext.scene.view.controls.target;var oldPosition=_this.props.sceneContext.scene.view.camera.position.clone();var oldYaw=_this.props.sceneContext.scene.view.controls.getAzimuthalAngle();var newPosition=new Vector3(_target.x,_target.y,_target.distanceTo(oldPosition));var startTime=new Date/1000;_this.animationInterrupted=false;var _animate4=function animate(){if(!_this.props.sceneContext.scene||_this.animationInterrupted){return}var duration=2;var elapsed=new Date/1000-startTime;var x=elapsed/duration;var k=0.5*(1-Math.cos(x*Math.PI));var currentPosition=new Vector3().lerpVectors(oldPosition,newPosition,k);currentPosition.x-=_target.x;currentPosition.y-=_target.y;currentPosition.applyAxisAngle(new Vector3(0,0,1),-oldYaw*k);currentPosition.x+=_target.x;currentPosition.y+=_target.y;_this.props.sceneContext.scene.view.camera.position.copy(currentPosition);_this.props.sceneContext.scene.notifyChange();if(elapsed<duration){requestAnimationFrame(_animate4)}else{_this.props.sceneContext.scene.view.camera.position.copy(newPosition);_this.props.sceneContext.scene.notifyChange()}};requestAnimationFrame(_animate4)}_this.updateUrlParams()});_defineProperty(_this,"setViewToExtent",function(bounds){var _this$props$sceneCont;var angle=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;_this.leaveFirstPerson();var center={x:0.5*(bounds[0]+bounds[2]),y:0.5*(bounds[1]+bounds[3])};center.z=(_this$props$sceneCont=_this.props.sceneContext.getTerrainHeightFromMap([center.x,center.y]))!==null&&_this$props$sceneCont!==void 0?_this$props$sceneCont:0;// Camera height to width bbox width
 var fov=35/180*Math.PI;var cameraHeight=(bounds[2]-bounds[0])/(2*Math.tan(fov/2));// Animate from old to new position/target
-var oldPosition=_this.props.sceneContext.scene.view.camera.position.clone();var oldTarget=_this.props.sceneContext.scene.view.controls.target.clone();var oldYaw=_this.props.sceneContext.scene.view.controls.getAzimuthalAngle();var newPosition=new Vector3(center.x,center.y,center.z+cameraHeight);var newTarget=new Vector3(center.x,center.y,center.z);var rotateAngle=-oldYaw+angle;while(rotateAngle>Math.PI){rotateAngle-=2*Math.PI}while(rotateAngle<-Math.PI){rotateAngle+=2*Math.PI}var startTime=new Date/1000;_this.animationInterrupted=false;var _animate4=function animate(){if(!_this.props.sceneContext.scene||_this.animationInterrupted){return}var duration=2;var elapsed=new Date/1000-startTime;var x=elapsed/duration;var k=0.5*(1-Math.cos(x*Math.PI));var currentPosition=new Vector3().lerpVectors(oldPosition,newPosition,k);var currentTarget=new Vector3().lerpVectors(oldTarget,newTarget,k);currentPosition.x-=currentTarget.x;currentPosition.y-=currentTarget.y;currentPosition.applyAxisAngle(new Vector3(0,0,1),rotateAngle*k);currentPosition.x+=currentTarget.x;currentPosition.y+=currentTarget.y;_this.props.sceneContext.scene.view.camera.position.copy(currentPosition);_this.props.sceneContext.scene.view.controls.target.copy(currentTarget);_this.props.sceneContext.scene.notifyChange();if(elapsed<duration){requestAnimationFrame(_animate4)}else{_this.props.sceneContext.scene.view.camera.position.copy(newPosition);_this.props.sceneContext.scene.view.controls.target.copy(newTarget);_this.props.sceneContext.scene.view.controls._rotateLeft(-angle);_this.props.sceneContext.scene.notifyChange()}};requestAnimationFrame(_animate4)});_defineProperty(_this,"updateControlsTarget",function(){var _raycaster$intersectO,_terrInter$z;var controls=_this.props.sceneContext.scene.view.controls;var camera=_this.props.sceneContext.scene.view.camera;var target=controls.target;var raycaster=new Raycaster;// Query highest resolution terrain tile (i.e. tile with no children)
+var oldPosition=_this.props.sceneContext.scene.view.camera.position.clone();var oldTarget=_this.props.sceneContext.scene.view.controls.target.clone();var oldYaw=_this.props.sceneContext.scene.view.controls.getAzimuthalAngle();var newPosition=new Vector3(center.x,center.y,center.z+cameraHeight);var newTarget=new Vector3(center.x,center.y,center.z);var rotateAngle=-oldYaw+angle;while(rotateAngle>Math.PI){rotateAngle-=2*Math.PI}while(rotateAngle<-Math.PI){rotateAngle+=2*Math.PI}var startTime=new Date/1000;_this.animationInterrupted=false;var _animate5=function animate(){if(!_this.props.sceneContext.scene||_this.animationInterrupted){return}var duration=2;var elapsed=new Date/1000-startTime;var x=elapsed/duration;var k=0.5*(1-Math.cos(x*Math.PI));var currentPosition=new Vector3().lerpVectors(oldPosition,newPosition,k);var currentTarget=new Vector3().lerpVectors(oldTarget,newTarget,k);currentPosition.x-=currentTarget.x;currentPosition.y-=currentTarget.y;currentPosition.applyAxisAngle(new Vector3(0,0,1),rotateAngle*k);currentPosition.x+=currentTarget.x;currentPosition.y+=currentTarget.y;_this.props.sceneContext.scene.view.camera.position.copy(currentPosition);_this.props.sceneContext.scene.view.controls.target.copy(currentTarget);_this.props.sceneContext.scene.notifyChange();if(elapsed<duration){requestAnimationFrame(_animate5)}else{_this.props.sceneContext.scene.view.camera.position.copy(newPosition);_this.props.sceneContext.scene.view.controls.target.copy(newTarget);_this.props.sceneContext.scene.view.controls._rotateLeft(-angle);_this.props.sceneContext.scene.notifyChange()}};requestAnimationFrame(_animate5)});_defineProperty(_this,"updateControlsTarget",function(){var _raycaster$intersectO,_terrInter$z;var controls=_this.props.sceneContext.scene.view.controls;var camera=_this.props.sceneContext.scene.view.camera;var target=controls.target;var raycaster=new Raycaster;// Query highest resolution terrain tile (i.e. tile with no children)
 var x=target.x;var y=target.y;raycaster.set(new Vector3(x,y,target.z+100000),new Vector3(0,0,-1));var terrInter=(_raycaster$intersectO=raycaster.intersectObjects([_this.props.sceneContext.map.object3d]).filter(function(result){return result.object.children.length===0})[0])===null||_raycaster$intersectO===void 0?void 0:_raycaster$intersectO.point;// FIXME: Why does raycaster.intersectObjects on terrain return 0-ish even when above terrain?
 if(((_terrInter$z=terrInter===null||terrInter===void 0?void 0:terrInter.z)!==null&&_terrInter$z!==void 0?_terrInter$z:0)<=1){return}if(_this.state.firstPerson){var delta=terrInter.z+_this.personHeight-camera.position.z;camera.position.z+=delta;target.z+=delta}else{var cameraHeight=camera.position.z;// If camera height is at terrain height, target height should be at terrain height
 // If camera height is at twice the terrain height or further, target height should be zero
-var k=Math.max(0,1-(cameraHeight-terrInter.z)/terrInter.z);target.lerpVectors(new Vector3(x,y,0),terrInter,k)}_this.props.setCenter([target.x,target.y,target.z]);var cpos=camera.position;UrlParams.updateParams({v3d:[target.x,target.y,target.z,cpos.x,cpos.y,cpos.z].map(function(v){return v.toFixed(0)}).join(",")})});_defineProperty(_this,"stopAnimations",function(){_this.animationInterrupted=true});_defineProperty(_this,"switchToFirstPersonView",function(ev){// Don't do anything if a task is set, may interfere
-if(_this.props.currentTask){return}if(!_this.state.firstPerson){_this.setupFirstPerson(ev)}});_defineProperty(_this,"toggleFirstPersonControls",function(){if(_this.state.firstPerson){_this.leaveFirstPerson()}else{_this.props.sceneContext.scene.domElement.addEventListener("click",_this.setupFirstPerson,{once:true})}});_defineProperty(_this,"setupFirstPerson",function(ev){var rect=ev.target.getBoundingClientRect();var mouseX=(ev.clientX-rect.left)/rect.width*2-1;var mouseY=-((ev.clientY-rect.top)/rect.height)*2+1;var intersection=_this.props.sceneContext.getSceneIntersection(mouseX,mouseY,false);if(!intersection){return}var pos=intersection.point;_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(z){// Animate from old to new position/target
-var oldPosition=_this.props.sceneContext.scene.view.camera.position.clone();var oldTarget=_this.props.sceneContext.scene.view.controls.target.clone();var newPosition=new Vector3(pos.x,pos.y,z+_this.personHeight);var newTarget=new Vector3(pos.x,pos.y+300,z+_this.personHeight);var startTime=new Date/1000;_this.animationInterrupted=false;var _animate5=function animate(){if(!_this.props.sceneContext.scene||_this.animationInterrupted){return}var duration=2;var elapsed=new Date/1000-startTime;var x=elapsed/duration;var k=0.5*(1-Math.cos(x*Math.PI));var currentPosition=new Vector3().lerpVectors(oldPosition,newPosition,k);var currentTarget=new Vector3().lerpVectors(oldTarget,newTarget,k);_this.props.sceneContext.scene.view.camera.position.copy(currentPosition);_this.props.sceneContext.scene.view.controls.target.copy(currentTarget);_this.props.sceneContext.scene.notifyChange();if(elapsed<duration){requestAnimationFrame(_animate5)}else{_this.props.sceneContext.scene.view.camera.position.copy(newPosition);_this.props.sceneContext.scene.view.controls.target.set(pos.x,pos.y+0.1,z+_this.personHeight);_this.props.sceneContext.scene.notifyChange();_this.controls.maxPolarAngle=0.8*Math.PI;_this.controls.panSpeed=600;_this.controls.enableZoom=false;_this.setState({firstPerson:true})}};requestAnimationFrame(_animate5)})});_defineProperty(_this,"leaveFirstPerson",function(){_this.controls.maxPolarAngle=Math.PI*0.5;_this.controls.panSpeed=1;_this.controls.enableZoom=true;_this.setState({firstPerson:false},function(){var cameraPos=_this.props.sceneContext.scene.view.camera.position;var bounds=[cameraPos.x-1000,cameraPos.y-1000,cameraPos.x+1000,cameraPos.y+1000];_this.setViewToExtent(bounds)})});_this.animationInterrupted=false;_this.personHeight=2;_this.prevTarget=null;return _this}_inherits(MapControls3D,_React$Component);return _createClass(MapControls3D,[{key:"componentDidMount",value:function componentDidMount(){var sceneElement=this.props.sceneContext.scene.domElement;sceneElement.tabIndex=0;this.controls=new MapControls(this.props.sceneContext.scene.view.camera,sceneElement);this.controls.zoomToCursor=true;this.controls.enableDamping=true;this.controls.dampingFactor=0.2;this.controls.maxPolarAngle=Math.PI*0.5;sceneElement.addEventListener("keydown",this.keyHandler);this.props.sceneContext.scene.view.setControls(this.controls);var targetPos=this.props.sceneContext.scene.view.camera.position.clone();targetPos.z=0;this.controls.target=targetPos;this.controls.addEventListener("change",this.updateControlsTarget);sceneElement.addEventListener("dblclick",this.switchToFirstPersonView);this.props.onControlsSet(this)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.animationInterrupted=true;var sceneElement=this.props.sceneContext.scene.domElement;sceneElement.addEventListener("keydown",this.keyHandler);this.controls.removeEventListener("change",this.updateControlsTarget);this.props.sceneContext.scene.view.setControls(null);this.controls.dispose();this.controls=null;this.props.sceneContext.scene.domElement.removeEventListener("dblclick",this.switchToFirstPersonView)}},{key:"render",value:function render(){var _this2=this;var firstPersonButtonClasses=classNames({"map3d-firstperson-button":true,"map3d-firstperson-button-active":this.state.firstPerson});return[/*#__PURE__*/React.createElement("div",{className:"map3d-nav-pan",key:"MapPanWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-up",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,0,1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-left",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"home",onClick:function onClick(){return _this2.home()}}),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-right",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,-1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-down",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,0,-1)}}),/*#__PURE__*/React.createElement("span",null)),/*#__PURE__*/React.createElement("div",{className:"map3d-nav-rotate",key:"MapRotateWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-up",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,0,1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-left",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"point",onClick:function onClick(){return _this2.resetTilt()}}),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-right",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,-1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-down",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,0,-1)}}),/*#__PURE__*/React.createElement("span",null)),/*#__PURE__*/React.createElement("div",{className:firstPersonButtonClasses,key:"FirstPersonButton",onClick:this.toggleFirstPersonControls},/*#__PURE__*/React.createElement(Icon,{icon:"person"}))]}}])}(React.Component);_defineProperty(MapControls3D,"propTypes",{currentTask:PropTypes.string,onControlsSet:PropTypes.func,sceneContext:PropTypes.object,setCenter:PropTypes.func});export default connect(function(state){return{currentTask:state.task.id}},{setCenter:setCenter})(MapControls3D);
+var k=Math.max(0,1-(cameraHeight-terrInter.z)/terrInter.z);target.lerpVectors(new Vector3(x,y,0),terrInter,k)}_this.updateUrlParams()});_defineProperty(_this,"stopAnimations",function(){_this.animationInterrupted=true});_defineProperty(_this,"switchToFirstPersonView",function(ev){// Don't do anything if a task is set, may interfere
+if(_this.props.currentTask){return}if(!_this.state.firstPerson){_this.setupFirstPerson(ev)}});_defineProperty(_this,"toggleFirstPersonControls",function(){if(_this.state.firstPerson){_this.leaveFirstPerson()}else{_this.props.sceneContext.scene.domElement.addEventListener("click",_this.setupFirstPerson,{once:true});var cursor=ConfigUtils.getAssetsPath()+"/img/person.svg";_this.props.sceneContext.scene.domElement.style.cursor="url(".concat(cursor,"), pointer")}});_defineProperty(_this,"setupFirstPerson",function(ev){_this.props.sceneContext.scene.domElement.style.cursor="";var rect=ev.target.getBoundingClientRect();var mouseX=(ev.clientX-rect.left)/rect.width*2-1;var mouseY=-((ev.clientY-rect.top)/rect.height)*2+1;var intersection=_this.props.sceneContext.getSceneIntersection(mouseX,mouseY,false);if(!intersection){return}var pos=intersection.point;_this.personHeight=2;_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(z){// Animate from old to new position/target
+var oldPosition=_this.props.sceneContext.scene.view.camera.position.clone();var oldTarget=_this.props.sceneContext.scene.view.controls.target.clone();var newPosition=new Vector3(pos.x,pos.y,z+_this.personHeight);var newTarget=new Vector3(pos.x,pos.y+300,z+_this.personHeight);var startTime=new Date/1000;_this.animationInterrupted=false;var _animate6=function animate(){if(!_this.props.sceneContext.scene||_this.animationInterrupted){return}var duration=2;var elapsed=new Date/1000-startTime;var x=elapsed/duration;var k=0.5*(1-Math.cos(x*Math.PI));var currentPosition=new Vector3().lerpVectors(oldPosition,newPosition,k);var currentTarget=new Vector3().lerpVectors(oldTarget,newTarget,k);_this.props.sceneContext.scene.view.camera.position.copy(currentPosition);_this.props.sceneContext.scene.view.controls.target.copy(currentTarget);_this.props.sceneContext.scene.notifyChange();if(elapsed<duration){requestAnimationFrame(_animate6)}else{_this.props.sceneContext.scene.view.camera.position.copy(newPosition);_this.props.sceneContext.scene.view.controls.target.set(pos.x,pos.y+0.1,z+_this.personHeight);_this.props.sceneContext.scene.notifyChange();_this.controls.maxPolarAngle=0.8*Math.PI;_this.controls.panSpeed=600;_this.controls.enableZoom=false;_this.setState({firstPerson:true},_this.updateUrlParams)}};requestAnimationFrame(_animate6)})});_defineProperty(_this,"leaveFirstPerson",function(){if(_this.state.firstPerson){_this.controls.maxPolarAngle=Math.PI*0.5;_this.controls.panSpeed=1;_this.controls.enableZoom=true;_this.setState({firstPerson:false},function(){var cameraPos=_this.props.sceneContext.scene.view.camera.position;var bounds=[cameraPos.x-1000,cameraPos.y-1000,cameraPos.x+1000,cameraPos.y+1000];_this.setViewToExtent(bounds);_this.updateUrlParams()})}});_defineProperty(_this,"updateUrlParams",function(){var tpos=_this.props.sceneContext.scene.view.controls.target;var cpos=_this.props.sceneContext.scene.view.camera.position;UrlParams.updateParams({v3d:[tpos.x,tpos.y,tpos.z,cpos.x,cpos.y,cpos.z,_this.state.firstPerson?_this.personHeight:0].map(function(v){return v.toFixed(1)}).join(",")})});_defineProperty(_this,"restoreView",function(viewState){if(viewState.cameraPos&&viewState.center){var cameraPos=_this.props.sceneContext.scene.view.camera.position;cameraPos.x=viewState.cameraPos[0];cameraPos.y=viewState.cameraPos[1];cameraPos.z=viewState.cameraPos[2];var controlsTarget=_this.props.sceneContext.scene.view.controls.target;controlsTarget.x=viewState.center[0];controlsTarget.y=viewState.center[1];controlsTarget.z=viewState.center[2];_this.personHeight=viewState.personHeight;if(_this.personHeight>0){_this.controls.maxPolarAngle=0.8*Math.PI;_this.controls.panSpeed=600;_this.controls.enableZoom=false;_this.setState({firstPerson:true})}_this.props.sceneContext.scene.notifyChange()}});_this.animationInterrupted=false;_this.personHeight=2;_this.prevTarget=null;return _this}_inherits(MapControls3D,_React$Component);return _createClass(MapControls3D,[{key:"componentDidMount",value:function componentDidMount(){var sceneElement=this.props.sceneContext.scene.domElement;sceneElement.tabIndex=0;this.controls=new MapControls(this.props.sceneContext.scene.view.camera,sceneElement);this.controls.zoomToCursor=true;this.controls.enableDamping=true;this.controls.dampingFactor=0.2;this.controls.maxPolarAngle=Math.PI*0.5;sceneElement.addEventListener("keydown",this.keyHandler);this.props.sceneContext.scene.view.setControls(this.controls);var targetPos=this.props.sceneContext.scene.view.camera.position.clone();targetPos.z=0;this.controls.target=targetPos;this.controls.addEventListener("change",this.updateControlsTarget);sceneElement.addEventListener("dblclick",this.switchToFirstPersonView);this.props.onControlsSet(this)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.animationInterrupted=true;var sceneElement=this.props.sceneContext.scene.domElement;sceneElement.addEventListener("keydown",this.keyHandler);this.controls.removeEventListener("change",this.updateControlsTarget);this.props.sceneContext.scene.domElement.removeEventListener("dblclick",this.switchToFirstPersonView);// Don't explicitly remove controls from the view, they will be removed with the instance
+}},{key:"render",value:function render(){var _this2=this;var firstPersonButtonClasses=classNames({"map3d-firstperson-button":true,"map3d-firstperson-button-active":this.state.firstPerson});return[/*#__PURE__*/React.createElement("div",{className:"map3d-nav-pan",key:"MapPanWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-up",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,0,1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-left",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"home",onClick:function onClick(){return _this2.home()}}),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-right",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,-1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-down",onMouseDown:function onMouseDown(ev){return _this2.pan(ev,0,-1)}}),/*#__PURE__*/React.createElement("span",null)),/*#__PURE__*/React.createElement("div",{className:"map3d-nav-rotate",key:"MapRotateWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-up",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,0,1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-left",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"point",onClick:function onClick(){return _this2.resetTilt()}}),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-right",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,-1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-down",onMouseDown:function onMouseDown(ev){return _this2.tilt(ev,0,-1)}}),/*#__PURE__*/React.createElement("span",null)),/*#__PURE__*/React.createElement("div",{className:firstPersonButtonClasses,key:"FirstPersonButton",onClick:this.toggleFirstPersonControls},/*#__PURE__*/React.createElement(Icon,{icon:"person"}))]}}])}(React.Component);_defineProperty(MapControls3D,"propTypes",{currentTask:PropTypes.string,onControlsSet:PropTypes.func,sceneContext:PropTypes.object});export default connect(function(state){return{currentTask:state.task.id}},{})(MapControls3D);

package/components/map3d/Measure3D.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 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
+ */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:"measure-result controlgroup"},/*#__PURE__*/React.createElement("input",{className:"measure-result-field",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
@@ -22,4 +22,4 @@ var z1=(_elevationCache=elevationCache[iY*numX+iX])!==null&&_elevationCache!==vo
 var dz1=Math.abs(z3-z1);var dz2=Math.abs(z4-z2);if(dz1<dz2){var area1=_this.triangleArea([-deltaX,0,z1-z2],[0,deltaY,z3-z2]);var area2=_this.triangleArea([0,-deltaY,z1-z4],[deltaX,0,z3-z4]);area+=area1+area2}else{var _area=_this.triangleArea([deltaX,0,z2-z1],[0,deltaY,z4-z1]);var _area2=_this.triangleArea([-deltaX,0,z4-z3],[0,-deltaY,z1-z3]);area+=_area+_area2}}}_this.setState({result:area});// Setup for next measurement
 _this.restart()});_defineProperty(_this,"measureHeight",function(lineString){if(lineString===null){_this.restart();return}_this.clearResult();_this.measurementObjects.push(lineString);// Setup for next measurement
 _this.restart()});_defineProperty(_this,"getElevation",function(point){return _this.props.sceneContext.getTerrainHeightFromMap(point)});_defineProperty(_this,"triangleArea",function(u,v){var cross=[u[1]*v[2]-u[2]*v[1],u[0]*v[2]-u[2]*v[0],u[0]*v[1]-u[1]*v[0]];return 0.5*Math.sqrt(cross[0]*cross[0]+cross[1]*cross[1]+cross[2]*cross[2])});_this.measureTool=null;_this.drawLayer=null;_this.measurementObjects=[];return _this}_inherits(Measure3D,_React$Component);return _createClass(Measure3D,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.state.mode&&this.state.mode!==prevState.mode){this.clearResult();this.restart()}if(this.state.elevUnit!==prevState.elevUnit){// Re-render height label
-this.measurementObjects[0].rebuildLabels();this.props.sceneContext.scene.notifyChange()}}},{key:"render",value:function render(){var _this2=this,_this$state$result;return[/*#__PURE__*/React.createElement(TaskBar,{key:"TaskBar",onHide:this.onHide,onShow:this.onShow,task:"Measure3D"},function(){return{body:/*#__PURE__*/React.createElement("div",null,_this2.renderModeSwitcher(),_this2.renderResult())}}),(_this$state$result=this.state.result)!==null&&_this$state$result!==void 0&&_this$state$result.profile?/*#__PURE__*/React.createElement(HeightProfile3D,{data:this.state.result.profile,key:"HeightProfile",sceneContext:this.props.sceneContext}):null]}}])}(React.Component);_defineProperty(Measure3D,"propTypes",{maxSampleCount:PropTypes.number,minMeasureLength:PropTypes.number,sceneContext:PropTypes.object});_defineProperty(Measure3D,"defaultProps",{maxSampleCount:500,minMeasureLength:5});export{Measure3D as default};
+this.measurementObjects[0].rebuildLabels();this.props.sceneContext.scene.notifyChange()}}},{key:"render",value:function render(){var _this2=this,_this$state$result;return[/*#__PURE__*/React.createElement(TaskBar,{key:"TaskBar",onHide:this.onHide,onShow:this.onShow,task:"Measure3D"},function(){return{body:/*#__PURE__*/React.createElement("div",{className:"measure-body"},_this2.renderModeSwitcher(),_this2.renderResult())}}),(_this$state$result=this.state.result)!==null&&_this$state$result!==void 0&&_this$state$result.profile?/*#__PURE__*/React.createElement(HeightProfile3D,{data:this.state.result.profile,key:"HeightProfile",sceneContext:this.props.sceneContext}):null]}}])}(React.Component);_defineProperty(Measure3D,"propTypes",{maxSampleCount:PropTypes.number,minMeasureLength:PropTypes.number,sceneContext:PropTypes.object});_defineProperty(Measure3D,"defaultProps",{maxSampleCount:500,minMeasureLength:5});export{Measure3D as default};

package/components/map3d/View3DSwitcher.js

@@ -4,4 +4,4 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import PropTypes from"prop-types";import{setView3dMode,View3DMode}from"../../actions/display";import Icon from"../Icon";import"./style/View3DSwitcher.css";var View3DSwitcher=/*#__PURE__*/function(_React$Component){function View3DSwitcher(){var _this;_classCallCheck(this,View3DSwitcher);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,View3DSwitcher,[].concat(args));_defineProperty(_this,"state",{expanded:false});_defineProperty(_this,"render",function(){var right=_this.props.mapMargins.right;var bottom=_this.props.mapMargins.bottom;var style={right:"calc(1.5em + "+right+"px)",bottom:"calc(var(--bottombar-height) + "+bottom+"px + "+(3+4*_this.props.position)+"em)"};var buttons=[{mode:View3DMode.DISABLED,icon:"2d"},{mode:View3DMode.FULLSCREEN,icon:"3d"},{mode:View3DMode.SPLITSCREEN,icon:"3d2d"}];var activeButton=buttons.splice(_this.props.view3dMode,1)[0];return/*#__PURE__*/React.createElement("div",{className:"View3DSwitcher "+(_this.state.expanded?"view3d-switcher-expanded":""),style:style},/*#__PURE__*/React.createElement("button",{className:"map-button "+(_this.state.expanded?"map-button-active":""),onClick:function onClick(){return _this.setState(function(state){return{expanded:!state.expanded}})}},/*#__PURE__*/React.createElement(Icon,{icon:activeButton.icon,size:"xlarge"})),buttons.map(function(button){return/*#__PURE__*/React.createElement("button",{className:"map-button",key:button.icon,onClick:function onClick(){return _this.switchMode(button.mode)}},/*#__PURE__*/React.createElement(Icon,{icon:button.icon,size:"xlarge"}))}))});_defineProperty(_this,"switchMode",function(mode){_this.props.setView3dMode(mode);_this.setState({expanded:false})});return _this}_inherits(View3DSwitcher,_React$Component);return _createClass(View3DSwitcher)}(React.Component);_defineProperty(View3DSwitcher,"propTypes",{mapMargins:PropTypes.object,position:PropTypes.number,setView3dMode:PropTypes.func,switchTo:PropTypes.string,view3dMode:PropTypes.number});export default connect(function(state){return{mapMargins:state.windows.mapMargins,view3dMode:state.display.view3dMode}},{setView3dMode:setView3dMode})(View3DSwitcher);
+ */import React from"react";import{connect}from"react-redux";import PropTypes from"prop-types";import{setView3dMode,View3DMode}from"../../actions/display";import Icon from"../Icon";import MapButton from"../MapButton";import"./style/View3DSwitcher.css";var View3DSwitcher=/*#__PURE__*/function(_React$Component){function View3DSwitcher(){var _this;_classCallCheck(this,View3DSwitcher);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,View3DSwitcher,[].concat(args));_defineProperty(_this,"state",{expanded:false});_defineProperty(_this,"render",function(){var buttons=[{mode:View3DMode.DISABLED,icon:"2d"},{mode:View3DMode.FULLSCREEN,icon:"3d"},{mode:View3DMode.SPLITSCREEN,icon:"3d2d"}];var activeButton=buttons.splice(_this.props.view3dMode,1)[0];return/*#__PURE__*/React.createElement(MapButton,{active:_this.state.expanded,icon:activeButton.icon,iconSize:"xlarge",onClick:function onClick(){return _this.setState(function(state){return{expanded:!state.expanded}})},position:_this.props.position},/*#__PURE__*/React.createElement("div",{className:"view3d-switcher-buttons"+(_this.state.expanded?" view3d-switcher-buttons-expanded":"")},buttons.map(function(button){return/*#__PURE__*/React.createElement("button",{className:"map-button",key:button.icon,onClick:function onClick(){return _this.switchMode(button.mode)}},/*#__PURE__*/React.createElement(Icon,{icon:button.icon,size:"xlarge"}))})))});_defineProperty(_this,"switchMode",function(mode){_this.props.setView3dMode(mode);_this.setState({expanded:false})});return _this}_inherits(View3DSwitcher,_React$Component);return _createClass(View3DSwitcher)}(React.Component);_defineProperty(View3DSwitcher,"propTypes",{position:PropTypes.number,setView3dMode:PropTypes.func,switchTo:PropTypes.string,view3dMode:PropTypes.number});export default connect(function(state){return{view3dMode:state.display.view3dMode}},{setView3dMode:setView3dMode})(View3DSwitcher);

package/components/map3d/drawtool/CreateTool3D.js

@@ -6,4 +6,4 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  * LICENSE file in the root directory of this source tree.
  */import React from"react";import{default as GiroShape}from"@giro3d/giro3d/entities/Shape";import PropTypes from"prop-types";import{BoxGeometry,Color,ConeGeometry,CylinderGeometry,DoubleSide,ExtrudeGeometry,Mesh,MeshStandardMaterial,Shape,SphereGeometry}from"three";import LocaleUtils from"../../../utils/LocaleUtils";import Icon from"../../Icon";import ColorButton from"../../widgets/ColorButton";import NumberInput from"../../widgets/NumberInput";var CreateTool3D=/*#__PURE__*/function(_React$Component){function CreateTool3D(){var _this;_classCallCheck(this,CreateTool3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,CreateTool3D,[].concat(args));_defineProperty(_this,"moveDrawCursor",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=_this.props.sceneContext.getSceneIntersection(x,y);if(intersection){var p=intersection.point;_this.drawCursor.setPoints([p])}else{_this.drawCursor.setPoints([])}_this.props.sceneContext.scene.notifyChange()});_defineProperty(_this,"drawShapeOnRelease",function(ev){if(ev.button===0){var renderer=_this.props.sceneContext.scene.renderer;renderer.domElement.addEventListener("pointerup",_this.drawShape,{once:true});renderer.domElement.addEventListener("pointermove",function(){renderer.domElement.removeEventListener("pointerup",_this.drawShape)})}});_defineProperty(_this,"drawShape",function(){var drawGroup=_this.props.sceneContext.getSceneObject(_this.props.drawGroupId);if(_this.drawCursor.points.length===0||!drawGroup){return}var geometry=null;var s=_this.props.baseSize;if(_this.props.geomType==="Cuboid"){geometry=new BoxGeometry(s,s,s)}else if(_this.props.geomType==="Wedge"){var shape=new Shape;shape.moveTo(-0.5*s,-0.5*s);shape.lineTo(0.5*s,-0.5*s);shape.lineTo(0.5*s,0.5*s);shape.lineTo(-0.5*s,-0.5*s);geometry=new ExtrudeGeometry(shape,{depth:s})}else if(_this.props.geomType==="Cylinder"){geometry=new CylinderGeometry(0.5*s,0.5*s,s)}else if(_this.props.geomType==="Pyramid"){geometry=new ConeGeometry(0.5*s*Math.sqrt(2),s,4,1,false,Math.PI/4);// Ensure flat normals (pointing from faces, not edges)
 geometry=geometry.toNonIndexed();geometry.computeVertexNormals()}else if(_this.props.geomType==="Sphere"){geometry=new SphereGeometry(0.5*s)}else if(_this.props.geomType==="Cone"){geometry=new ConeGeometry(0.5*s,s)}if(geometry){geometry.rotateX(Math.PI/2);// Z-up
-var material=new MeshStandardMaterial({color:_construct(Color,_toConsumableArray(_this.props.color.map(function(c){return c/255})))});material.side=DoubleSide;var mesh=new Mesh(geometry,material);mesh.castShadow=true;mesh.receiveShadow=true;drawGroup.add(mesh);mesh.position.copy(_this.drawCursor.points[0]);mesh.position.z+=0.5*s;mesh.updateMatrixWorld();_this.props.sceneContext.scene.notifyChange();_this.props.objectCreated(mesh)}});return _this}_inherits(CreateTool3D,_React$Component);return _createClass(CreateTool3D,[{key:"componentDidMount",value:function componentDidMount(){this.drawCursor=new GiroShape({showVertices:true});this.props.sceneContext.scene.add(this.drawCursor);var renderer=this.props.sceneContext.scene.renderer;renderer.domElement.addEventListener("pointermove",this.moveDrawCursor);renderer.domElement.addEventListener("pointerdown",this.drawShapeOnRelease)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.props.sceneContext.scene.remove(this.drawCursor);this.drawCursor=null;var renderer=this.props.sceneContext.scene.renderer;renderer.domElement.removeEventListener("pointermove",this.moveDrawCursor);renderer.domElement.removeEventListener("pointerdown",this.drawShapeOnRelease)}},{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar"},/*#__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("span",null,LocaleUtils.tr("redlining.size"),":\xA0"),/*#__PURE__*/React.createElement(NumberInput,{max:99,min:1,mobile:true,onChange:this.props.baseSizeChanged,value:this.props.baseSize})))}}])}(React.Component);_defineProperty(CreateTool3D,"propTypes",{baseSize:PropTypes.number,baseSizeChanged:PropTypes.func,color:PropTypes.array,colorChanged:PropTypes.func,drawGroupId:PropTypes.string,geomType:PropTypes.string,objectCreated:PropTypes.func,sceneContext:PropTypes.object});export{CreateTool3D as default};
+var material=new MeshStandardMaterial({color:_construct(Color,_toConsumableArray(_this.props.color.map(function(c){return c/255})))});material.side=DoubleSide;var mesh=new Mesh(geometry,material);mesh.castShadow=true;mesh.receiveShadow=true;drawGroup.add(mesh);mesh.position.copy(_this.drawCursor.points[0]);mesh.position.z+=0.5*s;mesh.updateMatrixWorld();_this.props.sceneContext.scene.notifyChange();_this.props.objectCreated(mesh)}});return _this}_inherits(CreateTool3D,_React$Component);return _createClass(CreateTool3D,[{key:"componentDidMount",value:function componentDidMount(){this.drawCursor=new GiroShape({showVertices:true});this.props.sceneContext.scene.add(this.drawCursor);var renderer=this.props.sceneContext.scene.renderer;renderer.domElement.addEventListener("pointermove",this.moveDrawCursor);renderer.domElement.addEventListener("pointerdown",this.drawShapeOnRelease)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.props.sceneContext.scene.remove(this.drawCursor);this.drawCursor=null;var renderer=this.props.sceneContext.scene.renderer;renderer.domElement.removeEventListener("pointermove",this.moveDrawCursor);renderer.domElement.removeEventListener("pointerdown",this.drawShapeOnRelease)}},{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar"},/*#__PURE__*/React.createElement("div",{className:"redlining-control"},/*#__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("div",{className:"redlining-control"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("redlining.size"),":\xA0"),/*#__PURE__*/React.createElement(NumberInput,{max:99,min:1,mobile:true,onChange:this.props.baseSizeChanged,value:this.props.baseSize})))}}])}(React.Component);_defineProperty(CreateTool3D,"propTypes",{baseSize:PropTypes.number,baseSizeChanged:PropTypes.func,color:PropTypes.array,colorChanged:PropTypes.func,drawGroupId:PropTypes.string,geomType:PropTypes.string,objectCreated:PropTypes.func,sceneContext:PropTypes.object});export{CreateTool3D as default};

package/components/map3d/drawtool/EditTool3D.js

@@ -1,9 +1,10 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _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 _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 _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}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 _readOnlyError(r){throw new TypeError("\""+r+"\" is read-only")}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 _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t)}:p}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value}},_get.apply(null,arguments)}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););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 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 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})});_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};
+ */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(){if(_this.parent===null){// Group has already been removed from scene
+return}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,[{key:"clone",value:function clone(){var clone=_superPropGet(GroupSelection,"clone",this,3)([]);clone.isGroupSelection=true;return clone}}])}(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,"toolButtonClicked",function(key){if(key==="NumericInput"){_this2.toggleNumericInput()}else if(key==="clone"){_this2.cloneSelectedObject()}});_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===object){_this2.props.objectPicked(null)}else if(_this2.props.selectedObject.isGroupSelection){if(_this2.props.selectedObject.hasObject(object)){_this2.props.selectedObject.removeFromSelection(object);if(_this2.props.selectedObject.children.length===1){var child=_this2.props.selectedObject.children[0];_this2.props.selectedObject.dissolve();_this2.props.objectPicked(child)}}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})});_defineProperty(_this2,"setLabel",function(text){_this2.setState({label:text});_this2.props.selectedObject.userData.label=text;_this2.props.sceneContext.updateObjectLabel(_this2.props.selectedObject)});_defineProperty(_this2,"cloneSelectedObject",function(){if(_this2.props.selectedObject){var clonedObject=_this2.deepClone(_this2.props.selectedObject);clonedObject.position.x+=10;clonedObject.position.y+=10;clonedObject.updateMatrixWorld();_this2.props.selectedObject.parent.add(clonedObject);_this2.props.objectPicked(clonedObject)}});_defineProperty(_this2,"deepClone",function(object){var clone=object.clone(false);if(object.geometry){clone.geometry=object.geometry.clone()}if(object.material){if(Array.isArray(object.material)){clone.material=object.material.map(function(mat){return mat.clone()})}else{clone.material=object.material.clone()}}object.children.forEach(function(child){clone.add(_this2.deepClone(child))});return clone});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){var _prevProps$selectedOb;if((_prevProps$selectedOb=prevProps.selectedObject)!==null&&_prevProps$selectedOb!==void 0&&_prevProps$selectedOb.isGroupSelection){prevProps.selectedObject.dissolve()}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:"clone",tooltip:LocaleUtils.tr("draw3d.clone"),icon:"clone"},{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("div",{className:"redlining-control"},/*#__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("div",{className:"redlining-control"},/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.mode,buttons:editButtons,onClick:function onClick(mode){return _this5.setState({mode:mode})}})),/*#__PURE__*/React.createElement("div",{className:"redlining-control"},/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.numericInput?"NumericInput":null,buttons:extraButtons,onClick:this.toolButtonClicked})),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===0?/*#__PURE__*/React.createElement("div",{className:"redlining-message",key:"CtrlHint"},LocaleUtils.tr("draw3d.ctrlhint")):null,this.state.selectCount===1?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"Label"},/*#__PURE__*/React.createElement("div",{className:"redlining-control redlining-control-fill controlgroup"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("draw3d.label"),": "),/*#__PURE__*/React.createElement(TextInput,{className:"controlgroup-fillitem",onChange:this.setLabel,value:this.state.label}))):null,this.state.selectCount===2?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"CSGControls"},/*#__PURE__*/React.createElement("div",{className:"redlining-control redlining-control-fill"},/*#__PURE__*/React.createElement(ButtonBar,{buttons:csgButtons,onClick:this.applyCsgOperation}))):null,this.state.csgBackup?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"CSGControls"},/*#__PURE__*/React.createElement("div",{className:"redlining-control redlining-control-fill"},/*#__PURE__*/React.createElement(ButtonBar,{buttons:[{key:"undo",label:LocaleUtils.tr("draw3d.undoBool")}],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

@@ -1,16 +1,4 @@
-div.draw3d-numeric-input-body {
-    font-size: 90%;
-}
-
 div.draw3d-numeric-input-body > table {
     width: 100%;
+    font-size: 90%;
 }
-
-
-div.draw3d-label-controls {
-    display: flex;
-}
-
-div.draw3d-label-controls > div.TextInput {
-    flex: 1 1 auto;
-}

package/components/map3d/style/Map3D.css

@@ -1,6 +1,5 @@
 div.map3d-body {
-    margin: -0.25em;
-    height: calc(100% + 0.5em);
+    height: 100%;
     position: relative;
 }
 

package/components/map3d/style/Map3DLight.css

@@ -16,6 +16,7 @@
 
 div.map3d-animation-slider {
     display: flex;
+    align-items: flex-end;
 }
 
 div.map3d-animation-slider > span.icon {
@@ -52,14 +53,21 @@ div.maplight3d-slider {
     padding: 0 1em;
 }
 
-div.maplight3d-slider > input {
-    margin-top: -0.5em;
-    margin-bottom: 0.5em;
+div.maplight3d-slider > input[type=range] {
+    margin-top: -0.25em;
     width: 100%;
     outline: none;
 }
 
+div.maplight3d-slider > input[type=time],
+div.maplight3d-slider > input[type=date] {
+    margin-top: -0.5em;
+    font-size: 80%;
+    text-align: center;
+}
+
 div.maplight3d-slider-label {
+    margin-top: 0.5em;
     position: relative;
     pointer-events: none;
 }

package/components/map3d/style/MapControls3D.css

@@ -21,7 +21,7 @@ div.map3d-nav-rotate > span {
 }
 
 div.map3d-nav-pan {
-    top: 5.5em;
+    top: 4.5em;
 }
 
 div.map3d-nav-pan > span.icon-home {
@@ -29,7 +29,7 @@ div.map3d-nav-pan > span.icon-home {
 }
 
 div.map3d-nav-rotate {
-    top: 10.5em;
+    top: 9em;
 }
 
 div.map3d-firstperson-button {
@@ -37,7 +37,7 @@ div.map3d-firstperson-button {
     width: 2em;
     height: 2em;
     right: 2em;
-    top: 15.5em;
+    top: 13.5em;
     z-index: 1;
     display: flex;
     align-items: center;

package/components/map3d/style/View3DSwitcher.css

@@ -1,27 +1,15 @@
-div.View3DSwitcher {
+div.view3d-switcher-buttons > button {
+    transition: right 0.25s;
     position: absolute;
-    height: 3em;
-    width: 3em;
-}
-
-div.View3DSwitcher > button {
-    bottom: 0;
     right: 0;
-    transition: right 0.25s;
-}
-
-div.View3DSwitcher.view3d-switcher-expanded {
-    width: 11em;
+    bottom: 0;
+    z-index: -1;
 }
 
-div.View3DSwitcher > button:nth-child(1) {
-    z-index: 4;
+div.view3d-switcher-buttons-expanded > button:nth-child(1) {
+    right: 3.5em;
 }
 
-div.View3DSwitcher.view3d-switcher-expanded > button:nth-child(2) {
-    right: 4em;
+div.view3d-switcher-buttons-expanded > button:nth-child(2) {
+    right: 7em;
 }
-
-div.View3DSwitcher.view3d-switcher-expanded > button:nth-child(3) {
-    right: 8em;
-}

package/components/map3d/utils/Tiles3DStyle.js

@@ -7,5 +7,4 @@ function _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,
  */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;
+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};tileLabels[batchId].labelObject=createLabelObject(tileLabels[batchId]);labelObjects.add(tileLabels[batchId].labelObject)});group.userData.tileLabels=tileLabels;group.add(labelObjects)}}};export default Tiles3DStyle;

package/components/style/App.css

@@ -161,7 +161,7 @@ button.button:not(:disabled):active > * {
 }
 
 button.button > span:not(.icon) {
-    margin: 0 0.5em;
+    margin: 0 0.25em;
 }
 
 button.button > div.spinner {
@@ -174,6 +174,11 @@ div.controlgroup {
     align-items: center;
 }
 
+div.controlgroup > .controlgroup-fillitem {
+    flex: 1 1 auto;
+    width: 0;
+}
+
 div.controlgroup > *:not(:last-child):not(span) {
     margin-right: -1px;
 }

package/{plugins/style/Buttons.css → components/style/MapButton.css}

@@ -1,10 +1,12 @@
+div.map-button-container {
+    position: relative;
+    pointer-events: initial;
+}
+
 button.map-button {
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 2;
-    position: absolute !important;
-    right: 1.5em;
     background-color: var(--map-button-bg-color);
     width: 3em;
     height: 3em;
@@ -12,8 +14,9 @@ button.map-button {
     color: var(--map-button-text-color);
     border: none;
     box-shadow: 0px 5px 10px rgba(136, 136, 136, 0.5);
-    transition: background-color 0.5s, color 0.5s;
+    transition: background-color 0.25s, color 0.25s;
     cursor: pointer;
+    margin: 0.5em;
 }
 
 button.map-button:hover {
@@ -36,33 +39,12 @@ button.map-button-disabled:hover {
     color: var(--map-button-text-color);
 }
 
-button.map-button.locate-button-PERMISSION_DENIED {
-    opacity: 0.7;
-    cursor: default;
-}
-
-button.map-button.locate-button-PERMISSION_DENIED:hover {
-    background-color: var(--map-button-bg-color);
-    color: var(--map-button-text-color);
-}
-
-button.map-button.locate-button-LOCATING,
-button.map-button.locate-button-ENABLED {
-    background-color: var(--map-button-text-color);
-    color: var(--map-button-bg-color);
-}
-
-button.map-button.locate-button-FOLLOWING {
+button.map-button-engaged {
     background-color: yellow;
     color: var(--map-button-bg-color);
 }
 
-button.map-button.locate-button-LOCATING > div.spinner {
+button.map-button > div.spinner {
     width: 1.5em;
     height: 1.5em;
 }
-
-button.map-button-engaged {
-    background-color: yellow;
-    color: var(--map-button-bg-color);
-}

package/components/style/PluginsContainer.css

@@ -1,4 +1,25 @@
 div.PluginsContainer {
-    width: 100%;
-    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
 }
+
+div.map-buttons-container {
+    position: absolute;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    align-content: flex-start;
+    justify-content: flex-start;
+    flex-wrap: wrap-reverse;
+    z-index: 2;
+}
+
+div.map-buttons-spacer {
+    display: inline-block;
+    width: 3em;
+    height: 3em;
+}

package/components/style/SearchBox.css

@@ -132,7 +132,6 @@ div.searchbox-filter-options {
     border-right: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
     box-shadow: 0px 2px 4px rgba(136, 136, 136, 0.5);
-    padding: 0.25em;
 }
 
 div.searchbox-filter-options > table {
@@ -140,7 +139,7 @@ div.searchbox-filter-options > table {
 }
 
 div.searchbox-filter-options > table td {
-    padding: 0.125em 0.25em;
+    padding: 0.25em;
     white-space: nowrap;
 }
 

package/components/timeline/style/InfiniteTimeline.css

@@ -11,6 +11,7 @@ div.inftimeline-toolbar {
     font-size: 75%;
     align-items: center;
     flex: 0 0 auto;
+    margin: 0.25em 0;
 }
 
 div.inftimeline-toolbar-block {