feat: calculate normalized RGB value

packages/ctool-core/src/tools/color/Color.vue

@@ -21,10 +21,11 @@ import xyzPlugin from 'colord/plugins/xyz';
 import namesPlugin from 'colord/plugins/names';
 import lchPlugin from 'colord/plugins/lch';
 import * as AColorPicker from 'a-color-picker';
+import {normalizeRGBStringify, normalized2RGB} from './util';
 
 extend([cmykPlugin, hwbPlugin, namesPlugin, lchPlugin, labPlugin, xyzPlugin]);
 
-const typeLists = ["name", "hex", "rgb", "hsl", "hwb", "cmyk", "lch", "hsv", "lab", "xyz"]
+const typeLists = ["name", "hex", "rgb", "hsl", "hwb", "cmyk", "lch", "hsv", "lab", "xyz", "normalizedRgb"]
 
 const action = useAction(await initialize({
     type: "rgb",
@@ -67,7 +68,13 @@ const getHandle = (target: string) => {
         return action.current.input
     }
     try {
-        const color = colord(["hsv", "lab", "xyz"].includes(action.current.type) ? JSON.parse(action.current.input) : action.current.input);
+        const color = colord(
+            ["hsv", "lab", "xyz"].includes(action.current.type) 
+            ? JSON.parse(action.current.input) 
+            : action.current.type === 'normalizedRgb' 
+                ? normalized2RGB(action.current.input) 
+                : action.current.input
+        )
         let result = ""
 
         if (target === 'name') {
@@ -100,6 +107,9 @@ const getHandle = (target: string) => {
         if (target === 'xyz') {
             result = JSON.stringify(color.toXyz());
         }
+        if (target === 'normalizedRgb') {
+            result = normalizeRGBStringify(color.toRgb())
+        }
         return result;
     } catch (e) {
         return $error(e)
@@ -131,6 +141,7 @@ const colorLch = computed(handler('lch'))
 const colorHsv = computed(handler('hsv'))
 const colorLab = computed(handler('lab'))
 const colorXyz = computed(handler('xyz'))
+const colorRgbNormalized = computed(handler('normalizedRgb'))
 
 const colorInstance = {
     name: colorName,
@@ -143,6 +154,7 @@ const colorInstance = {
     hsv: colorHsv,
     lab: colorLab,
     xyz: colorXyz,
+    normalizedRgb: colorRgbNormalized,
 }
 watch(() => {
     return {color: colorRgb.value}
@@ -166,6 +178,7 @@ const example = (() => {
         hsv: JSON.stringify(color.toHsv()),
         lab: JSON.stringify(color.toLab()),
         xyz: JSON.stringify(color.toXyz()),
+        normalizedRgb: normalizeRGBStringify(color.toRgb()),
     }
 })()
 </script>

packages/ctool-core/src/tools/color/util.ts

@@ -0,0 +1,29 @@
+import { RgbColor } from 'colord'
+
+const ensure = (v: number, min: number = 0, max: number = 255) => {
+  if (Number.isNaN(v)) v = 0
+  return Math.max(min, Math.min(max, v))
+}
+
+const normalizeRGB = (color: RgbColor) => {
+  const { r, g, b } = color
+  return  {
+    r: Number(ensure(r) / 255).toFixed(5),
+    g: Number(ensure(g) / 255).toFixed(5),
+    b: Number(ensure(b) / 255).toFixed(5),
+  }
+}
+
+export const normalized2RGB = (color: string) => {
+  const [r, g, b] = color.split(',').map(v => ensure(Number(v), 0, 1))
+  return { 
+    r: r * 255,
+    g: g * 255,
+    b: b * 255,
+  }  
+}
+
+export const normalizeRGBStringify = (color: RgbColor) => {
+  const { r, g, b } = normalizeRGB(color)
+  return `${r}, ${g}, ${b}`
+}