-
Notifications
You must be signed in to change notification settings - Fork 11
/
Inspector.tsx
112 lines (104 loc) · 3.58 KB
/
Inspector.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { Colors } from '../constants/Colors';
import { ErrorBoundary } from './ErrorBoundary';
import { Icons } from '../icons/Icons';
import { InspectorBeat } from './InspectorBeat';
import { InspectorChannelItem } from './InspectorChannelItem';
import { InspectorCurveFx } from './InspectorCurveFx';
import { InspectorCurveNode } from './InspectorCurveNode';
import { InspectorGeneral } from './InspectorGeneral';
import { InspectorLabel } from './InspectorLabel';
import { InspectorSnapping } from './InspectorSnapping';
import { InspectorStats } from './InspectorStats';
import { Metrics } from '../constants/Metrics';
import { Scrollable } from './Scrollable';
import { objectMapSize, objectMapValues } from '../utils/objectMap';
import { useSelector } from '../states/store';
import React from 'react';
import styled from 'styled-components';
// == styles =======================================================================================
const Logo = styled.img`
position: absolute;
fill: ${ Colors.black };
left: ${ 0.15 * Metrics.inspectorWidth }px;
top: calc( 50% - ${ 0.35 * Metrics.inspectorWidth }px );
width: calc( ${ 0.7 * Metrics.inspectorWidth }px );
opacity: 0.2;
`;
const Container = styled.div`
padding: 0.5rem 1rem;
`;
const StyledScrollable = styled( Scrollable )`
width: 100%;
height: 100%;
`;
const Root = styled.div`
overflow: hidden;
background: ${ Colors.back2 };
`;
// == component ====================================================================================
const Inspector = ( { className }: {
className?: string;
} ): JSX.Element => {
const {
selectedCurve,
stateSelectedNodes,
stateSelectedFxs,
stateSelectedTimelineItems,
stateSelectedTimelineLabels,
settingsMode,
mode
} = useSelector( ( state ) => ( {
selectedCurve: state.curveEditor.selectedCurve,
stateSelectedNodes: state.curveEditor.selected.nodes,
stateSelectedFxs: state.curveEditor.selected.fxs,
stateSelectedTimelineItems: state.timeline.selected.items,
stateSelectedTimelineLabels: state.timeline.selected.labels,
settingsMode: state.settings.mode,
mode: state.workspace.mode
} ) );
let content: JSX.Element | null = null;
if ( settingsMode === 'snapping' ) {
content = <InspectorSnapping />;
} else if ( settingsMode === 'beat' ) {
content = <InspectorBeat />;
} else if ( settingsMode === 'general' ) {
content = <InspectorGeneral />;
} else if ( settingsMode === 'stats' ) {
content = <InspectorStats />;
} else if ( mode === 'curve' ) {
if ( selectedCurve != null ) {
if ( stateSelectedNodes.length === 1 ) {
content = <InspectorCurveNode
curveId={ selectedCurve }
node={ stateSelectedNodes[ 0 ] }
/>;
} else if ( stateSelectedFxs.length === 1 ) {
content = <InspectorCurveFx
curveId={ selectedCurve }
fx={ stateSelectedFxs[ 0 ] }
/>;
}
}
} else if ( mode === 'channel' || mode === 'dope' ) {
if ( objectMapSize( stateSelectedTimelineItems ) === 1 ) {
content = <InspectorChannelItem
item={ objectMapValues( stateSelectedTimelineItems )[ 0 ] }
/>;
} else if ( stateSelectedTimelineLabels.length === 1 ) {
content = <InspectorLabel
name={ stateSelectedTimelineLabels[ 0 ] }
/>;
}
}
return <Root className={ className }>
<ErrorBoundary>
<StyledScrollable>
<Container>
{ content }
</Container>
</StyledScrollable>
{ content == null && <Logo as={ Icons.AutomatonA } /> };
</ErrorBoundary>
</Root>;
};
export { Inspector };