fix: round color output values

web-padawan · Oct 22, 2020 · a68c80a · a68c80a
1 parent a76dd0b
commit a68c80a
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 33 deletions.
diff --git a/src/lib/components/alpha.ts b/src/lib/components/alpha.ts
@@ -1,7 +1,7 @@
 import { Interactive, Interaction } from './interactive.js';
 import { hsvaToHslaString } from '../utils/convert.js';
 import { createTemplate, createRoot } from '../utils/dom.js';
-import { clamp } from '../utils/clamp.js';
+import { clamp, round } from '../utils/math.js';
 import styles from '../styles/alpha.js';
 import type { HsvaColor } from '../types';
 
@@ -48,9 +48,9 @@ export class Alpha extends Interactive {
       left: `${value}%`,
       color: hsvaToHslaString(hsva)
     });
-    const round = Math.round(value);
-    this.setAttribute('aria-valuenow', `${round}`);
-    this.setAttribute('aria-valuetext', `${round}%`);
+    const v = round(value);
+    this.setAttribute('aria-valuenow', `${v}`);
+    this.setAttribute('aria-valuetext', `${v}%`);
   }
 
   getMove(interaction: Interaction, key?: boolean): Record<string, number> {

diff --git a/src/lib/components/hue.ts b/src/lib/components/hue.ts
@@ -1,7 +1,7 @@
 import { Interactive, Interaction } from './interactive.js';
 import { hsvaToHslString } from '../utils/convert.js';
 import { createTemplate, createRoot } from '../utils/dom.js';
-import { clamp } from '../utils/clamp.js';
+import { clamp, round } from '../utils/math.js';
 import styles from '../styles/hue.js';
 
 const template = createTemplate(`<style>${styles}</style>`);
@@ -39,7 +39,7 @@ export class Hue extends Interactive {
       left: `${(h / 360) * 100}%`,
       color: hsvaToHslString({ h, s: 100, v: 100, a: 1 })
     });
-    this.setAttribute('aria-valuenow', `${Math.round(h)}`);
+    this.setAttribute('aria-valuenow', `${round(h)}`);
   }
 
   getMove(interaction: Interaction, key?: boolean): Record<string, number> {

diff --git a/src/lib/components/interactive.ts b/src/lib/components/interactive.ts
@@ -1,5 +1,5 @@
 import { createTemplate, createRoot } from '../utils/dom.js';
-import { clamp } from '../utils/clamp.js';
+import { clamp } from '../utils/math.js';
 import styles from '../styles/interactive.js';
 
 export interface Interaction {

diff --git a/src/lib/components/saturation.ts b/src/lib/components/saturation.ts
@@ -1,7 +1,7 @@
 import { Interactive, Interaction } from './interactive.js';
 import { hsvaToHslString } from '../utils/convert.js';
 import { createTemplate, createRoot } from '../utils/dom.js';
-import { clamp } from '../utils/clamp.js';
+import { clamp, round } from '../utils/math.js';
 import styles from '../styles/saturation.js';
 import type { HsvaColor } from '../types';
 
@@ -42,7 +42,7 @@ export class Saturation extends Interactive {
     });
     this.setAttribute(
       'aria-valuetext',
-      `Saturation ${Math.round(hsva.s)}%, Brightness ${Math.round(hsva.v)}%`
+      `Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`
     );
   }
 

diff --git a/src/lib/entrypoints/hsva.ts b/src/lib/entrypoints/hsva.ts
@@ -1,11 +1,12 @@
 import type { ColorModel, HsvaColor } from '../types';
 import { AlphaColorPicker } from '../components/alpha-color-picker.js';
 import { equalColorObjects } from '../utils/compare.js';
+import { roundHsva } from '../utils/convert.js';
 
 const colorModel: ColorModel<HsvaColor> = {
   defaultColor: { h: 0, s: 0, v: 0, a: 1 },
   toHsva: (hsva) => hsva,
-  fromHsva: (hsva) => hsva,
+  fromHsva: roundHsva,
   equal: equalColorObjects,
   fromAttr: (color) => JSON.parse(color)
 };

diff --git a/src/lib/utils/convert.ts b/src/lib/utils/convert.ts
@@ -1,4 +1,5 @@
 import { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from '../types';
+import { round } from './math.js';
 
 export const hexToHsva = (hex: string): HsvaColor => rgbaToHsva(hexToRgba(hex));
 
@@ -55,20 +56,20 @@ export const hsvaToHsla = ({ h, s, v, a }: HsvaColor): HslaColor => {
   const hh = ((200 - s) * v) / 100;
 
   return {
-    h: h,
-    s: hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0,
-    l: hh / 2,
-    a
+    h: round(h),
+    s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),
+    l: round(hh / 2),
+    a: round(a, 2)
   };
 };
 
-export const hsvaToHsvString = (hsv: HsvaColor): string => {
-  const { h, s, v } = hsv;
+export const hsvaToHsvString = (hsva: HsvaColor): string => {
+  const { h, s, v } = roundHsva(hsva);
   return `hsv(${h}, ${s}%, ${v}%)`;
 };
 
 export const hsvaToHsvaString = (hsva: HsvaColor): string => {
-  const { h, s, v, a } = hsva;
+  const { h, s, v, a } = roundHsva(hsva);
   return `hsva(${h}, ${s}%, ${v}%, ${a})`;
 };
 
@@ -94,10 +95,10 @@ export const hsvaToRgba = ({ h, s, v, a }: HsvaColor): RgbaColor => {
     module = hh % 6;
 
   return {
-    r: Math.round([v, c, b, b, d, v][module] * 255),
-    g: Math.round([d, v, v, c, b, b][module] * 255),
-    b: Math.round([b, b, d, v, v, c][module] * 255),
-    a
+    r: round([v, c, b, b, d, v][module] * 255),
+    g: round([d, v, v, c, b, b][module] * 255),
+    b: round([b, b, d, v, v, c][module] * 255),
+    a: round(a, 2)
   };
 };
 
@@ -117,12 +118,12 @@ export const hsvaStringToHsva = (hsvString: string): HsvaColor => {
 
   if (!match) return { h: 0, s: 0, v: 0, a: 1 };
 
-  return {
+  return roundHsva({
     h: Number(match[1]),
     s: Number(match[2]),
     v: Number(match[3]),
     a: match[4] !== undefined ? Number(match[4]) : 1
-  };
+  });
 };
 
 export const hsvStringToHsva = hsvaStringToHsva;
@@ -166,15 +167,25 @@ export const rgbaToHsva = ({ r, g, b, a }: RgbaColor): HsvaColor => {
     : 0;
 
   return {
-    h: Math.round(60 * (hh < 0 ? hh + 6 : hh)),
-    s: Math.round(max ? (delta / max) * 100 : 0),
-    v: Math.round((max / 255) * 100),
+    h: round(60 * (hh < 0 ? hh + 6 : hh)),
+    s: round(max ? (delta / max) * 100 : 0),
+    v: round((max / 255) * 100),
     a
   };
 };
 
+export const roundHsva = (hsva: HsvaColor): HsvaColor => ({
+  h: round(hsva.h),
+  s: round(hsva.s),
+  v: round(hsva.v),
+  a: round(hsva.a, 2)
+});
+
 export const rgbaToRgb = ({ r, g, b }: RgbaColor): RgbColor => ({ r, g, b });
 
 export const hslaToHsl = ({ h, s, l }: HslaColor): HslColor => ({ h, s, l });
 
-export const hsvaToHsv = ({ h, s, v }: HsvaColor): HsvColor => ({ h, s, v });
+export const hsvaToHsv = (hsva: HsvaColor): HsvColor => {
+  const { h, s, v } = roundHsva(hsva);
+  return { h, s, v };
+};
diff --git a/src/lib/utils/clamp.ts → src/lib/utils/math.ts b/src/lib/utils/clamp.ts → src/lib/utils/math.ts
@@ -4,3 +4,7 @@
 export const clamp = (number: number, min = 0, max = 1): number => {
   return number > max ? max : number < min ? min : number;
 };
+
+export const round = (number: number, digits = 0, base = Math.pow(10, digits)): number => {
+  return Math.round(base * number) / base;
+};
diff --git a/src/test/color-picker.test.ts b/src/test/color-picker.test.ts
@@ -182,8 +182,7 @@ describe('hex-color-picker', () => {
       });
 
       it('should set saturation pointer color', () => {
-        const bgColor = hsvaToRgbString(rgbaToHsva(picker.color));
-        expect(getComputedStyle(getPointer(saturation)).color).to.equal(bgColor);
+        expect(getComputedStyle(getPointer(saturation)).color).to.equal('rgb(68, 136, 136)');
       });
 
       it('should set saturation pointer coordinates', () => {

diff --git a/src/test/utils.test.ts b/src/test/utils.test.ts
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { clamp } from '../lib/utils/clamp.js';
+import { clamp, round } from '../lib/utils/math.js';
 import {
   hexToHsva,
   hslaToHsl,
@@ -19,7 +19,8 @@ import {
   hsvStringToHsva,
   rgbaToHsva,
   rgbaToRgb,
-  rgbStringToHsva
+  rgbStringToHsva,
+  roundHsva
 } from '../lib/utils/convert.js';
 import { equalColorObjects, equalColorString, equalHex } from '../lib/utils/compare.js';
 import { validHex } from '../lib/utils/validate.js';
@@ -96,6 +97,7 @@ describe('Utils', () => {
 
     test({ h: 0, s: 0, v: 100, a: 1 }, { r: 255, g: 255, b: 255, a: 1 });
     test({ h: 0, s: 100, v: 100, a: 0.5 }, { r: 255, g: 0, b: 0, a: 0.5 });
+    test({ h: 0, s: 100, v: 100, a: 0.567 }, { r: 255, g: 0, b: 0, a: 0.57 });
   });
 
   it('Converts RGBA to HSVA', () => {
@@ -133,11 +135,11 @@ describe('Utils', () => {
   });
 
   it('Converts HSV string to HSVA', () => {
-    expect(hsvStringToHsva('hsv(0, 10.5%, 0%)')).to.deep.equal({ h: 0, s: 10.5, v: 0, a: 1 });
+    expect(hsvStringToHsva('hsv(0, 10.5%, 0%)')).to.deep.equal({ h: 0, s: 11, v: 0, a: 1 });
   });
 
   it('Converts HSVA string to HSVA', () => {
-    expect(hsvaStringToHsva('hsva(0, 10%, 0, 0.5)')).to.deep.equal({ h: 0, s: 10, v: 0, a: 0.5 });
+    expect(hsvaStringToHsva('hsva(0, 10.5%, 0, 0.5)')).to.deep.equal({ h: 0, s: 11, v: 0, a: 0.5 });
   });
 
   it('Converts HSVA to HSV', () => {
@@ -152,6 +154,14 @@ describe('Utils', () => {
     expect(rgbaToRgb({ r: 255, g: 255, b: 255, a: 1 })).to.deep.equal({ r: 255, g: 255, b: 255 });
   });
 
+  it('Rounds HSVA', () => {
+    const test = (input: HsvaColor, output: HsvaColor) =>
+      expect(roundHsva(input)).to.deep.equal(output);
+
+    test({ h: 1, s: 1, v: 1, a: 1 }, { h: 1, s: 1, v: 1, a: 1 });
+    test({ h: 3.3333, s: 4.4444, v: 5.5555, a: 0.6789 }, { h: 3, s: 4, v: 6, a: 0.68 });
+  });
+
   it('Compares two HEX colors', () => {
     expect(equalHex('#8c0dba', '#8c0dba')).to.equal(true);
     expect(equalHex('#FFFFFF', '#ffffff')).to.equal(true);
@@ -198,4 +208,15 @@ describe('Utils', () => {
     expect(clamp(-500, -50, 100)).to.equal(-50);
     expect(clamp(500, -50, 100)).to.equal(100);
   });
+
+  it('Rounds a number', () => {
+    expect(round(0)).to.equal(0);
+    expect(round(1)).to.equal(1);
+    expect(round(0.1)).to.equal(0);
+    expect(round(0.9)).to.equal(1);
+    expect(round(0.123, 2)).to.equal(0.12);
+    expect(round(0.789, 2)).to.equal(0.79);
+    expect(round(1, 10)).to.equal(1);
+    expect(round(0.123, 10)).to.equal(0.123);
+  });
 });