babylon.filesInput.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. module BABYLON {
  2. export class FilesInput {
  3. public static FilesToLoad: File[] = new Array<File>();
  4. public onProcessFileCallback: (file: File, name: string, extension: string) => true = () => { return true; };
  5. private _engine: Engine;
  6. private _currentScene: Scene;
  7. private _sceneLoadedCallback: (sceneFile: File, scene: Scene) => void;
  8. private _progressCallback: (progress: ProgressEvent) => void;
  9. private _additionalRenderLoopLogicCallback: () => void;
  10. private _textureLoadingCallback: (remaining: number) => void;
  11. private _startingProcessingFilesCallback: () => void;
  12. private _onReloadCallback: (sceneFile: File) => void;
  13. private _errorCallback: (sceneFile: File, scene: Scene, message: string) => void;
  14. private _elementToMonitor: HTMLElement;
  15. private _sceneFileToLoad: File;
  16. private _filesToLoad: File[];
  17. constructor(engine: Engine, scene: Scene, sceneLoadedCallback: (sceneFile: File, scene: Scene) => void, progressCallback: (progress: ProgressEvent) => void, additionalRenderLoopLogicCallback: () => void,
  18. textureLoadingCallback: (remaining: number) => void, startingProcessingFilesCallback: () => void, onReloadCallback: (sceneFile: File) => void, errorCallback: (sceneFile: File, scene: Scene, message: string) => void) {
  19. this._engine = engine;
  20. this._currentScene = scene;
  21. this._sceneLoadedCallback = sceneLoadedCallback;
  22. this._progressCallback = progressCallback;
  23. this._additionalRenderLoopLogicCallback = additionalRenderLoopLogicCallback;
  24. this._textureLoadingCallback = textureLoadingCallback;
  25. this._startingProcessingFilesCallback = startingProcessingFilesCallback;
  26. this._onReloadCallback = onReloadCallback;
  27. this._errorCallback = errorCallback;
  28. }
  29. private _dragEnterHandler: (any) => void;
  30. private _dragOverHandler: (any) => void;
  31. private _dropHandler: (any) => void;
  32. public monitorElementForDragNDrop(elementToMonitor: HTMLElement): void {
  33. if (elementToMonitor) {
  34. this._elementToMonitor = elementToMonitor;
  35. this._dragEnterHandler = (e) => { this.drag(e); };
  36. this._dragOverHandler = (e) => { this.drag(e); };
  37. this._dropHandler = (e) => { this.drop(e); };
  38. this._elementToMonitor.addEventListener("dragenter", this._dragEnterHandler, false);
  39. this._elementToMonitor.addEventListener("dragover", this._dragOverHandler, false);
  40. this._elementToMonitor.addEventListener("drop", this._dropHandler, false);
  41. }
  42. }
  43. public dispose() {
  44. if (!this._elementToMonitor) {
  45. return;
  46. }
  47. this._elementToMonitor.removeEventListener("dragenter", this._dragEnterHandler);
  48. this._elementToMonitor.removeEventListener("dragover", this._dragOverHandler);
  49. this._elementToMonitor.removeEventListener("drop", this._dropHandler);
  50. }
  51. private renderFunction(): void {
  52. if (this._additionalRenderLoopLogicCallback) {
  53. this._additionalRenderLoopLogicCallback();
  54. }
  55. if (this._currentScene) {
  56. if (this._textureLoadingCallback) {
  57. var remaining = this._currentScene.getWaitingItemsCount();
  58. if (remaining > 0) {
  59. this._textureLoadingCallback(remaining);
  60. }
  61. }
  62. this._currentScene.render();
  63. }
  64. }
  65. private drag(e: DragEvent): void {
  66. e.stopPropagation();
  67. e.preventDefault();
  68. }
  69. private drop(eventDrop: DragEvent): void {
  70. eventDrop.stopPropagation();
  71. eventDrop.preventDefault();
  72. this.loadFiles(eventDrop);
  73. }
  74. private _handleFolderDrop(entry: any, files: Array<any>, callback: () => void): void {
  75. var reader = entry.createReader(),
  76. relativePath = entry.fullPath.replace(/^\//, "").replace(/(.+?)\/?$/, "$1/");
  77. reader.readEntries((fileEntries) => {
  78. var remaining = fileEntries.length;
  79. for (let fileEntry of fileEntries) {
  80. if (fileEntry.isFile) { // We only support one level
  81. fileEntry.file(function(file) {
  82. file.correctName = relativePath + file.name;
  83. files.push(file);
  84. remaining--;
  85. if (remaining === 0) {
  86. callback();
  87. }
  88. });
  89. } else {
  90. remaining--;
  91. if (remaining === 0) {
  92. callback();
  93. }
  94. }
  95. }
  96. });
  97. }
  98. private _processFiles(files: Array<any>): void {
  99. var skippedFiles = 0;
  100. for (var i = 0; i < files.length; i++) {
  101. var name = files[i].correctName.toLowerCase();
  102. var extension = name.split('.').pop();
  103. if (!this.onProcessFileCallback(files[i], name, extension)) {
  104. skippedFiles++;
  105. continue;
  106. }
  107. if ((extension === "babylon" || extension === "stl" || extension === "obj" || extension === "gltf" || extension === "glb")
  108. && name.indexOf(".binary.babylon") === -1 && name.indexOf(".incremental.babylon") === -1) {
  109. this._sceneFileToLoad = files[i];
  110. }
  111. else {
  112. FilesInput.FilesToLoad[name] = files[i];
  113. }
  114. }
  115. if (this._onReloadCallback) {
  116. this._onReloadCallback(this._sceneFileToLoad);
  117. }
  118. else if (skippedFiles < files.length) {
  119. this.reload();
  120. }
  121. }
  122. public loadFiles(event): void {
  123. if (this._startingProcessingFilesCallback) this._startingProcessingFilesCallback();
  124. // Handling data transfer via drag'n'drop
  125. if (event && event.dataTransfer && event.dataTransfer.files) {
  126. this._filesToLoad = event.dataTransfer.files;
  127. }
  128. // Handling files from input files
  129. if (event && event.target && event.target.files) {
  130. this._filesToLoad = event.target.files;
  131. }
  132. if (this._filesToLoad && this._filesToLoad.length > 0) {
  133. let files = [];
  134. let folders = [];
  135. var items = event.dataTransfer ? event.dataTransfer.items : null;
  136. for (var i = 0; i < this._filesToLoad.length; i++) {
  137. let fileToLoad:any = this._filesToLoad[i];
  138. let name = fileToLoad.name.toLowerCase();
  139. let type = fileToLoad.type;
  140. let entry;
  141. fileToLoad.correctName = name;
  142. if (items) {
  143. let item = items[i];
  144. if (item.getAsEntry) {
  145. entry = item.getAsEntry();
  146. } else if (item.webkitGetAsEntry) {
  147. entry = item.webkitGetAsEntry();
  148. }
  149. }
  150. if (!entry) {
  151. files.push(fileToLoad);
  152. } else {
  153. if (entry.isDirectory) {
  154. folders.push(entry);
  155. } else {
  156. files.push(fileToLoad);
  157. }
  158. }
  159. }
  160. if (folders.length === 0) {
  161. this._processFiles(files);
  162. } else {
  163. var remaining = folders.length;
  164. // Extract folder content
  165. for (var folder of folders) {
  166. this._handleFolderDrop(folder, files, () => {
  167. remaining--;
  168. if (remaining === 0) {
  169. this._processFiles(files);
  170. }
  171. });
  172. }
  173. }
  174. }
  175. }
  176. public reload() {
  177. // If a ".babylon" file has been provided
  178. if (this._sceneFileToLoad) {
  179. if (this._currentScene) {
  180. if (Tools.errorsCount > 0) {
  181. Tools.ClearLogCache();
  182. Tools.Log("Babylon.js engine (v" + Engine.Version + ") launched");
  183. }
  184. this._engine.stopRenderLoop();
  185. this._currentScene.dispose();
  186. }
  187. SceneLoader.Load("file:", this._sceneFileToLoad, this._engine, (newScene) => {
  188. this._currentScene = newScene;
  189. if (this._sceneLoadedCallback) {
  190. this._sceneLoadedCallback(this._sceneFileToLoad, this._currentScene);
  191. }
  192. // Wait for textures and shaders to be ready
  193. this._currentScene.executeWhenReady(() => {
  194. this._engine.runRenderLoop(() => {
  195. this.renderFunction();
  196. });
  197. });
  198. }, progress => {
  199. if (this._progressCallback) {
  200. this._progressCallback(progress);
  201. }
  202. }, (scene, message) => {
  203. this._currentScene = scene;
  204. if (this._errorCallback) {
  205. this._errorCallback(this._sceneFileToLoad, this._currentScene, message);
  206. }
  207. });
  208. }
  209. else {
  210. Tools.Error("Please provide a valid .babylon file.");
  211. }
  212. }
  213. }
  214. }