GLTFImportDialog.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import { UIRow, UIText, UICheckbox, UIButton } from './libs/ui.js';
  2. class GLTFImportDialog {
  3. constructor( strings ) {
  4. this.strings = strings;
  5. const dom = document.createElement( 'div' );
  6. dom.className = 'Dialog';
  7. this.dom = dom;
  8. const background = document.createElement( 'div' );
  9. background.className = 'Dialog-background';
  10. background.addEventListener( 'click', () => this.cancel() );
  11. dom.appendChild( background );
  12. const content = document.createElement( 'div' );
  13. content.className = 'Dialog-content';
  14. dom.appendChild( content );
  15. // Title
  16. const titleBar = document.createElement( 'div' );
  17. titleBar.className = 'Dialog-title';
  18. titleBar.textContent = strings.getKey( 'dialog/gltf/title' );
  19. content.appendChild( titleBar );
  20. // Body
  21. const body = document.createElement( 'div' );
  22. body.className = 'Dialog-body';
  23. content.appendChild( body );
  24. // As Scene Checkbox
  25. const asSceneRow = new UIRow();
  26. body.appendChild( asSceneRow.dom );
  27. this.asSceneCheckbox = new UICheckbox( false );
  28. asSceneRow.add( this.asSceneCheckbox );
  29. asSceneRow.add( new UIText( strings.getKey( 'dialog/gltf/asScene' ) ).setMarginLeft( '6px' ) );
  30. // Buttons
  31. const buttonsRow = document.createElement( 'div' );
  32. buttonsRow.className = 'Dialog-buttons';
  33. body.appendChild( buttonsRow );
  34. const okButton = new UIButton( strings.getKey( 'dialog/ok' ) );
  35. okButton.setWidth( '80px' );
  36. okButton.onClick( () => this.confirm() );
  37. buttonsRow.appendChild( okButton.dom );
  38. const cancelButton = new UIButton( strings.getKey( 'dialog/cancel' ) );
  39. cancelButton.setWidth( '80px' );
  40. cancelButton.setMarginLeft( '8px' );
  41. cancelButton.onClick( () => this.cancel() );
  42. buttonsRow.appendChild( cancelButton.dom );
  43. // Promise handlers
  44. this.resolve = null;
  45. this.reject = null;
  46. }
  47. show() {
  48. document.body.appendChild( this.dom );
  49. return new Promise( ( resolve, reject ) => {
  50. this.resolve = resolve;
  51. this.reject = reject;
  52. } );
  53. }
  54. confirm() {
  55. const result = {
  56. asScene: this.asSceneCheckbox.getValue()
  57. };
  58. this.dom.remove();
  59. if ( this.resolve ) {
  60. this.resolve( result );
  61. }
  62. }
  63. cancel() {
  64. this.dom.remove();
  65. if ( this.reject ) {
  66. this.reject( new Error( 'Import cancelled' ) );
  67. }
  68. }
  69. }
  70. export { GLTFImportDialog };
粤ICP备19079148号