v. 1.2.0

Upgrade knob interaction logic and dependency versions.

Reworked knob value adjustment to use precise mouse coordinates via `setValueByMouseCoords`. Improved user interaction by enhancing activation handling and CSS styling. Updated project dependencies, removed unused packages, and set version to 1.2.0 for compatibility and feature stability.

build.gradle.kts

@@ -9,7 +9,7 @@ plugins {
 }
 
 group = "nl.astraeus"
-version = "1.1.3"
+version = "1.2.0"
 
 repositories {
     mavenCentral()
@@ -37,7 +37,6 @@ kotlin {
         val commonMain by getting {
             dependencies {
                 implementation("nl.astraeus:kotlin-css-generator:1.0.10")
-                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.0")
             }
         }
         val jsMain by getting {
@@ -52,7 +51,8 @@ kotlin {
         }
         val jvmMain by getting {
             dependencies {
-                //base
+                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.0")
+
                 implementation("io.undertow:undertow-core:2.3.14.Final")
                 implementation("io.undertow:undertow-websockets-jsr:2.3.14.Final")
                 implementation("org.jboss.xnio:xnio-nio:3.8.16.Final")
@@ -149,4 +149,8 @@ signing {
 
 tasks.withType<PublishToMavenRepository> {
     dependsOn(tasks.withType<Sign>())
+}
+
+tasks.withType<PublishToMavenLocal> {
+    dependsOn(tasks.withType<Sign>())
 }

kotlin-js-store/yarn.lock

@@ -52,11 +52,6 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@js-joda/core@3.2.0":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@js-joda/core/-/core-3.2.0.tgz#3e61e21b7b2b8a6be746df1335cf91d70db2a273"
-  integrity sha512-PMqgJ0sw5B7FKb2d5bWYIoxjri+QlW/Pys7+Rw82jSH0QN3rB05jZ/VrrsUdh1w4+i2kw9JOejXGq/KhDOX7Kg==
-
 "@socket.io/component-emitter@~3.1.0":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"

src/jsMain/kotlin/nl/astraeus/vst/ui/components/BaseKnobComponent.kt

@@ -2,6 +2,8 @@ package nl.astraeus.vst.ui.components
 
 import kotlinx.html.classes
 import kotlinx.html.js.onMouseDownFunction
+import kotlinx.html.js.onMouseLeaveFunction
+import kotlinx.html.js.onMouseMoveFunction
 import kotlinx.html.js.onMouseUpFunction
 import kotlinx.html.js.onWheelFunction
 import kotlinx.html.org.w3c.dom.events.Event
@@ -12,11 +14,14 @@ import nl.astraeus.css.properties.Color
 import nl.astraeus.css.properties.Position
 import nl.astraeus.css.properties.TextAlign
 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.style.cls
 import nl.astraeus.komp.HtmlBuilder
 import nl.astraeus.komp.Komponent
+import nl.astraeus.komp.currentElement
 import nl.astraeus.vst.ui.css.ActiveCls
 import nl.astraeus.vst.ui.css.Css
 import nl.astraeus.vst.ui.css.Css.defineCss
@@ -25,6 +30,8 @@ import nl.astraeus.vst.ui.css.CssName
 import nl.astraeus.vst.ui.util.arc
 import nl.astraeus.vst.ui.util.height
 import nl.astraeus.vst.ui.util.width
+import org.w3c.dom.Element
+import org.w3c.dom.HTMLElement
 import org.w3c.dom.events.MouseEvent
 import org.w3c.dom.events.WheelEvent
 import kotlin.math.PI
@@ -65,10 +72,15 @@ open class BaseKnobComponent(
   val actualMaximumValue = valueToActual(maxValue)
   var actualValue = valueToActual(value)
 
-  var activated = false
+  var activated: Boolean = false
+    set(value) {
+      field = value
+      requestUpdate()
+    }
   var mouseX = 0.0
   var mouseY = 0.0
   var startValue = 0.0
+  var knobElement: Element? = null
 
   private fun getMiddleX() = width / 2
   private fun getMiddleY() = ((height - 16) / 2) + 16
@@ -77,6 +89,11 @@ open class BaseKnobComponent(
   override fun HtmlBuilder.render() {
     span(KnobCls.name) {
       style = "width: ${width}px; height: ${height}px"
+      knobElement = currentElement()
+
+      if (activated) {
+        classes += ActiveCls.name
+      }
 
       svg(KnobSvgCls.name) {
         if (activated) {
@@ -87,7 +104,7 @@ open class BaseKnobComponent(
         height(height)
 
         val actToVal = actualToValue(actualValue)
-        console.log("actualValue", actualValue, "actToVal", actToVal)
+
         val middle = (
             ((ANGLE_RANGE_DEG.toFloat() *
                 (actToVal - minValue)) /
@@ -159,17 +176,27 @@ open class BaseKnobComponent(
       onMouseDownFunction = {
         if (it is MouseEvent) {
           activated = true
-          setValueByMouseCoords(it, minValue, maxValue, callback)
+          setValueByMouseCoords(it, callback)
+        }
+      }
+
+      onMouseMoveFunction = {
+        if (activated && it is MouseEvent) {
+          setValueByMouseCoords(it, callback)
         }
       }
 
       onMouseUpFunction = {
         if (it is MouseEvent) {
           activated = false
-          requestUpdate()
         }
       }
 
+      onMouseLeaveFunction = {
+        if (it is MouseEvent) {
+          activated = false
+        }
+      }
     }
   }
 
@@ -200,12 +227,15 @@ open class BaseKnobComponent(
 
   private fun setValueByMouseCoords(
     it: MouseEvent,
-    minValue: Double = 0.0,
-    maxValue: Double = 5.0,
     callback: (value: Double) -> Unit
   ) {
-    val deltaX = it.offsetX - getMiddleX()
-    val deltaY = it.offsetY - getMiddleY()
+    val target = knobElement as? HTMLElement ?: error("Not in an HTMLElement?")
+    val rect = target.getBoundingClientRect();
+    val mouseX = it.clientX - rect.left;
+    val mouseY = it.clientY - rect.top;
+
+    val deltaX = mouseX - getMiddleX()
+    val deltaY = mouseY - getMiddleY()
 
     var angle = atan2(deltaX, deltaY)
 
@@ -236,9 +266,9 @@ open class BaseKnobComponent(
       angle < PI / 2.0 -> newValue = maxValue
     }
 
-    actualValue = newValue
+    actualValue = valueToActual(newValue)
 
-    callback(newValue.toDouble())
+    callback(newValue)
 
     requestUpdate()
 
@@ -290,7 +320,10 @@ open class BaseKnobComponent(
           position(Position.relative)
           margin(5.px)
 
-          and(cls(ActiveCls)) {}
+          and(cls(ActiveCls)) {
+            backgroundColor(hsla(178, 70, 55, 0.1))
+            borderRadius(0.5.rem)
+          }
 
           select(cls(KnobSvgCls)) {
             plain("stroke", "none")

src/jvmMain/kotlin/nl/astraeus/vst/base/web/RequestHandler.kt

@@ -7,7 +7,7 @@ import io.undertow.server.handlers.PathHandler
 import io.undertow.server.handlers.resource.PathResourceManager
 import io.undertow.server.handlers.resource.ResourceHandler
 import io.undertow.server.session.Session
-import io.undertow.server.session.SessionConfig
+import io.undertow.server.session.SessionCookieConfig
 import io.undertow.server.session.SessionManager
 import io.undertow.util.Headers
 import io.undertow.websockets.WebSocketConnectionCallback
@@ -22,6 +22,14 @@ import nl.astraeus.vst.base.db.PatchDao
 import nl.astraeus.vst.base.db.PatchEntity
 import java.nio.file.Paths
 
+object VstSessionConfig {
+  val config = SessionCookieConfig()
+
+  init {
+    config.setCookieName("VstCookie")
+  }
+}
+
 class WebsocketHandler(
   val session: Session?
 ) : AbstractReceiveListener(), WebSocketConnectionCallback {
@@ -81,9 +89,8 @@ class WebsocketHandler(
 object WebsocketConnectHandler : HttpHandler {
   override fun handleRequest(exchange: HttpServerExchange) {
     val sessionManager = exchange.getAttachment(SessionManager.ATTACHMENT_KEY)
-    val sessionConfig = exchange.getAttachment(SessionConfig.ATTACHMENT_KEY)
 
-    val httpSession: Session? = sessionManager.getSession(exchange, sessionConfig)
+    val httpSession: Session? = sessionManager.getSession(exchange, VstSessionConfig.config)
 
     websocket(WebsocketHandler(httpSession)).handleRequest(exchange)
   }
@@ -98,11 +105,10 @@ class PatchHandler(
     if (exchange.requestPath.startsWith("/patch/")) {
       val patchId = exchange.requestPath.substring(7)
       val sessionManager = exchange.getAttachment(SessionManager.ATTACHMENT_KEY)
-      val sessionConfig = exchange.getAttachment(SessionConfig.ATTACHMENT_KEY)
-      var httpSession: Session? = sessionManager.getSession(exchange, sessionConfig)
+      var httpSession: Session? = sessionManager.getSession(exchange, VstSessionConfig.config)
 
       if (httpSession == null) {
-        httpSession = sessionManager.createSession(exchange, sessionConfig)
+        httpSession = sessionManager.createSession(exchange, VstSessionConfig.config)
       }
       httpSession?.setAttribute("html-session", VstSession(patchId))
 

src/jvmMain/kotlin/nl/astraeus/vst/base/web/UndertowServer.kt

@@ -32,4 +32,4 @@ object UndertowServer {
     server?.start()
   }
 
-}
+}

src/wasmJsMain/kotlin/nl/astraeus/vst/ui/components/BaseKnobComponent.kt

@@ -80,7 +80,7 @@ open class BaseKnobComponent(
         height(height)
 
         val actToVal = actualToValue(actualValue)
-        println("actualValue: $actualValue, actToVal: $actToVal")
+
         val middle = (
             ((ANGLE_RANGE_DEG.toFloat() *
                 (actToVal - minValue)) /