v. 1.1.3

Implement mouse coordinate-based knob value adjustment.

Added `setValueByMouseCoords` to calculate knob values derived from mouse coordinates using angles. Replaced obsolete mouse delta logic with the new approach for better precision and interaction. Upgraded dependencies and project configurations, including the Kotlin version, for enhanced compatibility and stability.

build.gradle.kts

@@ -1,3 +1,7 @@
+@file:OptIn(ExperimentalKotlinGradlePluginApi::class)
+
+import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
+
 plugins {
     kotlin("multiplatform") version "2.1.0"
     `maven-publish`
@@ -33,7 +37,7 @@ kotlin {
         val commonMain by getting {
             dependencies {
                 implementation("nl.astraeus:kotlin-css-generator:1.0.10")
-                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.4.0")
+                implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.0")
             }
         }
         val jsMain by getting {
@@ -49,7 +53,6 @@ kotlin {
         val jvmMain by getting {
             dependencies {
                 //base
-
                 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")

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

@@ -1,6 +1,8 @@
 package nl.astraeus.vst.ui.components
 
 import kotlinx.html.classes
+import kotlinx.html.js.onMouseDownFunction
+import kotlinx.html.js.onMouseUpFunction
 import kotlinx.html.js.onWheelFunction
 import kotlinx.html.org.w3c.dom.events.Event
 import kotlinx.html.span
@@ -26,6 +28,7 @@ import nl.astraeus.vst.ui.util.width
 import org.w3c.dom.events.MouseEvent
 import org.w3c.dom.events.WheelEvent
 import kotlin.math.PI
+import kotlin.math.atan2
 import kotlin.math.max
 import kotlin.math.min
 
@@ -86,10 +89,10 @@ open class BaseKnobComponent(
         val actToVal = actualToValue(actualValue)
         console.log("actualValue", actualValue, "actToVal", actToVal)
         val middle = (
-              ((ANGLE_RANGE_DEG.toFloat() *
-                  (actToVal - minValue)) /
-                  (maxValue - minValue)
-              + START_ANGLE_DEG.toFloat()).toInt()
+            ((ANGLE_RANGE_DEG.toFloat() *
+                (actToVal - minValue)) /
+                (maxValue - minValue)
+                + START_ANGLE_DEG.toFloat()).toInt()
             )
 
         val middleX = getMiddleX()
@@ -153,30 +156,20 @@ open class BaseKnobComponent(
 
       onWheelFunction = ::wheelFunction
 
-/*      onMouseDownFunction = {
+      onMouseDownFunction = {
         if (it is MouseEvent) {
           activated = true
-          mouseX = it.clientX.toDouble()
-          mouseY = it.clientY.toDouble()
-          startValue = actualValue
-
-          mainView.globalMouseListener = { me ->
-            if (activated && me.buttons == 1.toShort()) {
-              setValueByMouseDelta(me, actualMinimumValue, actualMaximumValue, callback)
-            }
-          }
-
-          requestUpdate()
+          setValueByMouseCoords(it, minValue, maxValue, callback)
         }
       }
 
       onMouseUpFunction = {
         if (it is MouseEvent) {
           activated = false
-          mainView.globalMouseListener = null
           requestUpdate()
         }
-      }*/
+      }
+
     }
   }
 
@@ -205,6 +198,53 @@ 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()
+
+    var angle = atan2(deltaX, deltaY)
+
+    angle = if (angle < 0) {
+      -angle
+    } else {
+      PI * 2.0 - angle
+    }
+
+    angle += PI / 2.0
+
+    if (angle > PI * 2.0) {
+      angle -= PI * 2.0
+    }
+
+    var newValue = minValue
+
+    when {
+      angle > START_ANGLE -> newValue =
+        minValue + ((maxValue - minValue) / ANGLE_RANGE * (angle - START_ANGLE)).toFloat()
+
+      angle < END_ANGLE -> {
+        val calcAngle = angle + PI * 2.0
+        newValue =
+          minValue + ((maxValue - minValue) / ANGLE_RANGE * (calcAngle - START_ANGLE)).toFloat()
+      }
+
+      angle < PI / 2.0 -> newValue = maxValue
+    }
+
+    actualValue = newValue
+
+    callback(newValue.toDouble())
+
+    requestUpdate()
+
+    it.preventDefault()
+  }
+
   private fun setValueByMouseDelta(
     it: MouseEvent,
     minValue: Double = 0.0,
@@ -213,7 +253,7 @@ open class BaseKnobComponent(
   ) {
     val deltaX = it.clientX.toDouble() - mouseX
     val deltaY = it.clientY.toDouble() - mouseY
-    var length = - deltaX + deltaY
+    var length = -deltaX + deltaY
 
     if (it.offsetX < mouseX || it.offsetY < mouseY) {
       length = -length