qwc2 2025.8.14 → 2025.8.20

package/plugins/View3D.js

@@ -4,7 +4,7 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect,Provider}from"react-redux";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{createSelector}from"reselect";import*as displayExports from"../actions/display";import{setView3dMode,View3DMode}from"../actions/display";import*as layersExports from"../actions/layers";import{LayerRole,addLayerFeatures,removeLayer}from"../actions/layers";import{panTo,zoomToPoint}from"../actions/map";import*as mapExports from"../actions/map";import*as themeExports from"../actions/theme";import PluginsContainer from"../components/PluginsContainer";import ResizeableWindow from"../components/ResizeableWindow";import StandardApp from"../components/StandardApp";import View3DSwitcher from"../components/map3d/View3DSwitcher";import Spinner from"../components/widgets/Spinner";import ReducerIndex from"../reducers/index";import personIcon from"../resources/person.png";import searchProvidersSelector from"../selectors/searchproviders";import{createStore}from"../stores/StandardStore";import ConfigUtils from"../utils/ConfigUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import{UrlParams}from"../utils/PermaLinkUtils";import PluginStore from"../utils/PluginStore";import"./style/View3D.css";/**
+ */import React from"react";import{connect,Provider}from"react-redux";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import*as displayExports from"../actions/display";import{setView3dMode,View3DMode}from"../actions/display";import*as layersExports from"../actions/layers";import{LayerRole,addLayerFeatures,removeLayer}from"../actions/layers";import{panTo,zoomToPoint}from"../actions/map";import*as mapExports from"../actions/map";import*as themeExports from"../actions/theme";import PluginsContainer from"../components/PluginsContainer";import ResizeableWindow from"../components/ResizeableWindow";import StandardApp from"../components/StandardApp";import View3DSwitcher from"../components/map3d/View3DSwitcher";import Spinner from"../components/widgets/Spinner";import ReducerIndex from"../reducers/index";import personIcon from"../resources/person.png";import{createStore}from"../stores/StandardStore";import ConfigUtils from"../utils/ConfigUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import{UrlParams}from"../utils/PermaLinkUtils";import"./style/View3D.css";/**
  * Displays a 3D map view.
  *
  * ### Configuration
@@ -12,6 +12,11 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  * To add a 3D View to a theme, add the following configuration block to a theme item in `themesConfig.json`:
  * ```
  * "map3d": {
+ *     "initialView": {
+ *       "camera": [x, y, z],
+ *       "target": [x, y, z],
+ *       "personHeight": h
+ *     },
  *     "dtm": {"url": "<url_to_dtm.tif>", "crs": "<dtm_epsg_code>},
  *     "basemaps": [
  *          {"name": "<name_of_background_layer>", "visibility": true, "overview": true},
@@ -24,12 +29,12 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *              "url": "<url_to_tileset.json>",
  *              "title": "<title>",
  *              "baseColor": "<css RGB(A) color string>",
- *              "idAttr": "<tile_batch_attr>",
+ *              "idAttr": "<tile_feature_attr>",
  *              "styles": {"<styleName>", "<url_to_tilesetStyle.json>", ...},
  *              "style": "<styleName>",
- *              "colorAttr": "<tile_batch_attr>",
- *              "alphaAttr": "<tile_batch_attr>",
- *              "labelAttr": "<tile_batch_attr>",
+ *              "colorAttr": "<tile_feature_attr>",
+ *              "alphaAttr": "<tile_feature_attr>",
+ *              "labelAttr": "<tile_feature_attr>",
  *          }
  *     ],
  *     "objects3d": [
@@ -43,31 +48,32 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  * ```
  * Where:
  *
+ * - `initialView` is optional and allows to define the initial view when opening the 3D view. If `personHeight` is specified and greater than 0, the first-person view is activated. If not specified, the 2D view is synchronized.
  * - The DTM should be a cloud optimized GeoTIFF.
  * - The background layer names refer to the names of the entries defined in `backgroundLayers` in the `themesConfig.json`. Additionally:
  *   - `visibility` controls the initially visibile background layer
  *   - `overview: true` controls the name of background layer to display in the overview map. If no background layer is marked with `overview: true`, the currently visibile background layer id dipslayed in the overview map.
  * - The `tiles3d` entry contains an optional list of 3d tiles to add to the scene, with:
- *   - `idAttr`: batch table attribute which stores the batch object id, used for styling and passed to `tileInfoServiceUrl`. Default: `id`.
+ *   - `idAttr`: feature properties table attribute which stores the object id, used for styling and passed to `tileInfoServiceUrl` of the `Identify3D` plugin. Default: `id`.
  *   - `styles`: optional, available tileset styles. Takes precedente over `colorAttr`, `alphaAttr`, `labelAttr`.
  *   - `style`: optional, tileset style enabled by default.
  *   - `baseColor`: the fallback color for the tile objects, defaults to white.
- *   - `colorAttr`: optional, batch table attribute which stores the batch color, as a 0xRRGGBB integer.
- *   - `alphaAttr`: optional, batch table attribute which stores the batch alpha (transparency), as a [0, 255] integer.
- *   - `labelAttr`: optional, batch table attribute which stores the batch label, displayed above the geometry.
+ *   - `colorAttr`: optional, feature properties table attribute which stores the feature color, as a 0xRRGGBB integer.
+ *   - `alphaAttr`: optional, feature properties table attribute which stores the feature alpha (transparency), as a [0, 255] integer.
+ *   - `labelAttr`: optional, feature properties table attribute which stores the feature label, displayed above the geometry.
  * - The `objects3d` entry contains an optional list of GLTF objects to add to the scene.
  *
  *
  * ### Styling
  *
  * The tileset style JSON is a [3D Tiles stylesheet](https://github.com/CesiumGS/3d-tiles/tree/main/specification/Styling),
- * of which currently the `color` section is supported, and which may in addition also contain a `batchstyles` section as follows:
+ * of which currently the `color` section is supported, and which may in addition also contain a `featureStyles` section as follows:
  * ```
  * {
  *     "color": {
  *        ...
  *     },
- *     "batchstyles": {
+ *     "featureStyles": {
  *       "<object_id>": {
  *           "label": "<label>",
  *           "labelOffset": <offset>,
@@ -84,21 +90,21 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * *Note*:
  *
- * - The color declarations in the `batchstyles` section override any color resulting from a color expression in the `color` section.
- * - You must ensure that your 3D tiles batch table contains all batch attributes which are referenced as variables in a color expression!
+ * - The color declarations in the `featureStyles` section override any color resulting from a color expression in the `color` section.
+ * - You must ensure that your 3D tiles properties table contains all attributes which are referenced as variables in a color expression!
  *
  * ### Import
  *
  * To import scene objects in formats other than GLTF, a `ogcProcessesUrl` in `config.json` needs to point to a BBOX OGC processes server.
- */var View3D=/*#__PURE__*/function(_React$Component){function View3D(props){var _this;_classCallCheck(this,View3D);_this=_callSuper(this,View3D,[props]);_defineProperty(_this,"state",{componentLoaded:false,windowDetached:false,viewsLocked:false,storedState:null});_defineProperty(_this,"render3DWindow",function(){if(_this.props.view3dMode>View3DMode.DISABLED){var extraControls=[{icon:"sync",callback:_this.sync2DExtent,title:LocaleUtils.tr("map3d.syncview")},{icon:"lock",callback:_this.setLockViews,title:LocaleUtils.tr("map3d.lockview"),active:_this.state.viewsLocked}];if(!_this.state.windowDetached){extraControls.push({icon:"maximize",callback:function callback(){return _this.props.setView3dMode(View3DMode.FULLSCREEN)},title:LocaleUtils.tr("window.maximize")})}var Map3D=_this.map3dComponent;var options={defaultDay:_this.props.defaultDay,defaultTime:_this.props.defaultTime,searchMinScaleDenom:_this.props.searchMinScaleDenom,tileInfoServiceUrl:_this.props.tileInfoServiceUrl,importedTilesBaseUrl:_this.props.importedTilesBaseUrl};var device=ConfigUtils.isMobile()?"mobile":"desktop";var pluginsConfig=_this.props.pluginsConfig[device].filter(function(entry){return entry.availableIn3D&&(!entry.availableIn2D||_this.props.view3dMode===View3DMode.FULLSCREEN)});return/*#__PURE__*/React.createElement(ResizeableWindow,{extraControls:extraControls,fullscreen:_this.props.view3dMode===View3DMode.FULLSCREEN,icon:"map3d",initialHeight:_this.props.geometry.initialHeight,initialWidth:_this.props.geometry.initialWidth,initialX:_this.props.geometry.initialX,initialY:_this.props.geometry.initialY,initiallyDocked:_this.props.geometry.initiallyDocked,key:"View3DWindow",maximizeable:false,onClose:_this.onClose,onExternalWindowResized:_this.redrawScene,onFocusChanged:_this.windowFocusChanged,onGeometryChanged:_this.onGeometryChanged,splitScreenWhenDocked:true,splitTopAndBottomBar:true,title:LocaleUtils.tr("map3d.title")},_this.state.componentLoaded?/*#__PURE__*/React.createElement(Provider,{role:"body",store:_this.store},/*#__PURE__*/React.createElement(PluginsContainer,{className:"plugins-container-3d",plugins:PluginStore.getPlugins(),pluginsConfig:pluginsConfig},/*#__PURE__*/React.createElement(Map3D,{innerRef:_this.setRef,onCameraChanged:_this.onCameraChanged,onMapInitialized:_this.setupMap,options:options,searchProviders:_this.props.searchProviders,theme:_this.props.theme}),_this.props.view3dMode===View3DMode.DISABLING?/*#__PURE__*/React.createElement("div",{className:"view3d-busy-overlay"},/*#__PURE__*/React.createElement(Spinner,null),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("view3d.storingstate"))):null)):null)}return null});_defineProperty(_this,"onClose",function(){_this.props.setView3dMode(View3DMode.DISABLING)});_defineProperty(_this,"onGeometryChanged",function(geometry){if(geometry.maximized&&_this.props.view3dMode!==View3DMode.FULLSCREEN){_this.props.setView3dMode(View3DMode.FULLSCREEN)}_this.setState({windowDetached:geometry.detached})});_defineProperty(_this,"onCameraChanged",function(center,camera,fov){// Note: If camera pos is NULL, we are in first-person-view
-if(_this.state.viewsLocked&&_this.focusedMap==="map3d"){var rotation=undefined;if(camera){rotation=Math.atan2(center[1]-camera[1],center[0]-camera[0])-0.5*Math.PI;var distance=Math.sqrt((camera[0]-center[0])*(camera[0]-center[0])+(camera[1]-center[1])*(camera[1]-center[1])+(camera[2]-center[2])*(camera[2]-center[2]));var fovrad=fov/180*Math.PI;var bboxWidth=distance*(2*Math.tan(fovrad/2));var bbox=[-0.5*bboxWidth,0,0.5*bboxWidth,0];var zoom=MapUtils.getZoomForExtent(bbox,_this.props.map.resolutions,_this.props.map.size,0,_this.props.map.scales.length-1);_this.props.zoomToPoint(center.slice(0,2),zoom,_this.props.theme.mapCrs,rotation);if(_this.firstPersonMarker){_this.props.removeLayer("view3d-firstperson-cone");_this.firstPersonMarker=false}}else{_this.props.panTo(center.slice(0,2),_this.props.theme.mapCrs,rotation);var feature={geometry:{type:"Point",coordinates:center.slice(0,2)},crs:_this.props.theme.mapCrs,styleName:"marker",styleOptions:{iconSrc:personIcon}};var layer={id:"view3d-firstperson-marker",role:LayerRole.MARKER};_this.props.addLayerFeatures(layer,[feature],true);_this.firstPersonMarker=true}}else if(_this.firstPersonMarker){_this.props.removeLayer("view3d-firstperson-marker");_this.firstPersonMarker=false}});_defineProperty(_this,"setRef",function(ref){_this.map3dComponentRef=ref});_defineProperty(_this,"sync2DExtent",function(){if(_this.map3dComponentRef){_this.map3dComponentRef.setViewToExtent(_this.props.map.bbox.bounds,_this.props.map.bbox.rotation)}});_defineProperty(_this,"setLockViews",function(){_this.setState(function(state){return{viewsLocked:!state.viewsLocked}});if(_this.firstPersonMarker){_this.props.removeLayer("view3d-firstperson-marker");_this.firstPersonMarker=false}});_defineProperty(_this,"setupMap",function(){if(_this.map3dComponentRef){if(!isEmpty(_this.state.storedState)){_this.map3dComponentRef.restore3dState(_this.state.storedState)}else{_this.sync2DExtent()}}});_defineProperty(_this,"redrawScene",function(ev){if(_this.map3dComponentRef){_this.map3dComponentRef.redrawScene(ev)}});_defineProperty(_this,"trackFocus",function(ev){var _mapEl$contains,_map3dEl$contains;var mapEl=document.getElementById("map");var map3dEl=document.getElementById("map3d");if(mapEl!==null&&mapEl!==void 0&&(_mapEl$contains=mapEl.contains)!==null&&_mapEl$contains!==void 0&&_mapEl$contains.call(mapEl,document.activeElement)){_this.focusedMap="map"}else if(map3dEl!==null&&map3dEl!==void 0&&(_map3dEl$contains=map3dEl.contains)!==null&&_map3dEl$contains!==void 0&&_map3dEl$contains.call(map3dEl,document.activeElement)){_this.focusedMap="map3d"}else{_this.focusedMap=null}});_this.map3dComponent=null;_this.map3dComponentRef=null;_this.focusedMap=null;_this.firstPersonMarker=true;// Subset of 2d reducers
+ */var View3D=/*#__PURE__*/function(_React$Component){function View3D(props){var _this;_classCallCheck(this,View3D);_this=_callSuper(this,View3D,[props]);_defineProperty(_this,"state",{componentLoaded:false,windowDetached:false,viewsLocked:false,storedState:null});_defineProperty(_this,"render3DWindow",function(){if(_this.props.view3dMode>View3DMode.DISABLED){var extraControls=[{icon:"sync",callback:_this.sync2DExtent,title:LocaleUtils.tr("map3d.syncview")},{icon:"lock",callback:_this.setLockViews,title:LocaleUtils.tr("map3d.lockview"),active:_this.state.viewsLocked}];if(!_this.state.windowDetached){extraControls.push({icon:"maximize",callback:function callback(){return _this.props.setView3dMode(View3DMode.FULLSCREEN)},title:LocaleUtils.tr("window.maximize")})}var Map3D=_this.map3dComponent;var device=ConfigUtils.isMobile()?"mobile":"desktop";var pluginsConfig=_this.props.view3dMode===View3DMode.FULLSCREEN?_this.props.localConfig.plugins[device].filter(function(entry){return entry.availableIn3D}):[];return/*#__PURE__*/React.createElement(ResizeableWindow,{extraControls:extraControls,fullscreen:_this.props.view3dMode===View3DMode.FULLSCREEN,icon:"map3d",initialHeight:_this.props.geometry.initialHeight,initialWidth:_this.props.geometry.initialWidth,initialX:_this.props.geometry.initialX,initialY:_this.props.geometry.initialY,initiallyDocked:_this.props.geometry.initiallyDocked,key:"View3DWindow",maximizeable:false,onClose:_this.onClose,onExternalWindowResized:_this.redrawScene,onFocusChanged:_this.windowFocusChanged,onGeometryChanged:_this.onGeometryChanged,splitScreenWhenDocked:true,splitTopAndBottomBar:true,title:LocaleUtils.tr("map3d.title")},_this.state.componentLoaded?/*#__PURE__*/React.createElement(Provider,{role:"body",store:_this.store},/*#__PURE__*/React.createElement(PluginsContainer,{pluginsConfig:pluginsConfig},/*#__PURE__*/React.createElement(Map3D,{controlsPosition:_this.props.controlsPosition,innerRef:_this.setRef,onCameraChanged:_this.onCameraChanged,onMapInitialized:_this.setupMap,pluginOptions:_this.props.pluginOptions,plugins3d:_this.props.plugins3d,searchProviders:_this.props.searchProviders,theme:_this.props.theme}),_this.props.view3dMode===View3DMode.DISABLING?/*#__PURE__*/React.createElement("div",{className:"view3d-busy-overlay"},/*#__PURE__*/React.createElement(Spinner,null),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("view3d.storingstate"))):null)):null)}return null});_defineProperty(_this,"onClose",function(){_this.props.setView3dMode(View3DMode.DISABLING)});_defineProperty(_this,"onGeometryChanged",function(geometry){if(geometry.maximized&&_this.props.view3dMode!==View3DMode.FULLSCREEN){_this.props.setView3dMode(View3DMode.FULLSCREEN)}_this.setState({windowDetached:geometry.detached})});_defineProperty(_this,"onCameraChanged",function(center,camera,fov){// Note: If camera pos is NULL, we are in first-person-view
+if(_this.state.viewsLocked&&_this.focusedMap==="map3d"){var rotation=undefined;if(camera){rotation=Math.atan2(center[1]-camera[1],center[0]-camera[0])-0.5*Math.PI;var distance=Math.sqrt((camera[0]-center[0])*(camera[0]-center[0])+(camera[1]-center[1])*(camera[1]-center[1])+(camera[2]-center[2])*(camera[2]-center[2]));var fovrad=fov/180*Math.PI;var bboxWidth=distance*(2*Math.tan(fovrad/2));var bbox=[-0.5*bboxWidth,0,0.5*bboxWidth,0];var zoom=MapUtils.getZoomForExtent(bbox,_this.props.map.resolutions,_this.props.map.size,0,_this.props.map.scales.length-1);_this.props.zoomToPoint(center.slice(0,2),zoom,_this.props.theme.mapCrs,rotation);if(_this.firstPersonMarker){_this.props.removeLayer("view3d-firstperson-cone");_this.firstPersonMarker=false}}else{_this.props.panTo(center.slice(0,2),_this.props.theme.mapCrs,rotation);var feature={geometry:{type:"Point",coordinates:center.slice(0,2)},crs:_this.props.theme.mapCrs,styleName:"marker",styleOptions:{iconSrc:personIcon}};var layer={id:"view3d-firstperson-marker",role:LayerRole.MARKER};_this.props.addLayerFeatures(layer,[feature],true);_this.firstPersonMarker=true}}else if(_this.firstPersonMarker){_this.props.removeLayer("view3d-firstperson-marker");_this.firstPersonMarker=false}});_defineProperty(_this,"setRef",function(ref){_this.map3dComponentRef=ref});_defineProperty(_this,"sync2DExtent",function(){if(_this.map3dComponentRef){_this.map3dComponentRef.setViewToExtent(_this.props.map.bbox.bounds,_this.props.map.bbox.rotation)}});_defineProperty(_this,"setLockViews",function(){_this.setState(function(state){return{viewsLocked:!state.viewsLocked}});if(_this.firstPersonMarker){_this.props.removeLayer("view3d-firstperson-marker");_this.firstPersonMarker=false}});_defineProperty(_this,"setupMap",function(){if(_this.map3dComponentRef){if(!isEmpty(_this.state.storedState)){_this.map3dComponentRef.restore3dState(_this.state.storedState)}else if(_this.props.theme.current.map3d.initialView){_this.map3dComponentRef.restore3dState(_this.props.theme.current.map3d.initialView)}else{_this.sync2DExtent()}}});_defineProperty(_this,"redrawScene",function(ev){if(_this.map3dComponentRef){_this.map3dComponentRef.redrawScene(ev)}});_defineProperty(_this,"trackFocus",function(ev){var _mapEl$contains,_map3dEl$contains;var mapEl=document.getElementById("map");var map3dEl=document.getElementById("map3d");if(mapEl!==null&&mapEl!==void 0&&(_mapEl$contains=mapEl.contains)!==null&&_mapEl$contains!==void 0&&_mapEl$contains.call(mapEl,document.activeElement)){_this.focusedMap="map"}else if(map3dEl!==null&&map3dEl!==void 0&&(_map3dEl$contains=map3dEl.contains)!==null&&_map3dEl$contains!==void 0&&_map3dEl$contains.call(map3dEl,document.activeElement)){_this.focusedMap="map3d"}else{_this.focusedMap=null}});_this.map3dComponent=null;_this.map3dComponentRef=null;_this.focusedMap=null;_this.firstPersonMarker=true;// Subset of 2d reducers
 var _ReducerIndex$reducer=ReducerIndex.reducers,processNotifications=_ReducerIndex$reducer.processNotifications,task=_ReducerIndex$reducer.task,windows=_ReducerIndex$reducer.windows;// Reducer for syncronization with parent store
 var forwardReducer=function forwardReducer(key,forwardActions,syncAction){return function(){var state=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};var action=arguments.length>1?arguments[1]:undefined;if(forwardActions.includes(action.type)){// Forward to parent store
 StandardApp.store.dispatch(action);return state}else{return action.type===syncAction?action[key]:state}}};var displayActions=Object.values(displayExports).filter(function(x){return typeof x==="string"});var layersActions=Object.values(layersExports).filter(function(x){return typeof x==="string"});var mapActions=Object.values(mapExports).filter(function(x){return typeof x==="string"});var themeActions=Object.values(themeExports).filter(function(x){return typeof x==="string"});var display=forwardReducer("display",displayActions,"SYNC_DISPLAY_FROM_PARENT_STORE");var layers=forwardReducer("layers",layersActions,"SYNC_LAYERS_FROM_PARENT_STORE");var map=forwardReducer("map",mapActions,"SYNC_MAP_FROM_PARENT_STORE");var localConfig=forwardReducer("localConfig",[],"SYNC_LOCAL_CONFIG_FROM_PARENT_STORE");var theme=forwardReducer("theme",themeActions,"SYNC_THEME_FROM_PARENT_STORE");_this.store=createStore({display:display,layers:layers,localConfig:localConfig,map:map,processNotifications:processNotifications,theme:theme,task:task,windows:windows});// Set stored state
-var storedState=_objectSpread({},props.startupState.map3d);if(props.startupParams.v3d){var values=props.startupParams.v3d.split(",").map(parseFloat).filter(function(x){return!isNaN(x)});if(values.length>=6){var _values$;storedState.camera=[values[0],values[1],values[2]];storedState.target=[values[3],values[4],values[5]];storedState.personHeight=(_values$=values[6])!==null&&_values$!==void 0?_values$:0}}if(props.startupParams.bl3d!==undefined){storedState.baseLayer=props.startupParams.bl3d}_this.state.storedState=storedState;return _this}_inherits(View3D,_React$Component);return _createClass(View3D,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.startupParams.v==="3d"){this.props.setView3dMode(View3DMode.FULLSCREEN)}else if(this.props.startupParams.v==="3d2d"){this.props.setView3dMode(View3DMode.SPLITSCREEN)}window.addEventListener("focus",this.trackFocus,true)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("focus",this.trackFocus)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this,_this$props$theme$cur;if(this.props.view3dMode!==View3DMode.DISABLED&&prevProps.view3dMode===View3DMode.DISABLED){import("../components/map3d/Map3D").then(function(component){_this2.map3dComponent=component["default"];_this2.map3dComponentRef=null;_this2.setState({componentLoaded:true})})}else if(this.props.view3dMode===View3DMode.DISABLING&&prevProps.view3dMode!==View3DMode.DISABLING){if(this.map3dComponentRef){this.map3dComponentRef.store3dState().then(function(storedState){_this2.setState({storedState:storedState});UrlParams.updateParams({v3d:undefined,bl3d:undefined});_this2.props.setView3dMode(View3DMode.DISABLED)})}else{UrlParams.updateParams({v3d:undefined,bl3d:undefined});this.props.setView3dMode(View3DMode.DISABLED)}}else if(this.props.view3dMode===View3DMode.DISABLED&&prevProps.view3dMode!==View3DMode.DISABLED){this.map3dComponent=null;this.map3dComponentRef=null;this.setState({componentLoaded:false});if(this.firstPersonMarker){this.props.removeLayer("view3d-firstperson-marker");this.firstPersonMarker=false}}// Sync parts of parent store
-if(this.props.display!==prevProps.display){this.store.dispatch({type:"SYNC_DISPLAY_FROM_PARENT_STORE",display:this.props.display})}if(this.props.theme!==prevProps.theme){this.store.dispatch({type:"SYNC_THEME_FROM_PARENT_STORE",theme:this.props.theme})}if(this.props.localConfig!==prevProps.localConfig){this.store.dispatch({type:"SYNC_LOCAL_CONFIG_FROM_PARENT_STORE",localConfig:this.props.localConfig})}if(this.props.layers!==prevProps.layers){this.store.dispatch({type:"SYNC_LAYERS_FROM_PARENT_STORE",layers:this.props.layers})}if(this.props.map!==prevProps.map){this.store.dispatch({type:"SYNC_MAP_FROM_PARENT_STORE",map:this.props.map})}if(this.props.view3dMode!==prevProps.view3dMode){if(this.props.view3dMode===View3DMode.FULLSCREEN){UrlParams.updateParams({v:"3d"});this.setState({viewsLocked:false})}else if(this.props.view3dMode===View3DMode.SPLITSCREEN){UrlParams.updateParams({v:"3d2d"})}else{UrlParams.updateParams({v:undefined})}}// Switch to 2D mode if new theme has no 3D configuration
+var storedState=_objectSpread({},props.startupState.map3d);if(props.startupParams.v3d){var values=props.startupParams.v3d.split(",").map(parseFloat).filter(function(x){return!isNaN(x)});if(values.length>=6){var _values$;storedState.camera=[values[0],values[1],values[2]];storedState.target=[values[3],values[4],values[5]];storedState.personHeight=(_values$=values[6])!==null&&_values$!==void 0?_values$:0}}if(props.startupParams.bl3d!==undefined){storedState.baseLayer=props.startupParams.bl3d}_this.state.storedState=storedState;return _this}_inherits(View3D,_React$Component);return _createClass(View3D,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.startupParams.v==="3d"){this.props.setView3dMode(View3DMode.FULLSCREEN)}else if(this.props.startupParams.v==="3d2d"){this.props.setView3dMode(View3DMode.SPLITSCREEN)}window.addEventListener("focus",this.trackFocus,true);this.syncParentStore({})}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("focus",this.trackFocus)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this,_this$props$theme$cur;if(this.props.view3dMode!==View3DMode.DISABLED&&prevProps.view3dMode===View3DMode.DISABLED){import("../components/map3d/Map3D").then(function(component){_this2.map3dComponent=component["default"];_this2.map3dComponentRef=null;_this2.setState({componentLoaded:true})})}else if(this.props.view3dMode===View3DMode.DISABLING&&prevProps.view3dMode!==View3DMode.DISABLING){if(this.map3dComponentRef){this.map3dComponentRef.store3dState().then(function(storedState){_this2.setState({storedState:storedState});UrlParams.updateParams({v3d:undefined,bl3d:undefined});_this2.props.setView3dMode(View3DMode.DISABLED)})}else{UrlParams.updateParams({v3d:undefined,bl3d:undefined});this.props.setView3dMode(View3DMode.DISABLED)}}else if(this.props.view3dMode===View3DMode.DISABLED&&prevProps.view3dMode!==View3DMode.DISABLED){this.map3dComponent=null;this.map3dComponentRef=null;this.setState({componentLoaded:false});if(this.firstPersonMarker){this.props.removeLayer("view3d-firstperson-marker");this.firstPersonMarker=false}}// Sync parts of parent store
+this.syncParentStore(prevProps);// Handle view mode change
+if(this.props.view3dMode!==prevProps.view3dMode){if(this.props.view3dMode===View3DMode.FULLSCREEN){UrlParams.updateParams({v:"3d"});this.setState({viewsLocked:false})}else if(this.props.view3dMode===View3DMode.SPLITSCREEN){UrlParams.updateParams({v:"3d2d"})}else{UrlParams.updateParams({v:undefined})}}// Switch to 2D mode if new theme has no 3D configuration
 if(this.props.theme.current!==prevProps.theme.current&&!((_this$props$theme$cur=this.props.theme.current)!==null&&_this$props$theme$cur!==void 0&&_this$props$theme$cur.map3d)&&this.props.view3dMode!==View3DMode.DISABLED){this.props.setView3dMode(View3D.DISABLED)}// Lock views
 if(this.state.viewsLocked&&this.props.map.bbox!==prevProps.map.bbox&&this.focusedMap==="map"){this.sync2DExtent()}// Clear stored state when switching away from a theme
-if(prevProps.theme.current&&this.props.theme.current!==prevProps.theme.current){this.setState({storedState:null})}}},{key:"render",value:function render(){var _this$props$theme$cur2;var button=(_this$props$theme$cur2=this.props.theme.current)!==null&&_this$props$theme$cur2!==void 0&&_this$props$theme$cur2.map3d?/*#__PURE__*/React.createElement(View3DSwitcher,{key:"View3DButton",position:this.props.buttonPosition}):null;return[button,this.render3DWindow()]}}])}(React.Component);_defineProperty(View3D,"propTypes",{addLayerFeatures:PropTypes.func,/** The position slot index of the 3d switch map button, from the bottom (0: bottom slot). */buttonPosition:PropTypes.number,/** Default viewer day (1-365) */defaultDay:PropTypes.number,/** Default viewer time (00:00-23:59) */defaultTime:PropTypes.string,display:PropTypes.object,/** Default window geometry. */geometry:PropTypes.shape({initialWidth:PropTypes.number,initialHeight:PropTypes.number,initialX:PropTypes.number,initialY:PropTypes.number,initiallyDocked:PropTypes.bool}),/** Base URL of imported tile sets. */importedTilesBaseUrl:PropTypes.string,layers:PropTypes.object,localConfig:PropTypes.object,map:PropTypes.object,panTo:PropTypes.func,plugins:PropTypes.object,pluginsConfig:PropTypes.object,removeLayer:PropTypes.func,/** Minimum scale denominator when zooming to search result. */searchMinScaleDenom:PropTypes.number,searchProviders:PropTypes.object,setView3dMode:PropTypes.func,startupParams:PropTypes.object,startupState:PropTypes.object,theme:PropTypes.object,/** URL to service for querying additional tile information.
-         * Can contain the `{tileset}` and `{objectid}` placeholders.
-         * Expected to return a JSON dict with attributes.*/tileInfoServiceUrl:PropTypes.string,view3dMode:PropTypes.number,zoomToPoint:PropTypes.func});_defineProperty(View3D,"defaultProps",{buttonPosition:6,geometry:{initialWidth:600,initialHeight:800,initialX:0,initialY:0,initiallyDocked:true},defaultDay:182,defaultTime:"12:00",searchMinScaleDenom:1000,importedTilesBaseUrl:":/"});export default connect(createSelector([function(state){return state},searchProvidersSelector],function(state,searchProviders){return{display:state.display,map:state.map,layers:state.layers,pluginsConfig:state.localConfig.plugins,theme:state.theme,localConfig:state.localConfig,view3dMode:state.display.view3dMode,startupParams:state.localConfig.startupParams,startupState:state.localConfig.startupState,searchProviders:searchProviders}}),{addLayerFeatures:addLayerFeatures,removeLayer:removeLayer,panTo:panTo,zoomToPoint:zoomToPoint,setView3dMode:setView3dMode})(View3D);
+if(prevProps.theme.current&&this.props.theme.current!==prevProps.theme.current){this.setState({storedState:null})}}},{key:"syncParentStore",value:function syncParentStore(prevProps){if(this.props.display!==prevProps.display){this.store.dispatch({type:"SYNC_DISPLAY_FROM_PARENT_STORE",display:this.props.display})}if(this.props.theme!==prevProps.theme){this.store.dispatch({type:"SYNC_THEME_FROM_PARENT_STORE",theme:this.props.theme})}if(this.props.localConfig!==prevProps.localConfig){this.store.dispatch({type:"SYNC_LOCAL_CONFIG_FROM_PARENT_STORE",localConfig:this.props.localConfig})}if(this.props.layers!==prevProps.layers){this.store.dispatch({type:"SYNC_LAYERS_FROM_PARENT_STORE",layers:this.props.layers})}if(this.props.map!==prevProps.map){this.store.dispatch({type:"SYNC_MAP_FROM_PARENT_STORE",map:this.props.map})}}},{key:"render",value:function render(){var _this$props$theme$cur2;var button=(_this$props$theme$cur2=this.props.theme.current)!==null&&_this$props$theme$cur2!==void 0&&_this$props$theme$cur2.map3d?/*#__PURE__*/React.createElement(View3DSwitcher,{key:"View3DButton",position:this.props.buttonPosition}):null;return[button,this.render3DWindow()]}}])}(React.Component);_defineProperty(View3D,"propTypes",{addLayerFeatures:PropTypes.func,/** The position slot index of the 3d switch map button, from the bottom (0: bottom slot). */buttonPosition:PropTypes.number,/** The position of the navigation controls. Either `top` or `bottom`. */controlsPosition:PropTypes.string,display:PropTypes.object,/** Default window geometry. */geometry:PropTypes.shape({initialWidth:PropTypes.number,initialHeight:PropTypes.number,initialX:PropTypes.number,initialY:PropTypes.number,initiallyDocked:PropTypes.bool}),layers:PropTypes.object,localConfig:PropTypes.object,map:PropTypes.object,panTo:PropTypes.func,/** Options to pass to the 3D plugins, in the form `{"<PluginName>": {<options>}}.
+         * Refer to the documentation of the <a href="#plugins3d">3D plugins</a> for settable options. */pluginOptions:PropTypes.object,plugins3d:PropTypes.object,removeLayer:PropTypes.func,searchProviders:PropTypes.object,setView3dMode:PropTypes.func,startupParams:PropTypes.object,startupState:PropTypes.object,theme:PropTypes.object,view3dMode:PropTypes.number,zoomToPoint:PropTypes.func});_defineProperty(View3D,"defaultProps",{buttonPosition:6,controlsPosition:"top",geometry:{initialWidth:600,initialHeight:800,initialX:0,initialY:0,initiallyDocked:true},pluginOptions:{}});export default(function(plugins3d){return connect(function(state){return{plugins3d:plugins3d,display:state.display,map:state.map,layers:state.layers,theme:state.theme,localConfig:state.localConfig,view3dMode:state.display.view3dMode,startupParams:state.localConfig.startupParams,startupState:state.localConfig.startupState}},{addLayerFeatures:addLayerFeatures,removeLayer:removeLayer,panTo:panTo,zoomToPoint:zoomToPoint,setView3dMode:setView3dMode})(View3D)});

package/plugins/map/LocateSupport.js

@@ -6,9 +6,7 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  *
- */import React from"react";import{connect}from"react-redux";import PropTypes from"prop-types";import{changeLocateState,changeLocatePosition,onLocateError}from"../../actions/locate";import OlLocate from"../../components/map/OlLocate";/**
+ */import React from"react";import{connect}from"react-redux";import ol from"openlayers";import PropTypes from"prop-types";import{changeLocateState,changeLocatePosition,onLocateError}from"../../actions/locate";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import"./style/LocateSupport.css";/**
  * GPS locate support for the map component.
- */var LocateSupport=/*#__PURE__*/function(_React$Component){function LocateSupport(){var _this;_classCallCheck(this,LocateSupport);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,LocateSupport,[].concat(args));_defineProperty(_this,"configureLocate",function(newState){var state=_this.locate.get("state");if(newState==="ENABLED"&&state==="DISABLED"){_this.locate.start()}else if(newState==="FOLLOWING"&&state==="ENABLED"){_this.locate.startFollow()}else if(newState==="FOLLOWING"&&state==="DISABLED"){_this.locate.start();_this.locate.startFollow()}else if(newState==="DISABLED"){_this.locate.stop()}});_defineProperty(_this,"onPropChange",function(key,value){if(key==="state"&&_this.props.locateState.state!==value){_this.props.changeLocateState(value)}else if(key==="position"&&_this.props.locateState.position!==value){_this.props.changeLocatePosition(value)}});_defineProperty(_this,"onLocationError",function(err){_this.props.onLocateError(err.message);// User denied geolocation prompt
-if(err.code===1){_this.props.changeLocateState("PERMISSION_DENIED")}else{_this.props.changeLocateState("DISABLED")}});return _this}_inherits(LocateSupport,_React$Component);return _createClass(LocateSupport,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;var options=_objectSpread(_objectSpread({},LocateSupport.defaultOpt),this.props.options);this.locate=new OlLocate(this.props.map,options);this.locate.options.onLocationError=this.onLocationError;this.locate.on("propertychange",function(e){_this2.onPropChange(e.key,e.target.get(e.key))});this.configureLocate(this.props.locateState.state);var startupMode=options.startupMode.toUpperCase();var startupParams=this.props.startupParams;var highlightCenter=["true","1"].includes((startupParams.hc||"").toLowerCase());var searchParams=startupParams.hp||startupParams.hf||startupParams.st;if(startupMode!=="DISABLED"&&!searchParams&&!highlightCenter){this.props.changeLocateState(startupMode)}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.locateState.state!==prevProps.locateState.state){this.configureLocate(this.props.locateState.state)}if(this.props.projection!==prevProps.projection){this.locate.setProjection(this.props.projection)}}},{key:"render",value:function render(){return null}}])}(React.Component);_defineProperty(LocateSupport,"propTypes",{changeLocatePosition:PropTypes.func,changeLocateState:PropTypes.func,locateState:PropTypes.object,map:PropTypes.object,onLocateError:PropTypes.func,options:PropTypes.object,projection:PropTypes.string,startupParams:PropTypes.object});_defineProperty(LocateSupport,"defaultProps",{options:{}});_defineProperty(LocateSupport,"defaultOpt",{startupMode:"DISABLED",// either "DISABLED", "ENABLED" or "FOLLOWING"
-follow:false,// follow with zoom and pan the user's location
-remainActive:true,metric:true,stopFollowingOnDrag:false,keepCurrentZoomLevel:true,locateOptions:{maximumAge:2000,enableHighAccuracy:true,timeout:10000,maxZoom:18}});export default connect(function(state){return{locateState:state.locate,startupParams:state.localConfig.startupParams}},{changeLocateState:changeLocateState,changeLocatePosition:changeLocatePosition,onLocateError:onLocateError})(LocateSupport);
+ */var LocateSupport=/*#__PURE__*/function(_React$Component){function LocateSupport(props){var _this;_classCallCheck(this,LocateSupport);_this=_callSuper(this,LocateSupport,[props]);_defineProperty(_this,"onLocationError",function(err){_this.props.onLocateError(err.message);// User denied geolocation prompt
+if(err.code===1){_this.props.changeLocateState("PERMISSION_DENIED")}else{_this.props.changeLocateState("DISABLED")}_this.stop()});_defineProperty(_this,"start",function(){_this.props.changeLocateState("LOCATING");_this.geolocate.on("change:position",_this.positionChanged);_this.geolocate.on("error",_this.onLocationError);_this.geolocate.setTracking(true);_this.props.map.addLayer(_this.posLayer);_this.props.map.addOverlay(_this.posOverlay);_this.props.map.on("pointerdrag",_this.maybeStopFollow);_this.props.map.on("click",_this.maybeShowPopup);_this.props.map.on("touch",_this.maybeShowPopup);_this.posPopup.hidden=true;_this.posLayer.setVisible(false)});_defineProperty(_this,"stop",function(){_this.geolocate.un("change:position",_this.positionChanged);_this.geolocate.un("error",_this.onLocationError);_this.geolocate.setTracking(false);_this.props.map.removeLayer(_this.posLayer);_this.props.map.removeOverlay(_this.posOverlay);_this.props.map.un("pointerdrag",_this.maybeStopFollow);_this.props.map.un("click",_this.maybeShowPopup);_this.props.map.un("touch",_this.maybeShowPopup)});_defineProperty(_this,"positionChanged",function(){if(_this.props.locateState.state==="LOCATING"){_this.props.changeLocateState(_this.requestedMode);_this.posLayer.setVisible(true)}var mapPos=_this.geolocate.getPosition();var wgsPos=CoordinatesUtils.reproject(mapPos,_this.props.projection,"EPSG:4326");_this.props.changeLocatePosition(wgsPos);var point=new ol.geom.Point(mapPos);if(_this.props.drawCircle){var circle=new ol.geom.Circle(mapPos,_this.geolocate.getAccuracy());_this.posFeature.setGeometry(new ol.geom.GeometryCollection([point,circle]))}else{_this.posFeature.setGeometry(point)}if(!_this.posPopup.hidden){_this.updatePopupContents()}if(_this.props.locateState.state==="FOLLOWING"){_this.props.map.getView().setCenter(mapPos)}});_defineProperty(_this,"maybeStopFollow",function(){if(_this.props.locateState.state==="FOLLOWING"&&_this.props.stopFollowingOnDrag){_this.props.changeLocateState("ENABLED")}});_defineProperty(_this,"maybeShowPopup",function(ev){if(_this.props.showPopup){var feature=_this.props.map.getFeaturesAtPixel(ev.pixel,{layerFilter:function layerFilter(layer){return layer===_this.posLayer}})[0];if(feature){_this.posPopup.hidden=false;_this.updatePopupContents();ev.stopPropagation()}else{_this.posPopup.hidden=true}}});_defineProperty(_this,"updatePopupContents",function(){var accuracy=_this.geolocate.getAccuracy();var contents=LocaleUtils.tr("locate.popup");if(_this.props.metric){contents=contents.replace("{distance}",accuracy);contents=contents.replace("{unit}",LocaleUtils.tr("locate.metersUnit"))}else{contents=contents.replace("{distance}",Math.round(accuracy*3.2808399));contents=contents.replace("{unit}",LocaleUtils.tr("locate.feetUnit"))}_this.posOverlayContents.innerHTML=contents;_this.posOverlay.setPosition(_this.posFeature.getGeometry().getGeometries()[0].getCoordinates())});_defineProperty(_this,"locationPositionFeatureStyle",function(){return new ol.style.Style({image:new ol.style.Circle({radius:6,fill:new ol.style.Fill({color:"rgba(42, 147, 238, 0.7)"}),stroke:new ol.style.Stroke({color:"rgba(19, 106, 236, 1)",width:2})}),fill:new ol.style.Fill({color:"rgba(19, 106, 236, 0.15)"}),stroke:new ol.style.Stroke({color:"rgba(19, 106, 236, 1)",width:2})})});_defineProperty(_this,"createPopup",function(){var popup=document.createElement("div");popup.className="locate-popup";popup.innerHTML="\n          <a class=\"locate-popup-close\">\u2716</a>\n          <div class=\"locate-popup-contents\">\n        ";return popup});var trackingOptions=_objectSpread(_objectSpread({},LocateSupport.defaultProps.trackingOptions),props.trackingOptions);_this.geolocate=new ol.Geolocation({projection:_this.props.projection,trackingOptions:trackingOptions});_this.posLayer=new ol.layer.Vector({source:new ol.source.Vector,zIndex:1000000,style:_this.locationPositionFeatureStyle});_this.posFeature=new ol.Feature;_this.posFeature.set("__suppress_map_click",true);_this.posLayer.getSource().addFeature(_this.posFeature);_this.posPopup=_this.createPopup();_this.posOverlay=new ol.Overlay({element:_this.posPopup,positioning:"top-center",stopEvent:true});_this.posOverlayContents=_this.posPopup.getElementsByClassName("locate-popup-contents")[0];_this.posPopup.getElementsByClassName("locate-popup-close")[0].onclick=function(){_this.posPopup.hidden=true};_this.requestedMode="DISABLED";return _this}_inherits(LocateSupport,_React$Component);return _createClass(LocateSupport,[{key:"componentDidMount",value:function componentDidMount(){var startupMode=this.props.startupMode.toUpperCase();var startupParams=this.props.startupParams;var highlightCenter=["true","1"].includes((startupParams.hc||"").toLowerCase());var searchParams=startupParams.hp||startupParams.hf||startupParams.st;if(startupMode!=="DISABLED"&&!searchParams&&!highlightCenter){this.requestedMode=startupMode;this.start()}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var newState=this.props.locateState.state;var oldState=prevProps.locateState.state;if(newState!==oldState){if(newState==="ENABLED"||newState==="FOLLOWING"){this.requestedMode=newState;if(oldState==="DISABLED"){this.start()}}else if(newState==="DISABLED"){this.requestedMode="DISABLED";this.stop()}}if(this.props.projection!==prevProps.projection){this.geolocate.setProjection(this.props.projection)}}},{key:"render",value:function render(){return null}}])}(React.Component);_defineProperty(LocateSupport,"propTypes",{changeLocatePosition:PropTypes.func,changeLocateState:PropTypes.func,/** Whether to draw an accuracy circle around the location point. */drawCircle:PropTypes.bool,locateState:PropTypes.object,map:PropTypes.object,/** Whether to display the accuracy in meters (`true`) or in feet (`false`). */metric:PropTypes.bool,onLocateError:PropTypes.func,projection:PropTypes.string,/** Whether to show a popup displaying accuracy information when clicking on the location point. */showPopup:PropTypes.bool,/** The geolocation startup mode. Either `DISABLED`, `ENABLED` or `FOLLOWING`. */startupMode:PropTypes.string,startupParams:PropTypes.object,/** Whether to stop following when the map is dragged. */stopFollowingOnDrag:PropTypes.bool,/** Tracking options, as documented in the [HTML5 Geolocation spec](https://www.w3.org/TR/geolocation-API/#position_options_interface) */trackingOptions:PropTypes.object});_defineProperty(LocateSupport,"defaultProps",{drawCircle:true,metric:true,showPopup:false,startupMode:"DISABLED",stopFollowingOnDrag:false,trackingOptions:{maximumAge:2000,enableHighAccuracy:true,timeout:10000}});export default connect(function(state){return{locateState:state.locate,startupParams:state.localConfig.startupParams}},{changeLocateState:changeLocateState,changeLocatePosition:changeLocatePosition,onLocateError:onLocateError})(LocateSupport);

package/plugins/map/style/LocateSupport.css

@@ -0,0 +1,33 @@
+div.locate-popup {
+    position: absolute;
+    text-align: center;
+    transform: translate(-50%,calc(-100% - 1em));
+    background: white;
+    box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+    white-space: nowrap;
+    border-radius: 12px;
+    padding: 1em 2em 1em 1em;
+}
+
+div.locate-popup:after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: calc(50% - 1em);
+    bottom: -1em;
+    width: 0;
+    height: 0;
+    border-left: 1em solid transparent;
+    border-right: 1em solid transparent;
+    border-top: 1em solid white;
+}
+
+a.locate-popup-close {
+    position: absolute;
+    top: 0.25em;
+    right: 0.25em;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 125%;
+    color: black;
+}

package/plugins/map3d/BackgroundSwitcher3D.js

@@ -5,5 +5,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 PropTypes from"prop-types";import{BackgroundSwitcher}from"../BackgroundSwitcher";/**
- * Map button for switching the background layer.
+ * Map button for switching the background layer of the 3D map.
  */var BackgroundSwitcher3D=/*#__PURE__*/function(_React$Component){function BackgroundSwitcher3D(){_classCallCheck(this,BackgroundSwitcher3D);return _callSuper(this,BackgroundSwitcher3D,arguments)}_inherits(BackgroundSwitcher3D,_React$Component);return _createClass(BackgroundSwitcher3D,[{key:"render",value:function render(){return/*#__PURE__*/React.createElement(BackgroundSwitcher,{changeLayerVisibility:this.props.sceneContext.setBaseLayer,layers:this.props.sceneContext.baseLayers})}}])}(React.Component);_defineProperty(BackgroundSwitcher3D,"availableIn3D",true);_defineProperty(BackgroundSwitcher3D,"propTypes",{sceneContext:PropTypes.object});export{BackgroundSwitcher3D as default};

package/plugins/map3d/BottomBar3D.js

@@ -4,4 +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{connect}from"react-redux";import PropTypes from"prop-types";import{setBottombarHeight}from"../../actions/windows";import CoordinatesUtils from"../../utils/CoordinatesUtils";import"./style/BottomBar3D.css";var BottomBar3D=/*#__PURE__*/function(_React$Component){function BottomBar3D(){var _this;_classCallCheck(this,BottomBar3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,BottomBar3D,[].concat(args));_defineProperty(_this,"state",{cursorPosition:null,progress:0});_defineProperty(_this,"scheduleGetCursorPosition",function(ev){var rect=ev.currentTarget.getBoundingClientRect();var x=(ev.clientX-rect.left)/rect.width*2-1;var y=-(ev.clientY-rect.top)/rect.height*2+1;clearTimeout(_this.cursorPositionTimeout);_this.cursorPositionTimeout=setTimeout(function(){return _this.getCursorPosition(x,y)},150)});_defineProperty(_this,"getCursorPosition",function(x,y){var intersection=_this.props.sceneContext.getSceneIntersection(x,y);if(intersection){var p=intersection.point;_this.setState({cursorPosition:[p.x,p.y,p.z]})}});_defineProperty(_this,"storeHeight",function(el){if(el){_this.props.setBottombarHeight(el.clientHeight)}});return _this}_inherits(BottomBar3D,_React$Component);return _createClass(BottomBar3D,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.props.sceneContext.scene.viewport.addEventListener("mousemove",this.scheduleGetCursorPosition);this.props.sceneContext.scene.addEventListener("update-end",function(){_this2.setState({progress:Math.round(_this2.props.sceneContext.scene.progress*100)+"%"})})}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.cursorPositionTimeout)}},{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar",ref:this.storeHeight},/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-progress"},/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-progressbar",style:{width:this.state.progress}}),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-progress-label"},this.state.progress)),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-spacer"}),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-position"},(this.state.cursorPosition||[]).map(function(x){return x.toFixed(0)}).join(" ")),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-projection"},this.props.sceneContext.mapCrs?CoordinatesUtils.getAvailableCRS()[this.props.sceneContext.mapCrs].label:""),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-spacer"}))}}])}(React.Component);_defineProperty(BottomBar3D,"availableIn3D",true);_defineProperty(BottomBar3D,"propTypes",{sceneContext:PropTypes.object,setBottombarHeight:PropTypes.func});export default connect(function(){return{}},{setBottombarHeight:setBottombarHeight})(BottomBar3D);
+ */import React from"react";import{connect}from"react-redux";import PropTypes from"prop-types";import{setBottombarHeight}from"../../actions/windows";import CoordinatesUtils from"../../utils/CoordinatesUtils";import"./style/BottomBar3D.css";/**
+ * Bottom bar of the 3D map, displaying coordinates, projection, etc.
+ */var BottomBar3D=/*#__PURE__*/function(_React$Component){function BottomBar3D(){var _this;_classCallCheck(this,BottomBar3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,BottomBar3D,[].concat(args));_defineProperty(_this,"state",{cursorPosition:null,progress:0});_defineProperty(_this,"scheduleGetCursorPosition",function(ev){var rect=ev.currentTarget.getBoundingClientRect();var x=(ev.clientX-rect.left)/rect.width*2-1;var y=-(ev.clientY-rect.top)/rect.height*2+1;clearTimeout(_this.cursorPositionTimeout);_this.cursorPositionTimeout=setTimeout(function(){return _this.getCursorPosition(x,y)},150)});_defineProperty(_this,"getCursorPosition",function(x,y){var intersection=_this.props.sceneContext.getSceneIntersection(x,y);if(intersection){var p=intersection.point;_this.setState({cursorPosition:[p.x,p.y,p.z]})}});_defineProperty(_this,"storeHeight",function(el){if(el){_this.props.setBottombarHeight(el.clientHeight)}});return _this}_inherits(BottomBar3D,_React$Component);return _createClass(BottomBar3D,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.props.sceneContext.scene.viewport.addEventListener("mousemove",this.scheduleGetCursorPosition);this.props.sceneContext.scene.addEventListener("update-end",function(){_this2.setState({progress:Math.round(_this2.props.sceneContext.scene.progress*100)+"%"})})}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.cursorPositionTimeout)}},{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar",ref:this.storeHeight},/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-progress"},/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-progressbar",style:{width:this.state.progress}}),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-progress-label"},this.state.progress)),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-spacer"}),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-position"},(this.state.cursorPosition||[]).map(function(x){return x.toFixed(0)}).join(" ")),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-projection"},this.props.sceneContext.mapCrs?CoordinatesUtils.getAvailableCRS()[this.props.sceneContext.mapCrs].label:""),/*#__PURE__*/React.createElement("div",{className:"map3d-bottombar-spacer"}))}}])}(React.Component);_defineProperty(BottomBar3D,"propTypes",{sceneContext:PropTypes.object,setBottombarHeight:PropTypes.func});export default connect(function(){return{}},{setBottombarHeight:setBottombarHeight})(BottomBar3D);

package/plugins/map3d/Compare3D.js

@@ -4,9 +4,11 @@ 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{Group,Plane,Raycaster,Vector2,Vector3}from"three";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import Icon from"../../components/Icon";import SideBar from"../../components/SideBar";import NumberInput from"../../components/widgets/NumberInput";import arrowModel from"../../resources/arrow.glb";import LocaleUtils from"../../utils/LocaleUtils";import"./style/Compare3D.css";var Compare3D=/*#__PURE__*/function(_React$Component){function Compare3D(){var _this;_classCallCheck(this,Compare3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Compare3D,[].concat(args));_defineProperty(_this,"state",{enabled:false,clippedObjects:{},planeX:0,planeY:0,planeA:0});_defineProperty(_this,"updateClippingPlane",function(){var point=new Vector3(_this.state.planeX,_this.state.planeY,0);var alpha=_this.state.planeA/180*Math.PI;var normal=new Vector3(Math.sin(alpha),Math.cos(alpha),0);var leftPlane=new Plane;var rightPlane=new Plane;leftPlane.setFromNormalAndCoplanarPoint(normal,point);rightPlane.setFromNormalAndCoplanarPoint(normal.multiplyScalar(-1),point);Object.entries(_this.state.clippedObjects).forEach(function(_ref){var _ref2=_slicedToArray(_ref,2),objectId=_ref2[0],config=_ref2[1];var planes=[];if(config.left){planes.push(leftPlane)}if(config.right){planes.push(rightPlane)}if(objectId==="__terrain"){_this.props.sceneContext.map.clippingPlanes=planes}else{var object=_this.props.sceneContext.getSceneObject(objectId);object.clippingPlanes=planes;object.traverse(function(child){if(child.material){child.material.clippingPlanes=planes;child.material.clipShadows=true}})}});_this.props.sceneContext.scene.notifyChange();_this.positionArrows(_this.state.planeX,_this.state.planeY,_this.state.planeA)});_defineProperty(_this,"clearClippingPlane",function(){Object.keys(_this.state.clippedObjects).forEach(function(objectId){if(objectId==="__terrain"){_this.props.sceneContext.map.clippingPlanes=[]}else{var object=_this.props.sceneContext.getSceneObject(objectId);object.clippingPlanes=[];object.traverse(function(child){if(child.material){child.material.clippingPlanes=[];child.material.clipShadows=false}})}});if(_this.props.active){_this.disableArrows()}_this.props.sceneContext.scene.notifyChange()});_defineProperty(_this,"enableArrows",function(){_this.props.sceneContext.addSceneObject("__compareArrows",_this.arrows);_this.props.sceneContext.scene.view.controls.addEventListener("change",_this.centerArrowsInView);var renderer=_this.props.sceneContext.scene.renderer;renderer.domElement.addEventListener("pointerdown",_this.dragArrows);_this.centerArrowsInView()});_defineProperty(_this,"disableArrows",function(){var _this$props$sceneCont,_this$props$sceneCont2;(_this$props$sceneCont=_this.props.sceneContext.scene.view.controls)===null||_this$props$sceneCont===void 0||(_this$props$sceneCont2=_this$props$sceneCont.removeEventListener)===null||_this$props$sceneCont2===void 0||_this$props$sceneCont2.call(_this$props$sceneCont,"change",_this.centerArrowsInView);_this.props.sceneContext.removeSceneObject("__compareArrows");_this.props.sceneContext.scene.renderer.domElement.removeEventListener("pointerdown",_this.dragArrows)});_defineProperty(_this,"dragArrows",function(ev){var mousePos=function mousePos(event){var rect=event.target.getBoundingClientRect();var x=(event.clientX-rect.left)/rect.width*2-1;var y=-((event.clientY-rect.top)/rect.height)*2+1;return new Vector2(x,y)};var camera=_this.props.sceneContext.scene.view.camera;var raycaster=new Raycaster;raycaster.setFromCamera(mousePos(ev),camera);var intersects=raycaster.intersectObject(_this.arrows).length>0;if(!intersects){return}var plane=new Plane().setFromNormalAndCoplanarPoint(new Vector3(0,0,1),_this.arrows.position);var startPos=raycaster.ray.intersectPlane(plane,new Vector3);var planePos=new Vector2(_this.state.planeX,_this.state.planeY);var alpha=_this.state.planeA/180*Math.PI;var planeNormal=new Vector3(Math.sin(alpha),Math.cos(alpha),0);var moveArrows=function moveArrows(event){raycaster.setFromCamera(mousePos(event),camera);plane.setFromNormalAndCoplanarPoint(new Vector3(0,0,1),_this.arrows.position);var pos=raycaster.ray.intersectPlane(plane,new Vector3);var delta=planeNormal.clone().multiplyScalar(new Vector3().copy(pos.sub(startPos)).dot(planeNormal));_this.setState({planeX:planePos.x+delta.x,planeY:planePos.y+delta.y});_this.positionArrows(planePos.x+delta.x,planePos.y+delta.y,_this.state.planeA)};_this.props.sceneContext.scene.view.controls.enabled=false;ev.view.addEventListener("pointermove",moveArrows);ev.view.addEventListener("pointerup",function(){_this.props.sceneContext.scene.view.controls.enabled=true;ev.view.removeEventListener("pointermove",moveArrows)},{once:true})});_defineProperty(_this,"centerArrowsInView",function(){var _inter$point;var inter=_this.props.sceneContext.getSceneIntersection(0,0);var center=(_inter$point=inter===null||inter===void 0?void 0:inter.point)!==null&&_inter$point!==void 0?_inter$point:_this.props.sceneContext.scene.view.controls.target.clone();var alpha=_this.state.planeA/180*Math.PI;var dir=new Vector3(Math.cos(alpha),-Math.sin(alpha),0);var curPos=new Vector3(_this.state.planeX,_this.state.planeY,0);var newPos=curPos.add(dir.multiplyScalar(center.sub(curPos).dot(dir)));_this.setState({planeX:newPos.x,planeY:newPos.y});_this.positionArrows(newPos.x,newPos.y,_this.state.planeA)});_defineProperty(_this,"positionArrows",function(x,y,alpha){var _this$props$sceneCont3;var target=new Vector3(x,y,0);var distance=_this.props.sceneContext.scene.view.camera.position.distanceTo(target);var scale=Math.max(1,distance/200);var z=(_this$props$sceneCont3=_this.props.sceneContext.getTerrainHeightFromMap([x,y]))!==null&&_this$props$sceneCont3!==void 0?_this$props$sceneCont3:0;_this.arrows.position.x=target.x;_this.arrows.position.y=target.y;_this.arrows.position.z=z;_this.arrows.rotation.z=-alpha/180*Math.PI;_this.arrows.scale.set(scale,scale,scale);_this.arrows.updateMatrixWorld()});_defineProperty(_this,"renderBody",function(){var sceneContext=_this.props.sceneContext;var objects=_objectSpread({__terrain:{layertree:true,title:LocaleUtils.tr("map3d.terrain")}},sceneContext.sceneObjects);var objectIds=Object.keys(objects).filter(function(objectId){return objects[objectId].layertree});return/*#__PURE__*/React.createElement("div",{className:"compare3d-body",role:"body"},/*#__PURE__*/React.createElement("div",{className:"compare3d-title",onClick:_this.toggleCompare},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.enabled?"checked":"unchecked"}),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("compare3d.compare_objects"))),/*#__PURE__*/React.createElement("div",{className:"compare3d-objects"},["left","right"].map(function(section){var clipState=_this.state.clippedObjects;var toggleAllIcon="checked";var toggleAllValue=true;var toggleAllState=objectIds.reduce(function(res,id){var _clipState$id;return res+((_clipState$id=clipState[id])===null||_clipState$id===void 0?void 0:_clipState$id[section])},0);if(toggleAllState===objectIds.length){toggleAllIcon="unchecked";toggleAllValue=false}else if(toggleAllState>0){toggleAllIcon="tristate"}return/*#__PURE__*/React.createElement("div",{className:"compare3d-section",key:"compare-"+section},/*#__PURE__*/React.createElement("div",{className:"compare3d-item compare3d-item-toggleall",onClick:_this.state.enabled?function(){return _this.toggleAllObjects(section,objectIds,toggleAllValue)}:null,title:LocaleUtils.tr("compare3d.toggleall")},/*#__PURE__*/React.createElement(Icon,{className:"compare3d-item-checkbox",disabled:!_this.state.enabled,icon:toggleAllIcon}),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("compare3d.toggleall"))),objectIds.map(function(objectId){var _objects$objectId$tit,_clipState$objectId,_objects$objectId$tit2;return/*#__PURE__*/React.createElement("div",{className:"compare3d-item",key:objectId,onClick:_this.state.enabled?function(){return _this.toggleObject(section,objectId)}:null,title:(_objects$objectId$tit=objects[objectId].title)!==null&&_objects$objectId$tit!==void 0?_objects$objectId$tit:objectId},/*#__PURE__*/React.createElement(Icon,{className:"compare3d-item-checkbox",disabled:!_this.state.enabled,icon:(_clipState$objectId=clipState[objectId])!==null&&_clipState$objectId!==void 0&&_clipState$objectId[section]?"unchecked":"checked"}),/*#__PURE__*/React.createElement("span",null,(_objects$objectId$tit2=objects[objectId].title)!==null&&_objects$objectId$tit2!==void 0?_objects$objectId$tit2:objectId))}))})),/*#__PURE__*/React.createElement("div",{className:"compare3d-title"},LocaleUtils.tr("compare3d.clipplane")),/*#__PURE__*/React.createElement("table",{className:"compare3d-planeconfig"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,"x"),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{disabled:!_this.state.enabled,onChange:function onChange(x){return _this.setState({planeX:x})},value:_this.state.planeX}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,"y"),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{disabled:!_this.state.enabled,onChange:function onChange(y){return _this.setState({planeY:y})},value:_this.state.planeY}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,"\u03B1"),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{disabled:!_this.state.enabled,onChange:function onChange(a){return _this.setState({planeA:a})},suffix:"\xB0",value:_this.state.planeA}))))))});_defineProperty(_this,"toggleCompare",function(){_this.setState(function(state){var newState={enabled:!state.enabled};if(newState.enabled){// Position plane in current view
+ */import React from"react";import{connect}from"react-redux";import PropTypes from"prop-types";import{Group,Plane,Raycaster,Vector2,Vector3}from"three";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import{setCurrentTask}from"../../actions/task";import Icon from"../../components/Icon";import MessageBar from"../../components/MessageBar";import SideBar from"../../components/SideBar";import NumberInput from"../../components/widgets/NumberInput";import arrowModel from"../../resources/arrow.glb";import LocaleUtils from"../../utils/LocaleUtils";import"./style/Compare3D.css";/**
+ * Split-screen and compare objects in the 3D map.
+ */var Compare3D=/*#__PURE__*/function(_React$Component){function Compare3D(){var _this;_classCallCheck(this,Compare3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Compare3D,[].concat(args));_defineProperty(_this,"state",{enabled:false,clippedObjects:{},planeX:0,planeY:0,planeA:0});_defineProperty(_this,"updateClippingPlane",function(){var point=new Vector3(_this.state.planeX,_this.state.planeY,0);var alpha=_this.state.planeA/180*Math.PI;var normal=new Vector3(Math.sin(alpha),Math.cos(alpha),0);var leftPlane=new Plane;var rightPlane=new Plane;leftPlane.setFromNormalAndCoplanarPoint(normal,point);rightPlane.setFromNormalAndCoplanarPoint(normal.multiplyScalar(-1),point);Object.entries(_this.state.clippedObjects).forEach(function(_ref){var _ref2=_slicedToArray(_ref,2),objectId=_ref2[0],config=_ref2[1];var planes=[];if(config.left){planes.push(leftPlane)}if(config.right){planes.push(rightPlane)}if(objectId==="__terrain"){_this.props.sceneContext.map.clippingPlanes=planes}else{var object=_this.props.sceneContext.getSceneObject(objectId);object.clippingPlanes=planes;object.traverse(function(child){if(child.material){child.material.clippingPlanes=planes;child.material.clipShadows=true}})}});_this.props.sceneContext.scene.notifyChange();_this.positionArrows(_this.state.planeX,_this.state.planeY,_this.state.planeA)});_defineProperty(_this,"clearClippingPlane",function(){Object.keys(_this.state.clippedObjects).forEach(function(objectId){if(objectId==="__terrain"){_this.props.sceneContext.map.clippingPlanes=[]}else{var object=_this.props.sceneContext.getSceneObject(objectId);object.clippingPlanes=[];object.traverse(function(child){if(child.material){child.material.clippingPlanes=[];child.material.clipShadows=false}})}});if(_this.props.active){_this.disableArrows()}_this.props.sceneContext.scene.notifyChange()});_defineProperty(_this,"enableArrows",function(){_this.props.sceneContext.addSceneObject("__compareArrows",_this.arrows);_this.props.sceneContext.scene.view.controls.addEventListener("change",_this.centerArrowsInView);var renderer=_this.props.sceneContext.scene.renderer;renderer.domElement.addEventListener("pointerdown",_this.dragArrows);_this.centerArrowsInView()});_defineProperty(_this,"disableArrows",function(){var _this$props$sceneCont,_this$props$sceneCont2;(_this$props$sceneCont=_this.props.sceneContext.scene.view.controls)===null||_this$props$sceneCont===void 0||(_this$props$sceneCont2=_this$props$sceneCont.removeEventListener)===null||_this$props$sceneCont2===void 0||_this$props$sceneCont2.call(_this$props$sceneCont,"change",_this.centerArrowsInView);_this.props.sceneContext.removeSceneObject("__compareArrows");_this.props.sceneContext.scene.renderer.domElement.removeEventListener("pointerdown",_this.dragArrows)});_defineProperty(_this,"dragArrows",function(ev){var mousePos=function mousePos(event){var rect=event.target.getBoundingClientRect();var x=(event.clientX-rect.left)/rect.width*2-1;var y=-((event.clientY-rect.top)/rect.height)*2+1;return new Vector2(x,y)};var camera=_this.props.sceneContext.scene.view.camera;var raycaster=new Raycaster;raycaster.setFromCamera(mousePos(ev),camera);var intersects=raycaster.intersectObject(_this.arrows).length>0;if(!intersects){return}var plane=new Plane().setFromNormalAndCoplanarPoint(new Vector3(0,0,1),_this.arrows.position);var startPos=raycaster.ray.intersectPlane(plane,new Vector3);var planePos=new Vector2(_this.state.planeX,_this.state.planeY);var alpha=_this.state.planeA/180*Math.PI;var planeNormal=new Vector3(Math.sin(alpha),Math.cos(alpha),0);var moveArrows=function moveArrows(event){raycaster.setFromCamera(mousePos(event),camera);plane.setFromNormalAndCoplanarPoint(new Vector3(0,0,1),_this.arrows.position);var pos=raycaster.ray.intersectPlane(plane,new Vector3);var delta=planeNormal.clone().multiplyScalar(new Vector3().copy(pos.sub(startPos)).dot(planeNormal));_this.setState({planeX:planePos.x+delta.x,planeY:planePos.y+delta.y});_this.positionArrows(planePos.x+delta.x,planePos.y+delta.y,_this.state.planeA)};_this.props.sceneContext.scene.view.controls.enabled=false;ev.view.addEventListener("pointermove",moveArrows);ev.view.addEventListener("pointerup",function(){_this.props.sceneContext.scene.view.controls.enabled=true;ev.view.removeEventListener("pointermove",moveArrows)},{once:true})});_defineProperty(_this,"centerArrowsInView",function(){var _inter$point;var inter=_this.props.sceneContext.getSceneIntersection(0,0);var center=(_inter$point=inter===null||inter===void 0?void 0:inter.point)!==null&&_inter$point!==void 0?_inter$point:_this.props.sceneContext.scene.view.controls.target.clone();var alpha=_this.state.planeA/180*Math.PI;var dir=new Vector3(Math.cos(alpha),-Math.sin(alpha),0);var curPos=new Vector3(_this.state.planeX,_this.state.planeY,0);var newPos=curPos.add(dir.multiplyScalar(center.sub(curPos).dot(dir)));_this.setState({planeX:newPos.x,planeY:newPos.y});_this.positionArrows(newPos.x,newPos.y,_this.state.planeA)});_defineProperty(_this,"positionArrows",function(x,y,alpha){var _this$props$sceneCont3;var target=new Vector3(x,y,0);var distance=_this.props.sceneContext.scene.view.camera.position.distanceTo(target);var scale=Math.max(1,distance/200);var z=(_this$props$sceneCont3=_this.props.sceneContext.getTerrainHeightFromMap([x,y]))!==null&&_this$props$sceneCont3!==void 0?_this$props$sceneCont3:0;_this.arrows.position.x=target.x;_this.arrows.position.y=target.y;_this.arrows.position.z=z;_this.arrows.rotation.z=-alpha/180*Math.PI;_this.arrows.scale.set(scale,scale,scale);_this.arrows.updateMatrixWorld()});_defineProperty(_this,"renderBody",function(){var sceneContext=_this.props.sceneContext;var objects=_objectSpread({__terrain:{layertree:true,title:LocaleUtils.tr("map3d.terrain")}},sceneContext.sceneObjects);var objectIds=Object.keys(objects).filter(function(objectId){return objects[objectId].layertree});return/*#__PURE__*/React.createElement("div",{className:"compare3d-body",role:"body"},/*#__PURE__*/React.createElement("div",{className:"compare3d-title",onClick:_this.toggleCompare},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.enabled?"checked":"unchecked"}),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("compare3d.compare_objects"))),/*#__PURE__*/React.createElement("div",{className:"compare3d-objects"},["left","right"].map(function(section){var clipState=_this.state.clippedObjects;var toggleAllIcon="checked";var toggleAllValue=true;var toggleAllState=objectIds.reduce(function(res,id){var _clipState$id;return res+((_clipState$id=clipState[id])===null||_clipState$id===void 0?void 0:_clipState$id[section])},0);if(toggleAllState===objectIds.length){toggleAllIcon="unchecked";toggleAllValue=false}else if(toggleAllState>0){toggleAllIcon="tristate"}return/*#__PURE__*/React.createElement("div",{className:"compare3d-section",key:"compare-"+section},/*#__PURE__*/React.createElement("div",{className:"compare3d-item compare3d-item-toggleall",onClick:_this.state.enabled?function(){return _this.toggleAllObjects(section,objectIds,toggleAllValue)}:null,title:LocaleUtils.tr("compare3d.toggleall")},/*#__PURE__*/React.createElement(Icon,{className:"compare3d-item-checkbox",disabled:!_this.state.enabled,icon:toggleAllIcon}),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("compare3d.toggleall"))),objectIds.map(function(objectId){var _objects$objectId$tit,_clipState$objectId,_objects$objectId$tit2;return/*#__PURE__*/React.createElement("div",{className:"compare3d-item",key:objectId,onClick:_this.state.enabled?function(){return _this.toggleObject(section,objectId)}:null,title:(_objects$objectId$tit=objects[objectId].title)!==null&&_objects$objectId$tit!==void 0?_objects$objectId$tit:objectId},/*#__PURE__*/React.createElement(Icon,{className:"compare3d-item-checkbox",disabled:!_this.state.enabled,icon:(_clipState$objectId=clipState[objectId])!==null&&_clipState$objectId!==void 0&&_clipState$objectId[section]?"unchecked":"checked"}),/*#__PURE__*/React.createElement("span",null,(_objects$objectId$tit2=objects[objectId].title)!==null&&_objects$objectId$tit2!==void 0?_objects$objectId$tit2:objectId))}))})),/*#__PURE__*/React.createElement("div",{className:"compare3d-title"},LocaleUtils.tr("compare3d.clipplane")),/*#__PURE__*/React.createElement("table",{className:"compare3d-planeconfig"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,"x"),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{disabled:!_this.state.enabled,onChange:function onChange(x){return _this.setState({planeX:x})},value:_this.state.planeX}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,"y"),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{disabled:!_this.state.enabled,onChange:function onChange(y){return _this.setState({planeY:y})},value:_this.state.planeY}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,"\u03B1"),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{disabled:!_this.state.enabled,onChange:function onChange(a){return _this.setState({planeA:a})},suffix:"\xB0",value:_this.state.planeA}))))))});_defineProperty(_this,"toggleCompare",function(){_this.setState(function(state){var newState={enabled:!state.enabled};if(newState.enabled){// Position plane in current view
 newState.planeX=_this.props.sceneContext.scene.view.controls.target.x;newState.planeY=_this.props.sceneContext.scene.view.controls.target.y;newState.planeA=-_this.props.sceneContext.scene.view.controls.getAzimuthalAngle()/Math.PI*180+90}return newState})});_defineProperty(_this,"toggleObject",function(section,objectId){_this.setState(function(state){var _state$clippedObjects;return{clippedObjects:_objectSpread(_objectSpread({},state.clippedObjects),{},_defineProperty({},objectId,_objectSpread(_objectSpread({},state.clippedObjects[objectId]),{},_defineProperty({},section,!((_state$clippedObjects=state.clippedObjects[objectId])!==null&&_state$clippedObjects!==void 0&&_state$clippedObjects[section])))))}})});_defineProperty(_this,"toggleAllObjects",function(section,objectIds,value){_this.setState(function(state){return{clippedObjects:objectIds.reduce(function(res,objectId){return _objectSpread(_objectSpread({},res),{},_defineProperty({},objectId,_objectSpread(_objectSpread({},state.clippedObjects[objectId]),{},_defineProperty({},section,value))))},{})}})});return _this}_inherits(Compare3D,_React$Component);return _createClass(Compare3D,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;var loader=new GLTFLoader;loader.load(arrowModel,function(gltf){gltf.scene.traverse(function(object){if(object.isMesh){object.material.depthTest=false;// Ignores depth buffer
 object.material.depthWrite=false;// Prevents modifying depth buffer
 }});gltf.scene.renderOrder=9999999;// Ensures it is rendered last
 var leftArrow=gltf.scene.clone();leftArrow.position.y=-4;leftArrow.rotation.z=-0.5*Math.PI;var rightArrow=gltf.scene.clone();rightArrow.position.y=4;rightArrow.rotation.z=0.5*Math.PI;_this2.arrows=new Group;_this2.arrows.add(leftArrow);_this2.arrows.add(rightArrow)})}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.clearClippingPlane();if(this.arrows){this.arrows.traverse(function(obj){var _obj$dispose;return(_obj$dispose=obj.dispose)===null||_obj$dispose===void 0?void 0:_obj$dispose.call(obj)})}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.state.enabled&&this.props.active&&!prevProps.active){this.enableArrows()}else if(this.state.enabled&&!this.props.active&&prevProps.active){this.disableArrows()}if(this.state.enabled&&this.state!==prevState){if(this.props.active&&!prevState.enabled){this.enableArrows()}// Recompute clipping plane
-this.updateClippingPlane()}else if(!this.state.enabled&&prevState.enabled){this.clearClippingPlane()}if(this.props.sceneContext.sceneObjects!==prevProps.sceneContext.sceneObjects){var sceneObjects=this.props.sceneContext.sceneObjects;this.setState(function(state){return{clippedObjects:Object.fromEntries(Object.entries(state.clippedObjects).filter(function(_ref3){var _ref4=_slicedToArray(_ref3,2),objectId=_ref4[0],entry=_ref4[1];return objectId in sceneObjects}))}})}}},{key:"render",value:function render(){var _this3=this;return/*#__PURE__*/React.createElement(SideBar,{icon:"layers",id:"Compare3D",title:LocaleUtils.tr("appmenu.items.Compare3D"),width:"20em"},function(){return{body:_this3.renderBody()}})}}])}(React.Component);_defineProperty(Compare3D,"availableIn3D",true);_defineProperty(Compare3D,"propTypes",{active:PropTypes.bool,sceneContext:PropTypes.object});export default connect(function(state){return{active:state.task.id==="Compare3D"}},{})(Compare3D);
+this.updateClippingPlane()}else if(!this.state.enabled&&prevState.enabled){this.clearClippingPlane()}if(this.props.sceneContext.sceneObjects!==prevProps.sceneContext.sceneObjects){var sceneObjects=this.props.sceneContext.sceneObjects;this.setState(function(state){return{clippedObjects:Object.fromEntries(Object.entries(state.clippedObjects).filter(function(_ref3){var _ref4=_slicedToArray(_ref3,2),objectId=_ref4[0],entry=_ref4[1];return objectId in sceneObjects}))}})}}},{key:"render",value:function render(){var _this3=this;return[/*#__PURE__*/React.createElement(SideBar,{icon:"layers",id:"Compare3D",key:"SideBar",title:LocaleUtils.tr("appmenu.items.Compare3D"),width:"20em"},function(){return{body:_this3.renderBody()}}),this.state.enabled?/*#__PURE__*/React.createElement(MessageBar,null,/*#__PURE__*/React.createElement("div",{role:"body"},LocaleUtils.tr("compare3d.info_message"),"\xA0",/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Compare3D")}},LocaleUtils.tr("compare3d.modify")))):null]}}])}(React.Component);_defineProperty(Compare3D,"propTypes",{active:PropTypes.bool,sceneContext:PropTypes.object,setCurrentTask:PropTypes.func});export default connect(function(state){return{active:state.task.id==="Compare3D"}},{setCurrentTask:setCurrentTask})(Compare3D);

package/plugins/map3d/Draw3D.js

@@ -4,7 +4,9 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import PropTypes from"prop-types";import{Group}from"three";import{v4 as uuidv4}from"uuid";import Icon from"../../components/Icon";import TaskBar from"../../components/TaskBar";import CreateTool3D from"../../components/map3d/drawtool/CreateTool3D";import EditTool3D from"../../components/map3d/drawtool/EditTool3D";import ButtonBar from"../../components/widgets/ButtonBar";import LocaleUtils from"../../utils/LocaleUtils";var Draw3D=/*#__PURE__*/function(_React$Component){function Draw3D(){var _this;_classCallCheck(this,Draw3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Draw3D,[].concat(args));_defineProperty(_this,"state",{action:null,baseSize:10,color:[255,105,0,1],geomType:null,drawGroupId:"",selectedObject:null});_defineProperty(_this,"onShow",function(){_this.ensureDrawGroup();_this.setState({action:"Pick"})});_defineProperty(_this,"onHide",function(){// Remove empty draw groups
+ */import React from"react";import PropTypes from"prop-types";import{Group}from"three";import{v4 as uuidv4}from"uuid";import Icon from"../../components/Icon";import TaskBar from"../../components/TaskBar";import CreateTool3D from"../../components/map3d/drawtool/CreateTool3D";import EditTool3D from"../../components/map3d/drawtool/EditTool3D";import ButtonBar from"../../components/widgets/ButtonBar";import LocaleUtils from"../../utils/LocaleUtils";/**
+ * Draw objects in the 3D map.
+ */var Draw3D=/*#__PURE__*/function(_React$Component){function Draw3D(){var _this;_classCallCheck(this,Draw3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Draw3D,[].concat(args));_defineProperty(_this,"state",{action:null,baseSize:10,color:[255,105,0,1],geomType:null,drawGroupId:"",selectedObject:null});_defineProperty(_this,"onShow",function(){_this.ensureDrawGroup();_this.setState({action:"Pick"})});_defineProperty(_this,"onHide",function(){// Remove empty draw groups
 Object.entries(_this.props.sceneContext.sceneObjects).filter(function(_ref){var _ref2=_slicedToArray(_ref,2),objectId=_ref2[0],options=_ref2[1];return options.drawGroup===true}).forEach(function(_ref3){var _ref4=_slicedToArray(_ref3,2),objectId=_ref4[0],options=_ref4[1];var object=_this.props.sceneContext.getSceneObject(objectId);if(object.children.length===0){_this.props.sceneContext.removeSceneObject(objectId)}});_this.setState({selectedObject:null})});_defineProperty(_this,"ensureDrawGroup",function(){// Ensure a draw group is present
 var drawGroup=Object.entries(_this.props.sceneContext.sceneObjects).find(function(_ref5){var _ref6=_slicedToArray(_ref5,2),key=_ref6[0],options=_ref6[1];return options.drawGroup===true});if(drawGroup===undefined){_this.addDrawGroup(LocaleUtils.tr("draw3d.drawings"))}else{_this.props.sceneContext.updateSceneObject(drawGroup[0],{visibility:true});_this.setState({drawGroupId:drawGroup[0]})}});_defineProperty(_this,"createDrawGroup",function(){var message=LocaleUtils.tr("draw3d.newgroupprompt");// eslint-disable-next-line
-var name=prompt(message);if(name){_this.addDrawGroup(name)}});_defineProperty(_this,"addDrawGroup",function(name){var objectId=uuidv4();var options={drawGroup:true,layertree:true,title:name};_this.props.sceneContext.addSceneObject(objectId,new Group,options);_this.setState({drawGroupId:objectId})});_defineProperty(_this,"renderBody",function(){var activeButton=_this.state.action==="Create"?_this.state.geomType:_this.state.action;var drawButtons=[{key:"Cuboid",tooltip:LocaleUtils.tr("draw3d.cuboid"),icon:"cuboid",data:{action:"Create",geomType:"Cuboid"}},{key:"Wedge",tooltip:LocaleUtils.tr("draw3d.wedge"),icon:"wedge",data:{action:"Create",geomType:"Wedge"}},{key:"Cylinder",tooltip:LocaleUtils.tr("draw3d.cylinder"),icon:"cylinder",data:{action:"Create",geomType:"Cylinder"}},[{key:"Pyramid",tooltip:LocaleUtils.tr("draw3d.pyramid"),icon:"pyramid",data:{action:"Create",geomType:"Pyramid"}},{key:"Sphere",tooltip:LocaleUtils.tr("draw3d.sphere"),icon:"sphere",data:{action:"Create",geomType:"Sphere"}},{key:"Cone",tooltip:LocaleUtils.tr("draw3d.cone"),icon:"cone",data:{action:"Create",geomType:"Cone"}}]];var editButtons=[{key:"Pick",tooltip:LocaleUtils.tr("draw3d.pick"),icon:"nodetool",data:{action:"Pick",geomType:null}},{key:"Delete",tooltip:LocaleUtils.tr("draw3d.delete"),icon:"trash",data:{action:"Delete",geomType:null},disabled:!_this.state.selectedObject}];var drawGroups=Object.entries(_this.props.sceneContext.sceneObjects).filter(function(_ref7){var _ref8=_slicedToArray(_ref7,2),key=_ref8[0],entry=_ref8[1];return entry.drawGroup===true});return/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar"},/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.layer")),/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setActiveDrawGroup(ev.target.value)},value:_this.state.drawGroupId},drawGroups.map(function(_ref9){var _ref10=_slicedToArray(_ref9,2),objectId=_ref10[0],options=_ref10[1];return/*#__PURE__*/React.createElement("option",{key:objectId,value:objectId},options.title)})),/*#__PURE__*/React.createElement("button",{className:"button",onClick:_this.createDrawGroup},/*#__PURE__*/React.createElement(Icon,{icon:"plus"})))),/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.draw")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:drawButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}})),/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.edit")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:editButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}}))),_this.renderControl())});_defineProperty(_this,"renderControl",function(){if(_this.state.action==="Create"){return/*#__PURE__*/React.createElement(CreateTool3D,{baseSize:_this.state.baseSize,baseSizeChanged:function baseSizeChanged(baseSize){return _this.setState({baseSize:baseSize})},color:_this.state.color,colorChanged:function colorChanged(color){return _this.setState({color:color})},drawGroupId:_this.state.drawGroupId,geomType:_this.state.geomType,objectCreated:_this.objectCreated,sceneContext:_this.props.sceneContext})}else if(_this.state.action==="Pick"){return/*#__PURE__*/React.createElement(EditTool3D,{color:_this.state.color,colorChanged:function colorChanged(color){return _this.setState({color:color})},drawGroupId:_this.state.drawGroupId,objectPicked:_this.objectPicked,sceneContext:_this.props.sceneContext,selectedObject:_this.state.selectedObject})}return null});_defineProperty(_this,"setActiveDrawGroup",function(drawGroupId){_this.props.sceneContext.updateSceneObject(drawGroupId,{visibility:true});_this.setState({drawGroupId:drawGroupId,selectedObject:null})});_defineProperty(_this,"actionChanged",function(data){if(data.action==="Delete"){_this.deleteSelectedObject()}else{_this.setState({action:data.action,geomType:data.geomType,selectedObject:null})}});_defineProperty(_this,"deleteSelectedObject",function(){var group=_this.props.sceneContext.getSceneObject(_this.state.drawGroupId);var parent=null;group.traverse(function(c){if(c===_this.state.selectedObject){parent=c.parent}});if(parent){parent.remove(_this.state.selectedObject);while(parent.parent&&!parent.isMesh&&parent.children.length===0&&parent!==group){var grandparent=parent.parent;grandparent.remove(parent);parent=grandparent}if(group.children.length===0){_this.props.sceneContext.removeSceneObject(_this.state.drawGroupId,function(){_this.ensureDrawGroup()})}_this.setState({action:"Pick",geomType:null,selectedObject:null});_this.props.sceneContext.scene.notifyChange()}});_defineProperty(_this,"objectCreated",function(object){_this.setState({action:"Pick",geomType:null,selectedObject:object})});_defineProperty(_this,"objectPicked",function(object){_this.setState({selectedObject:object})});return _this}_inherits(Draw3D,_React$Component);return _createClass(Draw3D,[{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement(TaskBar,{onHide:this.onHide,onShow:this.onShow,task:"Draw3D"},function(){return{body:_this2.renderBody()}})}}])}(React.Component);_defineProperty(Draw3D,"availableIn3D",true);_defineProperty(Draw3D,"propTypes",{sceneContext:PropTypes.object});export{Draw3D as default};
+var name=prompt(message);if(name){_this.addDrawGroup(name)}});_defineProperty(_this,"addDrawGroup",function(name){var objectId=uuidv4();var options={drawGroup:true,layertree:true,title:name};_this.props.sceneContext.addSceneObject(objectId,new Group,options);_this.setState({drawGroupId:objectId})});_defineProperty(_this,"renderBody",function(){var activeButton=_this.state.action==="Create"?_this.state.geomType:_this.state.action;var drawButtons=[{key:"Cuboid",tooltip:LocaleUtils.tr("draw3d.cuboid"),icon:"cuboid",data:{action:"Create",geomType:"Cuboid"}},{key:"Wedge",tooltip:LocaleUtils.tr("draw3d.wedge"),icon:"wedge",data:{action:"Create",geomType:"Wedge"}},{key:"Cylinder",tooltip:LocaleUtils.tr("draw3d.cylinder"),icon:"cylinder",data:{action:"Create",geomType:"Cylinder"}},[{key:"Pyramid",tooltip:LocaleUtils.tr("draw3d.pyramid"),icon:"pyramid",data:{action:"Create",geomType:"Pyramid"}},{key:"Sphere",tooltip:LocaleUtils.tr("draw3d.sphere"),icon:"sphere",data:{action:"Create",geomType:"Sphere"}},{key:"Cone",tooltip:LocaleUtils.tr("draw3d.cone"),icon:"cone",data:{action:"Create",geomType:"Cone"}}]];var editButtons=[{key:"Pick",tooltip:LocaleUtils.tr("draw3d.pick"),icon:"nodetool",data:{action:"Pick",geomType:null}},{key:"Delete",tooltip:LocaleUtils.tr("draw3d.delete"),icon:"trash",data:{action:"Delete",geomType:null},disabled:!_this.state.selectedObject}];var drawGroups=Object.entries(_this.props.sceneContext.sceneObjects).filter(function(_ref7){var _ref8=_slicedToArray(_ref7,2),key=_ref8[0],entry=_ref8[1];return entry.drawGroup===true});return/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar"},/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.layer")),/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setActiveDrawGroup(ev.target.value)},value:_this.state.drawGroupId},drawGroups.map(function(_ref9){var _ref10=_slicedToArray(_ref9,2),objectId=_ref10[0],options=_ref10[1];return/*#__PURE__*/React.createElement("option",{key:objectId,value:objectId},options.title)})),/*#__PURE__*/React.createElement("button",{className:"button",onClick:_this.createDrawGroup},/*#__PURE__*/React.createElement(Icon,{icon:"plus"})))),/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.draw")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:drawButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}})),/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.edit")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:editButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}}))),_this.renderControl())});_defineProperty(_this,"renderControl",function(){if(_this.state.action==="Create"){return/*#__PURE__*/React.createElement(CreateTool3D,{baseSize:_this.state.baseSize,baseSizeChanged:function baseSizeChanged(baseSize){return _this.setState({baseSize:baseSize})},color:_this.state.color,colorChanged:function colorChanged(color){return _this.setState({color:color})},drawGroupId:_this.state.drawGroupId,geomType:_this.state.geomType,objectCreated:_this.objectCreated,sceneContext:_this.props.sceneContext})}else if(_this.state.action==="Pick"){return/*#__PURE__*/React.createElement(EditTool3D,{color:_this.state.color,colorChanged:function colorChanged(color){return _this.setState({color:color})},drawGroupId:_this.state.drawGroupId,objectPicked:_this.objectPicked,sceneContext:_this.props.sceneContext,selectedObject:_this.state.selectedObject})}return null});_defineProperty(_this,"setActiveDrawGroup",function(drawGroupId){_this.props.sceneContext.updateSceneObject(drawGroupId,{visibility:true});_this.setState({drawGroupId:drawGroupId,selectedObject:null})});_defineProperty(_this,"actionChanged",function(data){if(data.action==="Delete"){_this.deleteSelectedObject()}else{_this.setState({action:data.action,geomType:data.geomType,selectedObject:null})}});_defineProperty(_this,"deleteSelectedObject",function(){var group=_this.props.sceneContext.getSceneObject(_this.state.drawGroupId);var parent=null;group.traverse(function(c){if(c===_this.state.selectedObject){parent=c.parent}});if(parent){parent.remove(_this.state.selectedObject);while(parent.parent&&!parent.isMesh&&parent.children.length===0&&parent!==group){var grandparent=parent.parent;grandparent.remove(parent);parent=grandparent}if(group.children.length===0){_this.props.sceneContext.removeSceneObject(_this.state.drawGroupId,function(){_this.ensureDrawGroup()})}_this.setState({action:"Pick",geomType:null,selectedObject:null});_this.props.sceneContext.scene.notifyChange()}});_defineProperty(_this,"objectCreated",function(object){_this.setState({action:"Pick",geomType:null,selectedObject:object})});_defineProperty(_this,"objectPicked",function(object){_this.setState({selectedObject:object})});return _this}_inherits(Draw3D,_React$Component);return _createClass(Draw3D,[{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement(TaskBar,{onHide:this.onHide,onShow:this.onShow,task:"Draw3D"},function(){return{body:_this2.renderBody()}})}}])}(React.Component);_defineProperty(Draw3D,"propTypes",{sceneContext:PropTypes.object});export{Draw3D as default};

package/plugins/map3d/ExportObjects3D.js

@@ -4,20 +4,21 @@ 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 ColorLayer from"@giro3d/giro3d/core/layer/ColorLayer";import DrawTool,{conditions}from"@giro3d/giro3d/interactions/DrawTool";import VectorSource from"@giro3d/giro3d/sources/VectorSource";import FileSaver from"file-saver";import ol from"openlayers";import pointInPolygon from"point-in-polygon";import PropTypes from"prop-types";import{Box3,BufferGeometry,Float32BufferAttribute,Group,Matrix4,Mesh,MeshStandardMaterial,Quaternion,Scene,Vector3}from"three";import{GLTFExporter}from"three/addons/exporters/GLTFExporter.js";import{setCurrentTask}from"../../actions/task";import SideBar from"../../components/SideBar";import Spinner from"../../components/widgets/Spinner";import LocaleUtils from"../../utils/LocaleUtils";import VectorLayerUtils from"../../utils/VectorLayerUtils";var ExportObjects3D=/*#__PURE__*/function(_React$Component){function ExportObjects3D(props){var _this;_classCallCheck(this,ExportObjects3D);_this=_callSuper(this,ExportObjects3D,[props]);_defineProperty(_this,"state",{selectedFormat:"model/gltf+json",exporting:false,exportPolygon:null});_defineProperty(_this,"onShow",function(){_this.abortController=new AbortController;_this.measureTool=new DrawTool({instance:_this.props.sceneContext.scene});_this.drawLayer=new ColorLayer({source:new VectorSource({data:[],format:new ol.format.GeoJSON,style:_this.featureStyleFunction})});_this.props.sceneContext.map.addLayer(_this.drawLayer);_this.restart()});_defineProperty(_this,"onHide",function(){_this.abortController.abort();_this.abortController=null;_this.measureTool.dispose();_this.measureTool=null;_this.props.sceneContext.map.removeLayer(_this.drawLayer,{dispose:true});_this.drawLayer=null;_this.setState({exporting:false,exportPolygon:null})});_defineProperty(_this,"formatChanged",function(ev){_this.setState({selectedFormat:ev.target.value})});_defineProperty(_this,"renderBody",function(){var exportDisabled=_this.state.exporting||_this.state.exportPolygon===null;var formatMap={"model/gltf+json":"GLTF"};return/*#__PURE__*/React.createElement("div",{className:"mapexport-body"},/*#__PURE__*/React.createElement("form",{onSubmit:_this.exportArea},/*#__PURE__*/React.createElement("table",{className:"options-table"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.format")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{name:"FORMAT",onChange:_this.formatChanged,value:_this.state.selectedFormat},Object.entries(formatMap).map(function(_ref){var _ref2=_slicedToArray(_ref,2),format=_ref2[0],label=_ref2[1];return/*#__PURE__*/React.createElement("option",{key:format,value:format},label)})))))),/*#__PURE__*/React.createElement("div",{className:"button-bar"},/*#__PURE__*/React.createElement("button",{className:"button",disabled:exportDisabled,type:"submit"},_this.state.exporting?/*#__PURE__*/React.createElement("span",{className:"mapexport-wait"},/*#__PURE__*/React.createElement(Spinner,null)," ",LocaleUtils.tr("mapexport.wait")):LocaleUtils.tr("mapexport.submit")))))});_defineProperty(_this,"restart",function(){if(_this.abortController){_this.abortController.abort()}_this.abortController=new AbortController;var pick=function pick(e){return _this.props.sceneContext.scene.pickObjectsAt(e,{sortByDistance:true,where:[_this.props.sceneContext.getMap()]})};var options={signal:_this.abortController.signal,endCondition:conditions.doubleClick,pick:pick};_this.measureTool.createPolygon(options).then(_this.selectArea)["catch"](function(){})});_defineProperty(_this,"selectArea",function(polygon){if(polygon===null){_this.restart();return}_this.drawLayer.source.clear();var polyGeoJson=polygon.toGeoJSON();var feature=new ol.format.GeoJSON().readFeature(polyGeoJson,{dataProjection:"EPSG:4326",featureProjection:_this.props.sceneContext.mapCrs});_this.drawLayer.source.addFeature(feature);_this.props.sceneContext.scene.remove(polygon);_this.setState({exportPolygon:feature.getGeometry().getCoordinates()});// Setup for next selection
+ */import React from"react";import{connect}from"react-redux";import ColorLayer from"@giro3d/giro3d/core/layer/ColorLayer";import DrawTool,{conditions}from"@giro3d/giro3d/interactions/DrawTool";import VectorSource from"@giro3d/giro3d/sources/VectorSource";import FileSaver from"file-saver";import ol from"openlayers";import pointInPolygon from"point-in-polygon";import PropTypes from"prop-types";import{Box3,BufferGeometry,Float32BufferAttribute,Group,Matrix4,Mesh,MeshStandardMaterial,Quaternion,Scene,Vector3}from"three";import{GLTFExporter}from"three/addons/exporters/GLTFExporter.js";import{setCurrentTask}from"../../actions/task";import SideBar from"../../components/SideBar";import{TileMeshHelper}from"../../components/map3d/utils/MiscUtils3D";import Spinner from"../../components/widgets/Spinner";import LocaleUtils from"../../utils/LocaleUtils";import VectorLayerUtils from"../../utils/VectorLayerUtils";/**
+ * Export objects from the 3D map.
+ */var ExportObjects3D=/*#__PURE__*/function(_React$Component){function ExportObjects3D(props){var _this;_classCallCheck(this,ExportObjects3D);_this=_callSuper(this,ExportObjects3D,[props]);_defineProperty(_this,"state",{selectedFormat:"model/gltf+json",exporting:false,exportPolygon:null});_defineProperty(_this,"onShow",function(){_this.abortController=new AbortController;_this.measureTool=new DrawTool({instance:_this.props.sceneContext.scene});_this.drawLayer=new ColorLayer({source:new VectorSource({data:[],format:new ol.format.GeoJSON,style:_this.featureStyleFunction})});_this.props.sceneContext.map.addLayer(_this.drawLayer);_this.restart()});_defineProperty(_this,"onHide",function(){_this.abortController.abort();_this.abortController=null;_this.measureTool.dispose();_this.measureTool=null;_this.props.sceneContext.map.removeLayer(_this.drawLayer,{dispose:true});_this.drawLayer=null;_this.setState({exporting:false,exportPolygon:null})});_defineProperty(_this,"formatChanged",function(ev){_this.setState({selectedFormat:ev.target.value})});_defineProperty(_this,"renderBody",function(){var exportDisabled=_this.state.exporting||_this.state.exportPolygon===null;var formatMap={"model/gltf+json":"GLTF"};return/*#__PURE__*/React.createElement("div",{className:"mapexport-body"},/*#__PURE__*/React.createElement("form",{onSubmit:_this.exportArea},/*#__PURE__*/React.createElement("table",{className:"options-table"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.format")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{name:"FORMAT",onChange:_this.formatChanged,value:_this.state.selectedFormat},Object.entries(formatMap).map(function(_ref){var _ref2=_slicedToArray(_ref,2),format=_ref2[0],label=_ref2[1];return/*#__PURE__*/React.createElement("option",{key:format,value:format},label)})))))),/*#__PURE__*/React.createElement("div",{className:"button-bar"},/*#__PURE__*/React.createElement("button",{className:"button",disabled:exportDisabled,type:"submit"},_this.state.exporting?/*#__PURE__*/React.createElement("span",{className:"mapexport-wait"},/*#__PURE__*/React.createElement(Spinner,null)," ",LocaleUtils.tr("mapexport.wait")):LocaleUtils.tr("mapexport.submit")))))});_defineProperty(_this,"restart",function(){if(_this.abortController){_this.abortController.abort()}_this.abortController=new AbortController;var pick=function pick(e){return _this.props.sceneContext.scene.pickObjectsAt(e,{sortByDistance:true,where:[_this.props.sceneContext.getMap()]})};var options={signal:_this.abortController.signal,endCondition:conditions.doubleClick,pick:pick};_this.measureTool.createPolygon(options).then(_this.selectArea)["catch"](function(){})});_defineProperty(_this,"selectArea",function(polygon){if(polygon===null){_this.restart();return}_this.drawLayer.source.clear();var polyGeoJson=polygon.toGeoJSON();var feature=new ol.format.GeoJSON().readFeature(polyGeoJson,{dataProjection:"EPSG:4326",featureProjection:_this.props.sceneContext.mapCrs});_this.drawLayer.source.addFeature(feature);_this.props.sceneContext.scene.remove(polygon);_this.setState({exportPolygon:feature.getGeometry().getCoordinates()});// Setup for next selection
 _this.restart()});_defineProperty(_this,"featureStyleFunction",function(){return[new ol.style.Style({fill:new ol.style.Fill({color:[41,120,180,0.5]})}),new ol.style.Style({stroke:new ol.style.Stroke({color:[255,255,255],width:4})}),new ol.style.Style({stroke:new ol.style.Stroke({color:[41,120,180],width:1.5})})]});_defineProperty(_this,"exportArea",function(ev){ev.preventDefault();_this.setState({exporting:true});if(_this.state.selectedFormat==="model/gltf+json"){// Delay one loop to ensure exporting: true is set
 setTimeout(_this.exportToGltf,0)}});_defineProperty(_this,"exportToGltf",function(){var bbox=VectorLayerUtils.computeFeatureBBox({type:"Polygon",coordinates:_this.state.exportPolygon});// Create a bounding box in world space
 var selectionBox=new Box3().setFromPoints([new Vector3(bbox[0],bbox[1],0),new Vector3(bbox[2],bbox[3],8000)]);var exportGroup=new Group;exportGroup.rotation.set(-Math.PI/2,0,0);// GLTF is Y-UP
-Object.entries(_this.props.sceneContext.sceneObjects).forEach(function(_ref3){var _ref4=_slicedToArray(_ref3,2),objectId=_ref4[0],options=_ref4[1];if(!options.layertree||!options.visibility){return}var object=_this.props.sceneContext.getSceneObject(objectId);if(object.tiles){_this.addTileToExportGroup(object.tiles,exportGroup,selectionBox)}else{_this.addObjectToExportGroup(object,exportGroup,selectionBox)}});var exportScene=new Scene;exportScene.add(exportGroup);var exporter=new GLTFExporter;exporter.parse(exportScene,function(gltf){var blob=new Blob([JSON.stringify(gltf)],{type:"application/json"});FileSaver.saveAs(blob,"scene.gltf");_this.setState({exporting:false})})});_defineProperty(_this,"addTileToExportGroup",function(tiles,exportGroup,selectionBox){tiles.group.traverse(function(c){if(c.geometry){var bbox=c.geometry.boundingBox.clone().applyMatrix4(c.matrixWorld);if(!selectionBox.intersectsBox(bbox)){return}var batchidAttr=c.geometry.getAttribute("_batchid");if(!batchidAttr){// Not a tile
-return}var posAttr=c.geometry.getAttribute("position");var norAttr=c.geometry.getAttribute("normal");var colAttr=c.geometry.getAttribute("color");var colStride=c.material.transparent?4:3;var batches={};batchidAttr.array.forEach(function(batchId,idx){var _batches$batchId$posi,_batches$batchId$norm;if(!batches[batchId]){batches[batchId]={position:[],normal:[],color:colAttr?[]:null,colorStride:colStride,bbox:new Box3}}var pos=posAttr.array.slice(3*idx,3*idx+3);(_batches$batchId$posi=batches[batchId].position).push.apply(_batches$batchId$posi,_toConsumableArray(pos));var nor=norAttr.array.slice(3*idx,3*idx+3);(_batches$batchId$norm=batches[batchId].normal).push.apply(_batches$batchId$norm,_toConsumableArray(nor));if(colAttr){var _batches$batchId$colo;var col=colAttr.array.slice(colStride*idx,colStride*idx+colStride);(_batches$batchId$colo=batches[batchId].color).push.apply(_batches$batchId$colo,_toConsumableArray(col))}batches[batchId].bbox.expandByPoint(_construct(Vector3,_toConsumableArray(pos)).applyMatrix4(c.matrixWorld))});Object.entries(batches).forEach(function(_ref5){var _ref6=_slicedToArray(_ref5,2),batchId=_ref6[0],batch=_ref6[1];if(selectionBox.intersectsBox(batch.bbox)&&_this.bboxInExportPolygon(batch.bbox)){var _batchTableObject$use;// Get batch table object
-var batchTableObject=c;while(!batchTableObject.batchTable){batchTableObject=batchTableObject.parent}// Express coordinates wrt center of batch object bbox
-var prevPosition=new Vector3;c.matrixWorld.decompose(prevPosition,new Quaternion,new Vector3);var newPosition=new Vector3;batch.bbox.getCenter(newPosition);var offset=new Vector3().subVectors(newPosition,prevPosition);for(var i=0;i<batch.position.length/3;++i){batch.position[3*i+0]-=offset.x;batch.position[3*i+1]-=offset.y;batch.position[3*i+2]-=offset.z}// Construct mesh
-var material=new MeshStandardMaterial({color:16777215});var geometry=new BufferGeometry;geometry.setAttribute("position",new Float32BufferAttribute(batch.position,3));geometry.setAttribute("normal",new Float32BufferAttribute(batch.normal,3));if(batch.color){var _material$color;// geometry.setAttribute('color', new Float32BufferAttribute(batch.color, batch.colorStride));
-// material.vertexColors = batch.color !== null;
-// material.transparent = batch.colorStride === 4;
-(_material$color=material.color).set.apply(_material$color,_toConsumableArray(batch.color.slice(0,3)))}var mesh=new Mesh(geometry,material);mesh.applyMatrix4(c.matrixWorld.clone().multiply(new Matrix4().makeTranslation(offset)));// Include attribute from batch table
-var batchAttrs=batchTableObject.batchTable.getDataFromId(batchId);Object.assign(mesh.userData,batchAttrs);// Add label
-var labelEntry=(_batchTableObject$use=batchTableObject.userData.tileLabels)===null||_batchTableObject$use===void 0?void 0:_batchTableObject$use[batchId];if(labelEntry){mesh.userData.label=labelEntry.label;mesh.userData.labelOffset=labelEntry.labelOffset}exportGroup.add(mesh)}})}})});_defineProperty(_this,"addObjectToExportGroup",function(object,exportGroup,selectionBox){object.children.forEach(function(child){var objBox=new Box3().setFromObject(child);if(selectionBox.intersectsBox(objBox)&&_this.bboxInExportPolygon(objBox)){exportGroup.add(child.clone())}})});_defineProperty(_this,"bboxInExportPolygon",function(box3){var polygon=_this.state.exportPolygon[0];var _ref7=[box3.min.x,box3.min.y,box3.max.x,box3.max.y],xmin=_ref7[0],ymin=_ref7[1],xmax=_ref7[2],ymax=_ref7[3];function doLinesIntersect(p1,p2,p3,p4){// Helper function to check if two line segments (p1-p2 and p3-p4) intersect
+Object.entries(_this.props.sceneContext.sceneObjects).forEach(function(_ref3){var _ref4=_slicedToArray(_ref3,2),objectId=_ref4[0],options=_ref4[1];if(!options.layertree||!options.visibility){return}var object=_this.props.sceneContext.getSceneObject(objectId);if(object.tiles){_this.addTileToExportGroup(object.tiles,exportGroup,selectionBox)}else{_this.addObjectToExportGroup(object,exportGroup,selectionBox)}});var exportScene=new Scene;exportScene.add(exportGroup);var exporter=new GLTFExporter;exporter.parse(exportScene,function(gltf){var blob=new Blob([JSON.stringify(gltf)],{type:"application/json"});FileSaver.saveAs(blob,"scene.gltf");_this.setState({exporting:false})})});_defineProperty(_this,"addTileToExportGroup",function(tiles,exportGroup,selectionBox){tiles.group.traverse(function(c){if(c.geometry){var bbox=c.geometry.boundingBox.clone().applyMatrix4(c.matrixWorld);if(!selectionBox.intersectsBox(bbox)){return}var posAttr=c.geometry.getAttribute("position");var norAttr=c.geometry.getAttribute("normal");var colAttr=c.geometry.getAttribute("color");var colStride=c.material.transparent?4:3;var helper=new TileMeshHelper(c);helper.getFeatureIds().forEach(function(featureId){var _helper$getTileUserDa;var feature={position:[],normal:[],color:colAttr?[]:null,colorStride:colStride,bbox:new Box3};helper.forEachFeatureTriangle(featureId,function(i0,i1,i2){var _feature$position,_feature$position2,_feature$position3;var pos1=posAttr.array.slice(3*i0,3*i0+3);var pos2=posAttr.array.slice(3*i1,3*i1+3);var pos3=posAttr.array.slice(3*i2,3*i2+3);(_feature$position=feature.position).push.apply(_feature$position,_toConsumableArray(pos1));(_feature$position2=feature.position).push.apply(_feature$position2,_toConsumableArray(pos2));(_feature$position3=feature.position).push.apply(_feature$position3,_toConsumableArray(pos3));feature.normal.push(norAttr.getX(i0),norAttr.getY(i0),norAttr.getZ(i0));feature.normal.push(norAttr.getX(i1),norAttr.getY(i1),norAttr.getZ(i1));feature.normal.push(norAttr.getX(i2),norAttr.getY(i2),norAttr.getZ(i2));if(colAttr){var _feature$color,_feature$color2,_feature$color3;(_feature$color=feature.color).push.apply(_feature$color,_toConsumableArray(colAttr.array.slice(colStride*i0,colStride*i0+colStride)));(_feature$color2=feature.color).push.apply(_feature$color2,_toConsumableArray(colAttr.array.slice(colStride*i1,colStride*i1+colStride)));(_feature$color3=feature.color).push.apply(_feature$color3,_toConsumableArray(colAttr.array.slice(colStride*i2,colStride*i2+colStride)))}feature.bbox.expandByPoint(_construct(Vector3,_toConsumableArray(pos1)).applyMatrix4(c.matrixWorld));feature.bbox.expandByPoint(_construct(Vector3,_toConsumableArray(pos2)).applyMatrix4(c.matrixWorld));feature.bbox.expandByPoint(_construct(Vector3,_toConsumableArray(pos3)).applyMatrix4(c.matrixWorld))});// Omit feature if not within selection
+if(!selectionBox.intersectsBox(feature.bbox)||!_this.bboxInExportPolygon(feature.bbox)){return}// Express coordinates wrt center of feature bbox
+var prevPosition=new Vector3;c.matrixWorld.decompose(prevPosition,new Quaternion,new Vector3);var newPosition=new Vector3;feature.bbox.getCenter(newPosition);var offset=new Vector3().subVectors(newPosition,prevPosition);for(var i=0;i<feature.position.length/3;++i){feature.position[3*i+0]-=offset.x;feature.position[3*i+1]-=offset.y;feature.position[3*i+2]-=offset.z}// Construct mesh
+var material=new MeshStandardMaterial({color:16777215});var geometry=new BufferGeometry;geometry.setAttribute("position",new Float32BufferAttribute(feature.position,3));geometry.setAttribute("normal",new Float32BufferAttribute(feature.normal,3));if(feature.color){var _material$color;// geometry.setAttribute('color', new Float32BufferAttribute(feature.color, feature.colorStride));
+// material.vertexColors = feature.color !== null;
+// material.transparent = feature.colorStride === 4;
+(_material$color=material.color).set.apply(_material$color,_toConsumableArray(feature.color.slice(0,3)))}var mesh=new Mesh(geometry,material);mesh.applyMatrix4(c.matrixWorld.clone().multiply(new Matrix4().makeTranslation(offset)));// Include attribute from feature properties table
+Object.assign(mesh.userData,helper.getFeatureProperties(featureId));// Add label
+var labelEntry=(_helper$getTileUserDa=helper.getTileUserData().tileLabels)===null||_helper$getTileUserDa===void 0?void 0:_helper$getTileUserDa[featureId];if(labelEntry){mesh.userData.label=labelEntry.label;mesh.userData.labelOffset=labelEntry.labelOffset}exportGroup.add(mesh)})}})});_defineProperty(_this,"addObjectToExportGroup",function(object,exportGroup,selectionBox){object.children.forEach(function(child){var objBox=new Box3().setFromObject(child);if(selectionBox.intersectsBox(objBox)&&_this.bboxInExportPolygon(objBox)){exportGroup.add(child.clone())}})});_defineProperty(_this,"bboxInExportPolygon",function(box3){var polygon=_this.state.exportPolygon[0];var _ref5=[box3.min.x,box3.min.y,box3.max.x,box3.max.y],xmin=_ref5[0],ymin=_ref5[1],xmax=_ref5[2],ymax=_ref5[3];function doLinesIntersect(p1,p2,p3,p4){// Helper function to check if two line segments (p1-p2 and p3-p4) intersect
 function ccw(A,B,C){return(C[1]-A[1])*(B[0]-A[0])>(B[1]-A[1])*(C[0]-A[0])}return ccw(p1,p3,p4)!==ccw(p2,p3,p4)&&ccw(p1,p2,p3)!==ccw(p1,p2,p4)}// Check if any bbox vertex is inside the polygon
 if(pointInPolygon([xmin,ymin],polygon)||pointInPolygon([xmax,ymin],polygon)||pointInPolygon([xmax,ymax],polygon)||pointInPolygon([xmax,ymin],polygon)){return true}// Check if any edge of the polygon intersects the bbox
-for(var i=0;i<polygon.length-1;i++){var _polygon$i=_slicedToArray(polygon[i],2),x1=_polygon$i[0],y1=_polygon$i[1];var _polygon=_slicedToArray(polygon[i+1],2),x2=_polygon[0],y2=_polygon[1];if(doLinesIntersect([x1,y1],[x2,y2],[xmin,ymin],[xmin,ymax])||doLinesIntersect([x1,y1],[x2,y2],[xmin,ymax],[xmax,ymax])||doLinesIntersect([x1,y1],[x2,y2],[xmax,ymax],[xmax,ymin])||doLinesIntersect([x1,y1],[x2,y2],[xmax,ymin],[xmin,ymin])){return true}}return false});_this.measureTool=null;_this.drawLayer=null;return _this}_inherits(ExportObjects3D,_React$Component);return _createClass(ExportObjects3D,[{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement(SideBar,{extraClasses:"MapExport",icon:"export",id:"ExportObjects3D",onHide:this.onHide,onShow:this.onShow,title:LocaleUtils.tr("appmenu.items.ExportObjects3D"),width:"20em"},function(){return{body:_this2.renderBody()}})}}])}(React.Component);_defineProperty(ExportObjects3D,"availableIn3D",true);_defineProperty(ExportObjects3D,"propTypes",{sceneContext:PropTypes.object,setCurrentTask:PropTypes.func});export default connect(function(state){return{theme:state.theme.current}},{setCurrentTask:setCurrentTask})(ExportObjects3D);
+for(var i=0;i<polygon.length-1;i++){var _polygon$i=_slicedToArray(polygon[i],2),x1=_polygon$i[0],y1=_polygon$i[1];var _polygon=_slicedToArray(polygon[i+1],2),x2=_polygon[0],y2=_polygon[1];if(doLinesIntersect([x1,y1],[x2,y2],[xmin,ymin],[xmin,ymax])||doLinesIntersect([x1,y1],[x2,y2],[xmin,ymax],[xmax,ymax])||doLinesIntersect([x1,y1],[x2,y2],[xmax,ymax],[xmax,ymin])||doLinesIntersect([x1,y1],[x2,y2],[xmax,ymin],[xmin,ymin])){return true}}return false});_this.measureTool=null;_this.drawLayer=null;return _this}_inherits(ExportObjects3D,_React$Component);return _createClass(ExportObjects3D,[{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement(SideBar,{extraClasses:"MapExport",icon:"export",id:"ExportObjects3D",onHide:this.onHide,onShow:this.onShow,title:LocaleUtils.tr("appmenu.items.ExportObjects3D"),width:"20em"},function(){return{body:_this2.renderBody()}})}}])}(React.Component);_defineProperty(ExportObjects3D,"propTypes",{sceneContext:PropTypes.object,setCurrentTask:PropTypes.func});export default connect(function(state){return{theme:state.theme.current}},{setCurrentTask:setCurrentTask})(ExportObjects3D);

package/plugins/map3d/HideObjects3D.js

@@ -4,11 +4,15 @@ 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 isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{BufferGeometry,Float32BufferAttribute,Mesh,MeshStandardMaterial,Raycaster,Vector2}from"three";import Icon from"../../components/Icon";import SideBar from"../../components/SideBar";import LocaleUtils from"../../utils/LocaleUtils";import"./style/HideObjects3D.css";var HideObjects3D=/*#__PURE__*/function(_React$Component){function HideObjects3D(){var _this;_classCallCheck(this,HideObjects3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,HideObjects3D,[].concat(args));_defineProperty(_this,"state",{hiddenObjects:[]});_defineProperty(_this,"renderBody",function(){return/*#__PURE__*/React.createElement("div",{className:"hideobjects3d-body"},isEmpty(_this.state.hiddenObjects)?/*#__PURE__*/React.createElement("i",null,LocaleUtils.tr("hideobjects3d.clickonmap")):/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"hideobjects3d-list"},_this.state.hiddenObjects.map(function(entry){return/*#__PURE__*/React.createElement("div",{key:entry.object.uuid+entry.batchId,onMouseEnter:function onMouseEnter(){return _this.showHighlight(entry)},onMouseLeave:function onMouseLeave(){return _this.hideHighlight(entry)}},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("hideobjects3d.object")),/*#__PURE__*/React.createElement(Icon,{icon:"eye",onClick:function onClick(){return _this.restoreObject(entry)},title:LocaleUtils.tr("hideobjects3d.restore")}))})),/*#__PURE__*/React.createElement("div",{className:"hideobjects3d-restorebutton"},/*#__PURE__*/React.createElement("button",{className:"button",onClick:_this.restoreAll},LocaleUtils.tr("hideobjects3d.restoreall")))))});_defineProperty(_this,"clear",function(){_this.setState({pickAttrs:null});_this.props.sceneContext.removeSceneObject("__identify3d_highlight")});_defineProperty(_this,"pickOnRelease",function(ev){if(ev.button!==0){return}ev.view.addEventListener("pointerup",_this.pick,{once:true});ev.view.addEventListener("pointermove",function(){ev.view.removeEventListener("pointerup",_this.pick)},{once:true})});_defineProperty(_this,"pick",function(ev){if(_this.props.enabled!==true){return}_this.clear();// Setup raycaster
-var raycaster=new Raycaster;raycaster.firstHitOnly=true;var camera=_this.props.sceneContext.scene.view.camera;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;raycaster.setFromCamera(new Vector2(x,y),camera);var picks=[];Object.entries(_this.props.sceneContext.sceneObjects).forEach(function(_ref){var _object$tiles;var _ref2=_slicedToArray(_ref,2),objId=_ref2[0],options=_ref2[1];if(!options.layertree||!options.visibility){return}var object=_this.props.sceneContext.getSceneObject(objId);if((_object$tiles=object.tiles)!==null&&_object$tiles!==void 0&&_object$tiles.raycast){var intersections=[];object.tiles.raycast(raycaster,intersections);intersections.forEach(function(entry){entry.isTilePick=true});picks.push.apply(picks,intersections)}else{picks.push.apply(picks,_toConsumableArray(raycaster.intersectObjects([object],true)))}});picks.sort(function(a,b){return a.distance-b.distance});if(isEmpty(picks)){return}else if(picks[0].isTilePick){_this.hideTilePick(picks[0])}else{_this.hideObjectPick(picks[0])}});_defineProperty(_this,"hideTilePick",function(pick){var _rootObject$userData$;var batchidAttr=pick.object.geometry.getAttribute("_batchid");var posAttr=pick.object.geometry.getAttribute("position");var norAttr=pick.object.geometry.getAttribute("normal");var pickBatchId=batchidAttr.getX(pick.face.a);// Extract/shift batch geometry
-var pickPosition=[];var pickNormal=[];batchidAttr.array.forEach(function(batchId,idx){if(batchId===pickBatchId){pickPosition.push.apply(pickPosition,_toConsumableArray(posAttr.array.slice(3*idx,3*idx+3)));pickNormal.push.apply(pickNormal,_toConsumableArray(norAttr.array.slice(3*idx,3*idx+3)));posAttr.array[3*idx+2]-=100000}});posAttr.needsUpdate=true;_this.props.sceneContext.scene.notifyChange();// Hide label
-var rootObject=pick.object;while(!rootObject.batchTable){rootObject=rootObject.parent}var pickLabel=(_rootObject$userData$=rootObject.userData.tileLabels)===null||_rootObject$userData$===void 0?void 0:_rootObject$userData$[pickBatchId];if(pickLabel){pickLabel.labelObject.visible=false}// Create highlight geometry
-_this.storeHiddenObject(pick,pickPosition,pickNormal,null,pickBatchId)});_defineProperty(_this,"hideObjectPick",function(pick){pick.object.visible=false;_this.props.sceneContext.scene.notifyChange();var posAttr=pick.object.geometry.getAttribute("position");var norAttr=pick.object.geometry.getAttribute("normal");var index=pick.object.geometry.getIndex();// Create highlight geometry
-_this.storeHiddenObject(pick,posAttr.array,norAttr.array,index)});_defineProperty(_this,"storeHiddenObject",function(pick,position,normal){var index=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;var batchId=arguments.length>4&&arguments[4]!==undefined?arguments[4]:null;var material=new MeshStandardMaterial({color:16711680});var geometry=new BufferGeometry;geometry.setAttribute("position",new Float32BufferAttribute(position,3));geometry.setAttribute("normal",new Float32BufferAttribute(normal,3));geometry.setIndex(index);var mesh=new Mesh(geometry,material);mesh.receiveShadow=true;mesh.applyMatrix4(pick.object.matrixWorld);mesh.updateMatrixWorld();_this.setState(function(state){return{hiddenObjects:[].concat(_toConsumableArray(state.hiddenObjects),[{object:pick.object,isTileObject:pick.isTilePick,batchId:batchId,highlight:mesh}])}})});_defineProperty(_this,"showHighlight",function(entry){_this.props.sceneContext.addSceneObject(entry.highlight.uuid,entry.highlight)});_defineProperty(_this,"hideHighlight",function(entry){_this.props.sceneContext.removeSceneObject(entry.highlight.uuid)});_defineProperty(_this,"restoreObject",function(entry){if(entry.isTileObject){var _rootObject$userData$2;var batchidAttr=entry.object.geometry.getAttribute("_batchid");var posAttr=entry.object.geometry.getAttribute("position");// Unshift batch geometry
-batchidAttr.array.forEach(function(batchId,idx){if(batchId===entry.batchId){posAttr.array[3*idx+2]+=100000}});posAttr.needsUpdate=true;// Restore label
-var rootObject=entry.object;while(!rootObject.batchTable){rootObject=rootObject.parent}var pickLabel=(_rootObject$userData$2=rootObject.userData.tileLabels)===null||_rootObject$userData$2===void 0?void 0:_rootObject$userData$2[entry.batchId];if(pickLabel){pickLabel.labelObject.visible=true}}else{entry.object.visible=true}_this.hideHighlight(entry);_this.props.sceneContext.scene.notifyChange();_this.setState(function(state){return{hiddenObjects:state.hiddenObjects.filter(function(x){return x!==entry})}})});_defineProperty(_this,"restoreAll",function(){_toConsumableArray(_this.state.hiddenObjects).forEach(_this.restoreObject)});return _this}_inherits(HideObjects3D,_React$Component);return _createClass(HideObjects3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.sceneContext.scene.viewport.addEventListener("pointerdown",this.pickOnRelease)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _prevProps$sceneConte;if(this.props.sceneContext.scene!==((_prevProps$sceneConte=prevProps.sceneContext)===null||_prevProps$sceneConte===void 0?void 0:_prevProps$sceneConte.scene)){this.setState({hiddenObjects:[]})}}},{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement(SideBar,{icon:"eye",id:"HideObjects3D",title:LocaleUtils.tr("appmenu.items.HideObjects3D"),width:"20em"},function(){return{body:_this2.renderBody()}})}}])}(React.Component);_defineProperty(HideObjects3D,"availableIn3D",true);_defineProperty(HideObjects3D,"propTypes",{enabled:PropTypes.bool,sceneContext:PropTypes.object});export default connect(function(state){return{enabled:state.task.id==="HideObjects3D"}},{})(HideObjects3D);
+ */import React from"react";import{connect}from"react-redux";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{BufferAttribute,BufferGeometry,Float32BufferAttribute,Mesh,MeshStandardMaterial,Raycaster,Vector2}from"three";import Icon from"../../components/Icon";import SideBar from"../../components/SideBar";import{TileMeshHelper}from"../../components/map3d/utils/MiscUtils3D";import LocaleUtils from"../../utils/LocaleUtils";import"./style/HideObjects3D.css";/**
+ * Hide objects in the 3D map.
+ */var HideObjects3D=/*#__PURE__*/function(_React$Component){function HideObjects3D(){var _this;_classCallCheck(this,HideObjects3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,HideObjects3D,[].concat(args));_defineProperty(_this,"state",{hiddenObjects:[]});_defineProperty(_this,"renderBody",function(){return/*#__PURE__*/React.createElement("div",{className:"hideobjects3d-body"},isEmpty(_this.state.hiddenObjects)?/*#__PURE__*/React.createElement("i",null,LocaleUtils.tr("hideobjects3d.clickonmap")):/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"hideobjects3d-list"},_this.state.hiddenObjects.map(function(entry){var _ref;return/*#__PURE__*/React.createElement("div",{key:entry.object.uuid+entry.featureId,onMouseEnter:function onMouseEnter(){return _this.showHighlight(entry)},onMouseLeave:function onMouseLeave(){return _this.hideHighlight(entry)}},/*#__PURE__*/React.createElement("span",null,(_ref=LocaleUtils.tr("hideobjects3d.object")+" "+entry.featureId)!==null&&_ref!==void 0?_ref:""),/*#__PURE__*/React.createElement(Icon,{icon:"eye",onClick:function onClick(){return _this.restoreObject(entry)},title:LocaleUtils.tr("hideobjects3d.restore")}))})),/*#__PURE__*/React.createElement("div",{className:"hideobjects3d-restorebutton"},/*#__PURE__*/React.createElement("button",{className:"button",onClick:_this.restoreAll},LocaleUtils.tr("hideobjects3d.restoreall")))))});_defineProperty(_this,"clear",function(){_this.setState({pickAttrs:null});_this.props.sceneContext.removeSceneObject("__identify3d_highlight")});_defineProperty(_this,"pickOnRelease",function(ev){if(ev.button!==0){return}ev.view.addEventListener("pointerup",_this.pick,{once:true});ev.view.addEventListener("pointermove",function(){ev.view.removeEventListener("pointerup",_this.pick)},{once:true})});_defineProperty(_this,"pick",function(ev){if(_this.props.enabled!==true){return}_this.clear();// Setup raycaster
+var raycaster=new Raycaster;raycaster.firstHitOnly=true;var camera=_this.props.sceneContext.scene.view.camera;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;raycaster.setFromCamera(new Vector2(x,y),camera);var picks=[];Object.entries(_this.props.sceneContext.sceneObjects).forEach(function(_ref2){var _object$tiles;var _ref3=_slicedToArray(_ref2,2),objId=_ref3[0],options=_ref3[1];if(!options.layertree||!options.visibility){return}var object=_this.props.sceneContext.getSceneObject(objId);if((_object$tiles=object.tiles)!==null&&_object$tiles!==void 0&&_object$tiles.raycast){var intersections=[];object.tiles.raycast(raycaster,intersections);intersections.forEach(function(entry){entry.isTilePick=true});picks.push.apply(picks,intersections)}else{picks.push.apply(picks,_toConsumableArray(raycaster.intersectObjects([object],true)))}});picks.sort(function(a,b){return a.distance-b.distance});if(isEmpty(picks)){return}else if(picks[0].isTilePick){_this.hideTilePick(picks[0])}else{_this.hideObjectPick(picks[0])}});_defineProperty(_this,"hideTilePick",function(pick){var _helper$getTileUserDa;var posAttr=pick.object.geometry.getAttribute("position");var norAttr=pick.object.geometry.getAttribute("normal");// Ensure geometry is indexed
+if(!pick.object.geometry.index){var indices=new Uint32Array(posAttr.count);for(var i=0;i<posAttr.count;i++){indices[i]=i}pick.object.geometry.setIndex(new BufferAttribute(indices,1))}if(!pick.object.userData.originalIndex){pick.object.userData.originalIndex=pick.object.geometry.index.array.slice();pick.object.userData.hiddenIds=[]}var helper=new TileMeshHelper(pick.object);var pickFeatureId=helper.getFeatureId(pick.face);// Extract feature geometry
+var pickPosition=[];var pickNormal=[];helper.forEachFeatureTriangle(pickFeatureId,function(i0,i1,i2){pickPosition.push(posAttr.getX(i0),posAttr.getY(i0),posAttr.getZ(i0));pickPosition.push(posAttr.getX(i1),posAttr.getY(i1),posAttr.getZ(i1));pickPosition.push(posAttr.getX(i2),posAttr.getY(i2),posAttr.getZ(i2));pickNormal.push(norAttr.getX(i0),norAttr.getY(i0),norAttr.getZ(i0));pickNormal.push(norAttr.getX(i1),norAttr.getY(i1),norAttr.getZ(i1));pickNormal.push(norAttr.getX(i2),norAttr.getY(i2),norAttr.getZ(i2))});// Filter indices
+var filteredIndices=pick.object.geometry.index.array.filter(function(idx){return helper.featureIdAttr.getX(idx)!==pickFeatureId});pick.object.geometry.setIndex(new BufferAttribute(new Uint32Array(filteredIndices),1));// Hide label
+var pickLabel=(_helper$getTileUserDa=helper.getTileUserData().tileLabels)===null||_helper$getTileUserDa===void 0?void 0:_helper$getTileUserDa[pickFeatureId];if(pickLabel){pickLabel.labelObject.visible=false}_this.props.sceneContext.scene.notifyChange();// Store hidden object metadata
+_this.storeHiddenObject(pick,pickPosition,pickNormal,null,pickFeatureId)});_defineProperty(_this,"hideObjectPick",function(pick){pick.object.visible=false;_this.props.sceneContext.scene.notifyChange();var posAttr=pick.object.geometry.getAttribute("position");var norAttr=pick.object.geometry.getAttribute("normal");var index=pick.object.geometry.getIndex();// Create highlight geometry
+_this.storeHiddenObject(pick,posAttr.array,norAttr.array,index)});_defineProperty(_this,"storeHiddenObject",function(pick,position,normal){var index=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;var featureId=arguments.length>4&&arguments[4]!==undefined?arguments[4]:null;var material=new MeshStandardMaterial({color:16711680});var geometry=new BufferGeometry;geometry.setAttribute("position",new Float32BufferAttribute(position,3));geometry.setAttribute("normal",new Float32BufferAttribute(normal,3));geometry.setIndex(index);var mesh=new Mesh(geometry,material);mesh.receiveShadow=true;mesh.applyMatrix4(pick.object.matrixWorld);mesh.updateMatrixWorld();_this.setState(function(state){return{hiddenObjects:[].concat(_toConsumableArray(state.hiddenObjects),[{object:pick.object,isTileObject:pick.isTilePick,featureId:featureId,highlight:mesh}])}})});_defineProperty(_this,"showHighlight",function(entry){_this.props.sceneContext.addSceneObject(entry.highlight.uuid,entry.highlight)});_defineProperty(_this,"hideHighlight",function(entry){_this.props.sceneContext.removeSceneObject(entry.highlight.uuid)});_defineProperty(_this,"restoreObject",function(entry){if(entry.isTileObject){var _helper$getTileUserDa2;var helper=new TileMeshHelper(entry.object);// Re-add filtered indices
+var filteredIndices=entry.object.userData.originalIndex.filter(function(i){return helper.featureIdAttr.getX(i)===entry.featureId});var combined=new Uint32Array(entry.object.geometry.index.array.length+filteredIndices.length);combined.set(entry.object.geometry.index.array,0);combined.set(new Uint32Array(filteredIndices),entry.object.geometry.index.array.length);entry.object.geometry.setIndex(new BufferAttribute(combined,1));// Restore label
+var pickLabel=(_helper$getTileUserDa2=helper.getTileUserData().tileLabels)===null||_helper$getTileUserDa2===void 0?void 0:_helper$getTileUserDa2[entry.featureId];if(pickLabel){pickLabel.labelObject.visible=true}}else{entry.object.visible=true}_this.hideHighlight(entry);_this.props.sceneContext.scene.notifyChange();_this.setState(function(state){return{hiddenObjects:state.hiddenObjects.filter(function(x){return x!==entry})}})});_defineProperty(_this,"restoreAll",function(){_toConsumableArray(_this.state.hiddenObjects).forEach(_this.restoreObject)});return _this}_inherits(HideObjects3D,_React$Component);return _createClass(HideObjects3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.sceneContext.scene.viewport.addEventListener("pointerdown",this.pickOnRelease)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _prevProps$sceneConte;if(this.props.sceneContext.scene!==((_prevProps$sceneConte=prevProps.sceneContext)===null||_prevProps$sceneConte===void 0?void 0:_prevProps$sceneConte.scene)){this.setState({hiddenObjects:[]})}}},{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement(SideBar,{icon:"eye",id:"HideObjects3D",title:LocaleUtils.tr("appmenu.items.HideObjects3D"),width:"20em"},function(){return{body:_this2.renderBody()}})}}])}(React.Component);_defineProperty(HideObjects3D,"propTypes",{enabled:PropTypes.bool,sceneContext:PropTypes.object});export default connect(function(state){return{enabled:state.task.id==="HideObjects3D"}},{})(HideObjects3D);