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:
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user