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 { normalizeWs } from '../util/internals/normalizeWhiteSpace';\nimport { 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 * @see {@link http://fabric5.fabricjs.com/fabric-intro-part-2#colors colors}\n */\nexport class Color {\n  declare private _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   * @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   * @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   * @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 = normalizeWs(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   * @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   * @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   * @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 = normalizeWs(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   * @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   * @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   * @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","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","normalizeWs","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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"}