Refactor MainView and enhance View management

Replaced `MainView` object with a `Views` singleton for better modularity and lazy initialization. Adjusted CSS structure, updated dependencies, and improved FM/AM modulation logic for greater flexibility. Additionally, upgraded Kotlin multiplatform version and added inline source mapping.
This commit is contained in:
2025-03-27 19:33:43 +01:00
parent 60a21bbd79
commit 7fe29916f7
8 changed files with 66 additions and 66 deletions

View File

@@ -9,12 +9,20 @@ import nl.astraeus.vst.chip.view.MainView
import nl.astraeus.vst.chip.ws.WebsocketClient
import nl.astraeus.vst.ui.css.CssSettings
fun main() {
CssSettings.shortId = false
CssSettings.preFix = "vst-chip"
object Views {
val mainView by lazy {
MainView()
}
init {
CssSettings.shortId = false
CssSettings.preFix = "vst"
}
}
fun main() {
Komponent.unsafeMode = UnsafeMode.UNSAFE_SVG_ONLY
Komponent.create(document.body!!, MainView)
Komponent.create(document.body!!, Views.mainView)
Midi.start()

View File

@@ -4,7 +4,7 @@ package nl.astraeus.vst.chip.audio
import nl.astraeus.midi.message.TimedMidiMessage
import nl.astraeus.vst.chip.PatchDTO
import nl.astraeus.vst.chip.view.MainView
import nl.astraeus.vst.chip.Views
import nl.astraeus.vst.chip.view.WaveformView
import org.khronos.webgl.Float32Array
import org.w3c.dom.MessageEvent
@@ -40,7 +40,7 @@ object VstChipWorklet : AudioNode(
0xb0 + midiChannel, 0x47, (value * 127).toInt()
)
}
var fmModFreq = 0.0
var fmModFreq = 1.0
set(value) {
field = value
super.postMessage(
@@ -168,32 +168,32 @@ object VstChipWorklet : AudioNode(
when (knob) {
0x46.toByte() -> {
volume = value / 127.0
MainView.requestUpdate()
Views.mainView.requestUpdate()
}
0x4a.toByte() -> {
dutyCycle = value / 127.0
MainView.requestUpdate()
Views.mainView.requestUpdate()
}
0x40.toByte() -> {
fmModFreq = value / 127.0
MainView.requestUpdate()
Views.mainView.requestUpdate()
}
0x41.toByte() -> {
fmModAmp = value / 127.0
MainView.requestUpdate()
Views.mainView.requestUpdate()
}
0x42.toByte() -> {
amModFreq = value / 127.0
MainView.requestUpdate()
Views.mainView.requestUpdate()
}
0x43.toByte() -> {
amModAmp = value / 127.0
MainView.requestUpdate()
Views.mainView.requestUpdate()
}
}
}

View File

@@ -2,9 +2,9 @@ package nl.astraeus.vst.chip.midi
import kotlinx.browser.window
import nl.astraeus.midi.message.TimedMidiMessage
import nl.astraeus.vst.chip.Views
import nl.astraeus.vst.chip.audio.AudioContextHandler
import nl.astraeus.vst.chip.audio.VstChipWorklet
import nl.astraeus.vst.chip.view.MainView
import org.khronos.webgl.Uint8Array
import org.khronos.webgl.get
@@ -68,7 +68,7 @@ object Midi {
outputs.add(output)
}
MainView.requestUpdate()
Views.mainView.requestUpdate()
},
{ e ->
println("Failed to get MIDI access - $e")

View File

@@ -37,6 +37,7 @@ import nl.astraeus.komp.Komponent
import nl.astraeus.komp.currentElement
import nl.astraeus.midi.message.TimedMidiMessage
import nl.astraeus.midi.message.getCurrentTime
import nl.astraeus.vst.chip.Views
import nl.astraeus.vst.chip.audio.VstChipWorklet
import nl.astraeus.vst.chip.audio.VstChipWorklet.midiChannel
import nl.astraeus.vst.chip.midi.Midi
@@ -61,7 +62,7 @@ object WaveformView: Komponent() {
}
fun onAnimationFrame(time: Double) {
if (MainView.started) {
if (Views.mainView.started) {
VstChipWorklet.postMessage("start_recording")
}
@@ -98,7 +99,7 @@ object WaveformView: Komponent() {
}
}
object MainView : Komponent(), CssName {
class MainView : Komponent() {
private var messages: MutableList<String> = ArrayList()
var started = false
@@ -275,7 +276,7 @@ object MainView : Komponent(), CssName {
value = VstChipWorklet.fmModFreq,
label = "FM Freq",
minValue = 0.0,
maxValue = 1.0,
maxValue = 2.0,
step = 5.0 / 127.0,
width = 100,
height = 120,
@@ -420,18 +421,19 @@ object MainView : Komponent(), 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
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()
private fun css() {
private fun css() {
defineCss {
select("*") {
select("*:before") {
@@ -530,23 +532,23 @@ object MainView : Komponent(), CssName {
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())
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())
}
}
}
}

View File

@@ -4,9 +4,9 @@ package nl.astraeus.vst.chip.ws
import kotlinx.browser.window
import nl.astraeus.vst.chip.PatchDTO
import nl.astraeus.vst.chip.Views
import nl.astraeus.vst.chip.audio.VstChipWorklet
import nl.astraeus.vst.chip.midi.Midi
import nl.astraeus.vst.chip.view.MainView
import org.w3c.dom.MessageEvent
import org.w3c.dom.WebSocket
import org.w3c.dom.events.Event
@@ -90,7 +90,7 @@ object WebsocketClient {
Midi.setInput(patch.midiId, patch.midiName)
VstChipWorklet.load(patch)
MainView.requestUpdate()
Views.mainView.requestUpdate()
}
}
}