Add support for SET_LAYOUT action on viewportGrid reducer

This commit is contained in:
dannyrb 2020-06-07 11:48:13 -04:00
parent 490eefdae0
commit 0573cb18e6
3 changed files with 62 additions and 35 deletions

View File

@ -3,15 +3,16 @@
import React from 'react';
import { useViewportGrid } from '@ohif/ui';
function getCommandsModule ({ servicesManager }) {
function getCommandsModule({ servicesManager }) {
const { UIDialogService } = servicesManager.services;
const definitions = {
toggleLayoutSelectionDialog: {
commandFn: () => {
if (!UIDialogService) {
window.alert('Unable to show dialog; no UI Dialog Service available.');
window.alert(
'Unable to show dialog; no UI Dialog Service available.'
);
return;
}
@ -27,13 +28,12 @@ function getCommandsModule ({ servicesManager }) {
showOverlay: true,
content: Test,
});
},
storeContexts: [],
options: {},
context: 'VIEWER',
},
}
};
return {
definitions,
@ -47,19 +47,22 @@ function Test() {
dispatch,
] = useViewportGrid();
return <div
onClick={() => {
dispatch({ type: '', payload: {
numCols: 2,
numRows: 2,
activeViewportIndex: 0,
viewports: [],
}})
}}
style={{ color: 'white' }}
>
Hello World!
</div>
return (
<div
onClick={() => {
dispatch({
type: 'SET_LAYOUT',
payload: {
numCols: 2,
numRows: 2,
},
});
}}
style={{ color: 'white' }}
>
Hello World!
</div>
);
}
export default getCommandsModule;

View File

@ -10,7 +10,9 @@ function getCommandsModule({ servicesManager }) {
toggleLayoutSelectionDialog: {
commandFn: () => {
if (!UIDialogService) {
window.alert('Unable to show dialog; no UI Dialog Service available.');
window.alert(
'Unable to show dialog; no UI Dialog Service available.'
);
return;
}
@ -26,13 +28,12 @@ function getCommandsModule({ servicesManager }) {
showOverlay: true,
content: Test,
});
},
storeContexts: [],
options: {},
context: 'VIEWER',
},
}
};
return {
definitions,
@ -46,19 +47,22 @@ function Test() {
dispatch,
] = useViewportGrid();
return <div
onClick={() => {
dispatch({ type: '', payload: {
numCols: 2,
numRows: 2,
activeViewportIndex: 0,
viewports: [],
}})
}}
style={{ color: 'white' }}
>
Hello World!
</div>
return (
<div
onClick={() => {
dispatch({
type: 'SET_LAYOUT',
payload: {
numCols: 2,
numRows: 2,
},
});
}}
style={{ color: 'white' }}
>
Hello World!
</div>
);
}
export default getCommandsModule;

View File

@ -64,13 +64,33 @@ function App({ config, defaultExtensions }) {
switch (action.type) {
case 'SET_ACTIVE_VIEWPORT_INDEX':
return { ...state, ...{ activeViewportIndex: action.payload } };
case 'SET_DISPLAYSET_FOR_VIEWPORT':
case 'SET_DISPLAYSET_FOR_VIEWPORT': {
const { viewportIndex, displaySetInstanceUID } = action.payload;
const viewports = state.viewports.slice();
viewports[viewportIndex] = { displaySetInstanceUID };
return { ...state, ...{ viewports } };
}
case 'SET_LAYOUT': {
const { numCols, numRows } = action.payload;
const numPanes = numCols * numRows;
const viewports = state.viewports.slice();
const activeViewportIndex =
state.activeViewportIndex >= numPanes ? 0 : state.activeViewportIndex;
while (viewports.length < numPanes) {
viewports.push({});
}
while (viewports.length > numPanes) {
viewports.pop();
}
return {
...state,
...{ activeViewportIndex, numCols, numRows, viewports },
};
}
default:
return action.payload;
}