clide/qml/ClideEditor.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import clide.module 1.0

SplitView {
    id: root
    Layout.fillHeight: true
    Layout.fillWidth: true
    orientation: Qt.Vertical

    // The path to the file to show in the text editor.
    // This is updated by a signal caught within ClideProjectView.
    // Initialized by the Default trait for the Rust QML singleton FileSystem.
    required property string filePath;

    // Customized handle to drag between the Editor and the Console.
    handle: Rectangle {
        border.color: SplitHandle.pressed ? RustColors.pressed : SplitHandle.hovered ? RustColors.hovered : RustColors.gutter
        color: SplitHandle.pressed ? RustColors.pressed : SplitHandle.hovered ? RustColors.hovered : RustColors.gutter
        implicitHeight: 8
        radius: 2.5

        // Execute these behaviors when the color is changed.
        Behavior on color {
            ColorAnimation {
                duration: 400
            }
        }
    }
    RowLayout {
        // We use a flickable to synchronize the position of the editor and
        // the line numbers. This is necessary because the line numbers can
        // extend the available height.
        Flickable {
            id: lineNumbers

            Layout.fillHeight: true
            Layout.fillWidth: false

            // Calculate the width based on the logarithmic scale.
            Layout.preferredWidth: fontMetrics.averageCharacterWidth * (Math.floor(Math.log10(textArea.lineCount)) + 1) + 10
            contentY: editorFlickable.contentY
            interactive: false
            visible: true

            Column {
                anchors.fill: parent
                topPadding: 6

                Repeater {
                    id: repeatedLineNumbers

                    // Each line number in the gutter.
                    delegate: Item {
                        required property int index

                        // Calculate the height of each line in the text area.
                        height: textArea.contentHeight / textArea.lineCount
                        width: parent.width

                        Label {
                            id: numbers

                            color: "white"
                            font: textArea.font
                            height: parent.height
                            horizontalAlignment: Text.AlignLeft
                            text: parent.index + 1
                            verticalAlignment: Text.AlignVCenter
                            width: parent.width
                        }
                        Rectangle {
                            id: indicator

                            anchors.left: numbers.right
                            color: RustColors.linenumber
                            height: parent.height
                            width: 1
                        }
                    }
                    // TODO: Bug where text wrapping shows as new line number.
                    model: textArea.lineCount
                }
            }
        }
        Flickable {
            id: editorFlickable

            Layout.fillHeight: true
            Layout.fillWidth: true
            boundsBehavior: Flickable.StopAtBounds
            height: 650

            ScrollBar.horizontal: MyScrollBar {
            }
            ScrollBar.vertical: MyScrollBar {
            }
            TextArea.flickable: TextArea {
                id: textArea

                color: RustColors.editor_text
                focus: true
                persistentSelection: true
                selectByMouse: true
                // selectedTextColor: RustColors.editor_highlighted_text
                // selectionColor: RustColors.editor_highlight
                textFormat: Qt.AutoText
                wrapMode: TextArea.Wrap
                text: FileSystem.readFile(root.filePath)

                background: Rectangle {
                    color: RustColors.editor_background
                }

                onLinkActivated: function (link) {
                    Qt.openUrlExternally(link);
                }

                // TODO: Handle saving
                // Component.onCompleted: {
                //     if (Qt.application.arguments.length === 2)
                //         textDocument.source = "file:" + Qt.application.arguments[1]
                //     else
                //         textDocument.source = "qrc:/texteditor.html"
                // }
                // textDocument.onStatusChanged: {
                //     // a message lookup table using computed properties:
                //     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer
                //     const statusMessages = {
                //         [ TextDocument.ReadError ]: qsTr("Failed to load “%1”"),
                //         [ TextDocument.WriteError ]: qsTr("Failed to save “%1”"),
                //         [ TextDocument.NonLocalFileError ]: qsTr("Not a local file: “%1”"),
                //     }
                //     const err = statusMessages[textDocument.status]
                //     if (err) {
                //         errorDialog.text = err.arg(textDocument.source)
                //         errorDialog.open()
                //     }
                // }
            }

            FontMetrics {
                id: fontMetrics

                font: textArea.font
            }
        }
    }
    TextArea {
        id: areaConsole

        height: 100
        placeholderText: qsTr("Placeholder for bash terminal.")
        placeholderTextColor: "white"
        readOnly: true
        wrapMode: TextArea.Wrap
        background: Rectangle {
            color: RustColors.editor_background
            implicitHeight: 100
            // border.color: control.enabled ? RustColors.active : RustColors.inactive
        }
    }

    // We use an inline component to customize the horizontal and vertical
    // scroll-bars. This is convenient when the component is only used in one file.
    component MyScrollBar: ScrollBar {
        id: scrollBar

        // Scroll bar gutter
        background: Rectangle {
            implicitHeight: scrollBar.interactive ? 8 : 4
            implicitWidth: scrollBar.interactive ? 8 : 4
            color: RustColors.scrollbar_gutter

            // Fade the scrollbar gutter when inactive.
            opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.2
            Behavior on opacity {
                OpacityAnimator {
                    duration: 500
                }
            }
        }

        // Scroll bar
        contentItem: Rectangle {
            implicitHeight: scrollBar.interactive ? 8 : 4
            implicitWidth: scrollBar.interactive ? 8 : 4

            // If we don't need a scrollbar, fallback to the gutter color.
            // If the scrollbar is required change it's color based on activity.
            color: scrollBar.size < 1.0 ? scrollBar.active ? RustColors.scrollbar_active : RustColors.scrollbar : RustColors.scrollbar_gutter
            // Smooth transition between color changes based on the state above.
            Behavior on color {
                ColorAnimation {
                    duration: 1000
                }
            }
            // Fade the scrollbar when inactive.
            opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.35
            Behavior on opacity {
                OpacityAnimator {
                    duration: 500
                }
            }
        }
    }
}