123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- import * as React from "react";
- import { Observable } from "babylonjs/Misc/observable";
- import { TargetedAnimation } from "babylonjs/Animations/animationGroup";
- import { Scene } from "babylonjs/scene";
- import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
- import { ButtonLineComponent } from "../../../lines/buttonLineComponent";
- import { LineContainerComponent } from "../../../lineContainerComponent";
- import { TextLineComponent } from "../../../lines/textLineComponent";
- import { LockObject } from "../lockObject";
- import { GlobalState } from '../../../../globalState';
- import { TextInputLineComponent } from '../../../lines/textInputLineComponent';
- import { PopupComponent } from '../animations/popupComponent';
- import { AnimationCurveEditorComponent } from '../animations/animationCurveEditorComponent';
- import { AnimationGroup } from "babylonjs/Animations/animationGroup";
- interface ITargetedAnimationGridComponentProps {
- globalState: GlobalState;
- targetedAnimation: TargetedAnimation,
- scene: Scene,
- lockObject: LockObject,
- onSelectionChangedObservable?: Observable<any>,
- onPropertyChangedObservable?: Observable<PropertyChangedEvent>
- }
- export class TargetedAnimationGridComponent extends React.Component<ITargetedAnimationGridComponentProps> {
- private _isCurveEditorOpen: boolean;
- private _animationGroup: AnimationGroup | undefined;
- constructor(props: ITargetedAnimationGridComponentProps) {
- super(props);
- this._animationGroup = this.props.scene.animationGroups.find(ag => {
- let ta = ag.targetedAnimations.find(ta => ta === this.props.targetedAnimation);
- return ta !== undefined;
- });
- }
- onOpenAnimationCurveEditor() {
- this._isCurveEditorOpen = true;
- }
- onCloseAnimationCurveEditor(window: Window | null) {
- this._isCurveEditorOpen = false;
- if (window === null) {
- console.log("Window already closed");
- } else {
- window.close();
- }
- }
- playOrPause() {
- if (this._animationGroup){
- if (this._animationGroup.isPlaying) {
- this._animationGroup.stop();
- } else {
- this._animationGroup.start();
- }
- this.forceUpdate();
- }
- }
- deleteAnimation() {
- if (this._animationGroup) {
- let index = this._animationGroup.targetedAnimations.indexOf(this.props.targetedAnimation);
- if (index > -1) {
- this._animationGroup.targetedAnimations.splice(index, 1);
- this.props.onSelectionChangedObservable?.notifyObservers(null);
- if (this._animationGroup.isPlaying) {
- this._animationGroup.stop();
- this._animationGroup.start();
- }
- }
- }
- }
- render() {
- const targetedAnimation = this.props.targetedAnimation;
- return (
- <div className="pane">
- <LineContainerComponent globalState={this.props.globalState} title="GENERAL">
- <TextLineComponent label="Class" value={targetedAnimation.getClassName()} />
- <TextInputLineComponent lockObject={this.props.lockObject} label="Name" target={targetedAnimation.animation} propertyName="name" onPropertyChangedObservable={this.props.onPropertyChangedObservable}/>
- {
- targetedAnimation.target.name &&
- <TextLineComponent label="Target" value={targetedAnimation.target.name} onLink={() => this.props.globalState.onSelectionChangedObservable.notifyObservers(targetedAnimation)}/>
- }
- <ButtonLineComponent label="Edit animation" onClick={() => this.onOpenAnimationCurveEditor()} />
- {
- this._isCurveEditorOpen && <PopupComponent
- id="curve-editor"
- title="Curve Animation Editor"
- size={{ width: 950, height: 540 }}
- onOpen={(window: Window) => { window.console.log("Window opened!!") }}
- onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
- <AnimationCurveEditorComponent
- title="Animations Curve Editor"
- scene={this.props.scene}
- entity={targetedAnimation as any}
- playOrPause={() => this.playOrPause()}
- close={(event) => this.onCloseAnimationCurveEditor(event.view)} />
- </PopupComponent>
- }
- <ButtonLineComponent label="Dispose" onClick={() => this.deleteAnimation()} />
- </LineContainerComponent>
- </div>
- );
- }
- }
|