Refactor KeyboardComponent key rendering logic

Extracted white and black key rendering into separate `renderWhiteKeys` and `renderBlackKeys` functions for improved readability and modularity. Simplified drawing logic by delegating key rendering to these helper functions.
This commit is contained in:
2025-06-07 11:57:17 +02:00
parent 5c16b57ae9
commit 9c9962d7db

View File

@@ -1,5 +1,6 @@
package nl.astraeus.vst.ui.components
import kotlinx.html.SVG
import kotlinx.html.div
import kotlinx.html.js.onMouseDownFunction
import kotlinx.html.js.onMouseLeaveFunction
@@ -196,37 +197,47 @@ class KeyboardComponent(
}
// Draw white keys
for (i in 0 until WHITE_KEYS_PER_OCTAVE) {
val midiNote = whiteKeys[i] + getOctaveOffset()
val isPressed = pressedNotes.contains(midiNote)
rect(
i * whiteKeyWidth,
0,
whiteKeyWidth,
keyboardHeight,
0,
if (isPressed) WhiteKeyPressedCls.name else WhiteKeyCls.name
)
}
this.renderWhiteKeys()
// Draw black keys
for (i in 0 until BLACK_KEYS_PER_OCTAVE) {
val midiNote = blackKeys[i] + getOctaveOffset()
val isPressed = pressedNotes.contains(midiNote)
rect(
blackKeyPositions[i],
0,
blackKeyWidth,
blackKeyHeight,
0,
if (isPressed) BlackKeyPressedCls.name else BlackKeyCls.name
)
}
this.renderBlackKeys()
}
}
}
}
// Render white keys
private fun SVG.renderWhiteKeys() {
for (i in 0 until WHITE_KEYS_PER_OCTAVE) {
val midiNote = whiteKeys[i] + getOctaveOffset()
val isPressed = pressedNotes.contains(midiNote)
rect(
i * whiteKeyWidth,
0,
whiteKeyWidth,
keyboardHeight,
0,
if (isPressed) WhiteKeyPressedCls.name else WhiteKeyCls.name
)
}
}
// Render black keys
private fun SVG.renderBlackKeys() {
for (i in 0 until BLACK_KEYS_PER_OCTAVE) {
val midiNote = blackKeys[i] + getOctaveOffset()
val isPressed = pressedNotes.contains(midiNote)
rect(
blackKeyPositions[i],
0,
blackKeyWidth,
blackKeyHeight,
0,
if (isPressed) BlackKeyPressedCls.name else BlackKeyCls.name
)
}
}
companion object : CssId("keyboard") {
// CSS class names
object KeyboardCls : CssName()