Merge pull request #395 from FlyAndNotDown/master

Feat: Widget Samples Update

Author: FlyAndNotDown

CMake/Common.cmake

@@ -1,6 +1,6 @@
 option(BUILD_EDITOR "Build Explosion editor" ON)
 option(CI "Build in CI" OFF)
-option(USE_UNITY_BUILD "Use unity build" OFF)
+option(USE_UNITY_BUILD "Use unity build" ON)
 
 set(CMAKE_CXX_STANDARD 20)
 set(CMAKE_UNITY_BUILD ${USE_UNITY_BUILD})

Editor/CMakeLists.txt

@@ -50,7 +50,7 @@ AddResourcesCopyCommand(
 
 # ---- begin qml -------------------------------------------------------------------------------------
 set(EDITOR_QML_ROOT ${CMAKE_CURRENT_SOURCE_DIR}/Qml)
-set(EDITOR_RESOURCE_ROOT ${CMAKE_CURRENT_SOURCE_DIR}/Qml/Resource)
+set(EDITOR_RESOURCE_ROOT ${CMAKE_CURRENT_SOURCE_DIR}/Resource)
 get_filename_component(EDITOR_RESOURCE_ROOT_ABSOLUTE ${EDITOR_RESOURCE_ROOT} ABSOLUTE)
 
 file(GLOB QML_SOURCES ${EDITOR_QML_ROOT}/*.qml)

Editor/Qml/EFloatSliderInput.qml

@@ -0,0 +1,49 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+EFloatInput {
+    property double step: 0.1
+    property int decimals: 2
+    property bool sliding: false
+    property double slideStartValue: root.value
+    property int slideStartX: 0
+
+    id: root
+
+    Rectangle {
+        implicitWidth: (root.implicitWidth - 4) * (root.value - root.from) / (root.to - root.from)
+        implicitHeight: 3
+        radius: 5
+        anchors.bottom: root.bottom
+        anchors.left: root.left
+        anchors.leftMargin: 2
+        color: ETheme.primaryColor
+    }
+
+    MouseArea {
+        implicitWidth: root.implicitWidth
+        implicitHeight: root.implicitHeight / 2
+        anchors.bottom: root.bottom
+        hoverEnabled: true
+        preventStealing: true
+
+        onPressed: (mouse) => {
+            root.sliding = true;
+            root.slideStartX = mouse.x;
+            root.slideStartValue = root.value;
+        }
+
+        onReleased: {
+            root.sliding = false;
+        }
+
+        onPositionChanged: (mouse) => {
+            if (root.sliding) {
+                const distance = mouse.x - root.slideStartX;
+                const valueDistance = (distance / 10.0) * root.step;
+                root.value = Math.min(Math.max(root.slideStartValue + valueDistance, root.from), root.to).toFixed(root.decimals);
+            }
+        }
+    }
+}

Editor/Qml/EIntInput.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+Item {
+    property int value: Number(textField.text)
+    property int from: 0
+    property int to: 10
+
+    id: root
+    implicitWidth: textField.implicitWidth
+    implicitHeight: textField.implicitHeight
+
+    ETextField {
+        id: textField
+        implicitWidth: 100
+        text: value
+
+        onAccepted: {
+            root.value = Number(displayText)
+        }
+
+        validator: IntValidator {
+            bottom: root.from
+            top: root.to
+        }
+    }
+}

Editor/Qml/EIntSliderInput.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+
+EIntInput {
+    property int step: 1
+    property bool sliding: false
+    property int slideStartValue: root.value
+    property int slideStartX: 0
+
+    id: root
+
+    Rectangle {
+        implicitWidth: (root.implicitWidth - 4) * (root.value - root.from) / (root.to - root.from)
+        implicitHeight: 3
+        radius: 5
+        anchors.bottom: root.bottom
+        anchors.left: root.left
+        anchors.leftMargin: 2
+        color: ETheme.primaryColor
+    }
+
+    MouseArea {
+        implicitWidth: root.implicitWidth
+        implicitHeight: root.implicitHeight / 2
+        anchors.bottom: root.bottom
+        hoverEnabled: true
+        preventStealing: true
+
+        onPressed: (mouse) => {
+            root.sliding = true;
+            root.slideStartX = mouse.x;
+            root.slideStartValue = root.value;
+        }
+
+        onReleased: {
+            root.sliding = false;
+        }
+
+        onPositionChanged: (mouse) => {
+            if (root.sliding) {
+                const distance = mouse.x - root.slideStartX;
+                const valueDistance = Math.floor((distance / 10.0) * root.step);
+                root.value = Math.min(Math.max(root.slideStartValue + valueDistance, root.from), root.to);
+            }
+        }
+    }
+}

Editor/Qml/EIntegerInput.qml Editor/Qml/EIntSpinInput.qmlEditor/Qml/EIntegerInput.qml renamed to Editor/Qml/EIntSpinInput.qml

@@ -6,6 +6,7 @@ Item {
     property int value: spinBox.value
     property int from: spinBox.from
     property int to: spinBox.to
+    property int stepSize: spinBox.stepSize
     property bool editable: spinBox.editable
 
     id: root
@@ -19,6 +20,7 @@ Item {
         editable: root.editable
         from: root.from
         to: root.to
+        stepSize: root.stepSize
 
         contentItem: ETextField {
             id: textField

Editor/Qml/EWidgetSamples.qml

@@ -395,7 +395,7 @@ Rectangle {
                 Layout.leftMargin: 5
                 Layout.topMargin: 15
                 EText {
-                    text: 'IntegerInput'
+                    text: 'IntSpinInput'
                     style: EText.Style.Title1
                 }
             }
@@ -404,7 +404,7 @@ Rectangle {
                 Layout.margins: 5
 
                 RowLayout {
-                    EIntegerInput {}
+                    EIntSpinInput {}
 
                     EText {
                         Layout.leftMargin: 5
@@ -413,7 +413,7 @@ Rectangle {
                 }
 
                 RowLayout {
-                    EIntegerInput {
+                    EIntSpinInput {
                         from: 0
                         to: 10
                     }
@@ -425,7 +425,7 @@ Rectangle {
                 }
 
                 RowLayout {
-                    EIntegerInput {
+                    EIntSpinInput {
                         editable: true
                     }
 
@@ -436,6 +436,39 @@ Rectangle {
                 }
             }
 
+            RowLayout {
+                Layout.leftMargin: 5
+                Layout.topMargin: 15
+                EText {
+                    text: 'IntInput'
+                    style: EText.Style.Title1
+                }
+            }
+
+            ColumnLayout {
+                Layout.margins: 5
+
+                RowLayout {
+                    EIntInput {}
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'Default'
+                    }
+                }
+
+                RowLayout {
+                    EIntInput {
+                        value: 5
+                    }
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'With Property Value'
+                    }
+                }
+            }
+
             RowLayout {
                 Layout.leftMargin: 5
                 Layout.topMargin: 15
@@ -456,6 +489,65 @@ Rectangle {
                         text: 'Default'
                     }
                 }
+
+                RowLayout {
+                    EFloatInput {
+                        value: 5
+                    }
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'With Property Value'
+                    }
+                }
+            }
+
+            RowLayout {
+                Layout.leftMargin: 5
+                Layout.topMargin: 15
+                EText {
+                    text: 'IntSliderInput'
+                    style: EText.Style.Title1
+                }
+            }
+
+            ColumnLayout {
+                Layout.margins: 5
+
+                RowLayout {
+                    EIntSliderInput {
+                        value: 3
+                    }
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'Default'
+                    }
+                }
+            }
+
+            RowLayout {
+                Layout.leftMargin: 5
+                Layout.topMargin: 15
+                EText {
+                    text: 'FloatSliderInput'
+                    style: EText.Style.Title1
+                }
+            }
+
+            ColumnLayout {
+                Layout.margins: 5
+
+                RowLayout {
+                    EFloatSliderInput {
+                        value: 0.3
+                    }
+
+                    EText {
+                        Layout.leftMargin: 5
+                        text: 'Default'
+                    }
+                }
             }
         }
     }