Reversed vertical layout

[josephktcheung]

Description

I'd like to create a reversed vertical isomorphic keyboard such that keys are ordered from high pitch to low pitch, similar to logic pro editor.

Right now KeyboardModel, KeyContainer are internal therefore it's not possible to define a custom layout outside the library.

Proposed Solution

The reversed version should be as simple as reversing pitchesToShow array, perhaps introducing an enum order with case highToLow / lowToHigh to indicate if pitchesToShow should be reversed is enough.

struct VerticalIsomorphic<Content>: View where Content: View {
    enum Order {
        case highToLow // order from high on the top to low at the bottom
        case lowToHigh // order from low on the top to high at the bottom
    }
    let content: (Pitch, Bool) -> Content
    var model: KeyboardModel
    var pitchRange: ClosedRange<Pitch>
    var root: NoteClass
    var scale: Scale
    var order: Order = .lowToHigh

    var pitchesToShow: [Pitch] {
        var pitchArray: [Pitch] = []
        let key = Key(root: root, scale: scale)
        for pitch in pitchRange where pitch.existsNaturally(in: key) {
            pitchArray.append(pitch)
        }
        return Array(order == .lowToHigh ? pitchArray : pitchArray.reverse())
    }

    var body: some View {
        VStack(spacing: 0) {
            ForEach(pitchesToShow, id: \.self) { pitch in
                KeyContainer(model: model,
                             pitch: pitch,
                             content: content)
            }
        }
        .clipShape(Rectangle())
    }
}

Describe Alternatives You've Considered

Fork the library and modify VerticalIsomorphic view

Additional Context

No response

[aure]

Actually I think our way was just wrong. I reversed it to be the way you suggest in latest tag 1.3.4.

[josephktcheung]

@aure,

wow your change is swift! I was justing creating a PR and we get a new release now. Very impressive and thank you very much!

[josephktcheung]

BTW @aure perhaps you could update the demo png in the readme to reflect the latest change as well.

[aure]

meh, no one cares that much to worry about the png until more changes are made.