drag and drop example

Author: nakosung

Examples/Content/Scripts/helloJS.js

@@ -5,6 +5,8 @@
     const _ = require('lodash')
     const uclass = require('uclass')().bind(this,global)
 
+    let game_mode, ui_mode
+    
     function tutorial_WebSocket() {
         // borrowed from https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String
         function ab2str(buf) {
@@ -56,6 +58,7 @@
     }
 
     function tutorial_StaticMeshActor() {
+        game_mode()
         console.log('creating a static mesh actor')
         class MySMA extends StaticMeshActor {
             ctor() {
@@ -68,13 +71,15 @@
         }
         let actor = new (uclass(MySMA))(GWorld,{Z:100})
         return _ => {
+            ui_mode()
             actor.DestroyActor()
         }
     }
 
     let tutorials = {
         'Static mesh actor' : tutorial_StaticMeshActor,
-        'Web socket' : tutorial_WebSocket
+        'Web socket' : tutorial_WebSocket,
+        'Draggable' : tutorial_Draggable
     }
 
     function Logger() {
@@ -102,29 +107,84 @@
             window : LogWindow
         }
     }
+    
+    function tutorial_Draggable(root) {
+        class MyDraggable extends JavascriptWidget {
+            AddChild(x) {
+                this.SetRootWidget(x)
+                return {}
+            }
+            RemoveChild(x) {
+                this.SetRootWidget(null)
+            }
+            OnDragOver(geom,event,op) {
+                let abs = KismetInputLibrary.GetScreenSpacePosition(event)
+                let local = SlateBlueprintLibrary.AbsoluteToLocal(geom,abs)
+                return WidgetBlueprintLibrary.Handled() 
+            }
+            OnDragDetected() {
+                return {
+                    $: WidgetBlueprintLibrary.Handled(),
+                    Operation: WidgetBlueprintLibrary.CreateDragDropOperation(null)   
+                } 
+            }
+            OnMouseButtonDown(geom,event) {
+                return WidgetBlueprintLibrary.DetectDragIfPressed(event,this,{KeyName:'LeftMouseButton'})
+            }
+        }
+        class MyDropTarget extends JavascriptWidget {
+            AddChild(x) {
+                this.SetRootWidget(x)
+                return {}
+            }
+            RemoveChild(x) {
+                this.SetRootWidget(null)
+            }
+            OnDrop(x) {
+                console.log('dropped',x)
+            }
+        }
+        let MyDraggable_C = uclass(MyDraggable)
+        let MyDropTarget_C = uclass(MyDropTarget)
+        let widget = root.add_child(
+            UMG.div({},
+                UMG(MyDraggable_C,{},
+                    UMG(Border,{BrushColor:{A:0.5}},"X")
+                ),
+                UMG(MyDropTarget_C,{},
+                    UMG(Border,{BrushColor:{R:1,A:0.5}},"Drop target")
+                )
+            )            
+        )
+        return _ => {
+            root.remove_child(widget)
+        }
+    }
 
     function app() {
         let logger = Logger()
 
-        let cur
+        let cur, root
         return UMG.div({$link:elem => {
                 elem.bye = _ => {
                     console.log('done')
                     cur && cur()
                     logger.destroy()
                 }
+                cur = tutorial_Draggable(root)
             }},
             _.map(tutorials,(v,k) =>
                 UMG(Button,{OnClicked:_ => {
                     cur && cur()
-                    cur = v()
+                    cur = v(root)
                 }},UMG.text({},k)
             )),
+            UMG.div({$link:elem => root = elem}),
             UMG(Border,{
                 'Slot.Size.Rule':'Fill',
                 'Slot.VerticalAlignment':'VAlign_Bottom',
                 'BrushColor':{A:0.5}
-                },
+                },                
                 logger.window()
             )
         )
@@ -145,7 +205,19 @@
 
         widget.SetRootWidget(page)
         widget.AddToViewport()
-
+        
+        ui_mode = _ => {
+            PlayerController.C(PC).bShowMouseCursor = true
+            PlayerController.C(PC).SetInputMode_UIOnly(widget,false)                
+        }
+        
+        game_mode = _ => {
+            PlayerController.C(PC).bShowMouseCursor = true
+            PlayerController.C(PC).SetInputMode_GameAndUI(widget,false,false)                
+        }
+        
+        ui_mode()        
+        
         return function () {
             page.bye()
             widget.RemoveFromViewport()