css-color-parser-h 1.0.5 → 2.0.1

package/src/main.ts

@@ -1,307 +0,0 @@
-/*
- * @Descripttion: 颜色解析器
- * @version: 1.0.0
- * @Author: roman_123
- * @Date: 2021-01-19 09:22:11
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2022-12-06 19:43:45
- */
-import { CssColorStringParser } from './utils/color-tools'
-import { Check, defaultValue, limitNumber } from './utils/common'
-const convert = require('color-convert')
-export class CssColorParser {
-  r = 255
-  g = 255
-  b = 255
-  a = 1
-  constructor(
-    red?: number | string,
-    green?: number | string,
-    blue?: number | string,
-    alpha?: number | string
-  ) {
-    this.setColor(red, green, blue, alpha)
-  }
-  /**
-   * 设置颜色
-   * @param red
-   * @param green
-   * @param blue
-   * @param alpha
-   * @example: this.setColor(255,255,255,1)
-   */
-  setColor(
-    red?: number | string,
-    green?: number | string,
-    blue?: number | string,
-    alpha?: number | string
-  ) {
-    this.r = limitNumber(0, 255, defaultValue(Number(red), 0))
-    this.g = limitNumber(0, 255, defaultValue(Number(green), 0))
-    this.b = limitNumber(0, 255, defaultValue(Number(blue), 0))
-    this.a = limitNumber(0, 1, defaultValue(Number(alpha), 1))
-  }
-
-  static parseKeyWord(v: string): CssColorParser {
-    const cssStr = CssColorStringParser.clearStrSpace(v)
-    const res = convert.keyword.rgb(cssStr)
-    return res && CssColorParser.fromArray(res)
-  }
-
-  static parseHEX(v: string): CssColorParser {
-    const cssStr = CssColorStringParser.clearStrSpace(v)
-    let res = CssColorStringParser.parse3BitsHEX(cssStr)
-    if (!res) {
-      res = CssColorStringParser.parse6BitsHEX(cssStr)
-    }
-    return res && CssColorParser.fromArray(res)
-  }
-
-  static parseRGBA(v: string): CssColorParser {
-    const cssStr = CssColorStringParser.clearStrSpace(v)
-    let res = CssColorStringParser.parseRGBA(cssStr)
-    if (!res) {
-      const cssStr2 = CssColorStringParser.trimStr(v)
-      res = CssColorStringParser.parseRGBA2(cssStr2)
-    }
-    return res && CssColorParser.fromArray(res)
-  }
-
-  static parseHSLA(v: string): CssColorParser {
-    const cssStr = CssColorStringParser.clearStrSpace(v)
-    let res = CssColorStringParser.parseHSLA(cssStr)
-    if (!res) {
-      const cssStr2 = CssColorStringParser.trimStr(v)
-      res = CssColorStringParser.parseHSLA2(cssStr2)
-    }
-    return res && CssColorParser.fromHSL(
-      res[0],
-      res[1],
-      res[2],
-      res[3]
-    )
-  }
-
-  static parseHWB(v: string) {
-    const cssStr2 = CssColorStringParser.trimStr(v)
-    const res = CssColorStringParser.parseHWB(cssStr2)
-    return res && CssColorParser.fromHWB(res[0], res[1], res[2], res[3])
-  }
-
-
-  /**
-   * @description: 将css字符串转换为解析对象
-   * @param {string} v
-   * @return {CssColorParser}
-   * @example: CssColorParser.fromColorStr('rgba(255,255,255,1)')
-   */
-  static fromColorStr(v: string): CssColorParser {
-    Check.type('string', 'color', v)
-    return CssColorParser.parseHEX(v) || CssColorParser.parseRGBA(v) || CssColorParser.parseKeyWord(v) || CssColorParser.parseHSLA(v) || CssColorParser.parseHWB(v)
-  }
-
-  /**
-   * @description: 将HSL色彩模式转换为解析对象
-   * @param {number} hue 色相
-   * @param {number} saturation 饱和度
-   * @param {number} lightness 亮度
-   * @param {number} alpha 不透明度
-   * @return {CssColorParser}
-   * @example: CssColorParser.fromHSL(0,1,1,1)
-   */
-  static fromHSL(h: number, s: number, l: number, a?: number): CssColorParser {
-    const res = convert.hsl.rgb(limitNumber(0, 360, h), limitNumber(0, 100, s * 100), limitNumber(0, 100, l * 100))
-    return new CssColorParser(
-      res[0],
-      res[1],
-      res[2],
-      defaultValue(Number(a), 1)
-    )
-  }
-  /**
-   * @description: 将HWB色彩模式转换为解析对象
-   * @param {number} h 色调
-   * @param {number} w 白度
-   * @param {number} b 黑度
-   * @param {number} a 不透明度
-   * @return {CssColorParser}
-   * @example: CssColorParser.fromHSL(0,1,1,1)
-   */
-  static fromHWB(h: number, w: number, b: number, a?: number) {
-    const res = convert.hwb.rgb(limitNumber(0, 360, h), limitNumber(0, 100, w * 100), limitNumber(0, 100, b * 100))
-    return new CssColorParser(
-      res[0],
-      res[1],
-      res[2],
-      defaultValue(Number(a), 1)
-    )
-  }
-  /**
-   * @description: 从解析器中产生随机颜色
-   * @return {CssColorParser}
-   * @author: roman_123
-   */
-  static fromRandom(
-    color1: string | CssColorParser,
-    color2: string | CssColorParser
-  ): CssColorParser {
-    if (typeof color1 === 'string') {
-      color1 = CssColorParser.fromColorStr(color1)
-    }
-    if (typeof color2 === 'string') {
-      color2 = CssColorParser.fromColorStr(color2)
-    }
-    if (!color1 || !color2) {
-      throw new Error('fail to create object from random')
-    }
-    const r =
-      Math.random() * Math.abs(color2.r - color1.r) +
-      Math.min(color1.r, color2.r)
-    const g =
-      Math.random() * Math.abs(color2.g - color1.g) +
-      Math.min(color1.g, color2.g)
-    const b =
-      Math.random() * Math.abs(color2.b - color1.b) +
-      Math.min(color1.b, color2.b)
-    const a =
-      Math.random() * Math.abs(color2.a - color1.a) +
-      Math.min(color1.a, color2.a)
-    return new CssColorParser(r, g, b, a)
-  }
-  /**
-   * @description: 将ColorJson格式的json数据转换为解析对象
-   * @param {ColorJson} json
-   * @return {CssColorParser}
-   * @author: roman_123
-   */
-  static fromJson(json: ColorJson): CssColorParser {
-    return new CssColorParser(json.r, json.g, json.b, json.a)
-  }
-  /**
-   * @description: 将rgba数组转换为解析对象
-   * @param {Array} color
-   * @return {CssColorParser}
-   * @author: roman_123
-   */
-  static fromArray(color: Array<number>): CssColorParser {
-    return new CssColorParser(color[0], color[1], color[2], color[3])
-  }
-  /**
-   * @description: 返回rgba格式的css字符串
-   * @return {*}
-   * @author: roman_123
-   */
-  toRGBA(): string {
-    const color = this.toJson()
-    if (color.a === 1) {
-      return `rgb(${color.r},${color.g},${color.b})`
-    }
-    return `rgba(${color.r},${color.g},${color.b},${color.a})`
-  }
-  /**
-   * @description: 返回字符串
-   * @return {*}
-   * @author: roman_123
-   */
-  toString(): string {
-    return this.toRGBA()
-  }
-  /**
-   * @description: 归一化
-   * @return {*}
-   * @author: roman_123
-   */
-  toNormalize(): ColorJson {
-    return {
-      r: parseFloat((this.r / 255).toFixed(2)),
-      g: parseFloat((this.g / 255).toFixed(2)),
-      b: parseFloat((this.b / 255).toFixed(2)),
-      a: parseFloat(this.a.toFixed(2))
-    }
-  }
-  /**
-   * @description: 返回16进制格式的css字符串
-   * @return {*}
-   * @author: roman_123
-   */
-  toHEX(): string {
-    const color = this.toJson()
-    let r = color.r.toString(16)
-    if (r.length < 2) {
-      r = `0${r}`
-    }
-    let g = color.g.toString(16)
-    if (g.length < 2) {
-      g = `0${g}`
-    }
-    let b = color.b.toString(16)
-    if (b.length < 2) {
-      b = `0${b}`
-    }
-    // 由于tojson后a会丢失精度，此处使用this.a
-    if (this.a < 1) {
-      let hexAlpha = parseInt((this.a * 255).toFixed()).toString(16)
-      if (hexAlpha.length < 2) {
-        hexAlpha = `0${hexAlpha}`
-      }
-      return `#${r}${g}${b}${hexAlpha}`
-    }
-    return `#${r}${g}${b}`
-  }
-  /**
-   * @description: 返回rgba数组
-   * @return {*}
-   * @author: roman_123
-   */
-  toArray(): number[] {
-    const color = this.toJson()
-    return [color.r, color.g, color.b, color.a]
-  }
-  /**
-   * @description: 返回ColorJson
-   * @return {*}
-   * @author: roman_123
-   */
-  toJson(): ColorJson {
-    return {
-      r: parseInt(this.r.toFixed()),
-      g: parseInt(this.g.toFixed()),
-      b: parseInt(this.b.toFixed()),
-      a: parseFloat(this.a.toFixed(2))
-    }
-  }
-  /**
-   * @description: 拷贝
-   * @return {*}
-   * @author: roman_123
-   */
-  clone(): CssColorParser {
-    return new CssColorParser(this.r, this.g, this.b, this.a)
-  }
-  /**
-   * @description: 比较两个解析对象的数据是否相等
-   * @param {*} color
-   * @return {*}
-   * @author: roman_123
-   */
-  equals(color): boolean {
-    if (this === color) {
-      return true
-    } else {
-      return (
-        this.r === color.r &&
-        this.g === color.g &&
-        this.b === color.g &&
-        this.a === color.a
-      )
-    }
-  }
-}
-
-
-export class ColorJson {
-  r: number
-  g: number
-  b: number
-  a: number
-}

package/src/utils/color-tools.ts

@@ -1,146 +0,0 @@
-import { defaultValue, limitNumber } from "./common"
-
-/*
- * @Author: roman_123
- * @Description: 部分核心代码修改自cesium
- * @Date: 2022-11-28 17:32:57
- * @LastEditTime: 2022-12-06 00:02:21
- */
-export class CssColorStringParser {
-  // 去除字符串内所有空格
-  static clearStrSpace(v: string): string {
-    return v.replace(/\s/g, '')
-  }
-  // 去除字符串两边空格,将中间多个空格合并为一个
-  static trimStr(v: string): string {
-    v = v.replace(/\s+/g, ' ')
-    return v.trim()
-  }
-  // 解析3位16进制 #fff #fff0 
-  static parse3BitsHEX(v: string): Array<number> {
-    const regx = /^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/i
-    const res = regx.exec(v)
-    if (res) {
-      const res4 = defaultValue(res[4], 'f')
-      const r = CssColorStringParser._parseResStrForRgb(parseInt(res[1] + res[1], 16))
-      const g = CssColorStringParser._parseResStrForRgb(parseInt(res[2] + res[2], 16))
-      const b = CssColorStringParser._parseResStrForRgb(parseInt(res[3] + res[3], 16))
-      const a = CssColorStringParser._parsePercent(parseInt(res4 + res4, 16) / 255)
-      return [r, g, b, a]
-    }
-    return null
-  }
-  // 解析6位16进制 #ffffff #ffffff00
-  static parse6BitsHEX(v: string): Array<number> {
-    const regx = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i
-    const res = regx.exec(v)
-    if (res) {
-      const res4 = defaultValue(res[4], 'ff')
-      const r = CssColorStringParser._parseResStrForRgb(parseInt(res[1], 16))
-      const g = CssColorStringParser._parseResStrForRgb(parseInt(res[2], 16))
-      const b = CssColorStringParser._parseResStrForRgb(parseInt(res[3], 16))
-      const a = CssColorStringParser._parsePercent(parseInt(res4, 16) / 255.0)
-      return [r, g, b, a]
-    }
-    return null
-  }
-  // 解析rgb rgba  rgb(255,255,255) rgba(255,255,255,1) rgba(100%,100%,100%, 1)
-  static parseRGBA(v: string): Array<number> {
-    const regx = /^rgba?\(([0-9.]+%?),([0-9.]+%?),([0-9.]+%?)(?:,([0-9.]+%?))?\)$/i
-    const res = regx.exec(v)
-    if (res) {
-      const r = CssColorStringParser._parseResStrForRgb(res[1])
-      const g = CssColorStringParser._parseResStrForRgb(res[2])
-      const b = CssColorStringParser._parseResStrForRgb(res[3])
-      const a = CssColorStringParser._parsePercent(res[4])
-      return [r,g,b,a]
-    }
-    return null
-  }
-  // 解析hsl hsla  hsl(360,100%,100%) hsla(360,100%,100%,1)
-  static parseHSLA(v: string): Array<number> {
-    const regx = /^hsla?\(([0-9.]+)(?:deg)?,([0-9.]+%?),([0-9.]+%?)(?:,([0-9.]+%?))?\)$/i
-    const res = regx.exec(v)
-    if (res) {
-      const h = CssColorStringParser._parseResStrForHue(res[1])
-      const s = CssColorStringParser._parsePercent(res[2])
-      const l = CssColorStringParser._parsePercent(res[3])
-      const a = CssColorStringParser._parsePercent(res[4])
-      return [h,s,l,a]
-    }
-    return null
-  }
-
-	// 解析hwb
-	static parseHWB(v: string): Array<number> {
-		const regx = /^hwb\s?\(\s?([0-9.]+)(?:deg)?\s([0-9.]+%?)\s([0-9.]+%?)\s?(?:\/\s?([0-9.]+%?))?\s?\)$/i
-    const res = regx.exec(v)
-    if (res) {
-      const h = CssColorStringParser._parseResStrForHue(res[1])
-      const w = CssColorStringParser._parsePercent(res[2])
-      const b = CssColorStringParser._parsePercent(res[3])
-      const a = CssColorStringParser._parsePercent(res[4])
-      return [h,w,b,a]
-    }
-    return null
-	}
-
-  // 解析rgb rgb(178 57 57 / 44%) 字符串中存在空格，因此使用清除两侧空格的原始字符串
-  static parseRGBA2(v: string): Array<number> {
-    const regx = /^rgba?\s?\(\s?([0-9.]+%?)\s?([0-9.]+%?)\s?([0-9.]+%?)(?:\s?\/\s?([0-9.]+%?))?\s?\)$/i
-    const res = regx.exec(v)
-    if (res) {
-      const r = CssColorStringParser._parseResStrForRgb(res[1])
-      const g = CssColorStringParser._parseResStrForRgb(res[2])
-      const b = CssColorStringParser._parseResStrForRgb(res[3])
-      const a = CssColorStringParser._parsePercent(res[4])
-      return [r,g,b,a]
-    }
-    return null
-  }
-  // 解析hsl hsl(215 85% 62% / 1)
-  static parseHSLA2(v: string): Array<number> {
-		const regx = /^hsla?\s?\(\s?([0-9.]+)(?:deg)?\s([0-9.]+%?)\s([0-9.]+%?)\s?(?:\/\s?([0-9.]+%?))?\s?\)$/i
-    const res = regx.exec(v)
-    if (res) {
-      const h = CssColorStringParser._parseResStrForHue(res[1])
-      const s = CssColorStringParser._parsePercent(res[2])
-      const l = CssColorStringParser._parsePercent(res[3])
-      const a = CssColorStringParser._parsePercent(res[4])
-      return [h,s,l,a]
-    }
-    return null
-  }
-
-  // 将结果解析为数字
-  static _parseResStrForRgb(v: string|number) {
-    if(typeof v === 'string') {
-      v = parseFloat(v) / ('%' === v.substr(-1) ? 100.0 / 255 : 1)
-    }
-    if(isNaN(v)) {
-      v = 1
-    }
-    return limitNumber(0, 255, v)
-  }
-
-  static _parseResStrForHue(v: string|number) {
-    if(typeof v === 'string') {
-      v = parseFloat(v)
-    }
-    if(isNaN(v)) {
-      v = 0
-    }
-    return limitNumber(0, 360, v)
-  }
-
-  static _parsePercent(v: string|number) {
-    if(typeof v === 'string') {
-      v = parseFloat(v) / ('%' === v.substr(-1) ? 100.0 : 1)
-    }
-    if(isNaN(v)) {
-      v = 1
-    }
-    return limitNumber(0, 1, v)
-  }
-}
-

package/src/utils/common.ts

@@ -1,40 +0,0 @@
-export class Check {
-  static type(type, paramName, value) {
-    const valueType = typeof value
-    if (valueType !== type) {
-      throw new Error(
-        `Expected ${paramName} to be typeof ${type}, actual typeof was ${valueType}`
-      )
-    }
-  }
-  static types(types: string[], paramName, value) {
-    const valueType = typeof value
-    const isContained = types.includes(valueType)
-    if (!isContained) {
-      throw new Error(
-        `Expected ${paramName} to be typeof ${types.join(
-          '|'
-        )}, actual typeof was ${valueType}`
-      )
-    }
-  }
-}
-
-export function defaultValue(v, defaultV) {
-  if (v === undefined || v === null) {
-    return defaultV
-  }
-	if(isNaN(v) && typeof defaultV === 'number') {
-		return defaultV
-	}
-  return v
-}
-
-export function limitNumber(min: number, max: number, v: number) {
-  if (v > max) {
-    v = max
-  } else if (v < min) {
-    v = min
-  }
-  return v
-}

package/tsconfig.json

@@ -1,50 +0,0 @@
-{
-  "compilerOptions": {
-      "target": "ES5",
-      "module": "ES2015",
-      "declaration": true,
-      "pretty": true,
-      "sourceMap": true,
-      "outDir": "./dist",
-      "rootDir": "./src",  
-      "importHelpers": true,
-      "strict": true,
-      "noImplicitAny": false,
-      "strictNullChecks": false,
-      "noImplicitThis": true,
-      "alwaysStrict": true,
-      "noUnusedLocals": true,
-      "noUnusedParameters": false,
-      "noImplicitReturns": true,
-      "noFallthroughCasesInSwitch": true,
-      "moduleResolution": "node",
-      "baseUrl": ".",
-      "allowSyntheticDefaultImports": true,
-      "experimentalDecorators": true,
-      "emitDecoratorMetadata": true,
-      "resolveJsonModule": true,
-      "esModuleInterop": true,
-      "lib": [
-          "es5",
-          "es6",
-          "dom",
-          "es2015.core",
-          "es2015.collection",
-          "es2015.generator",
-          "es2015.iterable",
-          "es2015.promise",
-          "es2015.proxy",
-          "es2015.reflect",
-          "es2015.symbol",
-          "es2015.symbol.wellknown",
-          "esnext.asynciterable",
-          "es2017"
-      ],
-      "paths": {
-        "@/*": ["./src/*"]
-      },
-      "plugins": [],
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules/**", "dist"]
-}

package/webpack.config.js

@@ -1,64 +0,0 @@
-/*
- * @Author: roman_123_123
- * @Description:
- * @Date: 2022-11-29 19:41:35
- * @LastEditTime: 2023-02-10 18:11:38
- */
-const path = require('path')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-
-module.exports = {
-  mode: 'production',
-  entry: './src/main.ts',
-  output: {
-    filename: 'css-color-parser.min.js',
-    path: path.resolve(__dirname, 'dist'),
-    globalObject: 'this',
-    library: {
-      name: 'Parser',
-      type: 'umd'
-    },
-    environment: {
-      // The environment supports arrow functions ('() => { ... }').
-      arrowFunction: false,
-      // The environment supports BigInt as literal (123n).
-      bigIntLiteral: false,
-      // The environment supports const and let for variable declarations.
-      const: false,
-      // The environment supports destructuring ('{ a, b } = obj').
-      destructuring: false,
-      // The environment supports an async import() function to import EcmaScript modules.
-      dynamicImport: false,
-      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
-      forOf: false,
-      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
-      module: false,
-      // The environment supports optional chaining ('obj?.a' or 'obj?.()').
-      optionalChaining: false,
-      // The environment supports template literals.
-      templateLiteral: true
-    }
-  },
-  module: {
-    rules: [
-      { test: /\.ts$/, exclude: /node_modules/, use: 'ts-loader' },
-      {
-        test: /\.m?js$/,
-        // exclude: /(node_modules|bower_components)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env']
-          }
-        }
-      }
-    ]
-  },
-  resolve: {
-    extensions: ['.ts', '.js'],
-    alias: {
-      '@': path.resolve('src')
-    }
-  },
-  plugins: [new CleanWebpackPlugin()]
-}