-
Notifications
You must be signed in to change notification settings - Fork 7.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
192 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,6 +7,7 @@ | |
| ### ⚡ Performance Improvements | ||
|
|
||
| - 优化 settingDrawer 代码 | ||
| - 优化多标签页切换速度 | ||
|
|
||
| ### 🐛 Bug Fixes | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| /** | ||
| * 判断是否 十六进制颜色值. | ||
| * 输入形式可为 #fff000 #f00 | ||
| * | ||
| * @param String color 十六进制颜色值 | ||
| * @return Boolean | ||
| */ | ||
| export const isHexColor = function (color: string) { | ||
| const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; | ||
| return reg.test(color); | ||
| }; | ||
|
|
||
| /** | ||
| * RGB 颜色值转换为 十六进制颜色值. | ||
| * r, g, 和 b 需要在 [0, 255] 范围内 | ||
| * | ||
| * @param Number r 红色色值 | ||
| * @param Number g 绿色色值 | ||
| * @param Number b 蓝色色值 | ||
| * @return String 类似#ff00ff | ||
| */ | ||
| export const rgbToHex = function (r: number, g: number, b: number) { | ||
| // tslint:disable-next-line:no-bitwise | ||
| const hex = ((r << 16) | (g << 8) | b).toString(16); | ||
| return '#' + new Array(Math.abs(hex.length - 7)).join('0') + hex; | ||
| }; | ||
|
|
||
| /** | ||
| * Transform a HEX color to its RGB representation | ||
| * @param {string} hex The color to transform | ||
| * @returns The RGB representation of the passed color | ||
| */ | ||
| export const hexToRGB = function (hex: string) { | ||
| return ( | ||
| parseInt(hex.substring(0, 2), 16) + | ||
| ',' + | ||
| parseInt(hex.substring(2, 4), 16) + | ||
| ',' + | ||
| parseInt(hex.substring(4, 6), 16) | ||
| ); | ||
| }; | ||
|
|
||
| /** | ||
| * Darkens a HEX color given the passed percentage | ||
| * @param {string} color The color to process | ||
| * @param {number} amount The amount to change the color by | ||
| * @returns {string} The HEX representation of the processed color | ||
| */ | ||
| export const darken = (color: string, amount: number) => { | ||
| color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color; | ||
| amount = Math.trunc((255 * amount) / 100); | ||
| return `#${subtractLight(color.substring(0, 2), amount)}${subtractLight( | ||
| color.substring(2, 4), | ||
| amount | ||
| )}${subtractLight(color.substring(4, 6), amount)}`; | ||
| }; | ||
|
|
||
| /** | ||
| * Lightens a 6 char HEX color according to the passed percentage | ||
| * @param {string} color The color to change | ||
| * @param {number} amount The amount to change the color by | ||
| * @returns {string} The processed color represented as HEX | ||
| */ | ||
| export const lighten = (color: string, amount: number) => { | ||
| color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color; | ||
| amount = Math.trunc((255 * amount) / 100); | ||
| return `#${addLight(color.substring(0, 2), amount)}${addLight( | ||
| color.substring(2, 4), | ||
| amount | ||
| )}${addLight(color.substring(4, 6), amount)}`; | ||
| }; | ||
|
|
||
| /* Suma el porcentaje indicado a un color (RR, GG o BB) hexadecimal para aclararlo */ | ||
| /** | ||
| * Sums the passed percentage to the R, G or B of a HEX color | ||
| * @param {string} color The color to change | ||
| * @param {number} amount The amount to change the color by | ||
| * @returns {string} The processed part of the color | ||
| */ | ||
| const addLight = (color: string, amount: number) => { | ||
| const cc = parseInt(color, 16) + amount; | ||
| const c = cc > 255 ? 255 : cc; | ||
| return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`; | ||
| }; | ||
|
|
||
| /** | ||
| * Calculates luminance of an rgb color | ||
| * @param {number} r red | ||
| * @param {number} g green | ||
| * @param {number} b blue | ||
| */ | ||
| const luminanace = (r: stri, g: number, b: number) => { | ||
| const a = [r, g, b].map((v) => { | ||
| v /= 255; | ||
| return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); | ||
| }); | ||
| return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722; | ||
| }; | ||
|
|
||
| /** | ||
| * Calculates contrast between two rgb colors | ||
| * @param {string} rgb1 rgb color 1 | ||
| * @param {string} rgb2 rgb color 2 | ||
| */ | ||
| const contrast = (rgb1: string[], rgb2: number[]) => | ||
| (luminanace(rgb1[0], ~~rgb1[1], ~~rgb1[2]) + 0.05) / | ||
| (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 0.05); | ||
|
|
||
| /** | ||
| * Determines what the best text color is (black or white) based con the contrast with the background | ||
| * @param hexColor - Last selected color by the user | ||
| */ | ||
| export const calculateBestTextColor = (hexColor: string) => { | ||
| const rgbColor = hexToRGB(hexColor.substring(1)); | ||
| const contrastWithBlack = contrast(rgbColor.split(','), [0, 0, 0]); | ||
|
|
||
| return contrastWithBlack >= 12 ? '#000000' : '#FFFFFF'; | ||
| }; | ||
|
|
||
| /** | ||
| * Subtracts the indicated percentage to the R, G or B of a HEX color | ||
| * @param {string} color The color to change | ||
| * @param {number} amount The amount to change the color by | ||
| * @returns {string} The processed part of the color | ||
| */ | ||
| const subtractLight = (color: string, amount: number) => { | ||
| const cc = parseInt(color, 16) - amount; | ||
| const c = cc < 0 ? 0 : cc; | ||
| return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`; | ||
| }; |