noctalia-shell/Widgets/AudioSpectrum/NWaveSpectrum.qml

import QtQuick
import qs.Commons

Item {
  id: root
  property color fillColor: Color.mPrimary
  property color strokeColor: Color.mOnSurface
  property int strokeWidth: 0
  property var values: []
  property bool vertical: false

  // Minimum signal properties
  property bool showMinimumSignal: false
  property real minimumSignalValue: 0.05 // Default to 5% of height

  // Rendering active state - only redraw when visible and values are changing
  property bool renderingActive: visible && values && values.length > 0

  // Redraw when necessary - only if rendering is active
  onWidthChanged: if (renderingActive)
                    canvas.requestPaint()
  onHeightChanged: if (renderingActive)
                     canvas.requestPaint()
  onValuesChanged: if (renderingActive)
                     canvas.requestPaint()
  onFillColorChanged: if (renderingActive)
                        canvas.requestPaint()
  onStrokeColorChanged: if (renderingActive)
                          canvas.requestPaint()
  onShowMinimumSignalChanged: if (renderingActive)
                                canvas.requestPaint()
  onMinimumSignalValueChanged: if (renderingActive)
                                 canvas.requestPaint()
  onVerticalChanged: if (renderingActive)
                       canvas.requestPaint()

  // Clear canvas when not rendering
  onRenderingActiveChanged: {
    if (!renderingActive) {
      var ctx = canvas.getContext("2d")
      ctx.reset()
      canvas.requestPaint()
    }
  }

  Canvas {
    id: canvas
    anchors.fill: parent
    antialiasing: false // Disable for better performance - shape is smooth enough without it
    renderStrategy: Canvas.Threaded // Render in separate thread to reduce main thread load
    renderTarget: Canvas.FramebufferObject // Use FBO for better performance

    onPaint: {
      var ctx = getContext("2d")
      ctx.reset()

      if (!values || !Array.isArray(values) || values.length === 0) {
        return
      }

      // Apply minimum signal if enabled
      var processedValues = values.map(function (v) {
        return (root.showMinimumSignal && v === 0) ? root.minimumSignalValue : v
      })

      // Create the mirrored values
      const partToMirror = processedValues.slice(1).reverse()
      const mirroredValues = partToMirror.concat(processedValues)

      if (mirroredValues.length < 2) {
        return
      }

      ctx.fillStyle = root.fillColor
      ctx.strokeStyle = root.strokeColor
      ctx.lineWidth = root.strokeWidth

      const count = mirroredValues.length

      if (root.vertical) {
        // Vertical orientation
        const stepY = height / (count - 1)
        const centerX = width / 2
        const amplitude = width / 2

        ctx.beginPath()

        // Draw the left half of the waveform from top to bottom
        var xOffset = mirroredValues[0] * amplitude
        ctx.moveTo(centerX - xOffset, 0)

        for (var i = 1; i < count; i++) {
          const y = i * stepY
          xOffset = mirroredValues[i] * amplitude
          const x = centerX - xOffset
          ctx.lineTo(x, y)
        }

        // Draw the right half of the waveform from bottom to top to create a closed shape
        for (var i = count - 1; i >= 0; i--) {
          const y = i * stepY
          xOffset = mirroredValues[i] * amplitude
          const x = centerX + xOffset // Mirrored across the center
          ctx.lineTo(x, y)
        }

        ctx.closePath()
      } else {
        // Horizontal orientation
        const stepX = width / (count - 1)
        const centerY = height / 2
        const amplitude = height / 2

        ctx.beginPath()

        // Draw the top half of the waveform from left to right
        var yOffset = mirroredValues[0] * amplitude
        ctx.moveTo(0, centerY - yOffset)

        for (var i = 1; i < count; i++) {
          const x = i * stepX
          yOffset = mirroredValues[i] * amplitude
          const y = centerY - yOffset
          ctx.lineTo(x, y)
        }

        // Draw the bottom half of the waveform from right to left to create a closed shape
        for (var i = count - 1; i >= 0; i--) {
          const x = i * stepX
          yOffset = mirroredValues[i] * amplitude
          const y = centerY + yOffset // Mirrored across the center
          ctx.lineTo(x, y)
        }

        ctx.closePath()
      }

      // --- Render the path ---
      if (root.fillColor.a > 0) {
        ctx.fill()
      }
      if (root.strokeWidth > 0) {
        ctx.stroke()
      }
    }
  }
}