feat(color): improve int ARGB/ABGR support

- add CSS conversions - add ARGB<>ABGR swapping - add converters for RGB/SRGB
thi-ng · Feb 2, 2021 · 6460e4d · 6460e4d
1 parent 6b5dd8e
commit 6460e4d
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 8 deletions.
diff --git a/packages/color/src/css/css.ts b/packages/color/src/css/css.ts
@@ -4,14 +4,17 @@ import type { ColorMode, IParsedColor, MaybeColor, TypedColor } from "../api";
 import { convert } from "../convert";
 import { hslCss } from "../hsl/hsl-css";
 import { hsvCss } from "../hsv/hsv-css";
-import { int32Css } from "../int/int-css";
+import { intArgb32Css } from "../int/int-css";
+import { intAbgr32Argb32 } from "../int/int-int";
 import { labCss } from "../lab/lab-css";
 import { labLabD65_50 } from "../lab/lab-lab";
 import { lchCss } from "../lch/lch-css";
 import { rgbCss } from "../rgb/rgb-css";
 import { srgbCss } from "../srgb/srgb-css";
 
 const CSS_CONVERSIONS: Partial<Record<ColorMode, Fn<any, string>>> = {
+    abgr32: (x) => intArgb32Css(intAbgr32Argb32(x[0])),
+    argb32: (x) => intArgb32Css(x[0]),
     hsl: hslCss,
     hsv: hsvCss,
     lab50: labCss,
@@ -37,7 +40,7 @@ export const css = (src: Exclude<MaybeColor, IParsedColor>) => {
     return isString(src)
         ? src
         : isNumber(src)
-        ? int32Css(src)
+        ? intArgb32Css(src)
         : (<TypedColor<any>>src).mode
         ? (asCss = CSS_CONVERSIONS[(<TypedColor<any>>src).mode])
             ? asCss(src)

diff --git a/packages/color/src/index.ts b/packages/color/src/index.ts
@@ -29,6 +29,7 @@ export * from "./hsv/hsv-rgb";
 export * from "./hsv/hsv";
 
 export * from "./int/int-css";
+export * from "./int/int-int";
 export * from "./int/int-rgb";
 export * from "./int/int-srgb";
 export * from "./int/int";

diff --git a/packages/color/src/int/int-css.ts b/packages/color/src/int/int-css.ts
@@ -1,9 +1,7 @@
-import type { IDeref } from "@thi.ng/api";
 import { U24 } from "@thi.ng/strings";
 import { FF, INV8BIT } from "../api/constants";
 
-export const int32Css = (src: number | IDeref<number>) => {
-    src = typeof src === "number" ? src : src.deref();
+export const intArgb32Css = (src: number) => {
     const a = src >>> 24;
     return a < 255
         ? `rgba(${(src >> 16) & 0xff},${(src >> 8) & 0xff},${src & 0xff},${FF(
@@ -12,5 +10,4 @@ export const int32Css = (src: number | IDeref<number>) => {
         : `#${U24(src & 0xffffff)}`;
 };
 
-export const int24Css = (src: number | IDeref<number>) =>
-    `#${U24((typeof src === "number" ? src : src.deref()) & 0xffffff)}`;
+export const intRgb24Css = (src: number) => `#${U24(src & 0xffffff)}`;
diff --git a/packages/color/src/int/int-int.ts b/packages/color/src/int/int-int.ts
@@ -0,0 +1,12 @@
+/**
+ * Convert ARGB int to ABGR and vice versa.
+ *
+ * @param x
+ */
+export const intArgb32Abgr32 = (x: number) =>
+    ((x & 0xff) << 16) | ((x >> 16) & 0xff) | (x & 0xff00ff00);
+
+/**
+ * Same as {@link intArgbAbgr}.
+ */
+export const intAbgr32Argb32 = intArgb32Abgr32;
diff --git a/packages/color/src/rgb/rgb.ts b/packages/color/src/rgb/rgb.ts
@@ -7,6 +7,7 @@ import { hcyRgb } from "../hcy/hcy-rgb";
 import { hsiRgb } from "../hsi/hsi-rgb";
 import { hslRgb } from "../hsl/hsl-rgb";
 import { hsvRgb } from "../hsv/hsv-rgb";
+import { intAbgr32Rgb, intArgb32Rgb } from "../int/int-rgb";
 import { lchLab } from "../lab/lab-lch";
 import { labRgb, labRgbD65 } from "../lab/lab-rgb";
 import { oklabRgb } from "../oklab/oklab-rgb";
@@ -42,6 +43,8 @@ export const rgb = <ColorFactory<RGB>>defColor({
     mode: "rgb",
     order: <const>["r", "g", "b", "alpha"],
     from: {
+        abgr32: (out, src) => intAbgr32Rgb(out, src[0]),
+        argb32: (out, src) => intArgb32Rgb(out, src[0]),
         hcy: hcyRgb,
         hsi: hsiRgb,
         hsl: hslRgb,

diff --git a/packages/color/src/srgb/srgb.ts b/packages/color/src/srgb/srgb.ts
@@ -2,6 +2,7 @@ import type { NumericArray } from "@thi.ng/api";
 import type { IRandom } from "@thi.ng/random";
 import type { Color, ColorFactory, ReadonlyColor, TypedColor } from "../api";
 import { defColor } from "../defcolor";
+import { intAbgr32Srgb, intArgb32Srgb } from "../int/int-srgb";
 import { rgbSrgb } from "../rgb/rgb-srgb";
 
 export declare class SRGB implements TypedColor<SRGB> {
@@ -30,5 +31,9 @@ export declare class SRGB implements TypedColor<SRGB> {
 export const srgb = <ColorFactory<SRGB>>defColor({
     mode: "srgb",
     order: <const>["r", "g", "b", "alpha"],
-    from: { rgb: rgbSrgb },
+    from: {
+        abgr32: (out, src) => intAbgr32Srgb(out, src[0]),
+        argb32: (out, src) => intArgb32Srgb(out, src[0]),
+        rgb: rgbSrgb,
+    },
 });