qwc2 2025.7.3 → 2025.7.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/AttributeForm.js +1 -1
- package/components/QtDesignerForm.js +1 -1
- package/components/map3d/Identify3D.js +1 -1
- package/components/map3d/Map3D.js +8 -7
- package/components/map3d/Map3DLight.js +5 -5
- package/components/map3d/MapControls3D.js +3 -2
- package/components/map3d/drawtool/EditTool3D.js +4 -6
- package/components/map3d/utils/FirstPersonControls3D.js +1 -1
- package/components/widgets/NumberInput.js +1 -1
- package/package.json +1 -1
- package/plugins/FeatureForm.js +1 -1
- package/components/map3d/drawtool/TransformControls.js +0 -259
|
@@ -11,7 +11,7 @@ if(["new","empty"].includes(fieldStatus)){newRelationValues[table].features.spli
|
|
|
11
11
|
var changed=_this.props.editContext.changed;var fk=_this.state.relationTables[table].fk;if(_this.props.editContext.action!=="Draw"&&feature.properties[fk]!==_this.props.editContext.feature.id){newRelationValues[table].features[idx].properties[fk]=_this.props.editContext.feature.id;newRelationValues[table].features[idx].__status__="changed";changed=true}var newFeature=_objectSpread(_objectSpread({},_this.props.editContext.feature),{},{relationValues:newRelationValues});_this.props.setEditContext(_this.props.editContext.id,{feature:newFeature,changed:changed})}_this.setState({childEdit:null})});_defineProperty(_this,"onDiscard",function(action){if(action==="Discard"){_this.props.setCurrentTaskBlocked(false);if(!_this.props.onDiscard||!_this.props.onDiscard()){if(_this.props.editContext.action==="Pick"){// Re-query the original feature
|
|
12
12
|
_this.setState({busy:true});_this.props.iface.getFeatureById(_this.props.editConfig.editDataset,_this.props.editContext.feature.id,_this.props.map.projection,function(feature){_this.setState({busy:false});if(!isEmpty(_this.state.relationTables)){// Re-load relation values
|
|
13
13
|
_this.loadRelationValues(feature,function(newFeature){_this.props.setEditContext(_this.props.editContext.id,{feature:newFeature,changed:false})});// Re-validate feature field constraints
|
|
14
|
-
_this.validateFieldConstraints(feature)}else{_this.props.setEditContext(_this.props.editContext.id,{feature:feature,changed:false})}})}else{var featureSkel={type:"Feature",properties:{}};var mapPrefix=(_this.props.editConfig.editDataset.match(/^[^.]+\./)||[""])[0];getFeatureTemplate(_this.props.editConfig,featureSkel,_this.props.iface,mapPrefix,_this.props.map.projection,function(feature){_this.props.setEditContext(_this.props.editContext.id,{feature:feature,changed:false})})}}}});_defineProperty(_this,"setupChangedObserver",function(form){_this.form=form;if(form){form.observer=new MutationObserver(function(){_this.setState({formValid:form.checkValidity()})});form.observer.observe(form,{subtree:true,childList:true,attributes:true})}});_defineProperty(_this,"formChanged",function(ev){var _ev$target;var form=ev.currentTarget;if((_ev$target=ev.target)!==null&&_ev$target!==void 0&&_ev$target.setCustomValidity){ev.target.setCustomValidity("")}if(form){_this.setState({formValid:form.checkValidity()});_this.props.setEditContext(_this.props.editContext.id,{changed:true})}});_defineProperty(_this,"validateFieldConstraints",function(feature){var validCallback=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;var invalidCallback=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;var constraintExpressions=_this.props.editConfig.fields.reduce(function(res,cur){var _cur$constraints;if((_cur$constraints=cur.constraints)!==null&&_cur$constraints!==void 0&&_cur$constraints.expression){var _cur$constraints2;return _objectSpread(_objectSpread({},res),{},_defineProperty({},cur.id,(_cur$constraints2=cur.constraints)===null||_cur$constraints2===void 0?void 0:_cur$constraints2.expression))}return res},{});parseExpressionsAsync(constraintExpressions,feature,_this.props.editConfig.editDataset,_this.props.iface,_this.editMapPrefix(),_this.props.map.projection,false).then(function(result){var valid=true;Object.entries(result).forEach(function(_ref5){var _ref6=_slicedToArray(_ref5,2),key=_ref6[0],value=_ref6[1];var element=_this.form.elements.namedItem(key);if(value===false){var _this$props$editConfi,_this$props$editConfi2;valid=false;element.setCustomValidity((_this$props$editConfi=(_this$props$editConfi2=_this.props.editConfig.fields.find(function(field){return field.id===key}))===null||_this$props$editConfi2===void 0||(_this$props$editConfi2=_this$props$editConfi2.constraints)===null||_this$props$editConfi2===void 0?void 0:_this$props$editConfi2.placeholder)!==null&&_this$props$editConfi!==void 0?_this$props$editConfi:LocaleUtils.tr("editing.contraintviolation"))}else{element.setCustomValidity("")}});if(!valid){_this.setState({formValid:false});if(invalidCallback){invalidCallback()}}else{if(validCallback){validCallback()}}})});_defineProperty(_this,"onSubmit",function(ev){ev.preventDefault();_this.validateFieldConstraints(_this.props.editContext.feature,_this.doSubmit,function(){/* eslint-disable-next-line */alert(LocaleUtils.tr("editing.contraintviolation"))})});_defineProperty(_this,"doSubmit",function(){_this.setState({busy:true});var feature=_this.props.editContext.feature;// Ensure properties is not null
|
|
14
|
+
_this.validateFieldConstraints(feature)}else{_this.props.setEditContext(_this.props.editContext.id,{feature:feature,changed:false})}})}else{var featureSkel={type:"Feature",properties:{}};var mapPrefix=(_this.props.editConfig.editDataset.match(/^[^.]+\./)||[""])[0];getFeatureTemplate(_this.props.editConfig,featureSkel,_this.props.iface,mapPrefix,_this.props.map.projection,function(feature){_this.props.setEditContext(_this.props.editContext.id,{feature:feature,changed:false})})}}}});_defineProperty(_this,"setupChangedObserver",function(form){_this.form=form;if(form){form.observer=new MutationObserver(function(){_this.setState({formValid:form.checkValidity()})});form.observer.observe(form,{subtree:true,childList:true,attributes:true})}});_defineProperty(_this,"formChanged",function(ev){var _ev$target;var form=ev.currentTarget;if((_ev$target=ev.target)!==null&&_ev$target!==void 0&&_ev$target.setCustomValidity){ev.target.setCustomValidity("")}if(form){_this.setState({formValid:form.checkValidity()});_this.props.setEditContext(_this.props.editContext.id,{changed:true})}});_defineProperty(_this,"validateFieldConstraints",function(feature){var validCallback=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;var invalidCallback=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;var constraintExpressions=_this.props.editConfig.fields.reduce(function(res,cur){var _cur$constraints;if((_cur$constraints=cur.constraints)!==null&&_cur$constraints!==void 0&&_cur$constraints.expression){var _cur$constraints2;return _objectSpread(_objectSpread({},res),{},_defineProperty({},cur.id,(_cur$constraints2=cur.constraints)===null||_cur$constraints2===void 0?void 0:_cur$constraints2.expression))}return res},{});parseExpressionsAsync(constraintExpressions,feature,_this.props.editConfig.editDataset,_this.props.iface,_this.editMapPrefix(),_this.props.map.projection,false).then(function(result){var valid=true;Object.entries(result).forEach(function(_ref5){var _ref6=_slicedToArray(_ref5,2),key=_ref6[0],value=_ref6[1];var element=_this.form.elements.namedItem(key);if(element){if(value===false){var _this$props$editConfi,_this$props$editConfi2;valid=false;element.setCustomValidity((_this$props$editConfi=(_this$props$editConfi2=_this.props.editConfig.fields.find(function(field){return field.id===key}))===null||_this$props$editConfi2===void 0||(_this$props$editConfi2=_this$props$editConfi2.constraints)===null||_this$props$editConfi2===void 0?void 0:_this$props$editConfi2.placeholder)!==null&&_this$props$editConfi!==void 0?_this$props$editConfi:LocaleUtils.tr("editing.contraintviolation"))}else{element.setCustomValidity("")}}});if(!valid){_this.setState({formValid:false});if(invalidCallback){invalidCallback()}}else{if(validCallback){validCallback()}}})});_defineProperty(_this,"onSubmit",function(ev){ev.preventDefault();_this.validateFieldConstraints(_this.props.editContext.feature,_this.doSubmit,function(){/* eslint-disable-next-line */alert(LocaleUtils.tr("editing.contraintviolation"))})});_defineProperty(_this,"doSubmit",function(){_this.setState({busy:true});var feature=_this.props.editContext.feature;// Ensure properties is not null
|
|
15
15
|
feature=_objectSpread(_objectSpread({},feature),{},{type:"Feature",properties:_objectSpread({},feature.properties||{}),crs:{type:"name",properties:{name:CoordinatesUtils.toOgcUrnCrs(_this.props.map.projection)}}});// Omit geometry if it is read-only
|
|
16
16
|
if(_this.props.editContext.geomReadOnly){delete feature.geometry}var curConfig=_this.props.editConfig;var mapPrefix=_this.editMapPrefix();var textNullValue=ConfigUtils.getConfigProp("editTextNullValue");// Keep relation values separate
|
|
17
17
|
var relationValues=clone(feature.relationValues||{});delete feature.relationValues;var relationUploads={};var featureUploads={};// Collect all values from form fields
|
|
@@ -16,7 +16,7 @@ preprocessor: function(formData, feature, callback)
|
|
|
16
16
|
*/export function registerFormPreprocessor(editLayerId,preprocessor){FormPreprocessors[editLayerId]=preprocessor}export function removeFormPreprocessor(editLayerId){delete FormPreprocessors[editLayerId]}var hFitWidgets=["QLabel","QCheckBox","QRadioButton","Line","QDateTimeEdit","QDateEdit","QTimeEdit"];var vFitWidgets=["QLabel","QCheckBox","QRadioButton","Line","QDateTimeEdit","QDateEdit","QTimeEdit","QPushButton","QComboBox","QLineEdit","QSpinBox","QDoubleSpinBox","QSlider"];var QtDesignerForm=/*#__PURE__*/function(_React$Component){function QtDesignerForm(props){var _this;_classCallCheck(this,QtDesignerForm);_this=_callSuper(this,QtDesignerForm,[props]);_defineProperty(_this,"state",{reevaluate:0});_defineProperty(_this,"renderLayout",function(layout,feature,dataset,updateField){var nametransform=arguments.length>4&&arguments[4]!==undefined?arguments[4]:function(name){return name};var visible=arguments.length>5&&arguments[5]!==undefined?arguments[5]:true;var containerClass="";var itemStyle=function itemStyle(){return{}};var sortKey=function sortKey(item,idx){return idx};var containerStyle={};if(!layout){return null}else if(layout["class"]==="QGridLayout"||layout["class"]==="QFormLayout"){containerClass="qt-designer-layout-grid";containerStyle={gridTemplateColumns:_this.computeLayoutColumns(layout.item).join(" "),gridTemplateRows:_this.computeLayoutRows(layout.item).join(" ")};itemStyle=function itemStyle(item){return{gridArea:1+parseInt(item.row,10)+"/"+(1+parseInt(item.column,10))+"/ span "+parseInt(item.rowspan||1,10)+"/ span "+parseInt(item.colspan||1,10)}};sortKey=function sortKey(item){return item.row}}else if(layout["class"]==="QVBoxLayout"){containerClass="qt-designer-layout-grid";itemStyle=function itemStyle(item,idx){return{gridArea:1+idx+"/1/ span 1/ span 1"}};sortKey=function sortKey(item,idx){return idx}}else if(layout["class"]==="QHBoxLayout"){containerClass="qt-designer-layout-grid";containerStyle={gridTemplateColumns:_this.computeLayoutColumns(layout.item,true).join(" ")};itemStyle=function itemStyle(item,idx){return{gridArea:"1/"+(1+idx)+"/ span 1/ span 1"}};sortKey=function sortKey(item,idx){return idx}}else{return null}if(!visible){containerStyle.display="none"}if(layout.item.find(function(item){return item.spacer&&(item.spacer.property||{}).orientation==="Qt::Vertical"})){containerStyle.height="100%"}return/*#__PURE__*/React.createElement("div",{className:containerClass,key:layout.name,style:containerStyle},layout.item.sort(function(a,b){return sortKey(a)-sortKey(b)}).map(function(item,idx){var child=null;if(item.widget){child=_this.renderWidget(item.widget,feature,dataset,updateField,nametransform)}else if(item.layout){child=_this.renderLayout(item.layout,feature,dataset,updateField,nametransform)}else if(item.spacer){child=/*#__PURE__*/React.createElement("div",null)}else{return null}return/*#__PURE__*/React.createElement("div",{key:"i"+idx,style:itemStyle(item,idx)},child)}))});_defineProperty(_this,"computeLayoutColumns",function(items){var useIndex=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var columns=[];var hasAuto=false;var hasSpacer=items.find(function(item){var _item$spacer;return((_item$spacer=item.spacer)===null||_item$spacer===void 0||(_item$spacer=_item$spacer.property)===null||_item$spacer===void 0?void 0:_item$spacer.orientation)==="Qt::Horizontal"});items.forEach(function(item,index){var _item$spacer2,_item$widget;var col=useIndex?index:parseInt(item.column,10)||0;var colSpan=useIndex?1:parseInt(item.colspan,10)||1;if(((_item$spacer2=item.spacer)===null||_item$spacer2===void 0||(_item$spacer2=_item$spacer2.property)===null||_item$spacer2===void 0?void 0:_item$spacer2.orientation)==="Qt::Horizontal"){columns[col]="auto";hasAuto=true}else if(!hasSpacer&&!hFitWidgets.includes((_item$widget=item.widget)===null||_item$widget===void 0?void 0:_item$widget["class"])&&colSpan===1){columns[col]="auto";hasAuto=true}else{var _columns$col;columns[col]=(_columns$col=columns[col])!==null&&_columns$col!==void 0?_columns$col:null;// Placeholder replaced by fit-content below
|
|
17
17
|
}});var fit="fit-content("+Math.round(1/columns.length*100)+"%)";for(var col=0;col<columns.length;++col){columns[col]=hasAuto?columns[col]||fit:"auto"}return columns});_defineProperty(_this,"computeLayoutRows",function(items){var useIndex=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var rows=[];var hasSpacer=items.find(function(item){var _item$spacer3;return((_item$spacer3=item.spacer)===null||_item$spacer3===void 0||(_item$spacer3=_item$spacer3.property)===null||_item$spacer3===void 0?void 0:_item$spacer3.orientation)==="Qt::Vertical"});items.forEach(function(item,index){var _item$spacer4,_item$widget2,_item$widget2$startsW,_item$widget$layout,_item$widget3,_item$widget5;var row=useIndex?index:parseInt(item.row,10)||0;var rowSpan=useIndex?1:parseInt(item.rowspan,10)||1;if(((_item$spacer4=item.spacer)===null||_item$spacer4===void 0||(_item$spacer4=_item$spacer4.property)===null||_item$spacer4===void 0?void 0:_item$spacer4.orientation)==="Qt::Vertical"||(_item$widget2=item.widget)!==null&&_item$widget2!==void 0&&(_item$widget2=_item$widget2.name)!==null&&_item$widget2!==void 0&&(_item$widget2$startsW=_item$widget2.startsWith)!==null&&_item$widget2$startsW!==void 0&&_item$widget2$startsW.call(_item$widget2,"nrel_")){rows[row]="auto"}else if((_item$widget$layout=(_item$widget3=item.widget)===null||_item$widget3===void 0?void 0:_item$widget3.layout)!==null&&_item$widget$layout!==void 0?_item$widget$layout:item.layout){var _item$widget4,_item$layout;rows[row]=(_item$widget4=item.widget)!==null&&_item$widget4!==void 0&&(_item$widget4=_item$widget4.layout)!==null&&_item$widget4!==void 0&&_item$widget4.verticalFill||(_item$layout=item.layout)!==null&&_item$layout!==void 0&&_item$layout.verticalFill?"auto":null;// Placeholder replaced by fit-content below
|
|
18
18
|
}else if(!hasSpacer&&!vFitWidgets.includes((_item$widget5=item.widget)===null||_item$widget5===void 0?void 0:_item$widget5["class"])&&rowSpan===1){rows[row]="auto"}else{var _rows$row;rows[row]=(_rows$row=rows[row])!==null&&_rows$row!==void 0?_rows$row:null;// Placeholder replaced by fit-content below
|
|
19
|
-
}});var fit="fit-content("+Math.round(1/rows.length*100)+"%)";for(var row=0;row<rows.length;++row){rows[row]=rows[row]||fit}return rows});_defineProperty(_this,"renderWidget",function(widget,feature,dataset,updateField){var _widget$name,_this$props$fields$wi;var nametransform=arguments.length>4&&arguments[4]!==undefined?arguments[4]:function(name){return name};var disabled=arguments.length>5&&arguments[5]!==undefined?arguments[5]:false;var value=(_widget$name=(feature.properties||{})[widget.name])!==null&&_widget$name!==void 0?_widget$name:"";var prop=widget.property||{};if(String(prop.visible)==="false"){return null}var attr=widget.attribute||{};var fieldConstraints=((_this$props$fields$wi=_this.props.fields[widget.name])===null||_this$props$fields$wi===void 0?void 0:_this$props$fields$wi.constraints)||{};var inputConstraints={};inputConstraints.readOnly=_this.props.readOnly||String(prop.readOnly)==="true"||String(prop.enabled)==="false"||fieldConstraints.readOnly===true||disabled;inputConstraints.required=!inputConstraints.readOnly&&(String(prop.required)==="true"||String(fieldConstraints.required)==="true");inputConstraints.placeholder=prop.placeholderText||fieldConstraints.placeholder||"";var fontProps=prop.font||{};var fontStyle={fontWeight:String(fontProps.bold)==="true"?"bold":"normal",fontStyle:String(fontProps.italic)==="true"?"italic":"normal",textDecoration:[String(fontProps.underline)==="true"?"underline":"",String(fontProps.strikeout)==="true"?"line-through":""].join(" "),fontSize:Math.round((fontProps.pointsize||9)/9*100)+"%",textAlign:"left"};if(prop.alignment){if(prop.alignment.includes("Qt::AlignRight")){fontStyle.textAlign="right"}else if(prop.alignment.includes("Qt::AlignCenter")){fontStyle.textAlign="center"}}var elname=undefined;if(widget.name.startsWith("ext__")){updateField=null;value=_this.state.formData.externalFields[widget.name.slice(5)];inputConstraints.readOnly=true}else{elname=nametransform(widget.name)}if(widget["class"]==="QLabel"){if(widget.name.startsWith("img__")){var _widget$name$split$;value=(_widget$name$split$=(feature.properties||[])[widget.name.split("__")[1]])!==null&&_widget$name$split$!==void 0?_widget$name$split$:widget.property.text;return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-image"},/*#__PURE__*/React.createElement("a",{href:value,rel:"noreferrer",target:"_blank"},/*#__PURE__*/React.createElement("img",{src:value})))}else{var text=widget.name.startsWith("ext__")?value:widget.property.text;return/*#__PURE__*/React.createElement("div",{style:fontStyle},text)}}else if(widget["class"]==="Line"){var _widget$property;var linetype=((_widget$property=widget.property)===null||_widget$property===void 0?void 0:_widget$property.orientation)==="Qt::Vertical"?"vline":"hline";return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-"+linetype})}else if(widget["class"]==="QFrame"){if(widget.property.visibilityExpression){var exprResult=parseExpression(widget.property.visibilityExpression,feature,dataset,_this.props.iface,_this.props.mapPrefix,_this.props.mapCrs,function(){return _this.setState({reevaluate:+new Date})});if(exprResult===false||exprResult===0){return null}}return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-container"},/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-frame"},widget.name.startsWith("nrel__")?_this.renderNRelation(widget):_this.renderLayout(widget.layout,feature,dataset,updateField,nametransform)))}else if(widget["class"]==="QGroupBox"){if(widget.property.visibilityExpression){var _exprResult=parseExpression(widget.property.visibilityExpression,feature,dataset,_this.props.iface,_this.props.mapPrefix,_this.props.mapCrs,function(){return _this.setState({reevaluate:+new Date})});if(_exprResult===false||_exprResult===0){return null}}return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-container"},/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-frame-title",style:fontStyle},prop.title),/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-frame"},widget.name.startsWith("nrel__")?_this.renderNRelation(widget):_this.renderLayout(widget.layout,feature,dataset,updateField,nametransform)))}else if(widget["class"]==="QTabWidget"){
|
|
19
|
+
}});var fit="fit-content("+Math.round(1/rows.length*100)+"%)";for(var row=0;row<rows.length;++row){rows[row]=rows[row]||fit}return rows});_defineProperty(_this,"renderWidget",function(widget,feature,dataset,updateField){var _widget$name,_this$props$fields$wi;var nametransform=arguments.length>4&&arguments[4]!==undefined?arguments[4]:function(name){return name};var disabled=arguments.length>5&&arguments[5]!==undefined?arguments[5]:false;var value=(_widget$name=(feature.properties||{})[widget.name])!==null&&_widget$name!==void 0?_widget$name:"";var prop=widget.property||{};if(String(prop.visible)==="false"){return null}var attr=widget.attribute||{};var fieldConstraints=((_this$props$fields$wi=_this.props.fields[widget.name])===null||_this$props$fields$wi===void 0?void 0:_this$props$fields$wi.constraints)||{};var inputConstraints={};inputConstraints.readOnly=_this.props.readOnly||String(prop.readOnly)==="true"||String(prop.enabled)==="false"||fieldConstraints.readOnly===true||disabled;inputConstraints.required=!inputConstraints.readOnly&&(String(prop.required)==="true"||String(fieldConstraints.required)==="true");inputConstraints.placeholder=prop.placeholderText||fieldConstraints.placeholder||"";var fontProps=prop.font||{};var fontStyle={fontWeight:String(fontProps.bold)==="true"?"bold":"normal",fontStyle:String(fontProps.italic)==="true"?"italic":"normal",textDecoration:[String(fontProps.underline)==="true"?"underline":"",String(fontProps.strikeout)==="true"?"line-through":""].join(" "),fontSize:Math.round((fontProps.pointsize||9)/9*100)+"%",textAlign:"left"};if(prop.alignment){if(prop.alignment.includes("Qt::AlignRight")){fontStyle.textAlign="right"}else if(prop.alignment.includes("Qt::AlignCenter")){fontStyle.textAlign="center"}}var elname=undefined;if(widget.name.startsWith("ext__")){updateField=null;value=_this.state.formData.externalFields[widget.name.slice(5)];inputConstraints.readOnly=true}else{elname=nametransform(widget.name)}if(widget["class"]==="QLabel"){if(widget.name.startsWith("img__")){var _widget$name$split$;value=(_widget$name$split$=(feature.properties||[])[widget.name.split("__")[1]])!==null&&_widget$name$split$!==void 0?_widget$name$split$:widget.property.text;return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-image"},/*#__PURE__*/React.createElement("a",{href:value,rel:"noreferrer",target:"_blank"},/*#__PURE__*/React.createElement("img",{src:value})))}else{var text=widget.name.startsWith("ext__")?value:widget.property.text;return/*#__PURE__*/React.createElement("div",{style:fontStyle},text)}}else if(widget["class"]==="Line"){var _widget$property;var linetype=((_widget$property=widget.property)===null||_widget$property===void 0?void 0:_widget$property.orientation)==="Qt::Vertical"?"vline":"hline";return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-"+linetype})}else if(widget["class"]==="QFrame"){if(widget.property.visibilityExpression){var exprResult=parseExpression(widget.property.visibilityExpression,feature,dataset,_this.props.iface,_this.props.mapPrefix,_this.props.mapCrs,function(){return _this.setState({reevaluate:+new Date})});if(exprResult===false||exprResult===0){return null}}return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-container"},/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-frame"},widget.name.startsWith("nrel__")?_this.renderNRelation(widget):_this.renderLayout(widget.layout,feature,dataset,updateField,nametransform)))}else if(widget["class"]==="QGroupBox"){if(widget.property.visibilityExpression){var _exprResult=parseExpression(widget.property.visibilityExpression,feature,dataset,_this.props.iface,_this.props.mapPrefix,_this.props.mapCrs,function(){return _this.setState({reevaluate:+new Date})});if(_exprResult===false||_exprResult===0){return null}}return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-container"},/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-frame-title",style:fontStyle},prop.title),/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-frame"},widget.name.startsWith("nrel__")?_this.renderNRelation(widget):_this.renderLayout(widget.layout,feature,dataset,updateField,nametransform)))}else if(widget["class"]==="QTabWidget"){var tabwidgets=(widget.widget||[]).filter(function(child){var exprResult=parseExpression(child.property.visibilityExpression,feature,dataset,_this.props.iface,_this.props.mapPrefix,_this.props.mapCrs,function(){return _this.setState({reevaluate:+new Date})});return exprResult!==false&&exprResult!==0});if(isEmpty(tabwidgets)){return null}var activetab=_this.state.activetabs[widget.name]||tabwidgets[0].name;var tabs=tabwidgets.map(function(tab){return{key:tab.name,label:tab.attribute.title}});return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-container"},/*#__PURE__*/React.createElement(ButtonBar,{active:activetab,buttons:tabs,className:"qt-designer-form-tabbar",onClick:function onClick(key){return _this.setState(function(state){return{activetabs:_objectSpread(_objectSpread({},state.activetabs),{},_defineProperty({},widget.name,key))}})}}),/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-frame"},tabwidgets.filter(function(child){return child.layout}).map(function(child){return _this.renderLayout(child.layout,feature,dataset,updateField,nametransform,child.name===activetab)})))}else if(widget["class"]==="QTextEdit"||widget["class"]==="QTextBrowser"||widget["class"]==="QPlainTextEdit"){var _feature$properties$w,_feature$properties;if(((_feature$properties$w=(_feature$properties=feature.properties)===null||_feature$properties===void 0?void 0:_feature$properties[widget.name])!==null&&_feature$properties$w!==void 0?_feature$properties$w:null)===null){var _ConfigUtils$getConfi;value=(_ConfigUtils$getConfi=ConfigUtils.getConfigProp("editTextNullValue"))!==null&&_ConfigUtils$getConfi!==void 0?_ConfigUtils$getConfi:""}if(_this.props.report){return/*#__PURE__*/React.createElement("div",{className:"qt-designer-form-textarea"},value)}else{var addLinkAnchors=ConfigUtils.getConfigProp("editingAddLinkAnchors")!==false;return/*#__PURE__*/React.createElement(TextInput,_extends({addLinkAnchors:addLinkAnchors,multiline:true,name:elname,onChange:function onChange(val){return updateField(widget.name,val)}},inputConstraints,{style:fontStyle,value:String(value)}))}}else if(widget["class"]==="QLineEdit"){if(widget.name.endsWith("__upload")){var _feature$properties2;var fieldId=widget.name.replace(/__upload/,"");var uploadValue=((_feature$properties2=feature.properties)===null||_feature$properties2===void 0?void 0:_feature$properties2[fieldId])||"";var uploadElName=elname.replace(/__upload/,"");var constraints={accept:prop.text||"",required:inputConstraints.required};return/*#__PURE__*/React.createElement(EditUploadField,{constraints:constraints,dataset:dataset,disabled:inputConstraints.readOnly,fieldId:fieldId,iface:_this.props.iface,name:uploadElName,report:_this.props.report,updateField:updateField,value:uploadValue})}else{var _feature$properties$w2,_feature$properties3;if(fieldConstraints.prec!==undefined&&typeof value==="number"){value=value.toFixed(fieldConstraints.prec)}else if(((_feature$properties$w2=(_feature$properties3=feature.properties)===null||_feature$properties3===void 0?void 0:_feature$properties3[widget.name])!==null&&_feature$properties$w2!==void 0?_feature$properties$w2:null)===null){var _ConfigUtils$getConfi2;value=(_ConfigUtils$getConfi2=ConfigUtils.getConfigProp("editTextNullValue"))!==null&&_ConfigUtils$getConfi2!==void 0?_ConfigUtils$getConfi2:""}if(_this.props.report){return/*#__PURE__*/React.createElement("div",{style:fontStyle},value||inputConstraints.placeholder)}else{var _addLinkAnchors=ConfigUtils.getConfigProp("editingAddLinkAnchors")!==false;var editTextNullValue=ConfigUtils.getConfigProp("editTextNullValue");return/*#__PURE__*/React.createElement(TextInput,_extends({addLinkAnchors:_addLinkAnchors,clearValue:editTextNullValue,name:elname,onChange:function onChange(val){return updateField(widget.name,val)}},inputConstraints,{style:fontStyle,value:String(value)}))}}}else if(widget["class"]==="QCheckBox"||widget["class"]==="QRadioButton"){var _this$props$feature$p;var type=widget["class"]==="QCheckBox"?"checkbox":"radio";var inGroup=attr.buttonGroup;var checked=inGroup?((_this$props$feature$p=_this.props.feature.properties)===null||_this$props$feature$p===void 0?void 0:_this$props$feature$p[_this.groupOrName(widget)])===widget.name:value;return/*#__PURE__*/React.createElement("label",{style:fontStyle},/*#__PURE__*/React.createElement("input",_extends({checked:checked,disabled:inputConstraints.readOnly,name:nametransform(_this.groupOrName(widget)),onChange:function onChange(ev){return updateField(_this.groupOrName(widget),inGroup?widget.name:ev.target.checked)}},inputConstraints,{type:type,value:widget.name})),widget.property.text)}else if(widget["class"]==="QComboBox"){var parts=widget.name.split("__");if((parts.length===5||parts.length===6)&&parts[0]==="kvrel"){var _fieldId2,_this$props$editConfi,_this$props$editConfi2;// kvrel__attrname__datatable__keyfield__valuefield
|
|
20
20
|
// kvrel__reltablename__attrname__datatable__keyfield__valuefield
|
|
21
21
|
var count=parts.length;var isRelAttr=count===6;var attrname=parts[isRelAttr?2:1];var _fieldId=parts.slice(1,count-3).join("__");value=(_fieldId2=(feature.properties||[])[_fieldId])!==null&&_fieldId2!==void 0?_fieldId2:"";var keyvalrel=_this.props.mapPrefix+parts[count-3]+":"+parts[count-2]+":"+parts[count-1];var filterExpr=null;var field=isRelAttr?(_this$props$editConfi=_this.props.editConfig[parts[1]])===null||_this$props$editConfi===void 0||(_this$props$editConfi=_this$props$editConfi.fields)===null||_this$props$editConfi===void 0||(_this$props$editConfi2=_this$props$editConfi.find)===null||_this$props$editConfi2===void 0?void 0:_this$props$editConfi2.call(_this$props$editConfi,function(f){return f.id===attrname}):_this.props.fields[_fieldId];var comboFieldConstraints=(field===null||field===void 0?void 0:field.constraints)||{};if(field!==null&&field!==void 0&&field.filterExpression){filterExpr=parseExpression(field.filterExpression,feature,dataset,_this.props.iface,_this.props.mapPrefix,_this.props.mapCrs,function(){return _this.setState({reevaluate:+new Date})},true)}return/*#__PURE__*/React.createElement(EditComboField,{editIface:_this.props.iface,fieldId:_fieldId,filterExpr:filterExpr,key:_fieldId,keyvalrel:keyvalrel,multiSelect:widget.allowMulti==="true",name:nametransform(_fieldId),placeholder:inputConstraints.placeholder,readOnly:inputConstraints.readOnly||comboFieldConstraints.readOnly,required:inputConstraints.required||comboFieldConstraints.required,style:fontStyle,updateField:updateField,value:value})}else{var values=MiscUtils.ensureArray(widget.item||[]).map(function(item){var _item$property$value;return{label:item.property.text,value:(_item$property$value=item.property.value)!==null&&_item$property$value!==void 0?_item$property$value:item.property.text}});return/*#__PURE__*/React.createElement(EditComboField,{editIface:_this.props.iface,fieldId:widget.name,key:widget.name,name:elname,placeholder:inputConstraints.placeholder,readOnly:inputConstraints.readOnly||inputConstraints.readOnly,required:inputConstraints.required||inputConstraints.required,style:fontStyle,updateField:updateField,value:value,values:values})}}else if(widget["class"]==="QSpinBox"||widget["class"]==="QDoubleSpinBox"||widget["class"]==="QSlider"){var _prop$minimum,_prop$maximum,_ref,_prop$singleStep,_prop$decimals;var floatConstraint=function floatConstraint(x){var f=parseFloat(x);return isNaN(f)?undefined:f};var min=floatConstraint((_prop$minimum=prop.minimum)!==null&&_prop$minimum!==void 0?_prop$minimum:fieldConstraints.min);var max=floatConstraint((_prop$maximum=prop.maximum)!==null&&_prop$maximum!==void 0?_prop$maximum:fieldConstraints.max);var step=(_ref=(_prop$singleStep=prop.singleStep)!==null&&_prop$singleStep!==void 0?_prop$singleStep:fieldConstraints.step)!==null&&_ref!==void 0?_ref:1;var precision=(_prop$decimals=prop.decimals)!==null&&_prop$decimals!==void 0?_prop$decimals:0;if(widget["class"]==="QSlider"){return/*#__PURE__*/React.createElement("input",_extends({max:max,min:min,name:elname,onChange:function onChange(ev){return updateField(widget.name,ev.target.value)}},inputConstraints,{size:5,step:step,style:fontStyle,type:"range",value:value}))}else{var _feature$properties$w3,_feature$properties4;value=(_feature$properties$w3=(_feature$properties4=feature.properties)===null||_feature$properties4===void 0?void 0:_feature$properties4[widget.name])!==null&&_feature$properties$w3!==void 0?_feature$properties$w3:null;return/*#__PURE__*/React.createElement(NumberInput,_extends({decimals:precision,max:max,min:min,name:elname,onChange:function onChange(val){return updateField(widget.name,val)}},inputConstraints,{step:step,style:fontStyle,value:value}))}}else if(widget["class"]==="QDateEdit"){var _min=prop.minimumDate?_this.dateConstraint(prop.minimumDate):"1600-01-01";var _max=prop.maximumDate?_this.dateConstraint(prop.maximumDate):"9999-12-31";return/*#__PURE__*/React.createElement("input",_extends({max:_max,min:_min,name:elname,onChange:function onChange(ev){return updateField(widget.name,ev.target.value)}},inputConstraints,{style:fontStyle,type:"date",value:value}))}else if(widget["class"]==="QTimeEdit"){return/*#__PURE__*/React.createElement("input",_extends({name:elname,onChange:function onChange(ev){return updateField(widget.name,ev.target.value)}},inputConstraints,{style:fontStyle,type:"time",value:value}))}else if(widget["class"]==="QDateTimeEdit"){var _min2=prop.minimumDate?_this.dateConstraint(prop.minimumDate):"1600-01-01";var _max2=prop.maximumDate?_this.dateConstraint(prop.maximumDate):"9999-12-31";return/*#__PURE__*/React.createElement(DateTimeInput,{maxDate:_max2,minDate:_min2,name:elname,onChange:function onChange(val){return updateField(widget.name,val)},readOnly:inputConstraints.readOnly,required:inputConstraints.required,style:fontStyle,value:value})}else if(widget["class"]==="QWidget"){if(widget.name.startsWith("nrel__")){return _this.renderNRelation(widget)}else if(widget.name.startsWith("ext__")){return value}else{return _this.renderLayout(widget.layout,feature,dataset,updateField,nametransform)}}else if(widget["class"]==="QPushButton"){if(widget.name.startsWith("btn__")&&widget.onClick){return/*#__PURE__*/React.createElement("button",{className:"button",disabled:inputConstraints.readOnly,onClick:function onClick(){return widget.onClick(_this.props.setFormBusy)},type:"button"},widget.property.text)}else if(widget.name.startsWith("featurelink__")){var _parts=widget.name.split("__");// featurelink__layer__attrname
|
|
22
22
|
// featurelink__layer__reltable__attrname
|
|
@@ -5,7 +5,7 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
|
|
|
5
5
|
* This source code is licensed under the BSD-style license found in the
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
7
7
|
*/import React from"react";import{connect}from"react-redux";import axios from"axios";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{BufferGeometry,Float32BufferAttribute,Mesh,MeshStandardMaterial,Raycaster,Vector2}from"three";import LocaleUtils from"../../utils/LocaleUtils";import ResizeableWindow from"../ResizeableWindow";import"../style/IdentifyViewer.css";var Identify3D=/*#__PURE__*/function(_React$Component){function Identify3D(){var _this;_classCallCheck(this,Identify3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,Identify3D,[].concat(args));_defineProperty(_this,"state",{pickAttrs:null});_defineProperty(_this,"clear",function(){_this.setState({pickAttrs:null});_this.props.sceneContext.removeSceneObject("__identify3d_highlight")});_defineProperty(_this,"identifyOnRelease",function(ev){if(ev.button!==0){return}ev.view.addEventListener("pointerup",_this.identify,{once:true});ev.view.addEventListener("pointermove",function(){ev.view.removeEventListener("pointerup",_this.identify)},{once:true})});_defineProperty(_this,"identify",function(ev){if(_this.props.identifyEnabled!==true){return}_this.clear();// Setup raycaster
|
|
8
|
-
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.identifyTilePick(picks[0])}else{_this.identifyObjectPick(picks[0])}});_defineProperty(_this,"identifyTilePick",function(pick){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 batch geometry
|
|
8
|
+
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.identifyTilePick(picks[0])}else{_this.identifyObjectPick(picks[0])}});_defineProperty(_this,"identifyTilePick",function(pick){var batchidAttr=pick.object.geometry.getAttribute("_batchid");if(!batchidAttr){return}var posAttr=pick.object.geometry.getAttribute("position");var norAttr=pick.object.geometry.getAttribute("normal");var pickBatchId=batchidAttr.getX(pick.face.a);// Extract batch geometry
|
|
9
9
|
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)))}});// Add selection object
|
|
10
10
|
_this.addHiglightGeometry(pick.object.matrixWorld,pickPosition,pickNormal);// Extract attributes from batch table and set pick attrs
|
|
11
11
|
var batchTableObject=pick.object;while(!batchTableObject.batchTable){batchTableObject=batchTableObject.parent}var batchTable=batchTableObject.batchTable;var batchAttrs=batchTable.getDataFromId(pickBatchId);if(_this.props.sceneContext.options.tileInfoServiceUrl){var url=_this.props.sceneContext.options.tileInfoServiceUrl.replace("{tileset}",batchTableObject.userData.tilesetName).replace("{objectid}",batchAttrs[batchTableObject.userData.batchIdAttr]);axios.get(url).then(function(response){_this.setState({pickAttrs:_objectSpread(_objectSpread({},batchAttrs),response.data)})})["catch"](function(){_this.setState({pickAttrs:batchAttrs})})}else{_this.setState({pickAttrs:batchAttrs})}});_defineProperty(_this,"identifyObjectPick",function(pick){var posAttr=pick.object.geometry.getAttribute("position");var norAttr=pick.object.geometry.getAttribute("normal");var index=pick.object.geometry.getIndex();// Add selection object
|
|
@@ -4,12 +4,13 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
|
|
|
4
4
|
*
|
|
5
5
|
* This source code is licensed under the BSD-style license found in the
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
7
|
-
*/import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import Instance from"@giro3d/giro3d/core/Instance.js";import Coordinates from"@giro3d/giro3d/core/geographic/Coordinates";import Extent from"@giro3d/giro3d/core/geographic/Extent.js";import ElevationLayer from"@giro3d/giro3d/core/layer/ElevationLayer.js";import FeatureCollection from"@giro3d/giro3d/entities/FeatureCollection.js";import Map from"@giro3d/giro3d/entities/Map.js";import Tiles3D from"@giro3d/giro3d/entities/Tiles3D.js";import Inspector from"@giro3d/giro3d/gui/Inspector.js";import GeoTIFFSource from"@giro3d/giro3d/sources/GeoTIFFSource.js";import axios from"axios";import{fromUrl}from"geotiff";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{Vector2,CubeTextureLoader,Group,Raycaster,Mesh,Box3,Vector3,Matrix4}from"three";import{GLTFExporter}from"three/addons/exporters/GLTFExporter.js";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import{v4 as uuidv4}from"uuid";import{LayerRole}from"../../actions/layers";import{setCurrentTask}from"../../actions/task";import{BackgroundSwitcher}from"../../plugins/BackgroundSwitcher";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LayerUtils from"../../utils/LayerUtils";import MiscUtils from"../../utils/MiscUtils";import{registerPermalinkDataStoreHook,unregisterPermalinkDataStoreHook,UrlParams}from"../../utils/PermaLinkUtils";import{MapContainerPortalContext}from"../PluginsContainer";import BottomBar3D from"./BottomBar3D";import Compare3D from"./Compare3D";import Draw3D from"./Draw3D";import EditDataset3D from"./EditDataset3D";import ExportObjects3D from"./ExportObjects3D";import HideObjects3D from"./HideObjects3D";import Identify3D from"./Identify3D";import LayerTree3D from"./LayerTree3D";import Map3DLight from"./Map3DLight";import MapControls3D from"./MapControls3D";import MapExport3D from"./MapExport3D";import Measure3D from"./Measure3D";import OverviewMap3D from"./OverviewMap3D";import TopBar3D from"./TopBar3D";import View3DSwitcher from"./View3DSwitcher";import LayerRegistry from"./layers/index";import{importGltf,updateObjectLabel}from"./utils/MiscUtils3D";import Tiles3DStyle from"./utils/Tiles3DStyle";import"./style/Map3D.css"
|
|
7
|
+
*/import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import Instance from"@giro3d/giro3d/core/Instance.js";import Coordinates from"@giro3d/giro3d/core/geographic/Coordinates";import Extent from"@giro3d/giro3d/core/geographic/Extent.js";import ElevationLayer from"@giro3d/giro3d/core/layer/ElevationLayer.js";import FeatureCollection from"@giro3d/giro3d/entities/FeatureCollection.js";import Map from"@giro3d/giro3d/entities/Map.js";import Tiles3D from"@giro3d/giro3d/entities/Tiles3D.js";import Inspector from"@giro3d/giro3d/gui/Inspector.js";import GeoTIFFSource from"@giro3d/giro3d/sources/GeoTIFFSource.js";import axios from"axios";import{fromUrl}from"geotiff";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{Vector2,CubeTextureLoader,Group,Raycaster,Mesh,Box3,Vector3,Matrix4}from"three";import{GLTFExporter}from"three/addons/exporters/GLTFExporter.js";import{GLTFLoader}from"three/addons/loaders/GLTFLoader";import{v4 as uuidv4}from"uuid";import{LayerRole}from"../../actions/layers";import{setCurrentTask}from"../../actions/task";import{BackgroundSwitcher}from"../../plugins/BackgroundSwitcher";import ConfigUtils from"../../utils/ConfigUtils";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LayerUtils from"../../utils/LayerUtils";import MiscUtils from"../../utils/MiscUtils";import{registerPermalinkDataStoreHook,unregisterPermalinkDataStoreHook,UrlParams}from"../../utils/PermaLinkUtils";import{MapContainerPortalContext}from"../PluginsContainer";import BottomBar3D from"./BottomBar3D";import Compare3D from"./Compare3D";import Draw3D from"./Draw3D";import EditDataset3D from"./EditDataset3D";import ExportObjects3D from"./ExportObjects3D";import HideObjects3D from"./HideObjects3D";import Identify3D from"./Identify3D";import LayerTree3D from"./LayerTree3D";import Map3DLight from"./Map3DLight";import MapControls3D from"./MapControls3D";import MapExport3D from"./MapExport3D";import Measure3D from"./Measure3D";import OverviewMap3D from"./OverviewMap3D";import TopBar3D from"./TopBar3D";import View3DSwitcher from"./View3DSwitcher";import LayerRegistry from"./layers/index";import{importGltf,updateObjectLabel}from"./utils/MiscUtils3D";import Tiles3DStyle from"./utils/Tiles3DStyle";import"./style/Map3D.css";// Ensures unUnload is called *after* all other children have unmounted
|
|
8
|
+
var UnloadWrapper=/*#__PURE__*/function(_React$Component){function UnloadWrapper(){var _this;_classCallCheck(this,UnloadWrapper);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,UnloadWrapper,[].concat(args));_defineProperty(_this,"onUnload",function(el){if(!el){_this.props.onUnload(_this.props.sceneId)}});return _this}_inherits(UnloadWrapper,_React$Component);return _createClass(UnloadWrapper,[{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",null,this.props.children,/*#__PURE__*/React.createElement("span",{ref:this.onUnload}))}}])}(React.Component);_defineProperty(UnloadWrapper,"propTypes",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),onUnload:PropTypes.func,sceneId:PropTypes.string});var Map3D=/*#__PURE__*/function(_React$Component2){function Map3D(props){var _this2;_classCallCheck(this,Map3D);_this2=_callSuper(this,Map3D,[props]);_defineProperty(_this2,"state",{sceneContext:_objectSpread(_objectSpread({},Map3D.defaultSceneState),{},{addLayer:function addLayer(layer){},getLayer:function getLayer(layerId){},removeLayer:function removeLayer(layerId){},updateColorLayer:function updateColorLayer(layerId,options,path){},add3dTiles:function add3dTiles(url,options){},addSceneObject:function addSceneObject(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{}},getSceneObject:function getSceneObject(objectId){},removeSceneObject:function removeSceneObject(objectId){},updateSceneObject:function updateSceneObject(objectId,options){},zoomToObject:function zoomToObject(objectId){},getMap:function getMap(){},setViewToExtent:function setViewToExtent(bounds,angle){},getTerrainHeightFromDTM:function getTerrainHeightFromDTM(scenePos){},getTerrainHeightFromMap:function getTerrainHeightFromMap(scenePos){},getSceneIntersection:function getSceneIntersection(x,y,objects){}}),sceneId:null});_defineProperty(_this2,"applyBaseLayer",function(){var baseLayer=_this2.state.sceneContext.baseLayers.find(function(e){return e.visibility===true});_this2.removeLayer("__baselayer");if(!baseLayer){return}var layerCreator=LayerRegistry[baseLayer.type];if(layerCreator!==null&&layerCreator!==void 0&&layerCreator.create3d){var layer3d=layerCreator.create3d(baseLayer,_this2.state.sceneContext.mapCrs);_this2.addLayer("__baselayer",layer3d);_this2.map.insertLayerAfter(layer3d,null)}});_defineProperty(_this2,"setBaseLayer",function(layer,visibility){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{baseLayers:state.sceneContext.baseLayers.map(function(entry){return _objectSpread(_objectSpread({},entry),{},{visibility:entry.name===layer.name?visibility:false})})})}});UrlParams.updateParams({bl3d:visibility?layer.name:""})});_defineProperty(_this2,"collectColorLayers",function(prevColorLayers){return _this2.props.layers.reduce(function(colorLayers,layer){var _prevOptions$visibili,_prevOptions$opacity,_prevOptions$extrusio,_prevOptions$fields;if(layer.role!==LayerRole.THEME&&layer.role!==LayerRole.USERLAYER){return colorLayers}var layerCreator=LayerRegistry[layer.type];if(!layerCreator||!layerCreator.create3d){return colorLayers}var prevOptions=prevColorLayers[layer.id];var _preserveSublayerOptions=function preserveSublayerOptions(entry,prevEntry){var _entry$sublayers,_entry$sublayers$map;return(_entry$sublayers=entry.sublayers)===null||_entry$sublayers===void 0||(_entry$sublayers$map=_entry$sublayers.map)===null||_entry$sublayers$map===void 0?void 0:_entry$sublayers$map.call(_entry$sublayers,function(child){var _prevEntry$sublayers,_prevEntry$sublayers$;var prevChild=prevEntry===null||prevEntry===void 0||(_prevEntry$sublayers=prevEntry.sublayers)===null||_prevEntry$sublayers===void 0||(_prevEntry$sublayers$=_prevEntry$sublayers.find)===null||_prevEntry$sublayers$===void 0?void 0:_prevEntry$sublayers$.call(_prevEntry$sublayers,function(x){return x.name===child.name});if((prevChild===null||prevChild===void 0?void 0:prevChild.name)===child.name){return _objectSpread(_objectSpread({},child),{},{visibility:prevChild.visibility,opacity:prevChild.opacity,sublayers:_preserveSublayerOptions(child,prevChild)})}else{return child}})};colorLayers[layer.id]=_objectSpread(_objectSpread({},layer),{},{visibility:(_prevOptions$visibili=prevOptions===null||prevOptions===void 0?void 0:prevOptions.visibility)!==null&&_prevOptions$visibili!==void 0?_prevOptions$visibili:false,opacity:(_prevOptions$opacity=prevOptions===null||prevOptions===void 0?void 0:prevOptions.opacity)!==null&&_prevOptions$opacity!==void 0?_prevOptions$opacity:255,extrusionHeight:(_prevOptions$extrusio=prevOptions===null||prevOptions===void 0?void 0:prevOptions.extrusionHeight)!==null&&_prevOptions$extrusio!==void 0?_prevOptions$extrusio:["vector","wfs"].includes(layer.type)?0:undefined,fields:(_prevOptions$fields=prevOptions===null||prevOptions===void 0?void 0:prevOptions.fields)!==null&&_prevOptions$fields!==void 0?_prevOptions$fields:undefined,sublayers:_preserveSublayerOptions(layer,prevOptions)});Object.assign(colorLayers[layer.id],LayerUtils.buildWMSLayerParams(colorLayers[layer.id]));if(colorLayers[layer.id].fields===undefined&&layerCreator.getFields){layerCreator.getFields(layer).then(function(fields){_this2.updateColorLayer(layer.id,{fields:fields})})}return colorLayers},{})});_defineProperty(_this2,"applyColorLayerUpdates",function(colorLayers,prevColorLayers){// Add-update new layers
|
|
8
9
|
var layerBelow=_this2.getLayer("__baselayer");Object.entries(colorLayers).reverse().forEach(function(_ref){var _ref2=_slicedToArray(_ref,2),layerId=_ref2[0],options=_ref2[1];var prevOptions=prevColorLayers[layerId];var layerCreator=LayerRegistry[options.type];var mapLayer=_this2.getLayer(layerId);if(mapLayer){layerCreator.update3d(mapLayer.source,options,prevOptions,_this2.state.sceneContext.mapCrs)}else{mapLayer=layerCreator.create3d(options,_this2.state.sceneContext.mapCrs);_this2.addLayer(layerId,mapLayer)}_this2.map.insertLayerAfter(mapLayer,layerBelow);mapLayer.visible=options.visibility;mapLayer.opacity=options.opacity/255;layerBelow=mapLayer;if(options.extrusionHeight!==0){_this2.createUpdateExtrudedLayer(mapLayer,options,options.features!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.features))}else if((prevOptions===null||prevOptions===void 0?void 0:prevOptions.extrusionHeight)!==0){_this2.removeExtrudedLayer(options.id)}});// Remove old layers
|
|
9
10
|
Object.entries(prevColorLayers).forEach(function(_ref3){var _ref4=_slicedToArray(_ref3,2),layerId=_ref4[0],options=_ref4[1];if(!(layerId in colorLayers)){if(options.extrusionHeight!==0){_this2.removeExtrudedLayer(options.id)}_this2.removeLayer(layerId)}});_this2.instance.notifyChange(_this2.map)});_defineProperty(_this2,"createUpdateExtrudedLayer",function(mapLayer,options){var _options$features,_options$features$red;var forceCreate=arguments.length>2&&arguments[2]!==undefined?arguments[2]:false;var bounds=options.bbox.bounds;var extent=new Extent(options.bbox.crs,bounds[0],bounds[2],bounds[1],bounds[3]);var objId=options.id+":extruded";var makeColor=function makeColor(c){if(Array.isArray(c)){return c[0]<<16|c[1]<<8|c[2]}else if(typeof c==="string"){return parseInt(c.replace("#",""),16)}else{return c}};var obj=_this2.objectMap[objId];if(!obj||forceCreate){var _options$color;if(obj){_this2.instance.remove(obj)}var layercolor=makeColor((_options$color=options.color)!==null&&_options$color!==void 0?_options$color:"#FF0000");obj=new FeatureCollection({source:mapLayer.source.source,extent:extent,minLevel:1,maxLevel:1,ignoreZ:true,elevation:function elevation(feature){var _this2$getTerrainHeig;var coordinates=feature.getGeometry().getCoordinates();while(Array.isArray(coordinates[0])){coordinates=coordinates[0]}return(_this2$getTerrainHeig=_this2.getTerrainHeightFromMap(coordinates))!==null&&_this2$getTerrainHeig!==void 0?_this2$getTerrainHeig:0},extrusionOffset:function extrusionOffset(feature){if(typeof obj.userData.extrusionHeight==="string"){return parseFloat(feature.getProperties()[obj.userData.extrusionHeight])||0}else{return obj.userData.extrusionHeight}},style:function style(feature){var _obj$userData$feature,_obj$userData$feature2;return(_obj$userData$feature=(_obj$userData$feature2=obj.userData.featureStyles)===null||_obj$userData$feature2===void 0?void 0:_obj$userData$feature2[feature.getId()])!==null&&_obj$userData$feature!==void 0?_obj$userData$feature:{fill:{color:layercolor,shading:true}}}});obj.castShadow=true;obj.receiveShadow=true;_this2.instance.add(obj);_this2.objectMap[objId]=obj}obj.userData.extrusionHeight=options.extrusionHeight;obj.userData.featureStyles=(_options$features=options.features)===null||_options$features===void 0||(_options$features$red=_options$features.reduce)===null||_options$features$red===void 0?void 0:_options$features$red.call(_options$features,function(res,feature){return _objectSpread(_objectSpread({},res),{},_defineProperty({},feature.id,{fill:{color:makeColor(feature.styleOptions.fillColor),shading:true}}))},{});obj.opacity=mapLayer.opacity;obj.visible=mapLayer.visible;obj.updateStyles()});_defineProperty(_this2,"removeExtrudedLayer",function(layerId){var objId=layerId+":extruded";if(_this2.objectMap[objId]){_this2.instance.remove(_this2.objectMap[objId]);delete _this2.objectMap[objId]}_this2.instance.notifyChange()});_defineProperty(_this2,"applySceneObjectUpdates",function(sceneObjects,prevSceneObjects){Object.entries(sceneObjects).forEach(function(_ref5){var _ref6=_slicedToArray(_ref5,2),objectId=_ref6[0],options=_ref6[1];var prevOptions=prevSceneObjects===null||prevSceneObjects===void 0?void 0:prevSceneObjects[objectId];var object=_this2.objectMap[objectId];if(options.opacity!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.opacity)||options.visibility!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.visibility)){object.visible=options.visibility&&options.opacity>0;if(object.opacity!==undefined){object.opacity=options.opacity/255}else{object.traverse(function(child){if(child instanceof Mesh){child.material.transparent=options.opacity<255;child.material.opacity=options.opacity/255;child.material.needsUpdate=true}})}_this2.instance.notifyChange(object)}if(options.style!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.style)){_this2.loadTilesetStyle(objectId,options)}if(options.tilesetStyle!==(prevOptions===null||prevOptions===void 0?void 0:prevOptions.tilesetStyle)){object.tiles.group.children.forEach(function(group){Tiles3DStyle.applyTileStyle(group,options)});_this2.instance.notifyChange(object)}})});_defineProperty(_this2,"addLayer",function(layerId,layer){layer.userData.layerId=layerId;_this2.map.addLayer(layer)});_defineProperty(_this2,"getLayer",function(layerId){var _this2$map$getLayers$;return(_this2$map$getLayers$=_this2.map.getLayers(function(l){return l.userData.layerId===layerId})[0])!==null&&_this2$map$getLayers$!==void 0?_this2$map$getLayers$:null});_defineProperty(_this2,"removeLayer",function(layerId){_this2.map.getLayers(function(l){return l.userData.layerId===layerId}).forEach(function(layer){_this2.map.removeLayer(layer,{dispose:true})})});_defineProperty(_this2,"updateColorLayer",function(layerId,options){var path=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];_this2.setState(function(state){var entry=_objectSpread({},state.sceneContext.colorLayers[layerId]);var subentry=entry;path.forEach(function(idx){subentry.sublayers=_toConsumableArray(subentry.sublayers);subentry.sublayers[idx]=_objectSpread({},subentry.sublayers[idx]);subentry=subentry.sublayers[idx]});Object.assign(subentry,options);Object.assign(entry,LayerUtils.buildWMSLayerParams(entry));return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_objectSpread(_objectSpread({},state.sceneContext.colorLayers),{},_defineProperty({},layerId,entry))})}})});_defineProperty(_this2,"add3dTiles",function(url,name){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};var showEditTool=arguments.length>3&&arguments[3]!==undefined?arguments[3]:false;var matrix=arguments.length>4&&arguments[4]!==undefined?arguments[4]:null;var label=arguments.length>5&&arguments[5]!==undefined?arguments[5]:null;var tiles=new Tiles3D({url:MiscUtils.resolveAssetsPath(url)});// Recenter tile group
|
|
10
|
-
tiles.tiles.addEventListener("load-tile-set",function(_ref7){var tileSet=_ref7.tileSet;if(tileSet.root.parent===null){var bbox=new Box3;tiles.tiles.getBoundingBox(bbox);var center=bbox.getCenter(new Vector3);tiles.tiles.group.position.sub(center);if(matrix){tiles.tiles.group.parent.applyMatrix4(matrix)}else{tiles.tiles.group.parent.position.copy(center)}tiles.tiles.group.parent.updateMatrixWorld(true);if(label){tiles.tiles.group.parent.userData.label=label;updateObjectLabel(tiles.tiles.group.parent,_this2.state.sceneContext)}}_this2.instance.notifyChange(tiles);if(showEditTool){_this2.zoomToObject(name);_this2.props.setCurrentTask("EditDataset3D",null,null,{objectId:name})}});// Apply style when loading tile
|
|
11
|
-
tiles.tiles.addEventListener("load-model",function(_ref8){var scene=_ref8.scene;scene.userData.tilesetName=name;scene.userData.batchIdAttr="id";Tiles3DStyle.applyTileStyle(scene,_this2.state.sceneContext.sceneObjects[name],_this2.state.sceneContext)});// Show/hide labels when tile visibility changes
|
|
12
|
-
tiles.tiles.addEventListener("tile-visibility-change",function(_ref9){var scene=_ref9.scene,visible=_ref9.visible;Object.values(scene.userData.tileLabels||{}).forEach(function(
|
|
11
|
+
tiles.tiles.addEventListener("load-tile-set",function(_ref7){var tileSet=_ref7.tileSet;if(tileSet.root.parent===null){var bbox=new Box3;tiles.tiles.getBoundingBox(bbox);var center=bbox.getCenter(new Vector3);tiles.tiles.group.position.sub(center);if(matrix){tiles.tiles.group.parent.applyMatrix4(matrix)}else{tiles.tiles.group.parent.position.copy(center)}tiles.tiles.group.parent.updateMatrixWorld(true);if(label){tiles.tiles.group.parent.userData.label=label;updateObjectLabel(tiles.tiles.group.parent,_this2.state.sceneContext)}}_this2.instance.notifyChange(tiles);if(showEditTool){_this2.zoomToObject(name);_this2.props.setCurrentTask("EditDataset3D",null,null,{objectId:name})}});tiles.tiles.addEventListener("needs-update",function(){_this2.instance.notifyChange(tiles)});// Apply style when loading tile
|
|
12
|
+
tiles.tiles.addEventListener("load-model",function(_ref8){var scene=_ref8.scene;scene.userData.tilesetName=name;scene.userData.batchIdAttr="id";Tiles3DStyle.applyTileStyle(scene,_this2.state.sceneContext.sceneObjects[name],_this2.state.sceneContext);_this2.instance.notifyChange(tiles)});// Show/hide labels when tile visibility changes
|
|
13
|
+
tiles.tiles.addEventListener("tile-visibility-change",function(_ref9){var scene=_ref9.scene,visible=_ref9.visible;Object.values(scene.userData.tileLabels||{}).forEach(function(l){l.labelObject.visible=visible;l.labelObject.element.style.display=visible?"initial":"none"})});tiles.castShadow=true;tiles.receiveShadow=true;tiles.userData.layertree=true;_this2.instance.add(tiles);_this2.objectMap[name]=tiles;_this2.setState(function(state){var objectState=_objectSpread({imported:true,visibility:true,opacity:255,layertree:true,title:name},options);return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},name,objectState))})}})});_defineProperty(_this2,"addSceneObject",function(objectId,object){var options=arguments.length>2&&arguments[2]!==undefined?arguments[2]:{};_this2.sceneObjectGroup.add(object);_this2.objectMap[objectId]=object;_this2.instance.notifyChange(object);_this2.setState(function(state){var objectState=_objectSpread({visibility:true,opacity:255,layertree:false},options);return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,objectState))})}})});_defineProperty(_this2,"getSceneObject",function(objectId){return _this2.objectMap[objectId]});_defineProperty(_this2,"removeSceneObject",function(objectId){var callback=arguments.length>1&&arguments[1]!==undefined?arguments[1]:undefined;var object=_this2.objectMap[objectId];if(!object){return}// Ensure labels are removed
|
|
13
14
|
object.traverse(function(c){if(c.isCSS2DObject){c.element.parentNode.removeChild(c.element)}});if(object.tiles){_this2.instance.remove(object)}else{_this2.sceneObjectGroup.remove(object)}delete _this2.objectMap[objectId];_this2.instance.notifyChange();_this2.setState(function(state){var newSceneObjects=_objectSpread({},state.sceneContext.sceneObjects);delete newSceneObjects[objectId];return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:newSceneObjects})}},callback)});_defineProperty(_this2,"updateSceneObject",function(objectId,options){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{sceneObjects:_objectSpread(_objectSpread({},state.sceneContext.sceneObjects),{},_defineProperty({},objectId,_objectSpread(_objectSpread({},state.sceneContext.sceneObjects[objectId]),options)))})}})});_defineProperty(_this2,"zoomToObject",function(objectId){var margin=arguments.length>1&&arguments[1]!==undefined?arguments[1]:20;var obj=_this2.state.sceneContext.getSceneObject(objectId);var bbox=new Box3;if(obj!==null&&obj!==void 0&&obj.tiles){obj.tiles.getBoundingBox(bbox)}else{bbox.setFromObject(obj)}if(!bbox.isEmpty()){var bounds=[bbox.min.x-margin,bbox.min.y-margin,bbox.max.x+margin,bbox.max.y+margin];_this2.state.sceneContext.setViewToExtent(bounds,0)}});_defineProperty(_this2,"getMap",function(){return _this2.map});_defineProperty(_this2,"setupContainer",function(el){if(el){_this2.container=el;el.resizeObserver=new ResizeObserver(function(entries){var rect=entries[0].contentRect;_this2.state.sceneContext.scene.view.dispatchEvent({type:"view-resized",width:rect.width,height:rect.height})});el.resizeObserver.observe(el);_this2.setupInstance()}});_defineProperty(_this2,"setupInstance",function(){var _this2$props$theme$ma,_this2$props$theme$ma2,_this2$props$theme$ma3,_this2$props$theme$ma6,_this2$props$theme$ma7,_this2$props$theme$ma8;if(_this2.instance){_this2.disposeInstance()}var projection=_this2.props.theme.mapCrs;// Setup instance
|
|
14
15
|
_this2.instance=new Instance({target:_this2.container,crs:projection,renderer:{clearColor:0,preserveDrawingBuffer:true}});_this2.sceneObjectGroup=new Group;_this2.instance.add(_this2.sceneObjectGroup);// Setup map
|
|
15
16
|
var bounds=CoordinatesUtils.reprojectBbox(_this2.props.theme.initialBbox.bounds,_this2.props.theme.initialBbox.crs,projection);var extent=new Extent(projection,bounds[0],bounds[2],bounds[1],bounds[3]);_this2.map=new Map({extent:extent,backgroundColor:"white"});_this2.instance.add(_this2.map);// Setup camera
|
|
@@ -18,8 +19,8 @@ var cubeTextureLoader=new CubeTextureLoader;cubeTextureLoader.setPath(ConfigUtil
|
|
|
18
19
|
var demUrl=MiscUtils.resolveAssetsPath((_this2$props$theme$ma=(_this2$props$theme$ma2=_this2.props.theme.map3d)===null||_this2$props$theme$ma2===void 0||(_this2$props$theme$ma2=_this2$props$theme$ma2.dtm)===null||_this2$props$theme$ma2===void 0?void 0:_this2$props$theme$ma2.url)!==null&&_this2$props$theme$ma!==void 0?_this2$props$theme$ma:"");var demCrs=((_this2$props$theme$ma3=_this2.props.theme.map3d)===null||_this2$props$theme$ma3===void 0||(_this2$props$theme$ma3=_this2$props$theme$ma3.dtm)===null||_this2$props$theme$ma3===void 0?void 0:_this2$props$theme$ma3.crs)||"EPSG:3857";if(demUrl){var _this2$props$theme$ma4,_this2$props$theme$ma5;var demSource=new GeoTIFFSource({url:demUrl,crs:demCrs});var demMin=(_this2$props$theme$ma4=_this2.props.theme.map3d.dtm.min)!==null&&_this2$props$theme$ma4!==void 0?_this2$props$theme$ma4:undefined;var demMax=(_this2$props$theme$ma5=_this2.props.theme.map3d.dtm.max)!==null&&_this2$props$theme$ma5!==void 0?_this2$props$theme$ma5:undefined;var elevationLayer=new ElevationLayer({name:"dem",extent:extent,source:demSource,minmax:demMin!==undefined&&demMax!==undefined?{demMin:demMin,demMax:demMax}:undefined});_this2.addLayer("__dtm",elevationLayer)}// Collect baselayers
|
|
19
20
|
var visibleBaseLayer=null;var baseLayers=(((_this2$props$theme$ma6=_this2.props.theme.map3d)===null||_this2$props$theme$ma6===void 0?void 0:_this2$props$theme$ma6.basemaps)||[]).map(function(e){var baseLayer=_objectSpread(_objectSpread({},_this2.props.layers.find(function(bl){return bl.name===e.name})),{},{visibility:e.visibility===true,overview:e.overview===true});if(baseLayer.visibility){visibleBaseLayer=baseLayer}return baseLayer});if(visibleBaseLayer){_this2.setBaseLayer(visibleBaseLayer,true)}// Collect color layers
|
|
20
21
|
var colorLayers=_this2.collectColorLayers([]);var sceneObjects={};_this2.objectMap={};// Add 3d tiles
|
|
21
|
-
(((_this2$props$theme$ma7=_this2.props.theme.map3d)===null||_this2$props$theme$ma7===void 0?void 0:_this2$props$theme$ma7.tiles3d)||[]).forEach(function(entry){var _entry$title;var tiles=new Tiles3D({url:MiscUtils.resolveAssetsPath(entry.url),errorTarget:32});// Apply style when loading tile
|
|
22
|
-
tiles.tiles.addEventListener("load-model",function(_ref10){var _entry$idAttr;var scene=_ref10.scene;scene.userData.tilesetName=entry.name;scene.userData.batchIdAttr=(_entry$idAttr=entry.idAttr)!==null&&_entry$idAttr!==void 0?_entry$idAttr:"id";Tiles3DStyle.applyTileStyle(scene,_this2.state.sceneContext.sceneObjects[entry.name],_this2.state.sceneContext)});// Show/hide labels when tile visibility changes
|
|
22
|
+
(((_this2$props$theme$ma7=_this2.props.theme.map3d)===null||_this2$props$theme$ma7===void 0?void 0:_this2$props$theme$ma7.tiles3d)||[]).forEach(function(entry){var _entry$title;var tiles=new Tiles3D({url:MiscUtils.resolveAssetsPath(entry.url),errorTarget:32});tiles.tiles.addEventListener("load-tile-set",function(){_this2.instance.notifyChange(tiles)});tiles.tiles.addEventListener("needs-update",function(){_this2.instance.notifyChange(tiles)});// Apply style when loading tile
|
|
23
|
+
tiles.tiles.addEventListener("load-model",function(_ref10){var _entry$idAttr;var scene=_ref10.scene;scene.userData.tilesetName=entry.name;scene.userData.batchIdAttr=(_entry$idAttr=entry.idAttr)!==null&&_entry$idAttr!==void 0?_entry$idAttr:"id";Tiles3DStyle.applyTileStyle(scene,_this2.state.sceneContext.sceneObjects[entry.name],_this2.state.sceneContext);_this2.instance.notifyChange(tiles)});// Show/hide labels when tile visibility changes
|
|
23
24
|
tiles.tiles.addEventListener("tile-visibility-change",function(_ref11){var scene=_ref11.scene,visible=_ref11.visible;Object.values(scene.userData.tileLabels||{}).forEach(function(label){label.labelObject.visible=visible;label.labelObject.element.style.display=visible?"initial":"none"})});tiles.castShadow=true;tiles.receiveShadow=true;tiles.userData.layertree=true;_this2.instance.add(tiles);_this2.objectMap[entry.name]=tiles;sceneObjects[entry.name]={visibility:true,opacity:255,layertree:true,title:(_entry$title=entry.title)!==null&&_entry$title!==void 0?_entry$title:entry.name,baseColor:entry.baseColor,styles:entry.styles,style:entry.style||Object.keys(entry.styles||{})[0]||null,tilesetStyle:null,idAttr:entry.idAttr,colorAttr:entry.colorAttr,alphaAttr:entry.alphaAttr,labelAttr:entry.labelAttr}});// Add other objects
|
|
24
25
|
(((_this2$props$theme$ma8=_this2.props.theme.map3d)===null||_this2$props$theme$ma8===void 0?void 0:_this2$props$theme$ma8.objects3d)||[]).forEach(function(entry){importGltf(MiscUtils.resolveAssetsPath(entry.url),entry.name,_this2.state.sceneContext)});_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{scene:_this2.instance,map:_this2.map,mapCrs:projection,dtmUrl:demUrl,dtmCrs:demCrs,baseLayers:baseLayers,colorLayers:colorLayers,sceneObjects:sceneObjects}),sceneId:uuidv4()}});// Inspector
|
|
25
26
|
if(["1","true"].includes((UrlParams.getParam("inspector")||"").toLowerCase())){var inspectorContainer=document.createElement("div");inspectorContainer.className="map3d-inspector";_this2.container.appendChild(inspectorContainer);_this2.inspector=new Inspector(inspectorContainer,_this2.instance)}});_defineProperty(_this2,"loadTilesetStyle",function(objectId,options){var _options$styles;var url=(_options$styles=options.styles)===null||_options$styles===void 0?void 0:_options$styles[options.style];if(_this2.tilesetStyles[url]){_this2.updateSceneObject(objectId,{tilesetStyle:_this2.tilesetStyles[url]})}else if(url){var fullUrl=MiscUtils.resolveAssetsPath(url);axios.get(fullUrl).then(function(response){_this2.tilesetStyles[url]=response.data;_this2.updateSceneObject(objectId,{tilesetStyle:_this2.tilesetStyles[url]})})["catch"](function(){_this2.tilesetStyles[url]={};_this2.updateSceneObject(objectId,{tilesetStyle:_this2.tilesetStyles[url]})})}else{_this2.tilesetStyles[url]=null;_this2.updateSceneObject(objectId,{tilesetStyle:_this2.tilesetStyles[url]})}});_defineProperty(_this2,"disposeInstance",function(){if(_this2.inspector){_this2.inspector.detach()}_this2.map.dispose({disposeLayers:true});Object.values(_this2.objectMap).forEach(function(object){_this2.instance.remove(object)});_this2.instance.dispose();_this2.inspector=null;_this2.map=null;_this2.objectMap={};_this2.sceneObjectGroup=null;_this2.instance=null;_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),Map3D.defaultSceneState)}});_this2.props.setCurrentTask(null)});_defineProperty(_this2,"onUnload",function(key){// Ensure scene has not already been disposed
|
|
@@ -36,4 +37,4 @@ var terrInter=raycaster.intersectObjects([_this2.map.object3d]).filter(function(
|
|
|
36
37
|
if(objInter&&terrInter){return objInter.distance<terrInter.distance?objInter:terrInter}return objInter!==null&&objInter!==void 0?objInter:terrInter});_defineProperty(_this2,"redrawScene",function(ev){var width=ev.target.innerWidth;var height=ev.target.innerHeight;_this2.instance.renderer.setSize(width,height);_this2.instance.view.camera.aspect=width/height;_this2.instance.view.camera.updateProjectionMatrix();_this2.instance.renderer.render(_this2.instance.scene,_this2.instance.view.camera)});_defineProperty(_this2,"setViewToExtent",function(bounds,rotation){_this2.state.sceneContext.setViewToExtent(bounds,rotation)});_defineProperty(_this2,"store3dState",function(){var promises=Object.entries(_this2.state.sceneContext.sceneObjects).map(function(_ref14){var _ref15=_slicedToArray(_ref14,2),objectId=_ref15[0],entry=_ref15[1];if(!entry.layertree){return null}return new Promise(function(resolve){var object=_this2.state.sceneContext.getSceneObject(objectId);if(entry.drawGroup){var exporter=new GLTFExporter;exporter.parse(object,function(result){resolve({id:objectId,options:entry,data:result})})}else if(entry.imported&&object.tiles){var container=object.tiles.group.parent;var tileset={matrix:container.matrix.elements,label:container.userData.label,url:object.tiles.rootURL};resolve({id:objectId,options:entry,tileset:tileset})}else{resolve({id:objectId,options:entry})}})}).filter(Boolean);return new Promise(function(resolve){Promise.all(promises).then(function(objects){var _this2$state$sceneCon;var camera=_this2.state.sceneContext.scene.view.camera.position;var target=_this2.state.sceneContext.scene.view.controls.target;var layers=Object.entries(_this2.state.sceneContext.colorLayers).map(function(_ref16){var _ref17=_slicedToArray(_ref16,2),layerId=_ref17[0],options=_ref17[1];return{id:layerId,options:{visibility:options.visibility,opacity:options.opacity,extrusionHeight:options.extrusionHeight}}});resolve({objects:objects,colorLayers:layers,personHeight:(_this2$state$sceneCon=_this2.state.sceneContext.scene.view.controls.personHeight)!==null&&_this2$state$sceneCon!==void 0?_this2$state$sceneCon:0,camera:[camera.x,camera.y,camera.z],target:[target.x,target.y,target.z]})})})});_defineProperty(_this2,"restore3dState",function(data){if(isEmpty(data)){return}(data.objects||[]).forEach(function(item){if(item.data){var loader=new GLTFLoader;loader.parse(item.data,ConfigUtils.getAssetsPath(),function(gltf){gltf.scene.traverse(function(c){if(c.isMesh){c.castShadow=true;c.receiveShadow=true}updateObjectLabel(c,_this2.state.sceneContext)});_this2.state.sceneContext.addSceneObject(item.id,gltf.scene,item.options)})}else if(item.tileset){_this2.add3dTiles(item.tileset.url,item.id,item.options,false,new Matrix4().fromArray(item.tileset.matrix),item.tileset.label)}else if(item.id in _this2.state.sceneContext.sceneObjects){_this2.state.sceneContext.updateSceneObject(item.id,item.options)}});(data.colorLayers||[]).forEach(function(item){if(item.id in _this2.state.sceneContext.colorLayers){_this2.state.sceneContext.updateColorLayer(item.id,item.options)}});_this2.state.sceneContext.restoreView(data);if(data.baselayer!==undefined){_this2.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{baseLayers:state.sceneContext.baseLayers.map(function(l){return _objectSpread(_objectSpread({},l),{},{visibility:l.name===data.baselayer})})})}});UrlParams.updateParams({bl3d:data.baselayer})}_this2.state.sceneContext.scene.notifyChange()});_this2.container=null;_this2.inspector=null;_this2.instance=null;_this2.map=null;_this2.sceneObjectGroup=null;_this2.objectMap={};_this2.tilesetStyles={};_this2.state.sceneContext.options=_this2.props.options;_this2.state.sceneContext.addLayer=_this2.addLayer;_this2.state.sceneContext.getLayer=_this2.getLayer;_this2.state.sceneContext.removeLayer=_this2.removeLayer;_this2.state.sceneContext.updateColorLayer=_this2.updateColorLayer;_this2.state.sceneContext.add3dTiles=_this2.add3dTiles;_this2.state.sceneContext.addSceneObject=_this2.addSceneObject;_this2.state.sceneContext.getSceneObject=_this2.getSceneObject;_this2.state.sceneContext.removeSceneObject=_this2.removeSceneObject;_this2.state.sceneContext.updateSceneObject=_this2.updateSceneObject;_this2.state.sceneContext.zoomToObject=_this2.zoomToObject;_this2.state.sceneContext.getMap=_this2.getMap;_this2.state.sceneContext.getTerrainHeightFromDTM=_this2.getTerrainHeightFromDTM;_this2.state.sceneContext.getTerrainHeightFromMap=_this2.getTerrainHeightFromMap;_this2.state.sceneContext.getSceneIntersection=_this2.getSceneIntersection;registerPermalinkDataStoreHook("map3d",_this2.store3dState);return _this2}_inherits(Map3D,_React$Component2);return _createClass(Map3D,[{key:"componentDidMount",value:function componentDidMount(){this.props.innerRef(this)}},{key:"componentWillUnmount",value:function componentWillUnmount(){unregisterPermalinkDataStoreHook("map3d")}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this3=this;if(this.props.theme!==prevProps.theme){this.setupInstance()}else if(this.props.layers!==prevProps.layers){this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{colorLayers:_this3.collectColorLayers(state.sceneContext.colorLayers)})}})}// Update map layers
|
|
37
38
|
if(this.state.sceneContext.baseLayers!==prevState.sceneContext.baseLayers){this.applyBaseLayer()}if(this.state.sceneContext.colorLayers!==prevState.sceneContext.colorLayers){this.applyColorLayerUpdates(this.state.sceneContext.colorLayers,prevState.sceneContext.colorLayers)}// Update scene objects
|
|
38
39
|
if(this.state.sceneContext.sceneObjects!==prevState.sceneContext.sceneObjects){this.applySceneObjectUpdates(this.state.sceneContext.sceneObjects,prevState.sceneContext.sceneObjects);// Update collision objects
|
|
39
|
-
this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{collisionObjects:Object.entries(state.sceneContext.sceneObjects).map(function(_ref18){var _ref19=_slicedToArray(_ref18,2),objId=_ref19[0],options=_ref19[1];if(options.layertree&&options.visibility){var _obj$tiles$group,_obj$tiles;var obj=_this3.objectMap[objId];return(_obj$tiles$group=(_obj$tiles=obj.tiles)===null||_obj$tiles===void 0?void 0:_obj$tiles.group)!==null&&_obj$tiles$group!==void 0?_obj$tiles$group:obj}return null}).filter(Boolean)})}})}}},{key:"render",value:function render(){var _this$state$sceneCont;var baseLayer=this.state.sceneContext.baseLayers.find(function(l){return l.visibility===true});var overviewLayer=(_this$state$sceneCont=this.state.sceneContext.baseLayers.find(function(l){return l.overview===true}))!==null&&_this$state$sceneCont!==void 0?_this$state$sceneCont:baseLayer;return[/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-map",id:"map3d",key:"Map3D",ref:this.setupContainer}),this.context),this.state.sceneContext.scene?/*#__PURE__*/React.createElement(UnloadWrapper,{key:this.state.sceneId,onUnload:this.onUnload,sceneId:this.state.sceneId},/*#__PURE__*/React.createElement(MapControls3D,{onCameraChanged:this.props.onCameraChanged,onControlsSet:this.setupControls,sceneContext:this.state.sceneContext}
|
|
40
|
+
this.setState(function(state){return{sceneContext:_objectSpread(_objectSpread({},state.sceneContext),{},{collisionObjects:Object.entries(state.sceneContext.sceneObjects).map(function(_ref18){var _ref19=_slicedToArray(_ref18,2),objId=_ref19[0],options=_ref19[1];if(options.layertree&&options.visibility){var _obj$tiles$group,_obj$tiles;var obj=_this3.objectMap[objId];return(_obj$tiles$group=(_obj$tiles=obj.tiles)===null||_obj$tiles===void 0?void 0:_obj$tiles.group)!==null&&_obj$tiles$group!==void 0?_obj$tiles$group:obj}return null}).filter(Boolean)})}})}}},{key:"render",value:function render(){var _this$state$sceneCont;var baseLayer=this.state.sceneContext.baseLayers.find(function(l){return l.visibility===true});var overviewLayer=(_this$state$sceneCont=this.state.sceneContext.baseLayers.find(function(l){return l.overview===true}))!==null&&_this$state$sceneCont!==void 0?_this$state$sceneCont:baseLayer;return[/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"map3d-map",id:"map3d",key:"Map3D",ref:this.setupContainer}),this.context),this.state.sceneContext.scene?/*#__PURE__*/React.createElement(UnloadWrapper,{key:this.state.sceneId,onUnload:this.onUnload,sceneId:this.state.sceneId},/*#__PURE__*/React.createElement(MapControls3D,{onCameraChanged:this.props.onCameraChanged,onControlsSet:this.setupControls,sceneContext:this.state.sceneContext},/*#__PURE__*/React.createElement(BackgroundSwitcher,{changeLayerVisibility:this.setBaseLayer,layers:this.state.sceneContext.baseLayers}),/*#__PURE__*/React.createElement(BottomBar3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Compare3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Draw3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(EditDataset3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(ExportObjects3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(HideObjects3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Identify3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(LayerTree3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Map3DLight,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(MapExport3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(Measure3D,{sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(OverviewMap3D,{baseLayer:overviewLayer,sceneContext:this.state.sceneContext}),/*#__PURE__*/React.createElement(TopBar3D,{sceneContext:this.state.sceneContext,searchProviders:this.props.searchProviders}),/*#__PURE__*/React.createElement(View3DSwitcher,{position:2}))):null]}}])}(React.Component);_defineProperty(Map3D,"contextType",MapContainerPortalContext);_defineProperty(Map3D,"propTypes",{innerRef:PropTypes.func,layers:PropTypes.array,onCameraChanged:PropTypes.func,onMapInitialized:PropTypes.func,options:PropTypes.object,searchProviders:PropTypes.object,setCurrentTask:PropTypes.func,theme:PropTypes.object});_defineProperty(Map3D,"defaultProps",{geometry:{initialWidth:600,initialHeight:800,initialX:0,initialY:0,initiallyDocked:true}});_defineProperty(Map3D,"defaultSceneState",{scene:null,map:null,mapCrs:null,dtmUrl:null,dtmCrs:null,baseLayers:[],colorLayers:{},sceneObjects:{},collisionObjects:[]});export default connect(function(state){return{theme:state.theme.current,layers:state.layers.flat}},{setCurrentTask:setCurrentTask})(Map3D);
|
|
@@ -4,8 +4,8 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
|
|
|
4
4
|
*
|
|
5
5
|
* This source code is licensed under the BSD-style license found in the
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
7
|
-
*/import React from"react";import Sun from"@giro3d/giro3d/core/geographic/Sun.js";import{MapLightingMode}from"@giro3d/giro3d/entities/MapLightingOptions";import PropTypes from"prop-types";import suncalc from"suncalc";import{AmbientLight,BasicShadowMap,CameraHelper,DirectionalLight,DirectionalLightHelper,PCFShadowMap,PCFSoftShadowMap,VSMShadowMap}from"three";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import Icon from"../Icon";import SideBar from"../SideBar";import Input from"../widgets/Input";import NumberInput from"../widgets/NumberInput";import ToggleSwitch from"../widgets/ToggleSwitch";import"./style/Map3DLight.css";var Map3DLight=/*#__PURE__*/function(_React$Component){function Map3DLight(props){var _this;_classCallCheck(this,Map3DLight);_this=_callSuper(this,Map3DLight,[props]);_defineProperty(_this,"state",{showAdvanced:false,lightParams:{day:182,time:720,helpersVisible:false,moonLightIntensity:0.06,sunLightIntensity:3.5,zFactor:1,lightElevationLayersOnly:false,shadowsEnabled:true,shadowType:PCFShadowMap,shadowMapSize:4096,shadowBias:-0.0001,sunDistance:80000,normalBias:0,shadowIntensity:1,shadowVolumeNear:60000,shadowVolumeFar:100000},dayAnimation:false,dayAnimationSettings:false,dayStep:30,timeAnimation:false,timeAnimationSettings:false,timeStep:30});_defineProperty(_this,"onHide",function(){clearInterval(_this.animationInterval);_this.setState({dayAnimation:false,timeAnimation:false})});_defineProperty(_this,"renderBody",function(){var lightParams=_this.state.lightParams;var dateValue=new Date(new Date().getFullYear(),0,1+lightParams.day).toISOString().split("T")[0];var dateToDay=function dateToDay(date){var d=new Date(date+"T00:00:00");return(d-new Date(d.getFullYear(),0,0))/(1000*60*60*24)};var isLeapYear=function isLeapYear(year){return new Date(year,1,29).getDate()===29};var timeValue="".concat(String(Math.trunc(lightParams.time/60)).padStart(2,"0"),":").concat(String(lightParams.time%60).padStart(2,"0"));var timeToMin=function timeToMin(time){var parts=time.split(":");return parseInt(parts[0],10)*60+parseInt(parts[1],10)};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.date")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.dayAnimation?"square":"triangle-right",onClick:_this.toggleDayAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:365+isLeapYear(),min:1,onChange:function onChange(ev){return _this.updateLightParams("day",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.day}),/*#__PURE__*/React.createElement(Input,{onChange:function onChange(value){return _this.updateLightParams("day",dateToDay(value))},type:"date",value:dateValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.dayAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{dayAnimationSettings:!state.dayAnimationSettings}})}})))),_this.state.dayAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(dayStep){return _this.setState({dayStep:dayStep})},suffix:" "+LocaleUtils.tr("maplight3d.dayspersec"),value:_this.state.dayStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.time")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.timeAnimation?"square":"triangle-right",onClick:_this.toggleTimeAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:1439,min:0,onChange:function onChange(ev){return _this.updateLightParams("time",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.time}),/*#__PURE__*/React.createElement(Input,{onChange:function onChange(value){return _this.updateLightParams("time",timeToMin(value))},type:"time",value:timeValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.timeAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{timeAnimationSettings:!state.timeAnimationSettings}})}})))),_this.state.timeAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(timeStep){return _this.setState({timeStep:timeStep})},suffix:" "+LocaleUtils.tr("maplight3d.minspersec"),value:_this.state.timeStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.sunLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("sunLightIntensity",0,10,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.moonLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("moonLightIntensity",0,0.5,0.01))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadows")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.shadowsEnabled,onChange:function onChange(value){return _this.updateLightParams("shadowsEnabled",value)}}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowintensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("shadowIntensity",0,2,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{className:"maplight3d-advanced",colSpan:"2"},/*#__PURE__*/React.createElement("label",null,/*#__PURE__*/React.createElement("input",{checked:_this.state.showAdvanced,onChange:function onChange(ev){return _this.setState(function(state){return{showAdvanced:!state.showAdvanced}})},type:"checkbox"})," ",LocaleUtils.tr("maplight3d.showadvanced")))),_this.state.showAdvanced?[/*#__PURE__*/React.createElement("tr",{key:"helpersVisible"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.helpersVisible")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.helpersVisible,onChange:function onChange(value){return _this.updateLightParams("helpersVisible",value)}}))),/*#__PURE__*/React.createElement("tr",{key:"zFactor"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.zFactor")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("input",{max:10,min:0,onChange:function onChange(ev){return _this.updateLightParams("zFactor",ev.target.value)},step:0.1,type:"range",value:lightParams.zFactor}))),/*#__PURE__*/React.createElement("tr",{key:"shadowType"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowType")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.updateLightParams("shadowType",parseInt(ev.target.value,10))},value:lightParams.shadowType},/*#__PURE__*/React.createElement("option",{value:BasicShadowMap},"BasicShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFShadowMap},"PCFShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFSoftShadowMap},"PCFSoftShadowMap"),/*#__PURE__*/React.createElement("option",{value:VSMShadowMap},"VSMShadowMap")))),/*#__PURE__*/React.createElement("tr",{key:"shadowMapSize"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowMapSize")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:8192,min:64,onChange:function onChange(value){return _this.updateLightParams("shadowMapSize",value)},value:lightParams.shadowMapSize}))),/*#__PURE__*/React.createElement("tr",{key:"shadowBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:5,max:0.01,min:-0.01,onChange:function onChange(value){return _this.updateLightParams("shadowBias",value)},value:lightParams.shadowBias}))),/*#__PURE__*/React.createElement("tr",{key:"normalBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.normalBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,max:10,min:-10,onChange:function onChange(value){return _this.updateLightParams("normalBias",value)},value:lightParams.normalBias}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeNear"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeNear")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeNear",value)},value:lightParams.shadowVolumeNear}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeFar"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeFar")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeFar",value)},value:lightParams.shadowVolumeFar})))]:null)))});_defineProperty(_this,"toggleDayAnimation",function(){_this.setState(function(state){return{dayAnimation:!state.dayAnimation,timeAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.dayAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("day",(_this.state.lightParams.day+_this.state.dayStep/10)%365)},100)}})});_defineProperty(_this,"toggleTimeAnimation",function(){_this.setState(function(state){return{timeAnimation:!state.timeAnimation,dayAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.timeAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("time",(_this.state.lightParams.time+_this.state.timeStep/10)%1440)},100)}})});_defineProperty(_this,"renderSlider",function(key,min,max,step){var labelFormatter=arguments.length>4&&arguments[4]!==undefined?arguments[4]:undefined;var value=_this.state.lightParams[key];var parseValue=function parseValue(x){return Number.isInteger(step)?parseInt(x,10):parseFloat(x)};labelFormatter=labelFormatter!==null&&labelFormatter!==void 0?labelFormatter:function(x){return x.toFixed(-Math.log10(step))};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:max,min:min,onChange:function onChange(ev){return _this.updateLightParams(key,parseValue(ev.target.value))},step:step,type:"range",value:value}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider-label"},/*#__PURE__*/React.createElement("span",{style:{left:(value-min)*100/(max-min)+"%"}},labelFormatter(value))))});_defineProperty(_this,"updateLightParams",function(key,value){_this.setState(function(state){return{lightParams:_objectSpread(_objectSpread({},state.lightParams),{},_defineProperty({},key,value))}})});_defineProperty(_this,"configureShadows",function(sunLight,lightParams,shadowIntensityK){if(!lightParams.shadowsEnabled){_this.props.sceneContext.scene.renderer.shadowMap.enabled=false;sunLight.castShadow=false;return}var cameraHeight=_this.props.sceneContext.scene.view.camera.position.z;var targetHeight=_this.props.sceneContext.scene.view.controls.target.z;var volumeSize=Math.min(20000,Math.max(1000,cameraHeight-targetHeight));sunLight.shadow.camera.top=volumeSize;sunLight.shadow.camera.bottom=-volumeSize;sunLight.shadow.camera.left=-volumeSize;sunLight.shadow.camera.right=volumeSize;sunLight.shadow.camera.near=lightParams.shadowVolumeNear;sunLight.shadow.camera.far=lightParams.shadowVolumeFar;sunLight.shadow.camera.updateProjectionMatrix();sunLight.shadow.mapSize.set(lightParams.shadowMapSize,lightParams.shadowMapSize);sunLight.shadow.bias=lightParams.shadowBias;sunLight.shadow.normalBias=lightParams.normalBias;sunLight.shadow.intensity=lightParams.shadowIntensity*shadowIntensityK;_this.props.sceneContext.scene.renderer.shadowMap.enabled=true;sunLight.castShadow=true});_defineProperty(_this,"setLighting",function(){var sceneContext=_this.props.sceneContext;var lightParams=_this.state.lightParams;var ambientLight=sceneContext.getSceneObject("__ambientLight");var sunLight=sceneContext.getSceneObject("__sunLight");var moonLight=sceneContext.getSceneObject("__moonLight");var lightTarget=sceneContext.scene.view.controls.target.clone();lightTarget.z=0;// Compute azimuth / zenith and sun position
|
|
8
|
-
var date=new Date(new Date().getFullYear(),0,lightParams.day,Math.trunc(lightParams.time/60),lightParams.time%60);var latlon=CoordinatesUtils.reproject([lightTarget.x,lightTarget.y],sceneContext.mapCrs,"EPSG:4326");var sunPos=suncalc.getPosition(date,latlon[1],latlon[0]);var zenith=
|
|
9
|
-
var noonColor={r:1,g:0.98,b:0.98};var horizonColor={r:1,g:0.5,b:0.3};var
|
|
10
|
-
sceneContext.map.lighting.enabled=true;sceneContext.map.lighting.mode=lightParams.shadowsEnabled?MapLightingMode.LightBased:MapLightingMode.Hillshade;sceneContext.map.lighting.elevationLayersOnly=lightParams.lightElevationLayersOnly;sceneContext.map.lighting.hillshadeAzimuth=azimuth;sceneContext.map.lighting.hillshadeZenith=zenith;sceneContext.map.lighting.zFactor=lightParams.zFactor;sceneContext.scene.notifyChange(sceneContext.map);sceneContext.scene.renderer.shadowMap.type=lightParams.shadowType;ambientLight.intensity=ambientIntensity;sunLight.position.copy(sunLocalPos);sunLight.intensity=lightParams.sunLightIntensity*sunLightIntensityK;sunLight.color=sunColor;sunLight.target.position.copy(lightTarget);sunLight.updateMatrixWorld(true);sunLight.target.updateMatrixWorld(true);_this.configureShadows(sunLight,lightParams,shadowIntensityK);// NOTE: just a top-down light
|
|
11
|
-
moonLight.position.set(lightTarget.x,lightTarget.y,8000);moonLight.intensity=lightParams.moonLightIntensity*
|
|
7
|
+
*/import React from"react";import Sun from"@giro3d/giro3d/core/geographic/Sun.js";import{MapLightingMode}from"@giro3d/giro3d/entities/MapLightingOptions";import PropTypes from"prop-types";import suncalc from"suncalc";import{AmbientLight,BasicShadowMap,CameraHelper,DirectionalLight,DirectionalLightHelper,PCFShadowMap,PCFSoftShadowMap,VSMShadowMap}from"three";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import Icon from"../Icon";import SideBar from"../SideBar";import Input from"../widgets/Input";import NumberInput from"../widgets/NumberInput";import ToggleSwitch from"../widgets/ToggleSwitch";import"./style/Map3DLight.css";var Map3DLight=/*#__PURE__*/function(_React$Component){function Map3DLight(props){var _this;_classCallCheck(this,Map3DLight);_this=_callSuper(this,Map3DLight,[props]);_defineProperty(_this,"state",{showAdvanced:false,lightParams:{day:182,time:720,helpersVisible:false,moonLightIntensity:0.02,sunLightIntensity:3.5,zFactor:1,lightElevationLayersOnly:false,shadowsEnabled:true,shadowType:PCFShadowMap,shadowMapSize:4096,shadowBias:-0.0001,sunDistance:80000,normalBias:0,shadowIntensity:1,shadowVolumeNear:60000,shadowVolumeFar:100000},dayAnimation:false,dayAnimationSettings:false,dayStep:30,timeAnimation:false,timeAnimationSettings:false,timeStep:30});_defineProperty(_this,"onHide",function(){clearInterval(_this.animationInterval);_this.setState({dayAnimation:false,timeAnimation:false})});_defineProperty(_this,"renderBody",function(){var lightParams=_this.state.lightParams;var dateValue=new Date(new Date().getFullYear(),0,1+lightParams.day).toISOString().split("T")[0];var dateToDay=function dateToDay(date){var d=new Date(date+"T00:00:00");return(d-new Date(d.getFullYear(),0,0))/(1000*60*60*24)};var isLeapYear=function isLeapYear(year){return new Date(year,1,29).getDate()===29};var timeValue="".concat(String(Math.trunc(lightParams.time/60)).padStart(2,"0"),":").concat(String(Math.floor(lightParams.time%60)).padStart(2,"0"));var timeToMin=function timeToMin(time){var parts=time.split(":");return parseInt(parts[0],10)*60+parseInt(parts[1],10)};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.date")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.dayAnimation?"square":"triangle-right",onClick:_this.toggleDayAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:365+isLeapYear(),min:1,onChange:function onChange(ev){return _this.updateLightParams("day",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.day}),/*#__PURE__*/React.createElement(Input,{onChange:function onChange(value){return _this.updateLightParams("day",dateToDay(value))},type:"date",value:dateValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.dayAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{dayAnimationSettings:!state.dayAnimationSettings}})}})))),_this.state.dayAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(dayStep){return _this.setState({dayStep:dayStep})},suffix:" "+LocaleUtils.tr("maplight3d.dayspersec"),value:_this.state.dayStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.time")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.timeAnimation?"square":"triangle-right",onClick:_this.toggleTimeAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:1439,min:0,onChange:function onChange(ev){return _this.updateLightParams("time",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.time}),/*#__PURE__*/React.createElement(Input,{onChange:function onChange(value){return _this.updateLightParams("time",timeToMin(value))},type:"time",value:timeValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.timeAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{timeAnimationSettings:!state.timeAnimationSettings}})}})))),_this.state.timeAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(timeStep){return _this.setState({timeStep:timeStep})},suffix:" "+LocaleUtils.tr("maplight3d.minspersec"),value:_this.state.timeStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.sunLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("sunLightIntensity",0,10,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.moonLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("moonLightIntensity",0,0.5,0.01))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadows")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.shadowsEnabled,onChange:function onChange(value){return _this.updateLightParams("shadowsEnabled",value)}}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowintensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("shadowIntensity",0,2,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{className:"maplight3d-advanced",colSpan:"2"},/*#__PURE__*/React.createElement("label",null,/*#__PURE__*/React.createElement("input",{checked:_this.state.showAdvanced,onChange:function onChange(ev){return _this.setState(function(state){return{showAdvanced:!state.showAdvanced}})},type:"checkbox"})," ",LocaleUtils.tr("maplight3d.showadvanced")))),_this.state.showAdvanced?[/*#__PURE__*/React.createElement("tr",{key:"helpersVisible"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.helpersVisible")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.helpersVisible,onChange:function onChange(value){return _this.updateLightParams("helpersVisible",value)}}))),/*#__PURE__*/React.createElement("tr",{key:"zFactor"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.zFactor")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("input",{max:10,min:0,onChange:function onChange(ev){return _this.updateLightParams("zFactor",ev.target.value)},step:0.1,type:"range",value:lightParams.zFactor}))),/*#__PURE__*/React.createElement("tr",{key:"shadowType"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowType")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.updateLightParams("shadowType",parseInt(ev.target.value,10))},value:lightParams.shadowType},/*#__PURE__*/React.createElement("option",{value:BasicShadowMap},"BasicShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFShadowMap},"PCFShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFSoftShadowMap},"PCFSoftShadowMap"),/*#__PURE__*/React.createElement("option",{value:VSMShadowMap},"VSMShadowMap")))),/*#__PURE__*/React.createElement("tr",{key:"shadowMapSize"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowMapSize")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:8192,min:64,onChange:function onChange(value){return _this.updateLightParams("shadowMapSize",value)},value:lightParams.shadowMapSize}))),/*#__PURE__*/React.createElement("tr",{key:"shadowBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:5,max:0.01,min:-0.01,onChange:function onChange(value){return _this.updateLightParams("shadowBias",value)},value:lightParams.shadowBias}))),/*#__PURE__*/React.createElement("tr",{key:"normalBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.normalBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,max:10,min:-10,onChange:function onChange(value){return _this.updateLightParams("normalBias",value)},value:lightParams.normalBias}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeNear"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeNear")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeNear",value)},value:lightParams.shadowVolumeNear}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeFar"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeFar")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeFar",value)},value:lightParams.shadowVolumeFar})))]:null)))});_defineProperty(_this,"toggleDayAnimation",function(){_this.setState(function(state){return{dayAnimation:!state.dayAnimation,timeAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.dayAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("day",(_this.state.lightParams.day+_this.state.dayStep/10)%365)},100)}})});_defineProperty(_this,"toggleTimeAnimation",function(){_this.setState(function(state){return{timeAnimation:!state.timeAnimation,dayAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.timeAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("time",(_this.state.lightParams.time+_this.state.timeStep/10)%1440)},100)}})});_defineProperty(_this,"renderSlider",function(key,min,max,step){var labelFormatter=arguments.length>4&&arguments[4]!==undefined?arguments[4]:undefined;var value=_this.state.lightParams[key];var parseValue=function parseValue(x){return Number.isInteger(step)?parseInt(x,10):parseFloat(x)};labelFormatter=labelFormatter!==null&&labelFormatter!==void 0?labelFormatter:function(x){return x.toFixed(-Math.log10(step))};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:max,min:min,onChange:function onChange(ev){return _this.updateLightParams(key,parseValue(ev.target.value))},step:step,type:"range",value:value}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider-label"},/*#__PURE__*/React.createElement("span",{style:{left:(value-min)*100/(max-min)+"%"}},labelFormatter(value))))});_defineProperty(_this,"updateLightParams",function(key,value){_this.setState(function(state){return{lightParams:_objectSpread(_objectSpread({},state.lightParams),{},_defineProperty({},key,value))}})});_defineProperty(_this,"configureShadows",function(sunLight,lightParams,shadowIntensityK){if(!lightParams.shadowsEnabled){_this.props.sceneContext.scene.renderer.shadowMap.enabled=false;sunLight.castShadow=false;return}var cameraHeight=_this.props.sceneContext.scene.view.camera.position.z;var targetHeight=_this.props.sceneContext.scene.view.controls.target.z;var volumeSize=Math.min(20000,Math.max(1000,cameraHeight-targetHeight));sunLight.shadow.camera.top=volumeSize;sunLight.shadow.camera.bottom=-volumeSize;sunLight.shadow.camera.left=-volumeSize;sunLight.shadow.camera.right=volumeSize;sunLight.shadow.camera.near=lightParams.shadowVolumeNear;sunLight.shadow.camera.far=lightParams.shadowVolumeFar;sunLight.shadow.camera.updateProjectionMatrix();sunLight.shadow.mapSize.set(lightParams.shadowMapSize,lightParams.shadowMapSize);sunLight.shadow.bias=lightParams.shadowBias;sunLight.shadow.normalBias=lightParams.normalBias;sunLight.shadow.intensity=lightParams.shadowIntensity*shadowIntensityK;_this.props.sceneContext.scene.renderer.shadowMap.enabled=true;sunLight.castShadow=true});_defineProperty(_this,"setLighting",function(){var sceneContext=_this.props.sceneContext;var lightParams=_this.state.lightParams;var ambientLight=sceneContext.getSceneObject("__ambientLight");var sunLight=sceneContext.getSceneObject("__sunLight");var moonLight=sceneContext.getSceneObject("__moonLight");var lightTarget=sceneContext.scene.view.controls.target.clone();lightTarget.z=0;// Compute azimuth / zenith and sun position
|
|
8
|
+
var date=new Date(new Date().getFullYear(),0,lightParams.day,Math.trunc(lightParams.time/60),lightParams.time%60);var latlon=CoordinatesUtils.reproject([lightTarget.x,lightTarget.y],sceneContext.mapCrs,"EPSG:4326");var sunPos=suncalc.getPosition(date,latlon[1],latlon[0]);var zenith=90-sunPos.altitude/Math.PI*180;var azimuth=180+sunPos.azimuth/Math.PI*180;var sunLocalPos=Sun.getLocalPosition({point:lightTarget,zenith:Math.min(90,zenith),azimuth:azimuth,distance:lightParams.sunDistance});// Compute dynamic params
|
|
9
|
+
var noonColor={r:1,g:0.98,b:0.98};var horizonColor={r:1,g:0.5,b:0.3};var duskColor={r:0.15,g:0.22,b:0.35};var lerpColor=function lerpColor(a,b,t){return{r:(1-t)*a.r+t*b.r,g:(1-t)*a.g+t*b.g,b:(1-t)*a.b+t*b.b}};var sunColor=noonColor;var ambientIntensity=0;var shadowIntensityK=0;var sunLightIntensityK=Math.min(1,(98-Math.min(98,zenith))/16);var moonLightIntensityK=1-Math.min(1,(90-Math.min(90,zenith))/16);if(zenith<90){var k=Math.pow(zenith/90,3);sunColor=lerpColor(noonColor,horizonColor,k);ambientIntensity=(1-zenith/90)*1.5;shadowIntensityK=(1-k)*0.9+0.2*k}else if(zenith<102){var _k=(zenith-90)/12;sunColor=lerpColor(horizonColor,duskColor,_k);shadowIntensityK=0.2*(1-_k)}// Set lighting params
|
|
10
|
+
sceneContext.map.lighting.enabled=true;sceneContext.map.lighting.mode=lightParams.shadowsEnabled?MapLightingMode.LightBased:MapLightingMode.Hillshade;sceneContext.map.lighting.elevationLayersOnly=lightParams.lightElevationLayersOnly;sceneContext.map.lighting.hillshadeAzimuth=azimuth;sceneContext.map.lighting.hillshadeZenith=Math.min(90,zenith);sceneContext.map.lighting.zFactor=lightParams.zFactor;sceneContext.scene.notifyChange(sceneContext.map);sceneContext.scene.renderer.shadowMap.type=lightParams.shadowType;ambientLight.intensity=ambientIntensity;sunLight.position.copy(sunLocalPos);sunLight.intensity=lightParams.sunLightIntensity*sunLightIntensityK;sunLight.color=sunColor;sunLight.target.position.copy(lightTarget);sunLight.updateMatrixWorld(true);sunLight.target.updateMatrixWorld(true);_this.configureShadows(sunLight,lightParams,shadowIntensityK);// NOTE: just a top-down light
|
|
11
|
+
moonLight.position.set(lightTarget.x,lightTarget.y,8000);moonLight.intensity=lightParams.moonLightIntensity*moonLightIntensityK;moonLight.target.position.copy(lightTarget);moonLight.updateMatrixWorld(true);moonLight.target.updateMatrixWorld(true);if(lightParams.helpersVisible){var sunLightHelper=sceneContext.getSceneObject("__sunLightHelper");sunLightHelper.update();sunLightHelper.updateMatrixWorld(true);var shadowCameraHelper=sceneContext.getSceneObject("__shadowCameraHelper");shadowCameraHelper.update();shadowCameraHelper.updateMatrixWorld(true)}sceneContext.scene.notifyChange()});_this.state.lightParams.day=props.sceneContext.options.defaultDay;var _parts=props.sceneContext.options.defaultTime.split(":").slice(0,2).map(Number);_this.state.lightParams.time=_parts[0]*60+_parts[1];return _this}_inherits(Map3DLight,_React$Component);return _createClass(Map3DLight,[{key:"componentDidMount",value:function componentDidMount(){this.animationInterval=null;this.componentDidUpdate({})}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _prevProps$sceneConte;if(this.props.sceneContext.scene!==((_prevProps$sceneConte=prevProps.sceneContext)===null||_prevProps$sceneConte===void 0?void 0:_prevProps$sceneConte.scene)){var ambientLight=new AmbientLight(16777215,1);this.props.sceneContext.addSceneObject("__ambientLight",ambientLight);var sunLight=new DirectionalLight(16777215,this.state.sunLightIntensity);this.props.sceneContext.addSceneObject("__sunLight",sunLight);var moonLight=new DirectionalLight(16777215,this.state.moonLightIntensity);this.props.sceneContext.addSceneObject("__moonLight",moonLight);if(this.state.lightParams.helpersVisible){var sunLightHelper=new DirectionalLightHelper(sunLight,200,"white");this.props.sceneContext.addSceneObject("__sunLightHelper",sunLightHelper);var shadowCameraHelper=new CameraHelper(sunLight.shadow.camera);this.props.sceneContext.addSceneObject("__shadowCameraHelper",shadowCameraHelper)}this.props.sceneContext.scene.view.controls.addEventListener("change",this.setLighting);this.setLighting()}else if(this.state.lightParams!==prevState.lightParams){if(this.state.lightParams.helpersVisible&&!prevState.lightParams.helpersVisible){var _sunLight=this.props.sceneContext.getSceneObject("__sunLight");var _sunLightHelper=new DirectionalLightHelper(_sunLight,200,"white");this.props.sceneContext.addSceneObject("__sunLightHelper",_sunLightHelper);var _shadowCameraHelper=new CameraHelper(_sunLight.shadow.camera);this.props.sceneContext.addSceneObject("__shadowCameraHelper",_shadowCameraHelper)}else if(prevState.lightParams.helpersVisible&&!this.state.lightParams.helpersVisible){this.props.sceneContext.removeSceneObject("__sunLightHelper");this.props.sceneContext.removeSceneObject("__shadowCameraHelper")}this.setLighting()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearInterval(this.lightPositionInterval);this.props.sceneContext.removeSceneObject("__sunLight");this.props.sceneContext.removeSceneObject("__moonLight");this.props.sceneContext.removeSceneObject("__sunLightHelper");this.props.sceneContext.removeSceneObject("__shadowCameraHelper")}},{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement(SideBar,{icon:"light",id:"MapLight3D",onHide:this.onHide,title:LocaleUtils.tr("appmenu.items.MapLight3D"),width:"25em"},function(){return{body:_this2.renderBody()}})}}])}(React.Component);_defineProperty(Map3DLight,"propTypes",{sceneContext:PropTypes.object});export{Map3DLight as default};
|
|
@@ -5,7 +5,8 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
|
|
|
5
5
|
* This source code is licensed under the BSD-style license found in the
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
7
7
|
*/import React from"react";import{connect}from"react-redux";import classNames from"classnames";import PropTypes from"prop-types";import{Vector3}from"three";import ConfigUtils from"../../utils/ConfigUtils";import{UrlParams}from"../../utils/PermaLinkUtils";import Icon from"../Icon";import FirstPersonControls3D from"./utils/FirstPersonControls3D";import OrbitControls3D from"./utils/OrbitControls3D";import"./style/MapControls3D.css";// FIXME: camera.fov is 30, but in reality seems to be 50 (as would be the threejs default)
|
|
8
|
-
var CAMERA_FOV=50;var MapControls3D=/*#__PURE__*/function(_React$Component){function MapControls3D(){var _this;_classCallCheck(this,MapControls3D);
|
|
8
|
+
var CAMERA_FOV=50;var MapControls3D=/*#__PURE__*/function(_React$Component){function MapControls3D(props){var _this;_classCallCheck(this,MapControls3D);_this=_callSuper(this,MapControls3D,[props]);_defineProperty(_this,"state",{pickingFirstPerson:false,firstPerson:false});_defineProperty(_this,"unload",function(el){// componentWillUnmount is called too early, so do cleanup when the element is actually removed
|
|
9
|
+
if(!el){_this.controls.removeEventListener("change",_this.updateControlsTarget);_this.fpcontrols.removeEventListener("change",_this.updateFpUrlParams);if(_this.state.firstPerson){_this.fpcontrols.disconnect()}else{_this.controls.disconnect()}_this.props.sceneContext.scene.domElement.removeEventListener("dblclick",_this.switchToFirstPersonView)}});_defineProperty(_this,"switchToFirstPersonView",function(ev){// Don't do anything if a task is set, may interfere
|
|
9
10
|
if(!_this.props.currentTask&&!_this.state.firstPerson){_this.setupFirstPerson(ev)}});_defineProperty(_this,"toggleFirstPersonControls",function(){if(_this.state.firstPerson){_this.leaveFirstPerson()}else if(_this.state.pickingFirstPerson){_this.props.sceneContext.scene.domElement.removeEventListener("click",_this.setupFirstPerson);_this.props.sceneContext.scene.domElement.style.cursor="";_this.setState({pickingFirstPerson:false})}else{_this.props.sceneContext.scene.domElement.addEventListener("click",_this.setupFirstPerson,{once:true});var cursor=ConfigUtils.getAssetsPath()+"/img/person.svg";_this.props.sceneContext.scene.domElement.style.cursor="url(".concat(cursor,"), pointer");_this.setState({pickingFirstPerson:true})}});_defineProperty(_this,"setupFirstPerson",function(ev){_this.props.sceneContext.scene.domElement.style.cursor="";var rect=ev.target.getBoundingClientRect();var mouseX=(ev.clientX-rect.left)/rect.width*2-1;var mouseY=-((ev.clientY-rect.top)/rect.height)*2+1;var intersection=_this.props.sceneContext.getSceneIntersection(mouseX,mouseY,false);if(!intersection){return}var pos=intersection.point;_this.props.sceneContext.getTerrainHeightFromDTM([pos.x,pos.y]).then(function(z){var camerapos=new Vector3(pos.x,pos.y,z+_this.fpcontrols.personHeight);var targetpos=new Vector3(pos.x,pos.y+300,z+_this.fpcontrols.personHeight);_this.controls.animateTo(camerapos,targetpos,0,function(){_this.controls.disconnect();_this.fpcontrols.connect(_this.props.sceneContext);_this.fpcontrols.setView(camerapos,new Vector3(0,1,0));_this.setState({firstPerson:true,pickingFirstPerson:false})})})});_defineProperty(_this,"leaveFirstPerson",function(){if(_this.state.firstPerson){_this.setState({firstPerson:false},function(){// Need to ensure this.state.firstPerson is false to avoid endless loop
|
|
10
11
|
var camerapos=_this.props.sceneContext.scene.view.camera.position;_this.fpcontrols.disconnect();_this.controls.connect(_this.props.sceneContext);_this.controls.setView(camerapos,new Vector3().addVectors(camerapos,_this.fpcontrols.lookAt));var bounds=[camerapos.x-750,camerapos.y-750,camerapos.x+750,camerapos.y+750];_this.setViewToExtent(bounds)})}});_defineProperty(_this,"home",function(){var extent=_this.props.sceneContext.map.extent;var bounds=[extent.west,extent.south,extent.east,extent.north];_this.setViewToExtent(bounds)});_defineProperty(_this,"setViewToExtent",function(bounds){var _this$props$sceneCont;var angle=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;_this.leaveFirstPerson();var center={x:0.5*(bounds[0]+bounds[2]),y:0.5*(bounds[1]+bounds[3])};center.z=(_this$props$sceneCont=_this.props.sceneContext.getTerrainHeightFromMap([center.x,center.y]))!==null&&_this$props$sceneCont!==void 0?_this$props$sceneCont:0;// Camera height to width bbox width
|
|
11
|
-
var fov=CAMERA_FOV/180*Math.PI;var cameraHeight=(bounds[2]-bounds[0])/(2*Math.tan(fov/2));var camerapos=new Vector3(center.x,center.y,center.z+cameraHeight);var target=new Vector3(center.x,center.y,center.z);_this.controls.animateTo(camerapos,target,angle)});_defineProperty(_this,"pan",function(ev,dx,dy){var panInterval=setInterval(function(){_this.props.sceneContext.scene.view.controls.panView(dx,dy)},50);ev.view.addEventListener("pointerup",function(){clearInterval(panInterval)},{once:true})});_defineProperty(_this,"tilt",function(ev,azimuth,polar){var tiltInterval=setInterval(function(){_this.props.sceneContext.scene.view.controls.tiltView(azimuth,polar)},50);ev.view.addEventListener("pointerup",function(){clearInterval(tiltInterval)},{once:true})});_defineProperty(_this,"resetTilt",function(){var camerapos=_this.props.sceneContext.scene.view.camera.position;if(_this.state.firstPerson){var newLookAt=_this.fpcontrols.lookAt.clone();newLookAt.z=0;_this.fpcontrols.setView(camerapos,newLookAt.normalize())}else{var target=_this.controls.target;var newcamerapos=new Vector3(target.x,target.y,target.distanceTo(camerapos));_this.controls.animateTo(newcamerapos,target,0)}});_defineProperty(_this,"zoom",function(ev,delta){var zoomInterval=setInterval(function(){var camerapos=_this.props.sceneContext.scene.view.camera.position;var target=_this.controls.target;var k=Math.min(150,Math.sqrt(target.distanceTo(camerapos)));_this.props.sceneContext.scene.view.controls.zoomView(delta*k)},50);ev.view.addEventListener("pointerup",function(){clearInterval(zoomInterval)},{once:true})});_defineProperty(_this,"updateUrlParams",function(){var cpos=_this.props.sceneContext.scene.view.camera.position;var tpos=_this.controls.target;UrlParams.updateParams({v3d:[cpos.x,cpos.y,cpos.z,tpos.x,tpos.y,tpos.z,0].map(function(v){return v.toFixed(1)}).join(",")});_this.props.onCameraChanged([tpos.x,tpos.y,tpos.z],[cpos.x,cpos.y,cpos.z],CAMERA_FOV)});_defineProperty(_this,"updateFpUrlParams",function(){var cpos=_this.fpcontrols.target;var lkat=_this.fpcontrols.lookAt;var h=_this.fpcontrols.personHeight;UrlParams.updateParams({v3d:[cpos.x,cpos.y,cpos.z,lkat.x,lkat.y,lkat.z,h].map(function(v){return v.toFixed(1)}).join(",")});_this.props.onCameraChanged([cpos.x,cpos.y,cpos.z],null)});_defineProperty(_this,"restoreView",function(viewState){if(viewState.camera&&viewState.target){var camera=_construct(Vector3,_toConsumableArray(viewState.camera));var target=_construct(Vector3,_toConsumableArray(viewState.target));if(viewState.personHeight>0){_this.controls.disconnect();_this.fpcontrols.connect(_this.props.sceneContext);_this.fpcontrols.setView(camera,target,viewState.personHeight);_this.setState({firstPerson:true})}else{_this.controls.setView(camera,target)}}});
|
|
12
|
+
var fov=CAMERA_FOV/180*Math.PI;var cameraHeight=(bounds[2]-bounds[0])/(2*Math.tan(fov/2));var camerapos=new Vector3(center.x,center.y,center.z+cameraHeight);var target=new Vector3(center.x,center.y,center.z);_this.controls.animateTo(camerapos,target,angle)});_defineProperty(_this,"pan",function(ev,dx,dy){var panInterval=setInterval(function(){_this.props.sceneContext.scene.view.controls.panView(dx,dy)},50);ev.view.addEventListener("pointerup",function(){clearInterval(panInterval)},{once:true})});_defineProperty(_this,"tilt",function(ev,azimuth,polar){var tiltInterval=setInterval(function(){_this.props.sceneContext.scene.view.controls.tiltView(azimuth,polar)},50);ev.view.addEventListener("pointerup",function(){clearInterval(tiltInterval)},{once:true})});_defineProperty(_this,"resetTilt",function(){var camerapos=_this.props.sceneContext.scene.view.camera.position;if(_this.state.firstPerson){var newLookAt=_this.fpcontrols.lookAt.clone();newLookAt.z=0;_this.fpcontrols.setView(camerapos,newLookAt.normalize())}else{var target=_this.controls.target;var newcamerapos=new Vector3(target.x,target.y,target.distanceTo(camerapos));_this.controls.animateTo(newcamerapos,target,0)}});_defineProperty(_this,"zoom",function(ev,delta){var zoomInterval=setInterval(function(){var camerapos=_this.props.sceneContext.scene.view.camera.position;var target=_this.controls.target;var k=Math.min(150,Math.sqrt(target.distanceTo(camerapos)));_this.props.sceneContext.scene.view.controls.zoomView(delta*k)},50);ev.view.addEventListener("pointerup",function(){clearInterval(zoomInterval)},{once:true})});_defineProperty(_this,"updateUrlParams",function(){var cpos=_this.props.sceneContext.scene.view.camera.position;var tpos=_this.controls.target;UrlParams.updateParams({v3d:[cpos.x,cpos.y,cpos.z,tpos.x,tpos.y,tpos.z,0].map(function(v){return v.toFixed(1)}).join(",")});_this.props.onCameraChanged([tpos.x,tpos.y,tpos.z],[cpos.x,cpos.y,cpos.z],CAMERA_FOV)});_defineProperty(_this,"updateFpUrlParams",function(){var cpos=_this.fpcontrols.target;var lkat=_this.fpcontrols.lookAt;var h=_this.fpcontrols.personHeight;UrlParams.updateParams({v3d:[cpos.x,cpos.y,cpos.z,lkat.x,lkat.y,lkat.z,h].map(function(v){return v.toFixed(1)}).join(",")});_this.props.onCameraChanged([cpos.x,cpos.y,cpos.z],null)});_defineProperty(_this,"restoreView",function(viewState){if(viewState.camera&&viewState.target){var camera=_construct(Vector3,_toConsumableArray(viewState.camera));var target=_construct(Vector3,_toConsumableArray(viewState.target));if(viewState.personHeight>0){_this.controls.disconnect();_this.fpcontrols.connect(_this.props.sceneContext);_this.fpcontrols.setView(camera,target,viewState.personHeight);_this.setState({firstPerson:true})}else{_this.controls.setView(camera,target)}}});var sceneElement=props.sceneContext.scene.domElement;sceneElement.tabIndex=0;_this.controls=new OrbitControls3D(props.sceneContext.scene.view.camera);_this.fpcontrols=new FirstPersonControls3D(props.sceneContext.scene.view.camera);_this.controls.connect(props.sceneContext);var targetPos=props.sceneContext.scene.view.camera.position.clone();targetPos.z=0;_this.controls.target=targetPos;_this.controls.addEventListener("change",_this.updateUrlParams);_this.fpcontrols.addEventListener("change",_this.updateFpUrlParams);sceneElement.addEventListener("dblclick",_this.switchToFirstPersonView);props.onControlsSet(_this);_this.updateUrlParams();return _this}_inherits(MapControls3D,_React$Component);return _createClass(MapControls3D,[{key:"render",value:function render(){var _this2=this;var firstPersonButtonClasses=classNames({"map3d-firstperson-button":true,"map3d-firstperson-button-active":this.state.firstPerson});return[this.props.children,/*#__PURE__*/React.createElement("div",{className:"map3d-nav",key:"MapControls3D",ref:this.unload},/*#__PURE__*/React.createElement("div",{className:"map3d-nav-pan",key:"MapPanWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-up",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,0,1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-left",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,-1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"home",onClick:function onClick(){return _this2.home()}}),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-right",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-down",onPointerDown:function onPointerDown(ev){return _this2.pan(ev,0,-1)}}),/*#__PURE__*/React.createElement("span",null)),/*#__PURE__*/React.createElement("div",{className:"map3d-nav-rotate",key:"MapRotateWidget"},/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-up",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,0,0.1)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-left",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,0.1,0)}}),/*#__PURE__*/React.createElement(Icon,{icon:"point",onClick:function onClick(){return _this2.resetTilt()}}),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-right",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,-0.1,0)}}),/*#__PURE__*/React.createElement("span",null),/*#__PURE__*/React.createElement(Icon,{icon:"tilt-down",onPointerDown:function onPointerDown(ev){return _this2.tilt(ev,0,-0.1)}}),/*#__PURE__*/React.createElement("span",null)),!this.state.firstPerson?/*#__PURE__*/React.createElement("div",{className:"map3d-nav-zoom"},/*#__PURE__*/React.createElement("div",{onPointerDown:function onPointerDown(ev){return _this2.zoom(ev,+1)}},/*#__PURE__*/React.createElement(Icon,{icon:"plus"})),/*#__PURE__*/React.createElement("div",{onPointerDown:function onPointerDown(ev){return _this2.zoom(ev,-1)}},/*#__PURE__*/React.createElement(Icon,{icon:"minus"}))):null,/*#__PURE__*/React.createElement("div",{className:firstPersonButtonClasses,key:"FirstPersonButton",onClick:this.toggleFirstPersonControls},/*#__PURE__*/React.createElement(Icon,{icon:"person"})))]}}])}(React.Component);_defineProperty(MapControls3D,"propTypes",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),currentTask:PropTypes.string,onCameraChanged:PropTypes.func,onControlsSet:PropTypes.func,sceneContext:PropTypes.object});export default connect(function(state){return{currentTask:state.task.id}},{})(MapControls3D);
|
|
@@ -4,10 +4,8 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
|
|
|
4
4
|
*
|
|
5
5
|
* This source code is licensed under the BSD-style license found in the
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
7
|
-
*/import React from"react";import PropTypes from"prop-types";import{Color,Group,Vector3}from"three"
|
|
8
|
-
import{CSG}from"three-csg-ts";import LocaleUtils from"../../../utils/LocaleUtils";import Icon from"../../Icon";import ButtonBar from"../../widgets/ButtonBar";import ColorButton from"../../widgets/ColorButton";import TextInput from"../../widgets/TextInput";import{updateObjectLabel}from"../utils/MiscUtils3D";import NumericInput3D from"./NumericInput3D";// Temporary downstream copy of three/addons/controls/TransformControls
|
|
9
|
-
// See https://github.com/mrdoob/three.js/pull/31346
|
|
10
|
-
import{TransformControls}from"./TransformControls";var GroupSelection=/*#__PURE__*/function(_Group){function GroupSelection(){var _this;_classCallCheck(this,GroupSelection);_this=_callSuper(this,GroupSelection);_defineProperty(_this,"hasObject",function(object){return _this.children.indexOf(object)>=0});_defineProperty(_this,"addToSelection",function(object){_this.children.forEach(function(child){child.position.add(_this.position)});_this.add(object);object.userData.originalColor=object.material.color.clone();object.material.color.set(16711680);_this.recomputePosition()});_defineProperty(_this,"removeFromSelection",function(object){_this.parent.attach(object);object.material.color.set(object.userData.originalColor);delete object.userData.originalColor;_this.children.forEach(function(child){child.position.add(_this.position)});_this.recomputePosition()});_defineProperty(_this,"dissolve",function(){if(_this.parent===null){// Group has already been removed from scene
|
|
7
|
+
*/import React from"react";import PropTypes from"prop-types";import{Color,Group,Vector3}from"three";import{TransformControls}from"three/addons/controls/TransformControls";import{CSG}from"three-csg-ts";import LocaleUtils from"../../../utils/LocaleUtils";import Icon from"../../Icon";import ButtonBar from"../../widgets/ButtonBar";import ColorButton from"../../widgets/ColorButton";import TextInput from"../../widgets/TextInput";import{updateObjectLabel}from"../utils/MiscUtils3D";import NumericInput3D from"./NumericInput3D";var GroupSelection=/*#__PURE__*/function(_Group){function GroupSelection(){var _this;_classCallCheck(this,GroupSelection);_this=_callSuper(this,GroupSelection);_defineProperty(_this,"hasObject",function(object){return _this.children.indexOf(object)>=0});_defineProperty(_this,"addToSelection",function(object){_this.children.forEach(function(child){child.position.add(_this.position)});_this.add(object);object.userData.originalColor=object.material.color.clone();object.material.color.set(16711680);_this.recomputePosition()});_defineProperty(_this,"removeFromSelection",function(object){_this.parent.attach(object);object.material.color.set(object.userData.originalColor);delete object.userData.originalColor;_this.children.forEach(function(child){child.position.add(_this.position)});_this.recomputePosition()});_defineProperty(_this,"dissolve",function(){if(_this.parent===null){// Group has already been removed from scene
|
|
11
8
|
return}while(_this.children.length){var object=_this.children.pop();object.material.color.set(object.userData.originalColor);delete object.userData.originalColor;_this.parent.attach(object)}_this.removeFromParent()});_defineProperty(_this,"recomputePosition",function(){if(_this.children.length===0){_this.position.set(0,0,0)}else{var center=new Vector3;_this.children.forEach(function(child){center.add(child.position)});center.divideScalar(_this.children.length);_this.position.copy(center);_this.children.forEach(function(child){child.position.sub(_this.position)});_this.updateMatrixWorld(true)}});_this.isGroupSelection=true;return _this}_inherits(GroupSelection,_Group);return _createClass(GroupSelection,[{key:"clone",value:function clone(){var clone=_superPropGet(GroupSelection,"clone",this,3)([]);clone.isGroupSelection=true;return clone}}])}(Group);var EditTool3D=/*#__PURE__*/function(_React$Component){function EditTool3D(){var _this2;_classCallCheck(this,EditTool3D);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this2=_callSuper(this,EditTool3D,[].concat(args));_defineProperty(_this2,"state",{mode:"translate",numericInput:false,selectCount:0,csgBackup:null,label:""});_defineProperty(_this2,"toolButtonClicked",function(key){if(key==="NumericInput"){_this2.toggleNumericInput()}else if(key==="clone"){_this2.cloneSelectedObject()}});_defineProperty(_this2,"selectShapeOnRelease",function(ev){if(ev.button===0&&!_this2.transformControls.dragging){var renderer=_this2.props.sceneContext.scene.renderer;renderer.domElement.addEventListener("pointerup",_this2.selectShape,{once:true});renderer.domElement.addEventListener("pointermove",function(){renderer.domElement.removeEventListener("pointerup",_this2.selectShape)})}});_defineProperty(_this2,"selectShape",function(ev){var rect=ev.target.getBoundingClientRect();var x=(ev.clientX-rect.left)/rect.width*2-1;var y=-((ev.clientY-rect.top)/rect.height)*2+1;var intersection=_this2.props.sceneContext.getSceneIntersection(x,y);if(intersection){// Check if closest (first) intersected object is within the current draw group
|
|
12
|
-
var object=intersection.object;var drawGroup=_this2.props.sceneContext.getSceneObject(_this2.props.drawGroupId);for(var parent=object.parent;parent;parent=parent.parent){if(parent===drawGroup){if(ev.ctrlKey&&_this2.props.selectedObject){_this2.addRemoveFromSelection(object)}else{_this2.dissolveSelectionGroup();_this2.props.objectPicked(object)}return}}}if(!ev.ctrlKey){_this2.dissolveSelectionGroup();_this2.props.objectPicked(null)}});_defineProperty(_this2,"addRemoveFromSelection",function(object){if(_this2.props.selectedObject===object){_this2.props.objectPicked(null)}else if(_this2.props.selectedObject.isGroupSelection){if(_this2.props.selectedObject.hasObject(object)){_this2.props.selectedObject.removeFromSelection(object);if(_this2.props.selectedObject.children.length===1){var child=_this2.props.selectedObject.children[0];_this2.props.selectedObject.dissolve();_this2.props.objectPicked(child)}}else{_this2.props.selectedObject.addToSelection(object)}_this2.setState({selectCount:_this2.props.selectedObject.children.length});_this2.updateTransformHelper()}else{var groupSelection=new GroupSelection;object.parent.add(groupSelection);groupSelection.addToSelection(object);if(_this2.props.selectedObject&&_this2.props.selectedObject!==object){groupSelection.addToSelection(_this2.props.selectedObject)}_this2.props.objectPicked(groupSelection)}});_defineProperty(_this2,"dissolveSelectionGroup",function(){var _this2$props$selected;if((_this2$props$selected=_this2.props.selectedObject)!==null&&_this2$props$selected!==void 0&&_this2$props$selected.isGroupSelection){_this2.props.selectedObject.dissolve()}});_defineProperty(_this2,"updateTransformHelper",function(){_this2.transformControls.getHelper().updateMatrixWorld();_this2.props.sceneContext.scene.notifyChange()});_defineProperty(_this2,"
|
|
13
|
-
var offset=result.geometry.boundingBox.getCenter(new Vector3);offset.applyQuaternion(result.quaternion);result.position.add(offset);result.geometry.center();_this2.props.objectPicked(result)}});_defineProperty(_this2,"undoCsgOperation",function(){var parent=_this2.props.selectedObject.parent;var children=_this2.state.csgBackup;parent.attach(children[0]);parent.attach(children[1]);_this2.props.selectedObject.removeFromParent();var group=new GroupSelection;group.addToSelection(children[0]);group.addToSelection(children[1]);parent.add(group);_this2.props.objectPicked(group)});_defineProperty(_this2,"clearCsgBackup",function(){_this2.setState({csgBackup:null})});_defineProperty(_this2,"setLabel",function(text){_this2.setState({label:text});_this2.props.selectedObject.userData.label=text;updateObjectLabel(_this2.props.selectedObject,_this2.props.sceneContext);_this2.props.sceneContext.scene.notifyChange(_this2.props.selectedObject)});_defineProperty(_this2,"cloneSelectedObject",function(){if(_this2.props.selectedObject){var clonedObject=_this2.deepClone(_this2.props.selectedObject);clonedObject.position.x+=10;clonedObject.position.y+=10;clonedObject.updateMatrixWorld();_this2.props.selectedObject.parent.add(clonedObject);_this2.props.objectPicked(clonedObject)}});_defineProperty(_this2,"deepClone",function(object){var clone=object.clone(false);if(object.geometry){clone.geometry=object.geometry.clone()}if(object.material){if(Array.isArray(object.material)){clone.material=object.material.map(function(mat){return mat.clone()})}else{clone.material=object.material.clone()}}object.children.forEach(function(child){clone.add(_this2.deepClone(child))});return clone});
|
|
9
|
+
var object=intersection.object;var drawGroup=_this2.props.sceneContext.getSceneObject(_this2.props.drawGroupId);for(var parent=object.parent;parent;parent=parent.parent){if(parent===drawGroup){if(ev.ctrlKey&&_this2.props.selectedObject){_this2.addRemoveFromSelection(object)}else{_this2.dissolveSelectionGroup();_this2.props.objectPicked(object)}return}}}if(!ev.ctrlKey){_this2.dissolveSelectionGroup();_this2.props.objectPicked(null)}});_defineProperty(_this2,"addRemoveFromSelection",function(object){if(_this2.props.selectedObject===object){_this2.props.objectPicked(null)}else if(_this2.props.selectedObject.isGroupSelection){if(_this2.props.selectedObject.hasObject(object)){_this2.props.selectedObject.removeFromSelection(object);if(_this2.props.selectedObject.children.length===1){var child=_this2.props.selectedObject.children[0];_this2.props.selectedObject.dissolve();_this2.props.objectPicked(child)}}else{_this2.props.selectedObject.addToSelection(object)}_this2.setState({selectCount:_this2.props.selectedObject.children.length});_this2.updateTransformHelper()}else{var groupSelection=new GroupSelection;object.parent.add(groupSelection);groupSelection.addToSelection(object);if(_this2.props.selectedObject&&_this2.props.selectedObject!==object){groupSelection.addToSelection(_this2.props.selectedObject)}_this2.props.objectPicked(groupSelection)}});_defineProperty(_this2,"dissolveSelectionGroup",function(){var _this2$props$selected;if((_this2$props$selected=_this2.props.selectedObject)!==null&&_this2$props$selected!==void 0&&_this2$props$selected.isGroupSelection){_this2.props.selectedObject.dissolve()}});_defineProperty(_this2,"updateTransformHelper",function(){_this2.transformControls.getHelper().updateMatrixWorld();_this2.props.sceneContext.scene.notifyChange()});_defineProperty(_this2,"onKeyDown",function(ev){if(ev.key==="Escape"){_this2.transformControls.reset()}else if(ev.key==="Control"){_this2.transformControls.enabled=false}});_defineProperty(_this2,"onKeyUp",function(ev){if(ev.key==="Control"){_this2.transformControls.enabled=true}});_defineProperty(_this2,"toggleNumericInput",function(){_this2.setState(function(state){return{numericInput:!state.numericInput}})});_defineProperty(_this2,"applyCsgOperation",function(operation){var result=null;var children=_toConsumableArray(_this2.props.selectedObject.children).reverse();if(operation==="union"){result=CSG.union.apply(CSG,_toConsumableArray(children))}else if(operation==="subtract"){result=CSG.subtract.apply(CSG,_toConsumableArray(children))}else if(operation==="intersect"){result=CSG.intersect.apply(CSG,_toConsumableArray(children))}if(result){var parent=_this2.props.selectedObject.parent;result.position.add(_this2.props.selectedObject.position);_this2.props.selectedObject.dissolve();children[0].removeFromParent();children[1].removeFromParent();result.material.color=new Color().lerpColors(children[0].material.color,children[1].material.color,0.5);result.userData.originalChildren=children;parent.attach(result);// Re-center object
|
|
10
|
+
var offset=result.geometry.boundingBox.getCenter(new Vector3);offset.applyQuaternion(result.quaternion);result.position.add(offset);result.geometry.center();_this2.props.objectPicked(result)}});_defineProperty(_this2,"undoCsgOperation",function(){var parent=_this2.props.selectedObject.parent;var children=_this2.state.csgBackup;parent.attach(children[0]);parent.attach(children[1]);_this2.props.selectedObject.removeFromParent();var group=new GroupSelection;group.addToSelection(children[0]);group.addToSelection(children[1]);parent.add(group);_this2.props.objectPicked(group)});_defineProperty(_this2,"clearCsgBackup",function(){_this2.setState({csgBackup:null})});_defineProperty(_this2,"setLabel",function(text){_this2.setState({label:text});_this2.props.selectedObject.userData.label=text;updateObjectLabel(_this2.props.selectedObject,_this2.props.sceneContext);_this2.props.sceneContext.scene.notifyChange(_this2.props.selectedObject)});_defineProperty(_this2,"cloneSelectedObject",function(){if(_this2.props.selectedObject){var clonedObject=_this2.deepClone(_this2.props.selectedObject);clonedObject.position.x+=10;clonedObject.position.y+=10;clonedObject.updateMatrixWorld();_this2.props.selectedObject.parent.add(clonedObject);_this2.props.objectPicked(clonedObject)}});_defineProperty(_this2,"deepClone",function(object){var clone=object.clone(false);if(object.geometry){clone.geometry=object.geometry.clone()}if(object.material){if(Array.isArray(object.material)){clone.material=object.material.map(function(mat){return mat.clone()})}else{clone.material=object.material.clone()}}object.children.forEach(function(child){clone.add(_this2.deepClone(child))});return clone});_defineProperty(_this2,"onControlMouseDown",function(e){var object=e.target.object;if(object.geometry){if(!object.geometry.boundingBox)object.geometry.computeBoundingBox();_this2._bbox=object.geometry.boundingBox.clone();_this2._scaleStart=object.scale.clone();_this2._positionStart=object.position.clone()}});_defineProperty(_this2,"onControlObjectChange",function(e){var control=e.target;var mode=control.mode,object=control.object;if(mode==="scale"){// Block zero or negative scales
|
|
11
|
+
object.scale.max(new Vector3(1E-4,1E-4,1E-4));var offset=new Vector3;if(_this2._bbox){if(control.pointStart.x>0){offset.x=_this2._bbox.min.x*(_this2._scaleStart.x-object.scale.x)}else{offset.x=_this2._bbox.max.x*(_this2._scaleStart.x-object.scale.x)}if(control.pointStart.y>0){offset.y=_this2._bbox.min.y*(_this2._scaleStart.y-object.scale.y)}else{offset.y=_this2._bbox.max.y*(_this2._scaleStart.y-object.scale.y)}if(control.pointStart.z>0){offset.z=_this2._bbox.min.z*(_this2._scaleStart.z-object.scale.z)}else{offset.z=_this2._bbox.max.z*(_this2._scaleStart.z-object.scale.z)}offset.applyQuaternion(object.quaternion);object.position.copy(offset).add(_this2._positionStart)}}object.updateMatrixWorld();_this2.transformControls.getHelper().updateMatrixWorld();_this2.props.sceneContext.scene.notifyChange(object)});_defineProperty(_this2,"onControlChange",function(e){_this2.transformControls.getHelper().updateMatrixWorld();_this2.props.sceneContext.scene.notifyChange(_this2.transformControls.getHelper())});_defineProperty(_this2,"onControlMouseUp",function(e){_this2._bbox=null;_this2._scaleStart=null;_this2._positionStart=null;var object=e.target.object;_this2.clearCsgBackup();object.updateMatrixWorld();_this2.transformControls.getHelper().updateMatrixWorld();_this2.props.sceneContext.scene.notifyChange(object)});return _this2}_inherits(EditTool3D,_React$Component);return _createClass(EditTool3D,[{key:"componentDidMount",value:function componentDidMount(){var _this3=this;var camera=this.props.sceneContext.scene.view.camera;var renderer=this.props.sceneContext.scene.renderer;this.transformControls=new TransformControls(camera,renderer.domElement);this.props.sceneContext.scene.add(this.transformControls.getHelper());this.transformControls.setMode(this.state.mode);this.transformControls.setSpace("local");this.transformControls.setTranslationSnap(1);this.transformControls.scaleFromEdge=true;this.transformControls.allowNegativeScales=false;this.transformControls.setRotationSnap(5/180*Math.PI);this.transformControls.addEventListener("mouseDown",this.onControlMouseDown);this.transformControls.addEventListener("objectChange",this.onControlObjectChange);this.transformControls.addEventListener("change",this.onControlChange);this.transformControls.addEventListener("mouseUp",this.onControlMouseUp);this.transformControls.addEventListener("dragging-changed",function(event){_this3.props.sceneContext.scene.view.controls.enabled=!event.value});renderer.domElement.addEventListener("pointerdown",this.selectShapeOnRelease);renderer.domElement.addEventListener("keydown",this.onKeyDown);renderer.domElement.addEventListener("keyup",this.onKeyUp);if(this.props.selectedObject){var _this$props$selectedO;this.transformControls.attach(this.props.selectedObject);this.transformControls.getHelper().updateMatrixWorld();this.props.colorChanged(this.props.selectedObject.material.color.toArray().map(function(c){return c*255}));this.setState({label:((_this$props$selectedO=this.props.selectedObject.userData)===null||_this$props$selectedO===void 0?void 0:_this$props$selectedO.label)||"",selectCount:1})}this.props.sceneContext.scene.view.controls.addEventListener("change",this.updateTransformHelper);this.props.sceneContext.scene.notifyChange()}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this4=this;if(this.props.selectedObject!==prevProps.selectedObject){var _prevProps$selectedOb;if((_prevProps$selectedOb=prevProps.selectedObject)!==null&&_prevProps$selectedOb!==void 0&&_prevProps$selectedOb.isGroupSelection){prevProps.selectedObject.dissolve()}if(prevProps.selectedObject){this.transformControls.detach();this.clearCsgBackup()}var selectCount=0;if(this.props.selectedObject){var _this$props$selectedO2;this.transformControls.attach(this.props.selectedObject);if(!this.props.selectedObject.isGroupSelection){selectCount=1;this.props.colorChanged(this.props.selectedObject.material.color.toArray().map(function(c){return c*255}))}else{selectCount=this.props.selectedObject.children.length}if(this.props.selectedObject.userData.originalChildren){this.setState({csgBackup:this.props.selectedObject.userData.originalChildren});delete this.props.selectedObject.userData.originalChildren}this.setState({label:((_this$props$selectedO2=this.props.selectedObject.userData)===null||_this$props$selectedO2===void 0?void 0:_this$props$selectedO2.label)||""})}this.transformControls.getHelper().updateMatrixWorld();this.props.sceneContext.scene.notifyChange();this.setState({selectCount:selectCount})}if(this.state.mode!==prevState.mode){this.transformControls.setMode(this.state.mode);this.transformControls.setSpace("local");this.transformControls.getHelper().updateMatrixWorld();this.props.sceneContext.scene.notifyChange()}if(this.props.color!==prevProps.color&&this.props.selectedObject){if(!this.props.selectedObject.isGroupSelection){var _this$props$selectedO3;(_this$props$selectedO3=this.props.selectedObject.material.color).setRGB.apply(_this$props$selectedO3,_toConsumableArray(this.props.color.map(function(c){return c/255})))}else{this.props.selectedObject.children.forEach(function(child){var _child$userData$origi;(_child$userData$origi=child.userData.originalColor).setRGB.apply(_child$userData$origi,_toConsumableArray(_this4.props.color.map(function(c){return c/255})))})}this.props.sceneContext.scene.notifyChange()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.clearCsgBackup();this.dissolveSelectionGroup();this.transformControls.detach();this.props.sceneContext.scene.remove(this.transformControls.getHelper());this.transformControls.dispose();var domElement=this.props.sceneContext.scene.renderer.domElement;this.props.sceneContext.scene.view.controls.removeEventListener("change",this.updateTransformHelper);domElement.removeEventListener("pointerdown",this.selectShapeOnRelease);domElement.removeEventListener("keydown",this.onKeyDown);this.props.sceneContext.scene.notifyChange()}},{key:"render",value:function render(){var _this5=this;var editButtons=[{key:"translate",label:LocaleUtils.tr("draw3d.translate")},{key:"scale",label:LocaleUtils.tr("draw3d.scale")},{key:"rotate",label:LocaleUtils.tr("draw3d.rotate")}];var extraButtons=[{key:"clone",tooltip:LocaleUtils.tr("draw3d.clone"),icon:"clone"},{key:"NumericInput",tooltip:LocaleUtils.tr("draw3d.numericinput"),icon:"numericinput"}];var csgButtons=[{key:"union",label:LocaleUtils.tr("draw3d.union")},{key:"subtract",label:LocaleUtils.tr("draw3d.subtract")},{key:"intersect",label:LocaleUtils.tr("draw3d.intersect")}];return[/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"BasicControls"},/*#__PURE__*/React.createElement("div",{className:"redlining-control"},/*#__PURE__*/React.createElement(Icon,{className:"redlining-control-icon",icon:"pen",size:"large"}),/*#__PURE__*/React.createElement(ColorButton,{alpha:false,color:this.props.color,onColorChanged:this.props.colorChanged})),/*#__PURE__*/React.createElement("div",{className:"redlining-control"},/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.mode,buttons:editButtons,onClick:function onClick(mode){return _this5.setState({mode:mode})}})),/*#__PURE__*/React.createElement("div",{className:"redlining-control"},/*#__PURE__*/React.createElement(ButtonBar,{active:this.state.numericInput?"NumericInput":null,buttons:extraButtons,onClick:this.toolButtonClicked})),this.state.numericInput?/*#__PURE__*/React.createElement(NumericInput3D,{sceneContext:this.props.sceneContext,selectedObject:this.props.selectedObject,toggleNumericInput:this.toggleNumericInput,transformControls:this.transformControls}):null),this.state.selectCount===0?/*#__PURE__*/React.createElement("div",{className:"redlining-message",key:"CtrlHint"},LocaleUtils.tr("draw3d.ctrlhint")):null,this.state.selectCount===1?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"Label"},/*#__PURE__*/React.createElement("div",{className:"redlining-control redlining-control-fill controlgroup"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("draw3d.label"),":\xA0"),/*#__PURE__*/React.createElement(TextInput,{className:"controlgroup-fillitem",onChange:this.setLabel,value:this.state.label}))):null,this.state.selectCount===2?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"CSGControls"},/*#__PURE__*/React.createElement("div",{className:"redlining-control redlining-control-fill"},/*#__PURE__*/React.createElement(ButtonBar,{buttons:csgButtons,onClick:this.applyCsgOperation}))):null,this.state.csgBackup?/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar",key:"CSGControls"},/*#__PURE__*/React.createElement("div",{className:"redlining-control redlining-control-fill"},/*#__PURE__*/React.createElement(ButtonBar,{buttons:[{key:"undo",label:LocaleUtils.tr("draw3d.undoBool")}],onClick:this.undoCsgOperation}))):null]}}])}(React.Component);_defineProperty(EditTool3D,"propTypes",{color:PropTypes.array,colorChanged:PropTypes.func,drawGroupId:PropTypes.string,objectPicked:PropTypes.func,sceneContext:PropTypes.object,selectedObject:PropTypes.object});export{EditTool3D as default};
|
|
@@ -6,7 +6,7 @@ _this._onTouchStart({pointerId:pointerId,pageX:position.x,pageY:position.y})}});
|
|
|
6
6
|
_this._interactionState=STATE.ROTATE;_this._interactionStart.set(event.clientX,event.clientY)}else if(event.button===0){// Pan
|
|
7
7
|
_this._interactionState=STATE.PAN;_this._interactionStart.set(event.clientX,event.clientY)}});_defineProperty(_this,"_onMouseMove",function(event){var deltaX=event.clientX-_this._interactionStart.x;var deltaY=event.clientY-_this._interactionStart.y;_this._interactionStart.set(event.clientX,event.clientY);if(_this._interactionState===STATE.PAN){_this._pan(-deltaX*_this.mousePanSpeed,deltaY*_this.mousePanSpeed)}else if(_this._interactionState===STATE.ROTATE){_this._rotate(_twoPI*deltaX*_this.mouseRotateSpeed/_this.domElement.clientHeight,// yes, height
|
|
8
8
|
_twoPI*deltaY*_this.mouseRotateSpeed/_this.domElement.clientHeight)}});_defineProperty(_this,"_onTouchStart",function(event){_this._interactionState=STATE.NONE;if(_this._pointers.length===1){_this._interactionState=STATE.TOUCH_PAN;_this._interactionStart.set(event.pageX,event.pageY)}else if(_this._pointers.length===2){_this._interactionState=STATE.TOUCH_ROTATE;var _this$_getTwoPointerP=_this._getTwoPointerPosition(event),x=_this$_getTwoPointerP.x,y=_this$_getTwoPointerP.y;_this._interactionStart.set(x,y)}});_defineProperty(_this,"_onTouchMove",function(event){_this._trackPointer(event);if(_this._interactionState===STATE.TOUCH_PAN){var deltaX=event.pageX-_this._interactionStart.x;var deltaY=event.pageY-_this._interactionStart.y;_this._interactionStart.set(event.pageX,event.pageY);_this._pan(-deltaX*_this.mousePanSpeed,deltaY*_this.mousePanSpeed)}else if(_this._interactionState===STATE.TOUCH_ROTATE){var _this$_getTwoPointerP2=_this._getTwoPointerPosition(event),x=_this$_getTwoPointerP2.x,y=_this$_getTwoPointerP2.y;var _deltaX=x-_this._interactionStart.x;var _deltaY=y-_this._interactionStart.y;_this._interactionStart.set(x,y);_this._rotate(_twoPI*_deltaX*_this.mouseRotateSpeed/_this.domElement.clientHeight,// yes, height
|
|
9
|
-
_twoPI*_deltaY*_this.mouseRotateSpeed/_this.domElement.clientHeight)}});_defineProperty(_this,"_onContextMenu",function(event){event.preventDefault()});_this.keyPanStep=1.5;_this.keyRotateStep=
|
|
9
|
+
_twoPI*_deltaY*_this.mouseRotateSpeed/_this.domElement.clientHeight)}});_defineProperty(_this,"_onContextMenu",function(event){event.preventDefault()});_this.keyPanStep=1.5;_this.keyRotateStep=4/180*Math.PI;_this.mousePanSpeed=0.1;_this.mouseRotateSpeed=10/180*Math.PI;_this.personHeight=3;_this.sceneContext=null;_this.enabled=false;_this.yaw=0;_this.pitch=0;_this.lookAt=new Vector3(0,1,0);// Target is the actual collision detection point
|
|
10
10
|
_this.target=new Vector3().addVectors(_this.object.position,_this.lookAt.clone().multiplyScalar(3));_this.isFirstPerson=true;// Internals
|
|
11
11
|
_this._keyState={ArrowLeft:false,ArrowRight:false,ArrowUp:false,ArrowDown:false,PageUp:false,PageDown:false,Control:false,Shift:false};_this._keyboardNavInterval=null;_this._changed=false;_this._interactionState=STATE.NONE;_this._interactionStart=new Vector2;_this._pointers=[];_this._pointerPositions={};return _this}_inherits(FirstPersonControls3D,_Controls);return _createClass(FirstPersonControls3D,[{key:"connect",value:function connect(sceneContext){this.domElement=sceneContext.scene.domElement;this.sceneContext=sceneContext;this.domElement.addEventListener("pointerdown",this._onPointerDown);this.domElement.addEventListener("pointercancel",this._onPointerUp);this.domElement.addEventListener("contextmenu",this._onContextMenu);this.domElement.addEventListener("keydown",this._onKeyDown);this.domElement.addEventListener("keyup",this._onKeyUp);this.domElement.addEventListener("blur",this._onBlur);this.domElement.style.touchAction="none";// disable touch scroll
|
|
12
12
|
this.object.near=0.1;this.sceneContext.scene.view.setControls(this);this.enabled=true}},{key:"disconnect",value:function disconnect(){this.enabled=false;this.sceneContext.scene.view.setControls(null);this.domElement.removeEventListener("pointerdown",this._onPointerDown);this.domElement.removeEventListener("pointermove",this._onPointerMove);this.domElement.removeEventListener("pointerup",this._onPointerUp);this.domElement.removeEventListener("pointercancel",this._onPointerUp);this.domElement.removeEventListener("contextmenu",this._onContextMenu);this.domElement.removeEventListener("keydown",this._onKeyDown);this.domElement.removeEventListener("keyup",this._onKeyUp);this.domElement.removeEventListener("blur",this._onBlur);this.domElement.style.touchAction="auto"}},{key:"setView",value:function setView(targetpos,lookAt){var personHeight=arguments.length>2&&arguments[2]!==undefined?arguments[2]:undefined;this.personHeight=personHeight!==null&&personHeight!==void 0?personHeight:this.personHeight;this.target.copy(targetpos);this.lookAt.copy(lookAt);this.object.position.subVectors(targetpos,lookAt.clone().multiplyScalar(3));this.pitch=Math.asin(Math.max(-1,Math.min(1,this.lookAt.z)));this.yaw=Math.atan2(-this.lookAt.x,this.lookAt.y);this.object.lookAt(this.target);this.dispatchEvent({type:"change"})}},{key:"panView",value:function panView(dx,dy){if(dx||dy){this._pan(dx,dy)}}},{key:"tiltView",value:function tiltView(yaw,pitch){this.yaw+=yaw;this.pitch+=pitch;if(yaw||pitch){this._changed=true;this.update()}}},{key:"dispose",value:function dispose(){this.disconnect()}},{key:"update",value:function update(){var deltaTime=arguments.length>0&&arguments[0]!==undefined?arguments[0]:null;if(!this._changed){return}this.lookAt.x=-Math.sin(this.yaw)*Math.cos(this.pitch);this.lookAt.y=Math.cos(this.yaw)*Math.cos(this.pitch);this.lookAt.z=Math.sin(this.pitch);this.object.position.subVectors(this.target,this.lookAt.clone().multiplyScalar(3));this.object.lookAt(this.target);this.dispatchEvent({type:"change"});this._changed=false}// Internals
|
|
@@ -6,4 +6,4 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
|
|
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
|
7
7
|
*/import React from"react";import classNames from"classnames";import PropTypes from"prop-types";import Icon from"../Icon";import"./style/NumberInput.css";var NumberInput=/*#__PURE__*/function(_React$Component){function NumberInput(){var _this;_classCallCheck(this,NumberInput);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,NumberInput,[].concat(args));_defineProperty(_this,"state",{propValue:"",value:"",changed:false,valid:false});_defineProperty(_this,"onChange",function(ev){var len=ev.target.value.length;var value=ev.target.value.substring(_this.props.prefix.length,len-_this.props.suffix.length);_this.setState({value:value,changed:true})});_defineProperty(_this,"currentFloatValue",function(){var floatValue=parseFloat(_this.state.value);return isNaN(floatValue)?null:floatValue});_defineProperty(_this,"startStep",function(delta){if(_this.props.disabled||_this.props.readOnly){return}_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta));var stepInterval=null;var stepTimeout=setTimeout(function(){stepInterval=setInterval(function(){_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta))},50)},500);document.addEventListener("pointerup",function(){clearTimeout(stepTimeout);clearInterval(stepInterval)},{once:true})});_defineProperty(_this,"onKeyDown",function(ev){if(ev.key==="Enter"){_this.commit()}// Ensure prefix/suffix isn't changed
|
|
8
8
|
var selStart=ev.target.selectionStart;var selEnd=ev.target.selectionEnd;var len=ev.target.value.length;var startOffset=ev.key==="Backspace"&&selStart===selEnd?1:0;var endOffset=ev.key==="Delete"&&selStart===selEnd?1:0;if(selStart<_this.props.prefix.length+startOffset||selEnd>len-_this.props.suffix.length-endOffset){ev.preventDefault()}});_defineProperty(_this,"commit",function(){if(_this.state.changed){var value=_this.constrainValue(_this.currentFloatValue());_this.setState({value:value===null?"":value.toFixed(_this.props.decimals)});_this.props.onChange(value)}});_defineProperty(_this,"constrainValue",function(value){if(value===null){return null}if(_this.props.min!==undefined){value=Math.max(_this.props.min,value)}if(_this.props.max!==undefined){value=Math.min(_this.props.max,value)}var k=Math.pow(10,_this.props.decimals);return Math.round(value*k)/k});_defineProperty(_this,"setupSelectionListener",function(event){var input=event.target;var selectionHandler=function selectionHandler(ev){if(ev.target===input){// Ensure prefix/suffix isn't selected
|
|
9
|
-
var len=input.value.length;var prefixLen=_this.props.prefix.length;var suffixLen=_this.props.suffix.length;var selStart=Math.min(Math.max(input.selectionStart,prefixLen),len-suffixLen);var selEnd=Math.max(Math.min(input.selectionEnd,len-suffixLen),prefixLen);if(selStart!==input.selectionStart||selEnd!==input.selectionEnd){input.setSelectionRange(selStart,selEnd)}}};document.addEventListener("selectionchange",selectionHandler);input.addEventListener("blur",function(){document.removeEventListener("selectionchange",selectionHandler)},{once:true})});return _this}_inherits(NumberInput,_React$Component);return _createClass(NumberInput,[{key:"render",value:function render(){var _this$props$step,_this2=this;var className=classNames({"number-input":true,"number-input-mobile":this.props.mobile,"number-input-normal":!this.props.mobile,"number-input-disabled":this.props.disabled||this.props.readOnly,"number-input-invalid":this.props.required&&!this.state.value});var style={};if(!this.props.fitParent){var paddingLength=(this.props.mobile?4:1.5)+"em";var prefixSuffixLength=this.props.prefix.length+this.props.suffix.length+"ch";var numberLength=2+Math.max((this.props.min||0).toFixed(this.props.decimals).length,(this.props.max||0).toFixed(this.props.decimals).length)+"ch";style.minWidth="calc(".concat(paddingLength," + ").concat(prefixSuffixLength," + ").concat(numberLength,")")}var step=(_this$props$step=this.props.step)!==null&&_this$props$step!==void 0?_this$props$step:Math.pow(10,-this.props.decimals);var plusIcon=this.props.mobile?"plus":"chevron-up";var minusIcon=this.props.mobile?"minus":"chevron-down";return/*#__PURE__*/React.createElement("div",{className:className+" "+this.props.className},/*#__PURE__*/React.createElement("input",{disabled:this.props.disabled,onBlur:this.commit,onChange:this.onChange,onFocus:this.setupSelectionListener,onKeyDown:this.onKeyDown,placeholder:this.props.placeholder,readOnly:this.props.readOnly,required:this.props.required,style:style,type:"text",value:this.props.prefix+this.state.value+this.props.suffix}),/*#__PURE__*/React.createElement("input",{name:this.props.name,required:this.props.required,type:"hidden",value:this.state.value}),/*#__PURE__*/React.createElement(Icon,{icon:plusIcon,onPointerDown:function onPointerDown(){return _this2.startStep(+step)}}),/*#__PURE__*/React.createElement(Icon,{icon:minusIcon,onPointerDown:function onPointerDown(){return _this2.startStep(-step)}}))}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(state.propValue!==nextProps.value){return{propValue:nextProps.value,value:typeof nextProps.value==="number"?nextProps.value.toFixed(nextProps.decimals):"",changed:false}}return null}}])}(React.Component);_defineProperty(NumberInput,"propTypes",{className:PropTypes.string,decimals:PropTypes.number,disabled:PropTypes.bool,fitParent:PropTypes.bool,max:PropTypes.number,min:PropTypes.number,mobile:PropTypes.bool,name:PropTypes.string,onChange:PropTypes.func,placeholder:PropTypes.string,prefix:PropTypes.string,readOnly:PropTypes.bool,required:PropTypes.bool,step:PropTypes.number,style:PropTypes.object,suffix:PropTypes.string,value:PropTypes.number});_defineProperty(NumberInput,"defaultProps",{className:"",decimals:0,mobile:false,prefix:"",suffix:""});export{NumberInput as default};
|
|
9
|
+
var len=input.value.length;var prefixLen=_this.props.prefix.length;var suffixLen=_this.props.suffix.length;var selStart=Math.min(Math.max(input.selectionStart,prefixLen),len-suffixLen);var selEnd=Math.max(Math.min(input.selectionEnd,len-suffixLen),prefixLen);if(selStart!==input.selectionStart||selEnd!==input.selectionEnd){input.setSelectionRange(selStart,selEnd)}}};document.addEventListener("selectionchange",selectionHandler);input.addEventListener("blur",function(){document.removeEventListener("selectionchange",selectionHandler)},{once:true})});return _this}_inherits(NumberInput,_React$Component);return _createClass(NumberInput,[{key:"render",value:function render(){var _this$props$step,_this2=this;var className=classNames({"number-input":true,"number-input-mobile":this.props.mobile,"number-input-normal":!this.props.mobile,"number-input-disabled":this.props.disabled||this.props.readOnly,"number-input-invalid":this.props.required&&!this.state.value});var style={};if(!this.props.fitParent){var paddingLength=(this.props.mobile?4:1.5)+"em";var prefixSuffixLength=this.props.prefix.length+this.props.suffix.length+"ch";var numberLength=2+Math.max((this.props.min||0).toFixed(this.props.decimals).length,(this.props.max||0).toFixed(this.props.decimals).length)+"ch";style.minWidth="calc(".concat(paddingLength," + ").concat(prefixSuffixLength," + ").concat(numberLength,")")}var step=(_this$props$step=this.props.step)!==null&&_this$props$step!==void 0?_this$props$step:Math.pow(10,-this.props.decimals);var plusIcon=this.props.mobile?"plus":"chevron-up";var minusIcon=this.props.mobile?"minus":"chevron-down";return/*#__PURE__*/React.createElement("div",{className:className+" "+this.props.className},/*#__PURE__*/React.createElement("input",{disabled:this.props.disabled,inputMode:"numeric",onBlur:this.commit,onChange:this.onChange,onFocus:this.setupSelectionListener,onKeyDown:this.onKeyDown,placeholder:this.props.placeholder,readOnly:this.props.readOnly,required:this.props.required,style:style,type:"text",value:this.props.prefix+this.state.value+this.props.suffix}),/*#__PURE__*/React.createElement("input",{name:this.props.name,required:this.props.required,type:"hidden",value:this.state.value}),/*#__PURE__*/React.createElement(Icon,{icon:plusIcon,onPointerDown:function onPointerDown(){return _this2.startStep(+step)}}),/*#__PURE__*/React.createElement(Icon,{icon:minusIcon,onPointerDown:function onPointerDown(){return _this2.startStep(-step)}}))}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(state.propValue!==nextProps.value){return{propValue:nextProps.value,value:typeof nextProps.value==="number"?nextProps.value.toFixed(nextProps.decimals):"",changed:false}}return null}}])}(React.Component);_defineProperty(NumberInput,"propTypes",{className:PropTypes.string,decimals:PropTypes.number,disabled:PropTypes.bool,fitParent:PropTypes.bool,max:PropTypes.number,min:PropTypes.number,mobile:PropTypes.bool,name:PropTypes.string,onChange:PropTypes.func,placeholder:PropTypes.string,prefix:PropTypes.string,readOnly:PropTypes.bool,required:PropTypes.bool,step:PropTypes.number,style:PropTypes.object,suffix:PropTypes.string,value:PropTypes.number});_defineProperty(NumberInput,"defaultProps",{className:"",decimals:0,mobile:false,prefix:"",suffix:""});export{NumberInput as default};
|
package/package.json
CHANGED
package/plugins/FeatureForm.js
CHANGED
|
@@ -18,4 +18,4 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
|
|
|
18
18
|
*
|
|
19
19
|
* Can be used as default identify tool by setting `"identifyTool": "FeatureForm"` in `config.json`.
|
|
20
20
|
*/var FeatureForm=/*#__PURE__*/function(_React$Component){function FeatureForm(props){var _this;_classCallCheck(this,FeatureForm);_this=_callSuper(this,FeatureForm,[props]);_defineProperty(_this,"queryPoint",function(prevProps){if(_this.props.click.button!==0||_this.props.click===prevProps.click||(_this.props.click.features||[]).find(function(feature){return feature.id==="startupposmarker"})){return null}var searchMarker=(_this.props.click.features||[]).find(function(feature){return feature.id==="searchmarker"});if(searchMarker&&searchMarker.geometry.type==="Point"){return searchMarker.geometry.coordinates}return _this.props.click.coordinate});_defineProperty(_this,"queryFeatures",function(pos){var pendingRequests=0;Object.entries(_this.props.theme.editConfig||{}).forEach(function(_ref){var _this$props$filter$fi;var _ref2=_slicedToArray(_ref,2),layerId=_ref2[0],editConfig=_ref2[1];if(!editConfig.geomType){// Skip geometryless datasets
|
|
21
|
-
return}var path=[];var sublayer=null;var mapScale=MapUtils.computeForZoom(_this.props.map.scales,_this.props.map.zoom);var layer=_this.props.layers.find(function(l){return l.role===LayerRole.THEME&&(sublayer=LayerUtils.searchSubLayer(l,"name",layerId,path))});if(!layer||!sublayer||!LayerUtils.sublayerVisible(layer,path)||!LayerUtils.layerScaleInRange(sublayer,mapScale)){return}var layerOrder=layer.params.LAYERS.split(",");++pendingRequests;var editDataset=editConfig.editDataset||layerId;var scale=Math.round(MapUtils.computeForZoom(_this.props.map.scales,_this.props.map.zoom));_this.props.iface.getFeature(editDataset,pos,_this.props.map.projection,scale,96,function(featureCollection){if(featureCollection&&!isEmpty(featureCollection.features)){_this.setState(function(state){var newPickedFeatures=Object.fromEntries(Object.entries(_objectSpread(_objectSpread({},state.pickedFeatures),featureCollection.features.reduce(function(res,feature){return _objectSpread(_objectSpread({},res),{},_defineProperty({},layerId+"::"+feature.id,feature))},{}))).sort(function(a,b){var partsA=a[0].split("::");var partsB=b[0].split("::");var diff=layerOrder.indexOf(partsB[0])-layerOrder.indexOf(partsA[0]);return diff===0?partsA[1].localeCompare(partsB[1]):diff}));var selectedFeature=state.pendingRequests<=1&&!state.selectedFeature?Object.keys(newPickedFeatures)[0]:"";return{pickedFeatures:newPickedFeatures,pendingRequests:state.pendingRequests-1,selectedFeature:selectedFeature}})}else{_this.setState(function(state){var _Object$keys$;var selectedFeature=state.pendingRequests<=1&&!state.selectedFeature?(_Object$keys$=Object.keys(state.pickedFeatures)[0])!==null&&_Object$keys$!==void 0?_Object$keys$:"":"";return{pendingRequests:state.pendingRequests-1,selectedFeature:selectedFeature}})}},(_this$props$filter$fi=_this.props.filter.filterParams)===null||_this$props$filter$fi===void 0?void 0:_this$props$filter$fi[sublayer.name],_this.props.filter.filterGeom)});_this.setState({pendingRequests:pendingRequests,pickedFeatures:{},selectedFeature:""})});_defineProperty(_this,"setSelectedFeature",function(ev){_this.setState({selectedFeature:ev.target.value})});_defineProperty(_this,"onWindowClose",function(){_this.clearResults();if(_this.props.exitTaskOnResultsClose){_this.props.setCurrentTask(null)}});_defineProperty(_this,"clearResults",function(){if(!_this.props.editContext.changed){_this.setState(FeatureForm.defaultState)}});_defineProperty(_this,"updatePickedFeatures",function(newfeature){_this.setState(function(state){return{pickedFeatures:Object.entries(state.pickedFeatures).reduce(function(res,_ref3){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],feature=_ref4[1];res[key]=feature.id===newfeature.id?newfeature:feature;return res},{})}})});_this.state=FeatureForm.defaultState;return _this}_inherits(FeatureForm,_React$Component);return _createClass(FeatureForm,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.props.enabled&&!prevProps.enabled){this.props.setEditContext("FeatureForm",{action:"Pick"})}var isCurrentContext=this.props.editContext.id===this.props.currentEditContext;if(this.props.enabled&&isCurrentContext&&!this.props.editContext.changed&&this.state.pendingRequests===0){var clickPoint=this.queryPoint(prevProps);if(clickPoint){this.queryFeatures(clickPoint)}}if(this.props.enabled&&this.state.selectedFeature!==prevState.selectedFeature){var feature=this.state.pickedFeatures?this.state.pickedFeatures[this.state.selectedFeature]:null;var curLayerId=this.state.selectedFeature.split("::")[0];var curConfig=this.props.theme.editConfig[curLayerId]||{};var canEditGeometry=["Point","LineString","Polygon"].includes((curConfig.geomType||"").replace(/^Multi/,"").replace(/Z$/,""));var editPermissions=curConfig.permissions||{};this.props.setEditContext("FeatureForm",{action:"Pick",feature:feature,changed:false,geomType:curConfig.geomType||null,geomReadOnly:editPermissions.updatable===false||!canEditGeometry})}if(!this.props.enabled&&prevProps.enabled){this.props.clearEditContext("FeatureForm");this.setState(FeatureForm.defaultState)}}},{key:"render",value:function render(){var _this2=this;var resultWindow=null;if(this.state.pickedFeatures!==null){var body=null;if(this.state.pendingRequests>0){body=/*#__PURE__*/React.createElement("div",{className:"feature-query-body",role:"body"},/*#__PURE__*/React.createElement("span",{className:"identify-body-message"},LocaleUtils.tr("featureform.querying")))}else if(isEmpty(this.state.pickedFeatures)){body=/*#__PURE__*/React.createElement("div",{className:"feature-query-body",role:"body"},/*#__PURE__*/React.createElement("span",{className:"identify-body-message"},LocaleUtils.tr("featureform.noresults")))}else{var featureText=LocaleUtils.tr("featureform.feature");var curLayerId=this.state.selectedFeature.split("::")[0];var curConfig=this.props.theme.editConfig[curLayerId];body=/*#__PURE__*/React.createElement("div",{className:"feature-query-body",role:"body"},Object.keys(this.state.pickedFeatures).length>1?/*#__PURE__*/React.createElement("div",{className:"feature-query-selection"},/*#__PURE__*/React.createElement("select",{onChange:this.setSelectedFeature,value:this.state.selectedFeature},Object.entries(this.state.pickedFeatures).map(function(_ref5){var _match$sublayer$title,_match$sublayer;var _ref6=_slicedToArray(_ref5,2),id=_ref6[0],feature=_ref6[1];var _id$split=id.split("::"),_id$split2=_slicedToArray(_id$split,2),layerId=_id$split2[0],featureId=_id$split2[1];var editConfig=_this2.props.theme.editConfig[layerId];var match=LayerUtils.searchLayer(_this2.props.layers,_this2.props.theme.url,editConfig.layerName);var layerName=(_match$sublayer$title=match===null||match===void 0||(_match$sublayer=match.sublayer)===null||_match$sublayer===void 0?void 0:_match$sublayer.title)!==null&&_match$sublayer$title!==void 0?_match$sublayer$title:editConfig.layerName;var featureName=editConfig.displayField?feature.properties[editConfig.displayField]:featureText+" "+featureId;return/*#__PURE__*/React.createElement("option",{key:id,value:id},layerName+": "+featureName)}))):null,this.props.editContext.feature?/*#__PURE__*/React.createElement(AttributeForm,{editConfig:curConfig,editContext:this.props.editContext,iface:this.props.iface,onCommit:this.updatePickedFeatures}):null)}resultWindow=/*#__PURE__*/React.createElement(ResizeableWindow,{dockable:this.props.geometry.side,icon:"featureform",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:"FeatureForm",onClose:this.onWindowClose,title:LocaleUtils.tr("featureform.title")},body)}return[resultWindow,/*#__PURE__*/React.createElement(TaskBar,{key:"FeatureFormTaskBar",task:"FeatureForm"},function(){return{body:LocaleUtils.tr("infotool.clickhelpPoint")}})]}}])}(React.Component);_defineProperty(FeatureForm,"propTypes",{clearEditContext:PropTypes.func,click:PropTypes.object,currentEditContext:PropTypes.string,editContext:PropTypes.object,enabled:PropTypes.bool,/** Whether to clear the task when the results window is closed. */exitTaskOnResultsClose:PropTypes.bool,filter:PropTypes.object,/** Default window geometry with size, position and docking status. Positive position values (including '0') are related to top (InitialY) and left (InitialX), negative values (including '-0') to bottom (InitialY) and right (InitialX). */geometry:PropTypes.shape({initialWidth:PropTypes.number,initialHeight:PropTypes.number,initialX:PropTypes.number,initialY:PropTypes.number,initiallyDocked:PropTypes.bool,side:PropTypes.string}),iface:PropTypes.object,layers:PropTypes.array,map:PropTypes.object,setCurrentTask:PropTypes.func,setEditContext:PropTypes.func,theme:PropTypes.object});_defineProperty(FeatureForm,"defaultProps",{geometry:{initialWidth:320,initialHeight:480,initialX:0,initialY:0,initiallyDocked:false,side:"left"}});_defineProperty(FeatureForm,"defaultState",{pendingRequests:0,pickedFeatures:null,selectedFeature:""});export default(function(){var iface=arguments.length>0&&arguments[0]!==undefined?arguments[0]:EditingInterface;return connect(function(state){var enabled=state.task.id==="FeatureForm"||state.task.identifyEnabled&&ConfigUtils.getConfigProp("identifyTool",state.theme.current,"Identify")==="FeatureForm";return{click:state.map.click||{modifiers:{}},enabled:enabled,editContext:state.editing.contexts.FeatureForm||{},currentEditContext:state.editing.currentContext,iface:iface,layers:state.layers.flat,filter:state.layers.filter,map:state.map,theme:state.theme.current}},{setCurrentTask:setCurrentTask,clearEditContext:clearEditContext,setEditContext:setEditContext})(FeatureForm)});
|
|
21
|
+
return}var path=[];var sublayer=null;var mapScale=MapUtils.computeForZoom(_this.props.map.scales,_this.props.map.zoom);var layer=_this.props.layers.find(function(l){return l.role===LayerRole.THEME&&(sublayer=LayerUtils.searchSubLayer(l,"name",layerId,path))});if(!layer||!sublayer||!LayerUtils.sublayerVisible(layer,path)||!LayerUtils.layerScaleInRange(sublayer,mapScale)){return}var layerOrder=layer.params.LAYERS.split(",");++pendingRequests;var editDataset=editConfig.editDataset||layerId;var scale=Math.round(MapUtils.computeForZoom(_this.props.map.scales,_this.props.map.zoom));_this.props.iface.getFeature(editDataset,pos,_this.props.map.projection,scale,96,function(featureCollection){if(featureCollection&&!isEmpty(featureCollection.features)){_this.setState(function(state){var newPickedFeatures=Object.fromEntries(Object.entries(_objectSpread(_objectSpread({},state.pickedFeatures),featureCollection.features.reduce(function(res,feature){return _objectSpread(_objectSpread({},res),{},_defineProperty({},layerId+"::"+feature.id,feature))},{}))).sort(function(a,b){var partsA=a[0].split("::");var partsB=b[0].split("::");var diff=layerOrder.indexOf(partsB[0])-layerOrder.indexOf(partsA[0]);return diff===0?partsA[1].localeCompare(partsB[1]):diff}));var selectedFeature=state.pendingRequests<=1&&!state.selectedFeature?Object.keys(newPickedFeatures)[0]:"";return{pickedFeatures:newPickedFeatures,pendingRequests:state.pendingRequests-1,selectedFeature:selectedFeature}})}else{_this.setState(function(state){var _Object$keys$;var selectedFeature=state.pendingRequests<=1&&!state.selectedFeature?(_Object$keys$=Object.keys(state.pickedFeatures)[0])!==null&&_Object$keys$!==void 0?_Object$keys$:"":"";return{pendingRequests:state.pendingRequests-1,selectedFeature:selectedFeature}})}},(_this$props$filter$fi=_this.props.filter.filterParams)===null||_this$props$filter$fi===void 0?void 0:_this$props$filter$fi[sublayer.name],_this.props.filter.filterGeom)});_this.setState({pendingRequests:pendingRequests,pickedFeatures:{},selectedFeature:""})});_defineProperty(_this,"setSelectedFeature",function(ev){_this.setState({selectedFeature:ev.target.value})});_defineProperty(_this,"onWindowClose",function(){_this.clearResults();if(_this.props.exitTaskOnResultsClose){_this.props.setCurrentTask(null)}});_defineProperty(_this,"clearResults",function(){if(!_this.props.editContext.changed){_this.setState(FeatureForm.defaultState)}});_defineProperty(_this,"updatePickedFeatures",function(newfeature){_this.setState(function(state){return{pickedFeatures:Object.entries(state.pickedFeatures).reduce(function(res,_ref3){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],feature=_ref4[1];res[key]=feature.id===newfeature.id?newfeature:feature;return res},{})}})});_this.state=FeatureForm.defaultState;return _this}_inherits(FeatureForm,_React$Component);return _createClass(FeatureForm,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.enabled){this.props.setEditContext("FeatureForm",{action:"Pick"})}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.props.enabled&&!prevProps.enabled){this.props.setEditContext("FeatureForm",{action:"Pick"})}var isCurrentContext=this.props.editContext.id===this.props.currentEditContext;if(this.props.enabled&&isCurrentContext&&!this.props.editContext.changed&&this.state.pendingRequests===0){var clickPoint=this.queryPoint(prevProps);if(clickPoint){this.queryFeatures(clickPoint)}}if(this.props.enabled&&this.state.selectedFeature!==prevState.selectedFeature){var feature=this.state.pickedFeatures?this.state.pickedFeatures[this.state.selectedFeature]:null;var curLayerId=this.state.selectedFeature.split("::")[0];var curConfig=this.props.theme.editConfig[curLayerId]||{};var canEditGeometry=["Point","LineString","Polygon"].includes((curConfig.geomType||"").replace(/^Multi/,"").replace(/Z$/,""));var editPermissions=curConfig.permissions||{};this.props.setEditContext("FeatureForm",{action:"Pick",feature:feature,changed:false,geomType:curConfig.geomType||null,geomReadOnly:editPermissions.updatable===false||!canEditGeometry})}if(!this.props.enabled&&prevProps.enabled){this.props.clearEditContext("FeatureForm");this.setState(FeatureForm.defaultState)}}},{key:"render",value:function render(){var _this2=this;var resultWindow=null;if(this.state.pickedFeatures!==null){var body=null;if(this.state.pendingRequests>0){body=/*#__PURE__*/React.createElement("div",{className:"feature-query-body",role:"body"},/*#__PURE__*/React.createElement("span",{className:"identify-body-message"},LocaleUtils.tr("featureform.querying")))}else if(isEmpty(this.state.pickedFeatures)){body=/*#__PURE__*/React.createElement("div",{className:"feature-query-body",role:"body"},/*#__PURE__*/React.createElement("span",{className:"identify-body-message"},LocaleUtils.tr("featureform.noresults")))}else{var featureText=LocaleUtils.tr("featureform.feature");var curLayerId=this.state.selectedFeature.split("::")[0];var curConfig=this.props.theme.editConfig[curLayerId];body=/*#__PURE__*/React.createElement("div",{className:"feature-query-body",role:"body"},Object.keys(this.state.pickedFeatures).length>1?/*#__PURE__*/React.createElement("div",{className:"feature-query-selection"},/*#__PURE__*/React.createElement("select",{onChange:this.setSelectedFeature,value:this.state.selectedFeature},Object.entries(this.state.pickedFeatures).map(function(_ref5){var _match$sublayer$title,_match$sublayer;var _ref6=_slicedToArray(_ref5,2),id=_ref6[0],feature=_ref6[1];var _id$split=id.split("::"),_id$split2=_slicedToArray(_id$split,2),layerId=_id$split2[0],featureId=_id$split2[1];var editConfig=_this2.props.theme.editConfig[layerId];var match=LayerUtils.searchLayer(_this2.props.layers,_this2.props.theme.url,editConfig.layerName);var layerName=(_match$sublayer$title=match===null||match===void 0||(_match$sublayer=match.sublayer)===null||_match$sublayer===void 0?void 0:_match$sublayer.title)!==null&&_match$sublayer$title!==void 0?_match$sublayer$title:editConfig.layerName;var featureName=editConfig.displayField?feature.properties[editConfig.displayField]:featureText+" "+featureId;return/*#__PURE__*/React.createElement("option",{key:id,value:id},layerName+": "+featureName)}))):null,this.props.editContext.feature?/*#__PURE__*/React.createElement(AttributeForm,{editConfig:curConfig,editContext:this.props.editContext,iface:this.props.iface,onCommit:this.updatePickedFeatures}):null)}resultWindow=/*#__PURE__*/React.createElement(ResizeableWindow,{dockable:this.props.geometry.side,icon:"featureform",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:"FeatureForm",onClose:this.onWindowClose,title:LocaleUtils.tr("featureform.title")},body)}return[resultWindow,/*#__PURE__*/React.createElement(TaskBar,{key:"FeatureFormTaskBar",task:"FeatureForm"},function(){return{body:LocaleUtils.tr("infotool.clickhelpPoint")}})]}}])}(React.Component);_defineProperty(FeatureForm,"propTypes",{clearEditContext:PropTypes.func,click:PropTypes.object,currentEditContext:PropTypes.string,editContext:PropTypes.object,enabled:PropTypes.bool,/** Whether to clear the task when the results window is closed. */exitTaskOnResultsClose:PropTypes.bool,filter:PropTypes.object,/** Default window geometry with size, position and docking status. Positive position values (including '0') are related to top (InitialY) and left (InitialX), negative values (including '-0') to bottom (InitialY) and right (InitialX). */geometry:PropTypes.shape({initialWidth:PropTypes.number,initialHeight:PropTypes.number,initialX:PropTypes.number,initialY:PropTypes.number,initiallyDocked:PropTypes.bool,side:PropTypes.string}),iface:PropTypes.object,layers:PropTypes.array,map:PropTypes.object,setCurrentTask:PropTypes.func,setEditContext:PropTypes.func,theme:PropTypes.object});_defineProperty(FeatureForm,"defaultProps",{geometry:{initialWidth:320,initialHeight:480,initialX:0,initialY:0,initiallyDocked:false,side:"left"}});_defineProperty(FeatureForm,"defaultState",{pendingRequests:0,pickedFeatures:null,selectedFeature:""});export default(function(){var iface=arguments.length>0&&arguments[0]!==undefined?arguments[0]:EditingInterface;return connect(function(state){var enabled=state.task.id==="FeatureForm"||state.task.identifyEnabled&&ConfigUtils.getConfigProp("identifyTool",state.theme.current,"Identify")==="FeatureForm";return{click:state.map.click||{modifiers:{}},enabled:enabled,editContext:state.editing.contexts.FeatureForm||{},currentEditContext:state.editing.currentContext,iface:iface,layers:state.layers.flat,filter:state.layers.filter,map:state.map,theme:state.theme.current}},{setCurrentTask:setCurrentTask,clearEditContext:clearEditContext,setEditContext:setEditContext})(FeatureForm)});
|
|
@@ -1,259 +0,0 @@
|
|
|
1
|
-
function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t)}:p}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value}},_get.apply(null,arguments)}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}import{BoxGeometry,BufferGeometry,Controls,CylinderGeometry,DoubleSide,Euler,Float32BufferAttribute,Line,LineBasicMaterial,Matrix4,Mesh,MeshBasicMaterial,Object3D,OctahedronGeometry,PlaneGeometry,Quaternion,Raycaster,SphereGeometry,TorusGeometry,Vector3}from"three";var _raycaster=new Raycaster;var _tempVector=new Vector3;var _tempVector2=new Vector3;var _tempQuaternion=new Quaternion;var _unit={X:new Vector3(1,0,0),Y:new Vector3(0,1,0),Z:new Vector3(0,0,1)};/**
|
|
2
|
-
* Fires if any type of change (object or property change) is performed. Property changes
|
|
3
|
-
* are separate events you can add event listeners to. The event type is "propertyname-changed".
|
|
4
|
-
*
|
|
5
|
-
* @event TransformControls#change
|
|
6
|
-
* @type {Object}
|
|
7
|
-
*/var _changeEvent={type:"change"};/**
|
|
8
|
-
* Fires if a pointer (mouse/touch) becomes active.
|
|
9
|
-
*
|
|
10
|
-
* @event TransformControls#mouseDown
|
|
11
|
-
* @type {Object}
|
|
12
|
-
*/var _mouseDownEvent={type:"mouseDown",mode:null};/**
|
|
13
|
-
* Fires if a pointer (mouse/touch) is no longer active.
|
|
14
|
-
*
|
|
15
|
-
* @event TransformControls#mouseUp
|
|
16
|
-
* @type {Object}
|
|
17
|
-
*/var _mouseUpEvent={type:"mouseUp",mode:null};/**
|
|
18
|
-
* Fires if the controlled 3D object is changed.
|
|
19
|
-
*
|
|
20
|
-
* @event TransformControls#objectChange
|
|
21
|
-
* @type {Object}
|
|
22
|
-
*/var _objectChangeEvent={type:"objectChange"};/**
|
|
23
|
-
* This class can be used to transform objects in 3D space by adapting a similar interaction model
|
|
24
|
-
* of DCC tools like Blender. Unlike other controls, it is not intended to transform the scene's camera.
|
|
25
|
-
*
|
|
26
|
-
* `TransformControls` expects that its attached 3D object is part of the scene graph.
|
|
27
|
-
*
|
|
28
|
-
* @augments Controls
|
|
29
|
-
* @three_import import { TransformControls } from 'three/addons/controls/TransformControls.js';
|
|
30
|
-
*/var TransformControls=/*#__PURE__*/function(_Controls){/**
|
|
31
|
-
* Constructs a new controls instance.
|
|
32
|
-
*
|
|
33
|
-
* @param {Camera} camera - The camera of the rendered scene.
|
|
34
|
-
* @param {?HTMLDOMElement} domElement - The HTML element used for event listeners.
|
|
35
|
-
*/function TransformControls(camera){var _this;var domElement=arguments.length>1&&arguments[1]!==undefined?arguments[1]:null;_classCallCheck(this,TransformControls);_this=_callSuper(this,TransformControls,[undefined,domElement]);var root=new TransformControlsRoot(_this);_this._root=root;var gizmo=new TransformControlsGizmo;_this._gizmo=gizmo;root.add(gizmo);var plane=new TransformControlsPlane;_this._plane=plane;root.add(plane);var scope=_this;// Defined getter, setter and store for a property
|
|
36
|
-
function defineProperty(propName,defaultValue){var propValue=defaultValue;Object.defineProperty(scope,propName,{get:function get(){return propValue!==undefined?propValue:defaultValue},set:function set(value){if(propValue!==value){propValue=value;plane[propName]=value;gizmo[propName]=value;scope.dispatchEvent({type:propName+"-changed",value:value});scope.dispatchEvent(_changeEvent)}}});scope[propName]=defaultValue;plane[propName]=defaultValue;gizmo[propName]=defaultValue}// Define properties with getters/setter
|
|
37
|
-
// Setting the defined property will automatically trigger change event
|
|
38
|
-
// Defined properties are passed down to gizmo and plane
|
|
39
|
-
/**
|
|
40
|
-
* The camera of the rendered scene.
|
|
41
|
-
*
|
|
42
|
-
* @name TransformControls#camera
|
|
43
|
-
* @type {Camera}
|
|
44
|
-
*/defineProperty("camera",camera);defineProperty("object",undefined);defineProperty("enabled",true);/**
|
|
45
|
-
* The current transformation axis.
|
|
46
|
-
*
|
|
47
|
-
* @name TransformControls#axis
|
|
48
|
-
* @type {string}
|
|
49
|
-
*/defineProperty("axis",null);/**
|
|
50
|
-
* The current transformation axis.
|
|
51
|
-
*
|
|
52
|
-
* @name TransformControls#mode
|
|
53
|
-
* @type {('translate'|'rotate'|'scale')}
|
|
54
|
-
* @default 'translate'
|
|
55
|
-
*/defineProperty("mode","translate");/**
|
|
56
|
-
* By default, 3D objects are continuously translated. If you set this property to a numeric
|
|
57
|
-
* value (world units), you can define in which steps the 3D object should be translated.
|
|
58
|
-
*
|
|
59
|
-
* @name TransformControls#translationSnap
|
|
60
|
-
* @type {?number}
|
|
61
|
-
* @default null
|
|
62
|
-
*/defineProperty("translationSnap",null);/**
|
|
63
|
-
* By default, 3D objects are continuously rotated. If you set this property to a numeric
|
|
64
|
-
* value (radians), you can define in which steps the 3D object should be rotated.
|
|
65
|
-
*
|
|
66
|
-
* @name TransformControls#rotationSnap
|
|
67
|
-
* @type {?number}
|
|
68
|
-
* @default null
|
|
69
|
-
*/defineProperty("rotationSnap",null);/**
|
|
70
|
-
* By default, 3D objects are continuously scaled. If you set this property to a numeric
|
|
71
|
-
* value, you can define in which steps the 3D object should be scaled.
|
|
72
|
-
*
|
|
73
|
-
* @name TransformControls#scaleSnap
|
|
74
|
-
* @type {?number}
|
|
75
|
-
* @default null
|
|
76
|
-
*/defineProperty("scaleSnap",null);/**
|
|
77
|
-
* Whether to scale the object from the pulled edge, and not around the center.
|
|
78
|
-
* Only applies to simple objects (not groups of objects).
|
|
79
|
-
*
|
|
80
|
-
* @name TransformControls#scaleFromEdge
|
|
81
|
-
* @type {boolean}
|
|
82
|
-
* @default false
|
|
83
|
-
*/defineProperty("scaleFromEdge",false);/**
|
|
84
|
-
* Whether to allow negative scales.
|
|
85
|
-
* @name TransformControls#allowNegativeScales
|
|
86
|
-
* @type {boolean}
|
|
87
|
-
* @default true
|
|
88
|
-
*/defineProperty("allowNegativeScales",true);/**
|
|
89
|
-
* Defines in which coordinate space transformations should be performed.
|
|
90
|
-
*
|
|
91
|
-
* @name TransformControls#space
|
|
92
|
-
* @type {('world'|'local')}
|
|
93
|
-
* @default 'world'
|
|
94
|
-
*/defineProperty("space","world");/**
|
|
95
|
-
* The size of the helper UI (axes/planes).
|
|
96
|
-
*
|
|
97
|
-
* @name TransformControls#size
|
|
98
|
-
* @type {number}
|
|
99
|
-
* @default 1
|
|
100
|
-
*/defineProperty("size",1);/**
|
|
101
|
-
* Whether dragging is currently performed or not.
|
|
102
|
-
*
|
|
103
|
-
* @name TransformControls#dragging
|
|
104
|
-
* @type {boolean}
|
|
105
|
-
* @readonly
|
|
106
|
-
* @default false
|
|
107
|
-
*/defineProperty("dragging",false);/**
|
|
108
|
-
* Whether the x-axis helper should be visible or not.
|
|
109
|
-
*
|
|
110
|
-
* @name TransformControls#showX
|
|
111
|
-
* @type {boolean}
|
|
112
|
-
* @default true
|
|
113
|
-
*/defineProperty("showX",true);/**
|
|
114
|
-
* Whether the y-axis helper should be visible or not.
|
|
115
|
-
*
|
|
116
|
-
* @name TransformControls#showY
|
|
117
|
-
* @type {boolean}
|
|
118
|
-
* @default true
|
|
119
|
-
*/defineProperty("showY",true);/**
|
|
120
|
-
* Whether the z-axis helper should be visible or not.
|
|
121
|
-
*
|
|
122
|
-
* @name TransformControls#showZ
|
|
123
|
-
* @type {boolean}
|
|
124
|
-
* @default true
|
|
125
|
-
*/defineProperty("showZ",true);/**
|
|
126
|
-
* The minimum allowed X position during translation.
|
|
127
|
-
*
|
|
128
|
-
* @name TransformControls#minX
|
|
129
|
-
* @type {number}
|
|
130
|
-
* @default -Infinity
|
|
131
|
-
*/defineProperty("minX",-Infinity);/**
|
|
132
|
-
* The maximum allowed X position during translation.
|
|
133
|
-
*
|
|
134
|
-
* @name TransformControls#maxX
|
|
135
|
-
* @type {number}
|
|
136
|
-
* @default Infinity
|
|
137
|
-
*/defineProperty("maxX",Infinity);/**
|
|
138
|
-
* The minimum allowed y position during translation.
|
|
139
|
-
*
|
|
140
|
-
* @name TransformControls#minY
|
|
141
|
-
* @type {number}
|
|
142
|
-
* @default -Infinity
|
|
143
|
-
*/defineProperty("minY",-Infinity);/**
|
|
144
|
-
* The maximum allowed Y position during translation.
|
|
145
|
-
*
|
|
146
|
-
* @name TransformControls#maxY
|
|
147
|
-
* @type {number}
|
|
148
|
-
* @default Infinity
|
|
149
|
-
*/defineProperty("maxY",Infinity);/**
|
|
150
|
-
* The minimum allowed z position during translation.
|
|
151
|
-
*
|
|
152
|
-
* @name TransformControls#minZ
|
|
153
|
-
* @type {number}
|
|
154
|
-
* @default -Infinity
|
|
155
|
-
*/defineProperty("minZ",-Infinity);/**
|
|
156
|
-
* The maximum allowed Z position during translation.
|
|
157
|
-
*
|
|
158
|
-
* @name TransformControls#maxZ
|
|
159
|
-
* @type {number}
|
|
160
|
-
* @default Infinity
|
|
161
|
-
*/defineProperty("maxZ",Infinity);// Reusable utility variables
|
|
162
|
-
var worldPosition=new Vector3;var worldPositionStart=new Vector3;var worldQuaternion=new Quaternion;var worldQuaternionStart=new Quaternion;var cameraPosition=new Vector3;var cameraQuaternion=new Quaternion;var pointStart=new Vector3;var pointEnd=new Vector3;var rotationAxis=new Vector3;var rotationAngle=0;var eye=new Vector3;// TODO: remove properties unused in plane and gizmo
|
|
163
|
-
defineProperty("worldPosition",worldPosition);defineProperty("worldPositionStart",worldPositionStart);defineProperty("worldQuaternion",worldQuaternion);defineProperty("worldQuaternionStart",worldQuaternionStart);defineProperty("cameraPosition",cameraPosition);defineProperty("cameraQuaternion",cameraQuaternion);defineProperty("pointStart",pointStart);defineProperty("pointEnd",pointEnd);defineProperty("rotationAxis",rotationAxis);defineProperty("rotationAngle",rotationAngle);defineProperty("eye",eye);_this._offset=new Vector3;_this._startNorm=new Vector3;_this._endNorm=new Vector3;_this._cameraScale=new Vector3;_this._parentPosition=new Vector3;_this._parentQuaternion=new Quaternion;_this._parentQuaternionInv=new Quaternion;_this._parentScale=new Vector3;_this._worldScaleStart=new Vector3;_this._worldQuaternionInv=new Quaternion;_this._worldScale=new Vector3;_this._positionStart=new Vector3;_this._quaternionStart=new Quaternion;_this._scaleStart=new Vector3;_this._getPointer=getPointer.bind(_this);_this._onPointerDown=onPointerDown.bind(_this);_this._onPointerHover=onPointerHover.bind(_this);_this._onPointerMove=onPointerMove.bind(_this);_this._onPointerUp=onPointerUp.bind(_this);_this._bbox=null;if(domElement!==null){_this.connect(domElement)}return _this}_inherits(TransformControls,_Controls);return _createClass(TransformControls,[{key:"connect",value:function connect(element){_superPropGet(TransformControls,"connect",this,3)([element]);this.domElement.addEventListener("pointerdown",this._onPointerDown);this.domElement.addEventListener("pointermove",this._onPointerHover);this.domElement.addEventListener("pointerup",this._onPointerUp);this.domElement.style.touchAction="none";// disable touch scroll
|
|
164
|
-
}},{key:"disconnect",value:function disconnect(){this.domElement.removeEventListener("pointerdown",this._onPointerDown);this.domElement.removeEventListener("pointermove",this._onPointerHover);this.domElement.removeEventListener("pointermove",this._onPointerMove);this.domElement.removeEventListener("pointerup",this._onPointerUp);this.domElement.style.touchAction="auto"}/**
|
|
165
|
-
* Returns the visual representation of the controls. Add the helper to your scene to
|
|
166
|
-
* visually transform the attached 3D object.
|
|
167
|
-
*
|
|
168
|
-
* @return {TransformControlsRoot} The helper.
|
|
169
|
-
*/},{key:"getHelper",value:function getHelper(){return this._root}},{key:"pointerHover",value:function pointerHover(pointer){if(this.object===undefined||this.dragging===true)return;if(pointer!==null)_raycaster.setFromCamera(pointer,this.camera);var intersect=intersectObjectWithRay(this._gizmo.picker[this.mode],_raycaster);if(intersect){this.axis=intersect.object.name}else{this.axis=null}}},{key:"pointerDown",value:function pointerDown(pointer){if(this.object===undefined||this.dragging===true||pointer!=null&&pointer.button!==0)return;if(this.axis!==null){if(pointer!==null)_raycaster.setFromCamera(pointer,this.camera);var planeIntersect=intersectObjectWithRay(this._plane,_raycaster,true);if(planeIntersect){this.object.updateMatrixWorld();this.object.parent.updateMatrixWorld();this._positionStart.copy(this.object.position);this._quaternionStart.copy(this.object.quaternion);this._scaleStart.copy(this.object.scale);this.object.matrixWorld.decompose(this.worldPositionStart,this.worldQuaternionStart,this._worldScaleStart);this.pointStart.copy(planeIntersect.point).sub(this.worldPositionStart);if(this.object.geometry){this.object.geometry.computeBoundingBox();this._bbox=this.object.geometry.boundingBox.clone()}}this.dragging=true;_mouseDownEvent.mode=this.mode;this.dispatchEvent(_mouseDownEvent)}}},{key:"pointerMove",value:function pointerMove(pointer){var axis=this.axis;var mode=this.mode;var object=this.object;var space=this.space;if(mode==="scale"){space="local"}else if(axis==="E"||axis==="XYZE"||axis==="XYZ"){space="world"}if(object===undefined||axis===null||this.dragging===false||pointer!==null&&pointer.button!==-1)return;if(pointer!==null)_raycaster.setFromCamera(pointer,this.camera);var planeIntersect=intersectObjectWithRay(this._plane,_raycaster,true);if(!planeIntersect)return;this.pointEnd.copy(planeIntersect.point).sub(this.worldPositionStart);if(mode==="translate"){// Apply translate
|
|
170
|
-
this._offset.copy(this.pointEnd).sub(this.pointStart);if(space==="local"&&axis!=="XYZ"){this._offset.applyQuaternion(this._worldQuaternionInv)}if(axis.indexOf("X")===-1)this._offset.x=0;if(axis.indexOf("Y")===-1)this._offset.y=0;if(axis.indexOf("Z")===-1)this._offset.z=0;if(space==="local"&&axis!=="XYZ"){this._offset.applyQuaternion(this._quaternionStart).divide(this._parentScale)}else{this._offset.applyQuaternion(this._parentQuaternionInv).divide(this._parentScale)}object.position.copy(this._offset).add(this._positionStart);// Apply translation snap
|
|
171
|
-
if(this.translationSnap){if(space==="local"){object.position.applyQuaternion(_tempQuaternion.copy(this._quaternionStart).invert());if(axis.search("X")!==-1){object.position.x=Math.round(object.position.x/this.translationSnap)*this.translationSnap}if(axis.search("Y")!==-1){object.position.y=Math.round(object.position.y/this.translationSnap)*this.translationSnap}if(axis.search("Z")!==-1){object.position.z=Math.round(object.position.z/this.translationSnap)*this.translationSnap}object.position.applyQuaternion(this._quaternionStart)}if(space==="world"){if(object.parent){object.position.add(_tempVector.setFromMatrixPosition(object.parent.matrixWorld))}if(axis.search("X")!==-1){object.position.x=Math.round(object.position.x/this.translationSnap)*this.translationSnap}if(axis.search("Y")!==-1){object.position.y=Math.round(object.position.y/this.translationSnap)*this.translationSnap}if(axis.search("Z")!==-1){object.position.z=Math.round(object.position.z/this.translationSnap)*this.translationSnap}if(object.parent){object.position.sub(_tempVector.setFromMatrixPosition(object.parent.matrixWorld))}}}object.position.x=Math.max(this.minX,Math.min(this.maxX,object.position.x));object.position.y=Math.max(this.minY,Math.min(this.maxY,object.position.y));object.position.z=Math.max(this.minZ,Math.min(this.maxZ,object.position.z))}else if(mode==="scale"){if(axis.search("XYZ")!==-1){var d=this.pointEnd.length()/this.pointStart.length();if(this.pointEnd.dot(this.pointStart)<0)d*=-1;_tempVector2.set(d,d,d)}else{_tempVector.copy(this.pointStart);_tempVector2.copy(this.pointEnd);_tempVector.applyQuaternion(this._worldQuaternionInv);_tempVector2.applyQuaternion(this._worldQuaternionInv);_tempVector2.divide(_tempVector);if(axis.search("X")===-1){_tempVector2.x=1}if(axis.search("Y")===-1){_tempVector2.y=1}if(axis.search("Z")===-1){_tempVector2.z=1}}// Apply scale
|
|
172
|
-
if(!this.allowNegativeScales&&(_tempVector2.x<0||_tempVector2.y<0||_tempVector2.z<0)){return}object.scale.copy(this._scaleStart).multiply(_tempVector2);if(this.scaleSnap){if(axis.search("X")!==-1){object.scale.x=Math.round(object.scale.x/this.scaleSnap)*this.scaleSnap||this.scaleSnap}if(axis.search("Y")!==-1){object.scale.y=Math.round(object.scale.y/this.scaleSnap)*this.scaleSnap||this.scaleSnap}if(axis.search("Z")!==-1){object.scale.z=Math.round(object.scale.z/this.scaleSnap)*this.scaleSnap||this.scaleSnap}}// Scale from pulled side
|
|
173
|
-
if(this.scaleFromEdge&&this._bbox){if(this.pointStart.x>0){this._offset.x=this._bbox.min.x*(this._scaleStart.x-object.scale.x)}else{this._offset.x=this._bbox.max.x*(this._scaleStart.x-object.scale.x)}if(this.pointStart.y>0){this._offset.y=this._bbox.min.y*(this._scaleStart.y-object.scale.y)}else{this._offset.y=this._bbox.max.y*(this._scaleStart.y-object.scale.y)}if(this.pointStart.z>0){this._offset.z=this._bbox.min.z*(this._scaleStart.z-object.scale.z)}else{this._offset.z=this._bbox.max.z*(this._scaleStart.z-object.scale.z)}this._offset.applyQuaternion(this._quaternionStart);object.position.copy(this._offset).add(this._positionStart)}}else if(mode==="rotate"){this._offset.copy(this.pointEnd).sub(this.pointStart);var ROTATION_SPEED=20/this.worldPosition.distanceTo(_tempVector.setFromMatrixPosition(this.camera.matrixWorld));var _inPlaneRotation=false;if(axis==="XYZE"){this.rotationAxis.copy(this._offset).cross(this.eye).normalize();this.rotationAngle=this._offset.dot(_tempVector.copy(this.rotationAxis).cross(this.eye))*ROTATION_SPEED}else if(axis==="X"||axis==="Y"||axis==="Z"){this.rotationAxis.copy(_unit[axis]);_tempVector.copy(_unit[axis]);if(space==="local"){_tempVector.applyQuaternion(this.worldQuaternion)}_tempVector.cross(this.eye);// When _tempVector is 0 after cross with this.eye the vectors are parallel and should use in-plane rotation logic.
|
|
174
|
-
if(_tempVector.length()===0){_inPlaneRotation=true}else{this.rotationAngle=this._offset.dot(_tempVector.normalize())*ROTATION_SPEED}}if(axis==="E"||_inPlaneRotation){this.rotationAxis.copy(this.eye);this.rotationAngle=this.pointEnd.angleTo(this.pointStart);this._startNorm.copy(this.pointStart).normalize();this._endNorm.copy(this.pointEnd).normalize();this.rotationAngle*=this._endNorm.cross(this._startNorm).dot(this.eye)<0?1:-1}// Apply rotation snap
|
|
175
|
-
if(this.rotationSnap)this.rotationAngle=Math.round(this.rotationAngle/this.rotationSnap)*this.rotationSnap;// Apply rotate
|
|
176
|
-
if(space==="local"&&axis!=="E"&&axis!=="XYZE"){object.quaternion.copy(this._quaternionStart);object.quaternion.multiply(_tempQuaternion.setFromAxisAngle(this.rotationAxis,this.rotationAngle)).normalize()}else{this.rotationAxis.applyQuaternion(this._parentQuaternionInv);object.quaternion.copy(_tempQuaternion.setFromAxisAngle(this.rotationAxis,this.rotationAngle));object.quaternion.multiply(this._quaternionStart).normalize()}}this.dispatchEvent(_changeEvent);this.dispatchEvent(_objectChangeEvent)}},{key:"pointerUp",value:function pointerUp(pointer){if(pointer!==null&&pointer.button!==0)return;if(this.dragging&&this.axis!==null){_mouseUpEvent.mode=this.mode;this.dispatchEvent(_mouseUpEvent)}this.dragging=false;this.axis=null;this._bbox=null}},{key:"dispose",value:function dispose(){this.disconnect();this._root.dispose()}/**
|
|
177
|
-
* Sets the 3D object that should be transformed and ensures the controls UI is visible.
|
|
178
|
-
*
|
|
179
|
-
* @param {Object3D} object - The 3D object that should be transformed.
|
|
180
|
-
* @return {TransformControls} A reference to this controls.
|
|
181
|
-
*/},{key:"attach",value:function attach(object){this.object=object;this._root.visible=true;return this}/**
|
|
182
|
-
* Removes the current 3D object from the controls and makes the helper UI invisible.
|
|
183
|
-
*
|
|
184
|
-
* @return {TransformControls} A reference to this controls.
|
|
185
|
-
*/},{key:"detach",value:function detach(){this.object=undefined;this.axis=null;this._root.visible=false;return this}/**
|
|
186
|
-
* Resets the object's position, rotation and scale to when the current transform began.
|
|
187
|
-
*/},{key:"reset",value:function reset(){if(!this.enabled)return;if(this.dragging){this.object.position.copy(this._positionStart);this.object.quaternion.copy(this._quaternionStart);this.object.scale.copy(this._scaleStart);this.dispatchEvent(_changeEvent);this.dispatchEvent(_objectChangeEvent);this.pointStart.copy(this.pointEnd)}}/**
|
|
188
|
-
* Returns the raycaster that is used for user interaction. This object is shared between all
|
|
189
|
-
* instances of `TransformControls`.
|
|
190
|
-
*
|
|
191
|
-
* @returns {Raycaster} The internal raycaster.
|
|
192
|
-
*/},{key:"getRaycaster",value:function getRaycaster(){return _raycaster}/**
|
|
193
|
-
* Returns the transformation mode.
|
|
194
|
-
*
|
|
195
|
-
* @returns {'translate'|'rotate'|'scale'} The transformation mode.
|
|
196
|
-
*/},{key:"getMode",value:function getMode(){return this.mode}/**
|
|
197
|
-
* Sets the given transformation mode.
|
|
198
|
-
*
|
|
199
|
-
* @param {'translate'|'rotate'|'scale'} mode - The transformation mode to set.
|
|
200
|
-
*/},{key:"setMode",value:function setMode(mode){this.mode=mode}/**
|
|
201
|
-
* Sets the translation snap.
|
|
202
|
-
*
|
|
203
|
-
* @param {?number} translationSnap - The translation snap to set.
|
|
204
|
-
*/},{key:"setTranslationSnap",value:function setTranslationSnap(translationSnap){this.translationSnap=translationSnap}/**
|
|
205
|
-
* Sets the rotation snap.
|
|
206
|
-
*
|
|
207
|
-
* @param {?number} rotationSnap - The rotation snap to set.
|
|
208
|
-
*/},{key:"setRotationSnap",value:function setRotationSnap(rotationSnap){this.rotationSnap=rotationSnap}/**
|
|
209
|
-
* Sets the scale snap.
|
|
210
|
-
*
|
|
211
|
-
* @param {?number} scaleSnap - The scale snap to set.
|
|
212
|
-
*/},{key:"setScaleSnap",value:function setScaleSnap(scaleSnap){this.scaleSnap=scaleSnap}/**
|
|
213
|
-
* Sets the size of the helper UI.
|
|
214
|
-
*
|
|
215
|
-
* @param {number} size - The size to set.
|
|
216
|
-
*/},{key:"setSize",value:function setSize(size){this.size=size}/**
|
|
217
|
-
* Sets the coordinate space in which transformations are applied.
|
|
218
|
-
*
|
|
219
|
-
* @param {'world'|'local'} space - The space to set.
|
|
220
|
-
*/},{key:"setSpace",value:function setSpace(space){this.space=space}/**
|
|
221
|
-
* Sets the colors of the control's gizmo.
|
|
222
|
-
*
|
|
223
|
-
* @param {number|Color|string} xAxis - The x-axis color.
|
|
224
|
-
* @param {number|Color|string} yAxis - The y-axis color.
|
|
225
|
-
* @param {number|Color|string} zAxis - The z-axis color.
|
|
226
|
-
* @param {number|Color|string} active - The color for active elements.
|
|
227
|
-
*/},{key:"setColors",value:function setColors(xAxis,yAxis,zAxis,active){var materialLib=this._gizmo.materialLib;materialLib.xAxis.color.set(xAxis);materialLib.yAxis.color.set(yAxis);materialLib.zAxis.color.set(zAxis);materialLib.active.color.set(active);materialLib.xAxisTransparent.color.set(xAxis);materialLib.yAxisTransparent.color.set(yAxis);materialLib.zAxisTransparent.color.set(zAxis);materialLib.activeTransparent.color.set(active);// update color caches
|
|
228
|
-
if(materialLib.xAxis._color)materialLib.xAxis._color.set(xAxis);if(materialLib.yAxis._color)materialLib.yAxis._color.set(yAxis);if(materialLib.zAxis._color)materialLib.zAxis._color.set(zAxis);if(materialLib.active._color)materialLib.active._color.set(active);if(materialLib.xAxisTransparent._color)materialLib.xAxisTransparent._color.set(xAxis);if(materialLib.yAxisTransparent._color)materialLib.yAxisTransparent._color.set(yAxis);if(materialLib.zAxisTransparent._color)materialLib.zAxisTransparent._color.set(zAxis);if(materialLib.activeTransparent._color)materialLib.activeTransparent._color.set(active)}}])}(Controls);// mouse / touch event handlers
|
|
229
|
-
function getPointer(event){if(this.domElement.ownerDocument.pointerLockElement){return{x:0,y:0,button:event.button}}else{var rect=this.domElement.getBoundingClientRect();return{x:(event.clientX-rect.left)/rect.width*2-1,y:-(event.clientY-rect.top)/rect.height*2+1,button:event.button}}}function onPointerHover(event){if(!this.enabled)return;switch(event.pointerType){case"mouse":case"pen":this.pointerHover(this._getPointer(event));break}}function onPointerDown(event){if(!this.enabled)return;if(!document.pointerLockElement){this.domElement.setPointerCapture(event.pointerId)}this.domElement.addEventListener("pointermove",this._onPointerMove);this.pointerHover(this._getPointer(event));this.pointerDown(this._getPointer(event))}function onPointerMove(event){if(!this.enabled)return;this.pointerMove(this._getPointer(event))}function onPointerUp(event){if(!this.enabled)return;this.domElement.releasePointerCapture(event.pointerId);this.domElement.removeEventListener("pointermove",this._onPointerMove);this.pointerUp(this._getPointer(event))}function intersectObjectWithRay(object,raycaster,includeInvisible){var allIntersections=raycaster.intersectObject(object,true);for(var i=0;i<allIntersections.length;i++){if(allIntersections[i].object.visible||includeInvisible){return allIntersections[i]}}return false}//
|
|
230
|
-
// Reusable utility variables
|
|
231
|
-
var _tempEuler=new Euler;var _alignVector=new Vector3(0,1,0);var _zeroVector=new Vector3(0,0,0);var _lookAtMatrix=new Matrix4;var _tempQuaternion2=new Quaternion;var _identityQuaternion=new Quaternion;var _dirVector=new Vector3;var _tempMatrix=new Matrix4;var _unitX=new Vector3(1,0,0);var _unitY=new Vector3(0,1,0);var _unitZ=new Vector3(0,0,1);var _v1=new Vector3;var _v2=new Vector3;var _v3=new Vector3;var TransformControlsRoot=/*#__PURE__*/function(_Object3D){function TransformControlsRoot(controls){var _this2;_classCallCheck(this,TransformControlsRoot);_this2=_callSuper(this,TransformControlsRoot);_this2.isTransformControlsRoot=true;_this2.controls=controls;_this2.visible=false;return _this2}// updateMatrixWorld updates key transformation variables
|
|
232
|
-
_inherits(TransformControlsRoot,_Object3D);return _createClass(TransformControlsRoot,[{key:"updateMatrixWorld",value:function updateMatrixWorld(force){var controls=this.controls;if(controls.object!==undefined){controls.object.updateMatrixWorld();if(controls.object.parent===null){console.error("TransformControls: The attached 3D object must be a part of the scene graph.")}else{controls.object.parent.matrixWorld.decompose(controls._parentPosition,controls._parentQuaternion,controls._parentScale)}controls.object.matrixWorld.decompose(controls.worldPosition,controls.worldQuaternion,controls._worldScale);controls._parentQuaternionInv.copy(controls._parentQuaternion).invert();controls._worldQuaternionInv.copy(controls.worldQuaternion).invert()}controls.camera.updateMatrixWorld();controls.camera.matrixWorld.decompose(controls.cameraPosition,controls.cameraQuaternion,controls._cameraScale);if(controls.camera.isOrthographicCamera){controls.camera.getWorldDirection(controls.eye).negate()}else{controls.eye.copy(controls.cameraPosition).sub(controls.worldPosition).normalize()}_superPropGet(TransformControlsRoot,"updateMatrixWorld",this,3)([force])}},{key:"dispose",value:function dispose(){this.traverse(function(child){if(child.geometry)child.geometry.dispose();if(child.material)child.material.dispose()})}}])}(Object3D);var TransformControlsGizmo=/*#__PURE__*/function(_Object3D2){function TransformControlsGizmo(){var _this3;_classCallCheck(this,TransformControlsGizmo);_this3=_callSuper(this,TransformControlsGizmo);_this3.isTransformControlsGizmo=true;_this3.type="TransformControlsGizmo";// shared materials
|
|
233
|
-
var gizmoMaterial=new MeshBasicMaterial({depthTest:false,depthWrite:false,fog:false,toneMapped:false,transparent:true});var gizmoLineMaterial=new LineBasicMaterial({depthTest:false,depthWrite:false,fog:false,toneMapped:false,transparent:true});// Make unique material for each axis/color
|
|
234
|
-
var matInvisible=gizmoMaterial.clone();matInvisible.opacity=0.15;var matHelper=gizmoLineMaterial.clone();matHelper.opacity=0.5;var matRed=gizmoMaterial.clone();matRed.color.setHex(16711680);var matGreen=gizmoMaterial.clone();matGreen.color.setHex(65280);var matBlue=gizmoMaterial.clone();matBlue.color.setHex(255);var matRedTransparent=gizmoMaterial.clone();matRedTransparent.color.setHex(16711680);matRedTransparent.opacity=0.5;var matGreenTransparent=gizmoMaterial.clone();matGreenTransparent.color.setHex(65280);matGreenTransparent.opacity=0.5;var matBlueTransparent=gizmoMaterial.clone();matBlueTransparent.color.setHex(255);matBlueTransparent.opacity=0.5;var matWhiteTransparent=gizmoMaterial.clone();matWhiteTransparent.opacity=0.25;var matYellowTransparent=gizmoMaterial.clone();matYellowTransparent.color.setHex(16776960);matYellowTransparent.opacity=0.25;var matYellow=gizmoMaterial.clone();matYellow.color.setHex(16776960);var matGray=gizmoMaterial.clone();matGray.color.setHex(7895160);// materials in the below property are configurable via setColors()
|
|
235
|
-
_this3.materialLib={xAxis:matRed,yAxis:matGreen,zAxis:matBlue,active:matYellow,xAxisTransparent:matRedTransparent,yAxisTransparent:matGreenTransparent,zAxisTransparent:matBlueTransparent,activeTransparent:matYellowTransparent};// reusable geometry
|
|
236
|
-
var arrowGeometry=new CylinderGeometry(0,0.04,0.1,12);arrowGeometry.translate(0,0.05,0);var scaleHandleGeometry=new BoxGeometry(0.08,0.08,0.08);scaleHandleGeometry.translate(0,0.04,0);var lineGeometry=new BufferGeometry;lineGeometry.setAttribute("position",new Float32BufferAttribute([0,0,0,1,0,0],3));var lineGeometry2=new CylinderGeometry(0.0075,0.0075,0.5,3);lineGeometry2.translate(0,0.25,0);function CircleGeometry(radius,arc){var geometry=new TorusGeometry(radius,0.0075,3,64,arc*Math.PI*2);geometry.rotateY(Math.PI/2);geometry.rotateX(Math.PI/2);return geometry}// Special geometry for transform helper. If scaled with position vector it spans from [0,0,0] to position
|
|
237
|
-
function TranslateHelperGeometry(){var geometry=new BufferGeometry;geometry.setAttribute("position",new Float32BufferAttribute([0,0,0,1,1,1],3));return geometry}// Gizmo definitions - custom hierarchy definitions for setupGizmo() function
|
|
238
|
-
var gizmoTranslate={X:[[new Mesh(arrowGeometry,matRed),[0.5,0,0],[0,0,-Math.PI/2]],[new Mesh(arrowGeometry,matRed),[-0.5,0,0],[0,0,Math.PI/2]],[new Mesh(lineGeometry2,matRed),[0,0,0],[0,0,-Math.PI/2]]],Y:[[new Mesh(arrowGeometry,matGreen),[0,0.5,0]],[new Mesh(arrowGeometry,matGreen),[0,-0.5,0],[Math.PI,0,0]],[new Mesh(lineGeometry2,matGreen)]],Z:[[new Mesh(arrowGeometry,matBlue),[0,0,0.5],[Math.PI/2,0,0]],[new Mesh(arrowGeometry,matBlue),[0,0,-0.5],[-Math.PI/2,0,0]],[new Mesh(lineGeometry2,matBlue),null,[Math.PI/2,0,0]]],XYZ:[[new Mesh(new OctahedronGeometry(0.1,0),matWhiteTransparent),[0,0,0]]],XY:[[new Mesh(new BoxGeometry(0.15,0.15,0.01),matBlueTransparent),[0.15,0.15,0]]],YZ:[[new Mesh(new BoxGeometry(0.15,0.15,0.01),matRedTransparent),[0,0.15,0.15],[0,Math.PI/2,0]]],XZ:[[new Mesh(new BoxGeometry(0.15,0.15,0.01),matGreenTransparent),[0.15,0,0.15],[-Math.PI/2,0,0]]]};var pickerTranslate={X:[[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0.3,0,0],[0,0,-Math.PI/2]],[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[-0.3,0,0],[0,0,Math.PI/2]]],Y:[[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0,0.3,0]],[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0,-0.3,0],[0,0,Math.PI]]],Z:[[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0,0,0.3],[Math.PI/2,0,0]],[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0,0,-0.3],[-Math.PI/2,0,0]]],XYZ:[[new Mesh(new OctahedronGeometry(0.2,0),matInvisible)]],XY:[[new Mesh(new BoxGeometry(0.2,0.2,0.01),matInvisible),[0.15,0.15,0]]],YZ:[[new Mesh(new BoxGeometry(0.2,0.2,0.01),matInvisible),[0,0.15,0.15],[0,Math.PI/2,0]]],XZ:[[new Mesh(new BoxGeometry(0.2,0.2,0.01),matInvisible),[0.15,0,0.15],[-Math.PI/2,0,0]]]};var helperTranslate={START:[[new Mesh(new OctahedronGeometry(0.01,2),matHelper),null,null,null,"helper"]],END:[[new Mesh(new OctahedronGeometry(0.01,2),matHelper),null,null,null,"helper"]],DELTA:[[new Line(TranslateHelperGeometry(),matHelper),null,null,null,"helper"]],X:[[new Line(lineGeometry,matHelper),[-1e3,0,0],null,[1e6,1,1],"helper"]],Y:[[new Line(lineGeometry,matHelper),[0,-1e3,0],[0,0,Math.PI/2],[1e6,1,1],"helper"]],Z:[[new Line(lineGeometry,matHelper),[0,0,-1e3],[0,-Math.PI/2,0],[1e6,1,1],"helper"]]};var gizmoRotate={XYZE:[[new Mesh(CircleGeometry(0.5,1),matGray),null,[0,Math.PI/2,0]]],X:[[new Mesh(CircleGeometry(0.5,0.5),matRed)]],Y:[[new Mesh(CircleGeometry(0.5,0.5),matGreen),null,[0,0,-Math.PI/2]]],Z:[[new Mesh(CircleGeometry(0.5,0.5),matBlue),null,[0,Math.PI/2,0]]],E:[[new Mesh(CircleGeometry(0.75,1),matYellowTransparent),null,[0,Math.PI/2,0]]]};var helperRotate={AXIS:[[new Line(lineGeometry,matHelper),[-1e3,0,0],null,[1e6,1,1],"helper"]]};var pickerRotate={XYZE:[[new Mesh(new SphereGeometry(0.25,10,8),matInvisible)]],X:[[new Mesh(new TorusGeometry(0.5,0.1,4,24),matInvisible),[0,0,0],[0,-Math.PI/2,-Math.PI/2]]],Y:[[new Mesh(new TorusGeometry(0.5,0.1,4,24),matInvisible),[0,0,0],[Math.PI/2,0,0]]],Z:[[new Mesh(new TorusGeometry(0.5,0.1,4,24),matInvisible),[0,0,0],[0,0,-Math.PI/2]]],E:[[new Mesh(new TorusGeometry(0.75,0.1,2,24),matInvisible)]]};var gizmoScale={X:[[new Mesh(scaleHandleGeometry,matRed),[0.5,0,0],[0,0,-Math.PI/2]],[new Mesh(lineGeometry2,matRed),[0,0,0],[0,0,-Math.PI/2]],[new Mesh(scaleHandleGeometry,matRed),[-0.5,0,0],[0,0,Math.PI/2]]],Y:[[new Mesh(scaleHandleGeometry,matGreen),[0,0.5,0]],[new Mesh(lineGeometry2,matGreen)],[new Mesh(scaleHandleGeometry,matGreen),[0,-0.5,0],[0,0,Math.PI]]],Z:[[new Mesh(scaleHandleGeometry,matBlue),[0,0,0.5],[Math.PI/2,0,0]],[new Mesh(lineGeometry2,matBlue),[0,0,0],[Math.PI/2,0,0]],[new Mesh(scaleHandleGeometry,matBlue),[0,0,-0.5],[-Math.PI/2,0,0]]],XY:[[new Mesh(new BoxGeometry(0.15,0.15,0.01),matBlueTransparent),[0.15,0.15,0]]],YZ:[[new Mesh(new BoxGeometry(0.15,0.15,0.01),matRedTransparent),[0,0.15,0.15],[0,Math.PI/2,0]]],XZ:[[new Mesh(new BoxGeometry(0.15,0.15,0.01),matGreenTransparent),[0.15,0,0.15],[-Math.PI/2,0,0]]],XYZ:[[new Mesh(new BoxGeometry(0.1,0.1,0.1),matWhiteTransparent)]]};var pickerScale={X:[[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0.3,0,0],[0,0,-Math.PI/2]],[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[-0.3,0,0],[0,0,Math.PI/2]]],Y:[[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0,0.3,0]],[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0,-0.3,0],[0,0,Math.PI]]],Z:[[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0,0,0.3],[Math.PI/2,0,0]],[new Mesh(new CylinderGeometry(0.2,0,0.6,4),matInvisible),[0,0,-0.3],[-Math.PI/2,0,0]]],XY:[[new Mesh(new BoxGeometry(0.2,0.2,0.01),matInvisible),[0.15,0.15,0]]],YZ:[[new Mesh(new BoxGeometry(0.2,0.2,0.01),matInvisible),[0,0.15,0.15],[0,Math.PI/2,0]]],XZ:[[new Mesh(new BoxGeometry(0.2,0.2,0.01),matInvisible),[0.15,0,0.15],[-Math.PI/2,0,0]]],XYZ:[[new Mesh(new BoxGeometry(0.2,0.2,0.2),matInvisible),[0,0,0]]]};var helperScale={X:[[new Line(lineGeometry,matHelper),[-1e3,0,0],null,[1e6,1,1],"helper"]],Y:[[new Line(lineGeometry,matHelper),[0,-1e3,0],[0,0,Math.PI/2],[1e6,1,1],"helper"]],Z:[[new Line(lineGeometry,matHelper),[0,0,-1e3],[0,-Math.PI/2,0],[1e6,1,1],"helper"]]};// Creates an Object3D with gizmos described in custom hierarchy definition.
|
|
239
|
-
function setupGizmo(gizmoMap){var gizmo=new Object3D;for(var name in gizmoMap){for(var i=gizmoMap[name].length;i--;){var object=gizmoMap[name][i][0].clone();var position=gizmoMap[name][i][1];var rotation=gizmoMap[name][i][2];var scale=gizmoMap[name][i][3];var tag=gizmoMap[name][i][4];// name and tag properties are essential for picking and updating logic.
|
|
240
|
-
object.name=name;object.tag=tag;if(position){object.position.set(position[0],position[1],position[2])}if(rotation){object.rotation.set(rotation[0],rotation[1],rotation[2])}if(scale){object.scale.set(scale[0],scale[1],scale[2])}object.updateMatrix();var tempGeometry=object.geometry.clone();tempGeometry.applyMatrix4(object.matrix);object.geometry=tempGeometry;object.renderOrder=Infinity;object.position.set(0,0,0);object.rotation.set(0,0,0);object.scale.set(1,1,1);gizmo.add(object)}}return gizmo}// Gizmo creation
|
|
241
|
-
_this3.gizmo={};_this3.picker={};_this3.helper={};_this3.add(_this3.gizmo["translate"]=setupGizmo(gizmoTranslate));_this3.add(_this3.gizmo["rotate"]=setupGizmo(gizmoRotate));_this3.add(_this3.gizmo["scale"]=setupGizmo(gizmoScale));_this3.add(_this3.picker["translate"]=setupGizmo(pickerTranslate));_this3.add(_this3.picker["rotate"]=setupGizmo(pickerRotate));_this3.add(_this3.picker["scale"]=setupGizmo(pickerScale));_this3.add(_this3.helper["translate"]=setupGizmo(helperTranslate));_this3.add(_this3.helper["rotate"]=setupGizmo(helperRotate));_this3.add(_this3.helper["scale"]=setupGizmo(helperScale));// Pickers should be hidden always
|
|
242
|
-
_this3.picker["translate"].visible=false;_this3.picker["rotate"].visible=false;_this3.picker["scale"].visible=false;return _this3}// updateMatrixWorld will update transformations and appearance of individual handles
|
|
243
|
-
_inherits(TransformControlsGizmo,_Object3D2);return _createClass(TransformControlsGizmo,[{key:"updateMatrixWorld",value:function updateMatrixWorld(force){var _this4=this;var space=this.mode==="scale"?"local":this.space;// scale always oriented to local rotation
|
|
244
|
-
var quaternion=space==="local"?this.worldQuaternion:_identityQuaternion;// Show only gizmos for current transform mode
|
|
245
|
-
this.gizmo["translate"].visible=this.mode==="translate";this.gizmo["rotate"].visible=this.mode==="rotate";this.gizmo["scale"].visible=this.mode==="scale";this.helper["translate"].visible=this.mode==="translate";this.helper["rotate"].visible=this.mode==="rotate";this.helper["scale"].visible=this.mode==="scale";var handles=[];handles=handles.concat(this.picker[this.mode].children);handles=handles.concat(this.gizmo[this.mode].children);handles=handles.concat(this.helper[this.mode].children);var _loop=function _loop(){var handle=handles[i];// hide aligned to camera
|
|
246
|
-
handle.visible=true;handle.rotation.set(0,0,0);handle.position.copy(_this4.worldPosition);var factor;if(_this4.camera.isOrthographicCamera){factor=(_this4.camera.top-_this4.camera.bottom)/_this4.camera.zoom}else{factor=_this4.worldPosition.distanceTo(_this4.cameraPosition)*Math.min(1.9*Math.tan(Math.PI*_this4.camera.fov/360)/_this4.camera.zoom,7)}handle.scale.set(1,1,1).multiplyScalar(factor*_this4.size/4);// TODO: simplify helpers and consider decoupling from gizmo
|
|
247
|
-
if(handle.tag==="helper"){handle.visible=false;if(handle.name==="AXIS"){handle.visible=!!_this4.axis;if(_this4.axis==="X"){_tempQuaternion.setFromEuler(_tempEuler.set(0,0,0));handle.quaternion.copy(quaternion).multiply(_tempQuaternion);if(Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(_this4.eye))>0.9){handle.visible=false}}if(_this4.axis==="Y"){_tempQuaternion.setFromEuler(_tempEuler.set(0,0,Math.PI/2));handle.quaternion.copy(quaternion).multiply(_tempQuaternion);if(Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(_this4.eye))>0.9){handle.visible=false}}if(_this4.axis==="Z"){_tempQuaternion.setFromEuler(_tempEuler.set(0,Math.PI/2,0));handle.quaternion.copy(quaternion).multiply(_tempQuaternion);if(Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(_this4.eye))>0.9){handle.visible=false}}if(_this4.axis==="XYZE"){_tempQuaternion.setFromEuler(_tempEuler.set(0,Math.PI/2,0));_alignVector.copy(_this4.rotationAxis);handle.quaternion.setFromRotationMatrix(_lookAtMatrix.lookAt(_zeroVector,_alignVector,_unitY));handle.quaternion.multiply(_tempQuaternion);handle.visible=_this4.dragging}if(_this4.axis==="E"){handle.visible=false}}else if(handle.name==="START"){handle.position.copy(_this4.worldPositionStart);handle.visible=_this4.dragging}else if(handle.name==="END"){handle.position.copy(_this4.worldPosition);handle.visible=_this4.dragging}else if(handle.name==="DELTA"){handle.position.copy(_this4.worldPositionStart);handle.quaternion.copy(_this4.worldQuaternionStart);_tempVector.set(1e-10,1e-10,1e-10).add(_this4.worldPositionStart).sub(_this4.worldPosition).multiplyScalar(-1);_tempVector.applyQuaternion(_this4.worldQuaternionStart.clone().invert());handle.scale.copy(_tempVector);handle.visible=_this4.dragging}else{handle.quaternion.copy(quaternion);if(_this4.dragging){handle.position.copy(_this4.worldPositionStart)}else{handle.position.copy(_this4.worldPosition)}if(_this4.axis){handle.visible=_this4.axis.search(handle.name)!==-1}}// If updating helper, skip rest of the loop
|
|
248
|
-
return 1;// continue
|
|
249
|
-
}// Align handles to current local or world rotation
|
|
250
|
-
handle.quaternion.copy(quaternion);if(_this4.mode==="translate"||_this4.mode==="scale"){// Hide translate and scale axis facing the camera
|
|
251
|
-
var AXIS_HIDE_THRESHOLD=0.99;var PLANE_HIDE_THRESHOLD=0.2;if(handle.name==="X"){if(Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(_this4.eye))>AXIS_HIDE_THRESHOLD){handle.scale.set(1e-10,1e-10,1e-10);handle.visible=false}}if(handle.name==="Y"){if(Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(_this4.eye))>AXIS_HIDE_THRESHOLD){handle.scale.set(1e-10,1e-10,1e-10);handle.visible=false}}if(handle.name==="Z"){if(Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(_this4.eye))>AXIS_HIDE_THRESHOLD){handle.scale.set(1e-10,1e-10,1e-10);handle.visible=false}}if(handle.name==="XY"){if(Math.abs(_alignVector.copy(_unitZ).applyQuaternion(quaternion).dot(_this4.eye))<PLANE_HIDE_THRESHOLD){handle.scale.set(1e-10,1e-10,1e-10);handle.visible=false}}if(handle.name==="YZ"){if(Math.abs(_alignVector.copy(_unitX).applyQuaternion(quaternion).dot(_this4.eye))<PLANE_HIDE_THRESHOLD){handle.scale.set(1e-10,1e-10,1e-10);handle.visible=false}}if(handle.name==="XZ"){if(Math.abs(_alignVector.copy(_unitY).applyQuaternion(quaternion).dot(_this4.eye))<PLANE_HIDE_THRESHOLD){handle.scale.set(1e-10,1e-10,1e-10);handle.visible=false}}}else if(_this4.mode==="rotate"){// Align handles to current local or world rotation
|
|
252
|
-
_tempQuaternion2.copy(quaternion);_alignVector.copy(_this4.eye).applyQuaternion(_tempQuaternion.copy(quaternion).invert());if(handle.name.search("E")!==-1){handle.quaternion.setFromRotationMatrix(_lookAtMatrix.lookAt(_this4.eye,_zeroVector,_unitY))}if(handle.name==="X"){_tempQuaternion.setFromAxisAngle(_unitX,Math.atan2(-_alignVector.y,_alignVector.z));_tempQuaternion.multiplyQuaternions(_tempQuaternion2,_tempQuaternion);handle.quaternion.copy(_tempQuaternion)}if(handle.name==="Y"){_tempQuaternion.setFromAxisAngle(_unitY,Math.atan2(_alignVector.x,_alignVector.z));_tempQuaternion.multiplyQuaternions(_tempQuaternion2,_tempQuaternion);handle.quaternion.copy(_tempQuaternion)}if(handle.name==="Z"){_tempQuaternion.setFromAxisAngle(_unitZ,Math.atan2(_alignVector.y,_alignVector.x));_tempQuaternion.multiplyQuaternions(_tempQuaternion2,_tempQuaternion);handle.quaternion.copy(_tempQuaternion)}}// Hide disabled axes
|
|
253
|
-
handle.visible=handle.visible&&(handle.name.indexOf("X")===-1||_this4.showX);handle.visible=handle.visible&&(handle.name.indexOf("Y")===-1||_this4.showY);handle.visible=handle.visible&&(handle.name.indexOf("Z")===-1||_this4.showZ);handle.visible=handle.visible&&(handle.name.indexOf("E")===-1||_this4.showX&&_this4.showY&&_this4.showZ);// highlight selected axis
|
|
254
|
-
handle.material._color=handle.material._color||handle.material.color.clone();handle.material._opacity=handle.material._opacity||handle.material.opacity;handle.material.color.copy(handle.material._color);handle.material.opacity=handle.material._opacity;if(_this4.enabled&&_this4.axis){if(handle.name===_this4.axis){handle.material.color.copy(_this4.materialLib.active.color);handle.material.opacity=1}else if(_this4.axis.split("").some(function(a){return handle.name===a})){handle.material.color.copy(_this4.materialLib.active.color);handle.material.opacity=1}}};for(var i=0;i<handles.length;i++){if(_loop())continue}_superPropGet(TransformControlsGizmo,"updateMatrixWorld",this,3)([force])}}])}(Object3D);//
|
|
255
|
-
var TransformControlsPlane=/*#__PURE__*/function(_Mesh){function TransformControlsPlane(){var _this5;_classCallCheck(this,TransformControlsPlane);_this5=_callSuper(this,TransformControlsPlane,[new PlaneGeometry(100000,100000,2,2),new MeshBasicMaterial({visible:false,wireframe:true,side:DoubleSide,transparent:true,opacity:0.1,toneMapped:false})]);_this5.isTransformControlsPlane=true;_this5.type="TransformControlsPlane";return _this5}_inherits(TransformControlsPlane,_Mesh);return _createClass(TransformControlsPlane,[{key:"updateMatrixWorld",value:function updateMatrixWorld(force){var space=this.space;this.position.copy(this.worldPosition);if(this.mode==="scale")space="local";// scale always oriented to local rotation
|
|
256
|
-
_v1.copy(_unitX).applyQuaternion(space==="local"?this.worldQuaternion:_identityQuaternion);_v2.copy(_unitY).applyQuaternion(space==="local"?this.worldQuaternion:_identityQuaternion);_v3.copy(_unitZ).applyQuaternion(space==="local"?this.worldQuaternion:_identityQuaternion);// Align the plane for current transform mode, axis and space.
|
|
257
|
-
_alignVector.copy(_v2);switch(this.mode){case"translate":case"scale":switch(this.axis){case"X":_alignVector.copy(this.eye).cross(_v1);_dirVector.copy(_v1).cross(_alignVector);break;case"Y":_alignVector.copy(this.eye).cross(_v2);_dirVector.copy(_v2).cross(_alignVector);break;case"Z":_alignVector.copy(this.eye).cross(_v3);_dirVector.copy(_v3).cross(_alignVector);break;case"XY":_dirVector.copy(_v3);break;case"YZ":_dirVector.copy(_v1);break;case"XZ":_alignVector.copy(_v3);_dirVector.copy(_v2);break;case"XYZ":case"E":_dirVector.set(0,0,0);break}break;case"rotate":default:// special case for rotate
|
|
258
|
-
_dirVector.set(0,0,0)}if(_dirVector.length()===0){// If in rotate mode, make the plane parallel to camera
|
|
259
|
-
this.quaternion.copy(this.cameraQuaternion)}else{_tempMatrix.lookAt(_tempVector.set(0,0,0),_dirVector,_alignVector);this.quaternion.setFromRotationMatrix(_tempMatrix)}_superPropGet(TransformControlsPlane,"updateMatrixWorld",this,3)([force])}}])}(Mesh);export{TransformControls,TransformControlsGizmo,TransformControlsPlane};
|