Merge pull request #193 from epam/EPMUII-2947-Implement-control-of-ce…

…ntering-model-on-3D-view

EPMUII-2947-Implement-control-of-centering-model-on-3D-view

src/engine/Graphics3d.js

@@ -51,6 +51,12 @@ class Graphics3d extends React.Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (!prevProps.isDefault3dPosition && this.props.isDefault3dPosition && this.m_volumeRenderer3D) {
+      this.m_volumeRenderer3D.resetPosition();
+      this.props.dispatch({ type: StoreActionType.SET_DEFAULT_3D_POSITION, isDefault3dPosition: false });
+    }
+  }
   setVolRenderToStore(VolRender) {
     const store = this.props;
     store.dispatch({ type: StoreActionType.SET_VOLUME_Renderer, volumeRenderer: VolRender });

src/engine/VolumeRenderer3d.js

@@ -1462,4 +1462,9 @@ export default class VolumeRenderer3d {
     }
     this.renderState = this.RENDER_STATE.ONCE;
   }
+
+  resetPosition() {
+    this.camera.position.set(0.0, 0.0, 1.5);
+    this.orbitControl.m_mesh.quaternion.set(0, 0, 0, 1);
+  }
 } // class Graphics3d

src/store/ActionTypes.js

@@ -54,5 +54,6 @@ const StoreActionType = {
   SET_SHOW_MODAL_WINDOW_WC: 42,
   SET_SHOW_MODAL_SELECT_FILES: 43,
   SET_SELECTED_COLOR: 44,
+  SET_DEFAULT_3D_POSITION: 45,
 };
 export default StoreActionType;

src/store/Store.js

@@ -53,6 +53,7 @@ export const initialState = {
   showModalWindowCW: false,
   showModalSelectFiles: false,
   selectedColor: '#ffff00',
+  isDefault3dPosition: false,
 };
 //
 // App reducer
@@ -147,6 +148,8 @@ const medReducer = (state = initialState, action) => {
       return Object.assign({}, state, { spinnerProgress: action.spinnerProgress });
     case StoreActionType.SET_SELECTED_COLOR:
       return Object.assign({}, state, { selectedColor: action.selectedColor });
+    case StoreActionType.SET_DEFAULT_3D_POSITION:
+      return Object.assign({}, state, { isDefault3dPosition: action.isDefault3dPosition });
     default:
       return state;
   }

src/ui/Main.jsx

@@ -37,6 +37,7 @@ import UiModalWindowCenterWidth from './Modals/UiModalWindowCenterWidth';
 import { useOnEvent } from './hooks/useOnEvent';
 import { mriEventsService } from '../engine/lib/services';
 import UiModalConfirmation from './Modals/UiModalConfirmation';
+import PositionTool3D from './Toolbars/PositionTool3D';
 
 export const Main = () => {
   const dispatch = useDispatch();
@@ -206,6 +207,7 @@ export const Main = () => {
                     <TopToolbar />
                     <div className={css.top}>
                       <FullScreenToggle isFullMode={isFullMode} handler={() => handleFullMode()} />
+                      {viewMode === ModeView.VIEW_3D && <PositionTool3D />}
                     </div>
                   </div>
                 </div>

src/ui/Modals/UiModalBilateral.jsx

@@ -35,11 +35,11 @@ class UiModalBilateral extends React.Component {
     this.state = {
       showModalGauss: false,
       text: 'dump',
+      koefDistValue: 3.0,
+      koefValValue: 0.1,
     };
 
     this.m_kernelSize = 10;
-    this.m_koefDist = 3.0;
-    this.m_koefVal = 0.1;
   }
 
   onButtonStart() {
@@ -82,7 +82,7 @@ class UiModalBilateral extends React.Component {
     // gauss.testSimple();
 
     const kernelSize = this.m_kernelSize;
-    gauss.start(vol, kernelSize, this.m_koefDist, this.m_koefVal);
+    gauss.start(vol, kernelSize, this.state.koefDistValue, this.state.koefValValue);
     this.m_gauss = gauss;
     store.dispatch({ type: StoreActionType.SET_PROGRESS, progress: 0 });
     const UPDATE_DELAY_MSEC = 150;
@@ -150,12 +150,12 @@ class UiModalBilateral extends React.Component {
 
   onChangeSliderKoefDist(value) {
     this.m_updateEnable = false;
-    this.m_koefDist = value;
+    this.setState({ koefDistValue: value });
   }
 
   onChangeSliderKoefVal(value) {
     this.m_updateEnable = false;
-    this.m_koefVal = value;
+    this.setState({ koefValValue: value });
   }
 
   //
@@ -164,18 +164,25 @@ class UiModalBilateral extends React.Component {
     const onHideFunc = this.props.onHide;
     this.m_hideFunc = onHideFunc;
 
-    const defaultDist = 3;
-    const defaultVal = 0.1;
-
     return (
       <Modal isOpen={stateVis} close={onHideFunc}>
         <ModalHeader title="Bilateral filtration" />
 
         <ModalBody>
           Select koefficient distance (kd)
-          <Nouislider onChange={this.onChangeSliderKoefDist.bind(this)} range={{ min: 0.5, max: 3.0 }} value={defaultDist} step={0.00001} />
+          <Nouislider
+            onChange={this.onChangeSliderKoefDist.bind(this)}
+            range={{ min: 0.5, max: 3.0 }}
+            value={this.state.koefDistValue}
+            step={0.00001}
+          />
           Select koefficient value (kv)
-          <Nouislider onChange={this.onChangeSliderKoefVal.bind(this)} range={{ min: 0.1, max: 4.0 }} value={defaultVal} step={0.00001} />
+          <Nouislider
+            onChange={this.onChangeSliderKoefVal.bind(this)}
+            range={{ min: 0.1, max: 4.0 }}
+            value={this.state.koefValValue}
+            step={0.00001}
+          />
           <p>
             <b>Hints to setup values:</b> <br />
             kd = 0.5, kv = 0.1 ={'>'} original image <br />

src/ui/Toolbars/PositionTool3D.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import { connect } from 'react-redux';
+import StoreActionType from '../../store/ActionTypes';
+import { Container } from '../Layout/Container';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { UIButton } from '../Button/Button';
+
+const PositionTool3D = () => {
+  const dispatch = useDispatch();
+
+  const positionReset = () => {
+    dispatch({ type: StoreActionType.SET_DEFAULT_3D_POSITION, isDefault3dPosition: true });
+  };
+
+  return (
+    <Container direction="vertical">
+      <Tooltip content="Default position">
+        <UIButton icon="position" handler={positionReset} />
+      </Tooltip>
+    </Container>
+  );
+};
+
+export default connect((store) => store)(PositionTool3D);