Now drag'n'drop assets

BabylonJS · Aug 16, 2018 · b059da7 · b059da7
1 parent 4cfcb83
commit b059da7
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 4 deletions.
diff --git a/preview.html b/preview.html
@@ -37,7 +37,7 @@
         var effectiveScene = null;
         var gotScene = null;
 
-        var capturer = new CCapture({ format: 'webm', framerate: 60, verbose: true });
+        var capturer = new CCapture({ format: 'webm', framerate: 60 });
 
         var tools = null;
         var requests = null;

diff --git a/src/editor/components/assets.ts b/src/editor/components/assets.ts
@@ -148,6 +148,18 @@ export default class EditorAssets {
                     this.editor.core.onSelectAsset.notifyObservers(a.data);
                 });
 
+                // Drag'n'drop
+                if (c.onDragAndDropAsset) {
+                    const dropListener = this.dragEnd(c, a);
+                    img.addEventListener('dragstart', () => {
+                        this.editor.core.engine.getRenderingCanvas().addEventListener('drop', dropListener);
+                    });
+
+                    img.addEventListener('dragend', () => {
+                        this.editor.core.engine.getRenderingCanvas().removeEventListener('drop', dropListener);
+                    });
+                }
+
                 // Add
                 parent.appendChild(img);
                 parent.appendChild(text);
@@ -199,6 +211,24 @@ export default class EditorAssets {
         this.tabs.select(id);
     }
 
+    /**
+     * Returns the drag end event function
+     * @param component the source component
+     * @param asset the dropped asset
+     */
+    protected dragEnd (component: IAssetComponent, asset: AssetElement<any>): (ev: DragEvent) => void {
+        return (ev: DragEvent) => {
+            const scene = this.editor.core.scene;
+            const pick = scene.pick(ev.offsetX, ev.offsetY);
+
+            if (!pick.pickedMesh)
+                return;
+
+            component.onDragAndDropAsset(pick.pickedMesh, asset);
+            this.editor.core.onSelectObject.notifyObservers(pick.pickedMesh);
+        };
+    }
+
     /**
      * Processes the context menu for the clicked item
      * @param ev the mouse event object

diff --git a/src/extensions/behavior/code.ts b/src/extensions/behavior/code.ts
@@ -1,4 +1,9 @@
-import { Scene, Node, DirectionalLight, HemisphericLight, Tools as BabylonTools, IParticleSystem, Vector4, Vector3, Vector2, Color4, Color3, Tools, GroundMesh } from 'babylonjs';
+import {
+    Scene, Node, DirectionalLight, HemisphericLight,
+    Tools as BabylonTools, IParticleSystem, Vector4,
+    Vector3, Vector2, Color4, Color3, Tools, GroundMesh,
+    AbstractMesh
+} from 'babylonjs';
 
 import Tokenizer, { TokenType } from '../tools/tokenizer';
 import { exportScriptString } from '../tools/tools';
@@ -80,6 +85,28 @@ export default class CodeExtension extends Extension<BehaviorMetadata> implement
         return result;
     }
 
+    /**
+     * On the user drops an asset
+     * @param targetMesh the target mesh under the pointer
+     * @param asset the asset being dropped
+     */
+    public onDragAndDropAsset (targetMesh: AbstractMesh, asset: AssetElement<any>): void {
+        targetMesh.metadata = targetMesh.metadata || { };
+
+        if (!targetMesh.metadata.behavior) {
+            targetMesh.metadata.behavior = {
+                node: targetMesh.name,
+                metadatas: []
+            };
+        }
+
+        // Add asset
+        targetMesh.metadata.behavior.metadatas.push({
+            codeId: asset.data.id,
+            active: true
+        });
+    }
+
     /**
      * On the user wants to remove the asset
      * @param asset the asset to remove

diff --git a/src/extensions/behavior/graph.ts b/src/extensions/behavior/graph.ts
@@ -114,6 +114,28 @@ export default class GraphExtension extends Extension<BehaviorGraphMetadata> {
         this.scene.metadata.behaviorGraphs.push(asset.data);
     }
 
+    /**
+     * On the user drops an asset
+     * @param targetMesh the target mesh under the pointer
+     * @param asset the asset being dropped
+     */
+    public onDragAndDropAsset (targetMesh: AbstractMesh, asset: AssetElement<any>): void {
+        targetMesh.metadata = targetMesh.metadata || { };
+
+        if (!targetMesh.metadata.behaviorGraph) {
+            targetMesh.metadata.behaviorGraph = {
+                node: targetMesh.name,
+                metadatas: []
+            };
+        }
+
+        // Add asset
+        targetMesh.metadata.behaviorGraph.metadatas.push({
+            graphId: asset.data.id,
+            active: true
+        });
+    }
+
     /**
      * On apply the extension
      */

diff --git a/src/extensions/typings/asset.ts b/src/extensions/typings/asset.ts
@@ -1,3 +1,5 @@
+import { AbstractMesh } from 'babylonjs';
+
 export interface AssetElement<T> {
     img?: string;
     name?: string;
@@ -10,4 +12,5 @@ export interface IAssetComponent {
     onGetAssets?<T> (): AssetElement<T>[] | Promise<AssetElement<T>[]>;
     onRemoveAsset?<T> (asset: AssetElement<T>): void;
     onAddAsset?<T> (asset: AssetElement<T>): void;
+    onDragAndDropAsset?<T> (targetMesh: AbstractMesh, asset: AssetElement<T>): void;
 }
diff --git a/src/tools/materials/viewer.ts b/src/tools/materials/viewer.ts
@@ -245,8 +245,7 @@ export default class AnimationEditor extends EditorPlugin {
         });
 
         // Drag'n'drop
-        let dropListener = this.dragEnd(material);
-
+        const dropListener = this.dragEnd(material);
         img.addEventListener('dragstart', () => {
             this.editor.core.engine.getRenderingCanvas().addEventListener('drop', dropListener);
         });