diff --git a/src/jsMain/kotlin/nl/astraeus/vst/ui/components/KeyboardComponent.kt b/src/jsMain/kotlin/nl/astraeus/vst/ui/components/KeyboardComponent.kt index a69b99c..db787fe 100644 --- a/src/jsMain/kotlin/nl/astraeus/vst/ui/components/KeyboardComponent.kt +++ b/src/jsMain/kotlin/nl/astraeus/vst/ui/components/KeyboardComponent.kt @@ -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()