ColorPicker.qml

import QtQuick
import qs.Commons
import qs.Ui

Item {
  id: root

  property color foreground: Color.foreground
  property string fontFamily: Style.font.family
  property string colorValue: "#7c3aed"
  property real hue: 0.72
  property real saturation: 0.75
  property real level: 0.93
  property bool syncing: false
  readonly property string selectedColor: hsvHex(hue, saturation, level)
  readonly property bool editing: hexField.activeFocus

  signal committed(string color)

  implicitHeight: pickerColumn.implicitHeight

  function componentHex(value) {
    var text = Math.max(0, Math.min(255, Math.round(value))).toString(16)
    return text.length < 2 ? "0" + text : text
  }

  function hsvHex(h, s, v) {
    var sector = Math.floor((h % 1) * 6)
    var fraction = h * 6 - sector
    var p = v * (1 - s)
    var q = v * (1 - fraction * s)
    var t = v * (1 - (1 - fraction) * s)
    var r = 0, g = 0, b = 0
    switch (sector % 6) {
    case 0: r = v; g = t; b = p; break
    case 1: r = q; g = v; b = p; break
    case 2: r = p; g = v; b = t; break
    case 3: r = p; g = q; b = v; break
    case 4: r = t; g = p; b = v; break
    default: r = v; g = p; b = q
    }
    return "#" + componentHex(r * 255) + componentHex(g * 255) + componentHex(b * 255)
  }

  function syncFromHex(hex) {
    var text = String(hex || "").replace("#", "")
    if (!/^[0-9a-fA-F]{6}$/.test(text)) return
    var r = parseInt(text.slice(0, 2), 16) / 255
    var g = parseInt(text.slice(2, 4), 16) / 255
    var b = parseInt(text.slice(4, 6), 16) / 255
    var maximum = Math.max(r, g, b)
    var minimum = Math.min(r, g, b)
    var delta = maximum - minimum
    var nextHue = 0
    if (delta > 0) {
      if (maximum === r) nextHue = ((g - b) / delta) % 6
      else if (maximum === g) nextHue = (b - r) / delta + 2
      else nextHue = (r - g) / delta + 4
      nextHue /= 6
      if (nextHue < 0) nextHue += 1
    }
    root.syncing = true
    root.hue = nextHue
    root.saturation = maximum === 0 ? 0 : delta / maximum
    root.level = maximum
    root.syncing = false
  }

  function commitHex(value) {
    var normalized = String(value || "").trim().toLowerCase()
    if (normalized.charAt(0) !== "#") normalized = "#" + normalized
    if (!/^#[0-9a-f]{6}$/.test(normalized)) {
      hexField.text = root.selectedColor.toUpperCase()
      return
    }
    root.syncFromHex(normalized)
    hexField.text = normalized.toUpperCase()
    if (normalized !== root.colorValue.toLowerCase()) root.committed(normalized)
  }

  onColorValueChanged: if (!svMouse.pressed && !hueMouse.pressed) syncFromHex(colorValue)
  onSelectedColorChanged: hexField.text = selectedColor.toUpperCase()
  Component.onCompleted: syncFromHex(colorValue)

  Column {
    id: pickerColumn
    width: parent.width
    spacing: Style.space(8)

    Rectangle {
      id: svSquare
      width: parent.width
      height: Style.space(132)
      radius: Style.cornerRadius
      color: root.hsvHex(root.hue, 1, 1)
      clip: true

      Rectangle {
        anchors.fill: parent
        gradient: Gradient {
          orientation: Gradient.Horizontal
          GradientStop { position: 0; color: "white" }
          GradientStop { position: 1; color: "transparent" }
        }
      }

      Rectangle {
        anchors.fill: parent
        gradient: Gradient {
          GradientStop { position: 0; color: "transparent" }
          GradientStop { position: 1; color: "black" }
        }
      }

      Rectangle {
        width: Style.space(14)
        height: width
        radius: width / 2
        x: Math.max(0, Math.min(svSquare.width - width, root.saturation * svSquare.width - width / 2))
        y: Math.max(0, Math.min(svSquare.height - height, (1 - root.level) * svSquare.height - height / 2))
        color: "transparent"
        border.width: Math.max(1, Style.space(2))
        border.color: root.level > 0.65 && root.saturation < 0.45 ? "#111111" : "#ffffff"
      }

      MouseArea {
        id: svMouse
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.CrossCursor
        function update(mouse) {
          root.saturation = Math.max(0, Math.min(1, mouse.x / width))
          root.level = Math.max(0, Math.min(1, 1 - mouse.y / height))
        }
        onPressed: function(mouse) { update(mouse) }
        onPositionChanged: function(mouse) { if (pressed) update(mouse) }
        onReleased: root.committed(root.selectedColor)
      }
    }

    Rectangle {
      id: hueStrip
      width: parent.width
      height: Style.space(18)
      radius: Style.cornerRadius
      gradient: Gradient {
        orientation: Gradient.Horizontal
        GradientStop { position: 0.00; color: "#ff0000" }
        GradientStop { position: 0.17; color: "#ffff00" }
        GradientStop { position: 0.33; color: "#00ff00" }
        GradientStop { position: 0.50; color: "#00ffff" }
        GradientStop { position: 0.67; color: "#0000ff" }
        GradientStop { position: 0.83; color: "#ff00ff" }
        GradientStop { position: 1.00; color: "#ff0000" }
      }

      Rectangle {
        width: Style.space(6)
        height: hueStrip.height + Style.space(6)
        radius: width / 2
        x: Math.max(0, Math.min(hueStrip.width - width, root.hue * hueStrip.width - width / 2))
        anchors.verticalCenter: parent.verticalCenter
        color: "transparent"
        border.width: Math.max(1, Style.space(2))
        border.color: "white"
      }

      MouseArea {
        id: hueMouse
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: Qt.PointingHandCursor
        function update(mouse) { root.hue = Math.max(0, Math.min(0.9999, mouse.x / width)) }
        onPressed: function(mouse) { update(mouse) }
        onPositionChanged: function(mouse) { if (pressed) update(mouse) }
        onReleased: root.committed(root.selectedColor)
      }
    }

    Row {
      width: parent.width
      height: Style.space(28)
      spacing: Style.space(8)

      Rectangle {
        width: height
        height: parent.height
        radius: Style.cornerRadius
        color: root.selectedColor
        border.width: 1
        border.color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.2)
      }

      TextField {
        id: hexField
        width: parent.width - parent.height - parent.spacing
        anchors.verticalCenter: parent.verticalCenter
        text: root.selectedColor.toUpperCase()
        foreground: root.foreground
        font.family: root.fontFamily
        font.capitalization: Font.AllUppercase
        maximumLength: 7
        placeholderText: "#RRGGBB"
        verticalPadding: Style.space(3)
        selectByMouse: true
        validator: RegularExpressionValidator { regularExpression: /^#?[0-9a-fA-F]{0,6}$/ }
        onActiveFocusChanged: {
          if (activeFocus) selectAll()
          else root.commitHex(text)
        }
        onAccepted: root.commitHex(text)
      }
    }
  }
}