Revision control
Copy as Markdown
// 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
}
}