@fils/color 0.0.1

package/lib/canvas-utils.d.ts

@@ -0,0 +1,3 @@
+export declare function drawColorWheel(canvas: HTMLCanvasElement): void;
+export declare function drawColorPickerBar(canvas: HTMLCanvasElement, x?: number, y?: number, width?: number, height?: number): void;
+export declare function drawColorPickerSL(canvas: HTMLCanvasElement, angle: number, x?: number, y?: number, width?: number, height?: number): void;

package/lib/canvas-utils.js

@@ -0,0 +1,49 @@
+import { hsbToHex } from "./utils";
+export function drawColorWheel(canvas) {
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const radius = Math.min(canvas.width, canvas.height) / 2;
+    const ctx = canvas.getContext('2d');
+    for (let i = 0; i < 360; i++) {
+        const rad = (i * Math.PI) / 180;
+        const x = centerX + radius * Math.cos(rad);
+        const y = centerY + radius * Math.sin(rad);
+        ctx.beginPath();
+        ctx.arc(x, y, 5, 0, 2 * Math.PI);
+        ctx.fillStyle = `hsl(${i}, 100%, 50%)`;
+        ctx.fill();
+    }
+}
+export function drawColorPickerBar(canvas, x, y, width, height) {
+    const _x = x !== undefined ? x : 0;
+    const _y = y !== undefined ? y : 0;
+    const w = width !== undefined ? width : canvas.width;
+    const h = height !== undefined ? height : canvas.height;
+    const ctx = canvas.getContext('2d');
+    for (let i = 0; i < w; i++) {
+        const dx = _x + i;
+        const angle = 360 * i / w;
+        ctx.fillStyle = `hsl(${angle}, 100%, 50%)`;
+        ctx.fillRect(dx, _y, 1, h);
+    }
+}
+export function drawColorPickerSL(canvas, angle, x, y, width, height) {
+    const _x = x !== undefined ? x : 0;
+    const _y = y !== undefined ? y : 0;
+    const w = width !== undefined ? width : canvas.width;
+    const h = height !== undefined ? height : canvas.height;
+    const ctx = canvas.getContext('2d');
+    const sw = w / 100;
+    const sh = h / 100;
+    for (let i = 0; i <= 100; i++) {
+        for (let j = 0; j <= 100; j++) {
+            const hex = hsbToHex({
+                h: angle,
+                s: j,
+                b: i
+            });
+            ctx.fillStyle = hex;
+            ctx.fillRect(_x + w * j / 100, _y + h - h * i / 100, sw, sh);
+        }
+    }
+}

package/lib/main.d.ts

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './canvas-utils';

package/lib/main.js

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './canvas-utils';

package/lib/utils.d.ts

@@ -0,0 +1,26 @@
+export type RGBColor = {
+    r: number;
+    g: number;
+    b: number;
+};
+export type HSBColor = {
+    h: number;
+    s: number;
+    b: number;
+};
+export type HSLColor = {
+    h: number;
+    s: number;
+    l: number;
+};
+export declare function componentToHex(c: number): string;
+export declare function rgbToHex(color: RGBColor): string;
+export declare function hexToRgb(hex: string): RGBColor;
+export declare function rgbToHsl(color: RGBColor): HSLColor;
+export declare function hslToRgb(color: HSLColor): RGBColor;
+export declare function hslToHex(color: HSLColor): string;
+export declare function rgbToHsb(color: RGBColor): HSBColor;
+export declare function hsbToRgb(color: HSBColor): RGBColor;
+export declare function hsbToHex(color: HSBColor): string;
+export declare function rgbToString(color: RGBColor): string;
+export declare function hsbToString(color: HSBColor): string;

package/lib/utils.js

@@ -0,0 +1,129 @@
+export function componentToHex(c) {
+    const hex = c.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+}
+export function rgbToHex(color) {
+    return '#' + componentToHex(color.r) + componentToHex(color.g) + componentToHex(color.b);
+}
+export function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+    } : { r: 0, g: 0, b: 0 };
+}
+export function rgbToHsl(color) {
+    const r = color.r / 255, g = color.g / 255, b = color.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+    if (max == min) {
+        h = s = 0;
+    }
+    else {
+        let 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;
+        }
+        h /= 6;
+    }
+    return {
+        h: h,
+        s: s,
+        l: l
+    };
+}
+function hue2rgb(p, q, t) {
+    if (t < 0)
+        t += 1;
+    if (t > 1)
+        t -= 1;
+    if (t < 1 / 6)
+        return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+        return q;
+    if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+}
+export function hslToRgb(color) {
+    let r, g, b;
+    const h = color.h, s = color.s, l = color.l;
+    if (s == 0) {
+        r = g = b = l;
+    }
+    else {
+        let q = color.l < 0.5 ? l * (1 + s) : l + s - l * s;
+        let p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return {
+        r: Math.round(r * 255),
+        g: Math.round(g * 255),
+        b: Math.round(b * 255)
+    };
+}
+export function hslToHex(color) {
+    return rgbToHex(hslToRgb(color));
+}
+export function rgbToHsb(color) {
+    const r = color.r / 255;
+    const g = color.g / 255;
+    const b = color.b / 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0, v = max;
+    const d = max - min;
+    s = max === 0 ? 0 : d / max;
+    if (max === min) {
+        h = 0;
+    }
+    else {
+        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;
+        }
+        h /= 6;
+    }
+    return { h: h * 360, s: s * 100, b: v * 100 };
+}
+export function hsbToRgb(color) {
+    let h = color.h, s = color.s, b = color.b;
+    s /= 100;
+    b /= 100;
+    const k = (n) => (n + h / 60) % 6;
+    const f = (n) => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
+    return {
+        r: Math.round(255 * f(5)),
+        g: Math.round(255 * f(3)),
+        b: Math.round(255 * f(1))
+    };
+}
+export function hsbToHex(color) {
+    const rgb = hsbToRgb(color);
+    return rgbToHex(rgb);
+}
+export function rgbToString(color) {
+    return `R: ${color.r}, G: ${color.g}, B: ${color.b}`;
+}
+export function hsbToString(color) {
+    return `H: ${color.h}, S: ${color.s}, B: ${color.b}`;
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@fils/color",
+	"version": "0.0.1",
+	"description": "Color Package written in TypeScript",
+	"main": "lib/main.js",
+	"repository": "git@github.com:fil-studio/fils.git",
+	"homepage": "https://github.com/fil-studio/fils/tree/main/packages/color",
+	"author": "fil studio <hello@fil.studio>",
+	"license": "Apache-2.0",
+	"private": false,
+	"scripts": {
+		"prepare": "yarn build",
+		"build": "tsc --build tsconfig.color.json"
+	},
+	"files": [
+		"lib",
+		"examples",
+		"README.md"
+	],
+	"devDependencies": {
+		"typescript": "^4.8.4"
+	}
+}