Merge pull request #4329 from RaananW/drag-and-drop

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/configuration/types/default.ts

@@ -28,7 +28,10 @@ export let defaultConfiguration: ViewerConfiguration = {
             }
         },
         viewer: {
-            html: require("../../../assets/templates/default/defaultViewer.html")
+            html: require("../../../assets/templates/default/defaultViewer.html"),
+            params: {
+                enableDragAndDrop: false
+            }
         },
         navBar: {
             html: require("../../../assets/templates/default/navbar.html"),

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,32 @@ export class DefaultViewer extends AbstractViewer {
         if (closeButton) {
             closeButton.addEventListener('pointerdown', () => {
                 this.hideOverlayScreen();
-            })
+            });
+        }
+
+        if (this.configuration.templates && this.configuration.templates.viewer) {
+            if (this.configuration.templates.viewer.params && this.configuration.templates.viewer.params.enableDragAndDrop) {
+                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 +322,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.");

dist/preview release/what's new.md

@@ -31,6 +31,7 @@
 - Nav-Bar is now disaplayed on fullscreen per default ([RaananW](https://github.com/RaananW))
 - Viewer configuration supports deprecated values using the new configurationCompatibility processor  ([RaananW](https://github.com/RaananW))
 - Shadows will only render while models are entering the scene or animating ([RaananW](https://github.com/RaananW))
+- Support for model drag and drop onto the canvas ([RaananW](https://github.com/RaananW))
 
 ## Bug fixes