@hakumi-dev/hakumi-components 0.1.18-pre → 0.1.19-pre

package/app/javascript/hakumi_components/controllers/hakumi/color_picker_controller.js

@@ -1,4 +1,12 @@
 import RegistryController from "../base/registry_controller.js"
+import {
+    defaultHsv,
+    extractAlpha,
+    formatHsvColor,
+    hsvToRgb,
+    isValidColor,
+    parseColorToHsv
+} from "../../utils/color_helper.js"
 
 export default class extends RegistryController {
     static targets = [
@@ -38,8 +46,8 @@ export default class extends RegistryController {
 
         // Initialize color from value or default
         const initialColor = this.valueValue || this.defaultValueValue || "#1677ff"
-        this.hsv = this.parseColorToHSV(initialColor)
-        this.alpha = this.extractAlpha(initialColor)
+        this.hsv = parseColorToHsv(initialColor)
+        this.alpha = extractAlpha(initialColor)
 
         // Bind handlers
         this.boundOutsideClick = this.handleOutsideClick.bind(this)
@@ -142,7 +150,7 @@ export default class extends RegistryController {
         if (event) event.stopPropagation()
         if (this.disabledValue) return
 
-        this.hsv = { h: 215, s: 91, v: 100 }
+        this.hsv = defaultHsv()
         this.alpha = 1
         this.updateUI()
         this.updateHiddenInput("")
@@ -152,8 +160,8 @@ export default class extends RegistryController {
     setValue(value) {
         if (this.disabledValue) return
 
-        this.hsv = this.parseColorToHSV(value)
-        this.alpha = this.extractAlpha(value)
+        this.hsv = parseColorToHsv(value)
+        this.alpha = extractAlpha(value)
         this.updateUI()
         this.updateHiddenInput(value)
         this.dispatchEvent("change", { value, hsv: this.hsv, alpha: this.alpha })
@@ -292,7 +300,7 @@ export default class extends RegistryController {
     handleColorInput(event) {
         // Real-time input - don't update yet, just validate
         const value = event.target.value
-        if (this.isValidColor(value)) {
+        if (isValidColor(value)) {
             event.target.classList.remove("hakumi-color-picker-input-invalid")
         } else {
             event.target.classList.add("hakumi-color-picker-input-invalid")
@@ -302,9 +310,9 @@ export default class extends RegistryController {
     handleColorInputChange(event) {
         const value = event.target.value
 
-        if (this.isValidColor(value)) {
-            this.hsv = this.parseColorToHSV(value)
-            this.alpha = this.extractAlpha(value)
+        if (isValidColor(value)) {
+            this.hsv = parseColorToHsv(value)
+            this.alpha = extractAlpha(value)
             this.updateUI()
             this.emitColorChange()
             event.target.classList.remove("hakumi-color-picker-input-invalid")
@@ -343,7 +351,7 @@ export default class extends RegistryController {
         if (!this.hasSaturationTarget) return
 
         const hue = this.hsv.h
-        const baseColor = this.hsvToRgb(hue, 100, 100)
+        const baseColor = hsvToRgb(hue, 100, 100)
         this.saturationTarget.style.backgroundColor = `rgb(${baseColor.r}, ${baseColor.g}, ${baseColor.b})`
     }
 
@@ -371,7 +379,7 @@ export default class extends RegistryController {
     updateAlphaSlider() {
         if (!this.hasAlphaSliderTarget) return
 
-        const rgb = this.hsvToRgb(this.hsv.h, this.hsv.s, this.hsv.v)
+        const rgb = hsvToRgb(this.hsv.h, this.hsv.s, this.hsv.v)
         const colorStr = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
 
         this.alphaSliderTarget.style.background = `
@@ -424,282 +432,12 @@ export default class extends RegistryController {
         this.hiddenInputTarget.dispatchEvent(new Event("change", { bubbles: true }))
     }
 
-    // ===== COLOR CONVERSION =====
+    // ===== COLOR FORMATTING =====
 
     getCurrentColor() {
-        switch (this.formatValue) {
-            case "hex":
-                return this.hsvToHex(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
-            case "rgb":
-                return this.hsvToRgbString(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
-            case "hsl":
-                return this.hsvToHslString(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
-            case "hsb":
-                return this.hsvToHsbString(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
-            default:
-                return this.hsvToHex(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
-        }
-    }
-
-    parseColorToHSV(color) {
-        if (!color) return { h: 215, s: 91, v: 100 }
-
-        color = color.trim()
-
-        // HEX
-        if (color.startsWith("#")) {
-            return this.hexToHsv(color)
-        }
-
-        // RGB/RGBA
-        if (color.startsWith("rgb")) {
-            return this.rgbStringToHsv(color)
-        }
-
-        // HSL/HSLA
-        if (color.startsWith("hsl")) {
-            return this.hslStringToHsv(color)
-        }
-
-        // HSB/HSBA (treat as HSV)
-        if (color.startsWith("hsb")) {
-            return this.hsbStringToHsv(color)
-        }
-
-        return { h: 215, s: 91, v: 100 }
-    }
-
-    extractAlpha(color) {
-        if (!color) return 1
-
-        color = color.trim()
-
-        // RGBA
-        if (color.startsWith("rgba")) {
-            const match = color.match(/rgba?\(([^)]+)\)/)
-            if (match) {
-                const parts = match[1].split(",").map(p => p.trim())
-                if (parts[3]) return parseFloat(parts[3])
-            }
-        }
-
-        // HSLA
-        if (color.startsWith("hsla")) {
-            const match = color.match(/hsla?\(([^)]+)\)/)
-            if (match) {
-                const parts = match[1].split(",").map(p => p.trim())
-                if (parts[3]) return parseFloat(parts[3])
-            }
-        }
-
-        // HEX with alpha (#RRGGBBAA)
-        if (color.startsWith("#") && color.length === 9) {
-            const alpha = parseInt(color.slice(7, 9), 16)
-            return Math.round((alpha / 255) * 100) / 100
-        }
-
-        return 1
-    }
-
-    // HSV to RGB
-    hsvToRgb(h, s, v) {
-        h = h / 360
-        s = s / 100
-        v = v / 100
-
-        const i = Math.floor(h * 6)
-        const f = h * 6 - i
-        const p = v * (1 - s)
-        const q = v * (1 - f * s)
-        const t = v * (1 - (1 - f) * s)
-
-        let r, g, b
-
-        switch (i % 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
-            case 5: r = v; g = p; b = q; break
-        }
-
-        return {
-            r: Math.round(r * 255),
-            g: Math.round(g * 255),
-            b: Math.round(b * 255)
-        }
-    }
-
-    // RGB to HSV
-    rgbToHsv(r, g, b) {
-        r = r / 255
-        g = g / 255
-        b = b / 255
-
-        const max = Math.max(r, g, b)
-        const min = Math.min(r, g, b)
-        const delta = max - min
-
-        let h = 0
-        let s = max === 0 ? 0 : delta / max
-        let v = max
-
-        if (delta !== 0) {
-            if (max === r) {
-                h = ((g - b) / delta + (g < b ? 6 : 0)) / 6
-            } else if (max === g) {
-                h = ((b - r) / delta + 2) / 6
-            } else {
-                h = ((r - g) / delta + 4) / 6
-            }
-        }
-
-        return {
-            h: Math.round(h * 360),
-            s: Math.round(s * 100),
-            v: Math.round(v * 100)
-        }
-    }
-
-    // HEX conversions
-    hexToHsv(hex) {
-        hex = hex.replace("#", "")
-
-        const r = parseInt(hex.slice(0, 2), 16)
-        const g = parseInt(hex.slice(2, 4), 16)
-        const b = parseInt(hex.slice(4, 6), 16)
-
-        return this.rgbToHsv(r, g, b)
-    }
-
-    hsvToHex(h, s, v, alpha = 1) {
-        const rgb = this.hsvToRgb(h, s, v)
-        const hex = `#${this.toHex(rgb.r)}${this.toHex(rgb.g)}${this.toHex(rgb.b)}`
-
-        if (alpha < 1 && !this.disabledAlphaValue) {
-            const alphaHex = this.toHex(Math.round(alpha * 255))
-            return `${hex}${alphaHex}`
-        }
-
-        return hex
-    }
-
-    toHex(n) {
-        const hex = n.toString(16)
-        return hex.length === 1 ? "0" + hex : hex
-    }
-
-    // RGB string conversions
-    rgbStringToHsv(rgbString) {
-        const match = rgbString.match(/rgba?\(([^)]+)\)/)
-        if (!match) return { h: 215, s: 91, v: 100 }
-
-        const [r, g, b] = match[1].split(",").map(p => parseInt(p.trim()))
-        return this.rgbToHsv(r, g, b)
-    }
-
-    hsvToRgbString(h, s, v, alpha = 1) {
-        const rgb = this.hsvToRgb(h, s, v)
-
-        if (alpha < 1 && !this.disabledAlphaValue) {
-            return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`
-        }
-
-        return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
-    }
-
-    // HSL conversions
-    hslStringToHsv(hslString) {
-        const match = hslString.match(/hsla?\(([^)]+)\)/)
-        if (!match) return { h: 215, s: 91, v: 100 }
-
-        const parts = match[1].split(",").map(p => p.trim())
-        const h = parseFloat(parts[0])
-        const s = parseFloat(parts[1])
-        const l = parseFloat(parts[2])
-
-        return this.hslToHsv(h, s, l)
-    }
-
-    hslToHsv(h, s, l) {
-        s = s / 100
-        l = l / 100
-
-        const v = l + s * Math.min(l, 1 - l)
-        const sv = v === 0 ? 0 : 2 * (1 - l / v)
-
-        return {
-            h: Math.round(h),
-            s: Math.round(sv * 100),
-            v: Math.round(v * 100)
-        }
-    }
-
-    hsvToHsl(h, s, v) {
-        s = s / 100
-        v = v / 100
-
-        const l = v * (1 - s / 2)
-        const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l)
-
-        return {
-            h: Math.round(h),
-            s: Math.round(sl * 100),
-            l: Math.round(l * 100)
-        }
-    }
-
-    hsvToHslString(h, s, v, alpha = 1) {
-        const hsl = this.hsvToHsl(h, s, v)
-
-        if (alpha < 1 && !this.disabledAlphaValue) {
-            return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`
-        }
-
-        return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`
-    }
-
-    // HSB conversions (HSB is same as HSV)
-    hsbStringToHsv(hsbString) {
-        const match = hsbString.match(/hsba?\(([^)]+)\)/)
-        if (!match) return { h: 215, s: 91, v: 100 }
-
-        const parts = match[1].split(",").map(p => p.trim())
-        return {
-            h: Math.round(parseFloat(parts[0])),
-            s: Math.round(parseFloat(parts[1])),
-            v: Math.round(parseFloat(parts[2]))
-        }
-    }
-
-    hsvToHsbString(h, s, v, alpha = 1) {
-        if (alpha < 1 && !this.disabledAlphaValue) {
-            return `hsba(${h}, ${s}%, ${v}%, ${alpha})`
-        }
-
-        return `hsb(${h}, ${s}%, ${v}%)`
-    }
-
-    // Color validation
-    isValidColor(color) {
-        if (!color) return false
-
-        color = color.trim()
-
-        // HEX
-        if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(color)) return true
-
-        // RGB/RGBA
-        if (/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d.]+\s*)?\)$/.test(color)) return true
-
-        // HSL/HSLA
-        if (/^hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(color)) return true
-
-        // HSB/HSBA
-        if (/^hsba?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(color)) return true
-
-        return false
+        return formatHsvColor(this.hsv, this.alpha, this.formatValue, {
+            disabledAlpha: this.disabledAlphaValue
+        })
     }
 
     // ===== UTILS =====