Color picker refactoring

js/entity/ColorChannelRealValueEntity.js

@@ -1,9 +0,0 @@
-import Utility from "../Utility"
-import IntegerEntity from "./IntegerEntity"
-
-export default class ColorChannelRealValueEntity extends IntegerEntity {
-
-    toString() {
-        return (this.value / 255).toFixed(6)
-    }
-}

js/entity/ColorChannelValueEntity.js

@@ -1,15 +0,0 @@
-import Utility from "../Utility"
-import IntegerEntity from "./IntegerEntity"
-
-export default class ColorChannelValueEntity extends IntegerEntity {
-
-    static attributes = {
-        value: Number,
-    }
-
-    /** @param {Object | Number | String} options */
-    constructor(options = 0) {
-        super(options)
-        this.value = Utility.clamp(this.value, 0, 255)
-    }
-}

js/entity/LinearColorEntity.js

@@ -1,37 +1,56 @@
-import ColorChannelRealValueEntity from "./ColorChannelRealValueEntity"
 import IEntity from "./IEntity"
 import Utility from "../Utility"
+import RealUnitEntity from "./UnitRealEntity"
 
 export default class LinearColorEntity extends IEntity {
 
     static attributes = {
-        R: ColorChannelRealValueEntity,
-        G: ColorChannelRealValueEntity,
-        B: ColorChannelRealValueEntity,
-        A: ColorChannelRealValueEntity,
+        R: RealUnitEntity,
+        G: RealUnitEntity,
+        B: RealUnitEntity,
+        A: new RealUnitEntity(1),
     }
 
     static fromWheelLocation([x, y], radius) {
         x -= radius
         y -= radius
-        const mod = Math.sqrt(x * x + y * y)
+        const [r, theta] = Utility.getPolarCoordinates([x, y])
+        return LinearColorEntity.fromHSV([-theta, r])
+    }
+
+    /** @param {Number[]} param0 */
+    static fromHSV([h, s, v, a = 1]) {
+        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)
+        const values = [v, q, p, p, t, v]
+        const [r, g, b] = [values[i % 6], values[(i + 4) % 6], values[(i + 2) % 6]]
+        return new LinearColorEntity({
+            R: r,
+            G: g,
+            B: b,
+            A: a,
+        })
     }
 
     constructor(options = {}) {
         super(options)
-        /** @type {ColorChannelRealValueEntity} */ this.R
-        /** @type {ColorChannelRealValueEntity} */ this.G
-        /** @type {ColorChannelRealValueEntity} */ this.B
-        /** @type {ColorChannelRealValueEntity} */ this.A
+        /** @type {RealUnitEntity} */ this.R
+        /** @type {RealUnitEntity} */ this.G
+        /** @type {RealUnitEntity} */ this.B
+        /** @type {RealUnitEntity} */ this.A
     }
 
     toRGBA() {
-        return [this.R, this.G, this.B, this.A]
+        return [this.R.value * 255, this.G.value * 255, this.B.value * 255, this.A.value * 255]
     }
 
     toHSV() {
-        const max = Math.max(this.R.value, this.G.value, this.B.value)
-        const min = Math.min(this.R.value, this.G.value, this.B.value)
+        const [r, g, b, a] = this.toRGBA()
+        const max = Math.max(r, g, b)
+        const min = Math.min(r, g, b)
         const d = max - min
         let h
         const s = (max == 0 ? 0 : d / max)
@@ -40,14 +59,14 @@ export default class LinearColorEntity extends IEntity {
             case min:
                 h = 0
                 break
-            case this.R.value:
-                h = (this.G.value - this.B.value) + d * (this.G.value < this.B.value ? 6 : 0)
+            case r:
+                h = (g - b) + d * (g < b ? 6 : 0)
                 break
-            case this.G.value:
-                h = (this.B.value - this.R.value) + d * 2
+            case g:
+                h = (b - r) + d * 2
                 break
-            case this.B.value:
-                h = (this.R.value - this.G.value) + d * 4
+            case b:
+                h = (r - g) + d * 4
                 break
         }
         h /= 6 * d
@@ -55,7 +74,7 @@ export default class LinearColorEntity extends IEntity {
     }
 
     toNumber() {
-        return (this.R.value << 24) + (this.G.value << 16) + (this.B.value << 8) + this.A.value
+        return (this.R.value * 0xff << 3 * 0x8) + (this.G.value * 0xff << 2 * 0x8) + (this.B.value * 0xff << 0x8) + this.A.value
     }
 
     toString() {

js/entity/UnitRealEntity.js

@@ -0,0 +1,24 @@
+import IEntity from "./IEntity"
+import Utility from "../Utility"
+
+export default class RealUnitEntity extends IEntity {
+
+    static attributes = {
+        value: Number,
+    }
+
+    /** @param {Object | Number | String} options */
+    constructor(options = 0) {
+        super(options)
+        /** @type {Number} */
+        this.value = Utility.clamp(this.value, 0, 1)
+    }
+
+    valueOf() {
+        return this.value
+    }
+
+    toString() {
+        return this.value.toFixed(6)
+    }
+}