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

Add support for LayoutSelector

Browse Source
This commit is contained in:
dannyrb 2020-06-15 23:38:48 -04:00
parent 3a15702907
commit 570424e3e9
4 changed files with 89 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx
View File

@ -1,9 +1,14 @@
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
import {
LayoutSelector as OHIFLayoutSelector,
ToolbarButton,
useViewportGrid,
} from '@ohif/ui';
function LayoutSelector() {
function LayoutSelector({ onSelection }) {
const [isOpen, setIsOpen] = useState(false);
const [viewportGridState, dispatch] = useViewportGrid();
useEffect(() => {
function LayoutSelector() {
@ -17,7 +22,7 @@ function LayoutSelector() {
};
}, [isOpen]);
const dropdownContent = isOpen ? OHIFLayoutSelector : undefined;
const DropdownContent = isOpen ? OHIFLayoutSelector : null;
return (
<ToolbarButton
@ -27,7 +32,19 @@ function LayoutSelector() {
onClick={() => {
setIsOpen(!isOpen);
}}
dropdownContent={dropdownContent}
dropdownContent={
<DropdownContent
onSelection={({ numRows, numCols }) => {
dispatch({
type: 'SET_LAYOUT',
payload: {
numCols,
numRows,
},
});
}}
/>
}
isActive={isOpen}
type="primary"
/>
@ -35,7 +52,14 @@ function LayoutSelector() {
}
LayoutSelector.propTypes = {
children: PropTypes.any.isRequired,
/* Callback for grid selection */
onSelection: PropTypes.func.isRequired,
};
LayoutSelector.defaultProps = {
onSelection: () => {
console.warn('layoutSelector missing `onSelection` prop');
},
};
export default LayoutSelector;

4
extensions/default/src/getToolbarModule.js
View File

@ -63,10 +63,6 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
{
name: 'ohif.layoutSelector',
defaultComponent: ToolbarLayoutSelector,
requiredConfig: [],
optionalConfig: [],
requiredProps: [],
optionalProps: [],
clickHandler: (evt, clickedBtn, btnSectionName) => {},
},
{

122
platform/ui/src/components/LayoutSelector/LayoutSelector.jsx
View File

@ -1,80 +1,58 @@
// // SEE:
// // https://github.com/OHIF/Viewers/blob/b58aa4575ab72fe3f493cc5a4261b4f8256516ab/platform/viewer/src/appExtensions/MeasurementsPanel/index.js#L18-L49
// import React from 'react';
// import { useViewportGrid } from '@ohif/ui';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
// function getCommandsModule({ servicesManager }) {
// const { UIDialogService } = servicesManager.services;
function LayoutSelector({ onSelection }) {
const [hoveredIndex, setHoveredIndex] = useState();
const hoverX = hoveredIndex % 3;
const hoverY = Math.floor(hoveredIndex / 3);
const isHovered = index => {
const x = index % 3;
const y = Math.floor(index / 3);
// const definitions = {
// toggleLayoutSelectionDialog: {
// commandFn: () => {
// if (!UIDialogService) {
// window.alert(
// 'Unable to show dialog; no UI Dialog Service available.'
// );
// return;
// }
return x <= hoverX && y <= hoverY;
};
// // TODO: use SimpleDialog component
// // TODO: update position on window resize
// // TODO: Expand service API to check if dialog w/ ID is already open
// // TODO: Import and call `useViewportGrid`
// UIDialogService.dismiss({ id: 'layoutSelection' });
// UIDialogService.create({
// id: 'layoutSelection',
// centralize: true,
// isDraggable: false,
// showOverlay: true,
// content: Test,
// });
// },
// storeContexts: [],
// options: {},
// context: 'VIEWER',
// },
// };
// return {
// definitions,
// defaultContext: 'VIEWER',
// };
// }
// function Test() {
// const [
// { numCols, numRows, activeViewportIndex, viewports },
// dispatch,
// ] = useViewportGrid();
// return (
// <div
// onClick={() => {
// dispatch({
// type: 'SET_LAYOUT',
// payload: {
// numCols: 2,
// numRows: 2,
// },
// });
// }}
// style={{ color: 'white' }}
// >
// Hello World!
// </div>
// );
// }
// export default getCommandsModule;
import React from 'react';
function LayoutSelector() {
return (
<>
<div>LAYOUT SELECTOR PLACEHOLDER!</div>
</>
<div
style={{
display: 'grid',
gridTemplateColumns: '20px 20px 20px',
gridTemplateRows: '20px 20px 20px',
backgroundColor: '#090c29', // primary-dark
}}
className="p-2"
>
{[0, 1, 2, 3, 4, 5, 6, 7, 8].map(index => (
<div
key={index}
style={{
border: '1px solid white',
backgroundColor: isHovered(index) ? '#5acce6' : '#0b1a42',
}}
className="cursor-pointer"
onClick={() => {
const x = index % 3;
const y = Math.floor(index / 3);
onSelection({
numRows: x + 1,
numCols: y + 1,
});
}}
onMouseEnter={() => setHoveredIndex(index)}
onMouseLeave={() => setHoveredIndex(-1)}
></div>
))}
</div>
);
}
LayoutSelector.defaultProps = {
onSelection: () => {},
};
LayoutSelector.propTypes = {
onSelection: PropTypes.func.isRequired,
};
export default LayoutSelector;

10
yarn.lock
View File

@ -17889,6 +17889,16 @@ react-cornerstone-viewport@2.3.8:
prop-types "^15.7.2"
react-resize-detector "^4.2.1"
react-cornerstone-viewport@2.3.9:
version "2.3.9"
resolved "https://registry.yarnpkg.com/react-cornerstone-viewport/-/react-cornerstone-viewport-2.3.9.tgz#f9761da8e536f0a217137c6ca1a983f5882249f9"
integrity sha512-qrhq8CbX/jq6b93cQjV2qC/mhHOvFBpxzxcHlvHzEQZt/rmRMcaYxCqjpNaNbUmmBu61wNkxesUVsggkPTTcqg==
dependencies:
classnames "^2.2.6"
date-fns "^2.2.1"
prop-types "^15.7.2"
react-resize-detector "^4.2.1"
react-dates@21.2.1:
version "21.2.1"
resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.2.1.tgz#a979ed6876326ccfbf754a019bc95458cc061ad8"