targetedAnimationPropertyGridComponent.tsx 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. import * as React from "react";
  2. import { Observable } from "babylonjs/Misc/observable";
  3. import { TargetedAnimation } from "babylonjs/Animations/animationGroup";
  4. import { Scene } from "babylonjs/scene";
  5. import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
  6. import { ButtonLineComponent } from "../../../lines/buttonLineComponent";
  7. import { LineContainerComponent } from "../../../lineContainerComponent";
  8. import { TextLineComponent } from "../../../lines/textLineComponent";
  9. import { LockObject } from "../lockObject";
  10. import { GlobalState } from '../../../../globalState';
  11. import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
  12. import { PopupComponent } from '../animations/popupComponent';
  13. import { AnimationCurveEditorComponent } from '../animations/animationCurveEditorComponent';
  14. import { AnimationGroup } from "babylonjs/Animations/animationGroup";
  15. interface ITargetedAnimationGridComponentProps {
  16. globalState: GlobalState;
  17. targetedAnimation: TargetedAnimation,
  18. scene: Scene,
  19. lockObject: LockObject,
  20. onSelectionChangedObservable?: Observable<any>,
  21. onPropertyChangedObservable?: Observable<PropertyChangedEvent>
  22. }
  23. export class TargetedAnimationGridComponent extends React.Component<ITargetedAnimationGridComponentProps> {
  24. private _isCurveEditorOpen: boolean;
  25. private _animationGroup: AnimationGroup | undefined;
  26. constructor(props: ITargetedAnimationGridComponentProps) {
  27. super(props);
  28. this._animationGroup = this.props.scene.animationGroups.find(ag => {
  29. let ta = ag.targetedAnimations.find(ta => ta === this.props.targetedAnimation);
  30. return ta !== undefined;
  31. });
  32. }
  33. onOpenAnimationCurveEditor() {
  34. this._isCurveEditorOpen = true;
  35. }
  36. onCloseAnimationCurveEditor(window: Window | null) {
  37. this._isCurveEditorOpen = false;
  38. if (window === null) {
  39. console.log("Window already closed");
  40. } else {
  41. window.close();
  42. }
  43. }
  44. playOrPause() {
  45. if (this._animationGroup){
  46.     if (this._animationGroup.isPlaying) {
  47. this._animationGroup.stop();
  48.     } else {
  49. this._animationGroup.start();
  50.     }
  51. this.forceUpdate();
  52. }
  53. }
  54. deleteAnimation() {
  55. if (this._animationGroup) {
  56. let index = this._animationGroup.targetedAnimations.indexOf(this.props.targetedAnimation);
  57. if (index > -1) {
  58. this._animationGroup.targetedAnimations.splice(index, 1);
  59. this.props.onSelectionChangedObservable?.notifyObservers(null);
  60. if (this._animationGroup.isPlaying) {
  61. this._animationGroup.stop();
  62. this._animationGroup.start();
  63. }
  64. }
  65. }
  66. }
  67. render() {
  68. const targetedAnimation = this.props.targetedAnimation;
  69. return (
  70. <div className="pane">
  71. <LineContainerComponent globalState={this.props.globalState} title="GENERAL">
  72. <TextLineComponent label="Class" value={targetedAnimation.getClassName()} />
  73. <TextInputLineComponent lockObject={this.props.lockObject} label="Name" target={targetedAnimation.animation} propertyName="name" onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
  74. {
  75. targetedAnimation.target.name &&
  76. <TextLineComponent label="Target" value={targetedAnimation.target.name} onLink={() => this.props.globalState.onSelectionChangedObservable.notifyObservers(targetedAnimation)}/>
  77. }
  78. <ButtonLineComponent label="Edit animation" onClick={() => this.onOpenAnimationCurveEditor()} />
  79. {
  80. this._isCurveEditorOpen && <PopupComponent
  81. id="curve-editor"
  82. title="Curve Animation Editor"
  83. size={{ width: 950, height: 540 }}
  84. onOpen={(window: Window) => { window.console.log("Window opened!!") }}
  85. onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
  86. <AnimationCurveEditorComponent
  87. title="Animations Curve Editor"
  88. scene={this.props.scene}
  89. entity={targetedAnimation as any}
  90. playOrPause={() => this.playOrPause()}
  91. close={(event) => this.onCloseAnimationCurveEditor(event.view)} />
  92. </PopupComponent>
  93. }
  94. <ButtonLineComponent label="Dispose" onClick={() => this.deleteAnimation()} />
  95. </LineContainerComponent>
  96. </div>
  97. );
  98. }
  99. }