Added dropAcceptor to all available ComponentViews

tudo-aqua · Nov 25, 2024 · af0ccdd · af0ccdd
1 parent e0e8808
commit af0ccdd
Show file tree

Hide file tree

Showing 16 changed files with 288 additions and 91 deletions.
diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/gamecomponentviews/CardView.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/gamecomponentviews/CardView.kt
@@ -55,13 +55,6 @@ val CardView = FC<CardViewProps> { props ->
         })
     }
 
-    val (lastTransform, setLastTransform) = useState<DraggableResultTransform>(object : DraggableResultTransform {
-        override var x: Double = 0.0
-        override var y: Double = 0.0
-        override var scaleX: Double = 1.0
-        override var scaleY: Double = 1.0
-    })
-
     val style: PropertiesBuilder.() -> Unit = {
         cssBuilderIntern(props.data)
         transform = translate(draggable.transform?.x?.px ?: 0.px, draggable.transform?.y?.px ?: 0.px)

diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/gamecomponentviews/DiceView.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/gamecomponentviews/DiceView.kt
@@ -13,8 +13,7 @@ import react.dom.aria.ariaDisabled
 import react.dom.aria.ariaPressed
 import react.dom.aria.ariaRoleDescription
 import react.dom.html.HTMLAttributes
-import tools.aqua.bgw.DraggableOptions
-import tools.aqua.bgw.DraggableResultTransform
+import tools.aqua.bgw.*
 import tools.aqua.bgw.builder.ReactConverters.toKeyEventData
 import tools.aqua.bgw.builder.ReactConverters.toMouseEnteredData
 import tools.aqua.bgw.builder.ReactConverters.toMouseEventData
@@ -25,8 +24,6 @@ import tools.aqua.bgw.elements.bgwVisuals
 import tools.aqua.bgw.elements.cssBuilder
 import tools.aqua.bgw.event.JCEFEventDispatcher
 import tools.aqua.bgw.event.applyCommonEventHandlers
-import tools.aqua.bgw.handlers
-import tools.aqua.bgw.useDraggable
 import web.dom.Element
 import web.timers.Timeout
 import web.timers.clearTimeout
@@ -45,37 +42,20 @@ val DiceView = FC<DiceViewProps> { props ->
         override var id: String = props.data.id
     })
 
-    val (lastTransform, setLastTransform) = useState<DraggableResultTransform>(object : DraggableResultTransform {
-        override var x: Double = 0.0
-        override var y: Double = 0.0
-        override var scaleX: Double = 1.0
-        override var scaleY: Double = 1.0
-    })
+    var droppable : DroppableResult? = null
+
+    if(props.data.isDroppable) {
+        droppable = useDroppable(object : DroppableOptions {
+            override var id: String = props.data.id
+        })
+    }
 
     val style: PropertiesBuilder.() -> Unit = {
         cssBuilderIntern(props.data)
         transform = translate(draggable.transform?.x?.px ?: 0.px, draggable.transform?.y?.px ?: 0.px)
         cursor = if(props.data.isDraggable) Cursor.pointer else Cursor.default
     }
 
-    /* useEffect(listOf(draggable.transform)) {
-        var resetTimeout: Timeout? = null
-
-        if (draggable.transform != null) {
-            resetTimeout?.let { clearTimeout(it) }
-            draggable.transform?.let { setLastTransform(it) }
-        } else {
-            resetTimeout = setTimeout({
-                setLastTransform(object : DraggableResultTransform {
-                    override var x: Double = 0.0
-                    override var y: Double = 0.0
-                    override var scaleX: Double = 1.0
-                    override var scaleY: Double = 1.0
-                })
-            }, 200)
-        }
-    } */
-
     val elementRef = useRef<Element>(null)
 
     bgwDiceView {
@@ -86,6 +66,12 @@ val DiceView = FC<DiceViewProps> { props ->
         useEffect {
             elementRef.current?.let { draggable.setNodeRef(it) }
         }
+
+        if(props.data.isDroppable) {
+            useEffect {
+                elementRef.current?.let { droppable!!.setNodeRef(it) }
+            }
+        }
         css(style)
 
         if(props.data.isDraggable) {

diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/gamecomponentviews/HexagonView.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/gamecomponentviews/HexagonView.kt
@@ -20,8 +20,7 @@ import react.dom.html.HTMLAttributes
 import react.dom.html.ReactHTML
 import react.dom.html.ReactHTML.div
 import react.dom.svg.ReactSVG
-import tools.aqua.bgw.DraggableOptions
-import tools.aqua.bgw.DraggableResultTransform
+import tools.aqua.bgw.*
 import tools.aqua.bgw.builder.NodeBuilder
 import tools.aqua.bgw.builder.ReactConverters.toDragEventData
 import tools.aqua.bgw.builder.ReactConverters.toKeyEventData
@@ -33,8 +32,6 @@ import tools.aqua.bgw.elements.bgwVisuals
 import tools.aqua.bgw.elements.cssBuilder
 import tools.aqua.bgw.event.JCEFEventDispatcher
 import tools.aqua.bgw.event.applyCommonEventHandlers
-import tools.aqua.bgw.handlers
-import tools.aqua.bgw.useDraggable
 import web.dom.Element
 import web.timers.Timeout
 import web.timers.clearTimeout
@@ -56,31 +53,13 @@ val HexagonView = FC<HexagonViewProps> { props ->
     val draggable = useDraggable(object : DraggableOptions {
         override var id: String = props.data.id
     })
+    var droppable : DroppableResult? = null
 
-    val (lastTransform, setLastTransform) = useState<DraggableResultTransform>(object : DraggableResultTransform {
-        override var x: Double = 0.0
-        override var y: Double = 0.0
-        override var scaleX: Double = 1.0
-        override var scaleY: Double = 1.0
-    })
-
-    /* useEffect(listOf(draggable.transform)) {
-        var resetTimeout: Timeout? = null
-
-        if (draggable.transform != null) {
-            resetTimeout?.let { clearTimeout(it) }
-            draggable.transform?.let { setLastTransform(it) }
-        } else {
-            resetTimeout = setTimeout({
-                setLastTransform(object : DraggableResultTransform {
-                    override var x: Double = 0.0
-                    override var y: Double = 0.0
-                    override var scaleX: Double = 1.0
-                    override var scaleY: Double = 1.0
-                })
-            }, 200)
-        }
-    } */
+    if(props.data.isDroppable) {
+        droppable = useDroppable(object : DroppableOptions {
+            override var id: String = props.data.id
+        })
+    }
 
     val elementRef = useRef<Element>(null)
 
@@ -94,6 +73,12 @@ val HexagonView = FC<HexagonViewProps> { props ->
             elementRef.current?.let { draggable.setNodeRef(it) }
         }
 
+        if(props.data.isDroppable) {
+            useEffect {
+                elementRef.current?.let { droppable!!.setNodeRef(it) }
+            }
+        }
+
         css {
             cssBuilderIntern(props.data)
             width = (sqrt(3.0) * props.data.size).em

diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/gamecomponentviews/TokenView.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/gamecomponentviews/TokenView.kt
@@ -51,38 +51,21 @@ val TokenView = FC<TokenViewProps> { props ->
     val draggable = useDraggable(object : DraggableOptions {
         override var id: String = props.data.id
     })
+    var droppable : DroppableResult? = null
+
+    if(props.data.isDroppable) {
+        droppable = useDroppable(object : DroppableOptions {
+            override var id: String = props.data.id
+        })
+    }
 
-    val (lastTransform, setLastTransform) = useState<DraggableResultTransform>(object : DraggableResultTransform {
-        override var x: Double = 0.0
-        override var y: Double = 0.0
-        override var scaleX: Double = 1.0
-        override var scaleY: Double = 1.0
-    })
 
     val style: PropertiesBuilder.() -> Unit = {
         cssBuilderIntern(props.data)
         transform = translate(draggable.transform?.x?.px ?: 0.px, draggable.transform?.y?.px ?: 0.px)
         cursor = if(props.data.isDraggable) Cursor.pointer else Cursor.default
     }
 
-    /* useEffect(listOf(draggable.transform)) {
-        var resetTimeout: Timeout? = null
-
-        if (draggable.transform != null) {
-            resetTimeout?.let { clearTimeout(it) }
-            draggable.transform?.let { setLastTransform(it) }
-        } else {
-            resetTimeout = setTimeout({
-                setLastTransform(object : DraggableResultTransform {
-                    override var x: Double = 0.0
-                    override var y: Double = 0.0
-                    override var scaleX: Double = 1.0
-                    override var scaleY: Double = 1.0
-                })
-            }, 200)
-        }
-    } */
-
     val elementRef = useRef<Element>(null)
 
     bgwTokenView {
@@ -93,6 +76,12 @@ val TokenView = FC<TokenViewProps> { props ->
         useEffect {
             elementRef.current?.let { draggable.setNodeRef(it) }
         }
+
+        if(props.data.isDroppable) {
+            useEffect {
+                elementRef.current?.let { droppable!!.setNodeRef(it) }
+            }
+        }
         css(style)
 
         bgwVisuals {

diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/CheckBox.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/CheckBox.kt
@@ -18,6 +18,8 @@ import react.dom.html.HTMLAttributes
 import react.dom.html.ReactHTML
 import react.dom.html.ReactHTML.input
 import react.dom.html.ReactHTML.label
+import tools.aqua.bgw.DroppableOptions
+import tools.aqua.bgw.DroppableResult
 import tools.aqua.bgw.builder.ReactConverters.toKeyEventData
 import tools.aqua.bgw.builder.ReactConverters.toMouseEnteredData
 import tools.aqua.bgw.builder.ReactConverters.toMouseEventData
@@ -28,6 +30,7 @@ import tools.aqua.bgw.elements.*
 import tools.aqua.bgw.event.JCEFEventDispatcher
 import tools.aqua.bgw.event.applyCommonEventHandlers
 import tools.aqua.bgw.handlers
+import tools.aqua.bgw.useDroppable
 import web.dom.Element
 import web.html.InputType
 
@@ -44,13 +47,31 @@ fun PropertiesBuilder.cssBuilderIntern(componentViewData: CheckBoxData) {
 }
 
 val CheckBox = FC<CheckBoxProps> { props ->
+    var droppable : DroppableResult? = null
+
+    if(props.data.isDroppable) {
+        droppable = useDroppable(object : DroppableOptions {
+            override var id: String = props.data.id
+        })
+    }
+
+    val elementRef = useRef<Element>(null)
+
     bgwCheckBox {
         id = props.data.id
         className = ClassName("textField")
         css {
             cssBuilderIntern(props.data)
         }
 
+        ref = elementRef
+
+        if(props.data.isDroppable) {
+            useEffect {
+                elementRef.current?.let { droppable!!.setNodeRef(it) }
+            }
+        }
+
         bgwVisuals {
             className = ClassName("visuals")
             +VisualBuilder.build(props.data.visual)

diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/ColorPicker.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/ColorPicker.kt
@@ -16,6 +16,8 @@ import org.w3c.dom.HTMLSelectElement
 import react.*
 import react.dom.html.HTMLAttributes
 import react.dom.html.ReactHTML.input
+import tools.aqua.bgw.DroppableOptions
+import tools.aqua.bgw.DroppableResult
 import tools.aqua.bgw.builder.ReactConverters.toKeyEventData
 import tools.aqua.bgw.builder.ReactConverters.toMouseEnteredData
 import tools.aqua.bgw.builder.ReactConverters.toMouseEventData
@@ -26,6 +28,7 @@ import tools.aqua.bgw.elements.*
 import tools.aqua.bgw.event.JCEFEventDispatcher
 import tools.aqua.bgw.event.applyCommonEventHandlers
 import tools.aqua.bgw.handlers
+import tools.aqua.bgw.useDroppable
 import web.dom.Element
 import web.html.InputType
 
@@ -38,13 +41,31 @@ fun PropertiesBuilder.cssBuilderIntern(componentViewData: ColorPickerData) {
 }
 
 val ColorPicker = FC<ColorPickerProps> { props ->
+    var droppable : DroppableResult? = null
+
+    if(props.data.isDroppable) {
+        droppable = useDroppable(object : DroppableOptions {
+            override var id: String = props.data.id
+        })
+    }
+
+    val elementRef = useRef<Element>(null)
+
     bgwColorPicker {
         id = props.data.id
         className = ClassName("colorPicker")
         css {
             cssBuilderIntern(props.data)
         }
 
+        ref = elementRef
+
+        if(props.data.isDroppable) {
+            useEffect {
+                elementRef.current?.let { droppable!!.setNodeRef(it) }
+            }
+        }
+
         bgwVisuals {
             className = ClassName("visuals")
             +VisualBuilder.build(props.data.visual)

diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/ComboBox.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/ComboBox.kt
@@ -13,6 +13,8 @@ import react.*
 import react.dom.html.HTMLAttributes
 import react.dom.html.ReactHTML.option
 import react.dom.html.ReactHTML.select
+import tools.aqua.bgw.DroppableOptions
+import tools.aqua.bgw.DroppableResult
 import tools.aqua.bgw.builder.ReactConverters.toKeyEventData
 import tools.aqua.bgw.builder.ReactConverters.toMouseEnteredData
 import tools.aqua.bgw.builder.ReactConverters.toMouseEventData
@@ -22,6 +24,7 @@ import tools.aqua.bgw.elements.*
 import tools.aqua.bgw.event.JCEFEventDispatcher
 import tools.aqua.bgw.event.applyCommonEventHandlers
 import tools.aqua.bgw.handlers
+import tools.aqua.bgw.useDroppable
 import web.dom.Element
 
 external interface ComboBoxProps : Props {
@@ -33,13 +36,31 @@ fun PropertiesBuilder.cssBuilderIntern(componentViewData: ComboBoxData) {
 }
 
 val ComboBox = FC<ComboBoxProps> { props ->
+    var droppable : DroppableResult? = null
+
+    if(props.data.isDroppable) {
+        droppable = useDroppable(object : DroppableOptions {
+            override var id: String = props.data.id
+        })
+    }
+
+    val elementRef = useRef<Element>(null)
+
     bgwComboBox {
         id = props.data.id
         className = ClassName("comboBox")
         css {
             cssBuilderIntern(props.data)
         }
 
+        ref = elementRef
+
+        if(props.data.isDroppable) {
+            useEffect {
+                elementRef.current?.let { droppable!!.setNodeRef(it) }
+            }
+        }
+
         bgwVisuals {
             className = ClassName("visuals")
             +VisualBuilder.build(props.data.visual)