feat!: make visualizer fit widget fixed/custom width/height

preparation for #4

BREAKING CHANGE: Number of bars option has been disabled for the current visualizer styles (bars, wave), it's now is automatically calculated based on the widget width or height

Author: luisbocanegra

package/contents/config/main.xml

@@ -86,11 +86,11 @@
     <entry name="barGap" type="Int">
       <default>5</default>
     </entry>
-    <!-- ./package/contents/ui/code/globals.js -->
+    <!-- ./package/contents/ui/code/globals.js[baseBarColors] -->
     <entry name="barColors" type="String">
       <default>{}</default>
     </entry>
-    <!-- ./package/contents/ui/code/globals.js -->
+    <!-- ./package/contents/ui/code/globals.js[baseWaveFillColors] -->
     <entry name="waveFillColors" type="String">
       <default>{}</default>
     </entry>
@@ -103,8 +103,16 @@
     <entry name="roundedBars" type="Bool">
       <default>false</default>
     </entry>
+    <!-- fill panel thickness -->
     <entry name="fillPanel" type="Bool">
       <default>false</default>
     </entry>
+    <!-- take all the available space in the panel -->
+    <entry name="expanding" type="Bool">
+      <default>false</default>
+    </entry>
+    <entry name="length" type="Int">
+      <default>200</default>
+    </entry>
   </group>
 </kcfg>

package/contents/ui/CompactRepresentation.qml

@@ -2,7 +2,6 @@ import QtQuick
 import QtQuick.Layouts
 import org.kde.kirigami as Kirigami
 import org.kde.plasma.plasmoid
-import org.kde.plasma.components as PlasmaComponents
 import "./components"
 import "code/enum.js" as Enum
 import "code/globals.js" as Globals
@@ -11,19 +10,25 @@ import "code/utils.js" as Utils
 Item {
     id: root
 
-    Layout.preferredWidth: main.onDesktop ? content.implicitWidth : (main.horizontal ? content.implicitWidth : parent.height)
-    Layout.preferredHeight: main.onDesktop ? 0 : (main.horizontal ? parent.height : content.implicitHeight)
-    Layout.minimumWidth: Layout.preferredWidth
-    Layout.minimumHeight: Layout.preferredHeight
+    Layout.preferredWidth: {
+        if (main.onDesktop || main.horizontal && Plasmoid.configuration.expanding) {
+            return 0;
+        }
+        return main.horizontal ? Plasmoid.configuration.length : parent.width;
+    }
 
-    property int framerate: Plasmoid.configuration.framerate
-    property int barGap: Plasmoid.configuration.barGap
-    property int barCount: {
-        if (visualizerStyle === Enum.VisualizerStyles.Wave) {
-            return Math.max(2, Plasmoid.configuration.barCount);
+    Layout.preferredHeight: {
+        if (main.onDesktop || !main.horizontal && Plasmoid.configuration.expanding) {
+            return 0;
         }
-        return Plasmoid.configuration.barCount;
+        return main.horizontal ? parent.height : Plasmoid.configuration.length;
     }
+    Layout.fillWidth: main.horizontal && Plasmoid.configuration.expanding && !main.onDesktop
+    Layout.fillHeight: !main.horizontal && Plasmoid.configuration.expanding && !main.onDesktop
+
+    property int framerate: Plasmoid.configuration.framerate
+    property int barGap: Plasmoid.configuration.barGap
+    property int barCount: main.barCount
     property int barWidth: Plasmoid.configuration.barWidth
     property int noiseReduction: Plasmoid.configuration.noiseReduction
     property int monstercat: Plasmoid.configuration.monstercat
@@ -67,34 +72,31 @@ Item {
         return config;
     }
 
-    RowLayout {
-        id: content
-        height: parent.height
-        anchors.horizontalCenter: parent.horizontalCenter
-        Visualizer {
-            id: visualizer
-            visualizerStyle: root.visualizerStyle
-            barWidth: root.barWidth
-            barGap: root.barGap
-            barCount: root.barCount
-            centeredBars: root.centeredBars
-            roundedBars: root.roundedBars
-            fillWave: root.fillWave
-            barColorsCfg: root.barColorsCfg
-            waveFillColorsCfg: root.waveFillColorsCfg
-            values: cava.values
-            debugMode: Plasmoid.configuration.debugMode
-            visible: !cava.hasError
-        }
-        Kirigami.Icon {
-            Layout.preferredWidth: Kirigami.Units.iconSizes.roundedIconSize(Math.min(main.height, main.width))
-            Layout.preferredHeight: Layout.preferredWidth
-            source: Qt.resolvedUrl("./icons/error.svg").toString().replace("file://", "")
-            active: mouseArea.containsMouse
-            isMask: true
-            color: Kirigami.Theme.negativeTextColor
-            visible: cava.hasError
-        }
+    Visualizer {
+        id: visualizer
+        anchors.fill: parent
+        visualizerStyle: root.visualizerStyle
+        barWidth: root.barWidth
+        barGap: root.barGap
+        barCount: root.barCount
+        centeredBars: root.centeredBars
+        roundedBars: root.roundedBars
+        fillWave: root.fillWave
+        barColorsCfg: root.barColorsCfg
+        waveFillColorsCfg: root.waveFillColorsCfg
+        values: cava.values
+        debugMode: Plasmoid.configuration.debugMode
+        visible: !cava.hasError && !cava.idle
+    }
+    Kirigami.Icon {
+        anchors.centerIn: parent
+        width: Kirigami.Units.iconSizes.roundedIconSize(Math.min(main.height, main.width))
+        height: width
+        source: Qt.resolvedUrl("./icons/error.svg").toString().replace("file://", "")
+        active: mouseArea.containsMouse
+        isMask: true
+        color: Kirigami.Theme.negativeTextColor
+        visible: cava.hasError
     }
 
     MouseArea {

package/contents/ui/code/utils.js

@@ -134,3 +134,7 @@ function delay(interval, callback, parentItem) {
   });
   timer.start();
 }
+
+function makeEven(n) {
+  return n - (n % 2);
+}

package/contents/ui/components/Visualizer.qml

@@ -18,8 +18,7 @@ Item {
     required property var waveFillColorsCfg
     property list<int> values
     property bool debugMode: false
-    Layout.preferredWidth: visualizer.width
-    Layout.preferredHeight: parent.height
+
     Rectangle {
         id: kirigamiColorItem
         opacity: 0
@@ -35,15 +34,29 @@ Item {
         width: height
         Kirigami.Theme.colorSet: Kirigami.Theme[root.waveFillColorsCfg.systemColorSet]
     }
+    Rectangle {
+        color: Kirigami.Theme.highlightColor
+        opacity: 0.2
+        visible: root.debugMode
+        width: canvas.width
+        height: canvas.height
+        anchors.centerIn: parent
+    }
     Canvas {
-        id: visualizer
+        id: canvas
+        anchors.centerIn: parent
         property int visualizerStyle: root.visualizerStyle
         property int barWidth: root.barWidth
         property int spacing: root.barGap
         property int barCount: root.values.length
         property bool centeredBars: root.centeredBars
         property bool roundedBars: root.roundedBars
-        property var values: root.values
+        property var values: {
+            if (root.debugMode) {
+                root.values[0] = 100;
+            }
+            return root.values;
+        }
         property bool fillWave: root.fillWave
 
         property real radiusOffset: barWidth / 2
@@ -62,7 +75,7 @@ Item {
         height: parent.height
         property bool fixAlign: barWidth % 2 === 0 && centeredBars && visualizerStyle === Enum.VisualizerStyles.Wave
 
-        onValuesChanged: visualizer.requestPaint()
+        onValuesChanged: canvas.requestPaint()
 
         onPaint: {
             const ctx = getContext("2d");
@@ -179,8 +192,8 @@ Item {
     Shape {
         id: shape
         visible: root.debugMode
-        width: parent.width
-        height: parent.height
+        width: canvas.width
+        height: canvas.height
         anchors.centerIn: parent
         ShapePath {
             fillColor: "transparent"

package/contents/ui/configCava.qml

@@ -54,13 +54,27 @@ KCM.SimpleKCM {
                 to: 144
             }
 
-            SpinBox {
-                id: barCountSpinbox
+            RowLayout {
+                id: barsRow
+                Kirigami.FormData.buddyFor: barCountSpinbox
                 Kirigami.FormData.label: i18n("Number of bars:")
-                from: 1
-                to: 512
+                SpinBox {
+                    id: barCountSpinbox
+                    enabled: false //TODO enable when we have a visualization style that can use it
+                    from: 1
+                    to: 512
+                    Layout.alignment: Qt.AlignTop
+                }
+                Label {
+                    visible: !barCountSpinbox.enabled
+                    text: i18n("Automatically calculated for the current visualizer style.")
+                    font: Kirigami.Theme.smallFont
+                    Layout.maximumWidth: 200
+                    wrapMode: Label.Wrap
+                    enabled: false
+                    Layout.alignment: Qt.AlignTop
+                }
             }
-
             RowLayout {
                 Kirigami.FormData.label: i18n("Automatic sensitivity:")
                 CheckBox {

package/contents/ui/configGeneral.qml

@@ -8,7 +8,6 @@ import org.kde.plasma.core as PlasmaCore
 KCM.SimpleKCM {
     id: root
     property alias cfg_desktopWidgetBg: desktopWidgetBackgroundRadio.value
-    property alias cfg_fillPanel: fillPanelCheckbox.checked
     property alias cfg_hideWhenIdle: hideWhenIdleCheckbox.checked
     property int cfg_visualizerStyle
     property string cfg_barColors
@@ -44,11 +43,6 @@ KCM.SimpleKCM {
             }
         }
 
-        CheckBox {
-            id: fillPanelCheckbox
-            Kirigami.FormData.label: i18n("Fill panel thickness:")
-        }
-
         RadioButton {
             Kirigami.FormData.label: i18n("Desktop background:")
             text: i18n("Default")

package/contents/ui/configVisualizer.qml

@@ -3,21 +3,35 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import org.kde.kirigami as Kirigami
 import org.kde.kcmutils as KCM
+import org.kde.plasma.core as PlasmaCore
+import org.kde.plasma.plasmoid
 import "components" as Components
 import "code/enum.js" as Enum
+import "code/utils.js" as Utils
 
 KCM.SimpleKCM {
     id: root
     property alias cfg_barGap: barGapSpinbox.value
     property alias cfg_barWidth: barWidthSpinbox.value
     property alias cfg_centeredBars: centeredBarsCheckbox.checked
     property alias cfg_roundedBars: roundedBarsCheckbox.checked
+    // fill panel thickness
     property alias cfg_fillPanel: fillPanelCheckbox.checked
-    property alias cfg_hideWhenIdle: hideWhenIdleCheckbox.checked
     property int cfg_visualizerStyle
     property string cfg_barColors
     property string cfg_waveFillColors
     property alias cfg_fillWave: fillWaveCheckbox.checked
+    // take all the available space in the panel
+    property alias cfg_expanding: expandingCheckbox.checked
+    property alias cfg_length: lengthSpinbox.value
+
+    readonly property bool vertical: {
+        if (Plasmoid.formFactor == PlasmaCore.Types.Vertical) {
+            return true;
+        }
+        return false;
+    }
+    readonly property string dimensionStr: vertical ? i18n("height") : i18n("width")
 
     ColumnLayout {
 
@@ -56,12 +70,22 @@ KCM.SimpleKCM {
             }
 
             CheckBox {
-                id: hideWhenIdleCheckbox
-                Kirigami.FormData.label: i18n("Auto-hide when idle:")
+                id: expandingCheckbox
+                visible: !(Plasmoid.location === PlasmaCore.Types.Floating)
+                Kirigami.FormData.label: i18n("Fill panel %1:", root.dimensionStr)
+            }
+            SpinBox {
+                id: lengthSpinbox
+                visible: !(Plasmoid.location === PlasmaCore.Types.Floating)
+                enabled: !expandingCheckbox.checked
+                Kirigami.FormData.label: i18n("Fixed %1:", root.dimensionStr)
+                from: 1
+                to: 9999
             }
 
             CheckBox {
                 id: fillPanelCheckbox
+                visible: !(Plasmoid.location === PlasmaCore.Types.Floating)
                 Kirigami.FormData.label: i18n("Fill panel thickness:")
             }
 

package/contents/ui/main.qml

@@ -17,6 +17,19 @@ PlasmoidItem {
     property bool onDesktop: Plasmoid.location === PlasmaCore.Types.Floating
     property bool horizontal: Plasmoid.formFactor !== PlasmaCore.Types.Vertical
 
+    property int barCount: {
+        let bars = 1;
+        const width = main.width;
+        bars = Math.floor((width + Plasmoid.configuration.barGap) / (Plasmoid.configuration.barWidth + Plasmoid.configuration.barGap));
+        if (Plasmoid.configuration.outputChannels === "stereo") {
+            bars = Utils.makeEven(bars);
+        }
+        if (Plasmoid.configuration.visualizerStyle === Enum.VisualizerStyles.Wave) {
+            bars = Math.max(2, bars);
+        }
+        return bars;
+    }
+
     property bool hideWhenIdle: Plasmoid.configuration.hideWhenIdle
 
     Plasmoid.status: PlasmaCore.Types.ActiveStatus
@@ -30,16 +43,16 @@ PlasmoidItem {
     onExpandedChanged: {
         Utils.delay(1000, updateStatus, main);
     }
+    onBarCountChanged: {
+        if (editMode && !cava.running) {
+            return;
+        }
+        cava.barCount = barCount;
+    }
 
     Cava {
         id: cava
         framerate: Plasmoid.configuration.framerate
-        barCount: {
-            if (Plasmoid.configuration.visualizerStyle === Enum.VisualizerStyles.Wave) {
-                return Math.max(2, Plasmoid.configuration.barCount);
-            }
-            return Plasmoid.configuration.barCount;
-        }
         noiseReduction: Plasmoid.configuration.noiseReduction
         monstercat: Plasmoid.configuration.monstercat
         waves: Plasmoid.configuration.waves