fabric/dist/src/color/Color.min.mjs.map

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

{"version":3,"file":"Color.min.mjs","sources":["../../../src/color/Color.ts"],"sourcesContent":["import { radiansToDegrees } from '../util/misc/radiansDegreesConversion';\nimport { ColorNameMap } from './color_map';\nimport { reHSLa, reHex, reRGBa } from './constants';\nimport type { TRGBAColorSource, TColorArg } from './typedefs';\nimport {\n  hue2rgb,\n  hexify,\n  rgb2Hsl,\n  fromAlphaToFloat,\n  greyAverage,\n} from './util';\n\n/**\n * @class Color common color operations\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors colors}\n */\nexport class Color {\n  private declare _source: TRGBAColorSource;\n  isUnrecognised = false;\n\n  /**\n   *\n   * @param {string} [color] optional in hex or rgb(a) or hsl format or from known color list\n   */\n  constructor(color?: TColorArg) {\n    if (!color) {\n      // we default to black as canvas does\n      this.setSource([0, 0, 0, 1]);\n    } else if (color instanceof Color) {\n      this.setSource([...color._source]);\n    } else if (Array.isArray(color)) {\n      const [r, g, b, a = 1] = color;\n      this.setSource([r, g, b, a]);\n    } else {\n      this.setSource(this._tryParsingColor(color));\n    }\n  }\n\n  /**\n   * @private\n   * @param {string} [color] Color value to parse\n   * @returns {TRGBAColorSource}\n   */\n  protected _tryParsingColor(color: string) {\n    color = color.toLowerCase();\n    if (color in ColorNameMap) {\n      color = ColorNameMap[color as keyof typeof ColorNameMap];\n    }\n    return color === 'transparent'\n      ? ([255, 255, 255, 0] as TRGBAColorSource)\n      : Color.sourceFromHex(color) ||\n          Color.sourceFromRgb(color) ||\n          Color.sourceFromHsl(color) ||\n          // color is not recognized\n          // we default to black as canvas does\n          // eslint-disable-next-line no-constant-binary-expression\n          ((this.isUnrecognised = true) && ([0, 0, 0, 1] as TRGBAColorSource));\n  }\n\n  /**\n   * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])\n   * @return {TRGBAColorSource}\n   */\n  getSource() {\n    return this._source;\n  }\n\n  /**\n   * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])\n   * @param {TRGBAColorSource} source\n   */\n  setSource(source: TRGBAColorSource) {\n    this._source = source;\n  }\n\n  /**\n   * Returns color representation in RGB format\n   * @return {String} ex: rgb(0-255,0-255,0-255)\n   */\n  toRgb() {\n    const [r, g, b] = this.getSource();\n    return `rgb(${r},${g},${b})`;\n  }\n\n  /**\n   * Returns color representation in RGBA format\n   * @return {String} ex: rgba(0-255,0-255,0-255,0-1)\n   */\n  toRgba() {\n    return `rgba(${this.getSource().join(',')})`;\n  }\n\n  /**\n   * Returns color representation in HSL format\n   * @return {String} ex: hsl(0-360,0%-100%,0%-100%)\n   */\n  toHsl() {\n    const [h, s, l] = rgb2Hsl(...this.getSource());\n    return `hsl(${h},${s}%,${l}%)`;\n  }\n\n  /**\n   * Returns color representation in HSLA format\n   * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1)\n   */\n  toHsla() {\n    const [h, s, l, a] = rgb2Hsl(...this.getSource());\n    return `hsla(${h},${s}%,${l}%,${a})`;\n  }\n\n  /**\n   * Returns color representation in HEX format\n   * @return {String} ex: FF5555\n   */\n  toHex() {\n    const fullHex = this.toHexa();\n    return fullHex.slice(0, 6);\n  }\n\n  /**\n   * Returns color representation in HEXA format\n   * @return {String} ex: FF5555CC\n   */\n  toHexa() {\n    const [r, g, b, a] = this.getSource();\n    return `${hexify(r)}${hexify(g)}${hexify(b)}${hexify(Math.round(a * 255))}`;\n  }\n\n  /**\n   * Gets value of alpha channel for this color\n   * @return {Number} 0-1\n   */\n  getAlpha() {\n    return this.getSource()[3];\n  }\n\n  /**\n   * Sets value of alpha channel for this color\n   * @param {Number} alpha Alpha value 0-1\n   * @return {Color} thisArg\n   */\n  setAlpha(alpha: number) {\n    this._source[3] = alpha;\n    return this;\n  }\n\n  /**\n   * Transforms color to its grayscale representation\n   * @return {Color} thisArg\n   */\n  toGrayscale() {\n    this.setSource(greyAverage(this.getSource()));\n    return this;\n  }\n\n  /**\n   * Transforms color to its black and white representation\n   * @param {Number} threshold\n   * @return {Color} thisArg\n   */\n  toBlackWhite(threshold: number) {\n    const [average, , , a] = greyAverage(this.getSource()),\n      bOrW = average < (threshold || 127) ? 0 : 255;\n    this.setSource([bOrW, bOrW, bOrW, a]);\n    return this;\n  }\n\n  /**\n   * Overlays color with another color\n   * @param {String|Color} otherColor\n   * @return {Color} thisArg\n   */\n  overlayWith(otherColor: string | Color) {\n    if (!(otherColor instanceof Color)) {\n      otherColor = new Color(otherColor);\n    }\n\n    const source = this.getSource(),\n      otherAlpha = 0.5,\n      otherSource = otherColor.getSource(),\n      [R, G, B] = source.map((value, index) =>\n        Math.round(value * (1 - otherAlpha) + otherSource[index] * otherAlpha),\n      );\n\n    this.setSource([R, G, B, source[3]]);\n    return this;\n  }\n\n  /**\n   * Returns new color object, when given a color in RGB format\n   * @memberOf Color\n   * @param {String} color Color value ex: rgb(0-255,0-255,0-255)\n   * @return {Color}\n   */\n  static fromRgb(color: string): Color {\n    return Color.fromRgba(color);\n  }\n\n  /**\n   * Returns new color object, when given a color in RGBA format\n   * @static\n   * @function\n   * @memberOf Color\n   * @param {String} color\n   * @return {Color}\n   */\n  static fromRgba(color: string): Color {\n    return new Color(Color.sourceFromRgb(color));\n  }\n\n  /**\n   * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format\n   * @memberOf Color\n   * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)\n   * @return {TRGBAColorSource | undefined} source\n   */\n  static sourceFromRgb(color: string): TRGBAColorSource | undefined {\n    const match = color.match(reRGBa());\n    if (match) {\n      const [r, g, b] = match.slice(1, 4).map((value) => {\n        const parsedValue = parseFloat(value);\n        return value.endsWith('%')\n          ? Math.round(parsedValue * 2.55)\n          : parsedValue;\n      });\n      return [r, g, b, fromAlphaToFloat(match[4])];\n    }\n  }\n\n  /**\n   * Returns new color object, when given a color in HSL format\n   * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%)\n   * @memberOf Color\n   * @return {Color}\n   */\n  static fromHsl(color: string): Color {\n    return Color.fromHsla(color);\n  }\n\n  /**\n   * Returns new color object, when given a color in HSLA format\n   * @static\n   * @function\n   * @memberOf Color\n   * @param {String} color\n   * @return {Color}\n   */\n  static fromHsla(color: string): Color {\n    return new Color(Color.sourceFromHsl(color));\n  }\n\n  /**\n   * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format.\n   * Adapted from <a href=\"https://rawgithub.com/mjijackson/mjijackson.github.com/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.html\">https://github.com/mjijackson</a>\n   * @memberOf Color\n   * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)\n   * @return {TRGBAColorSource | undefined} source\n   * @see http://http://www.w3.org/TR/css3-color/#hsl-color\n   */\n  static sourceFromHsl(color: string): TRGBAColorSource | undefined {\n    const match = color.match(reHSLa());\n    if (!match) {\n      return;\n    }\n    const match1degrees = Color.parseAngletoDegrees(match[1]);\n\n    const h = (((match1degrees % 360) + 360) % 360) / 360,\n      s = parseFloat(match[2]) / 100,\n      l = parseFloat(match[3]) / 100;\n    let r: number, g: number, b: number;\n\n    if (s === 0) {\n      r = g = b = l;\n    } else {\n      const q = l <= 0.5 ? l * (s + 1) : l + s - l * s,\n        p = l * 2 - q;\n\n      r = hue2rgb(p, q, h + 1 / 3);\n      g = hue2rgb(p, q, h);\n      b = hue2rgb(p, q, h - 1 / 3);\n    }\n\n    return [\n      Math.round(r * 255),\n      Math.round(g * 255),\n      Math.round(b * 255),\n      fromAlphaToFloat(match[4]),\n    ];\n  }\n\n  /**\n   * Returns new color object, when given a color in HEX format\n   * @static\n   * @memberOf Color\n   * @param {String} color Color value ex: FF5555\n   * @return {Color}\n   */\n  static fromHex(color: string): Color {\n    return new Color(Color.sourceFromHex(color));\n  }\n\n  /**\n   * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format\n   * @static\n   * @memberOf Color\n   * @param {String} color ex: FF5555 or FF5544CC (RGBa)\n   * @return {TRGBAColorSource | undefined} source\n   */\n  static sourceFromHex(color: string): TRGBAColorSource | undefined {\n    if (color.match(reHex())) {\n      const value = color.slice(color.indexOf('#') + 1),\n        isShortNotation = value.length <= 4;\n      let expandedValue: string[];\n      if (isShortNotation) {\n        expandedValue = value.split('').map((hex) => hex + hex);\n      } else {\n        expandedValue = value.match(/.{2}/g)!;\n      }\n      const [r, g, b, a = 255] = expandedValue.map((hexCouple) =>\n        parseInt(hexCouple, 16),\n      );\n      return [r, g, b, a / 255];\n    }\n  }\n\n  /**\n   * Converts a string that could be any angle notation (50deg, 0.5turn, 2rad)\n   * into degrees without the 'deg' suffix\n   * @static\n   * @memberOf Color\n   * @param {String} value ex: 0deg, 0.5turn, 2rad\n   * @return {Number} number in degrees or NaN if inputs are invalid\n   */\n  static parseAngletoDegrees(value: string): number {\n    const lowercase = value.toLowerCase();\n    const numeric = parseFloat(lowercase);\n\n    if (lowercase.includes('rad')) {\n      return radiansToDegrees(numeric);\n    }\n\n    if (lowercase.includes('turn')) {\n      return numeric * 360;\n    }\n\n    // Value is probably just a number already in degrees eg '50'\n    return numeric;\n  }\n}\n"],"names":["Color","constructor","color","_defineProperty","this","setSource","_source","Array","isArray","r","g","b","a","_tryParsingColor","toLowerCase","ColorNameMap","sourceFromHex","sourceFromRgb","sourceFromHsl","isUnrecognised","getSource","source","toRgb","concat","toRgba","join","toHsl","h","s","l","rgb2Hsl","toHsla","toHex","toHexa","slice","hexify","Math","round","getAlpha","setAlpha","alpha","toGrayscale","greyAverage","toBlackWhite","threshold","average","bOrW","overlayWith","otherColor","otherSource","R","G","B","map","value","index","fromRgb","fromRgba","match","reRGBa","parsedValue","parseFloat","endsWith","fromAlphaToFloat","fromHsl","fromHsla","reHSLa","parseAngletoDegrees","q","p","hue2rgb","fromHex","reHex","indexOf","expandedValue","length","split","hex","hexCouple","parseInt","lowercase","numeric","includes","radiansToDegrees"],"mappings":"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"}