Refactor vst-ui-base and test-app: remove inline CSS definitions in Kotlin, migrate styles to external vst-ui-base.css. Add WebResourceHandler for serving CSS. Enhance KeyboardComponent with keyboard event mapping. Increment version to 2.2.4.

test-app/src/jsMain/kotlin/nl/astraeus/vst/ui/view/MainView.kt

@@ -2,25 +2,29 @@
 
 package nl.astraeus.vst.ui.view
 
-import kotlinx.html.*
+import kotlinx.browser.document
+import kotlinx.html.InputType
+import kotlinx.html.div
+import kotlinx.html.h1
+import kotlinx.html.hr
+import kotlinx.html.input
 import kotlinx.html.js.onChangeFunction
 import kotlinx.html.js.onClickFunction
+import kotlinx.html.js.onInputFunction
+import kotlinx.html.option
 import kotlinx.html.org.w3c.dom.events.Event
-import nl.astraeus.css.properties.*
-import nl.astraeus.css.style.Style
-import nl.astraeus.css.style.cls
+import kotlinx.html.select
+import kotlinx.html.span
+import kotlinx.html.style
 import nl.astraeus.komp.HtmlBuilder
 import nl.astraeus.komp.Komponent
 import nl.astraeus.vst.ui.components.ExpKnobComponent
 import nl.astraeus.vst.ui.components.KeyboardComponent
 import nl.astraeus.vst.ui.components.KnobComponent
-import nl.astraeus.vst.ui.css.Css
-import nl.astraeus.vst.ui.css.Css.defineCss
-import nl.astraeus.vst.ui.css.Css.noTextSelect
 import nl.astraeus.vst.ui.css.CssName
-import nl.astraeus.vst.ui.css.hover
 import nl.astraeus.vst.ui.ws.WebsocketClient
 import org.w3c.dom.HTMLInputElement
+import org.w3c.dom.events.KeyboardEvent
 import org.w3c.files.File
 import org.w3c.files.FileList
 import org.w3c.files.get
@@ -29,6 +33,17 @@ class MainView : Komponent() {
   private var messages: MutableList<String> = ArrayList()
   var started = true
   var keyboardWidth = 500
+  val keyboard = KeyboardComponent(
+    keyboardWidth = keyboardWidth,
+    keyboardHeight = keyboardWidth / 2,
+    onNoteDown = { println("Note down: $it") },
+    onNoteUp = { println("Note up: $it") },
+  )
+
+  init {
+    document.body?.addEventListener("keydown", { event -> keyboard.handleKeyboardEvent(event as KeyboardEvent) })
+    document.body?.addEventListener("keyup", { event -> keyboard.handleKeyboardEvent(event as KeyboardEvent) })
+  }
 
   fun addMessage(message: String) {
     messages.add(message)
@@ -45,7 +60,7 @@ class MainView : Komponent() {
 
   override fun HtmlBuilder.render() {
     div(MainDivCss.name) {
-      style = "transform: scale(0.5);"
+      //style = "transform: scale(0.5);"
       if (!started) {
         div(StartSplashCss.name) {
           div(StartBoxCss.name) {
@@ -89,26 +104,27 @@ class MainView : Komponent() {
           }
           span {
             +"channel:"
-            /*
           input {
             type = InputType.number
-            value = VstChipWorklet.midiChannel.toString()
+            value = "1"
+            min = "1"
+            max = "16"
             onInputFunction = { event ->
               val target = event.target as HTMLInputElement
-              kotlin.io.println("onInput channel: $target")
-              VstChipWorklet.midiChannel = target.value.toInt()
+              println("onInput channel: $target")
+              //VstChipWorklet.midiChannel = target.value.toInt()
             }
           }
-*/
+
           }
-          span {
-            +"Upload file: "
-            input {
-              type = InputType.file
-              onChangeFunction = {
-                fileInputSelectHandler(it)
-                requestUpdate()
-              }
+        }
+        div {
+          +"Upload file: "
+          input {
+            type = InputType.file
+            onChangeFunction = {
+              fileInputSelectHandler(it)
+              requestUpdate()
             }
           }
         }
@@ -133,12 +149,7 @@ class MainView : Komponent() {
       hr {}
       div {
         include(
-          KeyboardComponent(
-            keyboardWidth = keyboardWidth,
-            keyboardHeight = keyboardWidth / 2,
-            onNoteDown = { println("Note down: $it") },
-            onNoteUp = { println("Note up: $it") },
-          )
+          keyboard
         )
       }
       /*
@@ -226,132 +237,10 @@ class MainView : Komponent() {
 
   companion object MainViewCss : CssName() {
     object MainDivCss : CssName()
-    object ActiveCss : CssName()
-    object ButtonCss : CssName()
-    object ButtonBarCss : CssName()
-    object SelectedCss : CssName()
-    object NoteBarCss : CssName()
     object StartSplashCss : CssName()
     object StartBoxCss : CssName()
     object StartButtonCss : CssName()
     object ControlsCss : CssName()
-
-    init {
-      defineCss {
-        select("*") {
-          select("*:before") {
-            select("*:after") {
-              boxSizing(BoxSizing.borderBox)
-            }
-          }
-        }
-        select("html", "body") {
-          margin(0.px)
-          padding(0.px)
-          height(100.prc)
-        }
-        select("html", "body") {
-          backgroundColor(Css.currentStyle.mainBackgroundColor)
-          color(Css.currentStyle.mainFontColor)
-
-          fontFamily("JetbrainsMono, monospace")
-          fontSize(14.px)
-          fontWeight(FontWeight.bold)
-
-          //transition()
-          noTextSelect()
-        }
-        select("input", "textarea") {
-          backgroundColor(Css.currentStyle.inputBackgroundColor)
-          color(Css.currentStyle.mainFontColor)
-          border("none")
-        }
-        select(cls(ButtonCss)) {
-          margin(1.rem)
-          commonButton()
-        }
-        select(cls(ButtonBarCss)) {
-          margin(1.rem, 0.px)
-          commonButton()
-        }
-        select(cls(ActiveCss)) {
-          //backgroundColor(Css.currentStyle.selectedBackgroundColor)
-        }
-        select(cls(NoteBarCss)) {
-          minHeight(4.rem)
-        }
-        select(cls(MainDivCss)) {
-          margin(1.rem)
-        }
-        select("select") {
-          plain("appearance", "none")
-          border("0")
-          outline("0")
-          width(20.rem)
-          padding(0.5.rem, 2.rem, 0.5.rem, 0.5.rem)
-          backgroundImage("url('https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg')")
-          background("right 0.8em center/1.4em")
-          backgroundColor(Css.currentStyle.inputBackgroundColor)
-          color(Css.currentStyle.mainFontColor)
-          borderRadius(0.25.em)
-        }
-        select(cls(StartSplashCss)) {
-          position(Position.fixed)
-          left(0.px)
-          top(0.px)
-          width(100.vw)
-          height(100.vh)
-          zIndex(100)
-          backgroundColor(hsla(32, 0, 5, 0.65))
-
-          select(cls(StartBoxCss)) {
-            position(Position.relative)
-            left(25.vw)
-            top(25.vh)
-            width(50.vw)
-            height(50.vh)
-            backgroundColor(hsla(239, 50, 10, 1.0))
-            borderColor(Css.currentStyle.mainFontColor)
-            borderWidth(2.px)
-
-            select(cls(StartButtonCss)) {
-              position(Position.absolute)
-              left(50.prc)
-              top(50.prc)
-              transform(Transform("translate(-50%, -50%)"))
-              padding(1.rem)
-              backgroundColor(Css.currentStyle.buttonBackgroundColor)
-              cursor("pointer")
-            }
-          }
-        }
-        select(ControlsCss.cls()) {
-          display(Display.flex)
-          flexDirection(FlexDirection.row)
-          justifyContent(JustifyContent.flexStart)
-          alignItems(AlignItems.center)
-          margin(1.rem)
-          padding(1.rem)
-          backgroundColor(Css.currentStyle.mainBackgroundColor)
-        }
-      }
-    }
-
-    private fun Style.commonButton() {
-      display(Display.inlineBlock)
-      padding(1.rem)
-      backgroundColor(Css.currentStyle.buttonBackgroundColor)
-      borderColor(Css.currentStyle.buttonBorderColor)
-      borderWidth(Css.currentStyle.buttonBorderWidth)
-      color(Css.currentStyle.mainFontColor)
-
-      hover {
-        backgroundColor(Css.currentStyle.buttonBackgroundColor.hover())
-      }
-      and(SelectedCss.cls()) {
-        backgroundColor(Css.currentStyle.buttonBackgroundColor.hover().hover().hover())
-      }
-    }
   }
 
-}
+}