Move stuff into base

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

@@ -3,18 +3,24 @@ package nl.astraeus.vst.string
 import kotlinx.browser.document
 import nl.astraeus.komp.Komponent
 import nl.astraeus.komp.UnsafeMode
+import nl.astraeus.vst.string.audio.VstStringWorklet
 import nl.astraeus.vst.string.logger.log
 import nl.astraeus.vst.string.midi.Midi
 import nl.astraeus.vst.string.view.MainView
 import nl.astraeus.vst.string.ws.WebsocketClient
 import nl.astraeus.vst.ui.css.CssSettings
+import nl.astraeus.vst.ui.view.BaseVstView
 
 fun main() {
   CssSettings.shortId = false
   CssSettings.preFix = "vst-chip"
 
   Komponent.unsafeMode = UnsafeMode.UNSAFE_SVG_ONLY
-  Komponent.create(document.body!!, MainView)
+  Komponent.create(document.body!!, BaseVstView("VST Guiter", MainView) {
+    VstStringWorklet.create {
+      WebsocketClient.send("LOAD\n")
+    }
+  })
 
   Midi.start()
 

src/jsMain/kotlin/nl/astraeus/vst/string/audio/AudioContextHandler.kt

@@ -7,4 +7,4 @@ object AudioContextHandler {
 
 
 
-}
+}

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

@@ -18,15 +18,10 @@ import nl.astraeus.css.properties.Display
 import nl.astraeus.css.properties.FlexDirection
 import nl.astraeus.css.properties.FontWeight
 import nl.astraeus.css.properties.JustifyContent
-import nl.astraeus.css.properties.Position
-import nl.astraeus.css.properties.Transform
 import nl.astraeus.css.properties.em
-import nl.astraeus.css.properties.hsla
 import nl.astraeus.css.properties.prc
 import nl.astraeus.css.properties.px
 import nl.astraeus.css.properties.rem
-import nl.astraeus.css.properties.vh
-import nl.astraeus.css.properties.vw
 import nl.astraeus.css.style.Style
 import nl.astraeus.css.style.cls
 import nl.astraeus.komp.HtmlBuilder
@@ -48,7 +43,6 @@ import org.w3c.dom.HTMLSelectElement
 
 object MainView : Komponent(), CssName {
   private var messages: MutableList<String> = ArrayList()
-  var started = false
   val playString = PhysicalStringView(
     PhysicalString(
       sampleRate = 48000,
@@ -70,22 +64,6 @@ object MainView : Komponent(), CssName {
 
   override fun HtmlBuilder.render() {
     div(MainDivCss.name) {
-      if (!started) {
-        div(StartSplashCss.name) {
-          div(StartBoxCss.name) {
-            div(StartButtonCss.name) {
-              +"START"
-              onClickFunction = {
-                VstStringWorklet.create {
-                  started = true
-                  requestUpdate()
-                  WebsocketClient.send("LOAD\n")
-                }
-              }
-            }
-          }
-        }
-      }
       h1 {
         +"VST Guitar"
       }
@@ -175,9 +153,6 @@ object MainView : Komponent(), 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() {
@@ -239,36 +214,6 @@ object MainView : Komponent(), CssName {
           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)

src/jsMain/kotlin/nl/astraeus/vst/string/view/PhysicalStringView.kt

@@ -40,9 +40,7 @@ class PhysicalStringView(
   }
 
   private fun onAnimationFrame(time: Double) {
-    if (MainView.started) {
-      draw()
-    }
+    draw()
 
     window.requestAnimationFrame(::onAnimationFrame)
   }
@@ -89,7 +87,7 @@ class PhysicalStringView(
 
   private fun draw() {
     val ctx = context
-    if (ctx != null) {
+    if (ctx != null && ctx.canvas.isConnected) {
       val width = ctx.canvas.width.toDouble()
       val height = ctx.canvas.height.toDouble()
       val halfHeight = height / 2.0

src/jsMain/kotlin/nl/astraeus/vst/string/view/WaveformView.kt

@@ -18,7 +18,7 @@ object WaveformView : Komponent() {
   }
 
   fun onAnimationFrame(time: Double) {
-    if (MainView.started) {
+    if (VstStringWorklet.recording == null) {
       VstStringWorklet.postMessage("start_recording")
     }
 
@@ -50,6 +50,7 @@ object WaveformView : Komponent() {
             ctx.stroke()
           }
         }
+        VstStringWorklet.recording = null
       }
     }
   }