Modernize editor layout and add histogram overlay mode

faststack/qml/HistogramModeToggle.qml

@@ -0,0 +1,53 @@
+import QtQuick
+import QtQuick.Layouts 1.15
+
+RowLayout {
+    id: root
+
+    property bool overlaidMode: true
+    signal modeRequested(bool overlaid)
+
+    Item { Layout.fillWidth: true }
+
+    Row {
+        spacing: 0
+
+        Rectangle {
+            width: 70; height: 20
+            radius: 3
+            color: root.overlaidMode ? "#2c2c2c" : "transparent"
+            border.color: "#3a3a3a"; border.width: 1
+
+            Text {
+                anchors.centerIn: parent
+                text: "Overlaid"
+                font.pixelSize: 10
+                color: root.overlaidMode ? "#e8e6e3" : "#6b6764"
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: root.modeRequested(true)
+            }
+        }
+
+        Rectangle {
+            width: 70; height: 20
+            radius: 3
+            color: !root.overlaidMode ? "#2c2c2c" : "transparent"
+            border.color: "#3a3a3a"; border.width: 1
+
+            Text {
+                anchors.centerIn: parent
+                text: "Channels"
+                font.pixelSize: 10
+                color: !root.overlaidMode ? "#e8e6e3" : "#6b6764"
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: root.modeRequested(false)
+            }
+        }
+    }
+}

faststack/qml/HistogramWindow.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Window
 import QtQuick.Layouts 1.15
+import QtCore
 
 Window {
     id: histogramWindow
@@ -11,6 +12,12 @@ Window {
     minimumHeight: 50
     property var uiStateRef: typeof uiState !== "undefined" ? uiState : null
     property var controllerRef: typeof controller !== "undefined" ? controller : null
+    Settings {
+        id: histSettings
+        category: "histogram"
+        property bool overlaidMode: true
+    }
+
     visible: histogramWindow.uiStateRef ? histogramWindow.uiStateRef.isHistogramVisible : false
 
     FocusScope {
@@ -51,57 +58,100 @@ Window {
     property color primaryTextColor: "#222222"
     property color gridLineColor: "#dcdcdc"
     property color dangerColor: Qt.rgba(1, 0, 0, 0.25)
+    property var histogramDataRef: histogramWindow.uiStateRef ? histogramWindow.uiStateRef.histogramData : null
+    property var rHistogramData: histogramWindow.histogramDataRef ? (histogramWindow.histogramDataRef["r"] || []) : []
+    property var gHistogramData: histogramWindow.histogramDataRef ? (histogramWindow.histogramDataRef["g"] || []) : []
+    property var bHistogramData: histogramWindow.histogramDataRef ? (histogramWindow.histogramDataRef["b"] || []) : []
+    property int rClipCount: histogramWindow.histogramDataRef ? (histogramWindow.histogramDataRef["r_clip"] || 0) : 0
+    property int gClipCount: histogramWindow.histogramDataRef ? (histogramWindow.histogramDataRef["g_clip"] || 0) : 0
+    property int bClipCount: histogramWindow.histogramDataRef ? (histogramWindow.histogramDataRef["b_clip"] || 0) : 0
+    property int rPreClipCount: histogramWindow.histogramDataRef ? (histogramWindow.histogramDataRef["r_preclip"] || 0) : 0
+    property int gPreClipCount: histogramWindow.histogramDataRef ? (histogramWindow.histogramDataRef["g_preclip"] || 0) : 0
+    property int bPreClipCount: histogramWindow.histogramDataRef ? (histogramWindow.histogramDataRef["b_preclip"] || 0) : 0
 
     color: windowBackgroundColor
 
-    RowLayout {
+    ColumnLayout {
         anchors.fill: parent
         anchors.margins: histogramWindow.width > 200 ? 15 : 2
-        spacing: histogramWindow.width > 200 ? 15 : 2
+        spacing: histogramWindow.width > 200 ? 8 : 2
 
-        SingleChannelHistogram {
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            channelName: "Red"
-            channelColor: "#e15050"
-            gridLineColor: histogramWindow.gridLineColor
-            dangerColor: histogramWindow.dangerColor
-            textColor: histogramWindow.primaryTextColor
-
-            histogramData: histogramWindow.uiStateRef && histogramWindow.uiStateRef.histogramData ? (histogramWindow.uiStateRef.histogramData["r"] || []) : []
-            clipCount: histogramWindow.uiStateRef && histogramWindow.uiStateRef.histogramData ? (histogramWindow.uiStateRef.histogramData["r_clip"] || 0) : 0
-            preClipCount: histogramWindow.uiStateRef && histogramWindow.uiStateRef.histogramData ? (histogramWindow.uiStateRef.histogramData["r_preclip"] || 0) : 0
-        }
-
-        SingleChannelHistogram {
+        HistogramModeToggle {
             Layout.fillWidth: true
-            Layout.fillHeight: true
-
-            channelName: "Green"
-            channelColor: "#50e150"
-            gridLineColor: histogramWindow.gridLineColor
-            dangerColor: histogramWindow.dangerColor
-            textColor: histogramWindow.primaryTextColor
-
-            histogramData: histogramWindow.uiStateRef && histogramWindow.uiStateRef.histogramData ? (histogramWindow.uiStateRef.histogramData["g"] || []) : []
-            clipCount: histogramWindow.uiStateRef && histogramWindow.uiStateRef.histogramData ? (histogramWindow.uiStateRef.histogramData["g_clip"] || 0) : 0
-            preClipCount: histogramWindow.uiStateRef && histogramWindow.uiStateRef.histogramData ? (histogramWindow.uiStateRef.histogramData["g_preclip"] || 0) : 0
+            overlaidMode: histSettings.overlaidMode
+            onModeRequested: (overlaid) => histSettings.overlaidMode = overlaid
         }
 
-        SingleChannelHistogram {
+        // Histogram display (overlaid or 3-channel)
+        Item {
             Layout.fillWidth: true
             Layout.fillHeight: true
-
-            channelName: "Blue"
-            channelColor: "#5050e1"
-            gridLineColor: histogramWindow.gridLineColor
-            dangerColor: histogramWindow.dangerColor
-            textColor: histogramWindow.primaryTextColor
-
-            histogramData: histogramWindow.uiStateRef && histogramWindow.uiStateRef.histogramData ? (histogramWindow.uiStateRef.histogramData["b"] || []) : []
-            clipCount: histogramWindow.uiStateRef && histogramWindow.uiStateRef.histogramData ? (histogramWindow.uiStateRef.histogramData["b_clip"] || 0) : 0
-            preClipCount: histogramWindow.uiStateRef && histogramWindow.uiStateRef.histogramData ? (histogramWindow.uiStateRef.histogramData["b_preclip"] || 0) : 0
+
+            OverlaidHistogram {
+                anchors.fill: parent
+                visible: histSettings.overlaidMode
+                rData: histogramWindow.rHistogramData
+                gData: histogramWindow.gHistogramData
+                bData: histogramWindow.bHistogramData
+                rClip: histogramWindow.rClipCount
+                gClip: histogramWindow.gClipCount
+                bClip: histogramWindow.bClipCount
+                rPreClip: histogramWindow.rPreClipCount
+                gPreClip: histogramWindow.gPreClipCount
+                bPreClip: histogramWindow.bPreClipCount
+                gridLineColor: histogramWindow.gridLineColor
+            }
+
+            RowLayout {
+                anchors.fill: parent
+                visible: !histSettings.overlaidMode
+                spacing: histogramWindow.width > 200 ? 15 : 2
+
+                SingleChannelHistogram {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    channelName: "Red"
+                    channelColor: "#e15050"
+                    gridLineColor: histogramWindow.gridLineColor
+                    dangerColor: histogramWindow.dangerColor
+                    textColor: histogramWindow.primaryTextColor
+
+                    histogramData: histogramWindow.rHistogramData
+                    clipCount: histogramWindow.rClipCount
+                    preClipCount: histogramWindow.rPreClipCount
+                }
+
+                SingleChannelHistogram {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    channelName: "Green"
+                    channelColor: "#50e150"
+                    gridLineColor: histogramWindow.gridLineColor
+                    dangerColor: histogramWindow.dangerColor
+                    textColor: histogramWindow.primaryTextColor
+
+                    histogramData: histogramWindow.gHistogramData
+                    clipCount: histogramWindow.gClipCount
+                    preClipCount: histogramWindow.gPreClipCount
+                }
+
+                SingleChannelHistogram {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+
+                    channelName: "Blue"
+                    channelColor: "#5050e1"
+                    gridLineColor: histogramWindow.gridLineColor
+                    dangerColor: histogramWindow.dangerColor
+                    textColor: histogramWindow.primaryTextColor
+
+                    histogramData: histogramWindow.bHistogramData
+                    clipCount: histogramWindow.bClipCount
+                    preClipCount: histogramWindow.bPreClipCount
+                }
+            }
         }
     }
 }