first implementation of drag and drop

Viewer/src/configuration/configuration.ts

@@ -166,7 +166,7 @@ export interface IModelConfiguration {
     id?: string;
     url?: string;
     root?: string; //optional
-    file?: string; // is a file being loaded? root and url ignored
+    file?: string | File; // is a file being loaded? root and url ignored
     loader?: string; // obj, gltf?
     position?: { x: number, y: number, z: number };
     rotation?: { x: number, y: number, z: number, w?: number };

Viewer/src/viewer/defaultViewer.ts

@@ -3,7 +3,7 @@
 import { ViewerConfiguration, IModelConfiguration, ILightConfiguration } from './../configuration/configuration';
 import { Template, EventCallback } from './../templateManager';
 import { AbstractViewer } from './viewer';
-import { SpotLight, MirrorTexture, Plane, ShadowGenerator, Texture, BackgroundMaterial, Observable, ShadowLight, CubeTexture, BouncingBehavior, FramingBehavior, Behavior, Light, Engine, Scene, AutoRotationBehavior, AbstractMesh, Quaternion, StandardMaterial, ArcRotateCamera, ImageProcessingConfiguration, Color3, Vector3, SceneLoader, Mesh, HemisphericLight } from 'babylonjs';
+import { SpotLight, MirrorTexture, Plane, ShadowGenerator, Texture, BackgroundMaterial, Observable, ShadowLight, CubeTexture, BouncingBehavior, FramingBehavior, Behavior, Light, Engine, Scene, AutoRotationBehavior, AbstractMesh, Quaternion, StandardMaterial, ArcRotateCamera, ImageProcessingConfiguration, Color3, Vector3, SceneLoader, Mesh, HemisphericLight, FilesInput } from 'babylonjs';
 import { CameraBehavior } from '../interfaces';
 import { ViewerModel } from '../model/viewerModel';
 import { extendClassWithConfig } from '../helper';
@@ -43,12 +43,27 @@ export class DefaultViewer extends AbstractViewer {
         if (closeButton) {
             closeButton.addEventListener('pointerdown', () => {
                 this.hideOverlayScreen();
-            })
+            });
         }
 
+        let filesInput = new FilesInput(this.engine, this.sceneManager.scene, () => {
+        }, () => {
+        }, () => {
+        }, () => {
+        }, function () {
+        }, (file: File) => {
+            this.loadModel(file);
+        }, () => {
+        });
+        filesInput.monitorElementForDragNDrop(this.templateManager.getCanvas()!);
+
         return super._onTemplatesLoaded();
     }
 
+    private _dropped(evt: EventCallback) {
+
+    }
+
     private _initNavbar() {
         let navbar = this.templateManager.getTemplate('navBar');
         if (navbar) {
@@ -302,7 +317,7 @@ export class DefaultViewer extends AbstractViewer {
      * The scene will automatically be cleared of the old models, if exist.
      * @param model the configuration object (or URL) to load.
      */
-    public loadModel(model?: string | IModelConfiguration): Promise<ViewerModel> {
+    public loadModel(model?: string | File | IModelConfiguration): Promise<ViewerModel> {
         if (!model) {
             model = this.configuration.model;
         }

Viewer/src/viewer/viewer.ts

@@ -527,27 +527,37 @@ export abstract class AbstractViewer {
      * @param clearScene should the scene be cleared before loading this model
      * @returns a ViewerModel object that is not yet fully loaded.
      */
-    public initModel(modelConfig: string | IModelConfiguration, clearScene: boolean = true): ViewerModel {
-        let modelUrl = (typeof modelConfig === 'string') ? modelConfig : modelConfig.url;
-        if (!modelUrl) {
-            throw new Error("no model url provided");
-        }
-        if (clearScene) {
-            this.sceneManager.clearScene(true, false);
-        }
+    public initModel(modelConfig: string | File | IModelConfiguration, clearScene: boolean = true): ViewerModel {
+
         let configuration: IModelConfiguration;
         if (typeof modelConfig === 'string') {
             configuration = {
                 url: modelConfig
             }
+        } else if (modelConfig instanceof File) {
+            configuration = {
+                file: modelConfig,
+                root: "file:"
+            }
         } else {
             configuration = modelConfig
         }
 
+        if (!configuration.url && !configuration.file) {
+            throw new Error("no model provided");
+        }
+
+        if (clearScene) {
+            this.sceneManager.clearScene(true, false);
+        }
+
         //merge the configuration for future models:
         if (this._configuration.model && typeof this._configuration.model === 'object') {
             let globalConfig = deepmerge({}, this._configuration.model)
             configuration = deepmerge(globalConfig, configuration);
+            if (modelConfig instanceof File) {
+                configuration.file = modelConfig;
+            }
         } else {
             this._configuration.model = configuration;
         }
@@ -581,7 +591,7 @@ export abstract class AbstractViewer {
      * @param clearScene Should the scene be cleared before loading the model
      * @returns a Promise the fulfills when the model finished loading successfully. 
      */
-    public loadModel(modelConfig: string | IModelConfiguration, clearScene: boolean = true): Promise<ViewerModel> {
+    public loadModel(modelConfig: string | File | IModelConfiguration, clearScene: boolean = true): Promise<ViewerModel> {
         if (this._isLoading) {
             // We can decide here whether or not to cancel the lst load, but the developer can do that.
             return Promise.reject("another model is curently being loaded.");