From 05764ec5882522f0cb4ce0f6394d3f869aa15f5b Mon Sep 17 00:00:00 2001 From: rnentjes Date: Thu, 27 Jun 2024 12:32:17 +0200 Subject: [PATCH] Use vst-ui-base --- build.gradle.kts | 7 +- .../kotlin/nl/astraeus/vst/chip/Main.kt | 8 +- .../nl/astraeus/vst/chip/view/MainView.kt | 54 ++++---- .../nl/astraeus/vst/chip/view/css/Css.kt | 115 ------------------ .../nl/astraeus/vst/chip/view/css/CssName.kt | 65 ---------- 5 files changed, 41 insertions(+), 208 deletions(-) delete mode 100644 src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/Css.kt delete mode 100644 src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/CssName.kt diff --git a/build.gradle.kts b/build.gradle.kts index 85d618d..7ff896b 100644 --- a/build.gradle.kts +++ b/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") } } diff --git a/src/jsMain/kotlin/nl/astraeus/vst/chip/Main.kt b/src/jsMain/kotlin/nl/astraeus/vst/chip/Main.kt index 5a31583..6692ed0 100644 --- a/src/jsMain/kotlin/nl/astraeus/vst/chip/Main.kt +++ b/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() diff --git a/src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt b/src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt index a3c73bc..b3eb1e7 100644 --- a/src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt +++ b/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 = 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() { } } } - } + } diff --git a/src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/Css.kt b/src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/Css.kt deleted file mode 100644 index 40b9709..0000000 --- a/src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/Css.kt +++ /dev/null @@ -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 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) - } - } - } - -} diff --git a/src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/CssName.kt b/src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/CssName.kt deleted file mode 100644 index 9c69b18..0000000 --- a/src/jsMain/kotlin/nl/astraeus/vst/chip/view/css/CssName.kt +++ /dev/null @@ -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() - } - -}