Skip to content

Commit

Permalink
change (core, curve): having native node as an array was too much
Browse files Browse the repository at this point in the history
  • Loading branch information
FMS-Cat committed Nov 18, 2020
1 parent 54bd125 commit ab84c5f
Show file tree
Hide file tree
Showing 8 changed files with 86 additions and 78 deletions.
54 changes: 31 additions & 23 deletions packages/automaton-with-gui/src/CurveWithGUI.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,14 +260,14 @@ export class CurveWithGUI extends Curve {
*/
public createNode( time: number, value: number ): BezierNode & WithID {
const id = genID();
const data: any = [
const data: any = {
time,
value,
-CURVE_DEFAULT_HANDLE_LENGTH,
0.0,
CURVE_DEFAULT_HANDLE_LENGTH,
0.0
];
inTime: -CURVE_DEFAULT_HANDLE_LENGTH,
inValue: 0.0,
outTime: CURVE_DEFAULT_HANDLE_LENGTH,
outValue: 0.0,
};
data.$id = id;
this.__nodes.push( data );
this.__sortNodes();
Expand Down Expand Up @@ -369,13 +369,13 @@ export class CurveWithGUI extends Curve {
if ( index === 0 ) {
newTime = 0;
} else {
newTime = Math.max( newTime, this.__nodes[ index - 1 ][ 0 ] );
newTime = Math.max( newTime, this.__nodes[ index - 1 ].time );

if ( index !== this.__nodes.length - 1 ) {
newTime = Math.min( newTime, this.__nodes[ index + 1 ][ 0 ] );
newTime = Math.min( newTime, this.__nodes[ index + 1 ].time );
}
}
node[ 0 ] = newTime;
node.time = newTime;

this.precalc();

Expand All @@ -399,7 +399,7 @@ export class CurveWithGUI extends Curve {

const node = this.__nodes[ index ];

node[ 1 ] = value;
node.value = value;

this.precalc();

Expand All @@ -423,7 +423,7 @@ export class CurveWithGUI extends Curve {

const newTime = ( dir === 'in' ) ? Math.min( 0.0, time ) : Math.max( 0.0, time );

node[ dir === 'in' ? 2 : 4 ] = newTime;
node[ dir === 'in' ? 'inTime' : 'outTime' ] = newTime;

this.precalc();

Expand All @@ -445,7 +445,7 @@ export class CurveWithGUI extends Curve {

const node = this.__nodes[ index ];

node[ dir === 'in' ? 3 : 5 ] = value;
node[ dir === 'in' ? 'inValue' : 'outValue' ] = value;

this.precalc();

Expand All @@ -465,8 +465,8 @@ export class CurveWithGUI extends Curve {
if ( index === 0 && dir === 'in' ) { return; }

const node = this.__nodes[ index ];
node[ dir === 'in' ? 2 : 4 ] = ( ( dir === 'in' ) ? -1.0 : 1.0 ) * CURVE_DEFAULT_HANDLE_LENGTH;
node[ dir === 'in' ? 3 : 5 ] = 0.0;
node[ dir === 'in' ? 'inTime' : 'outTime' ] = ( ( dir === 'in' ) ? -1.0 : 1.0 ) * CURVE_DEFAULT_HANDLE_LENGTH;
node[ dir === 'in' ? 'inValue' : 'outValue' ] = 0.0;

this.precalc();

Expand Down Expand Up @@ -798,15 +798,23 @@ export class CurveWithGUI extends Curve {
*/
private __serializeNodes(): SerializedBezierNode[] {
return this.__nodes.map( ( node ) => {
let data: SerializedBezierNode = [];

for ( let i = 5; i >= 0; i -- ) {
if ( node[ i ] !== 0.0 ) {
data = node.concat().splice( 0, i + 1 ) as SerializedBezierNode;
}
const { time, value, inTime, inValue, outTime, outValue } = node;

if ( outValue !== 0.0 ) {
return [ time, value, inTime, inValue, outTime, outValue ];
} else if ( outTime !== 0.0 ) {
return [ time, value, inTime, inValue, outTime ];
} else if ( inValue !== 0.0 ) {
return [ time, value, inTime, inValue ];
} else if ( inTime !== 0.0 ) {
return [ time, value, inTime ];
} else if ( value !== 0.0 ) {
return [ time, value ];
} else if ( time !== 0.0 ) {
return [ time ];
} else {
return [];
}

return data;
} );
}

Expand Down Expand Up @@ -858,7 +866,7 @@ export class CurveWithGUI extends Curve {
* Sort nodes by time.
*/
private __sortNodes(): void {
this.__nodes = this.__nodes.sort( ( a, b ) => a[ 0 ] - b[ 0 ] );
this.__nodes = this.__nodes.sort( ( a, b ) => a.time - b.time );
}

/**
Expand Down
4 changes: 2 additions & 2 deletions packages/automaton-with-gui/src/view/components/CurveEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,8 @@ const CurveEditor = ( { className }: CurveEditorProps ): JSX.Element => {
curve.moveNodeTime( data.$id, time );
curve.moveNodeValue( data.$id, value );

data[ 0 ] = time;
data[ 1 ] = value;
data.time = time;
data.value = value;

dispatch( {
type: 'History/Push',
Expand Down
36 changes: 18 additions & 18 deletions packages/automaton-with-gui/src/view/components/CurveEditorNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@ const CurveEditorNode = ( props: {
(): void => {
if ( !curve ) { return; }

const timePrev = node[ 0 ];
const valuePrev = node[ 1 ];
const timePrev = node.time;
const valuePrev = node.value;
let x = t2x( timePrev, range, size.width );
let y = v2y( valuePrev, range, size.height );
let time = timePrev;
Expand Down Expand Up @@ -165,11 +165,11 @@ const CurveEditorNode = ( props: {
( dir: 'in' | 'out' ): void => {
if ( !curve ) { return; }

const tPrev = node[ dir === 'in' ? 2 : 4 ];
const vPrev = node[ dir === 'in' ? 3 : 5 ];
const tPrev = node[ dir === 'in' ? 'inTime' : 'outTime' ];
const vPrev = node[ dir === 'in' ? 'inValue' : 'outValue' ];
const dirOp = dir === 'in' ? 'out' : 'in';
const tOpPrev = node[ dir === 'in' ? 4 : 2 ];
const vOpPrev = node[ dir === 'in' ? 5 : 3 ];
const tOpPrev = node[ dir === 'in' ? 'outTime' : 'inTime' ];
const vOpPrev = node[ dir === 'in' ? 'outValue' : 'inValue' ];
const xPrev = dt2dx( tPrev, range, size.width );
const yPrev = dv2dy( vPrev, range, size.height );
const slPrev = Math.sqrt( xPrev * xPrev + yPrev * yPrev );
Expand Down Expand Up @@ -283,8 +283,8 @@ const CurveEditorNode = ( props: {
( dir: 'in' | 'out' ): void => {
if ( !curve ) { return; }

const timePrev = node[ dir === 'in' ? 2 : 4 ];
const valuePrev = node[ dir === 'in' ? 3 : 5 ];
const timePrev = node[ dir === 'in' ? 'inTime' : 'outTime' ];
const valuePrev = node[ dir === 'in' ? 'inValue' : 'outValue' ];

curve.moveHandleTime( node.$id, dir, 0.0 );
curve.moveHandleValue( node.$id, dir, 0.0 );
Expand Down Expand Up @@ -344,34 +344,34 @@ const CurveEditorNode = ( props: {
return (
<Root
transform={ `translate(${
t2x( node[ 0 ], range, size.width )
t2x( node.time, range, size.width )
},${
v2y( node[ 1 ], range, size.height )
v2y( node.value, range, size.height )
})` }
>
<HandleLine
x2={ dt2dx( node[ 2 ], range, size.width ) }
y2={ dv2dy( node[ 3 ], range, size.height ) }
x2={ dt2dx( node.inTime, range, size.width ) }
y2={ dv2dy( node.inValue, range, size.height ) }
/>
<HandleCircle
r="4"
transform={ `translate(${
dt2dx( node[ 2 ], range, size.width )
dt2dx( node.inTime, range, size.width )
},${
dv2dy( node[ 3 ], range, size.height )
dv2dy( node.inValue, range, size.height )
})` }
onMouseDown={ handleHandleInClick }
/>
<HandleLine
x2={ dt2dx( node[ 4 ], range, size.width ) }
y2={ dv2dy( node[ 5 ], range, size.height ) }
x2={ dt2dx( node.outTime, range, size.width ) }
y2={ dv2dy( node.outValue, range, size.height ) }
/>
<HandleCircle
r="4"
transform={ `translate(${
dt2dx( node[ 4 ], range, size.width )
dt2dx( node.outTime, range, size.width )
},${
dv2dy( node[ 5 ], range, size.height )
dv2dy( node.outValue, range, size.height )
})` }
onMouseDown={ handleHandleOutClick }
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/automaton-with-gui/src/view/components/CurveListEntry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const CurveListEntry = ( props: CurveListEntryProps ): JSX.Element => {
commands: [
{
type: 'automaton/createCurve',
data: newData
data: newData.serializeWithID()
}
]
} );
Expand Down
12 changes: 6 additions & 6 deletions packages/automaton-with-gui/src/view/components/InspectorCurveNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const InspectorCurveNode = ( props: Props ): JSX.Element | null => {
<InspectorItem name={ useBeatInGUI ? 'Beat' : 'Time' }>
<NumberParam
type="float"
value={ timeToDisplay( node[ 0 ] ) }
value={ timeToDisplay( node.time ) }
onChange={ ( time ) => { curve.moveNodeTime( node.$id, displayToTime( time ) ); } }
onSettle={ ( value, valuePrev ) => {
dispatch( {
Expand All @@ -53,7 +53,7 @@ const InspectorCurveNode = ( props: Props ): JSX.Element | null => {
<InspectorItem name="Value">
<NumberParam
type="float"
value={ node[ 1 ] }
value={ node.value }
onChange={ ( value ) => { curve.moveNodeValue( node.$id, value ); } }
onSettle={ ( value, valuePrev ) => {
dispatch( {
Expand All @@ -78,7 +78,7 @@ const InspectorCurveNode = ( props: Props ): JSX.Element | null => {
<InspectorItem name={ useBeatInGUI ? 'In Beat' : 'In Time' }>
<NumberParam
type="float"
value={ timeToDisplay( node[ 2 ] ) }
value={ timeToDisplay( node.inTime ) }
onChange={ ( value ) => { curve.moveHandleTime( node.$id, 'in', displayToTime( value ) ); } }
onSettle={ ( value, valuePrev ) => {
dispatch( {
Expand All @@ -101,7 +101,7 @@ const InspectorCurveNode = ( props: Props ): JSX.Element | null => {
<InspectorItem name="In Value">
<NumberParam
type="float"
value={ node[ 3 ] }
value={ node.inValue }
onChange={ ( value ) => { curve.moveHandleValue( node.$id, 'in', value ); } }
onSettle={ ( value, valuePrev ) => {
dispatch( {
Expand All @@ -127,7 +127,7 @@ const InspectorCurveNode = ( props: Props ): JSX.Element | null => {
<InspectorItem name={ useBeatInGUI ? 'Out Beat' : 'Out Time' }>
<NumberParam
type="float"
value={ timeToDisplay( node[ 4 ] ) }
value={ timeToDisplay( node.outTime ) }
onChange={ ( value ) => { curve.moveHandleTime( node.$id, 'out', displayToTime( value ) ); } }
onSettle={ ( value, valuePrev ) => {
dispatch( {
Expand All @@ -150,7 +150,7 @@ const InspectorCurveNode = ( props: Props ): JSX.Element | null => {
<InspectorItem name="Out Value">
<NumberParam
type="float"
value={ node[ 5 ] }
value={ node.outValue }
onChange={ ( value ) => { curve.moveHandleValue( node.$id, 'out', value ); } }
onSettle={ ( value, valuePrev ) => {
dispatch( {
Expand Down
24 changes: 12 additions & 12 deletions packages/automaton/src/Curve.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export class Curve {
* The length of this curve.
*/
public get length(): number {
return this.__nodes[ this.__nodes.length - 1 ][ 0 ];
return this.__nodes[ this.__nodes.length - 1 ].time;
}


Expand All @@ -54,14 +54,14 @@ export class Curve {
* @param data Data of a curve
*/
public deserialize( data: SerializedCurve ): void {
this.__nodes = data.nodes.map( ( node ) => [
node[ 0 ] ?? 0.0,
node[ 1 ] ?? 0.0,
node[ 2 ] ?? 0.0,
node[ 3 ] ?? 0.0,
node[ 4 ] ?? 0.0,
node[ 5 ] ?? 0.0,
] );
this.__nodes = data.nodes.map( ( node ) => ( {
time: node[ 0 ] ?? 0.0,
value: node[ 1 ] ?? 0.0,
inTime: node[ 2 ] ?? 0.0,
inValue: node[ 3 ] ?? 0.0,
outTime: node[ 4 ] ?? 0.0,
outValue: node[ 5 ] ?? 0.0,
} ) );

this.__fxs = [];
data.fxs?.forEach( ( fx ) => {
Expand Down Expand Up @@ -130,9 +130,9 @@ export class Curve {
const node0 = nodeTail;
nodeTail = this.__nodes[ iNode + 1 ];
const i0 = iTail;
iTail = Math.floor( nodeTail[ 0 ] * this.__automaton.resolution );
iTail = Math.floor( nodeTail.time * this.__automaton.resolution );

this.__values[ i0 ] = node0[ 1 ];
this.__values[ i0 ] = node0.value;
for ( let i = i0 + 1; i <= iTail; i ++ ) {
const time = i / this.__automaton.resolution;
const value = bezierEasing( node0, nodeTail, time );
Expand All @@ -141,7 +141,7 @@ export class Curve {
}

for ( let i = iTail + 1; i < this.__values.length; i ++ ) {
this.__values[ i ] = nodeTail[ 1 ];
this.__values[ i ] = nodeTail.value;
}
}

Expand Down
16 changes: 8 additions & 8 deletions packages/automaton/src/types/BezierNode.ts
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
/**
* Represents a bezier node.
*/
export type BezierNode = [
export interface BezierNode {
/**
* Time of the node.
*/
time: number,
time: number;

/**
* Value of the node.
*/
value: number,
value: number;

/**
* Bezier control point of inlet. Time.
*/
inTime: number,
inTime: number;

/**
* Bezier control point of inlet. Value.
*/
inValue: number,
inValue: number;

/**
* Bezier control point of outlet. Time.
*/
outTime: number,
outTime: number;

/**
* Bezier control point of outlet. Value.
*/
outValue: number,
];
outValue: number;
}
16 changes: 8 additions & 8 deletions packages/automaton/src/utils/bezierEasing.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,16 +116,16 @@ export function rawBezierEasing(
export function bezierEasing( node0: BezierNode, node1: BezierNode, time: number ): number {
return rawBezierEasing(
{
p0: node0[ 0 ],
p1: node0[ 0 ] + node0[ 4 ],
p2: node1[ 0 ] + node1[ 2 ],
p3: node1[ 0 ]
p0: node0.time,
p1: node0.time + node0.outTime,
p2: node1.time + node1.inTime,
p3: node1.time
},
{
p0: node0[ 1 ],
p1: node0[ 1 ] + node0[ 5 ],
p2: node1[ 1 ] + node1[ 3 ],
p3: node1[ 1 ]
p0: node0.value,
p1: node0.value + node0.outValue,
p2: node1.value + node1.inValue,
p3: node1.value
},
time
);
Expand Down

0 comments on commit ab84c5f

Please sign in to comment.