Babylon.js/src/Tools/babylon.filesInput.ts

module BABYLON {
    /**
     * Class used to help managing file picking and drag'n'drop
     */
    export class FilesInput {
        /**
         * List of files ready to be loaded
         */
        public static FilesToLoad: { [key: string]: File } = {};

        /**
         * Callback called when a file is processed
         */
        public onProcessFileCallback: (file: File, name: string, extension: string) => true = () => { return true; };

        private _engine: Engine;
        private _currentScene: Scene;
        private _sceneLoadedCallback: (sceneFile: File, scene: Scene) => void;
        private _progressCallback: (progress: SceneLoaderProgressEvent) => void;
        private _additionalRenderLoopLogicCallback: () => void;
        private _textureLoadingCallback: (remaining: number) => void;
        private _startingProcessingFilesCallback: (files?: File[]) => void;
        private _onReloadCallback: (sceneFile: File) => void;
        private _errorCallback: (sceneFile: File, scene: Scene, message: string) => void;
        private _elementToMonitor: HTMLElement;

        private _sceneFileToLoad: File;
        private _filesToLoad: File[];

        /**
         * Creates a new FilesInput
         * @param engine defines the rendering engine
         * @param scene defines the hosting scene
         * @param sceneLoadedCallback callback called when scene is loaded
         * @param progressCallback callback called to track progress
         * @param additionalRenderLoopLogicCallback callback called to add user logic to the rendering loop
         * @param textureLoadingCallback callback called when a texture is loading
         * @param startingProcessingFilesCallback callback called when the system is about to process all files
         * @param onReloadCallback callback called when a reload is requested
         * @param errorCallback callback call if an error occurs
         */
        constructor(engine: Engine, scene: Scene, sceneLoadedCallback: (sceneFile: File, scene: Scene) => void, progressCallback: (progress: SceneLoaderProgressEvent) => void, additionalRenderLoopLogicCallback: () => void,
            textureLoadingCallback: (remaining: number) => void, startingProcessingFilesCallback: (files?: File[]) => void, onReloadCallback: (sceneFile: File) => void, errorCallback: (sceneFile: File, scene: Scene, message: string) => void) {
            this._engine = engine;
            this._currentScene = scene;

            this._sceneLoadedCallback = sceneLoadedCallback;
            this._progressCallback = progressCallback;
            this._additionalRenderLoopLogicCallback = additionalRenderLoopLogicCallback;
            this._textureLoadingCallback = textureLoadingCallback;
            this._startingProcessingFilesCallback = startingProcessingFilesCallback;
            this._onReloadCallback = onReloadCallback;
            this._errorCallback = errorCallback;
        }

        private _dragEnterHandler: (e: any) => void;
        private _dragOverHandler: (e: any) => void;
        private _dropHandler: (e: any) => void;

        /**
         * Calls this function to listen to drag'n'drop events on a specific DOM element
         * @param elementToMonitor defines the DOM element to track
         */
        public monitorElementForDragNDrop(elementToMonitor: HTMLElement): void {
            if (elementToMonitor) {
                this._elementToMonitor = elementToMonitor;

                this._dragEnterHandler = (e) => { this.drag(e); };
                this._dragOverHandler = (e) => { this.drag(e); };
                this._dropHandler = (e) => { this.drop(e); };

                this._elementToMonitor.addEventListener("dragenter", this._dragEnterHandler, false);
                this._elementToMonitor.addEventListener("dragover", this._dragOverHandler, false);
                this._elementToMonitor.addEventListener("drop", this._dropHandler, false);
            }
        }

        /**
         * Release all associated resources
         */
        public dispose() {
            if (!this._elementToMonitor) {
                return;
            }

            this._elementToMonitor.removeEventListener("dragenter", this._dragEnterHandler);
            this._elementToMonitor.removeEventListener("dragover", this._dragOverHandler);
            this._elementToMonitor.removeEventListener("drop", this._dropHandler);
        }

        private renderFunction(): void {
            if (this._additionalRenderLoopLogicCallback) {
                this._additionalRenderLoopLogicCallback();
            }

            if (this._currentScene) {
                if (this._textureLoadingCallback) {
                    var remaining = this._currentScene.getWaitingItemsCount();

                    if (remaining > 0) {
                        this._textureLoadingCallback(remaining);
                    }
                }
                this._currentScene.render();
            }
        }

        private drag(e: DragEvent): void {
            e.stopPropagation();
            e.preventDefault();
        }

        private drop(eventDrop: DragEvent): void {
            eventDrop.stopPropagation();
            eventDrop.preventDefault();

            this.loadFiles(eventDrop);
        }

        private _traverseFolder(folder: any, files: Array<any>, remaining: { count: number }, callback: () => void) {
            var reader = folder.createReader();
            var relativePath = folder.fullPath.replace(/^\//, "").replace(/(.+?)\/?$/, "$1/");
            reader.readEntries((entries: any) => {
                remaining.count += entries.length;
                for (let entry of entries) {
                    if (entry.isFile) {
                        entry.file((file: any) => {
                            file.correctName = relativePath + file.name;
                            files.push(file);

                            if (--remaining.count === 0) {
                                callback();
                            }
                        });
                    }
                    else if (entry.isDirectory) {
                        this._traverseFolder(entry, files, remaining, callback);
                    }
                }

                if (--remaining.count) {
                    callback();
                }
            });
        }

        private _processFiles(files: Array<any>): void {
            for (var i = 0; i < files.length; i++) {
                var name = files[i].correctName.toLowerCase();
                var extension = name.split('.').pop();

                if (!this.onProcessFileCallback(files[i], name, extension)) {
                    continue;
                }

                if ((extension === "babylon" || extension === "stl" || extension === "obj" || extension === "gltf" || extension === "glb")
                    && name.indexOf(".binary.babylon") === -1 && name.indexOf(".incremental.babylon") === -1) {
                    this._sceneFileToLoad = files[i];
                }

                FilesInput.FilesToLoad[name] = files[i];
            }
        }

        /**
         * Load files from a drop event
         * @param event defines the drop event to use as source
         */
        public loadFiles(event: any): void {
            // Handling data transfer via drag'n'drop
            if (event && event.dataTransfer && event.dataTransfer.files) {
                this._filesToLoad = event.dataTransfer.files;
            }

            // Handling files from input files
            if (event && event.target && event.target.files) {
                this._filesToLoad = event.target.files;
            }

            if (!this._filesToLoad || this._filesToLoad.length === 0) {
                return;
            }

            if (this._startingProcessingFilesCallback) {
                this._startingProcessingFilesCallback(this._filesToLoad);
            }

            if (this._filesToLoad && this._filesToLoad.length > 0) {
                let files = new Array<File>();
                let folders = [];
                var items = event.dataTransfer ? event.dataTransfer.items : null;

                for (var i = 0; i < this._filesToLoad.length; i++) {
                    let fileToLoad: any = this._filesToLoad[i];
                    let name = fileToLoad.name.toLowerCase();
                    let entry;

                    fileToLoad.correctName = name;

                    if (items) {
                        let item = items[i];
                        if (item.getAsEntry) {
                            entry = item.getAsEntry();
                        } else if (item.webkitGetAsEntry) {
                            entry = item.webkitGetAsEntry();
                        }
                    }

                    if (!entry) {
                        files.push(fileToLoad);
                    } else {
                        if (entry.isDirectory) {
                            folders.push(entry);
                        } else {
                            files.push(fileToLoad);
                        }
                    }
                }

                if (folders.length === 0) {
                    this._processFiles(files);
                    this._processReload();
                } else {
                    var remaining = { count: folders.length };
                    for (var folder of folders) {
                        this._traverseFolder(folder, files, remaining, () => {
                            this._processFiles(files);

                            if (remaining.count === 0) {
                                this._processReload();
                            }
                        });
                    }
                }

            }
        }

        private _processReload() {
            if (this._onReloadCallback) {
                this._onReloadCallback(this._sceneFileToLoad);
            }
            else {
                this.reload();
            }
        }

        /**
         * Reload the current scene from the loaded files
         */
        public reload() {
            // If a scene file has been provided
            if (this._sceneFileToLoad) {
                if (this._currentScene) {
                    if (Tools.errorsCount > 0) {
                        Tools.ClearLogCache();
                    }
                    this._engine.stopRenderLoop();
                }

                SceneLoader.LoadAsync("file:", this._sceneFileToLoad, this._engine, (progress) => {
                    if (this._progressCallback) {
                        this._progressCallback(progress);
                    }
                }).then((scene) => {
                    if (this._currentScene) {
                        this._currentScene.dispose();
                    }

                    this._currentScene = scene;

                    if (this._sceneLoadedCallback) {
                        this._sceneLoadedCallback(this._sceneFileToLoad, this._currentScene);
                    }

                    // Wait for textures and shaders to be ready
                    this._currentScene.executeWhenReady(() => {
                        this._engine.runRenderLoop(() => {
                            this.renderFunction();
                        });
                    });
                }).catch((error) => {
                    if (this._errorCallback) {
                        this._errorCallback(this._sceneFileToLoad, this._currentScene, error.message);
                    }
                });
            }
            else {
                Tools.Error("Please provide a valid .babylon file.");
            }
        }
    }
}