TTMusic/entry/src/main/ets/view/spectrum/BarSpectrumRenderer.ets

import { SpectrumRenderer, SpectrumRenderOptions, buildSpectrumPalette, hslToHex } from './SpectrumRenderer'

/**
 * 柱状频谱渲染器
 * 经典频率柱状条跳动，带峰值下落指示器
 */
export class BarSpectrumRenderer implements SpectrumRenderer {
  private peaks: number[] = []
  private peakVelocities: number[] = []

  render(ctx: CanvasRenderingContext2D, bands: number[], energy: number,
    width: number, height: number, brandColor: string, _options?: SpectrumRenderOptions): void {
    const originalBandCount: number = bands.length
    if (originalBandCount === 0) return

    // 根据宽度动态计算最佳柱子数量和尺寸
    const targetBarWidth: number = 2.5 // 目标柱子宽度
    const gap: number = 1.5 // 柱子之间的间隙

    // 计算在这个宽度下能容纳多少个柱子
    let optimalBarCount: number = Math.floor(width / (targetBarWidth + gap))
    optimalBarCount = Math.min(optimalBarCount, originalBandCount) // 不超过原始频段数
    optimalBarCount = Math.max(optimalBarCount, 16) // 至少16个柱子

    // 根据优化后的柱子数量计算实际柱子宽度
    const actualBarWidth: number = (width - gap * (optimalBarCount + 1)) / optimalBarCount

    // 重采样 bands 数据以匹配 optimalBarCount
    const resampledBands: number[] = []
    const step: number = originalBandCount / optimalBarCount
    for (let i = 0; i < optimalBarCount; i++) {
      const sourceIndex: number = Math.min(Math.floor(i * step), originalBandCount - 1)
      resampledBands.push(bands[sourceIndex])
    }

    const bandCount: number = optimalBarCount

    // 初始化峰值数组
    if (this.peaks.length !== bandCount) {
      this.peaks = new Array<number>(bandCount)
      this.peakVelocities = new Array<number>(bandCount)
      for (let i = 0; i < bandCount; i++) {
        this.peaks[i] = 0
        this.peakVelocities[i] = 0
      }
    }

    // 轻微拖影，接近参考图中的荧光残影（使用透明背景）
    ctx.clearRect(0, 0, width, height)

    const usableHeight: number = height * 0.80
    const segmentHeight: number = Math.max(2, height * 0.012) // 减小单段高度
    const segmentGap: number = 0 // 去掉间隙，让方格紧密相连
    const segmentCount: number = Math.max(10, Math.floor(usableHeight / (segmentHeight + segmentGap)))
    const palette = buildSpectrumPalette(brandColor)
    const hueSpan: number = (palette.complementaryHue + 360 - palette.primaryHue) % 360

    // 地平线已移除，保持透明背景

    // 计算起始位置，使柱子居中
    const totalContentWidth: number = bandCount * actualBarWidth + (bandCount - 1) * gap
    const startX: number = (width - totalContentWidth) / 2

    for (let i = 0; i < bandCount; i++) {
      const level: number = Math.max(0, Math.min(1, resampledBands[i]))
      const activeSegments: number = Math.floor(level * segmentCount)
      const x: number = startX + i * (actualBarWidth + gap)
      const hue: number = (palette.primaryHue + (i / bandCount) * hueSpan) % 360

      for (let seg = 0; seg < segmentCount; seg++) {
        const segY: number = height - (seg + 1) * (segmentHeight + segmentGap)
        const lit: boolean = seg < activeSegments

        // 只绘制点亮的方格，未点亮的不绘制（透明）
        if (!lit) {
          continue
        }

        const t: number = seg / segmentCount
        const lightness: number = 0.34 + t * 0.34
        const alpha: number = 0.55 + level * 0.45
        ctx.globalAlpha = alpha
        ctx.fillStyle = hslToHex(hue, 0.86, lightness)
        ctx.fillRect(x, segY, actualBarWidth, segmentHeight)
      }
      ctx.globalAlpha = 1.0

      // 峰值下落指示器（使用与当前柱子相同的颜色）
      if (level > this.peaks[i]) {
        this.peaks[i] = level
        this.peakVelocities[i] = 0
      } else {
        this.peakVelocities[i] += 0.0018
        this.peaks[i] -= this.peakVelocities[i]
        if (this.peaks[i] < 0) this.peaks[i] = 0
      }

      const peakSeg: number = Math.floor(this.peaks[i] * segmentCount)
      if (peakSeg >= 0) {
        const peakY: number = height - (peakSeg + 1) * (segmentHeight + segmentGap)

        // 使用当前柱子的颜色作为峰值指示器颜色
        const currentPeakLightness: number = 0.34 + (this.peaks[i] || 0) * 0.34
        const currentPeakColor: string = hslToHex(hue, 0.86, currentPeakLightness)

        ctx.fillStyle = currentPeakColor
        ctx.globalAlpha = 0.95
        ctx.fillRect(x, peakY, actualBarWidth, segmentHeight + 1)
        ctx.globalAlpha = 1.0
      }
    }
  }

  reset(): void {
    this.peaks = []
    this.peakVelocities = []
  }
}