From 0245a3e42694524145df1cb46beddef7f714351e Mon Sep 17 00:00:00 2001 From: Oleksandr Iefymchuk Date: Wed, 10 Jan 2024 18:03:37 +0200 Subject: [PATCH] EPMUII-2947-Implement control of centering model on 3D view --- public/sprite.svg | 6 +++++- src/engine/Graphics3d.js | 6 ++++++ src/engine/VolumeRenderer3d.js | 5 +++++ src/store/ActionTypes.js | 1 + src/store/Store.js | 3 +++ src/ui/Main.jsx | 2 ++ src/ui/Modals/UiModalBilateral.jsx | 27 +++++++++++++++++---------- src/ui/Toolbars/PositionTool3D.jsx | 26 ++++++++++++++++++++++++++ 8 files changed, 65 insertions(+), 11 deletions(-) create mode 100644 src/ui/Toolbars/PositionTool3D.jsx diff --git a/public/sprite.svg b/public/sprite.svg index 693f7626..930fa79f 100644 --- a/public/sprite.svg +++ b/public/sprite.svg @@ -237,5 +237,9 @@ - + + + + + diff --git a/src/engine/Graphics3d.js b/src/engine/Graphics3d.js index d598de51..3be9084a 100644 --- a/src/engine/Graphics3d.js +++ b/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 }); diff --git a/src/engine/VolumeRenderer3d.js b/src/engine/VolumeRenderer3d.js index c87f4834..23a4798e 100644 --- a/src/engine/VolumeRenderer3d.js +++ b/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 diff --git a/src/store/ActionTypes.js b/src/store/ActionTypes.js index 712b791c..0e013d32 100644 --- a/src/store/ActionTypes.js +++ b/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; diff --git a/src/store/Store.js b/src/store/Store.js index dd2d8dbb..4b379e24 100644 --- a/src/store/Store.js +++ b/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; } diff --git a/src/ui/Main.jsx b/src/ui/Main.jsx index c4ac5ca0..a2d75ba0 100644 --- a/src/ui/Main.jsx +++ b/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 = () => {
handleFullMode()} /> + {viewMode === ModeView.VIEW_3D && }
diff --git a/src/ui/Modals/UiModalBilateral.jsx b/src/ui/Modals/UiModalBilateral.jsx index d0ab73c8..a1c27a3d 100644 --- a/src/ui/Modals/UiModalBilateral.jsx +++ b/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 ( Select koefficient distance (kd) - + Select koefficient value (kv) - +

Hints to setup values:
kd = 0.5, kv = 0.1 ={'>'} original image
diff --git a/src/ui/Toolbars/PositionTool3D.jsx b/src/ui/Toolbars/PositionTool3D.jsx new file mode 100644 index 00000000..e42ccbb3 --- /dev/null +++ b/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 ( + + + + + + ); +}; + +export default connect((store) => store)(PositionTool3D);