React UI: Player in annotation view & settings page (#1018)
* Active player controls * Setup packages * Playing * Fold/unfold sidebar, minor issues * Improved cvat-canvas integration * Resolved some issues * Added cvat-canvas to Dockerfile.ui * Fit canvas method * Added annotation reducer * Added annotation actions * Added containers * Added components * cvat-canvas removed from dockerignore * Added settings page * Minor improvements * Container for canvas wrapper * Configurable grid * Rotation * fitCanvas added to readme * Aligned tablemain
Boris Sekachev
6 years ago
committed by
Nikita Manovich
parent
67239b6148
commit
0277547dc3
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,9 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
module.exports = {
|
||||||
|
parser: false,
|
||||||
|
plugins: {
|
||||||
|
'postcss-preset-env': {
|
||||||
|
browsers: '> 2.5%', // https://github.com/browserslist/browserslist
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -0,0 +1,132 @@
|
|||||||
|
import { AnyAction, Dispatch, ActionCreator } from 'redux';
|
||||||
|
import { ThunkAction } from 'redux-thunk';
|
||||||
|
|
||||||
|
import {
|
||||||
|
CombinedState,
|
||||||
|
Task,
|
||||||
|
} from '../reducers/interfaces';
|
||||||
|
|
||||||
|
import getCore from '../core';
|
||||||
|
import { getCVATStore } from '../store';
|
||||||
|
|
||||||
|
const cvat = getCore();
|
||||||
|
|
||||||
|
export enum AnnotationActionTypes {
|
||||||
|
GET_JOB = 'GET_JOB',
|
||||||
|
GET_JOB_SUCCESS = 'GET_JOB_SUCCESS',
|
||||||
|
GET_JOB_FAILED = 'GET_JOB_FAILED',
|
||||||
|
CHANGE_FRAME = 'CHANGE_FRAME',
|
||||||
|
CHANGE_FRAME_SUCCESS = 'CHANGE_FRAME_SUCCESS',
|
||||||
|
CHANGE_FRAME_FAILED = 'CHANGE_FRAME_FAILED',
|
||||||
|
SWITCH_PLAY = 'SWITCH_PLAY',
|
||||||
|
CONFIRM_CANVAS_READY = 'CONFIRM_CANVAS_READY',
|
||||||
|
}
|
||||||
|
|
||||||
|
export function switchPlay(playing: boolean): AnyAction {
|
||||||
|
return {
|
||||||
|
type: AnnotationActionTypes.SWITCH_PLAY,
|
||||||
|
payload: {
|
||||||
|
playing,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function changeFrameAsync(toFrame: number, playing: boolean):
|
||||||
|
ThunkAction<Promise<void>, {}, {}, AnyAction> {
|
||||||
|
return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
|
||||||
|
const store = getCVATStore();
|
||||||
|
const state: CombinedState = store.getState();
|
||||||
|
const { jobInstance } = state.annotation;
|
||||||
|
const currentFrame = state.annotation.frame;
|
||||||
|
|
||||||
|
const frame = Math.max(
|
||||||
|
Math.min(toFrame, jobInstance.stopFrame),
|
||||||
|
jobInstance.startFrame,
|
||||||
|
);
|
||||||
|
|
||||||
|
// !playing || state.annotation.playing prevents changing frame on the latest setTimeout
|
||||||
|
// after playing had become false
|
||||||
|
if (frame !== currentFrame && (!playing || state.annotation.playing)) {
|
||||||
|
dispatch({
|
||||||
|
type: AnnotationActionTypes.CHANGE_FRAME,
|
||||||
|
payload: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const frameData = await jobInstance.frames.get(frame);
|
||||||
|
const annotations = await jobInstance.annotations.get(frame);
|
||||||
|
dispatch({
|
||||||
|
type: AnnotationActionTypes.CHANGE_FRAME_SUCCESS,
|
||||||
|
payload: {
|
||||||
|
frame,
|
||||||
|
frameData,
|
||||||
|
annotations,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
dispatch({
|
||||||
|
type: AnnotationActionTypes.CHANGE_FRAME_FAILED,
|
||||||
|
payload: {
|
||||||
|
frame,
|
||||||
|
error,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function confirmCanvasReady(): AnyAction {
|
||||||
|
return {
|
||||||
|
type: AnnotationActionTypes.CONFIRM_CANVAS_READY,
|
||||||
|
payload: {},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getJobAsync(tid: number, jid: number):
|
||||||
|
ThunkAction<Promise<void>, {}, {}, AnyAction> {
|
||||||
|
return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
|
||||||
|
dispatch({
|
||||||
|
type: AnnotationActionTypes.GET_JOB,
|
||||||
|
payload: {},
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const store = getCVATStore();
|
||||||
|
const state: CombinedState = store.getState();
|
||||||
|
let task = state.tasks.current
|
||||||
|
.filter((_task: Task) => _task.instance.id === tid)
|
||||||
|
.map((_task: Task) => _task.instance)[0];
|
||||||
|
if (!task) {
|
||||||
|
[task] = await cvat.tasks.get({ id: tid });
|
||||||
|
}
|
||||||
|
|
||||||
|
const job = task.jobs
|
||||||
|
.filter((_job: any) => _job.id === jid)[0];
|
||||||
|
if (!job) {
|
||||||
|
throw new Error('Job with specified id does not exist');
|
||||||
|
}
|
||||||
|
|
||||||
|
const frame = Math.min(0, job.startFrame);
|
||||||
|
const frameData = await job.frames.get(frame);
|
||||||
|
const annotations = await job.annotations.get(frame);
|
||||||
|
|
||||||
|
dispatch({
|
||||||
|
type: AnnotationActionTypes.GET_JOB_SUCCESS,
|
||||||
|
payload: {
|
||||||
|
jobInstance: job,
|
||||||
|
frameData,
|
||||||
|
annotations,
|
||||||
|
frame,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
dispatch({
|
||||||
|
type: AnnotationActionTypes.GET_JOB_FAILED,
|
||||||
|
payload: {
|
||||||
|
error,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
import { AnyAction } from 'redux';
|
||||||
|
import {
|
||||||
|
GridColor,
|
||||||
|
} from '../reducers/interfaces';
|
||||||
|
|
||||||
|
export enum SettingsActionTypes {
|
||||||
|
SWITCH_ROTATE_ALL = 'SWITCH_ROTATE_ALL',
|
||||||
|
SWITCH_GRID = 'SWITCH_GRID',
|
||||||
|
CHANGE_GRID_SIZE = 'CHANGE_GRID_SIZE',
|
||||||
|
CHANGE_GRID_COLOR = 'CHANGE_GRID_COLOR',
|
||||||
|
CHANGE_GRID_OPACITY = 'CHANGE_GRID_OPACITY',
|
||||||
|
}
|
||||||
|
|
||||||
|
export function switchRotateAll(rotateAll: boolean): AnyAction {
|
||||||
|
return {
|
||||||
|
type: SettingsActionTypes.SWITCH_ROTATE_ALL,
|
||||||
|
payload: {
|
||||||
|
rotateAll,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function switchGrid(grid: boolean): AnyAction {
|
||||||
|
return {
|
||||||
|
type: SettingsActionTypes.SWITCH_GRID,
|
||||||
|
payload: {
|
||||||
|
grid,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function changeGridSize(gridSize: number): AnyAction {
|
||||||
|
return {
|
||||||
|
type: SettingsActionTypes.CHANGE_GRID_SIZE,
|
||||||
|
payload: {
|
||||||
|
gridSize,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function changeGridColor(gridColor: GridColor): AnyAction {
|
||||||
|
return {
|
||||||
|
type: SettingsActionTypes.CHANGE_GRID_COLOR,
|
||||||
|
payload: {
|
||||||
|
gridColor,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function changeGridOpacity(gridOpacity: number): AnyAction {
|
||||||
|
return {
|
||||||
|
type: SettingsActionTypes.CHANGE_GRID_OPACITY,
|
||||||
|
payload: {
|
||||||
|
gridOpacity,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<!-- Drawn in https://www.iconfinder.com/editor/ -->
|
||||||
|
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="scale(0.07812)" transform-origin="bottom">
|
||||||
|
<path d="m201.350937,473.371796l0,-434.86451c0,-8.10006 -6.528412,-14.628468 -14.749344,-14.628468l-86.561874,0c-8.220955,0 -14.749359,6.528408 -14.749359,14.628468l0,434.86454c0,8.100037 6.528404,14.749359 14.749359,14.749359l86.561874,0c8.220932,0 14.749344,-6.528412 14.749344,-14.74939z" />
|
||||||
|
<path d="m423.967224,473.371796l0,-434.86451c0,-8.10006 -6.528381,-14.628468 -14.749329,-14.628468l-86.56189,0c-8.220947,0 -14.749329,6.528408 -14.749329,14.628468l0,434.86454c0,8.100037 6.528381,14.749359 14.749329,14.749359l86.56189,0c8.220947,0 14.749329,-6.528412 14.749329,-14.74939z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 798 B |
@ -0,0 +1,9 @@
|
|||||||
|
import {
|
||||||
|
Canvas,
|
||||||
|
Rotation,
|
||||||
|
} from '../../cvat-canvas/src/typescript/canvas';
|
||||||
|
|
||||||
|
export {
|
||||||
|
Canvas,
|
||||||
|
Rotation,
|
||||||
|
};
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
import {
|
|
||||||
Layout,
|
|
||||||
} from 'antd';
|
|
||||||
|
|
||||||
export default function CanvasWrapperComponent(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<Layout.Content
|
|
||||||
className='cvat-annotation-page-canvas-container'
|
|
||||||
>
|
|
||||||
main content
|
|
||||||
</Layout.Content>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Layout,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import {
|
||||||
|
GridColor,
|
||||||
|
} from '../../../reducers/interfaces';
|
||||||
|
|
||||||
|
import { Canvas } from '../../../canvas';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
jobInstance: any;
|
||||||
|
annotations: any[];
|
||||||
|
frameData: any;
|
||||||
|
grid: boolean;
|
||||||
|
gridSize: number;
|
||||||
|
gridColor: GridColor;
|
||||||
|
gridOpacity: number;
|
||||||
|
onSetupCanvas: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class CanvasWrapperComponent extends React.PureComponent<Props> {
|
||||||
|
public componentDidMount(): void {
|
||||||
|
const {
|
||||||
|
canvasInstance,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
// It's awful approach from the point of view React
|
||||||
|
// But we do not have another way because cvat-canvas returns regular DOM element
|
||||||
|
const [wrapper] = window.document
|
||||||
|
.getElementsByClassName('cvat-annotation-page-canvas-container');
|
||||||
|
wrapper.appendChild(canvasInstance.html());
|
||||||
|
|
||||||
|
this.initialSetup();
|
||||||
|
this.updateCanvas();
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentDidUpdate(prevProps: Props): void {
|
||||||
|
const {
|
||||||
|
grid,
|
||||||
|
gridSize,
|
||||||
|
gridColor,
|
||||||
|
gridOpacity,
|
||||||
|
canvasInstance,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
if (prevProps.grid !== grid) {
|
||||||
|
const gridElement = window.document.getElementById('cvat_canvas_grid');
|
||||||
|
if (gridElement) {
|
||||||
|
gridElement.style.display = grid ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevProps.gridSize !== gridSize) {
|
||||||
|
canvasInstance.grid(gridSize, gridSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevProps.gridColor !== gridColor) {
|
||||||
|
const gridPattern = window.document.getElementById('cvat_canvas_grid_pattern');
|
||||||
|
if (gridPattern) {
|
||||||
|
gridPattern.style.stroke = gridColor.toLowerCase();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevProps.gridOpacity !== gridOpacity) {
|
||||||
|
const gridPattern = window.document.getElementById('cvat_canvas_grid_pattern');
|
||||||
|
if (gridPattern) {
|
||||||
|
gridPattern.style.opacity = `${gridOpacity / 100}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateCanvas();
|
||||||
|
}
|
||||||
|
|
||||||
|
private initialSetup(): void {
|
||||||
|
const {
|
||||||
|
grid,
|
||||||
|
gridSize,
|
||||||
|
gridColor,
|
||||||
|
gridOpacity,
|
||||||
|
canvasInstance,
|
||||||
|
jobInstance,
|
||||||
|
onSetupCanvas,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
// Size
|
||||||
|
canvasInstance.fitCanvas();
|
||||||
|
|
||||||
|
// Grid
|
||||||
|
const gridElement = window.document.getElementById('cvat_canvas_grid');
|
||||||
|
const gridPattern = window.document.getElementById('cvat_canvas_grid_pattern');
|
||||||
|
if (gridElement) {
|
||||||
|
gridElement.style.display = grid ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
if (gridPattern) {
|
||||||
|
gridPattern.style.stroke = gridColor.toLowerCase();
|
||||||
|
gridPattern.style.opacity = `${gridOpacity / 100}`;
|
||||||
|
}
|
||||||
|
canvasInstance.grid(gridSize, gridSize);
|
||||||
|
|
||||||
|
// Events
|
||||||
|
canvasInstance.html().addEventListener('canvas.setup', (): void => {
|
||||||
|
onSetupCanvas();
|
||||||
|
if (jobInstance.task.mode === 'annotation') {
|
||||||
|
canvasInstance.fit();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
canvasInstance.html().addEventListener('canvas.setup', () => {
|
||||||
|
canvasInstance.fit();
|
||||||
|
}, { once: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateCanvas(): void {
|
||||||
|
const {
|
||||||
|
annotations,
|
||||||
|
frameData,
|
||||||
|
canvasInstance,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
if (frameData !== null) {
|
||||||
|
canvasInstance.setup(frameData, annotations);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): JSX.Element {
|
||||||
|
return (
|
||||||
|
// This element doesn't have any props
|
||||||
|
// So, React isn't going to rerender it
|
||||||
|
// And it's a reason why cvat-canvas appended in mount function works
|
||||||
|
<Layout.Content
|
||||||
|
className='cvat-annotation-page-canvas-container'
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,217 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Checkbox,
|
||||||
|
Slider,
|
||||||
|
Select,
|
||||||
|
InputNumber,
|
||||||
|
Icon,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||||
|
|
||||||
|
import {
|
||||||
|
PlaycontrolBackJumpIcon,
|
||||||
|
PlaycontrolForwardJumpIcon,
|
||||||
|
} from '../../icons';
|
||||||
|
|
||||||
|
import {
|
||||||
|
FrameSpeed,
|
||||||
|
GridColor,
|
||||||
|
} from '../../reducers/interfaces';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
frameStep: number;
|
||||||
|
frameSpeed: FrameSpeed;
|
||||||
|
resetZoom: boolean;
|
||||||
|
rotateAll: boolean;
|
||||||
|
grid: boolean;
|
||||||
|
gridSize: number;
|
||||||
|
gridColor: GridColor;
|
||||||
|
gridOpacity: number;
|
||||||
|
brightnessLevel: number;
|
||||||
|
contrastLevel: number;
|
||||||
|
saturationLevel: number;
|
||||||
|
onChangeFrameStep(step: number): void;
|
||||||
|
onChangeFrameSpeed(speed: FrameSpeed): void;
|
||||||
|
onSwitchResetZoom(enabled: boolean): void;
|
||||||
|
onSwitchRotateAll(rotateAll: boolean): void;
|
||||||
|
onSwitchGrid(grid: boolean): void;
|
||||||
|
onChangeGridSize(gridSize: number): void;
|
||||||
|
onChangeGridColor(gridColor: GridColor): void;
|
||||||
|
onChangeGridOpacity(gridOpacity: number): void;
|
||||||
|
onChangeBrightnessLevel(level: number): void;
|
||||||
|
onChangeContrastLevel(level: number): void;
|
||||||
|
onChangeSaturationLevel(level: number): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PlayerSettingsComponent(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
frameStep,
|
||||||
|
frameSpeed,
|
||||||
|
resetZoom,
|
||||||
|
rotateAll,
|
||||||
|
grid,
|
||||||
|
gridSize,
|
||||||
|
gridColor,
|
||||||
|
gridOpacity,
|
||||||
|
brightnessLevel,
|
||||||
|
contrastLevel,
|
||||||
|
saturationLevel,
|
||||||
|
onSwitchRotateAll,
|
||||||
|
onSwitchGrid,
|
||||||
|
onChangeGridSize,
|
||||||
|
onChangeGridColor,
|
||||||
|
onChangeGridOpacity,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='cvat-player-settings'>
|
||||||
|
<Row type='flex' align='bottom' className='cvat-player-settings-step'>
|
||||||
|
<Col>
|
||||||
|
<Text className='cvat-text-color'> Player step </Text>
|
||||||
|
<InputNumber min={2} max={1000} value={frameStep} />
|
||||||
|
</Col>
|
||||||
|
<Col offset={1}>
|
||||||
|
<Text type='secondary'>
|
||||||
|
Number of frames skipped when selecting
|
||||||
|
<Icon component={PlaycontrolBackJumpIcon} />
|
||||||
|
or
|
||||||
|
<Icon component={PlaycontrolForwardJumpIcon} />
|
||||||
|
</Text>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row type='flex' align='middle' className='cvat-player-settings-speed'>
|
||||||
|
<Col>
|
||||||
|
<Text className='cvat-text-color'> Player speed </Text>
|
||||||
|
<Select value={frameSpeed}>
|
||||||
|
<Select.Option key='fastest' value={FrameSpeed.Fastest}>Fastest</Select.Option>
|
||||||
|
<Select.Option key='fast' value={FrameSpeed.Fast}>Fast</Select.Option>
|
||||||
|
<Select.Option key='usual' value={FrameSpeed.Usual}>Usual</Select.Option>
|
||||||
|
<Select.Option key='slow' value={FrameSpeed.Slow}>Slow</Select.Option>
|
||||||
|
<Select.Option key='slower' value={FrameSpeed.Slower}>Slower</Select.Option>
|
||||||
|
<Select.Option key='slowest' value={FrameSpeed.Slowest}>Slowest</Select.Option>
|
||||||
|
</Select>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row type='flex'>
|
||||||
|
<Col>
|
||||||
|
<Checkbox
|
||||||
|
className='cvat-text-color cvat-player-settings-grid'
|
||||||
|
checked={grid}
|
||||||
|
onChange={(event: CheckboxChangeEvent): void => {
|
||||||
|
onSwitchGrid(event.target.checked);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Show grid
|
||||||
|
</Checkbox>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row type='flex' justify='space-between'>
|
||||||
|
<Col span={8} className='cvat-player-settings-grid-size'>
|
||||||
|
<Text className='cvat-text-color'> Grid size </Text>
|
||||||
|
<InputNumber
|
||||||
|
min={5}
|
||||||
|
max={1000}
|
||||||
|
step={1}
|
||||||
|
value={gridSize}
|
||||||
|
onChange={(value: number | undefined): void => {
|
||||||
|
if (value) {
|
||||||
|
onChangeGridSize(value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={8} className='cvat-player-settings-grid-color'>
|
||||||
|
<Text className='cvat-text-color'> Grid color </Text>
|
||||||
|
<Select
|
||||||
|
value={gridColor}
|
||||||
|
onChange={(color: GridColor): void => {
|
||||||
|
onChangeGridColor(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-player-settings-grid-opacity'>
|
||||||
|
<Text className='cvat-text-color'> Grid opacity </Text>
|
||||||
|
<Slider
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
value={gridOpacity}
|
||||||
|
onChange={(value: number | [number, number]): void => {
|
||||||
|
onChangeGridOpacity(value as number);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Text className='cvat-text-color'>{`${gridOpacity} %`}</Text>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row type='flex' justify='start'>
|
||||||
|
<Col>
|
||||||
|
<Row className='cvat-player-settings-reset-zoom'>
|
||||||
|
<Col className='cvat-player-settings-reset-zoom-checkbox'>
|
||||||
|
<Checkbox
|
||||||
|
className='cvat-text-color'
|
||||||
|
checked={resetZoom}
|
||||||
|
>
|
||||||
|
Reset zoom
|
||||||
|
</Checkbox>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Text type='secondary'> Fit image after changing frame </Text>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
<Col offset={5}>
|
||||||
|
<Row className='cvat-player-settings-rotate-all'>
|
||||||
|
<Col className='cvat-player-settings-rotate-all-checkbox'>
|
||||||
|
<Checkbox
|
||||||
|
className='cvat-text-color'
|
||||||
|
checked={rotateAll}
|
||||||
|
onChange={(event: CheckboxChangeEvent): void => {
|
||||||
|
onSwitchRotateAll(event.target.checked);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Rotate all images
|
||||||
|
</Checkbox>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Text type='secondary'> Rotate all images simultaneously </Text>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className='cvat-player-settings-brightness'>
|
||||||
|
<Col className='cvat-text-color'>
|
||||||
|
Brightness
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Slider min={0} max={100} value={brightnessLevel} />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className='cvat-player-settings-contrast'>
|
||||||
|
<Col className='cvat-text-color'>
|
||||||
|
Contrast
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Slider min={0} max={100} value={contrastLevel} />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className='cvat-player-settings-saturation'>
|
||||||
|
<Col className='cvat-text-color'>
|
||||||
|
Saturation
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Slider min={0} max={100} value={saturationLevel} />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
import './styles.scss';
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Tabs,
|
||||||
|
Icon,
|
||||||
|
Button,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
|
||||||
|
import { RouteComponentProps } from 'react-router';
|
||||||
|
import { withRouter } from 'react-router-dom';
|
||||||
|
|
||||||
|
import WorkspaceSettingsContainer from '../../containers/settings-page/workspace-settings';
|
||||||
|
import PlayerSettingsContainer from '../../containers/settings-page/player-settings';
|
||||||
|
|
||||||
|
function SettingsPage(props: RouteComponentProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className='cvat-settings-page'>
|
||||||
|
<Row type='flex' justify='center'>
|
||||||
|
<Col>
|
||||||
|
<Text className='cvat-title'> Settings </Text>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row type='flex' justify='center'>
|
||||||
|
<Col md={14} lg={12} xl={10} xxl={9}>
|
||||||
|
<Tabs
|
||||||
|
type='card'
|
||||||
|
tabBarStyle={{ marginBottom: '0px', marginLeft: '-1px' }}
|
||||||
|
>
|
||||||
|
<Tabs.TabPane
|
||||||
|
tab={
|
||||||
|
(
|
||||||
|
<span>
|
||||||
|
<Icon type='play-circle' />
|
||||||
|
<Text>Player</Text>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
key='player'
|
||||||
|
>
|
||||||
|
<PlayerSettingsContainer />
|
||||||
|
</Tabs.TabPane>
|
||||||
|
<Tabs.TabPane
|
||||||
|
tab={
|
||||||
|
(
|
||||||
|
<span>
|
||||||
|
<Icon type='laptop' />
|
||||||
|
<Text>Workspace</Text>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
key='workspace'
|
||||||
|
>
|
||||||
|
<WorkspaceSettingsContainer />
|
||||||
|
</Tabs.TabPane>
|
||||||
|
</Tabs>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row type='flex' justify='center'>
|
||||||
|
<Col md={14} lg={12} xl={10} xxl={9} className='cvat-settings-page-back-button-wrapper'>
|
||||||
|
<Button
|
||||||
|
className='cvat-settings-page-back-button'
|
||||||
|
type='primary'
|
||||||
|
onClick={(): void => {
|
||||||
|
props.history.goBack();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Go Back
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withRouter(SettingsPage);
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
@import '../../base.scss';
|
||||||
|
|
||||||
|
.cvat-settings-page {
|
||||||
|
> div:nth-child(1) {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-workspace-settings, .cvat-player-settings {
|
||||||
|
width: 100%;
|
||||||
|
height: max-content;
|
||||||
|
background: $background-color-1;
|
||||||
|
padding: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-player-settings-grid,
|
||||||
|
.cvat-workspace-settings-auto-save,
|
||||||
|
.cvat-workspace-settings-show-interpolated-checkbox {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-player-settings-grid-size,
|
||||||
|
.cvat-player-settings-grid-color,
|
||||||
|
.cvat-player-settings-grid-opacity,
|
||||||
|
.cvat-player-settings-step,
|
||||||
|
.cvat-player-settings-speed,
|
||||||
|
.cvat-player-settings-reset-zoom,
|
||||||
|
.cvat-player-settings-rotate-all,
|
||||||
|
.cvat-workspace-settings-show-interpolated,
|
||||||
|
.cvat-workspace-settings-aam-zoom-margin,
|
||||||
|
.cvat-workspace-settings-auto-save-interval {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-player-settings-grid-size,
|
||||||
|
.cvat-player-settings-grid-color,
|
||||||
|
.cvat-player-settings-grid-opacity {
|
||||||
|
display: grid;
|
||||||
|
justify-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-player-settings-grid-color {
|
||||||
|
> .ant-select {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-player-settings-grid-opacity {
|
||||||
|
> .ant-slider {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-player-settings-step,
|
||||||
|
.cvat-player-settings-speed {
|
||||||
|
> div {
|
||||||
|
display: grid;
|
||||||
|
justify-items: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-player-settings-step > div > span > i {
|
||||||
|
vertical-align: -1em;
|
||||||
|
transform: scale(0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-player-settings-speed > div > .ant-select {
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-player-settings-brightness,
|
||||||
|
.cvat-player-settings-contrast,
|
||||||
|
.cvat-player-settings-saturation {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-settings-page-back-button {
|
||||||
|
width: 100px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cvat-settings-page-back-button-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Checkbox,
|
||||||
|
InputNumber,
|
||||||
|
} from 'antd';
|
||||||
|
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
autoSave: boolean;
|
||||||
|
autoSaveInterval: number;
|
||||||
|
aamZoomMargin: number;
|
||||||
|
showAllInterpolationTracks: boolean;
|
||||||
|
onSwitchAutoSave(enabled: boolean): void;
|
||||||
|
onChangeAutoSaveInterval(interval: number): void;
|
||||||
|
onChangeAAMZoomMargin(margin: number): void;
|
||||||
|
onSwitchShowingInterpolatedTracks(enabled: boolean): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
autoSave,
|
||||||
|
autoSaveInterval,
|
||||||
|
aamZoomMargin,
|
||||||
|
showAllInterpolationTracks,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='cvat-workspace-settings'>
|
||||||
|
<Row type='flex'>
|
||||||
|
<Col>
|
||||||
|
<Checkbox
|
||||||
|
className='cvat-text-color cvat-workspace-settings-auto-save'
|
||||||
|
checked={autoSave}
|
||||||
|
>
|
||||||
|
Enable auto save
|
||||||
|
</Checkbox>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row type='flex'>
|
||||||
|
<Col className='cvat-workspace-settings-auto-save-interval'>
|
||||||
|
<Text type='secondary'> Auto save every </Text>
|
||||||
|
<InputNumber
|
||||||
|
min={5}
|
||||||
|
max={60}
|
||||||
|
step={1}
|
||||||
|
value={Math.round(autoSaveInterval / (60 * 1000))}
|
||||||
|
/>
|
||||||
|
<Text type='secondary'> minutes </Text>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className='cvat-workspace-settings-show-interpolated'>
|
||||||
|
<Col className='cvat-workspace-settings-show-interpolated-checkbox'>
|
||||||
|
<Checkbox
|
||||||
|
className='cvat-text-color'
|
||||||
|
checked={showAllInterpolationTracks}
|
||||||
|
>
|
||||||
|
Show all interpolation tracks
|
||||||
|
</Checkbox>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Text type='secondary'> Show hidden interpolated objects in the side panel </Text>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row className='cvat-workspace-settings-aam-zoom-margin'>
|
||||||
|
<Col>
|
||||||
|
<Text className='cvat-text-color'> Attribute annotation mode (AAM) zoom margin </Text>
|
||||||
|
<InputNumber min={0} max={1000} value={aamZoomMargin} />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import CanvasWrapperComponent from '../../../components/annotation-page/standard-workspace/canvas-wrapper';
|
||||||
|
|
||||||
|
import {
|
||||||
|
confirmCanvasReady,
|
||||||
|
} from '../../../actions/annotation-actions';
|
||||||
|
import {
|
||||||
|
GridColor,
|
||||||
|
CombinedState,
|
||||||
|
} from '../../../reducers/interfaces';
|
||||||
|
|
||||||
|
import { Canvas } from '../../../canvas';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
jobInstance: any;
|
||||||
|
annotations: any[];
|
||||||
|
frameData: any;
|
||||||
|
grid: boolean;
|
||||||
|
gridSize: number;
|
||||||
|
gridColor: GridColor;
|
||||||
|
gridOpacity: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
onSetupCanvas(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
canvasInstance,
|
||||||
|
jobInstance,
|
||||||
|
frameData,
|
||||||
|
annotations,
|
||||||
|
} = state.annotation;
|
||||||
|
|
||||||
|
const {
|
||||||
|
grid,
|
||||||
|
gridSize,
|
||||||
|
gridColor,
|
||||||
|
gridOpacity,
|
||||||
|
} = state.settings.player;
|
||||||
|
|
||||||
|
return {
|
||||||
|
canvasInstance,
|
||||||
|
jobInstance,
|
||||||
|
frameData,
|
||||||
|
annotations,
|
||||||
|
grid,
|
||||||
|
gridSize,
|
||||||
|
gridColor,
|
||||||
|
gridOpacity,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||||
|
return {
|
||||||
|
onSetupCanvas(): void {
|
||||||
|
dispatch(confirmCanvasReady());
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function CanvasWrapperContainer(props: StateToProps & DispatchToProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<CanvasWrapperComponent {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
)(CanvasWrapperContainer);
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import { Canvas } from '../../../canvas';
|
||||||
|
|
||||||
|
import ControlsSideBarComponent from '../../../components/annotation-page/standard-workspace/controls-side-bar';
|
||||||
|
import { CombinedState } from '../../../reducers/interfaces';
|
||||||
|
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
rotateAll: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
annotation,
|
||||||
|
settings,
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
return {
|
||||||
|
rotateAll: settings.player.rotateAll,
|
||||||
|
canvasInstance: annotation.canvasInstance,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function StandardWorkspaceContainer(props: StateToProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<ControlsSideBarComponent {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
)(StandardWorkspaceContainer);
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import { Canvas } from '../../../canvas';
|
||||||
|
|
||||||
|
import StandardWorkspaceComponent from '../../../components/annotation-page/standard-workspace/standard-workspace';
|
||||||
|
import { CombinedState } from '../../../reducers/interfaces';
|
||||||
|
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
canvasInstance: Canvas;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const { annotation } = state;
|
||||||
|
return {
|
||||||
|
canvasInstance: annotation.canvasInstance,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function StandardWorkspaceContainer(props: StateToProps): JSX.Element {
|
||||||
|
const {
|
||||||
|
canvasInstance,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StandardWorkspaceComponent
|
||||||
|
canvasInstance={canvasInstance}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
)(StandardWorkspaceContainer);
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import {
|
||||||
|
changeFrameAsync,
|
||||||
|
switchPlay as switchPlayAction,
|
||||||
|
} from '../../../actions/annotation-actions';
|
||||||
|
|
||||||
|
import AnnotationTopBarComponent from '../../../components/annotation-page/top-bar/top-bar';
|
||||||
|
import { CombinedState } from '../../../reducers/interfaces';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
jobInstance: any;
|
||||||
|
frame: number;
|
||||||
|
frameStep: number;
|
||||||
|
playing: boolean;
|
||||||
|
canvasIsReady: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
onChangeFrame(frame: number, playing: boolean): void;
|
||||||
|
onSwitchPlay(playing: boolean): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
annotation,
|
||||||
|
settings,
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
return {
|
||||||
|
jobInstance: annotation.jobInstance,
|
||||||
|
frame: annotation.frame as number, // is number when jobInstance specified
|
||||||
|
frameStep: settings.player.frameStep,
|
||||||
|
playing: annotation.playing,
|
||||||
|
canvasIsReady: annotation.canvasIsReady,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||||
|
return {
|
||||||
|
onChangeFrame(frame: number, playing: boolean): void {
|
||||||
|
dispatch(changeFrameAsync(frame, playing));
|
||||||
|
},
|
||||||
|
onSwitchPlay(playing: boolean): void {
|
||||||
|
dispatch(switchPlayAction(playing));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function AnnotationTopBarContainer(props: StateToProps & DispatchToProps): JSX.Element {
|
||||||
|
const {
|
||||||
|
jobInstance,
|
||||||
|
frame,
|
||||||
|
frameStep,
|
||||||
|
playing,
|
||||||
|
canvasIsReady,
|
||||||
|
onChangeFrame,
|
||||||
|
onSwitchPlay,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnnotationTopBarComponent
|
||||||
|
jobInstance={jobInstance}
|
||||||
|
frame={frame}
|
||||||
|
frameStep={frameStep}
|
||||||
|
playing={playing}
|
||||||
|
canvasIsReady={canvasIsReady}
|
||||||
|
onChangeFrame={onChangeFrame}
|
||||||
|
onSwitchPlay={onSwitchPlay}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
)(AnnotationTopBarContainer);
|
||||||
@ -0,0 +1,114 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import PlayerSettingsComponent from '../../components/settings-page/player-settings';
|
||||||
|
|
||||||
|
import {
|
||||||
|
switchRotateAll,
|
||||||
|
switchGrid,
|
||||||
|
changeGridSize,
|
||||||
|
changeGridColor,
|
||||||
|
changeGridOpacity,
|
||||||
|
} from '../../actions/settings-actions';
|
||||||
|
|
||||||
|
import {
|
||||||
|
CombinedState,
|
||||||
|
FrameSpeed,
|
||||||
|
GridColor,
|
||||||
|
} from '../../reducers/interfaces';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
frameStep: number;
|
||||||
|
frameSpeed: FrameSpeed;
|
||||||
|
resetZoom: boolean;
|
||||||
|
rotateAll: boolean;
|
||||||
|
grid: boolean;
|
||||||
|
gridSize: number;
|
||||||
|
gridColor: GridColor;
|
||||||
|
gridOpacity: number;
|
||||||
|
brightnessLevel: number;
|
||||||
|
contrastLevel: number;
|
||||||
|
saturationLevel: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
onChangeFrameStep(step: number): void;
|
||||||
|
onChangeFrameSpeed(speed: FrameSpeed): void;
|
||||||
|
onSwitchResetZoom(enabled: boolean): void;
|
||||||
|
onSwitchRotateAll(rotateAll: boolean): void;
|
||||||
|
onSwitchGrid(grid: boolean): void;
|
||||||
|
onChangeGridSize(gridSize: number): void;
|
||||||
|
onChangeGridColor(gridColor: GridColor): void;
|
||||||
|
onChangeGridOpacity(gridOpacity: number): void;
|
||||||
|
onChangeBrightnessLevel(level: number): void;
|
||||||
|
onChangeContrastLevel(level: number): void;
|
||||||
|
onChangeSaturationLevel(level: number): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const { player } = state.settings;
|
||||||
|
return {
|
||||||
|
...player,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||||
|
return {
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onChangeFrameStep(step: number): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onChangeFrameSpeed(speed: FrameSpeed): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onSwitchResetZoom(enabled: boolean): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
onSwitchRotateAll(rotateAll: boolean): void {
|
||||||
|
dispatch(switchRotateAll(rotateAll));
|
||||||
|
},
|
||||||
|
onSwitchGrid(grid: boolean): void {
|
||||||
|
dispatch(switchGrid(grid));
|
||||||
|
},
|
||||||
|
onChangeGridSize(gridSize: number): void {
|
||||||
|
dispatch(changeGridSize(gridSize));
|
||||||
|
},
|
||||||
|
onChangeGridColor(gridColor: GridColor): void {
|
||||||
|
dispatch(changeGridColor(gridColor));
|
||||||
|
},
|
||||||
|
onChangeGridOpacity(gridOpacity: number): void {
|
||||||
|
dispatch(changeGridOpacity(gridOpacity));
|
||||||
|
},
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onChangeBrightnessLevel(level: number): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onChangeContrastLevel(level: number): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onChangeSaturationLevel(level: number): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function PlayerSettingsContainer(props: StateToProps & DispatchToProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<PlayerSettingsComponent {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
)(PlayerSettingsContainer);
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import {
|
||||||
|
CombinedState,
|
||||||
|
} from '../../reducers/interfaces';
|
||||||
|
|
||||||
|
import WorkspaceSettingsComponent from '../../components/settings-page/workspace-settings';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
autoSave: boolean;
|
||||||
|
autoSaveInterval: number;
|
||||||
|
aamZoomMargin: number;
|
||||||
|
showAllInterpolationTracks: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
onSwitchAutoSave(enabled: boolean): void;
|
||||||
|
onChangeAutoSaveInterval(interval: number): void;
|
||||||
|
onChangeAAMZoomMargin(margin: number): void;
|
||||||
|
onSwitchShowingInterpolatedTracks(enabled: boolean): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const { workspace } = state.settings;
|
||||||
|
const {
|
||||||
|
autoSave,
|
||||||
|
autoSaveInterval,
|
||||||
|
aamZoomMargin,
|
||||||
|
showAllInterpolationTracks,
|
||||||
|
} = workspace;
|
||||||
|
|
||||||
|
return {
|
||||||
|
autoSave,
|
||||||
|
autoSaveInterval,
|
||||||
|
aamZoomMargin,
|
||||||
|
showAllInterpolationTracks,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(): DispatchToProps {
|
||||||
|
return {
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onSwitchAutoSave(enabled: boolean): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onChangeAutoSaveInterval(interval: number): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onChangeAAMZoomMargin(margin: number): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
// will be implemented
|
||||||
|
// eslint-disable-next-line
|
||||||
|
onSwitchShowingInterpolatedTracks(enabled: boolean): void {
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function WorkspaceSettingsContainer(props: StateToProps & DispatchToProps): JSX.Element {
|
||||||
|
return (
|
||||||
|
<WorkspaceSettingsComponent {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
)(WorkspaceSettingsContainer);
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
import { AnyAction } from 'redux';
|
||||||
|
|
||||||
|
import { Canvas } from '../canvas';
|
||||||
|
|
||||||
|
import { AnnotationState } from './interfaces';
|
||||||
|
import { AnnotationActionTypes } from '../actions/annotation-actions';
|
||||||
|
|
||||||
|
const defaultState: AnnotationState = {
|
||||||
|
canvasInstance: new Canvas(),
|
||||||
|
canvasIsReady: false,
|
||||||
|
jobInstance: null,
|
||||||
|
frame: 0,
|
||||||
|
playing: false,
|
||||||
|
annotations: [],
|
||||||
|
frameData: null,
|
||||||
|
dataFetching: false,
|
||||||
|
jobFetching: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default (state = defaultState, action: AnyAction): AnnotationState => {
|
||||||
|
switch (action.type) {
|
||||||
|
case AnnotationActionTypes.GET_JOB: {
|
||||||
|
return {
|
||||||
|
...defaultState,
|
||||||
|
jobFetching: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case AnnotationActionTypes.GET_JOB_SUCCESS: {
|
||||||
|
return {
|
||||||
|
...defaultState,
|
||||||
|
jobFetching: false,
|
||||||
|
jobInstance: action.payload.jobInstance,
|
||||||
|
frame: action.payload.frame,
|
||||||
|
frameData: action.payload.frameData,
|
||||||
|
annotations: action.payload.annotations,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case AnnotationActionTypes.GET_JOB_FAILED: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
jobInstance: undefined,
|
||||||
|
jobFetching: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case AnnotationActionTypes.CHANGE_FRAME: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
frameData: null,
|
||||||
|
annotations: [],
|
||||||
|
dataFetching: true,
|
||||||
|
canvasIsReady: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case AnnotationActionTypes.CHANGE_FRAME_SUCCESS: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
frame: action.payload.frame,
|
||||||
|
annotations: action.payload.annotations,
|
||||||
|
frameData: action.payload.frameData,
|
||||||
|
dataFetching: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case AnnotationActionTypes.CHANGE_FRAME_FAILED: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
dataFetching: false,
|
||||||
|
}; // add notification if failed
|
||||||
|
}
|
||||||
|
case AnnotationActionTypes.SWITCH_PLAY: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
playing: action.payload.playing,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case AnnotationActionTypes.CONFIRM_CANVAS_READY: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
canvasIsReady: true,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
import { AnyAction } from 'redux';
|
||||||
|
import { SettingsActionTypes } from '../actions/settings-actions';
|
||||||
|
|
||||||
|
import {
|
||||||
|
SettingsState,
|
||||||
|
GridColor,
|
||||||
|
FrameSpeed,
|
||||||
|
} from './interfaces';
|
||||||
|
|
||||||
|
const defaultState: SettingsState = {
|
||||||
|
workspace: {
|
||||||
|
autoSave: false,
|
||||||
|
autoSaveInterval: 15 * 60 * 1000,
|
||||||
|
aamZoomMargin: 100,
|
||||||
|
showAllInterpolationTracks: false,
|
||||||
|
},
|
||||||
|
player: {
|
||||||
|
frameStep: 10,
|
||||||
|
frameSpeed: FrameSpeed.Usual,
|
||||||
|
resetZoom: false,
|
||||||
|
rotateAll: false,
|
||||||
|
grid: false,
|
||||||
|
gridSize: 100,
|
||||||
|
gridColor: GridColor.White,
|
||||||
|
gridOpacity: 0,
|
||||||
|
brightnessLevel: 50,
|
||||||
|
contrastLevel: 50,
|
||||||
|
saturationLevel: 50,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default (state = defaultState, action: AnyAction): SettingsState => {
|
||||||
|
switch (action.type) {
|
||||||
|
case SettingsActionTypes.SWITCH_ROTATE_ALL: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
player: {
|
||||||
|
...state.player,
|
||||||
|
rotateAll: action.payload.rotateAll,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case SettingsActionTypes.SWITCH_GRID: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
player: {
|
||||||
|
...state.player,
|
||||||
|
grid: action.payload.grid,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case SettingsActionTypes.CHANGE_GRID_SIZE: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
player: {
|
||||||
|
...state.player,
|
||||||
|
gridSize: action.payload.gridSize,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case SettingsActionTypes.CHANGE_GRID_COLOR: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
player: {
|
||||||
|
...state.player,
|
||||||
|
gridColor: action.payload.gridColor,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
case SettingsActionTypes.CHANGE_GRID_OPACITY: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
player: {
|
||||||
|
...state.player,
|
||||||
|
gridOpacity: action.payload.gridOpacity,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue