Revision control
++ // Copyright (C) 2022 The Qt Company Ltd.
++ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
++
++ import QtQuick
++ import QtQuick.Controls
++ import QtQuick.Layouts
++
++ Item {
++ id: editorView
++
++ property alias qmlEditor: qmlEdit
++ property alias vertexEditor: vertEdit
++ property alias fragmentEditor: fragEdit
++ property var currentEditorComponent: tabBarEditors.currentIndex == 0
++ ? qmlEdit.textArea :
++ tabBarEditors.currentIndex == 1
++ ? vertEdit.textArea : fragEdit.textArea
++ property alias qmlText: qmlEdit.text
++ property alias vertexText: vertEdit.text
++ property alias fragmentText: fragEdit.text
++ property bool showLineNumbers: true
++ property bool editable: true
++
++ function showErrorCodeLine() {
++ // UI combines QML error types
++ let tabIndex = (effectManager.effectError.type === 0 || effectManager.effectError.type === 3) ? 0 : effectManager.effectError.type
++ tabIndex = Math.max(0, Math.min(2, tabIndex));
++ tabBarEditors.currentIndex = tabIndex;
++ const codeLine = effectManager.effectError.line;
++ if (tabIndex === 0)
++ qmlEditor.scrollToLine(codeLine);
++ else if (tabIndex === 1)
++ vertexEditor.scrollToLine(codeLine);
++ else
++ fragmentEditor.scrollToLine(codeLine);
++ }
++
++ ColumnLayout {
++ width: parent.width
++ height: parent.height
++ Item {
++ id: tabBarItem
++ Layout.fillWidth: true
++ height: tabBarEditors.height
++ Rectangle {
++ anchors.fill: tabBarItem
++ color: backgroundColor1
++ }
++ TabBar {
++ id: tabBarEditors
++ currentIndex: 2
++ TabButton {
++ id: qmlTabText
++ text: "QML"
++ width: 80
++ opacity: qmlText.length === 0 ? 0.3 : 1.0
++ }
++ TabButton {
++ id: vertexTabText
++ text: "VERT"
++ width: 80
++ opacity: vertexText.length === 0 ? 0.3 : 1.0
++ }
++ TabButton {
++ id: fragTabtext
++ text: "FRAG"
++ width: 80
++ opacity: fragmentText.length === 0 ? 0.3 : 1.0
++ }
++ }
++ Rectangle {
++ anchors.fill: editToolbar
++ color: mainView.backgroundColor1
++ opacity: 0.8
++ }
++ Row {
++ id: editToolbar
++ visible: editorView.editable
++ anchors.right: parent.right
++ height: tabBarEditors.height
++ CustomIconButton {
++ id: autoplayButton
++ anchors.verticalCenter: parent.verticalCenter
++ height: parent.height * 0.8
++ width: height
++ icon: "images/icon_autoplay.png"
++ toggledIcon: "images/icon_autoplay_on.png"
++ description: "Autoplay when the shader changes"
++ toggleButton: true
++ toggled: effectManager.autoPlayEffect
++ onClicked: {
++ effectManager.autoPlayEffect = !effectManager.autoPlayEffect;
++ if (effectManager.autoPlayEffect)
++ updateShaders(true);
++ }
++ }
++ CustomIconButton {
++ id: playButton
++ anchors.verticalCenter: parent.verticalCenter
++ height: parent.height * 0.8
++ width: height
++ icon: "images/icon_play.png"
++ description: "Play the shader"
++ onClicked: {
++ updateShaders(true);
++ }
++ Rectangle {
++ anchors.fill: playButton
++ anchors.margins: 2
++ z: -1
++ color: effectManager.shadersUpToDate ? "transparent" : "#912c2c"
++ radius: width / 2
++ }
++ }
++ CustomIconButton {
++ id: exportButton
++ anchors.verticalCenter: parent.verticalCenter
++ height: parent.height * 0.6
++ width: height
++ icon: "images/icon_export.png"
++ description: "Export the effect"
++ enabled: (effectManager.hasProjectFilename && effectManager.effectError.message === "")
++ onClicked: {
++ mainWindow.exportAction();
++ }
++ }
++ }
++ Row {
++ id: previewToolbar
++ visible: !editToolbar.visible
++ anchors.right: parent.right
++ height: tabBarEditors.height
++ CustomIconButton {
++ id: showQsbButton
++ anchors.verticalCenter: parent.verticalCenter
++ height: parent.height * 0.8
++ width: height * (288 / 128)
++ icon: "images/button_qsb.png"
++ description: "Show QSB Inspector"
++ enabled: (tabBarEditors.currentIndex === 1 || tabBarEditors.currentIndex === 2)
++ onClicked: {
++ if (tabBarEditors.currentIndex === 1)
++ qsbInspectorAction(effectManager.vertexShaderFilename);
++ else
++ qsbInspectorAction(effectManager.fragmentShaderFilename);
++ }
++ }
++ }
++ }
++
++ // Editors
++ Item {
++ id: editorStack
++ Layout.fillWidth: true
++ Layout.fillHeight: true
++ MouseArea {
++ anchors.fill: parent
++ onWheel: {}
++ }
++ CodeEditor {
++ id: qmlEdit
++ anchors.fill: parent
++ showLineNumbers: editorView.showLineNumbers
++ editable: editorView.editable
++ contentType: 1
++ editorIndex: 0
++ visible: tabBarEditors.currentIndex === 0
++ }
++ CodeEditor {
++ id: vertEdit
++ anchors.fill: parent
++ showLineNumbers: editorView.showLineNumbers
++ editable: editorView.editable
++ contentType: 0
++ editorIndex: 1
++ visible: tabBarEditors.currentIndex === 1
++ }
++ CodeEditor {
++ id: fragEdit
++ anchors.fill: parent
++ showLineNumbers: editorView.showLineNumbers
++ editable: editorView.editable
++ contentType: 0
++ editorIndex: 2
++ visible: tabBarEditors.currentIndex === 2
++ }
++ }
++ FindBar {
++ id: findBar
++ show: mainView.showFindBar && editorView.editable
++ }
++ }
++ Rectangle {
++ anchors.fill: parent
++ color: "#000000"
++ opacity: editable ? 0.4 : 0.9
++ z: -1
++ }
++ }