-
Notifications
You must be signed in to change notification settings - Fork 11
/
CurveEditorGraph.tsx
96 lines (82 loc) · 2.78 KB
/
CurveEditorGraph.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
import { Colors } from '../constants/Colors';
import { CurveWithGUI } from '../../CurveWithGUI';
import { Resolution } from '../utils/Resolution';
import { TimeValueRange, v2y, x2t } from '../utils/TimeValueRange';
import { useSelector } from '../states/store';
import React, { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
// == styles =======================================================================================
const GraphLineWithoutFxs = styled.polyline`
fill: none;
stroke: ${ Colors.fore };
opacity: 0.5;
stroke-width: 0.5px;
stroke-linecap: round;
stroke-linejoin: round;
`;
const GraphLine = styled.polyline`
fill: none;
stroke: ${ Colors.fore };
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
`;
// == functions ====================================================================================
function calcPoints(
curve: CurveWithGUI,
range: TimeValueRange,
size: Resolution
): { newPoints: string; newPointsWithoutFxs: string } {
let newPoints = '';
let newPointsWithoutFxs = '';
for ( let x = 0; x <= size.width; x ++ ) {
const t = x2t( x, range, size.width );
if ( curve.length < t ) { break; }
{
const v = curve.getValue( t );
const y = v2y( isNaN( v ) ? 0.0 : v, range, size.height );
newPoints += `${ x },${ y } `;
}
{
const v = curve.getValueWithoutFxs( t );
const y = v2y( isNaN( v ) ? 0.0 : v, range, size.height );
newPointsWithoutFxs += `${ x },${ y } `;
}
}
return { newPoints, newPointsWithoutFxs };
}
// == component ====================================================================================
const CurveEditorGraph = ( props: {
curveId: string;
range: TimeValueRange;
size: Resolution;
} ): JSX.Element => {
const { curveId, range, size } = props;
const automaton = useSelector( ( state ) => state.automaton.instance );
const curve = automaton?.getCurveById( curveId );
const [ points, setPoints ] = useState( '' );
const [ pointsWithoutFxs, setPointsWithoutFxs ] = useState( '' );
useEffect( // update points when precalc happened
() => {
if ( !curve ) { return; }
const handlePrecalc = (): void => {
const { newPoints, newPointsWithoutFxs } = calcPoints( curve, range, size );
setPoints( newPoints );
setPointsWithoutFxs( newPointsWithoutFxs );
};
handlePrecalc();
curve.on( 'precalc', handlePrecalc );
return () => curve.off( 'precalc', handlePrecalc );
},
[ curve, range, size ]
);
return <>
{ useMemo( () => (
<GraphLineWithoutFxs points={ pointsWithoutFxs } />
), [ pointsWithoutFxs ] ) }
{ useMemo( () => (
<GraphLine points={ points } />
), [ points ] ) }
</>;
};
export { CurveEditorGraph };