feat: 🎸 Update hotkeys and user preferences modal (#1135)
* feat: 🎸 Update hotkeys and user preferences modal This feature fix incompatibility with existent hotkeys component and adds user preferences modal back Closes: #923 * Update preferences structure in store * Hide window level section of user preferences * Update modal to reflect current hotkey value * Clone object with hotkeys before passing to manager * CR Update: Extract hotkeys manager format code to manager * Fix broken cypress test * Use new modal provider * Rename hotkeyDefinitions in hotkeyspreferences and use array as representation * Update study test and remove unused styles
This commit is contained in:
Igor Octaviano authored and Danny Brown committed
1 parent
dc6e9d6bb5
commit
e62f5f8dd2
26 files changed
+263
-256
No files matched your search
@@ -0,0 +1,17 @@
|
||||
import React, { Component } from 'react';
|
||||
import LanguageSwitcher from '../languageSwitcher';
|
||||
|
||||
export class GeneralPreferences extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="general-preferences-wrapper">
|
||||
<div className="col-sm-3">
|
||||
<label htmlFor="language-select" className="p-r-1">
|
||||
Language
|
||||
</label>
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,255 @@
|
||||
import './HotKeysPreferences.styl';
|
||||
import React, { Component } from 'react';
|
||||
import {
|
||||
allowedKeys,
|
||||
disallowedCombinations,
|
||||
specialKeys,
|
||||
} from './hotKeysConfig.js';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export class HotKeysPreferences extends Component {
|
||||
static propTypes = {
|
||||
hotkeyDefinitions: PropTypes.array.isRequired,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
hotKeys: this.props.hotkeyDefinitions,
|
||||
errorMessages: {},
|
||||
};
|
||||
|
||||
this.onInputKeyDown = this.onInputKeyDown.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalizes the keys used in a KeyPress event and returns an array of the
|
||||
* keys pressed
|
||||
*
|
||||
* @param {KeyDownEvent} keyDownEvent
|
||||
* @returns {string[]}
|
||||
*/
|
||||
getKeysPressedArray(keyDownEvent) {
|
||||
const keysPressedArray = [];
|
||||
const { ctrlKey, altKey, shiftKey } = keyDownEvent;
|
||||
|
||||
if (ctrlKey && !altKey) {
|
||||
keysPressedArray.push('ctrl');
|
||||
}
|
||||
|
||||
if (shiftKey && !altKey) {
|
||||
keysPressedArray.push('shift');
|
||||
}
|
||||
|
||||
if (altKey && !ctrlKey) {
|
||||
keysPressedArray.push('alt');
|
||||
}
|
||||
|
||||
return keysPressedArray;
|
||||
}
|
||||
|
||||
getConflictingCommand(currentCommandName, currentHotKeys) {
|
||||
return this.state.hotKeys.find((tool, index) => {
|
||||
const toolHotKeys = tool.keys[0];
|
||||
return (
|
||||
toolHotKeys &&
|
||||
toolHotKeys === currentHotKeys &&
|
||||
tool.commandName !== currentCommandName
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {String} commandName
|
||||
* @param {KeyDownEvent} keyDownEvent
|
||||
* @param {Boolean} [displayPressedKey=false]
|
||||
*/
|
||||
updateInputText(commandName, keyDownEvent, displayPressedKey = false) {
|
||||
const pressedKeys = this.getKeysPressedArray(keyDownEvent);
|
||||
|
||||
if (displayPressedKey) {
|
||||
const specialKeyName = specialKeys[keyDownEvent.which];
|
||||
const keyName =
|
||||
specialKeyName ||
|
||||
keyDownEvent.key ||
|
||||
String.fromCharCode(keyDownEvent.keyCode);
|
||||
pressedKeys.push(keyName);
|
||||
}
|
||||
|
||||
this.updateHotKeysState(commandName, pressedKeys.join('+'));
|
||||
}
|
||||
|
||||
updateHotKeysState(commandName, keys) {
|
||||
const hotKeys = this.state.hotKeys;
|
||||
const hotKeyIndex = this.state.hotKeys.findIndex(
|
||||
x => x.commandName === commandName
|
||||
);
|
||||
hotKeys[hotKeyIndex].keys[0] = keys;
|
||||
this.setState({ hotKeys });
|
||||
}
|
||||
|
||||
updateErrorsState(toolKey, errorMessage) {
|
||||
const errorMessages = this.state.errorMessages;
|
||||
errorMessages[toolKey] = errorMessage;
|
||||
this.setState({ errorMessages });
|
||||
}
|
||||
|
||||
onInputKeyDown(event, commandName) {
|
||||
// Prevent ESC key from propagating and closing the modal
|
||||
if (event.key === 'Escape') {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
if (allowedKeys.includes(event.keyCode)) {
|
||||
this.updateInputText(commandName, event, true);
|
||||
} else {
|
||||
this.updateInputText(commandName, event, false);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
onChange(event, commandName) {
|
||||
if (event.ctrlKey || event.altKey || event.shiftKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hotKeyIndex = this.state.hotKeys.findIndex(
|
||||
x => x.commandName === commandName
|
||||
);
|
||||
const hotKey = this.state.hotKeys[hotKeyIndex];
|
||||
const keys = hotKey.keys[0];
|
||||
const pressedKeys = keys.split('+');
|
||||
const lastPressedKey = pressedKeys[pressedKeys.length - 1];
|
||||
|
||||
// clear the prior errors
|
||||
this.setState({ errorMessages: {} }, () => {
|
||||
// Check if it has a valid modifier
|
||||
const isModifier = ['ctrl', 'alt', 'shift'].includes(lastPressedKey);
|
||||
if (isModifier) {
|
||||
this.updateHotKeysState(commandName, '');
|
||||
this.updateErrorsState(
|
||||
commandName,
|
||||
"It's not possible to define only modifier keys (ctrl, alt and shift) as a shortcut"
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
/*
|
||||
* Check if it has some conflict
|
||||
*/
|
||||
const conflictedCommand = this.getConflictingCommand(commandName, keys);
|
||||
if (conflictedCommand) {
|
||||
this.updateHotKeysState(commandName, '');
|
||||
this.updateErrorsState(
|
||||
commandName,
|
||||
`"${conflictedCommand.label}" is already using the "${keys}" shortcut.`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
/*
|
||||
* Check if is a valid combination
|
||||
*/
|
||||
const modifierCommand = pressedKeys
|
||||
.slice(0, pressedKeys.length - 1)
|
||||
.join('+');
|
||||
|
||||
const disallowedCombination = disallowedCombinations[modifierCommand];
|
||||
const hasDisallowedCombinations = disallowedCombination
|
||||
? disallowedCombination.includes(lastPressedKey)
|
||||
: false;
|
||||
|
||||
if (hasDisallowedCombinations) {
|
||||
this.updateHotKeysState(commandName, '');
|
||||
this.updateErrorsState(
|
||||
commandName,
|
||||
`"${pressedKeys.join('+')}" shortcut combination is not allowed`
|
||||
);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
renderRow({ commandName, label, keys }) {
|
||||
return (
|
||||
<tr key={commandName}>
|
||||
<td className="text-right p-r-1">{label}</td>
|
||||
<td width="200">
|
||||
<label
|
||||
className={`wrapperLabel ${
|
||||
this.state.errorMessages[commandName] !== undefined
|
||||
? 'state-error'
|
||||
: ''
|
||||
} `}
|
||||
ref={input => (this[commandName] = input)}
|
||||
data-key="defaultTool"
|
||||
>
|
||||
<input
|
||||
readOnly={true}
|
||||
type="text"
|
||||
value={keys[0]}
|
||||
vali="true"
|
||||
className="form-control hotkey text-center"
|
||||
onKeyDown={event => this.onInputKeyDown(event, commandName)}
|
||||
onKeyUp={event => this.onChange(event, commandName)}
|
||||
/>
|
||||
<span className="wrapperText" />
|
||||
<span className="errorMessage">
|
||||
{this.state.errorMessages[commandName]}
|
||||
</span>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const halfWayThough = Math.floor(this.state.hotKeys.length / 2);
|
||||
const firstHalfHotkeys = this.state.hotKeys.slice(0, halfWayThough);
|
||||
const secondHalfHotkeys = this.state.hotKeys.slice(
|
||||
halfWayThough,
|
||||
this.state.hotKeys.length
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="HotKeysPreferences">
|
||||
{/* <!-- Column 1 --> */}
|
||||
<div className="column">
|
||||
<table className="full-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-right p-r-1">Function</th>
|
||||
<th className="text-center">Shortcut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{firstHalfHotkeys.map(hotkeyDefinition =>
|
||||
this.renderRow(hotkeyDefinition)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* <!-- Column 2 --> */}
|
||||
<div className="column">
|
||||
<table className="full-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="text-right p-r-1">Function</th>
|
||||
<th className="text-center">Shortcut</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{secondHalfHotkeys.map(hotkeyDefinition =>
|
||||
this.renderRow(hotkeyDefinition)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
.HotKeysPreferences
|
||||
display: flex;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
|
||||
.column
|
||||
width: 50%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
||||
.column-full
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
@@ -0,0 +1,122 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { HotKeysPreferences } from './HotKeysPreferences';
|
||||
import { WindowLevelPreferences } from './WindowLevelPreferences';
|
||||
import { GeneralPreferences } from './GeneralPreferences';
|
||||
import './UserPreferences.styl';
|
||||
|
||||
export class UserPreferences extends Component {
|
||||
static defaultProps = {
|
||||
hotkeyDefinitions: [],
|
||||
windowLevelData: {},
|
||||
generalData: {},
|
||||
};
|
||||
|
||||
// TODO: Make this more generic. Tabs should not be restricted to these entries
|
||||
static propTypes = {
|
||||
hotkeyDefinitions: PropTypes.array.isRequired,
|
||||
windowLevelData: PropTypes.object.isRequired,
|
||||
generalData: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
tabIndex: 0,
|
||||
};
|
||||
|
||||
tabClick(tabIndex) {
|
||||
this.setState({ tabIndex });
|
||||
}
|
||||
|
||||
renderHotkeysTab() {
|
||||
return (
|
||||
<form className="form-themed themed">
|
||||
<div className="form-content">
|
||||
<HotKeysPreferences
|
||||
hotkeyDefinitions={this.props.hotkeyDefinitions}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
renderWindowLevelTab() {
|
||||
if (this.props.windowLevelData) {
|
||||
return (
|
||||
<form className="form-themed themed">
|
||||
<div className="form-content">
|
||||
<WindowLevelPreferences
|
||||
windowLevelData={this.props.windowLevelData}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
renderGeneralTab() {
|
||||
return (
|
||||
<form className="form-themed themed">
|
||||
<div className="form-content">
|
||||
<GeneralPreferences generalData={this.props.generalData} />
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
renderTabs(tabIndex) {
|
||||
switch (tabIndex) {
|
||||
case 0:
|
||||
return this.renderHotkeysTab();
|
||||
/* case 1:
|
||||
return this.renderWindowLevelTab(); */
|
||||
case 2:
|
||||
return this.renderGeneralTab();
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
getTabClass(tabIndex) {
|
||||
return tabIndex === this.state.tabIndex ? 'nav-link active' : 'nav-link';
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="dialog-separator-after">
|
||||
<ul className="nav nav-tabs">
|
||||
<li
|
||||
onClick={() => {
|
||||
this.tabClick(0);
|
||||
}}
|
||||
className={this.getTabClass(0)}
|
||||
>
|
||||
<button>Hotkeys</button>
|
||||
</li>
|
||||
{false && (
|
||||
<li
|
||||
onClick={() => {
|
||||
this.tabClick(1);
|
||||
}}
|
||||
className={this.getTabClass(1)}
|
||||
>
|
||||
<button>Window Level</button>
|
||||
</li>
|
||||
)}
|
||||
<li
|
||||
onClick={() => {
|
||||
this.tabClick(2);
|
||||
}}
|
||||
className={this.getTabClass(2)}
|
||||
>
|
||||
<button>General</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{this.renderTabs(this.state.tabIndex)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@import './../../design/styles/common/form.styl'
|
||||
@import './../../design/styles/common/navbar.styl'
|
||||
@import './../../design/styles/common/state.styl'
|
||||
@import './../../design/styles/common/global.styl'
|
||||
|
||||
.modal-body
|
||||
overflow: hidden
|
||||
|
||||
.errorMessage
|
||||
color: var(--state-error-text)
|
||||
font-size: 10px
|
||||
text-transform: uppercase;
|
||||
|
||||
.form-content
|
||||
border-bottom: 3px solid var(--primary-background-color)
|
||||
margin-bottom: 20px
|
||||
margin-left: -22px
|
||||
margin-right: -22px
|
||||
max-height: 70vh
|
||||
overflow-y: auto
|
||||
padding: 22px
|
||||
min-height: 500px
|
||||
|
||||
.popover
|
||||
width: 300px
|
||||
@@ -0,0 +1,86 @@
|
||||
import './UserPreferencesForm.styl';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withTranslation } from '../../utils/LanguageProvider';
|
||||
|
||||
import cloneDeep from 'lodash.clonedeep';
|
||||
import isEqual from 'lodash.isequal';
|
||||
import { UserPreferences } from './UserPreferences';
|
||||
|
||||
class UserPreferencesForm extends Component {
|
||||
// TODO: Make this component more generic to allow things other than W/L and hotkeys...
|
||||
static propTypes = {
|
||||
onClose: PropTypes.func,
|
||||
onSave: PropTypes.func,
|
||||
onResetToDefaults: PropTypes.func,
|
||||
windowLevelData: PropTypes.object,
|
||||
hotkeyDefinitions: PropTypes.array,
|
||||
t: PropTypes.func,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
windowLevelData: cloneDeep(props.windowLevelData),
|
||||
hotkeyDefinitions: cloneDeep(props.hotkeyDefinitions),
|
||||
};
|
||||
}
|
||||
|
||||
save = () => {
|
||||
this.props.onSave({
|
||||
windowLevelData: this.state.windowLevelData,
|
||||
hotkeyDefinitions: this.state.hotkeyDefinitions,
|
||||
});
|
||||
};
|
||||
|
||||
componentDidUpdate(prev, next) {
|
||||
const newStateData = {};
|
||||
|
||||
if (!isEqual(prev.windowLevelData, next.windowLevelData)) {
|
||||
newStateData.windowLevelData = prev.windowLevelData;
|
||||
}
|
||||
|
||||
if (!isEqual(prev.hotkeyDefinitions, next.hotkeyDefinitions)) {
|
||||
newStateData.hotkeyDefinitions = prev.hotkeyDefinitions;
|
||||
}
|
||||
|
||||
if (newStateData.hotkeyDefinitions || newStateData.windowLevelData) {
|
||||
this.setState(newStateData);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="UserPreferencesForm">
|
||||
<UserPreferences
|
||||
windowLevelData={this.state.windowLevelData}
|
||||
hotkeyDefinitions={this.state.hotkeyDefinitions}
|
||||
/>
|
||||
<div className="footer">
|
||||
<button
|
||||
className="btn btn-danger pull-left"
|
||||
onClick={this.props.onResetToDefaults}
|
||||
>
|
||||
{this.props.t('Reset to Defaults')}
|
||||
</button>
|
||||
<div>
|
||||
<div onClick={this.props.onClose} className="btn btn-default">
|
||||
{this.props.t('Cancel')}
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={this.save}>
|
||||
{this.props.t('Save')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const connectedComponent = withTranslation('UserPreferencesForm')(
|
||||
UserPreferencesForm
|
||||
);
|
||||
export { connectedComponent as UserPreferencesForm };
|
||||
export default connectedComponent;
|
||||
@@ -0,0 +1,24 @@
|
||||
@import './../../design/styles/common/navbar.styl'
|
||||
@import './../../design/styles/common/global.styl'
|
||||
@import './../../design/styles/common/modal.styl'
|
||||
@import './../../design/styles/common/button.styl'
|
||||
|
||||
.close
|
||||
float: right;
|
||||
font-size: 21px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
opacity: .2;
|
||||
|
||||
.UserPreferencesForm
|
||||
.footer
|
||||
display: flex
|
||||
flex-direction: row
|
||||
padding-bottom: 20px
|
||||
justify-content: space-between
|
||||
|
||||
div
|
||||
button:last-child
|
||||
margin-left: 10px
|
||||
@@ -0,0 +1,94 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './WindowLevelPreferences.styl';
|
||||
|
||||
export class WindowLevelPreferences extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
data: this.props.windowLevelData,
|
||||
};
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
windowLevelData: PropTypes.object.isRequired,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
onChange(event, key, field) {
|
||||
const data = this.state.data;
|
||||
const entry = data[key];
|
||||
entry[field] = event.target.value;
|
||||
this.setState({ data });
|
||||
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(data);
|
||||
}
|
||||
}
|
||||
|
||||
getWLPreferencesRows(key) {
|
||||
const entry = this.state.data[key];
|
||||
return (
|
||||
<tr key={key}>
|
||||
<td className="p-r-1 text-center">{key}</td>
|
||||
<td className="p-r-1">
|
||||
<label className="wrapperLabel">
|
||||
<input
|
||||
value={entry.description}
|
||||
type="text"
|
||||
className="form-control"
|
||||
onChange={event => {
|
||||
this.onChange(event, key, 'description');
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td className="p-r-1">
|
||||
<label className="wrapperLabel">
|
||||
<input
|
||||
value={entry.window}
|
||||
type="number"
|
||||
className="form-control"
|
||||
onChange={event => {
|
||||
this.onChange(event, key, 'window');
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
<td className="p-r-1">
|
||||
<label className="wrapperLabel">
|
||||
<input
|
||||
value={entry.level}
|
||||
type="number"
|
||||
className="form-control"
|
||||
onChange={event => {
|
||||
this.onChange(event, key, 'level');
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<table className="full-width">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="p-x-1 text-center presetIndex">Preset</th>
|
||||
<th className="p-x-1">Description</th>
|
||||
<th className="p-x-1">Window</th>
|
||||
<th className="p-x-1">Level</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{Object.keys(this.state.data).map(key => {
|
||||
return this.getWLPreferencesRows(key);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@import './UserPreferences.styl'
|
||||
|
||||
.presetIndex
|
||||
padding: 0px 10px 0px 10px
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
name: About Modal
|
||||
menu: Components
|
||||
route: /components/about-modal
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { AboutContent } from './../index.js'
|
||||
|
||||
# About Modal
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State initial={{
|
||||
isOpen: false
|
||||
}}>
|
||||
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
type="button"
|
||||
onClick={ () => setState({ isOpen: true }) }
|
||||
>
|
||||
Open about modal
|
||||
</button>
|
||||
<AboutContent
|
||||
{...state}
|
||||
onCancel={() => setState({ isOpen: false })}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
||||
</State>
|
||||
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={AboutContent} />
|
||||
@@ -0,0 +1,14 @@
|
||||
export default {
|
||||
currentLanguage: 'en',
|
||||
languages: [
|
||||
{
|
||||
value: 'en',
|
||||
label: 'English',
|
||||
},
|
||||
{
|
||||
value: 'es',
|
||||
label: 'Spanish',
|
||||
},
|
||||
],
|
||||
onChange: language => {},
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
export default {
|
||||
defaultTool: { label: 'Default Tool', keys: ['ESC'], column: 0 },
|
||||
zoom: { label: 'Zoom', keys: ['Z'], column: 0 },
|
||||
wwwc: { label: 'W/L', keys: ['W'], column: 0 },
|
||||
pan: { label: 'Pan', keys: ['P'], column: 0 },
|
||||
angle: { label: 'Angle measurement', keys: ['A'], column: 0 },
|
||||
stackScroll: { label: 'Scroll stack', keys: ['S'], column: 0 },
|
||||
magnify: { label: 'Magnify', keys: ['M'], column: 0 },
|
||||
length: { label: 'Length measurement', keys: [''], column: 0 },
|
||||
annotate: { label: 'Annotate', keys: [''], column: 0 },
|
||||
dragProbe: { label: 'Pixel probe', keys: [''], column: 0 },
|
||||
ellipticalRoi: { label: 'Elliptical ROI', keys: [''], column: 0 },
|
||||
rectangleRoi: { label: 'Rectangle ROI', keys: [''], column: 0 },
|
||||
|
||||
// Viewport hotkeys
|
||||
flipH: { label: 'Flip Horizontally', keys: ['H'], column: 0 },
|
||||
flipV: { label: 'Flip Vertically', keys: ['V'], column: 0 },
|
||||
rotateR: { label: 'Rotate Right', keys: ['R'], column: 0 },
|
||||
rotateL: { label: 'Rotate Left', keys: ['L'], column: 0 },
|
||||
invert: { label: 'Invert', keys: ['I'], column: 0 },
|
||||
zoomIn: { label: 'Zoom In', keys: [''], column: 0 },
|
||||
zoomOut: { label: 'Zoom Out', keys: [''], column: 0 },
|
||||
zoomToFit: { label: 'Zoom to Fit', keys: [''], column: 0 },
|
||||
resetViewport: { label: 'Reset', keys: [''], column: 0 },
|
||||
clearTools: { label: 'Clear Tools', keys: [''], column: 0 },
|
||||
|
||||
// 2nd column
|
||||
|
||||
// Viewport navigation hotkeys
|
||||
scrollDown: { label: 'Scroll Down', keys: ['DOWN'], column: 1 },
|
||||
scrollUp: { label: 'Scroll Up', keys: ['UP'], column: 1 },
|
||||
scrollLastImage: { label: 'Scroll to Last Image', keys: ['END'], column: 1 },
|
||||
scrollFirstImage: {
|
||||
label: 'Scroll to First Image',
|
||||
keys: ['HOME'],
|
||||
column: 1,
|
||||
},
|
||||
previousDisplaySet: {
|
||||
label: 'Previous Series',
|
||||
keys: ['PAGEUP'],
|
||||
column: 1,
|
||||
},
|
||||
nextDisplaySet: { label: 'Next Series', keys: ['PAGEDOWN'], column: 1 },
|
||||
nextPanel: { label: 'Next Image Viewport', keys: ['RIGHT'], column: 1 },
|
||||
previousPanel: {
|
||||
label: 'Previous Image Viewport',
|
||||
keys: ['LEFT'],
|
||||
column: 1,
|
||||
},
|
||||
|
||||
// Miscellaneous hotkeys
|
||||
toggleOverlayTags: {
|
||||
label: 'Toggle Image Info Overlay',
|
||||
keys: ['O'],
|
||||
column: 1,
|
||||
},
|
||||
toggleCinePlay: { label: 'Play/Pause Cine', keys: ['SPACE'], column: 1 },
|
||||
toggleCineDialog: {
|
||||
label: 'Show/Hide Cine Controls',
|
||||
keys: [''],
|
||||
column: 1,
|
||||
},
|
||||
|
||||
// Preset hotkeys
|
||||
WLPreset0: { label: 'W/L Preset 0 (Soft Tissue)', keys: ['1'], column: 1 },
|
||||
WLPreset1: { label: 'W/L Preset 1 (Lung)', keys: ['2'], column: 1 },
|
||||
WLPreset2: { label: 'W/L Preset 2 (Liver)', keys: ['3'], column: 1 },
|
||||
WLPreset3: { label: 'W/L Preset 3 (Bone)', keys: ['4'], column: 1 },
|
||||
WLPreset4: { label: 'W/L Preset 4 (Brain)', keys: ['5'], column: 1 },
|
||||
WLPreset5: { label: 'W/L Preset 5', keys: ['6'], column: 1 },
|
||||
WLPreset6: { label: 'W/L Preset 6', keys: ['7'], column: 1 },
|
||||
WLPreset7: { label: 'W/L Preset 7', keys: ['8'], column: 1 },
|
||||
WLPreset8: { label: 'W/L Preset 8', keys: ['9'], column: 1 },
|
||||
WLPreset9: { label: 'W/L Preset 0', keys: ['0'], column: 1 },
|
||||
};
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
name: User Preferences Form
|
||||
menu: Components
|
||||
route: /components/user-preferences-form
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { UserPreferencesForm } from './../index.js'
|
||||
import NameSpace from '../../../__docs__/NameSpace'
|
||||
//
|
||||
import windowLevelDefaults from './windowLevelDefaults.js'
|
||||
import hotkeyDefaults from './hotkeyDefaults.js'
|
||||
|
||||
# User Preferences Form
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State initial={{
|
||||
isOpen: false,
|
||||
windowLevelData: windowLevelDefaults,
|
||||
hotkeyDefinitions: hotkeyDefaults,
|
||||
}}>
|
||||
|
||||
{({ state, setState }) => (
|
||||
<React.Fragment>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
type="button"
|
||||
onClick={ () => setState({ isOpen: true }) }
|
||||
>
|
||||
Open user preferences
|
||||
</button>
|
||||
<UserPreferencesForm
|
||||
{...state}
|
||||
onCancel={() => setState({ isOpen: false })}
|
||||
onSave={() => alert('on save')}
|
||||
onResetToDefaults={() => alert('on reset')}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)}
|
||||
|
||||
</State>
|
||||
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={UserPreferencesForm} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="UserPreferencesForm" />
|
||||
@@ -0,0 +1,13 @@
|
||||
export default {
|
||||
0: { description: 'Soft tissue', window: 400, level: 40 },
|
||||
1: { description: 'Lung', window: 1500, level: -600 },
|
||||
2: { description: 'Liver', window: 150, level: 90 },
|
||||
3: { description: 'Bone', window: 2500, level: 480 },
|
||||
4: { description: 'Brain', window: 80, level: 40 },
|
||||
5: { description: '', window: '', level: '' },
|
||||
6: { description: '', window: '', level: '' },
|
||||
7: { description: '', window: '', level: '' },
|
||||
8: { description: '', window: '', level: '' },
|
||||
9: { description: '', window: '', level: '' },
|
||||
10: { description: '', window: '', level: '' },
|
||||
};
|
||||
@@ -0,0 +1,100 @@
|
||||
const range = (start, end) => {
|
||||
return new Array(end - start).fill().map((d, i) => i + start);
|
||||
};
|
||||
|
||||
export const disallowedCombinations = {
|
||||
'': [],
|
||||
alt: ['space'],
|
||||
shift: [],
|
||||
ctrl: [
|
||||
'f4',
|
||||
'f5',
|
||||
'f11',
|
||||
'w',
|
||||
'r',
|
||||
't',
|
||||
'o',
|
||||
'p',
|
||||
'a',
|
||||
'd',
|
||||
'f',
|
||||
'g',
|
||||
'h',
|
||||
'j',
|
||||
'l',
|
||||
'z',
|
||||
'x',
|
||||
'c',
|
||||
'v',
|
||||
'b',
|
||||
'n',
|
||||
'pagedown',
|
||||
'pageup',
|
||||
],
|
||||
'ctrl+shift': ['q', 'w', 'r', 't', 'p', 'a', 'h', 'v', 'b', 'n'],
|
||||
};
|
||||
|
||||
export const allowedKeys = [
|
||||
...[8, 13, 27, 32, 46], // backspace, enter, escape, space, delete
|
||||
...[12, 106, 107, 109, 110, 111], // Numpad keys
|
||||
...range(218, 220), // [\]
|
||||
...range(185, 190), // ;=,-./
|
||||
...range(111, 131), // F1-F19
|
||||
...range(32, 41), // arrow keys, home/end, pg dn/up
|
||||
...range(47, 58), // 0-9
|
||||
...range(64, 91), // A-Z
|
||||
];
|
||||
|
||||
export const specialKeys = {
|
||||
8: 'backspace',
|
||||
9: 'tab',
|
||||
13: 'return',
|
||||
16: 'shift',
|
||||
17: 'ctrl',
|
||||
18: 'alt',
|
||||
19: 'pause',
|
||||
20: 'capslock',
|
||||
27: 'esc',
|
||||
32: 'space',
|
||||
33: 'pageup',
|
||||
34: 'pagedown',
|
||||
35: 'end',
|
||||
36: 'home',
|
||||
37: 'left',
|
||||
38: 'up',
|
||||
39: 'right',
|
||||
40: 'down',
|
||||
45: 'insert',
|
||||
46: 'del',
|
||||
96: '0',
|
||||
97: '1',
|
||||
98: '2',
|
||||
99: '3',
|
||||
100: '4',
|
||||
101: '5',
|
||||
102: '6',
|
||||
103: '7',
|
||||
104: '8',
|
||||
105: '9',
|
||||
106: '*',
|
||||
107: '+',
|
||||
109: '-',
|
||||
110: '.',
|
||||
111: '/',
|
||||
112: 'f1',
|
||||
113: 'f2',
|
||||
114: 'f3',
|
||||
115: 'f4',
|
||||
116: 'f5',
|
||||
117: 'f6',
|
||||
118: 'f7',
|
||||
119: 'f8',
|
||||
120: 'f9',
|
||||
121: 'f10',
|
||||
122: 'f11',
|
||||
123: 'f12',
|
||||
144: 'numlock',
|
||||
145: 'scroll',
|
||||
191: '/',
|
||||
224: 'meta',
|
||||
};
|
||||
@@ -0,0 +1,4 @@
|
||||
export { UserPreferences } from './UserPreferences.js';
|
||||
export { AboutContent } from '../content/aboutContent/AboutContent.js';
|
||||
export { UserPreferencesForm } from './UserPreferencesForm.js';
|
||||
export { GeneralPreferences } from './GeneralPreferences.js';
|
||||
Reference in new issue
Block a user