Use vst-ui-base

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(MainViewCss.StartBoxCss.name) {
-            div(MainViewCss.StartButtonCss.name) {
+        div(StartSplashCss.name) {
+          div(StartBoxCss.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 ActiveCss : CssName()
-    object ButtonCss : CssName()
-    object NoteBarCss : CssName()
-    object StartSplashCss : CssName()
-    object StartBoxCss : CssName()
-    object StartButtonCss : CssName()
+  object MainDivCss : CssName
+  object ActiveCss : CssName
+  object ButtonCss : CssName
+  object NoteBarCss : CssName
+  object StartSplashCss : CssName
+  object StartBoxCss : CssName
+  object StartButtonCss : CssName
 
-    init {
+  private fun css() {
       defineCss {
         select("*") {
           select("*:before") {
@@ -268,6 +274,6 @@ object MainView : Komponent() {
         }
       }
     }
-  }
+
 
 }