Migration to mousetrap, redesigned visualization settings (#2872)
* Initial version of shortcut fixes using mousetrap * Redesigned visualization settings * Updated cypress tests * Minor fix in AAM * Aborted extra changes * 1.1.0 * Updated version & changelog * Aborted extra changes * Fixed headers * Using keycodes in cypress * Fixed a couple of commandsmain
Boris Sekachev
5 years ago
committed by
GitHub
parent
dff57eb24b
commit
fb17dca505
@ -0,0 +1,189 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import { Row, Col } from 'antd/lib/grid';
|
||||||
|
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
import InputNumber from 'antd/lib/input-number';
|
||||||
|
import Select from 'antd/lib/select';
|
||||||
|
import Slider from 'antd/lib/slider';
|
||||||
|
import Button from 'antd/lib/button';
|
||||||
|
|
||||||
|
import {
|
||||||
|
switchGrid,
|
||||||
|
changeGridColor,
|
||||||
|
changeGridOpacity,
|
||||||
|
changeBrightnessLevel,
|
||||||
|
changeContrastLevel,
|
||||||
|
changeSaturationLevel,
|
||||||
|
changeGridSize,
|
||||||
|
} from 'actions/settings-actions';
|
||||||
|
import { clamp } from 'utils/math';
|
||||||
|
import { GridColor, CombinedState, PlayerSettingsState } from 'reducers/interfaces';
|
||||||
|
|
||||||
|
const minGridSize = 5;
|
||||||
|
const maxGridSize = 1000;
|
||||||
|
|
||||||
|
export default function ImageSetupsContent(): JSX.Element {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
const {
|
||||||
|
brightnessLevel,
|
||||||
|
contrastLevel,
|
||||||
|
saturationLevel,
|
||||||
|
gridOpacity,
|
||||||
|
gridColor,
|
||||||
|
gridSize,
|
||||||
|
grid: gridEnabled,
|
||||||
|
} = useSelector((state: CombinedState): PlayerSettingsState => state.settings.player);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='cvat-canvas-image-setups-content'>
|
||||||
|
<Text>Image grid</Text>
|
||||||
|
<hr />
|
||||||
|
<Row justify='space-between' align='middle' gutter={8}>
|
||||||
|
<Col span={1} />
|
||||||
|
<Col span={6}>
|
||||||
|
<Text className='cvat-text-color'> Size </Text>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Text className='cvat-text-color'> Color </Text>
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Text className='cvat-text-color'> Opacity </Text>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row justify='space-between' align='middle' gutter={8}>
|
||||||
|
<Col span={1}>
|
||||||
|
<Checkbox
|
||||||
|
className='cvat-text-color cvat-image-setups-grid'
|
||||||
|
checked={gridEnabled}
|
||||||
|
onChange={(event: CheckboxChangeEvent): void => {
|
||||||
|
dispatch(switchGrid(event.target.checked));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={6} className='cvat-image-setups-grid-size'>
|
||||||
|
<InputNumber
|
||||||
|
className='cvat-image-setups-grid-size-input'
|
||||||
|
min={minGridSize}
|
||||||
|
max={maxGridSize}
|
||||||
|
value={gridSize}
|
||||||
|
disabled={!gridEnabled}
|
||||||
|
onChange={(value: number | undefined | null | string): void => {
|
||||||
|
if (typeof value !== 'undefined' && value !== null) {
|
||||||
|
const converted = Math.floor(clamp(+value, minGridSize, maxGridSize));
|
||||||
|
dispatch(changeGridSize(converted));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={8} className='cvat-image-setups-grid-color'>
|
||||||
|
<Select
|
||||||
|
className='cvat-image-setups-grid-color-input'
|
||||||
|
value={gridColor}
|
||||||
|
disabled={!gridEnabled}
|
||||||
|
onChange={(color: GridColor): void => {
|
||||||
|
dispatch(changeGridColor(color));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Select.Option key='white' value={GridColor.White}>
|
||||||
|
White
|
||||||
|
</Select.Option>
|
||||||
|
<Select.Option key='black' value={GridColor.Black}>
|
||||||
|
Black
|
||||||
|
</Select.Option>
|
||||||
|
<Select.Option key='red' value={GridColor.Red}>
|
||||||
|
Red
|
||||||
|
</Select.Option>
|
||||||
|
<Select.Option key='green' value={GridColor.Green}>
|
||||||
|
Green
|
||||||
|
</Select.Option>
|
||||||
|
<Select.Option key='blue' value={GridColor.Blue}>
|
||||||
|
Blue
|
||||||
|
</Select.Option>
|
||||||
|
</Select>
|
||||||
|
</Col>
|
||||||
|
<Col span={8} className='cvat-image-setups-grid-opacity'>
|
||||||
|
<Slider
|
||||||
|
className='cvat-image-setups-grid-opacity-input'
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
value={gridOpacity}
|
||||||
|
disabled={!gridEnabled}
|
||||||
|
onChange={(value: number | [number, number]): void => {
|
||||||
|
dispatch(changeGridOpacity(value as number));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Text>Color settings</Text>
|
||||||
|
<hr />
|
||||||
|
<Row justify='space-around'>
|
||||||
|
<Col span={24}>
|
||||||
|
<Row className='cvat-image-setups-brightness'>
|
||||||
|
<Col span={6}>
|
||||||
|
<Text className='cvat-text-color'> Brightness </Text>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Slider
|
||||||
|
min={50}
|
||||||
|
max={200}
|
||||||
|
value={brightnessLevel}
|
||||||
|
onChange={(value: number | [number, number]): void => {
|
||||||
|
dispatch(changeBrightnessLevel(value as number));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className='cvat-image-setups-contrast'>
|
||||||
|
<Col span={6}>
|
||||||
|
<Text className='cvat-text-color'> Contrast </Text>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Slider
|
||||||
|
min={50}
|
||||||
|
max={200}
|
||||||
|
value={contrastLevel}
|
||||||
|
onChange={(value: number | [number, number]): void => {
|
||||||
|
dispatch(changeContrastLevel(value as number));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className='cvat-image-setups-saturation'>
|
||||||
|
<Col span={6}>
|
||||||
|
<Text className='cvat-text-color'> Saturation </Text>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Slider
|
||||||
|
min={0}
|
||||||
|
max={300}
|
||||||
|
value={saturationLevel}
|
||||||
|
onChange={(value: number | [number, number]): void => {
|
||||||
|
dispatch(changeSaturationLevel(value as number));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className='cvat-image-setups-reset-color-settings' justify='space-around'>
|
||||||
|
<Col>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
const defaultValue = 100;
|
||||||
|
dispatch(changeBrightnessLevel(defaultValue));
|
||||||
|
dispatch(changeContrastLevel(defaultValue));
|
||||||
|
dispatch(changeSaturationLevel(defaultValue));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Reset color settings
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
// Copyright (C) 2021 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import Mousetrap from 'mousetrap';
|
||||||
|
|
||||||
|
export interface KeyMapItem {
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
sequences: string[];
|
||||||
|
action: 'keydown' | 'keyup' | 'keypress';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface KeyMap {
|
||||||
|
[index: string]: KeyMapItem;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Handlers {
|
||||||
|
[index: string]: (event: KeyboardEvent) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children?: JSX.Element;
|
||||||
|
keyMap: KeyMap;
|
||||||
|
handlers: Handlers;
|
||||||
|
}
|
||||||
|
|
||||||
|
const applicationKeyMap: KeyMap = {};
|
||||||
|
|
||||||
|
export default function GlobalHotKeys(props: Props): JSX.Element {
|
||||||
|
const { children, keyMap, handlers } = props;
|
||||||
|
useEffect(() => {
|
||||||
|
for (const key of Object.keys(keyMap)) {
|
||||||
|
const { sequences, action } = keyMap[key];
|
||||||
|
const handler = handlers[key];
|
||||||
|
Mousetrap.bind(sequences, handler, action);
|
||||||
|
applicationKeyMap[key] = keyMap[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
for (const key of Object.keys(keyMap)) {
|
||||||
|
const { sequences, action } = keyMap[key];
|
||||||
|
Mousetrap.unbind(sequences, action);
|
||||||
|
delete applicationKeyMap[key];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return children || <></>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getApplicationKeyMap(): KeyMap {
|
||||||
|
return {
|
||||||
|
...applicationKeyMap,
|
||||||
|
};
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue