othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(seg): should be able to navigate outside toolbox and come back later (#4196)

Browse Source
This commit is contained in:
Alireza 2024-05-30 14:25:38 -04:00
parent 53c2740d75
commit 6262a7f9d4
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
platform/ui/src/components/Toolbox/Toolbox.tsx
View File

@ -26,8 +26,8 @@ function Toolbox({
buttonSection: buttonSectionId, buttonSection: buttonSectionId,
}); });
const prevButtonIdsRef = useRef(); const prevButtonIdsRef = useRef('');
const prevToolboxStateRef = useRef(); const prevToolboxStateRef = useRef('');
useEffect(() => { useEffect(() => {
const currentButtonIdsStr = JSON.stringify( const currentButtonIdsStr = JSON.stringify(
@ -130,7 +130,7 @@ function Toolbox({
); );
api.initializeToolOptions(initializeOptionsWithEnhancements); api.initializeToolOptions(initializeOptionsWithEnhancements);
}, [toolbarButtons, api, toolboxState]); }, [toolbarButtons, api, toolboxState, commandsManager, servicesManager]);
const handleToolOptionChange = (toolName, optionName, newValue) => { const handleToolOptionChange = (toolName, optionName, newValue) => {
api.handleToolOptionChange(toolName, optionName, newValue); api.handleToolOptionChange(toolName, optionName, newValue);
@ -147,7 +147,7 @@ function Toolbox({
{...props} {...props}
title={title} title={title}
toolbarButtons={toolbarButtons} toolbarButtons={toolbarButtons}
activeToolOptions={toolboxState.toolOptions?.[toolboxState.activeTool]} toolboxState={toolboxState}
handleToolSelect={id => api.handleToolSelect(id)} handleToolSelect={id => api.handleToolSelect(id)}
handleToolOptionChange={handleToolOptionChange} handleToolOptionChange={handleToolOptionChange}
onInteraction={onInteraction} onInteraction={onInteraction}

9
platform/ui/src/components/Toolbox/ToolboxUI.tsx
View File

@ -19,13 +19,16 @@ function ToolboxUI(props: withAppTypes) {
const { const {
toolbarButtons, toolbarButtons,
handleToolSelect, handleToolSelect,
activeToolOptions, toolboxState,
numRows, numRows,
servicesManager, servicesManager,
title, title,
useCollapsedPanel = true, useCollapsedPanel = true,
} = props; } = props;
const { activeTool, toolOptions, selectedEvent } = toolboxState;
const activeToolOptions = toolOptions?.[activeTool];
const prevToolOptions = usePrevious(activeToolOptions); const prevToolOptions = usePrevious(activeToolOptions);
useEffect(() => { useEffect(() => {
@ -35,7 +38,7 @@ function ToolboxUI(props: withAppTypes) {
activeToolOptions.forEach((option, index) => { activeToolOptions.forEach((option, index) => {
const prevOption = prevToolOptions ? prevToolOptions[index] : undefined; const prevOption = prevToolOptions ? prevToolOptions[index] : undefined;
if (!prevOption || option.value !== prevOption.value) { if (!prevOption || option.value !== prevOption.value || selectedEvent) {
const isOptionValid = option.condition const isOptionValid = option.condition
? option.condition({ options: activeToolOptions }) ? option.condition({ options: activeToolOptions })
: true; : true;
@ -45,7 +48,7 @@ function ToolboxUI(props: withAppTypes) {
} }
} }
}); });
}, [activeToolOptions]); }, [activeToolOptions, selectedEvent]);
const render = () => { const render = () => {
return ( return (

5
platform/ui/src/contextProviders/Toolbox/ToolboxContext.tsx
View File

@ -6,7 +6,7 @@ export const toolboxReducer = (state, action) => {
const { toolbarSectionId } = action.payload; const { toolbarSectionId } = action.payload;
if (!state[toolbarSectionId]) { if (!state[toolbarSectionId]) {
state[toolbarSectionId] = { activeTool: null, toolOptions: {} }; state[toolbarSectionId] = { activeTool: null, toolOptions: {}, selectedEvent: false };
} }
switch (action.type) { switch (action.type) {
@ -16,6 +16,7 @@ export const toolboxReducer = (state, action) => {
[toolbarSectionId]: { [toolbarSectionId]: {
...state[toolbarSectionId], ...state[toolbarSectionId],
activeTool: action.payload.activeTool, activeTool: action.payload.activeTool,
selectedEvent: true,
}, },
}; };
case 'UPDATE_TOOL_OPTION': case 'UPDATE_TOOL_OPTION':
@ -24,6 +25,7 @@ export const toolboxReducer = (state, action) => {
...state, ...state,
[toolbarSectionId]: { [toolbarSectionId]: {
...state[toolbarSectionId], ...state[toolbarSectionId],
selectedEvent: false,
toolOptions: { toolOptions: {
...state[toolbarSectionId].toolOptions, ...state[toolbarSectionId].toolOptions,
[toolName]: state[toolbarSectionId].toolOptions[toolName].map(option => [toolName]: state[toolbarSectionId].toolOptions[toolName].map(option =>
@ -36,6 +38,7 @@ export const toolboxReducer = (state, action) => {
// Initialize tool options for each toolbarSectionId // Initialize tool options for each toolbarSectionId
return { return {
...state, ...state,
selectedEvent: false,
[action.toolbarSectionId]: { [action.toolbarSectionId]: {
...state[action.toolbarSectionId], ...state[action.toolbarSectionId],
toolOptions: action.payload, toolOptions: action.payload,