@cloudbase/cals 1.0.58-alpha.0 → 1.0.58-alpha.1

package/lib/utils/color-generator/core.d.ts

@@ -0,0 +1,52 @@
+interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+/**
+ * 获取色相
+ * @param hsv 主色 hsv
+ * @param i index
+ * @returns 色相
+ */
+export declare const getHue: (hsv: HSV, i: number, { isTop, hueStep, }: {
+    /** 是否为主色前（主色前为浅色）？ */
+    isTop: boolean;
+    /** 色相阶梯 */
+    hueStep: number;
+}) => number;
+/**
+ * 获取饱和度
+ * 1-10 饱和度变化 => 饱和度从小到大
+ * @param hsv 主色 hsv
+ * @param i index
+ * @returns 饱和度
+ */
+export declare const getSaturation: (hsv: HSV, i: number, { isTop, topColorCount, topSaturationStep, bottomSaturationStep, }: {
+    /** 是否为主色前（主色前为浅色）？ */
+    isTop: boolean;
+    /** 显示在主色前面的颜色个数 */
+    topColorCount: number;
+    /** 饱和度阶梯（主色前） */
+    topSaturationStep: number;
+    /** 饱和度阶梯（主色后） */
+    bottomSaturationStep: number;
+}) => number;
+/**
+ * 获取亮度
+ * HSV 中 V 控制纯色中混入黑色的量，量越大，黑色越少，亮度越高
+ * 1-10 亮度变化 => 亮度从大到小 => 亮度越来越小
+ * @param hsv 主色 hsv
+ * @param i index
+ * @returns 亮度
+ */
+export declare const getBrightness: (hsv: HSV, i: number, { isTop, topBrightnessStep, bottomBrightnessStep, }: {
+    /** 是否为主色前（主色前为浅色）？ */
+    isTop: boolean;
+    /** 亮度阶梯（主色前） */
+    topBrightnessStep: number;
+    /** 亮度阶梯（主色后） */
+    bottomBrightnessStep: number;
+}) => number;
+export {};
+//# sourceMappingURL=core.d.ts.map

package/lib/utils/color-generator/core.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.d.ts","sourceRoot":"","sources":["../../../src/utils/color-generator/core.ts"],"names":[],"mappings":"AAAA,UAAU,GAAG;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,QACZ,GAAG,KACL,MAAM;IAKP,sBAAsB;WACf,OAAO;IAEd,WAAW;aACF,MAAM;YAqBlB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,QACnB,GAAG,KACL,MAAM;IAOP,sBAAsB;WACf,OAAO;IAEd,mBAAmB;mBACJ,MAAM;IAErB,iBAAiB;uBACE,MAAM;IAEzB,iBAAiB;0BACK,MAAM;YAiB/B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,QACnB,GAAG,KACL,MAAM;IAMP,sBAAsB;WACf,OAAO;IAEd,gBAAgB;uBACG,MAAM;IAEzB,gBAAgB;0BACM,MAAM;YAO/B,CAAC"}

package/lib/utils/color-generator/core.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBrightness = exports.getSaturation = exports.getHue = void 0;
+/**
+ * 获取色相
+ * @param hsv 主色 hsv
+ * @param i index
+ * @returns 色相
+ */
+const getHue = (hsv, i, { isTop, hueStep, }) => {
+    let hue;
+    // H: [60, 240] 为暖色调，其他为冷色调
+    if (Math.round(hsv.h) >= 60 && Math.round(hsv.h) <= 240) {
+        // 主色为冷色调
+        // 1-10 色相变化 => 色相从小到大 => 色相逆时针旋转 => 更冷
+        hue = isTop ? Math.round(hsv.h) - hueStep * i : Math.round(hsv.h) + hueStep * i;
+    }
+    else {
+        // 主色为暖色调
+        // 1-10 色相变化 => 色相从大到小 => 色相顺时针旋转 => 更暖
+        hue = isTop ? Math.round(hsv.h) + hueStep * i : Math.round(hsv.h) - hueStep * i;
+    }
+    if (hue < 0 || hue >= 360) {
+        hue = Math.abs(Math.abs(hue) - 360);
+    }
+    return hue;
+};
+exports.getHue = getHue;
+/**
+ * 获取饱和度
+ * 1-10 饱和度变化 => 饱和度从小到大
+ * @param hsv 主色 hsv
+ * @param i index
+ * @returns 饱和度
+ */
+const getSaturation = (hsv, i, { isTop, topColorCount, topSaturationStep, bottomSaturationStep, }) => {
+    // 不改变灰色的饱和度
+    if (hsv.h === 0 && hsv.s === 0) {
+        return hsv.s;
+    }
+    let saturation = isTop ? hsv.s - topSaturationStep * i : hsv.s + bottomSaturationStep * i;
+    saturation = Math.max(0.06, Math.min(saturation, 1));
+    // 主色前 1 个饱和度限制在 0.06-0.1 之间
+    if (isTop && i === topColorCount && saturation > 0.1) {
+        saturation = 0.1;
+    }
+    return Number(saturation.toFixed(2));
+};
+exports.getSaturation = getSaturation;
+/**
+ * 获取亮度
+ * HSV 中 V 控制纯色中混入黑色的量，量越大，黑色越少，亮度越高
+ * 1-10 亮度变化 => 亮度从大到小 => 亮度越来越小
+ * @param hsv 主色 hsv
+ * @param i index
+ * @returns 亮度
+ */
+const getBrightness = (hsv, i, { isTop, topBrightnessStep, bottomBrightnessStep, }) => {
+    let value = isTop ? hsv.v + topBrightnessStep * i : hsv.v - bottomBrightnessStep * i;
+    value = Math.min(value, 1);
+    return Number(value.toFixed(2));
+};
+exports.getBrightness = getBrightness;

package/lib/utils/color-generator/generate.d.ts

@@ -0,0 +1,67 @@
+export interface GenerateColorPaletteOptions {
+    /** 主色对应的颜色值 */
+    primaryColor: string;
+    /**
+     * 显示在主色前面的颜色个数
+     * @default 4
+     */
+    topColorCount?: number;
+    /**
+     * 饱和度阶梯（主色前）
+     * @default 0.16
+     */
+    topSaturationStep?: number;
+    /**
+     * 亮度阶梯（主色前）
+     * @default 0.05
+     */
+    topBrightnessStep?: number;
+    /**
+     * 显示在主色后面的颜色个数
+     * @default 2
+     */
+    bottomColorCount?: number;
+    /**
+     * 饱和度阶梯（主色后）
+     * @default 0.05
+     */
+    bottomSaturationStep?: number;
+    /**
+     * 亮度阶梯（主色后）
+     * @default 0.15
+     */
+    bottomBrightnessStep?: number;
+    /**
+     * 色相阶梯
+     * @default 2
+     */
+    hueStep?: number;
+}
+/**
+ * 根据主色生成色板
+ * @link https://github.com/hd996/color-generate
+ * @link https://zhuanlan.zhihu.com/p/32422584
+ * @link https://github.com/ant-design/ant-design/blob/3.x-stable/components/style/color/colorPalette.less
+ */
+export declare const generateColorPalette: (opt: GenerateColorPaletteOptions) => string[];
+/**
+ * 根据主色自动生成阶梯色
+ */
+export declare function generateStepColors(option: {
+    /**
+     * 主色对应的颜色值
+     * @example 'rgb(0, 82, 217)'
+     */
+    primaryColor: string;
+    /** 需要生成的阶梯色个数（>= 1） */
+    stepCount: number;
+    /**
+     * 主色基准值（1-based）
+     *
+     * *如果未指定 `primaryOrder`，则 `primaryOrder` 会根据传入的 `primaryColor` 及 `stepCount` 的取值自动计算*
+     */
+    primaryOrder?: number;
+}): {
+    stepColors: string[];
+};
+//# sourceMappingURL=generate.d.ts.map

package/lib/utils/color-generator/generate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate.d.ts","sourceRoot":"","sources":["../../../src/utils/color-generator/generate.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,2BAA2B;IAC1C,eAAe;IACf,YAAY,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAuBD;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,QAAS,2BAA2B,aAiEpE,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE;IACzC;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB,uBAAuB;IACvB,SAAS,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;;EA4BA"}

package/lib/utils/color-generator/generate.js

@@ -0,0 +1,100 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateStepColors = exports.generateColorPalette = void 0;
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const utils_1 = require("./utils");
+const core_1 = require("./core");
+const defaultOptions = {
+    topColorCount: 4,
+    topSaturationStep: 0.16,
+    topBrightnessStep: 0.05,
+    bottomColorCount: 2,
+    bottomSaturationStep: 0.05,
+    bottomBrightnessStep: 0.15,
+    hueStep: 2,
+};
+/**
+ * 根据主色生成色板
+ * @link https://github.com/hd996/color-generate
+ * @link https://zhuanlan.zhihu.com/p/32422584
+ * @link https://github.com/ant-design/ant-design/blob/3.x-stable/components/style/color/colorPalette.less
+ */
+const generateColorPalette = (opt) => {
+    const { primaryColor, topColorCount, topSaturationStep, topBrightnessStep, bottomColorCount, bottomSaturationStep, bottomBrightnessStep, hueStep, } = (0, utils_1.mergeProps)(defaultOptions, opt);
+    const colors = [];
+    const hsv = (0, tinycolor2_1.default)(primaryColor).toHsv();
+    // 主色前
+    for (let i = topColorCount; i > 0; i -= 1) {
+        const color = (0, tinycolor2_1.default)({
+            h: (0, core_1.getHue)(hsv, i, {
+                isTop: true,
+                hueStep,
+            }),
+            s: (0, core_1.getSaturation)(hsv, i, {
+                isTop: true,
+                topColorCount,
+                topSaturationStep,
+                bottomSaturationStep,
+            }),
+            v: (0, core_1.getBrightness)(hsv, i, {
+                isTop: true,
+                topBrightnessStep,
+                bottomBrightnessStep,
+            }),
+        }).toRgbString();
+        colors.push(color);
+    }
+    // 主色
+    colors.push((0, tinycolor2_1.default)(primaryColor).toRgbString());
+    // 主色后
+    for (let i = 1; i <= bottomColorCount; i += 1) {
+        const color = (0, tinycolor2_1.default)({
+            h: (0, core_1.getHue)(hsv, i, {
+                isTop: false,
+                hueStep,
+            }),
+            s: (0, core_1.getSaturation)(hsv, i, {
+                isTop: false,
+                topColorCount,
+                topSaturationStep,
+                bottomSaturationStep,
+            }),
+            v: (0, core_1.getBrightness)(hsv, i, {
+                isTop: false,
+                topBrightnessStep,
+                bottomBrightnessStep,
+            }),
+        }).toRgbString();
+        colors.push(color);
+    }
+    return colors;
+};
+exports.generateColorPalette = generateColorPalette;
+/**
+ * 根据主色自动生成阶梯色
+ */
+function generateStepColors(option) {
+    var _a;
+    const { primaryColor } = option;
+    /** 阶梯色个数 (>= 1) */
+    const stepCount = Math.max(1, option.stepCount);
+    /** 主色基准值 (>= 1) */
+    const primaryOrder = Math.max(1, (_a = option.primaryOrder) !== null && _a !== void 0 ? _a : 
+    // 根据颜色明度自动计算基准值 (范围：[1, stepCount])
+    Math.floor(1 + (stepCount - 1) * (1 - (0, utils_1.calculateLuminance)(primaryColor))));
+    /** 生成的阶梯色列表 */
+    const stepColors = (0, exports.generateColorPalette)({
+        primaryColor,
+        topColorCount: primaryOrder - 1,
+        topSaturationStep: 0.06 + 0.04 * (primaryOrder / stepCount),
+        topBrightnessStep: 0.05 + 0.05 * (primaryOrder / stepCount),
+        bottomColorCount: stepCount - primaryOrder,
+        bottomSaturationStep: 0.08 + 0.05 * ((stepCount - primaryOrder) / stepCount),
+        bottomBrightnessStep: 0.06 + 0.04 * ((stepCount - primaryOrder) / stepCount),
+    });
+    return { stepColors };
+}
+exports.generateStepColors = generateStepColors;

package/lib/utils/color-generator/utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @author yomeeliu
+ */
+export declare function mergeProps<A, B>(a: A, b: B): B & A;
+export declare function mergeProps<A, B, C>(a: A, b: B, c: C): C & B & A;
+/**
+ * @author yomeeliu
+ * 计算指定颜色的明度
+ *
+ * *返回 [0-1] 间的某个值*
+ *
+ * @link https://github.com/mattdesl/color-luminance/blob/master/index.js
+ */
+export declare function calculateLuminance(color: string): number;
+//# sourceMappingURL=utils.d.ts.map

package/lib/utils/color-generator/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils/color-generator/utils.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACpD,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAajE;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,UAS/C"}

package/lib/utils/color-generator/utils.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateLuminance = exports.mergeProps = void 0;
+const assign_1 = __importDefault(require("lodash/assign"));
+const assignWith_1 = __importDefault(require("lodash/assignWith"));
+const isUndefined_1 = __importDefault(require("lodash/isUndefined"));
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+function mergeProps(...items) {
+    function customizer(objValue, srcValue) {
+        return (0, isUndefined_1.default)(srcValue) ? objValue : srcValue;
+    }
+    let ret = (0, assign_1.default)({}, items[0]);
+    for (let i = 1; i < items.length; i += 1) {
+        ret = (0, assignWith_1.default)(ret, items[i], customizer);
+    }
+    return ret;
+}
+exports.mergeProps = mergeProps;
+/**
+ * @author yomeeliu
+ * 计算指定颜色的明度
+ *
+ * *返回 [0-1] 间的某个值*
+ *
+ * @link https://github.com/mattdesl/color-luminance/blob/master/index.js
+ */
+function calculateLuminance(color) {
+    const { r, g, b } = (0, tinycolor2_1.default)(color).toRgb();
+    const arr = [r, g, b].map((v) => {
+        v /= 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow(((v + 0.055) / 1.055), 2.4);
+    });
+    return +(0.2126 * arr[0] + 0.7152 * arr[1] + 0.0722 * arr[2]).toFixed(2);
+}
+exports.calculateLuminance = calculateLuminance;