@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 5.35 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/cover/edit/color-utils.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport { FastAverageColor } from 'fast-average-color';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { applyFilters } from '@wordpress/hooks';\n\n/**\n * @typedef {import('colord').RgbaColor} RgbaColor\n */\n\nextend( [ namesPlugin ] );\n\n/**\n * Fallback color when the average color can't be computed. The image may be\n * rendering as transparent, and most sites have a light color background.\n */\nexport const DEFAULT_BACKGROUND_COLOR = '#FFF';\n\n/**\n * Default dim color specified in style.css.\n */\nexport const DEFAULT_OVERLAY_COLOR = '#000';\n\n/**\n * Performs a Porter Duff composite source over operation on two rgba colors.\n *\n * @see {@link https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover}\n *\n * @param {RgbaColor} source Source color.\n * @param {RgbaColor} dest Destination color.\n *\n * @return {RgbaColor} Composite color.\n */\nexport function compositeSourceOver( source, dest ) {\n\treturn {\n\t\tr: source.r * source.a + dest.r * dest.a * ( 1 - source.a ),\n\t\tg: source.g * source.a + dest.g * dest.a * ( 1 - source.a ),\n\t\tb: source.b * source.a + dest.b * dest.a * ( 1 - source.a ),\n\t\ta: source.a + dest.a * ( 1 - source.a ),\n\t};\n}\n\n/**\n * Retrieves the FastAverageColor singleton.\n *\n * @return {FastAverageColor} The FastAverageColor singleton.\n */\nexport function retrieveFastAverageColor() {\n\tif ( ! retrieveFastAverageColor.fastAverageColor ) {\n\t\tretrieveFastAverageColor.fastAverageColor = new FastAverageColor();\n\t}\n\treturn retrieveFastAverageColor.fastAverageColor;\n}\n\n/**\n * Computes the average color of an image.\n *\n * @param {string} url The url of the image.\n *\n * @return {Promise<string>} Promise of an average color as a hex string.\n */\nexport const getMediaColor = memoize( async ( url ) => {\n\tif ( ! url ) {\n\t\treturn DEFAULT_BACKGROUND_COLOR;\n\t}\n\n\t// making the default color rgb for compat with FAC\n\tconst { r, g, b, a } = colord( DEFAULT_BACKGROUND_COLOR ).toRgb();\n\n\ttry {\n\t\tconst imgCrossOrigin = applyFilters(\n\t\t\t'media.crossOrigin',\n\t\t\tundefined,\n\t\t\turl\n\t\t);\n\t\tconst color = await retrieveFastAverageColor().getColorAsync( url, {\n\t\t\t// The default color is white, which is the color\n\t\t\t// that is returned if there's an error.\n\t\t\t// colord returns alpga 0-1, FAC needs 0-255\n\t\t\tdefaultColor: [ r, g, b, a * 255 ],\n\t\t\t// Errors that come up don't reject the promise,\n\t\t\t// so error logging has to be silenced\n\t\t\t// with this option.\n\t\t\tsilent: process.env.NODE_ENV === 'production',\n\t\t\tcrossOrigin: imgCrossOrigin,\n\t\t} );\n\t\treturn color.hex;\n\t} catch ( error ) {\n\t\t// If there's an error return the fallback color.\n\t\treturn DEFAULT_BACKGROUND_COLOR;\n\t}\n} );\n\n/**\n * Computes if the color combination of the overlay and background color is dark.\n *\n * @param {number} dimRatio Opacity of the overlay between 0 and 100.\n * @param {string} overlayColor CSS color string for the overlay.\n * @param {string} backgroundColor CSS color string for the background.\n *\n * @return {boolean} true if the color combination composite result is dark.\n */\nexport function compositeIsDark( dimRatio, overlayColor, backgroundColor ) {\n\t// Opacity doesn't matter if you're overlaying the same color on top of itself.\n\t// And background doesn't matter when overlay is fully opaque.\n\tif ( overlayColor === backgroundColor || dimRatio === 100 ) {\n\t\treturn colord( overlayColor ).isDark();\n\t}\n\tconst overlay = colord( overlayColor )\n\t\t.alpha( dimRatio / 100 )\n\t\t.toRgb();\n\tconst background = colord( backgroundColor ).toRgb();\n\tconst composite = compositeSourceOver( overlay, background );\n\treturn colord( composite ).isDark();\n}\n"],
"mappings": ";AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAKpB,SAAS,oBAAoB;AAM7B,OAAQ,CAAE,WAAY,CAAE;AAMjB,IAAM,2BAA2B;AAKjC,IAAM,wBAAwB;AAY9B,SAAS,oBAAqB,QAAQ,MAAO;AACnD,SAAO;AAAA,IACN,GAAG,OAAO,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,IACxD,GAAG,OAAO,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,IACxD,GAAG,OAAO,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,IACxD,GAAG,OAAO,IAAI,KAAK,KAAM,IAAI,OAAO;AAAA,EACrC;AACD;AAOO,SAAS,2BAA2B;AAC1C,MAAK,CAAE,yBAAyB,kBAAmB;AAClD,6BAAyB,mBAAmB,IAAI,iBAAiB;AAAA,EAClE;AACA,SAAO,yBAAyB;AACjC;AASO,IAAM,gBAAgB,QAAS,OAAQ,QAAS;AACtD,MAAK,CAAE,KAAM;AACZ,WAAO;AAAA,EACR;AAGA,QAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,OAAQ,wBAAyB,EAAE,MAAM;AAEhE,MAAI;AACH,UAAM,iBAAiB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AACA,UAAM,QAAQ,MAAM,yBAAyB,EAAE,cAAe,KAAK;AAAA;AAAA;AAAA;AAAA,MAIlE,cAAc,CAAE,GAAG,GAAG,GAAG,IAAI,GAAI;AAAA;AAAA;AAAA;AAAA,MAIjC,QAAQ,QAAQ,IAAI,aAAa;AAAA,MACjC,aAAa;AAAA,IACd,CAAE;AACF,WAAO,MAAM;AAAA,EACd,SAAU,OAAQ;AAEjB,WAAO;AAAA,EACR;AACD,CAAE;AAWK,SAAS,gBAAiB,UAAU,cAAc,iBAAkB;AAG1E,MAAK,iBAAiB,mBAAmB,aAAa,KAAM;AAC3D,WAAO,OAAQ,YAAa,EAAE,OAAO;AAAA,EACtC;AACA,QAAM,UAAU,OAAQ,YAAa,EACnC,MAAO,WAAW,GAAI,EACtB,MAAM;AACR,QAAM,aAAa,OAAQ,eAAgB,EAAE,MAAM;AACnD,QAAM,YAAY,oBAAqB,SAAS,UAAW;AAC3D,SAAO,OAAQ,SAAU,EAAE,OAAO;AACnC;",
"names": []
}