Use vst-ui-base

build.gradle.kts

@@ -1,5 +1,3 @@
-import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackOutput
-
 buildscript {
     apply(from = "common.gradle.kts")
 }
@@ -46,6 +44,7 @@ kotlin {
             dependencies {
                 //base
                 implementation("nl.astraeus:kotlin-komponent-js:1.2.2")
+                implementation("nl.astraeus:vst-ui-base:1.0.0-SNAPSHOT")
             }
         }
         val jsTest by getting {
@@ -57,7 +56,9 @@ kotlin {
             dependencies {
                 //base
 
-                implementation("io.undertow:undertow-core:2.3.13.Final")
+                implementation("io.undertow:undertow-core:2.3.14.Final")
+                implementation("org.jboss.xnio:xnio-nio:3.8.16.Final")
+
                 implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:0.11.0")
             }
         }

src/jsMain/kotlin/nl/astraeus/vst/chip/Main.kt

@@ -3,13 +3,19 @@ package nl.astraeus.vst.chip
 import kotlinx.browser.document
 import kotlinx.browser.window
 import nl.astraeus.komp.Komponent
+import nl.astraeus.komp.UnsafeMode
 import nl.astraeus.vst.chip.midi.Broadcaster
-import nl.astraeus.vst.chip.midi.MidiMessage
 import nl.astraeus.vst.chip.midi.Midi
+import nl.astraeus.vst.chip.midi.MidiMessage
 import nl.astraeus.vst.chip.view.MainView
+import nl.astraeus.vst.ui.css.CssSettings
 import org.khronos.webgl.Uint8Array
 
 fun main() {
+  CssSettings.shortId = false
+  CssSettings.preFix = "vst-chip"
+
+  Komponent.unsafeMode = UnsafeMode.UNSAFE_SVG_ONLY
   Komponent.create(document.body!!, MainView)
 
   Midi.start()

src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt

@@ -1,11 +1,5 @@
 package nl.astraeus.vst.chip.view
 
-import daw.style.Css
-import daw.style.Css.defineCss
-import daw.style.Css.noTextSelect
-import daw.style.CssId
-import daw.style.CssName
-import daw.style.hover
 import kotlinx.browser.window
 import kotlinx.html.*
 import kotlinx.html.js.onChangeFunction
@@ -17,16 +11,22 @@ import nl.astraeus.komp.HtmlBuilder
 import nl.astraeus.komp.Komponent
 import nl.astraeus.vst.chip.audio.VstChipWorklet
 import nl.astraeus.vst.chip.midi.Midi
+import nl.astraeus.vst.ui.components.ExpKnobComponent
+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 org.khronos.webgl.Uint8Array
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLSelectElement
 
-object MainView : Komponent() {
+object MainView : Komponent(), CssName {
   private var messages: MutableList<String> = ArrayList()
   private var started = false
 
   init {
-    MainViewCss
+    css()
   }
 
   fun addMessage(message: String) {
@@ -38,11 +38,11 @@ object MainView : Komponent() {
   }
 
   override fun HtmlBuilder.render() {
-    div(MainViewCss.MainDivCss.name) {
+    div(MainDivCss.name) {
       if (!started) {
-        div(MainViewCss.StartSplashCss.name) {
+        div(StartSplashCss.name) {
-          div(MainViewCss.StartBoxCss.name) {
+          div(StartBoxCss.name) {
-            div(MainViewCss.StartButtonCss.name) {
+            div(StartButtonCss.name) {
               +"START"
               onClickFunction = {
                 started = true
@@ -141,7 +141,7 @@ object MainView : Komponent() {
           }
         }
       }
-      div(MainViewCss.ButtonCss.name) {
+      div(ButtonCss.name) {
         +"Send note on to output"
         onClickFunction = {
           val data = Uint8Array(
@@ -155,7 +155,7 @@ object MainView : Komponent() {
           Midi.send(data, window.performance.now() + 2000)
         }
       }
-      div(MainViewCss.ButtonCss.name) {
+      div(ButtonCss.name) {
         +"Send note off to output"
         onClickFunction = {
           val data = Uint8Array(
@@ -168,19 +168,25 @@ object MainView : Komponent() {
           Midi.send(data)
         }
       }
+      div {
+        include(
+          ExpKnobComponent(
+
+          )
+        )
+      }
     }
   }
 
-  object MainViewCss : CssId("main") {
+  object MainDivCss : CssName
-    object MainDivCss : CssName()
+  object ActiveCss : CssName
-    object ActiveCss : CssName()
+  object ButtonCss : CssName
-    object ButtonCss : CssName()
+  object NoteBarCss : CssName
-    object NoteBarCss : CssName()
+  object StartSplashCss : CssName
-    object StartSplashCss : CssName()
+  object StartBoxCss : CssName
-    object StartBoxCss : CssName()
+  object StartButtonCss : CssName
-    object StartButtonCss : CssName()
 
-    init {
+  private fun css() {
       defineCss {
         select("*") {
           select("*:before") {
@@ -268,6 +274,6 @@ object MainView : Komponent() {
         }
       }
     }
-  }
+
 
 }

src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/Css.kt

@@ -1,115 +0,0 @@
-package daw.style
-
-import kotlinx.browser.document
-import nl.astraeus.css.properties.*
-import nl.astraeus.css.style
-import nl.astraeus.css.style.ConditionalStyle
-import nl.astraeus.css.style.Style
-
-class StyleDefinition(
-  val mainFontColor: Color = hsla(178, 70, 55, 1.0),
-  val mainBackgroundColor: Color = hsl(239, 50, 10),
-  //val entryFontColor: Color = hsl(Css.mainFontColorNumber, 70, 55),
-  val inputBackgroundColor : Color = mainBackgroundColor.lighten(15),
-  val buttonBackgroundColor : Color = mainBackgroundColor.lighten(15),
-  val buttonBorderColor : Color = mainFontColor.changeAlpha(0.25),
-  val buttonBorderWidth : Measurement = 1.px,
-)
-
-object NoTextSelectCls : CssName("no-text-select")
-object SelectedCls : CssName("selected")
-object ActiveCls : CssName("active")
-
-fun Color.hover(): Color = if (Css.currentStyle == Css.darkStyle) {
-  this.lighten(15)
-} else {
-  this.darken(15)
-}
-
-object Css {
-  var minified = false
-  var dynamicStyles = mutableMapOf<CssId, ConditionalStyle.() -> Unit>()
-
-  fun CssId.defineCss(conditionalStyle: ConditionalStyle.() -> Unit) {
-    check(!dynamicStyles.containsKey(this)) {
-      "CssId with name ${this.name} already defined!"
-    }
-
-    updateCss(conditionalStyle)
-  }
-
-  private fun CssId.updateCss(conditionalStyle: ConditionalStyle.() -> Unit) {
-    val elementId = this.description()
-    var dynamicStyleElement = document.getElementById(elementId)
-
-    dynamicStyles[this] = conditionalStyle
-
-    if (dynamicStyleElement == null) {
-      dynamicStyleElement = document.createElement("style")
-      dynamicStyleElement.id = elementId
-
-      document.head?.append(dynamicStyleElement)
-    }
-
-    val css = style(conditionalStyle)
-
-    dynamicStyleElement.innerHTML = css.generateCss(minified = false)
-  }
-
-  val darkStyle = StyleDefinition(
-  )
-
-  val lightStyle = StyleDefinition(
-    mainBackgroundColor = hsl(239+180, 50, 15),
-  )
-
-  var currentStyle: StyleDefinition = darkStyle
-
-  fun updateStyle() {
-    for ((cssId, dynStyle) in dynamicStyles) {
-      cssId.apply {
-        updateCss(dynStyle)
-      }
-    }
-  }
-
-  fun switchLayout() {
-    currentStyle = if (currentStyle == darkStyle) {
-      lightStyle
-    } else {
-      darkStyle
-    }
-
-    updateStyle()
-  }
-
-  fun Style.transition() {
-    transition("all 0.5s ease")
-  }
-
-  fun Style.noTextSelect() {
-    plain("-webkit-touch-callout", "none")
-    plain("-webkit-user-select", "none")
-    plain("-moz-user-select", "none")
-    plain("-ms-user-select", "none")
-
-    userSelect(UserSelect.none)
-
-    select("::selection") {
-      background("none")
-    }
-  }
-
-  object GenericCss : CssId("generic") {
-    init {
-      fun generateStyle(): String {
-        val css = style {
-
-        }
-
-        return css.generateCss(minified = minified)
-      }
-    }
-  }
-
-}

src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/CssName.kt

@@ -1,65 +0,0 @@
-package daw.style
-
-import nl.astraeus.css.style.DescriptionProvider
-import nl.astraeus.css.style.cls
-
-private val CAPITAL_LETTER = Regex("[A-Z]")
-
-fun String.hyphenize(): String =
-  replace(CAPITAL_LETTER) {
-    "-${it.value.lowercase()}"
-  }
-
-private val shortId = false
-private var nextCssId = 1
-
-private fun nextShortId(): String {
-  var id = nextCssId++
-  val result = StringBuilder()
-
-  while(id > 0) {
-    val ch = ((id % 26) + 'a'.code).toChar()
-    result.append(ch)
-
-    id /= 26
-  }
-
-  return result.toString()
-}
-
-open class CssName(name: String? = null) : DescriptionProvider {
-  val name: String = if (shortId) {
-    nextShortId()
-  } else if (name != null) {
-    "daw-$name"
-  } else {
-    "daw${this::class.simpleName?.hyphenize() ?: this::class}"
-  }
-
-  override fun description() = name
-}
-
-fun CssName.cls() : DescriptionProvider = cls(this)
-
-open class CssId(name: String) : DescriptionProvider {
-  val name: String = if (shortId) {
-    nextShortId()
-  } else {
-    "daw-$name-css"
-  }
-  override fun description() = name
-
-  override fun equals(other: Any?): Boolean {
-    if (this === other) return true
-    if (other !is CssId) return false
-
-    if (name != other.name) return false
-
-    return true
-  }
-
-  override fun hashCode(): Int {
-    return name.hashCode()
-  }
-
-}