hex and hsl working

demo/src/ColourWheel.tsx

@@ -1,4 +1,4 @@
-import React, {createRef, CSSProperties, useEffect, useLayoutEffect, useState} from "react";
+import React, {createRef, CSSProperties, useEffect} from "react";
 import chroma from "chroma-js"
 
 interface IProps {
@@ -18,7 +18,6 @@ const ColourWheel: React.FC<IProps> = ({inputs, style}) => {
 		function plot([h, s, l]: [number, number, number]) {
 
 			// coordinate
-			console.log(h, s, l);
 			const degrees = (h / (Math.PI * 180));
 			const theta = (h) * Math.PI/180;
 			const maxRadius = (current as any).offsetWidth / 2;

src/ColourChisel.ts

@@ -1,7 +1,7 @@
 import {IColourChisel, IInput} from "./interface";
 import compile from "./compiler";
-import {determineInput, InputType} from "./utils/determineInput";
-import rgbToHSL from "./converters/rgbToHSL";
+import {determineInput, InputType} from "./converters/determineInput";
+import {rgbStringToHSL} from "./converters/rgbToHSL";
 import hexToHSL from "./converters/hexToHSL";
 import hslToRGB from "./converters/hslToRGB";
 import hslToHex from "./converters/hslToHex";
@@ -15,7 +15,7 @@ class ColourChisel implements IColourChisel {
 	constructor(input?: IInput) {
 		switch (determineInput(input)) {
 			case InputType.RGB:
-				this.path = [rgbToHSL(input as [number, number, number])]
+				this.path = [rgbStringToHSL(input as string)];
 				break;
 			case InputType.HSL:
 				this.path = [input as [number, number, number]];

src/utils/determineInput.ts → src/converters/determineInput.ts

@@ -9,7 +9,7 @@ enum InputType {
 }
 
 const hexRegExp = RegExp("^#(?:[0-9a-fA-F]{3}){1,2}$");
-
+const rgbRegExp = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
 // Duplicate checks are here to make reading and adding new checks easier.
 function determineInput(input: any): InputType {
 	// null or undefined check
@@ -19,17 +19,17 @@ function determineInput(input: any): InputType {
 
 	// hex check
 	if (typeof input === "string" && hexRegExp.test(input)) {
-		return InputType.HEX
+		return InputType.HEX;
 	}
 
-	// hsl check
-	if (Array.isArray(input) && input.length === 3) {
-		return InputType.HSL;
+	// rgb check
+	if (typeof input === "string" && rgbRegExp.test(input)) {
+		return InputType.RGB;
 	}
 
-	// rgb check
+	// hsl check
 	if (Array.isArray(input) && input.length === 3) {
-		return InputType.RGB
+		return InputType.HSL;
 	}
 
 	// colour chisel check

src/converters/hslToHex.ts

@@ -1,7 +1,7 @@
 function hslToHex([_h, _s, _l]: [number, number, number]): string {
 	const h = _h / 360;
-	const s = _s /100;
-	const l = _l / 100;
+	const s = _s;
+	const l = _l;
 	let r, g, b;
 	if (s === 0) {
 		r = g = b = l; // achromatic

src/converters/rgbToHSL.ts

@@ -1,41 +1,30 @@
 function rgbToHSL([_r, _g, _b]: [number, number, number]): [number, number, number] {
-	const r = 255 / _r;
-	const g = 255 / _g;
-	const b = 255 / _b;
-
-	// Find greatest and smallest channel values
-	let cmin = Math.min(r,g,b),
-		cmax = Math.max(r,g,b),
-		delta = cmax - cmin,
-		h = 0,
-		s = 0,
-		l = 0;
-
-	if (delta == 0) {
-		h = 0;
-	}
-	else if (cmax == r) {
-		h = ((g - b) / delta) % 6;
-	}
-	else if (cmax == g) {
-		h = (b - r) / delta + 2;
-	}
-	else {
-		h = (r - g) / delta + 4;
-	}
-
-	h = Math.round(h * 60);
+	let r: number = _r;
+	let g: number = _g;
+	let b: number = _b;
+	r /= 255;
+	g /= 255;
+	b /= 255;
+
+	var max = Math.max(r, g, b), min = Math.min(r, g, b);
+	var h, s, l = (max + min) / 2;
+
+	if (max == min) {
+		h = s = 0; // achromatic
+	} else {
+		var d = max - min;
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+		switch (max) {
+			case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+			case g: h = (b - r) / d + 2; break;
+			case b: h = (r - g) / d + 4; break;
+		}
 
-	if (h < 0) {
-		h += 360;
+		h /= 6;
 	}
 
-	l = (cmax + cmin) / 2;
-	s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-	s = +(s * 100).toFixed(1);
-	l = +(l * 100).toFixed(1);
-
-	return [h, s, l]
+	return [ h, s, l ];
 }
 
 function rgbStringToHSL(_rgb: string): [number, number, number] {

test/pathing.test.ts

@@ -7,28 +7,27 @@ describe("test creating paths and transformations", () => {
 
 	it ("create an 'S' path", () => {
 		colourChisel = new ColourChisel(sPath);
-		const hexPath = colourChisel.hex();
+		const hexPath = colourChisel.hsl();
 		expect(hexPath).to.be.deep.equal(sPath);
 	});
 
 	it ("rotate the 'S' +90", () => {
-		const hexPath = colourChisel.rotate(90).hex();
-		console.log(hexPath, sr90Path);
+		const hexPath = colourChisel.rotate(90).hsl();
 		expect(hexPath).to.be.deep.equal(sr90Path);
 	});
 
 	it ("rotate the 'S' -90", () => {
-		const hexPath = colourChisel.rotate(-90).hex();
+		const hexPath = colourChisel.rotate(-90).hsl();
 		expect(hexPath).to.be.deep.equal(srNeg90Path);
 	});
 
 	it ("scale the 'S' 0.5x", () => {
-		const hexPath = colourChisel.scale(0.5).hex();
+		const hexPath = colourChisel.scale(0.5).hsl();
 		expect(hexPath).to.be.deep.equal(sScaleHalfPath);
 	});
 
 	it ("scale the 'S' 2x", () => {
-		const hexPath = colourChisel.scale(2).hex();
+		const hexPath = colourChisel.scale(2).hsl();
 		expect(hexPath).to.be.deep.equal(sScaleDoublePath);
 	});
 });

test/sData.ts

@@ -1,24 +1,23 @@
-import chroma from "chroma-js";
-
 // this file hold all the necessary data for testing easily
 
 // Standard 'S'
-export const s0 = chroma("red").hex();
-export const s1 = chroma(s0).set("hsl.h", "-45").hex();
-export const s2 = chroma(s1).set("hsl.h", "-45").hex();
-export const s3 = chroma(s0).set("hsl.h", "+180").hex();
-export const s4 = chroma(s1).set("hsl.h", "+180").hex();
-export const s5 = chroma(s2).set("hsl.h", "+180").hex();
-export const sPath = [s0, s1, s2, s3, s4, s5];
+const s0: [number, number, number] = [90, 0.5, 0.5];
+const [h, s, l]: [number, number, number] = s0;
+const s1: [number, number, number] = [h + 30, s, l];
+const s2: [number, number, number] = [h - 30, s, l];
+const s3: [number, number, number] = [h + 145, s, l];
+const s4: [number, number, number] = [h + 180, s, l];
+const s5: [number, number, number] = [h + 215, s, l];
+export const sPath: Array<[number, number, number]> = [s2, s0, s1, s5, s4, s3];
 
 // Rotated 'S' 90 degrees
-export const sr90Path = sPath.map(h => chroma(h).set("hsl.h", "+90").hex());
+export const sr90Path = sPath.map(([h, s, l]) => [h + 90, s, l]);
 
 // Rotated 'S' -90 degrees
-export const srNeg90Path = sPath.map(h => chroma(h).set("hsl.h", "-90").hex());
+export const srNeg90Path = sPath.map(([h, s, l]) => [h - 90, s, l]);
 
 // Scaled 'S' 0.5x
-export const sScaleHalfPath = sPath.map(h => chroma(h).set("hsl.s", Math.round(chroma(h).hsl[1] * 0.5)).hex());
+export const sScaleHalfPath = sPath.map(([h, s, l]) => [h, s * 0.5, l]);
 
 // Scaled 'S' 2x
-export const sScaleDoublePath = sPath.map(h => chroma(h).set("hsl.s", Math.round(chroma(h).hsl[1] * 2)).hex());
+export const sScaleDoublePath = sPath.map(([h, s, l]) => [h, s * 2, l]);

test/singularExporting.test.ts

@@ -2,27 +2,27 @@ import ColourChisel from "../src";
 import {expect} from "chai";
 
 describe("test the basic utilities of passing a colour in and exporting to different variations", () => {
-	const hex = '#646464';
-	const rgb = 'rgb(100,100,100)';
-	const rgba = 'rgba(100,100,100,1)';
+	const hex = '#ff0000';
+	const rgb = 'rgb(255,0,0)';
+	const hsl = [0, 1, 0.5];
 
 	describe("use hex as input", testInput(hex));
-	describe("use rgb as input", testInput(hex));
-	describe("use rgba as input", testInput(hex));
+	describe("use rgb as input", testInput(rgb));
+	describe("use hsl as input", testInput(hsl));
 
-	function testInput(input: string) {
+	function testInput(input) {
 		return () => {
 			const cc = new ColourChisel(input);
 			it("output to hex", () => {
 				expect(cc.hex()).to.deep.equal([hex]);
 			});
 
 			it("output to rgb", () => {
-				expect(cc.rgb()).to.deep.equal([rgb]);
+				expect(cc.rgb()).to.deep.equal([[255, 0, 0]]);
 			});
 
-			it("output to rgba", () => {
-				expect(cc.rgba()).to.deep.equal([rgba])
+			it("output to hsl", () => {
+				expect(cc.hsl()).to.deep.equal([hsl]);
 			});
 		}
 	}