imagePropertyGridComponent.tsx 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import * as React from "react";
  2. import { Observable } from "babylonjs/Misc/observable";
  3. import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
  4. import { CommonControlPropertyGridComponent } from "./commonControlPropertyGridComponent";
  5. import { LineContainerComponent } from "../../../lineContainerComponent";
  6. import { LockObject } from "../../../../../sharedUiComponents/tabs/propertyGrids/lockObject";
  7. import { Image } from "babylonjs-gui/2D/controls/image";
  8. import { FloatLineComponent } from "../../../../../sharedUiComponents/lines/floatLineComponent";
  9. import { CheckBoxLineComponent } from "../../../../../sharedUiComponents/lines/checkBoxLineComponent";
  10. import { OptionsLineComponent } from "../../../../../sharedUiComponents/lines/optionsLineComponent";
  11. import { GlobalState } from '../../../../globalState';
  12. interface IImagePropertyGridComponentProps {
  13. globalState: GlobalState;
  14. image: Image,
  15. lockObject: LockObject,
  16. onPropertyChangedObservable?: Observable<PropertyChangedEvent>
  17. }
  18. export class ImagePropertyGridComponent extends React.Component<IImagePropertyGridComponentProps> {
  19. constructor(props: IImagePropertyGridComponentProps) {
  20. super(props);
  21. }
  22. render() {
  23. const image = this.props.image;
  24. var stretchOptions = [
  25. { label: "None", value: Image.STRETCH_NONE },
  26. { label: "Fill", value: Image.STRETCH_FILL },
  27. { label: "Uniform", value: Image.STRETCH_UNIFORM },
  28. { label: "Extend", value: Image.STRETCH_EXTEND },
  29. { label: "NinePatch", value: Image.STRETCH_NINE_PATCH }
  30. ];
  31. return (
  32. <div className="pane">
  33. <CommonControlPropertyGridComponent globalState={this.props.globalState} lockObject={this.props.lockObject} control={image} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  34. <LineContainerComponent globalState={this.props.globalState} title="IMAGE">
  35. <FloatLineComponent lockObject={this.props.lockObject} label="Source left" target={image} propertyName="sourceLeft" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  36. <FloatLineComponent lockObject={this.props.lockObject} label="Source top" target={image} propertyName="sourceTop" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  37. <FloatLineComponent lockObject={this.props.lockObject} label="Source width" target={image} propertyName="sourceWidth" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  38. <FloatLineComponent lockObject={this.props.lockObject} label="Source height" target={image} propertyName="sourceHeight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  39. <CheckBoxLineComponent label="Autoscale" target={image} propertyName="autoScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  40. <OptionsLineComponent label="Stretch" options={stretchOptions} target={image} propertyName="stretch" onPropertyChangedObservable={this.props.onPropertyChangedObservable} onSelect={value => this.setState({ mode: value })} />
  41. </LineContainerComponent>
  42. <LineContainerComponent globalState={this.props.globalState} title="ANIMATION SHEET">
  43. <FloatLineComponent lockObject={this.props.lockObject} label="Cell Id" isInteger={true} target={image} propertyName="cellId" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  44. <FloatLineComponent lockObject={this.props.lockObject} label="Cell width" target={image} propertyName="cellWidth" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  45. <FloatLineComponent lockObject={this.props.lockObject} label="Cell height" target={image} propertyName="cellHeight" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  46. </LineContainerComponent>
  47. </div>
  48. );
  49. }
  50. }