@tendaui/components 1.0.0 → 1.0.2

package/color-picker/utils/color-picker/color.ts

@@ -0,0 +1,467 @@
+import tinyColor from "tinycolor2";
+import { cmykInputToColor, rgb2cmyk } from "./cmyk";
+import { ALPHA_FORMAT_MAP } from "./constants";
+import { GradientColorPoint, GradientColors, isGradientColor, parseGradientString } from "./gradient";
+import type { AlphaConvertibleFormat, ColorFormat } from "./types";
+
+export interface ColorObject {
+  alpha: number;
+  css: string;
+  hex: string;
+  hex8: string;
+  hsl: string;
+  hsla: string;
+  hsv: string;
+  hsva: string;
+  rgb: string;
+  rgba: string;
+  saturation: number;
+  value: number;
+  isGradient: boolean;
+  linearGradient?: string;
+}
+
+interface ColorStates {
+  s: number;
+  v: number;
+  h: number;
+  a: number;
+}
+
+interface GradientStates {
+  colors: GradientColorPoint[];
+  degree: number;
+  selectedId: string;
+  css?: string;
+}
+
+const mathRound = Math.round;
+const hsv2rgba = (states: ColorStates): tinyColor.ColorFormats.RGBA => tinyColor(states).toRgb();
+const hsv2hsva = (states: ColorStates): tinyColor.ColorFormats.HSVA => tinyColor(states).toHsv();
+const hsv2hsla = (states: ColorStates): tinyColor.ColorFormats.HSLA => tinyColor(states).toHsl();
+
+/**
+ * 将渐变对象转换成字符串
+ */
+export const gradientColors2string = (object: GradientColors): string => {
+  const { points, degree } = object;
+  const colorsStop = points
+    .sort((pA, pB) => pA.left - pB.left)
+    .map((p) => `${p.color} ${Math.round(p.left * 100) / 100}%`);
+
+  return `linear-gradient(${degree}deg,${colorsStop.join(",")})`;
+};
+
+/**
+ * 去除颜色的透明度
+ */
+export const getColorWithoutAlpha = (color: string) => tinyColor(color).setAlpha(1).toHexString();
+
+// 生成一个随机ID
+export const genId = () => (1 + Math.random() * 4294967295).toString(16);
+
+/**
+ * 生成一个渐变颜色
+ * @param left
+ * @param color
+ * @returns
+ */
+export const genGradientPoint = (left: number, color: string, id?: string): GradientColorPoint => ({
+  id: id || genId(),
+  left,
+  color
+});
+
+export class Color {
+  states: ColorStates = {
+    s: 100,
+    v: 100,
+    h: 100,
+    a: 1
+  };
+
+  originColor: string;
+
+  isGradient: boolean;
+
+  gradientStates: GradientStates = {
+    colors: [],
+    degree: 0,
+    selectedId: null,
+    css: ""
+  };
+
+  constructor(input: string) {
+    this.update(input);
+  }
+
+  update(input: string) {
+    if (input === this.originColor) return;
+    const gradientColors = parseGradientString(input);
+
+    if (this.isGradient && !gradientColors) {
+      /* case 1: 渐变模式单独修改某个位置点的色值 */
+      const colorHsv = tinyColor(input).toHsv();
+      this.states = colorHsv;
+      this.updateCurrentGradientColor();
+      return;
+    }
+    this.originColor = input;
+    this.isGradient = false;
+    let colorInput = input;
+
+    /* case 2: 修改整个渐变，生成一套新的颜色点 */
+    if (gradientColors) {
+      this.isGradient = true;
+      const object = gradientColors as GradientColors;
+      const points = object.points.map((c, index) =>
+        genGradientPoint(c.left, c.color, this.gradientStates.colors[index]?.id)
+      );
+      this.gradientStates = {
+        colors: points,
+        degree: object.degree,
+        selectedId: this.gradientStates.selectedId || points[0]?.id || null
+      };
+      this.gradientStates.css = this.linearGradient;
+      colorInput = this.gradientSelectedPoint?.color;
+    }
+
+    this.updateStates(colorInput);
+  }
+
+  get saturation() {
+    return this.states.s;
+  }
+
+  set saturation(value) {
+    this.states.s = Math.max(0, Math.min(100, value));
+    this.updateCurrentGradientColor();
+  }
+
+  get value() {
+    return this.states.v;
+  }
+
+  set value(value) {
+    this.states.v = Math.max(0, Math.min(100, value));
+    this.updateCurrentGradientColor();
+  }
+
+  get hue() {
+    return this.states.h;
+  }
+
+  set hue(value) {
+    this.states.h = Math.max(0, Math.min(360, value));
+    this.updateCurrentGradientColor();
+  }
+
+  get alpha() {
+    return this.states.a;
+  }
+
+  set alpha(value) {
+    this.states.a = Math.max(0, Math.min(1, Math.round(value * 100) / 100));
+    this.updateCurrentGradientColor();
+  }
+
+  get rgb() {
+    const { r, g, b } = hsv2rgba(this.states);
+    return `rgb(${mathRound(r)}, ${mathRound(g)}, ${mathRound(b)})`;
+  }
+
+  get rgba() {
+    const { r, g, b, a } = hsv2rgba(this.states);
+    return `rgba(${mathRound(r)}, ${mathRound(g)}, ${mathRound(b)}, ${a})`;
+  }
+
+  get hsv() {
+    const { h, s, v } = this.getHsva();
+    return `hsv(${h}, ${s}%, ${v}%)`;
+  }
+
+  get hsva() {
+    const { h, s, v, a } = this.getHsva();
+    return `hsva(${h}, ${s}%, ${v}%, ${a})`;
+  }
+
+  get hsl() {
+    const { h, s, l } = this.getHsla();
+    return `hsl(${h}, ${s}%, ${l}%)`;
+  }
+
+  get hsla() {
+    const { h, s, l, a } = this.getHsla();
+    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+  }
+
+  get hex() {
+    return tinyColor(this.states).toHexString();
+  }
+
+  get hex8() {
+    return tinyColor(this.states).toHex8String();
+  }
+
+  get cmyk() {
+    const { c, m, y, k } = this.getCmyk();
+    return `cmyk(${c}, ${m}, ${y}, ${k})`;
+  }
+
+  get css() {
+    if (this.isGradient) {
+      return this.linearGradient;
+    }
+    return this.rgba;
+  }
+
+  get linearGradient() {
+    const { gradientColors, gradientDegree } = this;
+    return gradientColors2string({
+      points: gradientColors,
+      degree: gradientDegree
+    });
+  }
+
+  get gradientColors() {
+    return this.gradientStates.colors;
+  }
+
+  set gradientColors(colors: GradientColorPoint[]) {
+    this.gradientStates.colors = colors;
+    this.gradientStates.css = this.linearGradient;
+  }
+
+  get gradientSelectedId() {
+    return this.gradientStates.selectedId;
+  }
+
+  set gradientSelectedId(id: string) {
+    if (id === this.gradientSelectedId) {
+      return;
+    }
+    this.gradientStates.selectedId = id;
+    this.updateStates(this.gradientSelectedPoint?.color);
+  }
+
+  get gradientDegree() {
+    return this.gradientStates.degree;
+  }
+
+  set gradientDegree(degree: number) {
+    this.gradientStates.degree = Math.max(0, Math.min(360, degree));
+    this.gradientStates.css = this.linearGradient;
+  }
+
+  get gradientSelectedPoint() {
+    const { gradientColors, gradientSelectedId } = this;
+    return gradientColors.find((color) => color.id === gradientSelectedId);
+  }
+
+  getFormatsColorMap() {
+    return {
+      HEX: this.hex,
+      CMYK: this.cmyk,
+      RGB: this.rgb,
+      RGBA: this.rgba,
+      HSL: this.hsl,
+      HSLA: this.hsla,
+      HSV: this.hsv,
+      HSVA: this.hsva,
+      CSS: this.css,
+      HEX8: this.hex8
+    };
+  }
+
+  getFormattedColor(format: ColorFormat, enableAlpha: boolean) {
+    if (this.isGradient) return this.linearGradient;
+    const finalFormat = (
+      enableAlpha && format in ALPHA_FORMAT_MAP ? ALPHA_FORMAT_MAP[format as AlphaConvertibleFormat] : format
+    ) as keyof ReturnType<Color["getFormatsColorMap"]>;
+    return this.getFormatsColorMap()[finalFormat];
+  }
+
+  updateCurrentGradientColor() {
+    const { isGradient, gradientColors, gradientSelectedId } = this;
+    const { length } = gradientColors;
+    const current = this.gradientSelectedPoint;
+    if (!isGradient || length === 0 || !current) {
+      return false;
+    }
+    const index = gradientColors.findIndex((color) => color.id === gradientSelectedId);
+    const newColor = {
+      ...current,
+      color: this.rgba
+    };
+    gradientColors.splice(index, 1, newColor);
+    this.gradientColors = gradientColors.slice();
+    return this;
+  }
+
+  updateStates(input: string) {
+    const color = tinyColor(cmykInputToColor(input));
+    const hsva = color.toHsv();
+    this.states = hsva;
+  }
+
+  getRgba() {
+    const { r, g, b, a } = hsv2rgba(this.states);
+    return {
+      r: mathRound(r),
+      g: mathRound(g),
+      b: mathRound(b),
+      a
+    };
+  }
+
+  getCmyk() {
+    const { r, g, b } = this.getRgba();
+    const [c, m, y, k] = rgb2cmyk(r, g, b);
+    return {
+      c: mathRound(c * 100),
+      m: mathRound(m * 100),
+      y: mathRound(y * 100),
+      k: mathRound(k * 100)
+    };
+  }
+
+  getHsva(): tinyColor.ColorFormats.HSVA {
+    let { h, s, v, a } = hsv2hsva(this.states);
+    h = mathRound(h);
+    s = mathRound(s * 100);
+    v = mathRound(v * 100);
+    a *= 1;
+    return {
+      h,
+      s,
+      v,
+      a
+    };
+  }
+
+  getHsla(): tinyColor.ColorFormats.HSLA {
+    let { h, s, l, a } = hsv2hsla(this.states);
+    h = mathRound(h);
+    s = mathRound(s * 100);
+    l = mathRound(l * 100);
+    a *= 1;
+    return {
+      h,
+      s,
+      l,
+      a
+    };
+  }
+
+  /**
+   * 判断输入色是否与当前色相同
+   */
+  equals(color: string): boolean {
+    return tinyColor.equals(this.rgba, color);
+  }
+
+  /**
+   * 校验输入色是否是一个有效颜色
+   * @param color
+   * @returns
+   */
+  static isValid(color: string): boolean {
+    if (parseGradientString(color)) {
+      return true;
+    }
+    return tinyColor(color).isValid();
+  }
+
+  /**
+   * 对象转颜色字符串
+   */
+  static object2color(object: any, format: ColorFormat) {
+    if (format === "CMYK") {
+      const { c, m, y, k } = object;
+      return `cmyk(${c}, ${m}, ${y}, ${k})`;
+    }
+
+    if (format === "RGB" || format === "RGBA") {
+      return tinyColor(object).toRgbString();
+    }
+
+    if (format === "HSL" || format === "HSLA") {
+      return tinyColor(object).toHslString();
+    }
+
+    if (format === "HSV" || format === "HSVA") {
+      return tinyColor(object).toHsvString();
+    }
+
+    return tinyColor(object).toHexString();
+  }
+
+  /**
+   * 是否是渐变色
+   * @param input
+   * @returns
+   */
+  static isGradientColor = (input: string) => !!isGradientColor(input);
+
+  /**
+   * 比较两个颜色是否相同
+   * @param color1
+   * @param color2
+   * @returns
+   */
+  static compare = (color1: string, color2: string): boolean => {
+    const isGradientColor1 = Color.isGradientColor(color1);
+    const isGradientColor2 = Color.isGradientColor(color2);
+    if (isGradientColor1 && isGradientColor2) {
+      const gradientStr1 = parseGradientString(color1);
+      const gradientStr2 = parseGradientString(color2);
+      if (!gradientStr1 || !gradientStr2) return false;
+
+      const gradientColor1 = gradientColors2string(gradientStr1);
+      const gradientColor2 = gradientColors2string(gradientStr2);
+      return gradientColor1 === gradientColor2;
+    }
+    if (!isGradientColor1 && !isGradientColor2) {
+      return tinyColor.equals(color1, color2);
+    }
+    return false;
+  };
+}
+
+const COLOR_OBJECT_OUTPUT_KEYS = [
+  "alpha",
+  "css",
+  "hex",
+  "hex8",
+  "hsl",
+  "hsla",
+  "hsv",
+  "hsva",
+  "rgb",
+  "rgba",
+  "saturation",
+  "value",
+  "isGradient"
+];
+
+/**
+ * 获取对外输出的color对象
+ * @param color
+ * @returns
+ */
+export const getColorObject = (color: Color): ColorObject | null => {
+  if (!color) {
+    return null;
+  }
+  console.log(color);
+  const colorObject = Object.create(null);
+  COLOR_OBJECT_OUTPUT_KEYS.forEach((key) => {
+    colorObject[key] = (color as { [key: string]: any })[key];
+  });
+  if (color.isGradient) {
+    colorObject.linearGradient = color.linearGradient;
+  }
+  return colorObject;
+};
+
+export default Color;

package/color-picker/utils/color-picker/constants.ts

@@ -0,0 +1,187 @@
+import type { BasicColorFormat, ColorInputProp } from "./types";
+
+// 最近使用颜色最大个数
+export const TD_COLOR_USED_COLORS_MAX_SIZE = 100; // 每行10个
+
+// 颜色模式options配置
+export const COLOR_MODES = {
+  monochrome: "singleColor",
+  "linear-gradient": "gradientColor"
+};
+
+// 默认颜色
+export const DEFAULT_COLOR = "#001F97";
+
+// 默认渐变色
+export const DEFAULT_LINEAR_GRADIENT = "linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);";
+
+// 默认系统色彩
+export const DEFAULT_SYSTEM_SWATCH_COLORS = [
+  "#ECF2FE",
+  "#D4E3FC",
+  "#BBD3FB",
+  "#96BBF8",
+  "#699EF5",
+  "#4787F0",
+  "#266FE8",
+  "#0052D9",
+  "#0034B5",
+  "#001F97",
+  "#FDECEE",
+  "#F9D7D9",
+  "#F8B9BE",
+  "#F78D94",
+  "#F36D78",
+  "#E34D59",
+  "#C9353F",
+  "#B11F26",
+  "#951114",
+  "#680506",
+  "#FEF3E6",
+  "#F9E0C7",
+  "#F7C797",
+  "#F2995F",
+  "#ED7B2F",
+  "#D35A21",
+  "#BA431B",
+  "#9E3610",
+  "#842B0B",
+  "#5A1907",
+  "#E8F8F2",
+  "#BCEBDC",
+  "#85DBBE",
+  "#48C79C",
+  "#00A870",
+  "#078D5C",
+  "#067945",
+  "#056334",
+  "#044F2A",
+  "#033017"
+];
+
+/**
+ * 非透明色格式化类型
+ */
+export const FORMATS = ["HEX", "RGB", "HSL", "HSV", "CMYK", "CSS"] as const;
+
+/**
+ * 透明色格式化类型映射
+ */
+export const ALPHA_FORMAT_MAP = {
+  HEX: "HEX8",
+  RGB: "RGBA",
+  HSL: "HSLA",
+  HSV: "HSVA"
+} as const;
+
+/**
+ * 不同格式对应的输入框
+ */
+export const COLOR_FORMAT_INPUTS: Record<BasicColorFormat, ColorInputProp[]> = {
+  RGB: [
+    {
+      key: "r",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "g",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "b",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    }
+  ],
+  HSV: [
+    {
+      key: "h",
+      min: 0,
+      max: 360,
+      type: "inputNumber"
+    },
+    {
+      key: "s",
+      min: 0,
+      max: 100,
+      type: "inputNumber"
+    },
+    {
+      key: "v",
+      min: 0,
+      max: 100,
+      type: "inputNumber"
+    }
+  ],
+  HSL: [
+    {
+      key: "h",
+      min: 0,
+      max: 360,
+      type: "inputNumber"
+    },
+    {
+      key: "s",
+      min: 0,
+      max: 100,
+      type: "inputNumber"
+    },
+    {
+      key: "l",
+      min: 0,
+      max: 100,
+      type: "inputNumber"
+    }
+  ],
+  CMYK: [
+    {
+      key: "c",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "m",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "y",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    },
+    {
+      key: "k",
+      min: 0,
+      max: 255,
+      type: "inputNumber"
+    }
+  ],
+  CSS: [
+    {
+      key: "css",
+      type: "input",
+      flex: 3
+    }
+  ],
+  HEX: [
+    {
+      key: "hex",
+      type: "input",
+      flex: 3
+    }
+  ]
+};
+
+// 色板尺寸
+export const SATURATION_PANEL_DEFAULT_WIDTH = 230;
+export const SATURATION_PANEL_DEFAULT_HEIGHT = 168;
+export const SLIDER_DEFAULT_WIDTH = 186;
+export const GRADIENT_SLIDER_DEFAULT_WIDTH = 176;