Added multiple events

bgw-gui/src/commonMain/kotlin/Json.kt

@@ -123,6 +123,8 @@ private val module = SerializersModule {
     polymorphic(EventData::class) {
         subclass(MouseEnteredEventData::class)
         subclass(MouseExitedEventData::class)
+        subclass(MousePressedEventData::class)
+        subclass(MouseReleasedEventData::class)
         subclass(MouseEventData::class)
         subclass(KeyEventData::class)
         subclass(LoadEventData::class)
@@ -146,12 +148,16 @@ private val module = SerializersModule {
     polymorphic(InputEventData::class) {
         subclass(MouseEnteredEventData::class)
         subclass(MouseExitedEventData::class)
+        subclass(MousePressedEventData::class)
+        subclass(MouseReleasedEventData::class)
         subclass(MouseEventData::class)
         subclass(KeyEventData::class)
     }
     polymorphic(MouseEventData::class) {
         subclass(MouseEnteredEventData::class)
         subclass(MouseExitedEventData::class)
+        subclass(MousePressedEventData::class)
+        subclass(MouseReleasedEventData::class)
     }
     // ANIMATIONS
     polymorphic(AnimationData::class) {

bgw-gui/src/commonMain/kotlin/PropData.kt

@@ -45,6 +45,7 @@ class AppData : Data() {
 
 @Serializable
 class SceneData : Data() {
+    var id: ID = ""
     var width : Int = 0
     var height : Int = 0
     var background : VisualData? = null

bgw-gui/src/commonMain/kotlin/data/event/MousePressedEventData.kt

@@ -0,0 +1,13 @@
+package data.event
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+import tools.aqua.bgw.event.MouseButtonType
+
+@Serializable
+@SerialName("MousePressedEventData")
+class MousePressedEventData(
+    private val pButton: MouseButtonType,
+    private val pX: Double,
+    private val pY: Double
+) : MouseEventData(pButton, pX, pY)

bgw-gui/src/commonMain/kotlin/data/event/MouseReleasedEventData.kt

@@ -0,0 +1,13 @@
+package data.event
+
+import kotlinx.serialization.SerialName
+import kotlinx.serialization.Serializable
+import tools.aqua.bgw.event.MouseButtonType
+
+@Serializable
+@SerialName("MouseReleasedEventData")
+class MouseReleasedEventData(
+    private val pButton: MouseButtonType,
+    private val pX: Double,
+    private val pY: Double
+) : MouseEventData(pButton, pX, pY)

bgw-gui/src/commonMain/kotlin/tools/aqua/bgw/event/KeyCode.kt

@@ -26,35 +26,35 @@ package tools.aqua.bgw.event
  * @property keyTypeMask Mask for the key's type.
  */
 @Suppress("unused", "MemberVisibilityCanBePrivate")
-enum class KeyCode(val string: String, private val keyTypeMask: Int) {
+enum class KeyCode(val string: String, private val keyTypeMask: Int, private val keyCodes : List<String> = listOf(string, string.lowercase(), string.uppercase())) {
 
   // region Function keys
   /** Constant for the **Shift** key. */
   SHIFT("Shift", KeyType.MODIFIER),
 
   /** Constant for the **Ctrl** key. */
-  CONTROL("Ctrl", KeyType.MODIFIER),
+  CONTROL("Ctrl", KeyType.MODIFIER, listOf("Control")),
 
   /** Constant for the **Alt** key. */
   ALT("Alt", KeyType.MODIFIER),
 
   /** Constant for the **AltGr** key. */
-  ALT_GRAPH("AltGr", KeyType.MODIFIER),
+  ALT_GRAPH("AltGr", KeyType.MODIFIER, listOf("AltGraph")),
 
   /** Constant for the **Caps Lock** key. */
-  CAPS("Caps", KeyType.OTHER),
+  CAPS("Caps", KeyType.OTHER, listOf("CapsLock")),
 
   /**
    * Constant for the Microsoft Windows **Win** key. It is used for both the left and right version
    * of the key.
    */
-  WINDOWS("Win", KeyType.MODIFIER),
+  WINDOWS("Win", KeyType.MODIFIER, listOf("Meta", "Win")),
 
   /** Constant for the Microsoft Windows Context Menu key. */
-  CONTEXT_MENU("Context Menu", KeyType.OTHER),
+  CONTEXT_MENU("Context Menu", KeyType.OTHER, listOf("ContextMenu")),
 
   /** Constant for the **Space** key. */
-  SPACE("Space", KeyType.WHITESPACE),
+  SPACE("Space", KeyType.WHITESPACE, listOf(" ")),
 
   /** Constant for the **Backspace** key. */
   BACK_SPACE("Backspace", KeyType.OTHER),
@@ -221,6 +221,18 @@ enum class KeyCode(val string: String, private val keyTypeMask: Int) {
 
   /** Constant for the **Z** key. */
   Z("Z", KeyType.LETTER),
+
+  /** Constant for the **Ä** key. */
+  Ä("Ä", KeyType.LETTER),
+
+  /** Constant for the **Ö** key. */
+  Ö("Ö", KeyType.LETTER),
+
+  /** Constant for the **Ü** key. */
+  Ü("Ü", KeyType.LETTER),
+
+  /** Constant for the **ß** key. */
+  ß("ß", KeyType.LETTER),
   // endregion
 
   // region Characters
@@ -322,7 +334,7 @@ enum class KeyCode(val string: String, private val keyTypeMask: Int) {
 
   // region F-Keys
   /** Constant for the **Esc** key. */
-  ESCAPE("Esc", KeyType.OTHER),
+  ESCAPE("Esc", KeyType.OTHER, listOf("Escape")),
 
   /** Constant for the F1 function key. */
   F1("F1", KeyType.FUNCTION),
@@ -361,10 +373,10 @@ enum class KeyCode(val string: String, private val keyTypeMask: Int) {
   F12("F12", KeyType.FUNCTION),
 
   /** Constant for the **Print Screen** key. */
-  PRINT_SCREEN("Print", KeyType.OTHER),
+  PRINT_SCREEN("Print", KeyType.OTHER, listOf("PrintScreen")),
 
   /** Constant for the **Scroll Lock** key. */
-  SCROLL_LOCK("Scroll Lock", KeyType.OTHER),
+  SCROLL_LOCK("Scroll Lock", KeyType.OTHER, listOf("ScrollLock")),
 
   /** Constant for the **Pause** key. */
   PAUSE("Pause", KeyType.OTHER),
@@ -375,31 +387,31 @@ enum class KeyCode(val string: String, private val keyTypeMask: Int) {
   INSERT("Insert", KeyType.OTHER),
 
   /** Constant for the **Delete** key. */
-  DELETE("Del", KeyType.OTHER),
+  DELETE("Del", KeyType.OTHER, listOf("Delete")),
 
   /** Constant for the **Home** / **Pos1** key. */
-  HOME_POS1("Pos1", KeyType.OTHER),
+  HOME_POS1("Pos1", KeyType.OTHER, listOf("Home")),
 
   /** Constant for the **End** key. */
   END("End", KeyType.OTHER),
 
   /** Constant for the **Page Up** key. */
-  PAGE_UP("Page Up", KeyType.NAVIGATION),
+  PAGE_UP("Page Up", KeyType.NAVIGATION, listOf("PageUp")),
 
   /** Constant for the **Page Down** key. */
-  PAGE_DOWN("Page Down", KeyType.NAVIGATION),
+  PAGE_DOWN("Page Down", KeyType.NAVIGATION, listOf("PageDown")),
 
   /** Constant for the non-numpad **left** arrow key. */
-  LEFT("Left", KeyType.NAVIGATION or KeyType.ARROW),
+  LEFT("Left", KeyType.NAVIGATION or KeyType.ARROW, listOf("ArrowLeft")),
 
   /** Constant for the non-numpad **up** arrow key. */
-  UP("Up", KeyType.NAVIGATION or KeyType.ARROW),
+  UP("Up", KeyType.NAVIGATION or KeyType.ARROW, listOf("ArrowUp")),
 
   /** Constant for the non-numpad **right** arrow key. */
-  RIGHT("Right", KeyType.NAVIGATION or KeyType.ARROW),
+  RIGHT("Right", KeyType.NAVIGATION or KeyType.ARROW, listOf("ArrowRight")),
 
   /** Constant for the non-numpad **down** arrow key. */
-  DOWN("Down", KeyType.NAVIGATION or KeyType.ARROW),
+  DOWN("Down", KeyType.NAVIGATION or KeyType.ARROW, listOf("ArrowDown")),
   // endregion
 
   /**
@@ -475,6 +487,13 @@ enum class KeyCode(val string: String, private val keyTypeMask: Int) {
    * @return `true` if key was a function key F1, F2, etc., `false` otherwise.
    */
   fun isFunction(): Boolean = keyTypeMask and KeyType.FUNCTION != 0
+
+  /**
+   * Returns the actual key codes for this key.
+   *
+   * @return Actual key codes for this key.
+   */
+  fun getKeyCodes() : List<String> = keyCodes
   // endregion
 
   /** Integer mask for KeyCode type. */

bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/Client.kt

@@ -16,6 +16,8 @@ import org.w3c.dom.CustomEvent
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.WebSocket
 import react.*
+import react.dom.client.Root
+import react.dom.client.createRoot
 import react.dom.render
 import tools.aqua.bgw.elements.App
 import tools.aqua.bgw.event.JCEFEventDispatcher
@@ -30,6 +32,7 @@ var handlers: MutableMap<ID, (Data) -> Unit> = mutableMapOf()
 var animator: Animator = Animator()
 
 lateinit var container: HTMLElement
+lateinit var root: Root
 
 fun main() {
     if (Config.USE_SOCKETS) {
@@ -70,16 +73,28 @@ fun handleReceivedData(receivedData: Data) {
                 val element = document.querySelector("#menuScene") as HTMLElement
                 element.classList.toggle("scene--visible", false)
                 setTimeout({
-                    renderApp(app)
+                    if(!Config.USE_SOCKETS) {
+                        renderApp(app)
+                    } else {
+                        renderAppFast(app)
+                    }
                 }, 300)
             } else if (app.action == ActionProp.SHOW_MENU_SCENE) {
-                renderApp(app)
+                if(!Config.USE_SOCKETS) {
+                    renderApp(app)
+                } else {
+                    renderAppFast(app)
+                }
                 val element = document.querySelector("#menuScene") as HTMLElement
                 setTimeout({
                     element.classList.toggle("scene--visible", true)
                 }, 50)
             } else {
-                renderApp(app)
+                if(!Config.USE_SOCKETS) {
+                    renderApp(app)
+                } else {
+                    renderAppFast(app)
+                }
             }
         }
 
@@ -93,12 +108,26 @@ fun handleReceivedData(receivedData: Data) {
     }
 }
 
+/**
+ * Renders the app with React 17 syntax to provide fallback for BGW Playground web app.
+ */
 fun renderApp(appData: AppData) {
     render(App.create { data = appData }, container as Element, callback = {
         JCEFEventDispatcher.dispatchEvent(LoadEventData())
     })
 }
 
+/**
+ * Renders the app with React 18 syntax.
+ */
+fun renderAppFast(appData: AppData) {
+    if(!::root.isInitialized) {
+        root = createRoot(container as Element)
+    }
+    root.render(App.create { data = appData })
+    JCEFEventDispatcher.dispatchEvent(LoadEventData())
+}
+
 fun List<ReactElement<*>>.toFC() = FC<Props> { appendChildren(this@toFC) }
 fun ChildrenBuilder.appendChildren(components: List<ReactElement<*>>) = components.forEach { +it }
 

bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/ReactDND.kt

@@ -27,6 +27,8 @@ external interface DndContextProps : PropsWithChildren {
     var onDragStart: (DragStartEvent) -> Unit
     var onDragMove: (DragMultiEvent) -> Unit
     var onDragOver: (DragMultiEvent) -> Unit
+
+    var sensors: Array<dynamic>
 }
 
 @JsName("useDraggable")
@@ -95,4 +97,22 @@ external interface DroppableOptions {
 external interface DroppableResult {
     val isOver: Boolean
     val setNodeRef: (dynamic) -> Unit
-}
+}
+
+
+
+
+external interface SensorOptions {
+    var activationConstraint: dynamic
+}
+
+external interface PointerSensorOptions : SensorOptions
+
+@JsName("PointerSensor")
+external val PointerSensor: dynamic
+
+@JsName("useSensor")
+external fun useSensor(sensor: dynamic, options: PointerSensorOptions): dynamic
+
+@JsName("useSensors")
+external fun useSensors(vararg sensors: dynamic): Array<dynamic>

bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/builder/ReactConverters.kt

@@ -35,6 +35,34 @@ object ReactConverters {
         ).apply { this.id = targetID }
     }
 
+    fun ReactMouseEvent<*, *>.toMousePressedEventData(targetID: ID?): MousePressedEventData {
+        return MousePressedEventData(
+            when (button as Int) {
+                0 -> MouseButtonType.LEFT_BUTTON
+                1 -> MouseButtonType.MOUSE_WHEEL
+                2 -> MouseButtonType.RIGHT_BUTTON
+                3, 4 -> MouseButtonType.OTHER
+                else -> MouseButtonType.UNSPECIFIED
+            },
+            clientX,
+            clientY
+        ).apply { this.id = targetID }
+    }
+
+    fun ReactMouseEvent<*, *>.toMouseReleasedEventData(targetID: ID?): MouseReleasedEventData {
+        return MouseReleasedEventData(
+            when (button as Int) {
+                0 -> MouseButtonType.LEFT_BUTTON
+                1 -> MouseButtonType.MOUSE_WHEEL
+                2 -> MouseButtonType.RIGHT_BUTTON
+                3, 4 -> MouseButtonType.OTHER
+                else -> MouseButtonType.UNSPECIFIED
+            },
+            clientX,
+            clientY
+        ).apply { this.id = targetID }
+    }
+
     fun ReactKeyEvent<*>.toKeyEventData(targetID: ID?, action: KeyEventAction): KeyEventData {
         return KeyEventData(
             toKeyCode(),
@@ -47,8 +75,8 @@ object ReactConverters {
     }
 
     private fun ReactKeyEvent<*>.toKeyCode(): KeyCode {
-        KeyCode.values().forEach {
-            if (it.name == this.key) return it
+        KeyCode.entries.forEach {
+            if (it.getKeyCodes().contains(this.key)) return it
         }
         return KeyCode.UNDEFINED
     }