qwc2 2025.10.13 → 2025.10.14

package/components/map3d/MapControls3D.js

@@ -1,12 +1,397 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _construct(t,e,r){if(_isNativeReflectConstruct())return Reflect.construct.apply(null,arguments);var o=[null];o.push.apply(o,e);var p=new(t.bind.apply(t,o));return r&&_setPrototypeOf(p,r.prototype),p}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _construct(t, e, r) { if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments); var o = [null]; o.push.apply(o, e); var p = new (t.bind.apply(t, o))(); return r && _setPrototypeOf(p, r.prototype), p; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import classNames from"classnames";import PropTypes from"prop-types";import{MOUSE,Vector3}from"three";import ConfigUtils from"../../utils/ConfigUtils";import{UrlParams}from"../../utils/PermaLinkUtils";import Icon from"../Icon";import{MapButtonPortalContext}from"../PluginsContainer";import FirstPersonControls3D from"./utils/FirstPersonControls3D";import OrbitControls3D from"./utils/OrbitControls3D";import"./style/MapControls3D.css";// FIXME: camera.fov is 30, but in reality seems to be 50 (as would be the threejs default)
-var CAMERA_FOV=50;var MapControls3D=/*#__PURE__*/function(_React$Component){function MapControls3D(props){var _buttonMap$_this$prop,_buttonMap$_this$prop2,_buttonMap$_this$prop3;var _this;_classCallCheck(this,MapControls3D);_this=_callSuper(this,MapControls3D,[props]);_defineProperty(_this,"state",{pickingFirstPerson:false,firstPerson:false});_defineProperty(_this,"unload",function(el){// componentWillUnmount is called too early, so do cleanup when the element is actually removed
-if(!el){_this.controls.removeEventListener("change",_this.updateControlsTarget);_this.fpcontrols.removeEventListener("change",_this.updateFpUrlParams);if(_this.state.firstPerson){_this.fpcontrols.disconnect()}else{_this.controls.disconnect()}_this.props.sceneContext.scene.domElement.removeEventListener("dblclick",_this.switchToFirstPersonView)}});_defineProperty(_this,"switchToFirstPersonView",function(ev){// Don't do anything if a task is set, may interfere
-if(!_this.props.currentTask&&!_this.state.firstPerson){_this.setupFirstPerson(ev)}});_defineProperty(_this,"toggleFirstPersonControls",function(){if(_this.state.firstPerson){_this.leaveFirstPerson()}else if(_this.state.pickingFirstPerson){_this.props.sceneContext.scene.domElement.removeEventListener("click",_this.setupFirstPerson);_this.props.sceneContext.scene.domElement.style.cursor="";_this.setState({pickingFirstPerson:false})}else{_this.props.sceneContext.scene.domElement.addEventListener("click",_this.setupFirstPerson,{once:true});var cursor=ConfigUtils.getAssetsPath()+"/img/person.svg";_this.props.sceneContext.scene.domElement.style.cursor="url(".concat(cursor,"), pointer");_this.setState({pickingFirstPerson:true})}});_defineProperty(_this,"setupFirstPerson",function(ev){_this.props.sceneContext.scene.domElement.style.cursor="";var rect=ev.target.getBoundingClientRect();var mouseX=(ev.clientX-rect.left)/rect.width*2-1;var mouseY=-((ev.clientY-rect.top)/rect.height)*2+1;var intersection=_this.props.sceneContext.getSceneIntersection(mouseX,mouseY,false);if(!intersection){return}var pos=intersection.point;_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(z){var camerapos=new Vector3(pos.x,pos.y,z+_this.fpcontrols.personHeight);var targetpos=new Vector3(pos.x,pos.y+300,z+_this.fpcontrols.personHeight);_this.controls.animateTo(camerapos,targetpos,0,function(){_this.controls.disconnect();_this.fpcontrols.connect(_this.props.sceneContext);_this.fpcontrols.setView(camerapos,new Vector3(0,1,0));_this.setState({firstPerson:true,pickingFirstPerson:false})})})});_defineProperty(_this,"leaveFirstPerson",function(){if(_this.state.firstPerson){_this.setState({firstPerson:false},function(){// Need to ensure this.state.firstPerson is false to avoid endless loop
-var camerapos=_this.props.sceneContext.scene.view.camera.position;_this.fpcontrols.disconnect();_this.controls.connect(_this.props.sceneContext);_this.controls.setView(camerapos,new Vector3().addVectors(camerapos,_this.fpcontrols.lookAt));var bounds=[camerapos.x-750,camerapos.y-750,camerapos.x+750,camerapos.y+750];_this.setViewToExtent(bounds)})}});_defineProperty(_this,"home",function(){var extent=_this.props.sceneContext.map.extent;var bounds=[extent.west,extent.south,extent.east,extent.north];_this.setViewToExtent(bounds)});_defineProperty(_this,"setViewToExtent",function(bounds){var angle=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;_this.leaveFirstPerson();var fov=CAMERA_FOV/180*Math.PI;var cameraHeight=(bounds[2]-bounds[0])/(2*Math.tan(fov/2));var center={x:0.5*(bounds[0]+bounds[2]),y:0.5*(bounds[1]+bounds[3])};var camerapos=new Vector3(center.x,center.y,cameraHeight);var target=new Vector3(center.x,center.y,0);var h=_this.props.sceneContext.getTerrainHeightFromMap([center.x,center.y]);// Fall back to getTerrainHeightFromDTM if map is not yet loaded
-if(h===undefined){_this.props.sceneContext.getTerrainHeightFromDTM([center.x,center.y]).then(function(h2){camerapos.z+=h2;target.z+=h2;_this.controls.animateTo(camerapos,target,angle)})}else{camerapos.z+=h;target.z+=h;_this.controls.animateTo(camerapos,target,angle)}});_defineProperty(_this,"pan",function(ev,dx,dy){var panInterval=setInterval(function(){_this.props.sceneContext.scene.view.controls.panView(dx,dy)},50);ev.view.addEventListener("pointerup",function(){clearInterval(panInterval)},{once:true})});_defineProperty(_this,"tilt",function(ev,azimuth,polar){var tiltInterval=setInterval(function(){_this.props.sceneContext.scene.view.controls.tiltView(azimuth,polar)},50);ev.view.addEventListener("pointerup",function(){clearInterval(tiltInterval)},{once:true})});_defineProperty(_this,"resetTilt",function(){var camerapos=_this.props.sceneContext.scene.view.camera.position;if(_this.state.firstPerson){var newLookAt=_this.fpcontrols.lookAt.clone();newLookAt.z=0;_this.fpcontrols.setView(camerapos,newLookAt.normalize())}else{var target=_this.controls.target;var newcamerapos=new Vector3(target.x,target.y,target.distanceTo(camerapos));_this.controls.animateTo(newcamerapos,target,0)}});_defineProperty(_this,"zoom",function(ev,delta){var zoomInterval=setInterval(function(){var camerapos=_this.props.sceneContext.scene.view.camera.position;var target=_this.controls.target;var k=Math.min(150,Math.sqrt(target.distanceTo(camerapos)));_this.props.sceneContext.scene.view.controls.zoomView(delta*k)},50);ev.view.addEventListener("pointerup",function(){clearInterval(zoomInterval)},{once:true})});_defineProperty(_this,"updateUrlParams",function(){var cpos=_this.props.sceneContext.scene.view.camera.position;var tpos=_this.controls.target;UrlParams.updateParams({v3d:[cpos.x,cpos.y,cpos.z,tpos.x,tpos.y,tpos.z,0].map(function(v){return v.toFixed(1)}).join(",")});_this.props.onCameraChanged([tpos.x,tpos.y,tpos.z],[cpos.x,cpos.y,cpos.z],CAMERA_FOV)});_defineProperty(_this,"updateFpUrlParams",function(){var cpos=_this.fpcontrols.target;var lkat=_this.fpcontrols.lookAt;var h=_this.fpcontrols.personHeight;UrlParams.updateParams({v3d:[cpos.x,cpos.y,cpos.z,lkat.x,lkat.y,lkat.z,h].map(function(v){return v.toFixed(1)}).join(",")});_this.props.onCameraChanged([cpos.x,cpos.y,cpos.z],null)});_defineProperty(_this,"restoreView",function(viewState){if(viewState.camera&&viewState.target){var camera=_construct(Vector3,_toConsumableArray(viewState.camera));var target=_construct(Vector3,_toConsumableArray(viewState.target));if(viewState.personHeight>0){_this.controls.disconnect();_this.fpcontrols.connect(_this.props.sceneContext);_this.fpcontrols.setView(camera,target,viewState.personHeight);_this.setState({firstPerson:true})}else{_this.controls.setView(camera,target)}}});var sceneElement=props.sceneContext.scene.domElement;sceneElement.tabIndex=0;var buttonMap={pan:MOUSE.PAN,rotate:MOUSE.ROTATE,zoom:MOUSE.DOLLY};var mouseButtons={LEFT:(_buttonMap$_this$prop=buttonMap[_this.props.mouseButtons.left])!==null&&_buttonMap$_this$prop!==void 0?_buttonMap$_this$prop:null,MIDDLE:(_buttonMap$_this$prop2=buttonMap[_this.props.mouseButtons.middle])!==null&&_buttonMap$_this$prop2!==void 0?_buttonMap$_this$prop2:null,RIGHT:(_buttonMap$_this$prop3=buttonMap[_this.props.mouseButtons.right])!==null&&_buttonMap$_this$prop3!==void 0?_buttonMap$_this$prop3:null};_this.controls=new OrbitControls3D(props.sceneContext.scene.view.camera,mouseButtons);_this.fpcontrols=new FirstPersonControls3D(props.sceneContext.scene.view.camera,mouseButtons);_this.controls.connect(props.sceneContext);var targetPos=props.sceneContext.scene.view.camera.position.clone();targetPos.z=0;_this.controls.target=targetPos;_this.controls.addEventListener("change",_this.updateUrlParams);_this.fpcontrols.addEventListener("change",_this.updateFpUrlParams);sceneElement.addEventListener("dblclick",_this.switchToFirstPersonView);props.onControlsSet(_this);_this.updateUrlParams();return _this}_inherits(MapControls3D,_React$Component);return _createClass(MapControls3D,[{key:"render",value:function render(){var _this2=this;var firstPersonButtonClasses=classNames({"map3d-firstperson-button":true,"map3d-firstperson-button-active":this.state.firstPerson});return[this.props.children,/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-nav-pan","data-slot":0,key:"MapControlsPan",style:{order:1000}},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-up",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,0,1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-left",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,-1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"home",onClick:function onClick(){return _this2.home()}}),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-right",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-down",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,0,-1)}}),/*#__PURE__*/React.createElement("span",null)),this.context),/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-nav-rotate","data-slot":0,key:"MapControlsRotate",style:{order:999}},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-up",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,0,0.1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-left",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,0.1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"point",onClick:function onClick(){return _this2.resetTilt()}}),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-right",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,-0.1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-down",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,0,-0.1)}}),/*#__PURE__*/React.createElement("span",null)),this.context),/*#__PURE__*/ReactDOM.createPortal(!this.state.firstPerson?/*#__PURE__*/React.createElement("div",{className:"map3d-nav-zoom","data-slot":0,key:"MapControlsSpacerZoom",style:{order:998}},/*#__PURE__*/React.createElement("div",{onPointerDown:function onPointerDown(ev){return _this2.zoom(ev,+1)}},/*#__PURE__*/React.createElement(Icon,{icon:"plus"})),/*#__PURE__*/React.createElement("div",{onPointerDown:function onPointerDown(ev){return _this2.zoom(ev,-1)}},/*#__PURE__*/React.createElement(Icon,{icon:"minus"}))):null,this.context),/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:firstPersonButtonClasses,"data-slot":0,key:"MapControlsFirstPerson",onClick:this.toggleFirstPersonControls,style:{order:997}},/*#__PURE__*/React.createElement(Icon,{icon:"person"})),this.context),this.props.controlsPosition!=="bottom"?/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-nav-spacer",key:"MapControlsSpacer",style:{order:996}}),this.context):null]}}])}(React.Component);_defineProperty(MapControls3D,"contextType",MapButtonPortalContext);_defineProperty(MapControls3D,"propTypes",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),controlsPosition:PropTypes.string,currentTask:PropTypes.string,mouseButtons:PropTypes.object,onCameraChanged:PropTypes.func,onControlsSet:PropTypes.func,sceneContext:PropTypes.object});export default connect(function(state){return{currentTask:state.task.id}},{})(MapControls3D);
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { MOUSE, Vector3 } from 'three';
+import ConfigUtils from '../../utils/ConfigUtils';
+import { UrlParams } from '../../utils/PermaLinkUtils';
+import Icon from '../Icon';
+import { MapButtonPortalContext } from '../PluginsContainer';
+import FirstPersonControls3D from './utils/FirstPersonControls3D';
+import OrbitControls3D from './utils/OrbitControls3D';
+import './style/MapControls3D.css';
+
+// FIXME: camera.fov is 30, but in reality seems to be 50 (as would be the threejs default)
+var CAMERA_FOV = 50;
+var MapControls3D = /*#__PURE__*/function (_React$Component) {
+  function MapControls3D(props) {
+    var _buttonMap$_this$prop, _buttonMap$_this$prop2, _buttonMap$_this$prop3;
+    var _this;
+    _classCallCheck(this, MapControls3D);
+    _this = _callSuper(this, MapControls3D, [props]);
+    _defineProperty(_this, "state", {
+      pickingFirstPerson: false,
+      firstPerson: false
+    });
+    _defineProperty(_this, "unload", function (el) {
+      // componentWillUnmount is called too early, so do cleanup when the element is actually removed
+      if (!el) {
+        _this.controls.removeEventListener('change', _this.updateControlsTarget);
+        _this.fpcontrols.removeEventListener('change', _this.updateFpUrlParams);
+        if (_this.state.firstPerson) {
+          _this.fpcontrols.disconnect();
+        } else {
+          _this.controls.disconnect();
+        }
+        _this.props.sceneContext.scene.domElement.removeEventListener('dblclick', _this.switchToFirstPersonView);
+      }
+    });
+    _defineProperty(_this, "switchToFirstPersonView", function (ev) {
+      // Don't do anything if a task is set, may interfere
+      if (!_this.props.currentTask && !_this.state.firstPerson) {
+        _this.setupFirstPerson(ev);
+      }
+    });
+    _defineProperty(_this, "toggleFirstPersonControls", function () {
+      if (_this.state.firstPerson) {
+        _this.leaveFirstPerson();
+      } else if (_this.state.pickingFirstPerson) {
+        _this.props.sceneContext.scene.domElement.removeEventListener('click', _this.setupFirstPerson);
+        _this.props.sceneContext.scene.domElement.style.cursor = '';
+        _this.setState({
+          pickingFirstPerson: false
+        });
+      } else {
+        _this.props.sceneContext.scene.domElement.addEventListener('click', _this.setupFirstPerson, {
+          once: true
+        });
+        var cursor = ConfigUtils.getAssetsPath() + "/img/person.svg";
+        _this.props.sceneContext.scene.domElement.style.cursor = "url(".concat(cursor, "), pointer");
+        _this.setState({
+          pickingFirstPerson: true
+        });
+      }
+    });
+    _defineProperty(_this, "setupFirstPerson", function (ev) {
+      _this.props.sceneContext.scene.domElement.style.cursor = '';
+      var rect = ev.target.getBoundingClientRect();
+      var mouseX = (ev.clientX - rect.left) / rect.width * 2 - 1;
+      var mouseY = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
+      var intersection = _this.props.sceneContext.getSceneIntersection(mouseX, mouseY, false);
+      if (!intersection) {
+        return;
+      }
+      var pos = intersection.point;
+      _this.props.sceneContext.getTerrainHeightFromDTM([pos.x, pos.y]).then(function (z) {
+        var camerapos = new Vector3(pos.x, pos.y, z + _this.fpcontrols.personHeight);
+        var targetpos = new Vector3(pos.x, pos.y + 300, z + _this.fpcontrols.personHeight);
+        _this.controls.animateTo(camerapos, targetpos, 0, function () {
+          _this.controls.disconnect();
+          _this.fpcontrols.connect(_this.props.sceneContext);
+          _this.fpcontrols.setView(camerapos, new Vector3(0, 1, 0));
+          _this.setState({
+            firstPerson: true,
+            pickingFirstPerson: false
+          });
+        });
+      });
+    });
+    _defineProperty(_this, "leaveFirstPerson", function () {
+      if (_this.state.firstPerson) {
+        _this.setState({
+          firstPerson: false
+        }, function () {
+          // Need to ensure this.state.firstPerson is false to avoid endless loop
+          var camerapos = _this.props.sceneContext.scene.view.camera.position;
+          _this.fpcontrols.disconnect();
+          _this.controls.connect(_this.props.sceneContext);
+          _this.controls.setView(camerapos, new Vector3().addVectors(camerapos, _this.fpcontrols.lookAt));
+          var bounds = [camerapos.x - 750, camerapos.y - 750, camerapos.x + 750, camerapos.y + 750];
+          _this.setViewToExtent(bounds);
+        });
+      }
+    });
+    _defineProperty(_this, "home", function () {
+      var extent = _this.props.sceneContext.map.extent;
+      var bounds = [extent.west, extent.south, extent.east, extent.north];
+      _this.setViewToExtent(bounds);
+    });
+    _defineProperty(_this, "setViewToExtent", function (bounds) {
+      var angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      _this.leaveFirstPerson();
+      var fov = CAMERA_FOV / 180 * Math.PI;
+      var cameraHeight = (bounds[2] - bounds[0]) / (2 * Math.tan(fov / 2));
+      var center = {
+        x: 0.5 * (bounds[0] + bounds[2]),
+        y: 0.5 * (bounds[1] + bounds[3])
+      };
+      var camerapos = new Vector3(center.x, center.y, cameraHeight);
+      var target = new Vector3(center.x, center.y, 0);
+      var h = _this.props.sceneContext.getTerrainHeightFromMap([center.x, center.y]);
+      // Fall back to getTerrainHeightFromDTM if map is not yet loaded
+      if (h === undefined) {
+        _this.props.sceneContext.getTerrainHeightFromDTM([center.x, center.y]).then(function (h2) {
+          camerapos.z += h2;
+          target.z += h2;
+          _this.controls.animateTo(camerapos, target, angle);
+        });
+      } else {
+        camerapos.z += h;
+        target.z += h;
+        _this.controls.animateTo(camerapos, target, angle);
+      }
+    });
+    _defineProperty(_this, "pan", function (ev, dx, dy) {
+      var panInterval = setInterval(function () {
+        _this.props.sceneContext.scene.view.controls.panView(dx, dy);
+      }, 50);
+      ev.view.addEventListener('pointerup', function () {
+        clearInterval(panInterval);
+      }, {
+        once: true
+      });
+    });
+    _defineProperty(_this, "tilt", function (ev, azimuth, polar) {
+      var tiltInterval = setInterval(function () {
+        _this.props.sceneContext.scene.view.controls.tiltView(azimuth, polar);
+      }, 50);
+      ev.view.addEventListener('pointerup', function () {
+        clearInterval(tiltInterval);
+      }, {
+        once: true
+      });
+    });
+    _defineProperty(_this, "resetTilt", function () {
+      var camerapos = _this.props.sceneContext.scene.view.camera.position;
+      if (_this.state.firstPerson) {
+        var newLookAt = _this.fpcontrols.lookAt.clone();
+        newLookAt.z = 0;
+        _this.fpcontrols.setView(camerapos, newLookAt.normalize());
+      } else {
+        var target = _this.controls.target;
+        var newcamerapos = new Vector3(target.x, target.y, target.distanceTo(camerapos));
+        _this.controls.animateTo(newcamerapos, target, 0);
+      }
+    });
+    _defineProperty(_this, "zoom", function (ev, delta) {
+      var zoomInterval = setInterval(function () {
+        var camerapos = _this.props.sceneContext.scene.view.camera.position;
+        var target = _this.controls.target;
+        var k = Math.min(150, Math.sqrt(target.distanceTo(camerapos)));
+        _this.props.sceneContext.scene.view.controls.zoomView(delta * k);
+      }, 50);
+      ev.view.addEventListener('pointerup', function () {
+        clearInterval(zoomInterval);
+      }, {
+        once: true
+      });
+    });
+    _defineProperty(_this, "updateUrlParams", function () {
+      var cpos = _this.props.sceneContext.scene.view.camera.position;
+      var tpos = _this.controls.target;
+      UrlParams.updateParams({
+        v3d: [cpos.x, cpos.y, cpos.z, tpos.x, tpos.y, tpos.z, 0].map(function (v) {
+          return v.toFixed(1);
+        }).join(",")
+      });
+      _this.props.onCameraChanged([tpos.x, tpos.y, tpos.z], [cpos.x, cpos.y, cpos.z], CAMERA_FOV);
+    });
+    _defineProperty(_this, "updateFpUrlParams", function () {
+      var cpos = _this.fpcontrols.target;
+      var lkat = _this.fpcontrols.lookAt;
+      var h = _this.fpcontrols.personHeight;
+      UrlParams.updateParams({
+        v3d: [cpos.x, cpos.y, cpos.z, lkat.x, lkat.y, lkat.z, h].map(function (v) {
+          return v.toFixed(1);
+        }).join(",")
+      });
+      _this.props.onCameraChanged([cpos.x, cpos.y, cpos.z], null);
+    });
+    _defineProperty(_this, "restoreView", function (viewState) {
+      if (viewState.camera && viewState.target) {
+        var camera = _construct(Vector3, _toConsumableArray(viewState.camera));
+        var target = _construct(Vector3, _toConsumableArray(viewState.target));
+        if (viewState.personHeight > 0) {
+          _this.controls.disconnect();
+          _this.fpcontrols.connect(_this.props.sceneContext);
+          _this.fpcontrols.setView(camera, target, viewState.personHeight);
+          _this.setState({
+            firstPerson: true
+          });
+        } else {
+          _this.controls.setView(camera, target);
+        }
+      }
+    });
+    var sceneElement = props.sceneContext.scene.domElement;
+    sceneElement.tabIndex = 0;
+    var buttonMap = {
+      pan: MOUSE.PAN,
+      rotate: MOUSE.ROTATE,
+      zoom: MOUSE.DOLLY
+    };
+    var mouseButtons = {
+      LEFT: (_buttonMap$_this$prop = buttonMap[_this.props.mouseButtons.left]) !== null && _buttonMap$_this$prop !== void 0 ? _buttonMap$_this$prop : null,
+      MIDDLE: (_buttonMap$_this$prop2 = buttonMap[_this.props.mouseButtons.middle]) !== null && _buttonMap$_this$prop2 !== void 0 ? _buttonMap$_this$prop2 : null,
+      RIGHT: (_buttonMap$_this$prop3 = buttonMap[_this.props.mouseButtons.right]) !== null && _buttonMap$_this$prop3 !== void 0 ? _buttonMap$_this$prop3 : null
+    };
+    _this.controls = new OrbitControls3D(props.sceneContext.scene.view.camera, mouseButtons);
+    _this.fpcontrols = new FirstPersonControls3D(props.sceneContext.scene.view.camera, mouseButtons);
+    _this.controls.connect(props.sceneContext);
+    var targetPos = props.sceneContext.scene.view.camera.position.clone();
+    targetPos.z = 0;
+    _this.controls.target = targetPos;
+    _this.controls.addEventListener('change', _this.updateUrlParams);
+    _this.fpcontrols.addEventListener('change', _this.updateFpUrlParams);
+    sceneElement.addEventListener('dblclick', _this.switchToFirstPersonView);
+    props.onControlsSet(_this);
+    _this.updateUrlParams();
+    return _this;
+  }
+  _inherits(MapControls3D, _React$Component);
+  return _createClass(MapControls3D, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var firstPersonButtonClasses = classNames({
+        "map3d-firstperson-button": true,
+        "map3d-firstperson-button-active": this.state.firstPerson
+      });
+      return [this.props.children, /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+        className: "map3d-nav-pan",
+        "data-slot": 0,
+        key: "MapControlsPan",
+        style: {
+          order: 1000
+        }
+      }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(Icon, {
+        icon: "chevron-up",
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.pan(ev, 0, 1);
+        }
+      }), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(Icon, {
+        icon: "chevron-left",
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.pan(ev, -1, 0);
+        }
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "home",
+        onClick: function onClick() {
+          return _this2.home();
+        }
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "chevron-right",
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.pan(ev, 1, 0);
+        }
+      }), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(Icon, {
+        icon: "chevron-down",
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.pan(ev, 0, -1);
+        }
+      }), /*#__PURE__*/React.createElement("span", null)), this.context), /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+        className: "map3d-nav-rotate",
+        "data-slot": 0,
+        key: "MapControlsRotate",
+        style: {
+          order: 999
+        }
+      }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(Icon, {
+        icon: "tilt-up",
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.tilt(ev, 0, 0.1);
+        }
+      }), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(Icon, {
+        icon: "tilt-left",
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.tilt(ev, 0.1, 0);
+        }
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "point",
+        onClick: function onClick() {
+          return _this2.resetTilt();
+        }
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "tilt-right",
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.tilt(ev, -0.1, 0);
+        }
+      }), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(Icon, {
+        icon: "tilt-down",
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.tilt(ev, 0, -0.1);
+        }
+      }), /*#__PURE__*/React.createElement("span", null)), this.context), /*#__PURE__*/ReactDOM.createPortal(!this.state.firstPerson ? /*#__PURE__*/React.createElement("div", {
+        className: "map3d-nav-zoom",
+        "data-slot": 0,
+        key: "MapControlsSpacerZoom",
+        style: {
+          order: 998
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.zoom(ev, +1);
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "plus"
+      })), /*#__PURE__*/React.createElement("div", {
+        onPointerDown: function onPointerDown(ev) {
+          return _this2.zoom(ev, -1);
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "minus"
+      }))) : null, this.context), /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+        className: firstPersonButtonClasses,
+        "data-slot": 0,
+        key: "MapControlsFirstPerson",
+        onClick: this.toggleFirstPersonControls,
+        style: {
+          order: 997
+        }
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "person"
+      })), this.context), this.props.controlsPosition !== 'bottom' ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+        className: "map3d-nav-spacer",
+        key: "MapControlsSpacer",
+        style: {
+          order: 996
+        }
+      }), this.context) : null];
+    }
+  }]);
+}(React.Component);
+_defineProperty(MapControls3D, "contextType", MapButtonPortalContext);
+_defineProperty(MapControls3D, "propTypes", {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  controlsPosition: PropTypes.string,
+  currentTask: PropTypes.string,
+  mouseButtons: PropTypes.object,
+  onCameraChanged: PropTypes.func,
+  onControlsSet: PropTypes.func,
+  sceneContext: PropTypes.object
+});
+export default connect(function (state) {
+  return {
+    currentTask: state.task.id
+  };
+}, {})(MapControls3D);