[ui] ScriptEditor: Updated Script Editor layout

ScriptEditor is now part of a ColumnLayout in an MSplitView allowing more control over what is being viewed.

meshroom/ui/qml/GraphEditor/ScriptEditor.qml

@@ -12,19 +12,49 @@ import Qt.labs.platform 1.0 as Platform
 Item {
     id: root
 
-    function formatInput(text) {
+    function replace(text, string, replacement) {
-        var lines = text.split("\n")
+        /*
-        for (let i = 0; i < lines.length; ++i) {
+         * Replaces all occurences of the string in the text
-            lines[i] = ">>> " + lines[i]
+         * @param text - overall text
-        }
+         * @param string - the string to be replaced in the text
-        return lines.join("\n")
+         * @param replacement - the replacement of the string
+         */
+        // Split with the string
+        let lines = text.split(string)
+        // Return the overall text joined with the replacement
+        return lines.join(replacement)
     }
 
-    function processScript() {
+    function formatInput(text) {
-        output.clear()
+        /*
-        var ret = ScriptEditorManager.process(input.text)
+         * Formats the text to be displayed as the input script executed
-        output.text = formatInput(input.text) + "\n\n" + ret
+         */
-        input.clear()
+
+        // Replace the text to be RichText Supportive
+        return "<font color=#868686>" + replace(text, "\n", "<br>") + "</font><br><br>"
+    }
+
+    function formatOutput(text) {
+        /*
+         * Formats the text to be displayed as the result of the script executed
+         */
+
+        // Replace the text to be RichText Supportive
+        return "<font color=#49a1f3>" + "Result: " + replace(text, "\n", "<br>") + "</font><br><br>"
+    }
+
+    function processScript(text = "") {
+        // Use either the provided/selected or the entire script
+        text = text || input.text
+
+        // Execute the process and fetch back the return for it
+        var ret = ScriptEditorManager.process(text)
+
+        // Append the input script and the output result to the output console
+        output.append(formatInput(text) + formatOutput(ret))
+
+        // Save the entire script after executing the commands
+        ScriptEditorManager.saveScript(input.text)
     }
 
     function loadScript(fileUrl) {
@@ -83,12 +113,8 @@ Item {
         RowLayout {
             Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
 
-            Item {
-                Layout.fillWidth: true
-            }
-
             MaterialToolButton {
-                font.pointSize: 13
+                font.pointSize: 18
                 text: MaterialIcons.download
                 ToolTip.text: "Load Script"
 
@@ -98,7 +124,7 @@ Item {
             }
 
             MaterialToolButton {
-                font.pointSize: 13
+                font.pointSize: 18
                 text: MaterialIcons.upload
                 ToolTip.text: "Save Script"
 
@@ -113,7 +139,7 @@ Item {
 
             MaterialToolButton {
                 id: executeButton
-                font.pointSize: 13
+                font.pointSize: 18
                 text: MaterialIcons.slideshow
                 ToolTip.text: "Execute Script"
 
@@ -123,7 +149,7 @@ Item {
             }
 
             MaterialToolButton {
-                font.pointSize: 13
+                font.pointSize: 18
                 text: MaterialIcons.cancel_presentation
                 ToolTip.text: "Clear Output Window"
 
@@ -137,7 +163,7 @@ Item {
             }
 
             MaterialToolButton {
-                font.pointSize: 13
+                font.pointSize: 18
                 text: MaterialIcons.history
                 ToolTip.text: "Get Previous Script"
 
@@ -152,7 +178,7 @@ Item {
             }
 
             MaterialToolButton {
-                font.pointSize: 13
+                font.pointSize: 18
                 text: MaterialIcons.update
                 ToolTip.text: "Get Next Script"
 
@@ -167,7 +193,7 @@ Item {
             }
 
             MaterialToolButton {
-                font.pointSize: 13
+                font.pointSize: 18
                 text: MaterialIcons.backspace
                 ToolTip.text: "Clear History"
 
@@ -183,31 +209,50 @@ Item {
             }
         }
 
-        RowLayout {
+        MSplitView {
-            Label {
+            id: topBottomSplit
-                text: "Input"
-                font.bold: true
-                horizontalAlignment: Text.AlignHCenter
-                Layout.fillWidth: true
-            }
-
-            Label {
-                text: "Output"
-                font.bold: true
-                horizontalAlignment: Text.AlignHCenter
-                Layout.fillWidth: true
-            }
-        }
-
-        RowLayout {
-            Layout.fillWidth: true
             Layout.fillHeight: true
-            width: root.width
+            Layout.fillWidth: true
 
+            orientation: Qt.Vertical
+        
+            // Output Text Area -- Shows the output for the executed script(s)
+            Rectangle {
+                id: outputArea
+
+                // Has a minimum height
+                SplitView.minimumHeight: 80
+
+                color: palette.base
+
+                Flickable {
+                    width: parent.width
+                    height: parent.height
+                    contentWidth: width
+                    contentHeight: ( output.lineCount + 5 ) * output.font.pixelSize // + 5 lines for buffer to be scrolled and visibility
+
+                    ScrollBar.vertical: MScrollBar {}
+
+                    TextArea.flickable: TextArea {
+                        id: output
+
+                        readOnly: true
+                        selectByMouse: true
+                        padding: 0
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        wrapMode: Text.WordWrap
+
+                        textFormat: Text.RichText
+                    }
+                }
+            }
+
+            // Input Text Area -- Holds the input scripts to be executed
             Rectangle {
                 id: inputArea
-                Layout.fillHeight: true
+
-                Layout.fillWidth: true
+                SplitView.fillHeight: true
 
                 color: palette.base
 
@@ -254,7 +299,7 @@ Item {
                     width: parent.width
                     height: parent.height
                     contentWidth: width
-                    contentHeight: height
+                    contentHeight: ( input.lineCount + 5 ) * input.font.pixelSize // + 5 lines for buffer to be scrolled and visibility
 
                     anchors.left: lineNumbers.right
                     anchors.top: parent.top
@@ -266,13 +311,8 @@ Item {
                     TextArea.flickable: TextArea {
                         id: input
 
-                        text: {
+                        text: ScriptEditorManager.loadLastScript()
-                            var str = "from meshroom.ui import uiInstance\n\n"
+
-                            str += "graph = uiInstance.activeProject.graph\n"
-                            str += "for node in graph.nodes:\n"
-                            str += "    print(node.name)"
-                            return str
-                        }
                         font: lineNumbers.textMetrics.font
                         Layout.fillHeight: true
                         Layout.fillWidth: true
@@ -287,7 +327,7 @@ Item {
 
                         Keys.onPressed: function(event) {
                             if ((event.key === Qt.Key_Enter || event.key === Qt.Key_Return) && event.modifiers === Qt.ControlModifier) {
-                                root.processScript()
+                                root.processScript(input.selectedText)
                             }
                         }
                     }
@@ -299,33 +339,6 @@ Item {
                     }
                 }
             }
-            
-            Rectangle {
-                id: outputArea
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-
-                color: palette.base
-
-                Flickable {
-                    width: parent.width
-                    height: parent.height
-                    contentWidth: width
-                    contentHeight: height
-
-                    ScrollBar.vertical: MScrollBar {}
-
-                    TextArea.flickable: TextArea {
-                        id: output
-
-                        readOnly: true
-                        selectByMouse: true
-                        padding: 0
-                        Layout.fillHeight: true
-                        Layout.fillWidth: true
-                    }
-                }
-            }
         }
     }
 }