this.props.onClick(studyData)}
33 | />
34 | );
35 | });
36 | };
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/quickSwitch/StudiesList.styl:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/OHIF/react-viewerbase/08cb405ddaae17f58f64868bed688aee0420dc49/src/components/quickSwitch/StudiesList.styl
--------------------------------------------------------------------------------
/src/components/quickSwitch/__docs__/quickSwitch.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Quick Switch
3 | menu: Components
4 | route: /components/quick-switch
5 | ---
6 |
7 | import { Playground, Props } from 'docz'
8 | import { State } from 'react-powerplug'
9 | import { QuickSwitch } from './../index.js'
10 | //
11 | import studies from './studies.js'
12 |
13 | # Quick Switch
14 |
15 | ## Basic usage
16 |
17 |
18 |
21 | {({ state, setState }) => (
22 | {
28 | return !!study.active;
29 | }).thumbnails}
30 | onSeriesSelected={(selectedSeries) => {
31 | const { studyListData } = state;
32 | const selectedId = selectedSeries.displaySetInstanceUid;
33 |
34 | studyListData.forEach(study => {
35 | study.thumbnails.forEach(series => {
36 | series.active = series.displaySetInstanceUid === selectedId;
37 | })
38 | });
39 |
40 | setState({ studyListData });
41 | }}
42 | onStudySelected={(selectedStudy) => {
43 | const { studyListData } = state;
44 | const selectedId = selectedStudy.studyInstanceUid;
45 |
46 | studyListData.forEach(study => {
47 | study.active = study.studyInstanceUid === selectedId;
48 | });
49 |
50 | setState({ studyListData });
51 | }}
52 | />
53 | )}
54 |
55 |
56 |
57 |
58 |
59 | ## API
60 |
61 |
62 |
--------------------------------------------------------------------------------
/src/components/quickSwitch/index.js:
--------------------------------------------------------------------------------
1 | export { QuickSwitch } from './QuickSwitch.js';
2 |
--------------------------------------------------------------------------------
/src/components/radioButtonList/RadioButtonList.css:
--------------------------------------------------------------------------------
1 | .ohif-radio-button-container {
2 | --radio-button-dim: 20px;
3 | }
4 |
5 | .ohif-radio-button-container input {
6 | position: absolute;
7 | opacity: 0;
8 | z-index: 10000;
9 | cursor: pointer;
10 | height: inherit;
11 | width: inherit;
12 | }
13 |
14 | .ohif-radio-button-container {
15 | display: block;
16 | position: relative;
17 | padding-left: 35px;
18 | margin-bottom: 12px;
19 | cursor: pointer;
20 | font-size: 22px;
21 | -webkit-user-select: none;
22 | -moz-user-select: none;
23 | -ms-user-select: none;
24 | user-select: none;
25 | }
26 |
27 | .ohif-radio-button {
28 | width: var(--radio-button-dim);
29 | height: var(--radio-button-dim);
30 | position: absolute;
31 | top: 25%;
32 | left: 0;
33 | background-color: var(--ui-gray-lighter);
34 | border-radius: 50%;
35 | z-index: 1;
36 | }
37 |
38 | .ohif-radio-button:hover {
39 | background-color: var(--default-color);
40 | border-radius: 100%;
41 | }
42 |
43 | .ohif-radio-button:after {
44 | content: '';
45 | position: absolute;
46 | display: none;
47 | width: 70%;
48 | height: 70%;
49 | }
50 |
51 | .ohif-radio-button-container .ohif-radio-button.ohif-selected:after {
52 | display: block;
53 | top: 14%;
54 | left: 14%;
55 | border-radius: 50%;
56 | background: white;
57 | }
58 |
59 | .ohif-radio-button-label {
60 | font-size: 12px;
61 | font-weight: 500;
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/radioButtonList/RadioButtonList.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import './RadioButtonList.css';
4 |
5 | export class RadioButtonList extends Component {
6 | static className = 'RadioButtonList';
7 |
8 | //TODO: Add fields to propTypes.description?
9 | //These would be label (required), id (required), and checked (optional).
10 | static propTypes = {
11 | description: PropTypes.arrayOf(
12 | PropTypes.shape({
13 | label: PropTypes.string.isRequired,
14 | id: PropTypes.string.isRequired,
15 | checked: PropTypes.bool,
16 | })
17 | ),
18 | };
19 |
20 | constructor(props) {
21 | super(props);
22 | this.state = {};
23 |
24 | for (let button of props.description) {
25 | if (button.checked) {
26 | this.state.checked = button.id;
27 | }
28 | }
29 | }
30 |
31 | handleChange(e) {
32 | this.setState({ checked: e.target.value });
33 | }
34 |
35 | render() {
36 | let buttons = this.props.description.map(button => {
37 | let input = (
38 | {
42 | this.handleChange(e);
43 | }}
44 | value={button.id}
45 | />
46 | );
47 |
48 | //needed to style the custom radio check
49 | let inputSpan;
50 | if (this.state.checked === button.id) {
51 | inputSpan = (
52 | {input}
53 | );
54 | } else {
55 | inputSpan = {input};
56 | }
57 |
58 | return (
59 |
60 |
64 |
65 | );
66 | });
67 |
68 | return (
69 |
70 |
71 |
72 | );
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/radioButtonList/__docs__/radioButtonList.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Radio Button List
3 | menu: Elements
4 | route: /components/radio-button-list
5 | ---
6 |
7 | import { Playground, Props } from 'docz'
8 | import { State } from 'react-powerplug'
9 | import { RadioButtonList } from './../index'
10 | import NameSpace from '../../../__docs__/NameSpace'
11 |
12 | #Radio Button List
13 |
14 | ## Basic usage
15 |
16 |
17 |
38 | {({ state, setState }) => (
39 |
40 |
41 |
{JSON.stringify(state, null, 2)}
42 |
44 |
62 |
63 |
64 | )}
65 |
66 |
67 |
68 | ## API
69 |
70 |
71 |
72 | ## Translation Namespace
73 |
74 |
--------------------------------------------------------------------------------
/src/components/radioButtonList/index.js:
--------------------------------------------------------------------------------
1 | export { RadioButtonList } from './RadioButtonList.js';
2 |
--------------------------------------------------------------------------------
/src/components/roundedButtonGroup/RoundedButtonGroup.css:
--------------------------------------------------------------------------------
1 | .RoundedButtonGroup {
2 | --height: 25px;
3 |
4 | position: relative;
5 | z-index: 0;
6 | }
7 |
8 | .roundedButtonWrapper {
9 | cursor: pointer;
10 | display: inline-block;
11 | float: left;
12 | margin-left: -2px;
13 | text-decoration: none;
14 | text-align: center;
15 | }
16 |
17 | .roundedButtonWrapper.disabled {
18 | opacity: 0.5;
19 | cursor: not-allowed;
20 | }
21 |
22 | .RoundedButtonGroup .roundedButtonWrapper .roundedButton {
23 | align-items: center;
24 | background-color: var(--ui-gray-dark);
25 | border: 2px solid var(--ui-border-color-dark);
26 | color: var(--text-secondary-color);
27 | display: flex;
28 | font-size: 15px;
29 | font-weight: 500;
30 | justify-content: center;
31 | height: var(--height);
32 | line-height: var(--height);
33 | padding: 0 22px;
34 | position: relative;
35 | text-transform: uppercase;
36 | transition: var(--sidebar-transition);
37 | z-index: 1;
38 | }
39 |
40 | .roundedButtonWrapper
41 | .roundedButton
42 | svg
43 | .roundedButtonWrapper
44 | .roundedButton
45 | span {
46 | margin: 0 2px;
47 | }
48 |
49 | .roundedButtonWrapper .roundedButton i {
50 | line-height: 15px;
51 | font-size: 15px;
52 | }
53 |
54 | .bottomLabel {
55 | color: var(--text-secondary-color);
56 | font-size: 12px;
57 | font-weight: 500;
58 | line-height: 12px;
59 | margin-top: 8px;
60 | }
61 |
62 | .roundedButtonWrapper:first-child {
63 | margin-left: 0;
64 | }
65 |
66 | .RoundedButtonGroup .roundedButtonWrapper:first-child .roundedButton {
67 | border-bottom-left-radius: var(--height);
68 | border-top-left-radius: var(--height);
69 | }
70 |
71 | .RoundedButtonGroup .roundedButtonWrapper:last-child .roundedButton {
72 | border-bottom-right-radius: var(--height);
73 | border-top-right-radius: var(--height);
74 | }
75 |
76 | .roundedButtonWrapper:hover .roundedButton {
77 | background-color: var(--box-background-color);
78 | color: var(--ui-gray-dark);
79 | }
80 |
81 | .roundedButtonWrapper.active .roundedButton {
82 | background-color: var(--active-color);
83 | border-color: var(--ui-border-color-active);
84 | color: var(--ui-gray-dark);
85 | z-index: 2;
86 | }
87 |
--------------------------------------------------------------------------------
/src/components/roundedButtonGroup/__docs__/roundedButtonGroup.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Rounded Button Group
3 | menu: Components
4 | route: /components/rounded-button-group
5 | ---
6 |
7 | import { Playground, Props } from 'docz';
8 | import { State } from 'react-powerplug';
9 | import { RoundedButtonGroup } from './../index.js';
10 |
11 | # Rounded Button Group
12 |
13 | A basic styled toggle switch
14 |
15 | ## Basic usage
16 |
17 |
18 |
35 | {({ state, setState }) => (
36 |
37 |
38 |
value: {JSON.stringify(state.value, null, 2)}
39 |
16 |
34 |
35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/selectTree/__docs__/selectTree.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Select Tree
3 | menu: Components
4 | route: /components/select-tree
5 | ---
6 |
7 | import { Playground, Props } from 'docz'
8 | import { State } from 'react-powerplug'
9 | import { SelectTree } from './../index.js'
10 |
11 | import selectTreeItems from './selectTreeItems.js'
12 |
13 | # SelectTree
14 |
15 | ## Basic usage
16 |
17 |
18 |
21 | {({ state, setState }) => (
22 |
23 |
24 | {JSON.stringify(state.items, null, 2)}
25 |
26 |
27 | setState({ itemLabelSelected: item.label }) }
30 | selectTreeFirstTitle="Select Tree Example Header"
31 | autoFocus={false}
32 | />
33 |
34 | )}
35 |
36 |
37 |
38 |
39 |
40 | ## API
41 |
42 |
43 |
--------------------------------------------------------------------------------
/src/components/selectTree/__docs__/selectTreeItems.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | label: 'A',
4 | value: 'A',
5 | items: [
6 | {
7 | label: 'Abdominal Wall',
8 | value: 'AbdominalWall',
9 | },
10 | {
11 | label: 'Adrenal Left',
12 | value: 'AdrenalLeft',
13 | },
14 | ],
15 | },
16 | {
17 | label: 'B',
18 | value: 'B',
19 | items: [
20 | {
21 | label: 'Brain',
22 | value: 'Brain',
23 | },
24 | {
25 | label: 'Breast',
26 | value: 'Breast',
27 | },
28 | ],
29 | },
30 | ];
31 |
--------------------------------------------------------------------------------
/src/components/selectTree/index.js:
--------------------------------------------------------------------------------
1 | export { SelectTree } from './SelectTree';
2 |
--------------------------------------------------------------------------------
/src/components/simpleDialog/SimpleDialog.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import './SimpleDialog.styl';
5 |
6 | class SimpleDialog extends Component {
7 | static propTypes = {
8 | children: PropTypes.node,
9 | componentRef: PropTypes.any,
10 | componentStyle: PropTypes.object,
11 | rootClass: PropTypes.string,
12 | isOpen: PropTypes.bool,
13 | headerTitle: PropTypes.string.isRequired,
14 | onClose: PropTypes.func.isRequired,
15 | onConfirm: PropTypes.func.isRequired,
16 | };
17 |
18 | static defaultProps = {
19 | isOpen: true,
20 | componentStyle: {},
21 | rootClass: '',
22 | };
23 |
24 | render() {
25 | return (
26 |
27 | {this.props.isOpen && (
28 |
51 | )}
52 |
53 | );
54 | }
55 |
56 | onClose = event => {
57 | event.preventDefault();
58 | event.stopPropagation();
59 | this.props.onClose();
60 | };
61 |
62 | onConfirm = event => {
63 | event.preventDefault();
64 | event.stopPropagation();
65 | this.props.onConfirm();
66 | };
67 | }
68 |
69 | export { SimpleDialog };
70 |
--------------------------------------------------------------------------------
/src/components/simpleDialog/index.js:
--------------------------------------------------------------------------------
1 | export { SimpleDialog } from './SimpleDialog.js';
2 |
--------------------------------------------------------------------------------
/src/components/studyBrowser/DragPreview.styl:
--------------------------------------------------------------------------------
1 | .DragPreview
2 |
3 | .source-preview {
4 | border-radius: 5px;
5 | background-color: rgba(0, 0, 0, 0.5);
6 | position: fixed;
7 | opacity: 0.5;
8 | z-index: 9999;
9 | left: 0;
10 | top: 0;
11 | transition: none;
12 | pointer-events: none;
13 | -webkit-touch-callout: none;
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/studyBrowser/ExampleDropTarget.css:
--------------------------------------------------------------------------------
1 | .ExampleDropTarget {
2 | display: flex;
3 | justify-content: center;
4 | flex-direction: column;
5 |
6 | min-height: 100px;
7 |
8 | border: 2px dashed black;
9 | padding: 20px;
10 | transition: 0.2s all ease;
11 | }
12 |
13 | .ExampleDropTarget h4,
14 | .ExampleDropTarger p {
15 | text-align: center;
16 | word-break: break-word;
17 | }
18 |
19 | .ExampleDropTarget.can-drop {
20 | border: 2px dashed #20a5d6;
21 | background-color: #fafafa;
22 | color: black;
23 | }
24 |
25 | .ExampleDropTarget.hovered {
26 | border: 2px dashed #20a5d6;
27 | background-color: black;
28 | color: #91b9cd;
29 | cursor: copy;
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/studyBrowser/ImageThumbnail.styl:
--------------------------------------------------------------------------------
1 | :root {
2 | --text-secondary-color: #91B9CD;
3 | --active-color: #20A5D6;
4 | --primary-background-color: black;
5 | --ui-border-color-dark: #3C5D80
6 | --sidebar-transition: all 0.3s ease;
7 | }
8 |
9 | .ThumbnailEntry.active .ImageThumbnail
10 | border-color: var(--active-color);
11 | box-shadow: none
12 | transition: var(--sidebar-transition);
13 |
14 | .ImageThumbnail
15 | background-color: var(--primary-background-color);
16 | box-shadow: inset 0 0 0 1px var(--ui-border-color-dark);
17 | border: 5px solid transparent
18 | border-radius: 12px
19 | height: 135px
20 | margin: 0 auto
21 | padding 5px
22 | position: relative
23 | transition: var(--sidebar-transition);
24 | width: 217px
25 | -moz-background-clip: padding
26 | -webkit-background-clip: padding
27 | background-clip: padding-box
28 |
29 | .image-thumbnail-canvas
30 | height: 100%
31 | overflow: hidden
32 | display: flex
33 | justify-content: center
34 |
35 | img
36 | -webkit-user-drag: none
37 | pointer-events: none
38 |
39 |
40 | .thumbnailLoadingIndicator
41 | display: none
42 | pointer-events: none
43 | color: var(--text-secondary-color);
44 | height: 20px
45 | width: 100%
46 | top: 0
47 | left: 0
48 | right: 0
49 | bottom: 0
50 | margin: auto
51 | position: absolute
52 |
53 | &.d-block
54 | display: block;
55 |
56 | p
57 | text-align: center
58 | font-size: 10pt
59 |
60 | .image-thumbnail-progress-bar
61 | position: relative
62 | width: 100%
63 | height: 3px
64 | top: -5px
65 |
66 | .image-thumbnail-progress-bar-inner
67 | height: 100%
68 | width: 0
69 | border-radius: 5px
70 | background-color: var(--active-color);
71 |
--------------------------------------------------------------------------------
/src/components/studyBrowser/StudyBrowser.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { ThumbnailEntry } from './ThumbnailEntry';
4 | import ThumbnailEntryDragSource from './ThumbnailEntryDragSource.js';
5 | import './StudyBrowser.styl';
6 |
7 | class StudyBrowser extends Component {
8 | static defaultProps = {
9 | studies: [],
10 | supportsDragAndDrop: true,
11 | };
12 |
13 | static propTypes = {
14 | studies: PropTypes.array.isRequired,
15 | supportsDragAndDrop: PropTypes.bool.isRequired,
16 | onThumbnailClick: PropTypes.func,
17 | onThumbnailDoubleClick: PropTypes.func,
18 | };
19 |
20 | render() {
21 | const studies = this.props.studies;
22 |
23 | const thumbnails = studies.map((study, studyIndex) => {
24 | return study.thumbnails.map((thumb, thumbIndex) => {
25 | if (this.props.supportsDragAndDrop) {
26 | return (
27 |
35 | );
36 | } else {
37 | return (
38 |
39 |
47 |
48 | );
49 | }
50 | });
51 | });
52 |
53 | const components = thumbnails.flat();
54 | return (
55 |
58 | );
59 | }
60 | }
61 |
62 | export { StudyBrowser };
63 |
--------------------------------------------------------------------------------
/src/components/studyBrowser/StudyBrowser.styl:
--------------------------------------------------------------------------------
1 | .StudyBrowser
2 | float: left
3 | height: 100%
4 | width: 100%
5 | overflow: hidden
6 | background-color: black
7 | padding-bottom: 20px
8 | padding-top: 10px
9 |
10 | .scrollable-study-thumbnails
11 | height: 100%
12 | overflow-y: auto
13 | overflow-x: hidden
14 | padding-bottom: 50px
15 | padding-right: 16px
16 | padding-left: 4px
17 | margin-right: -16px
18 |
19 | display: flex;
20 | flex-direction: column;
21 |
22 | &::-webkit-scrollbar
23 | display: none
24 |
25 | .ThumbnailEntryContainer
26 | margin: 0 auto;
27 | padding-bottom: 1.5rem;
28 |
29 | .noselect
30 | -moz-user-select: none; /* Firefox */
31 | -ms-user-select: none; /* Internet Explorer */
32 | -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
33 | -webkit-user-select: none; /* Chrome, Safari, and Opera */
34 | -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
35 |
36 |
37 | .draggable
38 | cursor: copy
39 | cursor: -webkit-grab
40 | cursor: -moz-grab
41 |
--------------------------------------------------------------------------------
/src/components/studyBrowser/ThumbnailEntryDragSource.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { DragSource } from 'react-dnd';
4 | import DragPreview from './DragPreview';
5 | import { ThumbnailEntry } from './ThumbnailEntry.js';
6 |
7 | // Drag sources and drop targets only interact
8 | // if they have the same string type.
9 | const Types = {
10 | THUMBNAIL: 'thumbnail',
11 | };
12 |
13 | const thumbnailSource = {
14 | /*canDrag(props) {
15 | return props.error === false;
16 | },*/
17 |
18 | beginDrag(props) {
19 | return props;
20 | },
21 |
22 | endDrag(props, monitor) {
23 | //const item = monitor.getItem();
24 | const dropResult = monitor.getDropResult();
25 |
26 | if (dropResult) {
27 | //console.log(`You dropped ${item.id} into ${dropResult.id}!`);
28 | //console.log(item);
29 | }
30 | },
31 | };
32 |
33 | class ThumbnailEntryDragSource extends Component {
34 | static propTypes = {
35 | connectDragSource: PropTypes.func.isRequired,
36 | isDragging: PropTypes.bool.isRequired,
37 | };
38 |
39 | static defaultProps = {
40 | isDragging: false,
41 | };
42 |
43 | render() {
44 | const { connectDragSource } = this.props;
45 | const dropEffect = 'copy';
46 |
47 | return connectDragSource(
48 |
49 |
50 |
51 |
,
52 | { dropEffect }
53 | );
54 | }
55 | }
56 |
57 | const collect = (connect, monitor) => ({
58 | connectDragSource: connect.dragSource(),
59 | isDragging: monitor.isDragging(),
60 | });
61 |
62 | export default DragSource(Types.THUMBNAIL, thumbnailSource, collect)(
63 | ThumbnailEntryDragSource
64 | );
65 |
--------------------------------------------------------------------------------
/src/components/studyBrowser/__docs__/studyBrowser.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Study Browser
3 | menu: Components
4 | route: /components/study-browser
5 | ---
6 |
7 | import { Playground, Props } from 'docz'
8 | import { State } from 'react-powerplug'
9 | import { WrappedStudyBrowser } from './wrappedStudyBrowser.js'
10 | import { StudyBrowser } from './../index.js'
11 |
12 | # Study Browser
13 |
14 | ## Basic usage
15 |
16 |
17 |
18 |
19 |
20 | ## API
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/components/studyBrowser/__docs__/wrappedStudyBrowser.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { DragDropContext } from 'react-dnd';
3 | import TouchBackend from 'react-dnd-touch-backend';
4 |
5 | //
6 | import {
7 | studies,
8 | onThumbnailClick,
9 | onThumbnailDoubleClick,
10 | } from './exampleStudies.js';
11 | import { ExampleDropTarget, StudyBrowser } from './../index.js';
12 |
13 | class StudyBrowserContainer extends Component {
14 | render() {
15 | //const viewportData = [null, null, null, null];
16 |
17 | return (
18 |
19 |
20 |
25 |
26 | );
27 | }
28 | }
29 |
30 | // Note:
31 | // Normally, the top level APP component is wrapped with the DragDropContext
32 | // We wrap this component to create a simple/local example.
33 | const WrappedStudyBrowser = DragDropContext(
34 | TouchBackend({ enableMouseEvents: true }),
35 | null,
36 | true
37 | )(StudyBrowserContainer);
38 |
39 | // http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
40 | export { WrappedStudyBrowser };
41 |
--------------------------------------------------------------------------------
/src/components/studyBrowser/index.js:
--------------------------------------------------------------------------------
1 | export { ExampleDropTarget } from './ExampleDropTarget.js';
2 | export { StudyBrowser } from './StudyBrowser.js';
3 | export { ThumbnailEntry } from './ThumbnailEntry.js';
4 |
--------------------------------------------------------------------------------
/src/components/studyList/PaginationArea.styl:
--------------------------------------------------------------------------------
1 | .pagination-area
2 | color: var(--text-secondary-color);
3 | font-size: 13px
4 | font-weight: normal !important
5 |
6 | label
7 | font-weight: normal
8 |
9 | select
10 | margin: 5px
11 | background-color: var(--primary-background-color)
12 | color: white
13 |
14 | .row
15 | display: flex;
16 |
17 | .rows-dropdown
18 | width: 25%;
19 | padding-right: 15px;
20 | padding-left: 15px;
21 |
22 | .pagination-buttons
23 | width: 75%;
24 | padding-right: 15px;
25 | padding-left: 15px;
26 |
27 | .form-group
28 | margin-bottom: 15px;
29 |
30 | .rows-per-page label.wrapperLabel
31 | display: inline-table !important
32 | margin: 0 4px
33 |
34 | select
35 | margin: 0px 4px 0px 4px
36 | width: 42px
37 |
38 | .page-buttons
39 | margin: 0
40 | text-align: right
41 | font-weight: normal
42 | ul.pagination-control
43 | margin: 0
44 |
45 | li
46 | display: table-cell
47 | padding: 5px 2px
48 |
49 | button
50 | padding: 4px 8px
51 | background-color: var(--primary-background-color)
52 | border-color: var(--ui-gray)
53 | color: var(--ui-gray-darkest)
54 | color: white
55 | text-decoration: none
56 |
57 | &:hover:enabled
58 | color: var(--active-color)
59 |
60 | .active
61 | button
62 | background-color: var(--ui-gray)
63 | border-color: #ddd
64 | color: white
65 |
--------------------------------------------------------------------------------
/src/components/studyList/StudyListLoadingText.js:
--------------------------------------------------------------------------------
1 | import { Icon } from './../../elements/Icon';
2 | import React from 'react';
3 |
4 | function StudyListLoadingText() {
5 | return (
6 |
7 | Loading...
8 |
9 | );
10 | }
11 |
12 | export { StudyListLoadingText };
13 |
--------------------------------------------------------------------------------
/src/components/studyList/StudyListToolbar.js:
--------------------------------------------------------------------------------
1 | import './StudyListToolbar.styl';
2 |
3 | import React, { PureComponent } from 'react';
4 |
5 | import { Icon } from './../../elements/Icon';
6 | import PropTypes from 'prop-types';
7 |
8 | class StudylistToolbar extends PureComponent {
9 | static propTypes = {
10 | onImport: PropTypes.func,
11 | };
12 |
13 | onImport = event => {
14 | if (this.props.onImport) {
15 | this.props.onImport(event);
16 | }
17 | };
18 |
19 | getImportTool() {
20 | if (this.props.onImport) {
21 | return (
22 |
23 |
30 |
31 | );
32 | }
33 | }
34 |
35 | render() {
36 | return {this.getImportTool()}
;
37 | }
38 | }
39 |
40 | export { StudylistToolbar };
41 |
--------------------------------------------------------------------------------
/src/components/studyList/StudyListToolbar.styl:
--------------------------------------------------------------------------------
1 | .studyListToolbar
2 | .addNewStudy
3 | margin: 0 10px
4 |
5 | label
6 | font-weight: 400
7 | cursor: pointer
8 | display: inline-block;
9 | max-width: 100%;
10 | margin-bottom: 5px;
11 |
12 | input
13 | width: 0.1px;
14 | height: 0.1px
15 | opacity: 0
16 | overflow: hidden
17 | position: absolute
18 | z-index: -1
19 |
20 | color: var(--text-secondary-color)
21 |
22 | &:hover
23 | color: var(--hover-color)
24 |
25 | &:active
26 | color: var(--active-color)
27 |
--------------------------------------------------------------------------------
/src/components/studyList/__docs__/onSearch.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | export default function(searchData) {
4 | this.setState({ searchData });
5 |
6 | const filter = (key, searchData, study) => {
7 | if (key === 'studyDateFrom' && searchData[key] && study['studyDate']) {
8 | const studyDate = moment(study['studyDate'], 'YYYYMMDD');
9 | return studyDate.isBetween(
10 | searchData['studyDateFrom'],
11 | searchData['studyDateTo'],
12 | 'days',
13 | '[]'
14 | );
15 | } else if (searchData[key] && !study[key].includes(searchData[key])) {
16 | return false;
17 | } else {
18 | return true;
19 | }
20 | };
21 |
22 | const { field, order } = searchData.sortData;
23 |
24 | // just a example of local filtering
25 | let filteredStudies = this.defaultStudies
26 | .filter(function(study) {
27 | const all = [
28 | 'patientName',
29 | 'patientId',
30 | 'accessionNumber',
31 | 'modalities',
32 | 'studyDescription',
33 | 'studyDateFrom',
34 | ].every(key => {
35 | return filter(key, searchData, study);
36 | });
37 |
38 | return all;
39 | })
40 | .sort(function(a, b) {
41 | if (order === 'desc') {
42 | if (a[field] < b[field]) {
43 | return -1;
44 | }
45 | if (a[field] > b[field]) {
46 | return 1;
47 | }
48 | return 0;
49 | } else {
50 | if (a[field] > b[field]) {
51 | return -1;
52 | }
53 | if (a[field] < b[field]) {
54 | return 1;
55 | }
56 | return 0;
57 | }
58 | });
59 |
60 | // User can notice the loading icon
61 | return new Promise(resolve => {
62 | setTimeout(() => {
63 | const first = searchData.currentPage * searchData.rowsPerPage;
64 | let last =
65 | searchData.currentPage * searchData.rowsPerPage +
66 | searchData.rowsPerPage;
67 | last = last >= filteredStudies.length ? filteredStudies.length : last;
68 | this.setState({ studies: filteredStudies.slice(first, last) });
69 | resolve();
70 | }, 500);
71 | });
72 | }
73 |
--------------------------------------------------------------------------------
/src/components/studyList/__docs__/studyList.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Study List
3 | menu: Components
4 | route: /components/study-list
5 | ---
6 |
7 | import { Playground, Props } from 'docz'
8 | import { State } from 'react-powerplug'
9 | import { StudyList } from './../index.js'
10 | // Data
11 | import defaultStudies from './studies.js'
12 | import onSearch from './onSearch.js'
13 | import moment from 'moment'
14 |
15 | # Study List
16 |
17 | ## Basic usage
18 |
19 |
20 | {
23 | const studyDate = moment(study['studyDate'], 'YYYYMMDD');
24 | const startDate = moment().subtract(5, 'days');
25 | const endDate = moment();
26 |
27 | return studyDate.isBetween(startDate, endDate, 'days', '[]');
28 | }).slice(0, 5)
29 | }}>
30 | {({ state, setState }) => (
31 |
32 |
33 | alert('Import study mock ' + e)}
38 | onSelectItem={(studyInstanceUid) => { alert(studyInstanceUid + ' has selected! Now you can open your study.'); }}
39 | rowsPerPage={5}
40 | defaultSort={{ field: 'patientName', order: 'desc', }}
41 | studyListDateFilterNumDays={7}
42 | onSearch={onSearch.bind({ setState, defaultStudies })}
43 | />
44 |
45 |
17 |
18 | {this.getHeader()}
19 |
20 |
{this.props.children}
21 |
{this.props.headerTitle}
32 | {this.props.children.length}
33 |
34 | );
35 | }
36 | };
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/tableList/TableList.styl:
--------------------------------------------------------------------------------
1 |
2 | $headerRowHeight = 63px
3 |
4 | .tableList
5 | background-color: var(--primary-background-color)
6 | height: 100%;
7 | width: 100%;
8 |
9 | .tableListHeader
10 | background-color: var(--ui-gray-darker)
11 | color: var(--text-secondary-color)
12 | display: flex
13 | height: $headerRowHeight
14 | line-height: $headerRowHeight
15 | margin-top: 2px
16 | overflow: hidden
17 | width: 100%
18 |
19 | .tableListHeaderTitle
20 | color: var(--text-secondary-color)
21 | font-size: 22px
22 | font-weight: 300
23 | line-height: $headerRowHeight
24 | padding: 0 10px
25 | text-align: left
26 | flex: 1;
27 |
28 | .numberOfItems
29 | color: var(--ui-sky-blue)
30 | float: right
31 | font-weight: 300
32 | font-size: 40px
33 | max-width: 54px
34 | height: $headerRowHeight
35 | line-height: 66px
36 | flex: 1;
37 |
--------------------------------------------------------------------------------
/src/components/tableList/TableListItem.js:
--------------------------------------------------------------------------------
1 | import './TableListItem.styl';
2 |
3 | import { Component } from 'react';
4 | import { Icon } from './../../elements/Icon';
5 | import PropTypes from 'prop-types';
6 | import React from 'react';
7 |
8 | export class TableListItem extends Component {
9 | static propTypes = {
10 | children: PropTypes.node,
11 | itemClass: PropTypes.string,
12 | itemIndex: PropTypes.number,
13 | itemKey: PropTypes.oneOfType(['number', 'string']),
14 | onItemClick: PropTypes.func.isRequired,
15 | };
16 |
17 | render() {
18 | return (
19 |
23 |
24 | {this.props.itemIndex}
25 |
26 |
27 |
28 |
29 |
{this.props.children}
30 |
59 | {items}
60 |
61 | );
62 | }
63 | }
64 |
65 | export { ToolbarSection };
66 |
--------------------------------------------------------------------------------
/src/components/toolbarSection/ToolbarSection.styl:
--------------------------------------------------------------------------------
1 | .ToolbarSection
2 | float: left;
3 | background-color: var(--primary-background-color);
4 | border-radius: 8px;
5 |
--------------------------------------------------------------------------------
/src/components/toolbarSection/__docs__/exampleButtons.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | id: 'Pan',
4 | label: 'Pan',
5 | icon: 'arrows',
6 | },
7 | {
8 | label: 'Zoom',
9 | icon: 'search',
10 | },
11 | {
12 | label: 'Bidirectional',
13 | icon: 'measure-target',
14 | },
15 | {
16 | label: 'Stack Scroll',
17 | icon: 'bars',
18 | },
19 | {
20 | label: 'Reset',
21 | icon: 'reset',
22 | },
23 | {
24 | label: 'Manual',
25 | icon: 'level',
26 | },
27 | {
28 | label: 'More',
29 | icon: 'ellipse-circle',
30 | buttons: [
31 | {
32 | label: 'Reset 2',
33 | icon: 'reset',
34 | },
35 | {
36 | label: 'Manual 2',
37 | icon: 'adjust',
38 | },
39 | ],
40 | },
41 | ];
42 |
--------------------------------------------------------------------------------
/src/components/toolbarSection/__docs__/toolbarSection.docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Toolbar Section
3 | menu: Components
4 | route: /components/toolbar-section
5 | ---
6 |
7 | import { Playground, Props } from 'docz';
8 | import { State } from 'react-powerplug';
9 | import { ToolbarSection } from './../index.js';
10 | import exampleButtons from './exampleButtons.js';
11 | import NameSpace from '../../../__docs__/NameSpace';
12 |
13 | # ToolbarSection
14 |
15 | A basic row of buttons for a toolbar. Active command is `WwwcTool`
16 |
17 | ## Basic usage
18 |
19 |
20 | {
25 | alert('pressed');
26 | },
27 | }}
28 | >
29 | {({ state, setState }) => }
30 |
31 |
32 |
33 | ## API
34 |
35 |
36 |
37 | ## Translation Namespace
38 |
39 |
40 |
--------------------------------------------------------------------------------
/src/components/toolbarSection/index.js:
--------------------------------------------------------------------------------
1 | export { ToolbarSection } from './ToolbarSection.js';
2 |
--------------------------------------------------------------------------------
/src/components/tooltip/Tooltip.js:
--------------------------------------------------------------------------------
1 | import './Tooltip.styl';
2 |
3 | import classNames from 'classnames';
4 | import React from 'react';
5 | import PropTypes from 'prop-types';
6 |
7 | const propTypes = {
8 | /** Sets the direction the Tooltip is positioned towards. */
9 | placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
10 |
11 | /** The "top" position value for the Tooltip. */
12 | positionTop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
13 | /** The "left" position value for the Tooltip. */
14 | positionLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
15 |
16 | /** The "top" position value for the Tooltip arrow. */
17 | arrowOffsetTop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
18 | /** The "left" position value for the Tooltip arrow. */
19 | arrowOffsetLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
20 | };
21 |
22 | const defaultProps = {
23 | placement: 'right',
24 | };
25 |
26 | class Tooltip extends React.Component {
27 | render() {
28 | const {
29 | placement,
30 | positionTop,
31 | positionLeft,
32 | arrowOffsetTop,
33 | arrowOffsetLeft,
34 | className,
35 | style,
36 | children,
37 | } = this.props;
38 |
39 | const outerStyle = {
40 | top: positionTop,
41 | left: positionLeft,
42 | ...style,
43 | };
44 |
45 | const arrowStyle = {
46 | top: arrowOffsetTop,
47 | left: arrowOffsetLeft,
48 | };
49 |
50 | return (
51 |
56 |
57 |
{children}
58 |
8 |
9 |
12 |
13 |
14 |
24 |
25 |
26 | )}
27 |
28 |
29 |
30 | ## API
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/elements/form/__docs__/range.doc.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Form / Range
3 | menu: Elements
4 | route: /elements/form-range
5 | ---
6 |
7 | import { Playground, Props } from 'docz';
8 | import { State } from 'react-powerplug';
9 | import { Range } from './../index.js';
10 |
11 | # Range
12 |
13 | ## Basic usage
14 |
15 |
16 |
23 | {({ state, setState }) => (
24 |
25 |
26 |
27 | )}
28 |
29 |
30 |
31 | ## API
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/elements/form/__docs__/select.docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Form / Select
3 | menu: Elements
4 | route: /elements/form-select
5 | ---
6 |
7 | import { Playground, Props } from 'docz';
8 | import { State } from 'react-powerplug';
9 | import { Select } from './../index.js';
10 |
11 | # Select
12 |
13 | ## Basic usage
14 |
15 |
16 |
31 |
32 | {({ state, setState }) => }
33 |
34 |
35 |
36 |
37 | ## API
38 |
39 |
40 |
--------------------------------------------------------------------------------
/src/elements/form/__docs__/textArea.doc.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Form / Text Area
3 | menu: Elements
4 | route: /elements/form-textArea
5 | ---
6 |
7 | import { Playground, Props } from 'docz';
8 | import { State } from 'react-powerplug';
9 | import { TextArea } from './../index.js';
10 |
11 | # Text Area
12 |
13 | ## Basic usage
14 |
15 |
16 |
23 | {({ state, setState }) => }
24 |
25 |
26 |
27 | ## API
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/elements/form/__docs__/textInput.docs.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | name: Form / Text Input
3 | menu: Elements
4 | route: /elements/form-textInput
5 | ---
6 |
7 | import { Playground, Props } from 'docz';
8 | import { State } from 'react-powerplug';
9 | import { TextInput } from './../index.js';
10 |
11 | # Text Input
12 |
13 | ## Basic usage
14 |
15 |
16 |
21 | {({ state, setState }) => }
22 |
23 |
24 |
25 | ## API
26 |
27 |
28 |
--------------------------------------------------------------------------------
/src/elements/form/index.js:
--------------------------------------------------------------------------------
1 | export { Select } from './Select.js';
2 | export { Label } from './Label.js';
3 | export { Range } from './Range.js';
4 | export { TextArea } from './TextArea.js';
5 | export { TextInput } from './TextInput.js';
6 | export { DropdownMenu } from './DropdownMenu.js';
7 |
--------------------------------------------------------------------------------
/src/elements/index.js:
--------------------------------------------------------------------------------
1 | import { ICONS, Icon } from './Icon';
2 |
3 | export { Icon, ICONS };
4 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | CineDialog,
3 | ExampleDropTarget,
4 | LayoutButton,
5 | LayoutChooser,
6 | MeasurementTable,
7 | MeasurementTableItem,
8 | Overlay,
9 | OverlayTrigger,
10 | QuickSwitch,
11 | RoundedButtonGroup,
12 | SelectTree,
13 | SimpleDialog,
14 | StudyBrowser,
15 | StudyList,
16 | TableList,
17 | TableListItem,
18 | ThumbnailEntry,
19 | ToolbarSection,
20 | Tooltip,
21 | AboutModal,
22 | UserPreferences,
23 | UserPreferencesModal,
24 | } from './components';
25 | import { ICONS, Icon } from './elements';
26 |
27 | // Alias this for now as not all dependents are using strict versioning
28 | import { DropdownMenu as Dropdown } from './elements/form';
29 | import ExpandableToolMenu from './viewer/ExpandableToolMenu.js';
30 | import LayoutManager from './LayoutChooser/LayoutManager.js';
31 | import LayoutPanelDropTarget from './LayoutChooser/LayoutPanelDropTarget.js';
32 | import PlayClipButton from './viewer/PlayClipButton.js';
33 | import { ScrollableArea } from './ScrollableArea/ScrollableArea.js';
34 | import Toolbar from './viewer/Toolbar.js';
35 | import ToolbarButton from './viewer/ToolbarButton.js';
36 | import ViewerbaseDragDropContext from './utils/viewerbaseDragDropContext.js';
37 |
38 | export {
39 | ICONS,
40 | //
41 | CineDialog,
42 | Dropdown,
43 | ExpandableToolMenu,
44 | ExampleDropTarget,
45 | Icon,
46 | LayoutButton,
47 | LayoutChooser,
48 | LayoutManager,
49 | LayoutPanelDropTarget,
50 | MeasurementTable,
51 | MeasurementTableItem,
52 | Overlay,
53 | OverlayTrigger,
54 | PlayClipButton,
55 | QuickSwitch,
56 | RoundedButtonGroup,
57 | ScrollableArea,
58 | SelectTree,
59 | SimpleDialog,
60 | StudyBrowser,
61 | StudyList,
62 | TableList,
63 | TableListItem,
64 | ThumbnailEntry,
65 | Toolbar,
66 | ToolbarButton,
67 | ToolbarSection,
68 | Tooltip,
69 | AboutModal,
70 | UserPreferences,
71 | UserPreferencesModal,
72 | ViewerbaseDragDropContext,
73 | };
74 |
--------------------------------------------------------------------------------
/src/test.js:
--------------------------------------------------------------------------------
1 | import * as ReactViewerbase from './index.js';
2 |
3 | describe('Top level exports', () => {
4 | test('have not changed', () => {
5 | const expectedExports = [
6 | 'ICONS',
7 | //
8 | 'CineDialog',
9 | 'Dropdown',
10 | 'ExpandableToolMenu',
11 | 'ExampleDropTarget',
12 | 'Icon',
13 | 'LayoutButton',
14 | 'LayoutChooser',
15 | 'LayoutManager',
16 | 'LayoutPanelDropTarget',
17 | 'MeasurementTable',
18 | 'MeasurementTableItem',
19 | 'Overlay',
20 | 'OverlayTrigger',
21 | 'PlayClipButton',
22 | 'QuickSwitch',
23 | 'RoundedButtonGroup',
24 | 'ScrollableArea',
25 | 'SelectTree',
26 | 'SimpleDialog',
27 | 'StudyBrowser',
28 | 'StudyList',
29 | 'TableList',
30 | 'TableListItem',
31 | 'ThumbnailEntry',
32 | 'Toolbar',
33 | 'ToolbarButton',
34 | 'ToolbarSection',
35 | 'Tooltip',
36 | 'AboutModal',
37 | 'UserPreferences',
38 | 'UserPreferencesModal',
39 | 'ViewerbaseDragDropContext',
40 | ].sort();
41 |
42 | const exports = Object.keys(ReactViewerbase).sort();
43 |
44 | expect(exports).toEqual(expectedExports);
45 | });
46 | });
47 |
--------------------------------------------------------------------------------
/src/utils/LanguageProvider.js:
--------------------------------------------------------------------------------
1 | // Reference > https://reactjs.org/docs/context.html
2 | import React from 'react';
3 | import {
4 | withTranslation as I18NextWithTranslation,
5 | I18nextProvider,
6 | } from 'react-i18next';
7 | import i18n from '@ohif/i18n';
8 |
9 | const WrapperI18n = Component => {
10 | const WrapperComponent = props => (
11 |
12 |
13 |
14 | );
15 |
16 | return WrapperComponent;
17 | };
18 |
19 | const withTranslation = namespace => Component => {
20 | const TranslatedComponent = props => {
21 | return ;
22 | };
23 |
24 | return WrapperI18n(I18NextWithTranslation(namespace)(TranslatedComponent));
25 | };
26 |
27 | export { withTranslation };
28 | export default withTranslation;
29 |
--------------------------------------------------------------------------------
/src/utils/getScrollbarSize.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Get the vertical and horizontal scrollbar sizes
3 | * Got from https://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes
4 | *
5 | * @returns {Array} Array containing the scrollbar horizontal and vertical sizes
6 | */
7 | export default function getScrollbarSize() {
8 | const inner = document.createElement('p');
9 | inner.style.width = '100%';
10 | inner.style.height = '100%';
11 |
12 | const outer = document.createElement('div');
13 | outer.style.position = 'absolute';
14 | outer.style.top = '0px';
15 | outer.style.left = '0px';
16 | outer.style.visibility = 'hidden';
17 | outer.style.width = '100px';
18 | outer.style.height = '100px';
19 | outer.style.overflow = 'hidden';
20 | outer.appendChild(inner);
21 |
22 | document.body.appendChild(outer);
23 |
24 | const w1 = inner.offsetWidth;
25 | const h1 = inner.offsetHeight;
26 | outer.style.overflow = 'scroll';
27 | let w2 = inner.offsetWidth;
28 | let h2 = inner.offsetHeight;
29 |
30 | if (w1 === w2) {
31 | w2 = outer.clientWidth;
32 | }
33 |
34 | if (h1 === h2) {
35 | h2 = outer.clientHeight;
36 | }
37 |
38 | document.body.removeChild(outer);
39 |
40 | return [w1 - w2, h1 - h2];
41 | }
42 |
--------------------------------------------------------------------------------
/src/utils/styleProperty.js:
--------------------------------------------------------------------------------
1 | // https://github.com/swederik/dragula/blob/ccc15d75186f5168e7abadbe3077cf12dab09f8b/styleProperty.js
2 |
3 | const browserProps = {};
4 |
5 | function eachVendor(prop, fn) {
6 | const prefixes = ['Webkit', 'Moz', 'ms', 'O'];
7 | fn(prop);
8 | for (let i = 0; i < prefixes.length; i++) {
9 | fn(prefixes[i] + prop.charAt(0).toUpperCase() + prop.slice(1));
10 | }
11 | }
12 |
13 | function check(property, testValue) {
14 | const sandbox = document.createElement('iframe');
15 | const element = document.createElement('p');
16 |
17 | document.body.appendChild(sandbox);
18 | sandbox.contentDocument.body.appendChild(element);
19 | const support = set(element, property, testValue);
20 |
21 | // We have to do this because remove() is not supported by IE11 and below
22 | sandbox.parentElement.removeChild(sandbox);
23 | return support;
24 | }
25 |
26 | function checkComputed(el, prop) {
27 | const computed = window.getComputedStyle(el).getPropertyValue(prop);
28 | return computed !== void 0 && computed.length > 0 && computed !== 'none';
29 | }
30 |
31 | function set(el, prop, value) {
32 | let match = false;
33 |
34 | if (browserProps[prop] === void 0) {
35 | eachVendor(prop, function(vendorProp) {
36 | if (el.style[vendorProp] !== void 0 && match === false) {
37 | el.style[vendorProp] = value;
38 | if (checkComputed(el, vendorProp)) {
39 | match = true;
40 | browserProps[prop] = vendorProp;
41 | }
42 | }
43 | });
44 | } else {
45 | el.style[browserProps[prop]] = value;
46 | return true;
47 | }
48 |
49 | return match;
50 | }
51 |
52 | const styleProperty = {
53 | check,
54 | set,
55 | };
56 |
57 | export default styleProperty;
58 |
--------------------------------------------------------------------------------
/src/utils/throttled.js:
--------------------------------------------------------------------------------
1 | export default function throttled(delay, callback) {
2 | let isThrottled = false,
3 | args,
4 | context;
5 |
6 | function wrapper() {
7 | if (isThrottled) {
8 | args = arguments;
9 | context = this;
10 | return;
11 | }
12 |
13 | isThrottled = true;
14 | callback.apply(this, arguments);
15 |
16 | setTimeout(() => {
17 | isThrottled = false;
18 | if (args) {
19 | wrapper.apply(context, args);
20 | args = context = null;
21 | }
22 | }, delay);
23 | }
24 |
25 | return wrapper;
26 | }
27 |
--------------------------------------------------------------------------------
/src/utils/viewerbaseDragDropContext.js:
--------------------------------------------------------------------------------
1 | import { DragDropContext } from 'react-dnd';
2 | import TouchBackend from 'react-dnd-touch-backend';
3 |
4 | // See https://github.com/react-dnd/react-dnd/issues/186#issuecomment-335429067
5 | // https://github.com/react-dnd/react-dnd/issues/186#issuecomment-282789420
6 | // TODO: Find a way for this context to be used in the parent application as well.
7 |
8 | // http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
9 | export default function viewerbaseDragDropContext(DecoratedClass) {
10 | return DragDropContext(TouchBackend({ enableMouseEvents: true }), null, true)(
11 | DecoratedClass
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/viewer/PlayClipButton.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import { Icon } from './../elements/Icon';
4 | import PropTypes from 'prop-types';
5 |
6 | export default class PlayClipButton extends Component {
7 | static propTypes = {
8 | isPlaying: PropTypes.bool.isRequired,
9 | };
10 |
11 | static defaultProps = {
12 | isPlaying: false,
13 | };
14 |
15 | render() {
16 | const iconName = this.props.isPlaying ? 'stop' : 'play';
17 |
18 | return (
19 |
20 |
31 |
42 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/viewer/PresetToggle.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import React from 'react';
4 | import ToolbarButton from './ToolbarButton.js';
5 |
6 | const wLPresetIDs = [
7 | 'setWLPresetSoftTissue',
8 | 'setWLPresetLung',
9 | 'setWLPresetLiver',
10 | 'setWLPresetBrain',
11 | ];
12 |
13 | export default class PresetToggle extends Component {
14 | static propTypes = {
15 | buttons: PropTypes.arrayOf(
16 | PropTypes.shape({
17 | label: PropTypes.string.isRequired,
18 | icon: PropTypes.oneOfType([
19 | PropTypes.string,
20 | PropTypes.shape({
21 | name: PropTypes.string.isRequired,
22 | }),
23 | ]),
24 | })
25 | ).isRequired,
26 | setToolActive: PropTypes.func.isRequired,
27 | };
28 |
29 | constructor(props) {
30 | super(props);
31 |
32 | this.state = {
33 | presetSelected: null,
34 | };
35 | }
36 | render() {
37 | /*const items = this.props.buttons.map((item, index) => {
38 | return ;
39 | });*/
40 |
41 | const wlPresetItems = this.props.buttons.map((button, index) => {
42 | if (wLPresetIDs.includes(button.command)) {
43 | return ;
44 | }
45 | return '';
46 | });
47 |
48 | const toolItems = this.props.buttons.map((button, index) => {
49 | if (!wLPresetIDs.includes(button.command)) {
50 | return ;
51 | }
52 | return '';
53 | });
54 |
55 | const selectedButton = this.props.buttons.find(button => {
56 | return button.id === this.state.selected;
57 | });
58 |
59 | return (
60 |
61 |
{wlPresetItems}
62 |
{toolItems}
63 |
64 | LEVELS:
65 | {selectedButton ? selectedButton.label : 'Manual'}
66 |
67 |
28 | {iconProps &&
}
29 |
30 | {t(label)}
31 | {arrowIcon}
32 |
33 |
19 |
Error
20 |
An error has occurred.
21 |
{props.details}
22 |
19 | Loading {props.percentComplete}
20 |
21 | );
22 | }
23 |
24 | ViewportLoadingIndicator.propTypes = {
25 | percentComplete: PropTypes.number,
26 | };
27 |
28 | export default ViewportLoadingIndicator;
29 |
--------------------------------------------------------------------------------
/src/viewer/toolbar-button.styl:
--------------------------------------------------------------------------------
1 | .toolbar-button
2 | height: 48px;
3 | color: var(--default-color);
4 | float: left;
5 | text-align: center;
6 | padding: 0 10px;
7 | cursor: pointer;
8 | -webkit-touch-callout: none; /* iOS Safari */
9 | -webkit-user-select: none; /* Safari */
10 | -khtml-user-select: none; /* Konqueror HTML */
11 | -moz-user-select: none; /* Firefox */
12 | -ms-user-select: none; /* Internet Explorer/Edge */
13 | user-select: none; /* Chrome and Opera */
14 |
15 | .toolbar-button-label
16 | font-size: 12px;
17 | font-weight: 500;
18 |
19 | .expand-caret
20 | width: 8px;
21 | height: 8px;
22 | transform: translate(2px, 2px);
23 |
24 | svg
25 | height: 21px;
26 | width: 21px;
27 | margin: 2px;
28 |
29 | &:hover
30 | color: var(--hover-color);
31 |
32 | &.active, &:active
33 | color: var(--active-color);
34 |
--------------------------------------------------------------------------------