qwc2 2025.6.13 → 2025.7.1

package/components/map3d/Measure3D.js

@@ -12,14 +12,13 @@ shape=new Shape({showVertexLabels:true,showLine:false,showVertices:true,vertexLa
 _this.restart()})});_defineProperty(_this,"measureHeightDiff",function(point){if(point===null){_this.restart();return}if((_this.state.result||[]).length>=2){_this.clearResult()}var pos=point.points[0];if((_this.state.result||[]).length===1){// Add line if two points drawn
 var points=[_this.state.result[0],pos];if(points[0].z>points[1].z){points.reverse()}var line=new Shape({showVertexLabels:true,vertexLabelFormatter:function vertexLabelFormatter(options){return options.index===2?MeasureUtils.formatMeasurement(points[1].z-points[0].z,false,_this.state.lenUnit):null},showLine:true});line.setPoints([new Vector3(points[0].x,points[0].y,points[0].z),new Vector3(points[1].x,points[1].y,points[0].z),new Vector3(points[1].x,points[1].y,points[1].z)]);_this.props.sceneContext.scene.add(line);_this.measurementObjects.push(line)}else{// Add first drawn point
 var shape=new Shape({showVertices:true});shape.setPoints([new Vector3(pos.x,pos.y,pos.z)]);_this.props.sceneContext.scene.add(shape);_this.measurementObjects.push(shape)}_this.props.sceneContext.scene.remove(point);_this.setState(function(state){return{result:[].concat(_toConsumableArray(state.result||[]),[{x:pos.x,y:pos.y,z:pos.z}])}});_this.restart()});_defineProperty(_this,"measureLine",function(lineString){if(lineString===null){_this.restart();return}_this.clearResult();var features=new ol.format.GeoJSON().readFeatures(lineString.toGeoJSON(),{dataProjection:"EPSG:4326",featureProjection:_this.props.sceneContext.mapCrs});_this.drawLayer.source.addFeatures(features);_this.props.sceneContext.scene.remove(lineString);// Compute 2d length and nSamples spaced points
-var path=new CurvePath;var len2d=0;for(var i=0;i<lineString.points.length-1;i++){var v0=lineString.points[i];var v1=lineString.points[i+1];var line=new LineCurve(new Vector2(v0.x,v0.y),new Vector2(v1.x,v1.y));path.add(line);len2d+=Math.sqrt((v1.x-v0.x)*(v1.x-v0.x)+(v1.y-v0.y)*(v1.y-v0.y))}var nSamples=Math.min(_this.props.maxSampleCount,Math.round(len2d/_this.props.minMeasureLength));var points=path.getSpacedPoints(nSamples-1).map(function(p){return[p.x,p.y]});_this.props.sceneContext.getTerrainHeightFromDTM(points).then(function(elevations){var line3d=points.map(function(p,i){return[p[0],p[1],elevations[i],0]});var len3d=0;for(var _i=1;_i<nSamples;++_i){var dx=line3d[_i][0]-line3d[_i-1][0];var dy=line3d[_i][1]-line3d[_i-1][1];var dz=line3d[_i][2]-line3d[_i-1][2];len3d+=Math.sqrt(dx*dx+dy*dy+dz*dz);line3d[_i][3]=len3d;// Also store incremental length for height profie
-}_this.setState({result:{length:len3d,profile:line3d}});// Setup for next measurement
-_this.restart()})});_defineProperty(_this,"measureArea",function(polygon){if(polygon===null){_this.restart();return}_this.clearResult();var features=new ol.format.GeoJSON().readFeatures(polygon.toGeoJSON(),{dataProjection:"EPSG:4326",featureProjection:_this.props.sceneContext.mapCrs});_this.drawLayer.source.addFeatures(features);_this.props.sceneContext.scene.remove(polygon);// Compute boundingbox of polygon, divide boundingbox into quads,
+var path=new CurvePath;var len2d=0;for(var i=0;i<lineString.points.length-1;i++){var v0=lineString.points[i];var v1=lineString.points[i+1];var line=new LineCurve(new Vector2(v0.x,v0.y),new Vector2(v1.x,v1.y));path.add(line);len2d+=Math.sqrt((v1.x-v0.x)*(v1.x-v0.x)+(v1.y-v0.y)*(v1.y-v0.y))}var nSamples=Math.min(_this.props.maxSampleCount,Math.round(len2d/_this.props.minMeasureLength));var points=path.getSpacedPoints(nSamples-1);var line3d=new Array(nSamples);line3d[0]=[points[0].x,points[0].y,_this.getElevation([points[0].x,points[0].y]),0];var len3d=0;for(var _i=1;_i<nSamples;++_i){line3d[_i]=[points[_i].x,points[_i].y,_this.getElevation([points[_i].x,points[_i].y]),0];var dx=line3d[_i][0]-line3d[_i-1][0];var dy=line3d[_i][1]-line3d[_i-1][1];var dz=line3d[_i][2]-line3d[_i-1][2];len3d+=Math.sqrt(dx*dx+dy*dy+dz*dz);line3d[_i][3]=len3d;// Also store incremental length for height profie
+}_this.setState({result:{length:len3d,profile:line3d}});_this.restart()});_defineProperty(_this,"measureArea",function(polygon){if(polygon===null){_this.restart();return}_this.clearResult();var features=new ol.format.GeoJSON().readFeatures(polygon.toGeoJSON(),{dataProjection:"EPSG:4326",featureProjection:_this.props.sceneContext.mapCrs});_this.drawLayer.source.addFeatures(features);_this.props.sceneContext.scene.remove(polygon);// Compute boundingbox of polygon, divide boundingbox into quads,
 // compute quad area on terrain for each quad in polygon
-var bbox=[polygon.points[0].x,polygon.points[0].y,polygon.points[0].x,polygon.points[0].y];var coordinates=polygon.points.map(function(v){bbox[0]=Math.min(bbox[0],v.x);bbox[1]=Math.min(bbox[1],v.y);bbox[2]=Math.max(bbox[2],v.x);bbox[3]=Math.max(bbox[3],v.y);return[v.x,v.y]});var quadSize=_this.props.minMeasureLength;var numX=Math.min(_this.props.maxSampleCount,Math.round((bbox[2]-bbox[0])/quadSize));var numY=Math.min(_this.props.maxSampleCount,Math.round((bbox[3]-bbox[1])/quadSize));var deltaX=(bbox[2]-bbox[0])/numX;var deltaY=(bbox[3]-bbox[1])/numY;var area=0;var elevationCache=new Array(numX*numY);for(var iX=0;iX<numX-1;++iX){for(var iY=0;iY<numY-1;++iY){var _elevationCache,_elevationCache2,_elevationCache3,_elevationCache4;// If quad center lies in polygon, consider it
+var bbox=[polygon.points[0].x,polygon.points[0].y,polygon.points[0].x,polygon.points[0].y];var coordinates=polygon.points.map(function(v){bbox[0]=Math.min(bbox[0],v.x);bbox[1]=Math.min(bbox[1],v.y);bbox[2]=Math.max(bbox[2],v.x);bbox[3]=Math.max(bbox[3],v.y);return[v.x,v.y]});var quadSize=_this.props.minMeasureLength;var numX=Math.min(_this.props.maxSampleCount,Math.round((bbox[2]-bbox[0])/quadSize));var numY=Math.min(_this.props.maxSampleCount,Math.round((bbox[3]-bbox[1])/quadSize));var deltaX=(bbox[2]-bbox[0])/numX;var deltaY=(bbox[3]-bbox[1])/numY;var area=0;var elevationCache=new Array(numX*numY);for(var iX=0;iX<numX;++iX){for(var iY=0;iY<numY;++iY){var _elevationCache,_elevationCache2,_elevationCache3,_elevationCache4;// If quad center lies in polygon, consider it
 var p=[bbox[0]+iX*deltaX,bbox[1]+iY*deltaY];var c=[p[0]+0.5*deltaX,p[1]+0.5*deltaY];if(!pointInPolygon(c,coordinates)){continue}// Get elevations
 var z1=(_elevationCache=elevationCache[iY*numX+iX])!==null&&_elevationCache!==void 0?_elevationCache:elevationCache[iY*numX+iX]=_this.getElevation(p);var z2=(_elevationCache2=elevationCache[iY*numX+iX+1])!==null&&_elevationCache2!==void 0?_elevationCache2:elevationCache[iY*numX+iX+1]=_this.getElevation([p[0]+deltaX,p[1]]);var z3=(_elevationCache3=elevationCache[(iY+1)*numX+iX+1])!==null&&_elevationCache3!==void 0?_elevationCache3:elevationCache[(iY+1)*numX+iX+1]=_this.getElevation([p[0]+deltaX,p[1]+deltaY]);var z4=(_elevationCache4=elevationCache[(iY+1)*numX+iX])!==null&&_elevationCache4!==void 0?_elevationCache4:elevationCache[(iY+1)*numX+iX]=_this.getElevation([p[0],p[1]+deltaY]);// Divide quad along diagonal with smaller elevation difference
 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",{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};
+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:1});export{Measure3D as default};

package/components/map3d/OverviewMap3D.js

@@ -1,4 +1,4 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _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 ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
  * Copyright 2024 Sourcepole AG
  * All rights reserved.
  *
@@ -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 ol from"openlayers";import PropTypes from"prop-types";import OlLayer from"../../components/map/OlLayer";import viewconeIcon from"./img/viewcone.svg";import"./style/OverviewMap3D.css";/**
  * Overview map support for the map component.
-*/var OverviewMap3D=/*#__PURE__*/function(_React$Component){function OverviewMap3D(props){var _this;_classCallCheck(this,OverviewMap3D);_this=_callSuper(this,OverviewMap3D,[props]);_defineProperty(_this,"state",{collapsed:true});_defineProperty(_this,"initOverviewMap",function(el){if(el){_this.map=new ol.Map({layers:[_this.viewConeLayer],controls:[],target:el});_this.setupView()}});_defineProperty(_this,"setupView",function(){var overviewView=new ol.View({enableRotation:false,projection:_this.props.sceneContext.mapCrs});_this.map.setView(overviewView);_this.updateViewCone()});_defineProperty(_this,"updateViewCone",function(){var _scene$view$controls$,_scene$view$controls,_scene$view$controls$2;if(!_this.map){return}var scene=_this.props.sceneContext.scene;var x=scene.view.camera.position.x;var y=scene.view.camera.position.y;var azimuth=(_scene$view$controls$=(_scene$view$controls=scene.view.controls)===null||_scene$view$controls===void 0||(_scene$view$controls$2=_scene$view$controls.getAzimuthalAngle)===null||_scene$view$controls$2===void 0?void 0:_scene$view$controls$2.call(_scene$view$controls))!==null&&_scene$view$controls$!==void 0?_scene$view$controls$:0;var cameraHeight=scene.view.camera.position.z;var resolution=cameraHeight/100;_this.map.getView().setCenter([x,y]);_this.map.getView().setResolution(resolution);_this.viewConeFeature.getGeometry().setCoordinates([x,y]);_this.viewConeFeature.set("rotation",-azimuth,true);_this.viewConeLayer.getSource().changed()});_this.map=null;_this.viewConeFeature=new ol.Feature(new ol.geom.Point([0,0]));_this.viewConeLayer=new ol.layer.Vector({source:new ol.source.Vector({features:[_this.viewConeFeature]}),style:function style(feature){return new ol.style.Style({fill:new ol.style.Fill({color:"white"}),stroke:new ol.style.Stroke({color:"red",width:2}),image:new ol.style.Icon({anchor:[0.5,1],anchorXUnits:"fraction",anchorYUnits:"fraction",src:viewconeIcon,rotation:feature.get("rotation"),scale:2})})},zIndex:10000});return _this}_inherits(OverviewMap3D,_React$Component);return _createClass(OverviewMap3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.sceneContext.scene.view.controls.addEventListener("change",this.updateViewCone)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.props.sceneContext.mapCrs!==prevProps.sceneContext.mapCrs){this.setupView()}if(this.map){if(this.state.center!==prevState.center||this.state.azimuth!==prevState.azimuth){this.map.getView().setCenter(this.state.center);this.viewConeFeature.getGeometry().setCoordinates(this.state.center);this.viewConeFeature.set("rotation",-this.state.azimuth,true);this.viewConeLayer.getSource().changed()}if(this.state.resolution!==prevState.resolution){this.map.getView().setResolution(this.state.resolution)}}}},{key:"render",value:function render(){var _this2=this;var style={display:this.state.collapsed?"none":"initial"};return[/*#__PURE__*/React.createElement("div",{className:"overview-map-3d",key:"map3d-overview-map"},/*#__PURE__*/React.createElement("div",{className:"ol-overviewmap-map-3d",ref:this.initOverviewMap,style:style}),/*#__PURE__*/React.createElement("button",{onClick:function onClick(){return _this2.setState(function(state){return{collapsed:!state.collapsed}})},type:"button"},this.state.collapsed?"\xAB":"\xBB")),this.map&&this.props.baseLayer?/*#__PURE__*/React.createElement(OlLayer,{key:this.props.baseLayer.name,map:this.map,options:this.props.baseLayer,projection:this.props.sceneContext.mapCrs}):null]}}])}(React.Component);_defineProperty(OverviewMap3D,"propTypes",{baseLayer:PropTypes.object,sceneContext:PropTypes.object});export{OverviewMap3D as default};
+*/var OverviewMap3D=/*#__PURE__*/function(_React$Component){function OverviewMap3D(props){var _this;_classCallCheck(this,OverviewMap3D);_this=_callSuper(this,OverviewMap3D,[props]);_defineProperty(_this,"state",{collapsed:true});_defineProperty(_this,"initOverviewMap",function(el){if(el){_this.map=new ol.Map({layers:[_this.viewConeLayer],controls:[],target:el});_this.setupView()}});_defineProperty(_this,"setupView",function(){var overviewView=new ol.View({enableRotation:false,projection:_this.props.sceneContext.mapCrs});_this.map.setView(overviewView);_this.updateViewCone()});_defineProperty(_this,"updateViewCone",function(){var _scene$view$controls$,_scene$view$controls,_scene$view$controls$2;if(!_this.map){return}var scene=_this.props.sceneContext.scene;var x=scene.view.camera.position.x;var y=scene.view.camera.position.y;var azimuth=(_scene$view$controls$=(_scene$view$controls=scene.view.controls)===null||_scene$view$controls===void 0||(_scene$view$controls$2=_scene$view$controls.getAzimuthalAngle)===null||_scene$view$controls$2===void 0?void 0:_scene$view$controls$2.call(_scene$view$controls))!==null&&_scene$view$controls$!==void 0?_scene$view$controls$:0;var cameraHeight=scene.view.camera.position.z;var resolution=cameraHeight/100;_this.map.getView().setCenter([x,y]);_this.map.getView().setResolution(resolution);_this.viewConeFeature.getGeometry().setCoordinates([x,y]);_this.viewConeFeature.set("rotation",-azimuth,true);_this.viewConeLayer.getSource().changed()});_this.map=null;_this.viewConeFeature=new ol.Feature(new ol.geom.Point([0,0]));_this.viewConeLayer=new ol.layer.Vector({source:new ol.source.Vector({features:[_this.viewConeFeature]}),style:function style(feature){return new ol.style.Style({fill:new ol.style.Fill({color:"white"}),stroke:new ol.style.Stroke({color:"red",width:2}),image:new ol.style.Icon({anchor:[0.5,1],anchorXUnits:"fraction",anchorYUnits:"fraction",src:viewconeIcon,rotation:feature.get("rotation"),scale:2})})},zIndex:10000});return _this}_inherits(OverviewMap3D,_React$Component);return _createClass(OverviewMap3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.sceneContext.scene.view.controls.addEventListener("change",this.updateViewCone)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.props.sceneContext.mapCrs!==prevProps.sceneContext.mapCrs){this.setupView()}if(this.map){if(this.state.center!==prevState.center||this.state.azimuth!==prevState.azimuth){this.map.getView().setCenter(this.state.center);this.viewConeFeature.getGeometry().setCoordinates(this.state.center);this.viewConeFeature.set("rotation",-this.state.azimuth,true);this.viewConeLayer.getSource().changed()}if(this.state.resolution!==prevState.resolution){this.map.getView().setResolution(this.state.resolution)}}}},{key:"render",value:function render(){var _this2=this;var style={display:this.state.collapsed?"none":"initial"};return[/*#__PURE__*/React.createElement("div",{className:"overview-map-3d",key:"map3d-overview-map"},/*#__PURE__*/React.createElement("div",{className:"ol-overviewmap-map-3d",ref:this.initOverviewMap,style:style}),/*#__PURE__*/React.createElement("button",{onClick:function onClick(){return _this2.setState(function(state){return{collapsed:!state.collapsed}})},type:"button"},this.state.collapsed?"\xAB":"\xBB")),this.map&&this.props.baseLayer?/*#__PURE__*/React.createElement(OlLayer,{key:this.props.baseLayer.name,map:this.map,options:_objectSpread(_objectSpread({},this.props.baseLayer),{},{visibility:true}),projection:this.props.sceneContext.mapCrs}):null]}}])}(React.Component);_defineProperty(OverviewMap3D,"propTypes",{baseLayer:PropTypes.object,sceneContext:PropTypes.object});export{OverviewMap3D as default};

package/components/map3d/SearchField3D.js

@@ -8,9 +8,9 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
 if(result.feature&&((_result$feature=result.feature)===null||_result$feature===void 0||(_result$feature=_result$feature.geometry)===null||_result$feature===void 0?void 0:_result$feature.type)!=="Point"){var _result$crs2;var format=new ol.format.GeoJSON;var olFeatures=format.readFeatures(result.feature,{dataProjection:(_result$crs2=result.crs)!==null&&_result$crs2!==void 0?_result$crs2:mapCrs,featureProjection:mapCrs});var highlightLayer=new ColorLayer({source:new VectorSource({data:olFeatures,format:format,style:function style(feat){return FeatureStyles["default"](feat,{})}})});sceneContext.addLayer("__searchHighlight",highlightLayer)}// Zoom to bounds
 var bounds=result.feature?VectorLayerUtils.computeFeatureBBox(result.feature):[scenePos[0],scenePos[1],scenePos[0],scenePos[1]];// Adjust bounds so that we do not zoom further than 1:searchMinScaleDenom
 var bbWidth=bounds[2]-bounds[0];var bbHeight=bounds[3]-bounds[1];var sceneRect=_this.props.sceneContext.scene.viewport.getBoundingClientRect();// Compute maximum allowed dimensions at the given scale
-var px2m=0.0254/96;var minWidth=sceneRect.width*px2m*_this.props.options.searchMinScaleDenom;var minHeight=sceneRect.height*px2m*_this.props.options.searchMinScaleDenom;var scaleFactor=Math.max(bbWidth/minWidth,bbHeight/minHeight);if(scaleFactor<1){var bbCenterX=0.5*(bounds[0]+bounds[2]);var bbCenterY=0.5*(bounds[1]+bounds[3]);bounds=[bbCenterX-minWidth/2,bbCenterY-minHeight/2,bbCenterX+minWidth/2,bbCenterY+minHeight/2]}sceneContext.setViewToExtent(bounds,0);// Add pin and label at result position above terrain
+var px2m=0.0254/96;var minWidth=sceneRect.width*px2m*_this.props.sceneContext.options.searchMinScaleDenom;var minHeight=sceneRect.height*px2m*_this.props.sceneContext.options.searchMinScaleDenom;var scaleFactor=Math.max(bbWidth/minWidth,bbHeight/minHeight);if(scaleFactor<1){var bbCenterX=0.5*(bounds[0]+bounds[2]);var bbCenterY=0.5*(bounds[1]+bounds[3]);bounds=[bbCenterX-minWidth/2,bbCenterY-minHeight/2,bbCenterX+minWidth/2,bbCenterY+minHeight/2]}sceneContext.setViewToExtent(bounds,0);// Add pin and label at result position above terrain
 sceneContext.getTerrainHeightFromDTM(scenePos).then(function(terrainHeight){var loader=new GLTFLoader;loader.load(pinModel,function(gltf){var _result$label;var searchMarker=new Group;// Add pin
 var pin=gltf.scene;pin.position.x=scenePos[0];pin.position.y=scenePos[1];pin.position.z=terrainHeight;pin.rotation.x=Math.PI/2;pin.updateMatrixWorld();searchMarker.add(pin);// Add label
 var labelEl=document.createElement("span");labelEl.innerText=(_result$label=result.label)!==null&&_result$label!==void 0?_result$label:result.text;labelEl.className="map3d-object-label";var label=new CSS2DObject(labelEl);label.position.set(scenePos[0],scenePos[1],terrainHeight+2);label.updateMatrixWorld();searchMarker.add(label);sceneContext.addSceneObject("__searchMarker",searchMarker);// Scale search marker with distance
 var scaleSearchMarker=function scaleSearchMarker(){var distance=sceneContext.scene.view.camera.position.distanceTo(pin.position)/30;var scale=Math.max(20,distance);label.position.z=terrainHeight+2*scale;label.updateMatrixWorld();pin.scale.set(scale,scale,scale);pin.updateMatrixWorld()};sceneContext.scene.view.controls.addEventListener("change",scaleSearchMarker);searchMarker.addEventListener("removed",function(){sceneContext.scene.view.controls.removeEventListener("change",scaleSearchMarker);// The label DOM element is not removed when the searchMarker group is removed from the instance
-labelEl.parentNode.removeChild(labelEl)})})})});return _this}_inherits(SearchField3D,_React$Component);return _createClass(SearchField3D,[{key:"render",value:function render(){return/*#__PURE__*/React.createElement(SearchWidget,{queryGeometries:true,resultSelected:this.searchResultSelected,searchParams:{mapcrs:this.props.sceneContext.mapCrs,displaycrs:this.props.sceneContext.mapCrs},searchProviders:Object.values(this.props.searchProviders),value:""})}}])}(React.Component);_defineProperty(SearchField3D,"propTypes",{options:PropTypes.object,sceneContext:PropTypes.object,searchProviders:PropTypes.object});export{SearchField3D as default};
+labelEl.parentNode.removeChild(labelEl)})})})});return _this}_inherits(SearchField3D,_React$Component);return _createClass(SearchField3D,[{key:"render",value:function render(){return/*#__PURE__*/React.createElement(SearchWidget,{queryGeometries:true,resultSelected:this.searchResultSelected,searchParams:{mapcrs:this.props.sceneContext.mapCrs,displaycrs:this.props.sceneContext.mapCrs},searchProviders:Object.values(this.props.searchProviders),value:""})}}])}(React.Component);_defineProperty(SearchField3D,"propTypes",{sceneContext:PropTypes.object,searchProviders:PropTypes.object});export{SearchField3D as default};

package/components/map3d/TopBar3D.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 classNames from"classnames";import PropTypes from"prop-types";import{toggleFullscreen,View3DMode}from"../../actions/display";import{openExternalUrl,setTopbarHeight}from"../../actions/windows";import ConfigUtils from"../../utils/ConfigUtils";import LocaleUtils from"../../utils/LocaleUtils";import AppMenu from"../AppMenu";import FullscreenSwitcher from"../FullscreenSwitcher";import{Swipeable}from"../Swipeable";import SearchField3D from"./SearchField3D";var TopBar3D=/*#__PURE__*/function(_React$Component){function TopBar3D(){var _this;_classCallCheck(this,TopBar3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,TopBar3D,[].concat(args));_defineProperty(_this,"state",{});_defineProperty(_this,"storeHeight",function(el){if(el){_this.props.setTopbarHeight(el.clientHeight)}});_defineProperty(_this,"openUrl",function(url,target,title,icon){if(target==="iframe"){target=":iframedialog:externallinkiframe"}_this.props.openExternalUrl(url,target,{title:title,icon:icon})});_defineProperty(_this,"addGenericMenuItems",function(menuItems,inputConfig){inputConfig.forEach(function(entry){if(entry.subitems){var group=[];_this.addGenericMenuItems(group,entry.subitems);if(group.length>0){menuItems.push(_objectSpread(_objectSpread({},entry),{},{subitems:group}))}}else{var pluginConfig=ConfigUtils.getPluginConfig(entry.key);if(entry.url||pluginConfig.availableIn3D){menuItems.push(entry)}}})});return _this}_inherits(TopBar3D,_React$Component);return _createClass(TopBar3D,[{key:"render",value:function render(){var _this2=this;var config=ConfigUtils.getPluginConfig("TopBar").cfg;var menuItems=[{key:"LayerTree3D",icon:"layers"},{key:"Draw3D",icon:"draw"},{key:"Measure3D",icon:"measure"},{key:"Compare3D",icon:"compare"},{key:"HideObjects3D",icon:"eye"},{key:"MapLight3D",icon:"light"},{key:"MapExport3D",icon:"rasterexport"},{key:"ExportObjects3D",icon:"export"}];if(this.props.view3dMode===View3DMode.FULLSCREEN){this.addGenericMenuItems(menuItems,config.menuItems)}var logo;var assetsPath=ConfigUtils.getAssetsPath();var isMobile=ConfigUtils.isMobile();if(isMobile){logo=assetsPath+"/img/logo-mobile."+(config.logoFormat||"svg")}else{logo=assetsPath+"/img/logo."+(config.logoFormat||"svg")}var logoEl=/*#__PURE__*/React.createElement("img",{className:"topbar-logo",src:config.logoSrc||logo});if(config.logoUrl){logoEl=/*#__PURE__*/React.createElement("a",{href:config.logoUrl,rel:"noreferrer",target:"_blank"},logoEl)}var menuCompact=!isMobile?config.appMenuCompact:false;var classes=classNames({TopBar:true,mobile:isMobile,fullscreen:this.props.fullscreen});return/*#__PURE__*/React.createElement(Swipeable,{onSwipedDown:function onSwipedDown(){return _this2.props.toggleFullscreen(false)},onSwipedUp:function onSwipedUp(){return _this2.props.toggleFullscreen(true)}},/*#__PURE__*/React.createElement("div",{className:classes,ref:this.storeHeight},logoEl,/*#__PURE__*/React.createElement("div",{className:"topbar-center-span"},/*#__PURE__*/React.createElement("div",{className:"topbar-search-container"},/*#__PURE__*/React.createElement(SearchField3D,{options:this.props.options,sceneContext:this.props.sceneContext,searchProviders:this.props.searchProviders}))),/*#__PURE__*/React.createElement(AppMenu,{appMenuClearsTask:config.appMenuClearsTask,appMenuShortcut:config.appMenuShortcut,buttonLabel:LocaleUtils.tr("appmenu.menulabel"),keepMenuOpen:menuCompact,menuCompact:menuCompact,menuItems:menuItems,openExternalUrl:this.openUrl,showFilterField:config.appMenuFilterField}),this.props.view3dMode===View3DMode.FULLSCREEN?/*#__PURE__*/React.createElement(FullscreenSwitcher,null):null))}}])}(React.Component);_defineProperty(TopBar3D,"propTypes",{fullscreen:PropTypes.bool,openExternalUrl:PropTypes.func,options:PropTypes.object,sceneContext:PropTypes.object,searchProviders:PropTypes.object,setTopbarHeight:PropTypes.func,toggleFullscreen:PropTypes.func,view3dMode:PropTypes.number});export default connect(function(state){return{fullscreen:state.display.fullscreen,view3dMode:state.display.view3dMode}},{setTopbarHeight:setTopbarHeight,toggleFullscreen:toggleFullscreen,openExternalUrl:openExternalUrl})(TopBar3D);
+ */import React from"react";import{connect}from"react-redux";import classNames from"classnames";import PropTypes from"prop-types";import{toggleFullscreen,View3DMode}from"../../actions/display";import{openExternalUrl,setTopbarHeight}from"../../actions/windows";import ConfigUtils from"../../utils/ConfigUtils";import LocaleUtils from"../../utils/LocaleUtils";import AppMenu from"../AppMenu";import FullscreenSwitcher from"../FullscreenSwitcher";import{Swipeable}from"../Swipeable";import SearchField3D from"./SearchField3D";var TopBar3D=/*#__PURE__*/function(_React$Component){function TopBar3D(){var _this;_classCallCheck(this,TopBar3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,TopBar3D,[].concat(args));_defineProperty(_this,"state",{});_defineProperty(_this,"storeHeight",function(el){if(el){_this.props.setTopbarHeight(el.clientHeight)}});_defineProperty(_this,"openUrl",function(url,target,title,icon){if(target==="iframe"){target=":iframedialog:externallinkiframe"}_this.props.openExternalUrl(url,target,{title:title,icon:icon})});_defineProperty(_this,"addGenericMenuItems",function(menuItems,inputConfig){inputConfig.forEach(function(entry){if(entry.subitems){var group=[];_this.addGenericMenuItems(group,entry.subitems);if(group.length>0){menuItems.push(_objectSpread(_objectSpread({},entry),{},{subitems:group}))}}else{var pluginConfig=ConfigUtils.getPluginConfig(entry.key);if(entry.url||pluginConfig.availableIn3D){menuItems.push(entry)}}})});return _this}_inherits(TopBar3D,_React$Component);return _createClass(TopBar3D,[{key:"render",value:function render(){var _this2=this;var config=ConfigUtils.getPluginConfig("TopBar").cfg;var menuItems=[{key:"LayerTree3D",icon:"layers"},{key:"Draw3D",icon:"draw"},{key:"Measure3D",icon:"measure"},{key:"Compare3D",icon:"compare"},{key:"HideObjects3D",icon:"eye"},{key:"MapLight3D",icon:"light"},{key:"MapExport3D",icon:"rasterexport"},{key:"ExportObjects3D",icon:"export"}];if(this.props.view3dMode===View3DMode.FULLSCREEN){this.addGenericMenuItems(menuItems,config.menuItems)}var logo;var assetsPath=ConfigUtils.getAssetsPath();var isMobile=ConfigUtils.isMobile();if(isMobile){logo=assetsPath+"/img/logo-mobile."+(config.logoFormat||"svg")}else{logo=assetsPath+"/img/logo."+(config.logoFormat||"svg")}var logoEl=/*#__PURE__*/React.createElement("img",{className:"topbar-logo",src:config.logoSrc||logo});if(config.logoUrl){logoEl=/*#__PURE__*/React.createElement("a",{href:config.logoUrl,rel:"noreferrer",target:"_blank"},logoEl)}var menuCompact=!isMobile?config.appMenuCompact:false;var classes=classNames({TopBar:true,mobile:isMobile,fullscreen:this.props.fullscreen});return/*#__PURE__*/React.createElement(Swipeable,{onSwipedDown:function onSwipedDown(){return _this2.props.toggleFullscreen(false)},onSwipedUp:function onSwipedUp(){return _this2.props.toggleFullscreen(true)}},/*#__PURE__*/React.createElement("div",{className:classes,ref:this.storeHeight},logoEl,/*#__PURE__*/React.createElement("div",{className:"topbar-center-span"},/*#__PURE__*/React.createElement("div",{className:"topbar-search-container"},/*#__PURE__*/React.createElement(SearchField3D,{sceneContext:this.props.sceneContext,searchProviders:this.props.searchProviders}))),/*#__PURE__*/React.createElement(AppMenu,{appMenuClearsTask:config.appMenuClearsTask,appMenuShortcut:config.appMenuShortcut,buttonLabel:LocaleUtils.tr("appmenu.menulabel"),keepMenuOpen:menuCompact,menuCompact:menuCompact,menuItems:menuItems,openExternalUrl:this.openUrl,showFilterField:config.appMenuFilterField}),this.props.view3dMode===View3DMode.FULLSCREEN?/*#__PURE__*/React.createElement(FullscreenSwitcher,null):null))}}])}(React.Component);_defineProperty(TopBar3D,"propTypes",{fullscreen:PropTypes.bool,openExternalUrl:PropTypes.func,sceneContext:PropTypes.object,searchProviders:PropTypes.object,setTopbarHeight:PropTypes.func,toggleFullscreen:PropTypes.func,view3dMode:PropTypes.number});export default connect(function(state){return{fullscreen:state.display.fullscreen,view3dMode:state.display.view3dMode}},{setTopbarHeight:setTopbarHeight,toggleFullscreen:toggleFullscreen,openExternalUrl:openExternalUrl})(TopBar3D);

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 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);
+ */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 _activeButton$icon;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,busy:_this.props.view3dMode===View3DMode.DISABLING,icon:(_activeButton$icon=activeButton===null||activeButton===void 0?void 0:activeButton.icon)!==null&&_activeButton$icon!==void 0?_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===View3DMode.DISABLED?View3DMode.DISABLING: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

@@ -4,6 +4,6 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{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)
+ */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,Vector3}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("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};
+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);var pos=_this.drawCursor.points[0];mesh.position.copy(new Vector3(Math.round(pos.x),Math.round(pos.y),Math.floor(pos.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

@@ -4,7 +4,10 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import PropTypes from"prop-types";import{Color,Group,Vector3}from"three";import{TransformControls}from"three/addons/controls/TransformControls";import{CSG}from"three-csg-ts";import LocaleUtils from"../../../utils/LocaleUtils";import Icon from"../../Icon";import ButtonBar from"../../widgets/ButtonBar";import ColorButton from"../../widgets/ColorButton";import 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
+ */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{updateObjectLabel}from"../utils/MiscUtils3D";import NumericInput3D from"./NumericInput3D";// Temporary downstream copy of three/addons/controls/TransformControls
+// See https://github.com/mrdoob/three.js/pull/31346
+import{TransformControls}from"./TransformControls";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};
+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).reverse();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;updateObjectLabel(_this2.props.selectedObject,_this2.props.sceneContext);_this2.props.sceneContext.scene.notifyChange(_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.setSpace("local");this.transformControls.setTranslationSnap(1);this.transformControls.scaleFromEdge=true;this.transformControls.allowNegativeScales=false;this.transformControls.setRotationSnap(5/180*Math.PI);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.setSpace("local");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"),":\xA0"),/*#__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/drawtool/NumericInput3D.js

@@ -4,4 +4,5 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import ReactDOM from"react-dom";import PropTypes from"prop-types";import LocaleUtils from"../../../utils/LocaleUtils";import ResizeableWindow from"../../ResizeableWindow";import NumberInput from"../../widgets/NumberInput";var NumericInput3D=/*#__PURE__*/function(_React$Component){function NumericInput3D(props){var _this;_classCallCheck(this,NumericInput3D);_this=_callSuper(this,NumericInput3D,[props]);_defineProperty(_this,"state",{pos:[0,0,0],rot:[0,0,0],scale:[1,1,1]});_defineProperty(_this,"updateStateFromObject",function(){if(_this.props.selectedObject){_this.setState({pos:_this.props.selectedObject.position.toArray(),rot:_this.props.selectedObject.rotation.toArray().slice(0,3).map(function(x){return x/Math.PI*180}),scale:_this.props.selectedObject.scale.toArray()})}else{_this.setState({pos:[0,0,0],rot:[0,0,0],scale:[1,1,1]})}});_defineProperty(_this,"updatePosition",function(idx,value){var _this$props$selectedO;var newPos=_toConsumableArray(_this.state.pos);newPos[idx]=value;(_this$props$selectedO=_this.props.selectedObject.position).set.apply(_this$props$selectedO,_toConsumableArray(newPos));_this.update()});_defineProperty(_this,"updateRotation",function(idx,value){var _this$props$selectedO2;var newRot=_toConsumableArray(_this.state.rot);newRot[idx]=value;(_this$props$selectedO2=_this.props.selectedObject.rotation).set.apply(_this$props$selectedO2,_toConsumableArray(newRot.map(function(x){return x/180*Math.PI})).concat([_this.props.selectedObject.rotation.order]));_this.update()});_defineProperty(_this,"updateScale",function(idx,value){var _this$props$selectedO3;var newScale=_toConsumableArray(_this.state.scale);newScale[idx]=value;(_this$props$selectedO3=_this.props.selectedObject.scale).set.apply(_this$props$selectedO3,_toConsumableArray(newScale));_this.update()});_defineProperty(_this,"update",function(){_this.props.selectedObject.updateMatrixWorld();_this.props.transformControls.getHelper().updateMatrixWorld();_this.updateStateFromObject();_this.props.sceneContext.scene.notifyChange()});_this.el=document.createElement("div");_this.props.sceneContext.scene.viewport.parentElement.appendChild(_this.el);return _this}_inherits(NumericInput3D,_React$Component);return _createClass(NumericInput3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.transformControls.addEventListener("change",this.updateStateFromObject);this.updateStateFromObject()}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.selectedObject!==prevProps.selectedObject){this.updateStateFromObject()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.props.sceneContext.scene.viewport.parentElement.removeChild(this.el);this.props.transformControls.removeEventListener("change",this.updateStateFromObject)}},{key:"render",value:function render(){var _this2=this;var pos=this.state.pos;var rot=this.state.rot;var scale=this.state.scale;var disabled=!this.props.selectedObject;var contents=/*#__PURE__*/React.createElement(ResizeableWindow,{fitHeight:true,icon:"numericinput",initialWidth:300,initialX:-1,onClose:this.props.toggleNumericInput,scrollable:true,title:LocaleUtils.tr("draw3d.numericinput")},/*#__PURE__*/React.createElement("div",{className:"draw3d-numeric-input-body",role:"body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.position")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(x){return _this2.updatePosition(0,x)},value:pos[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(y){return _this2.updatePosition(1,y)},value:pos[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(z){return _this2.updatePosition(2,z)},value:pos[2]}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.rotation")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(x){return _this2.updateRotation(0,x)},suffix:"\xB0",value:rot[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(y){return _this2.updateRotation(1,y)},suffix:"\xB0",value:rot[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(z){return _this2.updateRotation(2,z)},suffix:"\xB0",value:rot[2]}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.thescale")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(x){return _this2.updateScale(0,x)},value:scale[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(y){return _this2.updateScale(1,y)},value:scale[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(z){return _this2.updateScale(2,z)},value:scale[2]})))))));return/*#__PURE__*/ReactDOM.createPortal(contents,this.el)}}])}(React.Component);_defineProperty(NumericInput3D,"propTypes",{sceneContext:PropTypes.object,selectedObject:PropTypes.object,toggleNumericInput:PropTypes.func,transformControls:PropTypes.object});export{NumericInput3D as default};
+ */import React from"react";import ReactDOM from"react-dom";import PropTypes from"prop-types";import{Box3}from"three";import CoordinatesUtils from"../../../utils/CoordinatesUtils";import LocaleUtils from"../../../utils/LocaleUtils";import ResizeableWindow from"../../ResizeableWindow";import NumberInput from"../../widgets/NumberInput";import"./style/NumericInput3D.css";var NumericInput3D=/*#__PURE__*/function(_React$Component){function NumericInput3D(props){var _this;_classCallCheck(this,NumericInput3D);_this=_callSuper(this,NumericInput3D,[props]);_defineProperty(_this,"state",{pos:[0,0,0],rot:[0,0,0],scale:[1,1,1],size:null});_defineProperty(_this,"updateStateFromObject",function(){if(_this.props.selectedObject){// Temporarily remove rotation and compute bbox
+var originalRotation=_this.props.selectedObject.rotation.clone();_this.props.selectedObject.rotation.set(0,0,0);_this.props.selectedObject.updateMatrixWorld(true);var bbox=new Box3().setFromObject(_this.props.selectedObject);var size=[bbox.max.x-bbox.min.x,bbox.max.y-bbox.min.y,bbox.max.z-bbox.min.z];_this.props.selectedObject.rotation.copy(originalRotation);_this.props.selectedObject.updateMatrixWorld(true);_this.setState({pos:_this.props.selectedObject.position.toArray(),rot:_this.props.selectedObject.rotation.toArray().slice(0,3).map(function(x){return x/Math.PI*180}),scale:_this.props.selectedObject.scale.toArray(),size:size})}else{_this.setState({pos:[0,0,0],rot:[0,0,0],scale:[1,1,1],size:null})}});_defineProperty(_this,"updatePosition",function(idx,value){var _this$props$selectedO;var newPos=_toConsumableArray(_this.state.pos);newPos[idx]=value;(_this$props$selectedO=_this.props.selectedObject.position).set.apply(_this$props$selectedO,_toConsumableArray(newPos));_this.update()});_defineProperty(_this,"updateRotation",function(idx,value){var _this$props$selectedO2;var newRot=_toConsumableArray(_this.state.rot);newRot[idx]=value;(_this$props$selectedO2=_this.props.selectedObject.rotation).set.apply(_this$props$selectedO2,_toConsumableArray(newRot.map(function(x){return x/180*Math.PI})).concat([_this.props.selectedObject.rotation.order]));_this.update()});_defineProperty(_this,"updateScale",function(idx,value){var _this$props$selectedO3;var newScale=_toConsumableArray(_this.state.scale);newScale[idx]=value;(_this$props$selectedO3=_this.props.selectedObject.scale).set.apply(_this$props$selectedO3,_toConsumableArray(newScale));_this.update()});_defineProperty(_this,"updateSize",function(idx,value){var _this$props$selectedO4;var scaleDiff=value/_this.state.size[idx];var newScale=_toConsumableArray(_this.state.scale);newScale[idx]=newScale[idx]*scaleDiff;(_this$props$selectedO4=_this.props.selectedObject.scale).set.apply(_this$props$selectedO4,_toConsumableArray(newScale));_this.update()});_defineProperty(_this,"update",function(){_this.props.selectedObject.updateMatrixWorld();_this.props.transformControls.getHelper().updateMatrixWorld();_this.updateStateFromObject();_this.props.sceneContext.scene.notifyChange()});_this.el=document.createElement("div");_this.props.sceneContext.scene.viewport.parentElement.appendChild(_this.el);return _this}_inherits(NumericInput3D,_React$Component);return _createClass(NumericInput3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.transformControls.addEventListener("change",this.updateStateFromObject);this.updateStateFromObject()}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.selectedObject!==prevProps.selectedObject){this.updateStateFromObject()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.props.sceneContext.scene.viewport.parentElement.removeChild(this.el);this.props.transformControls.removeEventListener("change",this.updateStateFromObject)}},{key:"render",value:function render(){var _this2=this;var pos=this.state.pos;var rot=this.state.rot;var scale=this.state.scale;var size=this.state.size;var disabled=!this.props.selectedObject;var unit=CoordinatesUtils.getUnits(this.props.sceneContext.mapCrs);var contents=/*#__PURE__*/React.createElement(ResizeableWindow,{fitHeight:true,icon:"numericinput",initialWidth:300,initialX:-1,onClose:this.props.toggleNumericInput,scrollable:true,title:LocaleUtils.tr("draw3d.numericinput")},/*#__PURE__*/React.createElement("div",{className:"draw3d-numeric-input-body",role:"body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.position")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(x){return _this2.updatePosition(0,x)},value:pos[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(y){return _this2.updatePosition(1,y)},value:pos[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,disabled:disabled,onChange:function onChange(z){return _this2.updatePosition(2,z)},value:pos[2]}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.rotation")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(x){return _this2.updateRotation(0,x)},suffix:"\xB0",value:rot[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(y){return _this2.updateRotation(1,y)},suffix:"\xB0",value:rot[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(z){return _this2.updateRotation(2,z)},suffix:"\xB0",value:rot[2]}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.thescale")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(x){return _this2.updateScale(0,x)},value:scale[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(y){return _this2.updateScale(1,y)},value:scale[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(z){return _this2.updateScale(2,z)},value:scale[2]}))),size?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("draw3d.thesize")," [",unit,"]"),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(x){return _this2.updateSize(0,x)},value:size[0]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(y){return _this2.updateSize(1,y)},value:size[1]})),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,disabled:disabled,onChange:function onChange(z){return _this2.updateSize(2,z)},value:size[2]}))):/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{className:"draw3d-numeric-input-comment",colSpan:"4"},/*#__PURE__*/React.createElement("i",null,LocaleUtils.tr("draw3d.sizeunavailable"))))))));return/*#__PURE__*/ReactDOM.createPortal(contents,this.el)}}])}(React.Component);_defineProperty(NumericInput3D,"propTypes",{sceneContext:PropTypes.object,selectedObject:PropTypes.object,toggleNumericInput:PropTypes.func,transformControls:PropTypes.object});export{NumericInput3D as default};