123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988 |
- import * as React from "react";
- import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
- import { faTimes } from "@fortawesome/free-solid-svg-icons";
- import { Animation } from 'babylonjs/Animations/animation';
- import { Vector2, Vector3, Quaternion } from 'babylonjs/Maths/math.vector';
- import { Size } from 'babylonjs/Maths/math.size';
- import { Color3, Color4 } from 'babylonjs/Maths/math.color';
- import { EasingFunction } from 'babylonjs/Animations/easing';
- import { IAnimationKey } from 'babylonjs/Animations/animationKey';
- import { IKeyframeSvgPoint } from './keyframeSvgPoint';
- import { SvgDraggableArea } from './svgDraggableArea';
- import { Timeline } from './timeline';
- import { Playhead } from './playhead';
- import { Notification } from './notification';
- import { GraphActionsBar } from './graphActionsBar';
- import { Scene } from "babylonjs/scene";
- import { ButtonLineComponent } from '../../../lines/buttonLineComponent';
- import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
- require("./curveEditor.scss");
- interface IAnimationCurveEditorComponentProps {
- close: (event: any) => void;
- playOrPause: () => void;
- title: string;
- animations: Animation[];
- entityName: string;
- scene: Scene;
- entity: IAnimatable;
- }
- interface ICanvasAxis {
- value: number;
- label: number;
- }
- export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, {
- animations: Animation[],
- animationName: string,
- animationType: string,
- animationTargetProperty: string,
- isOpen: boolean, selected: Animation,
- currentPathData: string | undefined,
- svgKeyframes: IKeyframeSvgPoint[] | undefined,
- currentFrame: number,
- currentValue: number,
- frameAxisLength: ICanvasAxis[],
- valueAxisLength: ICanvasAxis[],
- flatTangent: boolean,
- scale: number,
- playheadOffset: number,
- notification: string,
- currentPoint: SVGPoint | undefined,
- lastFrame: number,
- playheadPos: number
- }> {
- private _heightScale: number = 100;
- readonly _canvasLength: number = 20;
- private _newAnimations: Animation[] = [];
- private _svgKeyframes: IKeyframeSvgPoint[] = [];
- private _frames: Vector2[] = [];
- private _isPlaying: boolean = false;
- private _graphCanvas: React.RefObject<HTMLDivElement>;
- private _selectedCurve: React.RefObject<SVGPathElement>;
- private _svgCanvas: React.RefObject<SvgDraggableArea>;
- constructor(props: IAnimationCurveEditorComponentProps) {
- super(props);
- this._graphCanvas = React.createRef();
- this._selectedCurve = React.createRef();
- this._svgCanvas = React.createRef();
- let valueInd = [2, 1.8, 1.6, 1.4, 1.2, 1, 0.8, 0.6, 0.4, 0.2, 0]; // will update this until we have a top scroll/zoom feature
- this.state = {
- animations: this._newAnimations,
- selected: this.props.animations[0],
- isOpen: true,
- currentPathData: this.getPathData(this.props.animations[0]),
- svgKeyframes: this._svgKeyframes,
- animationTargetProperty: 'position.x',
- animationName: "",
- animationType: "Float",
- currentFrame: 0,
- currentValue: 1,
- flatTangent: false,
- playheadOffset: this._graphCanvas.current ? (this._graphCanvas.current.children[1].clientWidth) / (this._canvasLength * 10) : 0,
- frameAxisLength: (new Array(this._canvasLength)).fill(0).map((s, i) => { return { value: i * 10, label: i * 10 } }),
- valueAxisLength: (new Array(10)).fill(0).map((s, i) => { return { value: i * 10, label: valueInd[i] } }),
- notification: "",
- lastFrame: 0,
- currentPoint: undefined,
- scale: 1,
- playheadPos: 0,
- }
- }
- componentDidMount() {
- setTimeout(() => this.resetPlayheadOffset(), 500);
- }
- resetPlayheadOffset() {
- if (this._graphCanvas && this._graphCanvas.current) {
- this.setState({ playheadOffset: (this._graphCanvas.current.children[1].clientWidth) / (this._canvasLength * 10 * this.state.scale) });
- }
- }
- setAxesLength() {
- let length = Math.round(this._canvasLength * this.state.scale);
- if (length < (this.state.selected.getHighestFrame() * 2) / 10) {
- length = (this.state.selected.getHighestFrame() * 2) / 10
- }
- let valueLines = Math.round((this.state.scale * this._heightScale) / 10);
- let newFrameLength = (new Array(length)).fill(0).map((s, i) => { return { value: i * 10, label: i * 10 } });
- let newValueLength = (new Array(valueLines)).fill(0).map((s, i) => { return { value: i * 10, label: this.getValueLabel(i * 10) } });
- this.setState({ frameAxisLength: newFrameLength, valueAxisLength: newValueLength });
- this.resetPlayheadOffset();
- }
- getValueLabel(i: number) {
- // Need to update this when Y axis grows
- let label = 0;
- if (i === 0) {
- label = 2;
- }
- if (i === 50) {
- label = 1;
- } else {
- label = ((100 - (i * 2)) * 0.01) + 1;
- }
- return label;
- }
- handleNameChange(event: React.ChangeEvent<HTMLInputElement>) {
- event.preventDefault();
- this.setState({ animationName: event.target.value });
- }
- handleValueChange(event: React.ChangeEvent<HTMLInputElement>) {
- event.preventDefault();
- this.setState({ currentValue: parseFloat(event.target.value) }, () => {
- let animation = this.state.selected;
- let keys = animation.getKeys();
-
- let isKeyframe = keys.find(k => k.frame === this.state.currentFrame);
- if (isKeyframe){
- let updatedKeys = keys.map(k => {
- if (k.frame === this.state.currentFrame){
- k.value = this.state.currentValue;
- }
- return k;
- });
- this.state.selected.setKeys(updatedKeys);
- this.selectAnimation(animation);
- }
- });
- }
- handleFrameChange(event: React.ChangeEvent<HTMLInputElement>) {
- event.preventDefault();
- this.changeCurrentFrame(parseInt(event.target.value))
- }
- handleTypeChange(event: React.ChangeEvent<HTMLSelectElement>) {
- event.preventDefault();
- this.setState({ animationType: event.target.value });
- }
- handlePropertyChange(event: React.ChangeEvent<HTMLInputElement>) {
- event.preventDefault();
- this.setState({ animationTargetProperty: event.target.value });
- }
- addAnimation() {
- if (this.state.animationName != "" && this.state.animationTargetProperty != "") {
- let matchTypeTargetProperty = this.state.animationTargetProperty.split('.');
- let animationDataType = this.getAnimationTypeofChange(this.state.animationType);
- let matched = false;
- if (matchTypeTargetProperty.length === 1) {
- let match = (this.props.entity as any)[matchTypeTargetProperty[0]];
- if (match){
- switch (match.constructor.name) {
- case "Vector2":
- animationDataType === Animation.ANIMATIONTYPE_VECTOR2 ? matched = true : matched = false;
- break;
- case "Vector3":
- animationDataType === Animation.ANIMATIONTYPE_VECTOR3 ? matched = true : matched = false;
- break;
- case "Quaternion":
- animationDataType === Animation.ANIMATIONTYPE_QUATERNION ? matched = true : matched = false;
- break;
- case "Color3":
- animationDataType === Animation.ANIMATIONTYPE_COLOR3 ? matched = true : matched = false;
- break;
- case "Color4":
- animationDataType === Animation.ANIMATIONTYPE_COLOR4 ? matched = true : matched = false;
- break;
- case "Size":
- animationDataType === Animation.ANIMATIONTYPE_SIZE ? matched = true : matched = false;
- break;
- default: console.log("not recognized");
- break;
- }
- } else {
- this.setState({ notification: `The selected entity doesn't have a ${matchTypeTargetProperty[0]} property` });
- }
- } else if (matchTypeTargetProperty.length > 1) {
- let match = (this.props.entity as any)[matchTypeTargetProperty[0]][matchTypeTargetProperty[1]];
- if (typeof match === "number") {
- animationDataType === Animation.ANIMATIONTYPE_FLOAT ? matched = true : matched = false;
- }
- }
- if (matched) {
- let startValue;
- let endValue;
- // Default start and end values for new animations
- switch (animationDataType) {
- case Animation.ANIMATIONTYPE_FLOAT:
- startValue = 1;
- endValue = 1;
- break;
- case Animation.ANIMATIONTYPE_VECTOR2:
- startValue = new Vector2(1,1);
- endValue = new Vector2(1,1);
- break;
- case Animation.ANIMATIONTYPE_VECTOR3:
- startValue = new Vector3(1,1,1);
- endValue = new Vector3(1,1,1);
- break;
- case Animation.ANIMATIONTYPE_QUATERNION:
- startValue = new Quaternion(1,1,1,1);
- endValue = new Quaternion(1,1,1,1);
- break;
- case Animation.ANIMATIONTYPE_COLOR3:
- startValue = new Color3(1,1,1);
- endValue = new Color3(1,1,1);
- break;
- case Animation.ANIMATIONTYPE_COLOR4:
- startValue = new Color4(1,1,1,1);
- endValue = new Color4(1,1,1,1);
- break;
- case Animation.ANIMATIONTYPE_SIZE:
- startValue = new Size(1,1);
- endValue = new Size(1,1);
- break;
- default: console.log("not recognized");
- break;
- }
- let animation = new Animation(this.state.animationName, this.state.animationTargetProperty, 30, animationDataType);
- // Start with two keyframes
- var keys = [];
- keys.push({
- frame: 0,
- value: startValue
- });
- keys.push({
- frame: 100,
- value: endValue
- });
- animation.setKeys(keys);
- (this.props.entity as IAnimatable).animations?.push(animation);
- } else {
- this.setState({ notification: `The property "${this.state.animationTargetProperty}" is not a "${this.state.animationType}" type` });
- }
- } else {
- this.setState({ notification: "You need to provide a name and target property." });
- }
- }
- clearNotification() {
- this.setState({ notification: "" });
- }
- addKeyframeClick() {
- let currentAnimation = this.state.selected;
- if (currentAnimation.dataType === Animation.ANIMATIONTYPE_FLOAT) {
- let keys = currentAnimation.getKeys();
- let x = this.state.currentFrame;
- let y = this.state.currentValue;
- keys.push({ frame: x, value: y });
- keys.sort((a, b) => a.frame - b.frame);
- currentAnimation.setKeys(keys);
- this.selectAnimation(currentAnimation);
- }
- }
- removeKeyframeClick() {
- let currentAnimation = this.state.selected;
- if (currentAnimation.dataType === Animation.ANIMATIONTYPE_FLOAT) {
- let keys = currentAnimation.getKeys();
- let x = this.state.currentFrame;
- let filteredKeys = keys.filter(kf => kf.frame !== x);
- currentAnimation.setKeys(filteredKeys);
- this.selectAnimation(currentAnimation);
- }
- }
- addKeyFrame(event: React.MouseEvent<SVGSVGElement>) {
- event.preventDefault();
- var svg = event.target as SVGSVGElement;
- var pt = svg.createSVGPoint();
- pt.x = event.clientX;
- pt.y = event.clientY;
- var inverse = svg.getScreenCTM()?.inverse();
- var cursorpt = pt.matrixTransform(inverse);
- var currentAnimation = this.state.selected;
- var keys = currentAnimation.getKeys();
- var height = 100;
- var middle = (height / 2);
- var keyValue;
- if (cursorpt.y < middle) {
- keyValue = 1 + ((100 / cursorpt.y) * .1)
- }
- if (cursorpt.y > middle) {
- keyValue = 1 - ((100 / cursorpt.y) * .1)
- }
- keys.push({ frame: cursorpt.x, value: keyValue });
- currentAnimation.setKeys(keys);
- this.selectAnimation(currentAnimation);
- }
- updateKeyframe(keyframe: Vector2, index: number) {
- let anim = this.state.selected as Animation;
- var keys: IAnimationKey[] = [];
- var svgKeyframes = this.state.svgKeyframes?.map((k, i) => {
- if (i === index) {
- k.keyframePoint.x = keyframe.x;
- k.keyframePoint.y = keyframe.y;
- }
- var height = 100;
- var middle = (height / 2);
- var keyValue;
- if (k.keyframePoint.y < middle) {
- keyValue = 1 + ((100 / k.keyframePoint.y) * .1)
- }
- if (k.keyframePoint.y > middle) {
- keyValue = 1 - ((100 / k.keyframePoint.y) * .1)
- }
- keys.push({ frame: k.keyframePoint.x, value: keyValue })
- return k;
- });
- anim.setKeys(keys);
- this.setState({ svgKeyframes: svgKeyframes });
- }
- getAnimationProperties(animation: Animation) {
- let easingType, easingMode;
- let easingFunction: EasingFunction = animation.getEasingFunction() as EasingFunction;
- if (easingFunction === undefined) {
- easingType = undefined
- easingMode = undefined;
- } else {
- easingType = easingFunction.constructor.name;
- easingMode = easingFunction.getEasingMode();
- }
- return { easingType, easingMode }
- }
- getPathData(animation: Animation) {
- const { easingMode, easingType } = this.getAnimationProperties(animation);
- const keyframes = animation.getKeys();
- if (keyframes === undefined) {
- return "";
- }
- const startKey = keyframes[0];
- // This assumes the startkey is always 0... beed to change this
- let middle = this._heightScale / 2;
- // START OF LINE/CURVE
- let data: string | undefined = `M${startKey.frame}, ${this._heightScale - (startKey.value * middle)}`;
- if (this.state && this.state.flatTangent) {
- data = this.curvePathFlat(keyframes, data, middle, animation.dataType);
- } else {
- if (this.getAnimationData(animation).usesTangents) {
- data = this.curvePathWithTangents(keyframes, data, middle, animation.dataType);
- } else {
- console.log("no tangents in this animation");
- if (easingType === undefined && easingMode === undefined) {
- data = this.linearInterpolation(keyframes, data, middle);
- } else {
- let easingFunction = animation.getEasingFunction();
- data = this.curvePath(keyframes, data, middle, easingFunction as EasingFunction)
- }
- }
- }
- return data;
- }
- drawAllFrames(initialKey: IAnimationKey, endKey: IAnimationKey, easingFunction: EasingFunction) {
- let i = initialKey.frame;
- for (i; i < endKey.frame; i++) {
- (i * 100 / endKey.frame)
- let dy = easingFunction.easeInCore(i);
- let value = this._heightScale - (dy * (this._heightScale / 2));
- this._frames.push(new Vector2(i, value));
- }
- }
- curvePathFlat(keyframes: IAnimationKey[], data: string, middle: number, dataType: number) {
- keyframes.forEach((key, i) => {
- if (dataType === Animation.ANIMATIONTYPE_FLOAT) {
- var pointA = new Vector2(0, 0);
- if (i === 0) {
- pointA.set(key.frame, this._heightScale - (key.value * middle));
- this.setKeyframePoint([pointA], i, keyframes.length);
- } else {
- pointA.set(keyframes[i - 1].frame, this._heightScale - (keyframes[i - 1].value * middle));
- let tangentA = new Vector2(pointA.x + 10, pointA.y);
- let pointB = new Vector2(key.frame, this._heightScale - (key.value * middle));
- let tangentB = new Vector2(pointB.x - 10, pointB.y);
- this.setKeyframePoint([pointA, tangentA, tangentB, pointB], i, keyframes.length);
- data += ` C${tangentA.x} ${tangentA.y} ${tangentB.x} ${tangentB.y} ${pointB.x} ${pointB.y} `
- }
- }
- });
- return data;
- }
- curvePathWithTangents(keyframes: IAnimationKey[], data: string, middle: number, type: number) {
- switch (type) {
- case Animation.ANIMATIONTYPE_FLOAT:
- // value float
- break;
- case Animation.ANIMATIONTYPE_VECTOR3:
- // value float
- break;
- }
- keyframes.forEach((key, i) => {
- var inTangent = key.inTangent;
- var outTangent = key.outTangent;
- let svgKeyframe;
- if (i === 0) {
- svgKeyframe = { keyframePoint: new Vector2(key.frame, this._heightScale - (key.value * middle)), rightControlPoint: outTangent, leftControlPoint: null, id: i.toString() }
- data += ` C${svgKeyframe.keyframePoint.x} ${svgKeyframe.keyframePoint.y} ${outTangent.x} ${outTangent.y}`
- } else {
- svgKeyframe = { keyframePoint: new Vector2(keyframes[i - 1].frame, this._heightScale - (keyframes[i - 1].value * middle)), rightControlPoint: outTangent, leftControlPoint: inTangent, id: i.toString() }
- if (outTangent) {
- data += `${inTangent.x} ${inTangent.y} C${svgKeyframe.keyframePoint.x} ${svgKeyframe.keyframePoint.y} ${outTangent.x} ${outTangent.y} `
- } else {
- data += `${inTangent.x} ${inTangent.y} C${svgKeyframe.keyframePoint.x} ${svgKeyframe.keyframePoint.y} `
- }
- }
- this._svgKeyframes.push(svgKeyframe);
- });
- return data;
- }
- curvePath(keyframes: IAnimationKey[], data: string, middle: number, easingFunction: EasingFunction) {
- // This will get 1/4 and 3/4 of points in eased curve
- const u = .25;
- const v = .75;
- keyframes.forEach((key, i) => {
- // Gets previous initial point of curve segment
- var pointA = new Vector2(0, 0);
- if (i === 0) {
- pointA.x = key.frame;
- pointA.y = this._heightScale - (key.value * middle);
- this.setKeyframePoint([pointA], i, keyframes.length);
- } else {
- pointA.x = keyframes[i - 1].frame;
- pointA.y = this._heightScale - (keyframes[i - 1].value * middle)
- // Gets the end point of this curve segment
- var pointB = new Vector2(key.frame, this._heightScale - (key.value * middle));
- // Get easing value of percentage to get the bezier control points below
- let du = easingFunction.easeInCore(u); // What to do here, when user edits the curve? Option 1: Modify the curve with the new control points as BezierEaseCurve(x,y,z,w)
- let dv = easingFunction.easeInCore(v); // Option 2: Create a easeInCore function and adapt it with the new control points values... needs more revision.
- // Direction of curve up/down
- let yInt25 = 0;
- if (pointB.y > pointA.y) { // if pointB.y > pointA.y = goes down
- yInt25 = ((pointB.y - pointA.y) * du) + pointA.y
- } else if (pointB.y < pointA.y) { // if pointB.y < pointA.y = goes up
- yInt25 = pointA.y - ((pointA.y - pointB.y) * du);
- }
- let yInt75 = 0;
- if (pointB.y > pointA.y) {
- yInt75 = ((pointB.y - pointA.y) * dv) + pointA.y
- } else if (pointB.y < pointA.y) {
- yInt75 = pointA.y - ((pointA.y - pointB.y) * dv)
- }
- // Intermediate points in curve
- let intermediatePoint25 = new Vector2(((pointB.x - pointA.x) * u) + pointA.x, yInt25);
- let intermediatePoint75 = new Vector2(((pointB.x - pointA.x) * v) + pointA.x, yInt75);
- // Gets the four control points of bezier curve
- let controlPoints = this.interpolateControlPoints(pointA, intermediatePoint25, u, intermediatePoint75, v, pointB);
- if (controlPoints === undefined) {
- console.log("error getting bezier control points");
- } else {
- this.setKeyframePoint(controlPoints, i, keyframes.length);
- data += ` C${controlPoints[1].x} ${controlPoints[1].y} ${controlPoints[2].x} ${controlPoints[2].y} ${controlPoints[3].x} ${controlPoints[3].y}`
- }
- }
- });
- return data;
- }
- renderPoints(updatedSvgKeyFrame: IKeyframeSvgPoint, index: number) {
- let animation = this.state.selected as Animation;
- // Bug: After play/stop we get an extra keyframe at 0
- let keys = [...animation.getKeys()];
- let newFrame = 0;
- if (updatedSvgKeyFrame.keyframePoint.x !== 0) {
- if (updatedSvgKeyFrame.keyframePoint.x > 0 && updatedSvgKeyFrame.keyframePoint.x < 1) {
- newFrame = 1;
- } else {
- newFrame = Math.round(updatedSvgKeyFrame.keyframePoint.x);
- }
- }
- keys[index].frame = newFrame; // This value comes as percentage/frame/time
- keys[index].value = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * 2; // this value comes inverted svg from 0 = 100 to 100 = 0
- animation.setKeys(keys);
- this.selectAnimation(animation);
- }
- linearInterpolation(keyframes: IAnimationKey[], data: string, middle: number): string {
- keyframes.forEach((key, i) => {
- var point = new Vector2(0, 0);
- point.x = key.frame;
- point.y = this._heightScale - (key.value * middle);
- this.setKeyframePointLinear(point, i);
- if (i !== 0) {
- data += ` L${point.x} ${point.y}`
- }
- });
- return data;
- }
- setKeyframePointLinear(point: Vector2, index: number) {
- let svgKeyframe = { keyframePoint: point, rightControlPoint: null, leftControlPoint: null, id: index.toString() }
- this._svgKeyframes.push(svgKeyframe);
- }
- setKeyframePoint(controlPoints: Vector2[], index: number, keyframesCount: number) {
- let svgKeyframe;
- if (index === 0) {
- svgKeyframe = { keyframePoint: controlPoints[0], rightControlPoint: null, leftControlPoint: null, id: index.toString() }
- } else {
- this._svgKeyframes[index - 1].rightControlPoint = controlPoints[1];
- svgKeyframe = { keyframePoint: controlPoints[3], rightControlPoint: null, leftControlPoint: controlPoints[2], id: index.toString() }
- }
- this._svgKeyframes.push(svgKeyframe);
- }
- isAnimationPlaying() {
- this._isPlaying = this.props.scene.getAllAnimatablesByTarget(this.props.entity).length > 0;
- if (this._isPlaying) {
- this.props.playOrPause();
- } else {
- this._isPlaying = false;
- }
- }
- selectAnimation(animation: Animation) {
- this.isAnimationPlaying();
- this._svgKeyframes = [];
- const pathData = this.getPathData(animation);
- let lastFrame = animation.getHighestFrame();
- if (pathData === "") {
- console.log("no keyframes in this animation");
- }
- this.setState({ selected: animation, currentPathData: pathData, svgKeyframes: this._svgKeyframes, lastFrame: lastFrame });
- }
- getAnimationData(animation: Animation) {
- // General Props
- let loopMode = animation.loopMode;
- let name = animation.name;
- let blendingSpeed = animation.blendingSpeed;
- let targetProperty = animation.targetProperty;
- let targetPropertyPath = animation.targetPropertyPath;
- let framesPerSecond = animation.framePerSecond;
- let highestFrame = animation.getHighestFrame();
- // Should we use this for export?
- let serialized = animation.serialize();
- let usesTangents = animation.getKeys().find(kf => kf.inTangent);
- return { loopMode, name, blendingSpeed, targetPropertyPath, targetProperty, framesPerSecond, highestFrame, serialized, usesTangents }
- }
- getAnimationTypeofChange(selected: string) {
- let dataType = 0;
- switch (selected) {
- case "Float":
- dataType = Animation.ANIMATIONTYPE_FLOAT;
- break;
- case "Quaternion":
- dataType = Animation.ANIMATIONTYPE_QUATERNION;
- break;
- case "Vector3":
- dataType = Animation.ANIMATIONTYPE_VECTOR3;
- break;
- case "Vector2":
- dataType = Animation.ANIMATIONTYPE_VECTOR2;
- break;
- case "Size":
- dataType = Animation.ANIMATIONTYPE_SIZE;
- break;
- case "Color3":
- dataType = Animation.ANIMATIONTYPE_COLOR3;
- break;
- case "Color4":
- dataType = Animation.ANIMATIONTYPE_COLOR4;
- break;
- }
- return dataType;
- }
- interpolateControlPoints(p0: Vector2, p1: Vector2, u: number, p2: Vector2, v: number, p3: Vector2): Vector2[] | undefined {
- let a = 0.0;
- let b = 0.0;
- let c = 0.0;
- let d = 0.0;
- let det = 0.0;
- let q1: Vector2 = new Vector2();
- let q2: Vector2 = new Vector2();
- let controlA: Vector2 = p0;
- let controlB: Vector2 = new Vector2();
- let controlC: Vector2 = new Vector2();
- let controlD: Vector2 = p3;
- if ((u <= 0.0) || (u >= 1.0) || (v <= 0.0) || (v >= 1.0) || (u >= v)) {
- return undefined;
- }
- a = 3 * (1 - u) * (1 - u) * u; b = 3 * (1 - u) * u * u;
- c = 3 * (1 - v) * (1 - v) * v; d = 3 * (1 - v) * v * v;
- det = a * d - b * c;
- if (det == 0.0) return undefined;
- q1.x = p1.x - ((1 - u) * (1 - u) * (1 - u) * p0.x + u * u * u * p3.x);
- q1.y = p1.y - ((1 - u) * (1 - u) * (1 - u) * p0.y + u * u * u * p3.y);
- q2.x = p2.x - ((1 - v) * (1 - v) * (1 - v) * p0.x + v * v * v * p3.x);
- q2.y = p2.y - ((1 - v) * (1 - v) * (1 - v) * p0.y + v * v * v * p3.y);
- controlB.x = (d * q1.x - b * q2.x) / det;
- controlB.y = (d * q1.y - b * q2.y) / det;
- controlC.x = ((-c) * q1.x + a * q2.x) / det;
- controlC.y = ((-c) * q1.y + a * q2.y) / det;
- return [controlA, controlB, controlC, controlD];
- }
- changeCurrentFrame(frame: number) {
- let currentValue;
- let selectedCurve = this._selectedCurve.current;
- if (selectedCurve) {
- var curveLength = selectedCurve.getTotalLength();
- let frameValue = (frame * curveLength) / 100;
- let currentP = selectedCurve.getPointAtLength(frameValue);
- let middle = this._heightScale / 2;
- let offset = (((currentP?.y * this._heightScale) - (this._heightScale ** 2) / 2) / middle) / this._heightScale;
- let unit = Math.sign(offset);
- currentValue = unit === -1 ? Math.abs(offset + unit) : unit - offset;
- this.setState({ currentFrame: frame, currentValue: currentValue, currentPoint: currentP });
- }
- }
- setFlatTangent() {
- this.setState({ flatTangent: !this.state.flatTangent }, () => this.selectAnimation(this.state.selected));
- }
- zoom(e: React.WheelEvent<HTMLDivElement>) {
- e.nativeEvent.stopImmediatePropagation();
- console.log(e.deltaY);
- let scaleX = 1;
- if (Math.sign(e.deltaY) === -1) {
- scaleX = (this.state.scale - 0.01);
- } else {
- scaleX = (this.state.scale + 0.01);
- }
- this.setState({ scale: scaleX }, this.setAxesLength);
- }
- render() {
- return (
- <div id="animation-curve-editor">
- <Notification message={this.state.notification} open={this.state.notification !== "" ? true : false} close={() => this.clearNotification()} />
- <div className="header">
- <div className="title">{this.props.title}</div>
- <div className="close" onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => this.props.close(event)}>
- <FontAwesomeIcon icon={faTimes} />
- </div>
- </div>
- <GraphActionsBar currentValue={this.state.currentValue} currentFrame={this.state.currentFrame} handleFrameChange={(e) => this.handleFrameChange(e)} handleValueChange={(e) => this.handleValueChange(e)} addKeyframe={() => this.addKeyframeClick()} removeKeyframe={() => this.removeKeyframeClick()} flatTangent={() => this.setFlatTangent()} />
- <div className="content">
- <div className="row">
- <div className="animation-list">
- <div>
- <div className="label-input">
- <label>Animation Name</label>
- <input type="text" value={this.state.animationName} onChange={(e) => this.handleNameChange(e)}></input>
- </div>
- <div className="label-input">
- <label>Type</label>
- <select onChange={(e) => this.handleTypeChange(e)} value={this.state.animationType}>
- <option value="Float">Float</option>
- <option value="Vector3">Vector3</option>
- <option value="Vector2">Vector2</option>
- <option value="Quaternion">Quaternion</option>
- <option value="Color3">Color3</option>
- <option value="Color4">Color4</option>
- <option value="Size">Size</option>
- </select>
- </div>
- <div className="label-input">
- <label>Target Property</label>
- <input type="text" value={this.state.animationTargetProperty} onChange={(e) => this.handlePropertyChange(e)}></input>
- </div>
- <ButtonLineComponent label={"Add Animation"} onClick={() => this.addAnimation()} />
- </div>
- <div className="object-tree">
- <h2>{this.props.entityName}</h2>
- <ul>
- {this.props.animations && this.props.animations.map((animation, i) => {
- let element;
- switch(animation.dataType){
- case Animation.ANIMATIONTYPE_FLOAT:
- element = <li className={this.state.selected.name === animation.name ? 'active' : ''} key={i} onClick={() => this.selectAnimation(animation)}>
- {animation.name}
- <strong>{animation.targetProperty}</strong>
- </li>
- break;
- case Animation.ANIMATIONTYPE_VECTOR2:
- element = <li className="property" key={i}><p>{animation.targetProperty}</p>
- <ul>
- <li key={`${i}_x`}>Property <strong>X</strong></li>
- <li key={`${i}_y`}>Property <strong>Y</strong></li>
- </ul>
- </li>
- break;
- case Animation.ANIMATIONTYPE_VECTOR3:
- element = <li className="property" key={i}><p>{animation.targetProperty}</p>
- <ul>
- <li key={`${i}_x`}>Property <strong>X</strong></li>
- <li key={`${i}_y`}>Property <strong>Y</strong></li>
- <li key={`${i}_z`}>Property <strong>Z</strong></li>
- </ul>
- </li>
- break;
- case Animation.ANIMATIONTYPE_QUATERNION:
- element = <li className="property" key={i}><p>{animation.targetProperty}</p>
- <ul>
- <li key={`${i}_x`}>Property <strong>X</strong></li>
- <li key={`${i}_y`}>Property <strong>Y</strong></li>
- <li key={`${i}_z`}>Property <strong>Z</strong></li>
- <li key={`${i}_w`}>Property <strong>W</strong></li>
- </ul>
- </li>
- break;
- case Animation.ANIMATIONTYPE_COLOR3:
- element = <li className="property" key={i}><p>{animation.targetProperty}</p>
- <ul>
- <li key={`${i}_r`}>Property <strong>R</strong></li>
- <li key={`${i}_g`}>Property <strong>G</strong></li>
- <li key={`${i}_b`}>Property <strong>B</strong></li>
- </ul>
- </li>
- break;
- case Animation.ANIMATIONTYPE_COLOR4:
- element = <li className="property" key={i}><p>{animation.targetProperty}</p>
- <ul>
- <li key={`${i}_r`}>Property <strong>R</strong></li>
- <li key={`${i}_g`}>Property <strong>G</strong></li>
- <li key={`${i}_b`}>Property <strong>B</strong></li>
- <li key={`${i}_a`}>Property <strong>A</strong></li>
- </ul>
- </li>
- break;
- case Animation.ANIMATIONTYPE_SIZE:
- element = <li className="property" key={i}><p>{animation.targetProperty}</p>
- <ul>
- <li key={`${i}_width`}>Property <strong>Width</strong></li>
- <li key={`${i}_height`}>Property <strong>Height</strong></li>
- </ul>
- </li>
- break;
- default: console.log("not recognized");
- element = null;
- break;
- }
- return element;
-
- })}
- </ul>
- </div>
- </div>
- <div ref={this._graphCanvas} className="graph-chart" onWheel={(e) => this.zoom(e)} >
- <Playhead frame={this.state.currentFrame} offset={this.state.playheadOffset} />
- {this.state.svgKeyframes && <SvgDraggableArea ref={this._svgCanvas} viewBoxScale={this.state.frameAxisLength.length} scale={this.state.scale} keyframeSvgPoints={this.state.svgKeyframes} updatePosition={(updatedSvgKeyFrame: IKeyframeSvgPoint, index: number) => this.renderPoints(updatedSvgKeyFrame, index)}>
- {/* Frame Labels */}
- { /* Vertical Grid */}
- {this.state.frameAxisLength.map((f, i) =>
- <svg key={i}>
- <text x={f.value} y="-2" dx="-1em" style={{ font: 'italic 0.2em sans-serif', fontSize: `${0.2 * this.state.scale}em` }}>{f.value}</text>
- <line x1={f.value} y1="0" x2={f.value} y2="100%"></line>
- </svg>
- )}
- {this.state.valueAxisLength.map((f, i) => {
- return <svg key={i}>
- <text x="-3" y={f.value} dx="-1em" style={{ font: 'italic 0.2em sans-serif', fontSize: `${0.2 * this.state.scale}em` }}>{f.label.toFixed(1)}</text>
- <line x1="0" y1={f.value} x2="100%" y2={f.value}></line>
- </svg>
- })}
- { /* Single Curve -Modify this for multiple selection and view */}
- <path ref={this._selectedCurve} pathLength={this.state.lastFrame} id="curve" d={this.state.currentPathData} style={{ stroke: 'red', fill: 'none', strokeWidth: '0.5' }}></path>
- {this._frames && this._frames.map(frame =>
- <svg x={frame.x} y={frame.y} style={{ overflow: 'visible' }}>
- <circle cx="0" cy="0" r="2" stroke="black" strokeWidth="1" fill="white" />
- </svg>
- )}
- </SvgDraggableArea>
- }
- </div>
- </div>
- <div className="row">
- <Timeline currentFrame={this.state.currentFrame} onCurrentFrameChange={(frame: number) => this.changeCurrentFrame(frame)} keyframes={this.state.selected.getKeys()} selected={this.state.selected.getKeys()[0]}></Timeline>
- </div>
- </div>
- </div>
- );
- }
- }
|