qwc2/components/map3d/drawtool/EditTool3D.js

QGIS Web Client

function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _readOnlyError(r){throw new TypeError("\""+r+"\" is read-only")}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t)}:p}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value}},_get.apply(null,arguments)}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););return t}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
 * Copyright 2025 Sourcepole AG
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */import React from"react";import PropTypes from"prop-types";import{Color,Group,Vector3}from"three";import{TransformControls}from"three/addons/controls/TransformControls";import{CSG}from"three-csg-ts";import LocaleUtils from"../../../utils/LocaleUtils";import Icon from"../../Icon";import ButtonBar from"../../widgets/ButtonBar";import ColorButton from"../../widgets/ColorButton";import TextInput from"../../widgets/TextInput";import{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
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
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
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
object.scale.max(new Vector3(0.1,0.1,0.1));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};