Add ValueMonitor component

Author: adazem009

src/CMakeLists.txt

@@ -8,6 +8,9 @@ qt_add_qml_module(scratchcpp-render
     OUTPUT_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}/ScratchCPP/Render
     QML_FILES
         ProjectPlayer.qml
+    RESOURCES
+        internal/ValueMonitor.qml
+	internal/MonitorSlider.qml
     SOURCES
         global.h
 	projectloader.cpp

src/internal/MonitorSlider.qml

@@ -0,0 +1,75 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Material
+
+// NOTE: All the values here make monitor sliders look exactly
+// like on Scratch, so be careful when doing any changes.
+Slider {
+    id: control
+    property bool discrete: false
+
+    QtObject {
+        id: priv
+        readonly property color bgColor: Qt.rgba(0.94, 0.94, 0.94, 1)
+        readonly property color currentBgColor: control.pressed ? Qt.rgba(0.96, 0.96, 0.96, 1) : (hoverHandler.hovered ? Qt.darker(bgColor, 1.28) : bgColor)
+
+        readonly property color bgBorderColor: Qt.rgba(0.7, 0.7, 0.7, 1)
+        readonly property color currentBgBorderColor: control.pressed ? Qt.rgba(0.77, 0.77, 0.77, 1) : (hoverHandler.hovered ? Qt.darker(bgBorderColor, 1.28) : bgBorderColor)
+
+        readonly property color sliderColor: Qt.rgba(0, 0.46, 1, 1)
+        readonly property color currentSliderColor: control.pressed ? Qt.rgba(0.22, 0.58, 1, 1) : (hoverHandler.hovered ? Qt.darker(sliderColor, 1.28) : sliderColor)
+
+        readonly property color positionBorderColor: Qt.rgba(0.21, 0.46, 0.75, 1)
+        readonly property color currentPositionBorderColor: control.pressed ? Qt.rgba(0.37, 0.56, 0.79, 1) : (hoverHandler.hovered ? Qt.darker(positionBorderColor, 1.28) : positionBorderColor)
+    }
+
+    stepSize: discrete ? 1 : 0
+    snapMode: Slider.SnapAlways
+    implicitWidth: 119
+    implicitHeight: 16
+    leftPadding: -4
+    rightPadding: -4
+    topPadding: -1
+    bottomPadding: 0
+    activeFocusOnTab: false
+    hoverEnabled: true
+
+    background: Rectangle {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 200
+        implicitHeight: 7.5
+        width: control.availableWidth
+        height: implicitHeight
+        radius: 6
+        color: priv.currentBgColor
+        border.color: priv.currentBgBorderColor
+
+        Rectangle {
+            width: control.visualPosition * (parent.width - handle.width) + handle.width
+            height: parent.height
+            color: priv.currentSliderColor
+            border.color: priv.currentPositionBorderColor
+            radius: 6
+        }
+    }
+
+    handle: Rectangle {
+        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 15
+        implicitHeight: 15
+        radius: 7
+        color: control.pressed ? priv.currentSliderColor : (handleHoverHandler.hovered ? priv.currentSliderColor : priv.sliderColor)
+
+        HoverHandler {
+            id: handleHoverHandler
+        }
+    }
+
+    HoverHandler {
+        id: hoverHandler
+    }
+}

src/internal/ValueMonitor.qml

@@ -0,0 +1,107 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Layouts
+import ScratchCPP.Render
+
+// NOTE: All the values here make monitors look exactly
+// like on Scratch, so be careful when doing any changes.
+Rectangle {
+    property ValueMonitorModel model: null
+
+    color: model ? (model.mode === ValueMonitorModel.Large ? model.color : priv.bgColor) : priv.bgColor
+    border.color: Qt.rgba(0.765, 0.8, 0.85, 1)
+    radius: 5
+    width: layout.implicitWidth + priv.horizontalMargins * 2
+    height: layout.implicitHeight + priv.verticalMargins * 2
+    visible: model ? model.visible : true
+
+    QtObject {
+        id: priv
+        readonly property int horizontalMargins: 9
+        readonly property double verticalMargins: 2.5
+        readonly property color bgColor: Qt.rgba(0.9, 0.94, 1, 1)
+    }
+
+    ColumnLayout {
+        id: layout
+        anchors.leftMargin: priv.horizontalMargins
+        anchors.rightMargin: priv.horizontalMargins
+        anchors.topMargin: priv.verticalMargins
+        anchors.bottomMargin: priv.verticalMargins
+        anchors.centerIn: parent
+        spacing: 0
+
+        Loader {
+            active: model ? model.mode !== ValueMonitorModel.Large : true
+            sourceComponent: RowLayout {
+                spacing: 9
+
+                Text {
+                    color: Qt.rgba(0.34, 0.37, 0.46, 1)
+                    text: model ? model.name : ""
+                    textFormat: Text.PlainText
+                    font.pointSize: 9
+                    font.bold: true
+                    font.family: "Helvetica"
+                }
+
+                Text {
+                    id: valueText
+                    color: "white"
+                    text: model ? model.value : ""
+                    textFormat: Text.PlainText
+                    font.pointSize: 9
+                    font.family: "Helvetica"
+                    leftPadding: 2
+                    rightPadding: 2
+                    topPadding: -2
+                    bottomPadding: -1
+                    horizontalAlignment: Qt.AlignHCenter
+                    Layout.minimumWidth: 40
+
+                    Rectangle {
+                        color: model.color
+                        radius: 5
+                        anchors.fill: parent
+                        anchors.margins: 0
+                        z: -1
+                    }
+                }
+            }
+        }
+
+        Loader {
+            active: model ? model.mode === ValueMonitorModel.Slider : false
+            sourceComponent: MonitorSlider {
+                from: model ? model.sliderMin : 0
+                to: model ? model.sliderMax : 0
+                discrete: model ? model.discrete : true
+                value: model ? model.value : 0
+                Layout.fillWidth: true
+                onMoved: {
+                    if(model)
+                        model.value = value;
+                }
+            }
+        }
+
+        Loader {
+            active: model ? model.mode === ValueMonitorModel.Large : false
+            sourceComponent: Text {
+                color: "white"
+                text: model ? model.value : ""
+                textFormat: Text.PlainText
+                font.pointSize: 12
+                font.family: "Helvetica"
+                leftPadding: 2
+                rightPadding: 2
+                topPadding: -5
+                bottomPadding: 0
+                horizontalAlignment: Qt.AlignHCenter
+                width: Math.max(31, implicitWidth)
+                height: Math.max(14.46, implicitHeight)
+            }
+        }
+    }
+}