Minor additions to DnD

tudo-aqua · Dec 4, 2024 · cd290f8 · cd290f8
1 parent b476bc5
commit cd290f8
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 5 deletions.
diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/ReactDND.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/ReactDND.kt
@@ -78,6 +78,13 @@ external fun useDraggable(options: DraggableOptions): DraggableResult
 @JsName("useDroppable")
 external fun useDroppable(options: DroppableOptions): DroppableResult
 
+@JsName("DragOverlay")
+external val DragOverlay: ComponentClass<DragOverlayProps>
+
+external interface DragOverlayProps : PropsWithChildren, PropsWithClassName, PropsWithStyle {
+    var dropAnimation: Boolean
+}
+
 external interface DraggableOptions {
     var id: String
     var disabled: Boolean

diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/App.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/App.kt
@@ -11,8 +11,10 @@ import kotlinx.browser.document
 import kotlinx.browser.window
 import org.w3c.dom.DOMRect
 import react.*
+import react.dom.createPortal
 import react.dom.events.KeyboardEvent
 import react.dom.html.HTMLAttributes
+import react.dom.html.ReactHTML.div
 import tools.aqua.bgw.*
 import tools.aqua.bgw.builder.ReactConverters.toDragEndedEventData
 import tools.aqua.bgw.builder.ReactConverters.toDragEnteredEventData
@@ -388,6 +390,7 @@ internal val App = FC<AppProps> { props ->
     } */
 
     val (lastDraggedOver, setLastDraggedOver) = useState<String?>(null)
+    val draggedElementRef = useRef<org.w3c.dom.Element>(null)
 
     val pointerSensor = useSensor(PointerSensor, jsObject<PointerSensorOptions> {
         activationConstraint = jsObject {
@@ -416,6 +419,8 @@ internal val App = FC<AppProps> { props ->
         // measuring = measuringConfig
 
         onDragStart = { event ->
+            val element = event.active?.id?.let { document.getElementById(it) }
+            draggedElementRef.current = element
             JCEFEventDispatcher.dispatchEvent(event.toDragStartedEventData())
         }
 
@@ -492,6 +497,19 @@ internal val App = FC<AppProps> { props ->
                 }
             }
         }
+
+        DragOverlay {
+            className = ClassName("bgw_drag_overlay")
+        }
+
+        /* DragOverlay {
+            if (draggedElementRef.current != null) {
+                createPortal(
+                    draggedElementRef.current!!.unsafeCast<ReactNode>(),
+                    document.body.unsafeCast<Element>()
+                )
+            }
+        } */
     }
 }
 

diff --git a/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/application/JCEFApplication.kt b/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/application/JCEFApplication.kt
@@ -171,6 +171,7 @@ internal class JCEFApplication : Application {
                         is DragGestureStartedEventData -> {
                             if(component is DynamicComponentView) {
                                 component.onDragGestureStarted?.invoke(DragEvent(component))
+                                component.isDragged = true
                             }
                         }
                         is DragGestureMovedEventData -> {
@@ -200,7 +201,10 @@ internal class JCEFApplication : Application {
                             val root = component.getRootNode()
                             val target = root.findComponent(eventData.target)
                             val dropped = target?.dropAcceptor?.invoke(DragEvent(component))
-                            if(dropped == true) target.onDragDropped?.invoke(DragEvent(component))
+                            if(dropped == true) {
+                                target.onDragDropped?.invoke(DragEvent(component))
+                                (component as DynamicComponentView).isDragged = false
+                            }
                         }
                     }
 

diff --git a/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/main/view/HexGridGameScene.kt b/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/main/view/HexGridGameScene.kt
@@ -49,8 +49,8 @@ internal class HexGridGameScene : BoardGameScene() {
     private val singleHex = HexagonView(
         posX = 1100,
         posY = 0,
-        visual = ImageVisual("https://static.vecteezy.com/system/resources/previews/010/256/326/non_2x/premium-flat-icon-of-game-bag-vector.jpg"),
-        size = 100
+        visual = ColorVisual.BLUE,
+        size = 50
     ).apply {
         isDraggable = true
     }
@@ -63,7 +63,7 @@ internal class HexGridGameScene : BoardGameScene() {
         visual = ColorVisual.RED
     ).apply {
         add(hexGrid)
-        add(satchel)
+        add(singleHex)
     }
 
     private val cameraPane = CameraPane(
@@ -141,7 +141,6 @@ internal class HexGridGameScene : BoardGameScene() {
             val hexagon = HexagonView(posX = 800, posY = 800, visual = ImageVisual("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwc4YbxNBYXWRkgqzh9tbaSQh2Uy-f4e1Nl0teHHWFisub3gxv4rxn1eFjgVUUMASaNSg&usqp=CAU"), size = 40, orientation = HexOrientation.FLAT_TOP).apply {
                 isDraggable = true
                 onKeyPressed = {
-                    println(it.keyCode)
                     if(it.keyCode == KeyCode.Q) {
                         rotation -= 60.0
                     } else if(it.keyCode == KeyCode.E) {