tdesign-mobile-vue
Version:
tdesign-mobile-vue
1 lines • 13.5 kB
Source Map (JSON)
{"version":3,"file":"gradient.mjs","sources":["../../../../src/_common/js/color-picker/gradient.ts"],"sourcesContent":["import { isString, isNull } from 'lodash-es';\n/* eslint-disable no-param-reassign */\n/**\n * 用于反解析渐变字符串为对象\n * https://stackoverflow.com/questions/20215440/parse-css-gradient-rule-with-javascript-regex\n */\nimport tinyColor from 'tinycolor2';\n\n/**\n * Utility combine multiple regular expressions.\n *\n * @param {RegExp[]|string[]} regexpList List of regular expressions or strings.\n * @param {string} flags Normal RegExp flags.\n */\nconst combineRegExp = (regexpList: (string | RegExp)[], flags: string): RegExp => {\n let source = '';\n for (let i = 0; i < regexpList.length; i++) {\n if (isString(regexpList[i])) {\n source += regexpList[i];\n } else {\n source += (regexpList[i] as RegExp).source;\n }\n }\n return new RegExp(source, flags);\n};\n\ninterface RegExpLib {\n gradientSearch: RegExp;\n colorStopSearch: RegExp;\n}\n\ninterface ColorStop {\n color: string;\n position?: string;\n}\n\ninterface ParseGradientResult {\n original: string;\n colorStopList?: ColorStop[];\n line?: string;\n angle?: string;\n sideCorner?: string;\n}\n\n/**\n * Generate the required regular expressions once.\n *\n * Regular Expressions are easier to manage this way and can be well described.\n *\n * @result {object} Object containing regular expressions.\n */\nconst generateRegExp = (): RegExpLib => {\n // Note any variables with \"Capture\" in name include capturing bracket set(s).\n const searchFlags = 'gi'; // ignore case for angles, \"rgb\" etc\n const rAngle = /(?:[+-]?\\d*\\.?\\d+)(?:deg|grad|rad|turn)/; // Angle +ive, -ive and angle types\n // optional 2nd part\n const rSideCornerCapture = /to\\s+((?:(?:left|right|top|bottom)(?:\\s+(?:top|bottom|left|right))?))/;\n const rComma = /\\s*,\\s*/; // Allow space around comma.\n const rColorHex = /#(?:[a-f0-9]{6}|[a-f0-9]{3})/; // 3 or 6 character form\n const rDigits3 = /\\(\\s*(?:\\d{1,3}\\s*,\\s*){2}\\d{1,3}\\s*\\)/;\n const // \"(1, 2, 3)\"\n rDigits4 = /\\(\\s*(?:\\d{1,3}\\s*,\\s*){2}\\d{1,3}\\s*,\\s*\\d*\\.?\\d+\\)/;\n const // \"(1, 2, 3, 4)\"\n rValue = /(?:[+-]?\\d*\\.?\\d+)(?:%|[a-z]+)?/;\n const // \".9\", \"-5px\", \"100%\".\n rKeyword = /[_a-z-][_a-z0-9-]*/;\n const // \"red\", \"transparent\".\n rColor = combineRegExp(\n ['(?:', rColorHex, '|', '(?:rgb|hsl)', rDigits3, '|', '(?:rgba|hsla)', rDigits4, '|', rKeyword, ')'],\n '',\n );\n const rColorStop = combineRegExp([rColor, '(?:\\\\s+', rValue, '(?:\\\\s+', rValue, ')?)?'], '');\n const // Single Color Stop, optional %, optional length.\n rColorStopList = combineRegExp(['(?:', rColorStop, rComma, ')*', rColorStop], '');\n const // List of color stops min 1.\n rLineCapture = combineRegExp(['(?:(', rAngle, ')|', rSideCornerCapture, ')'], '');\n const // Angle or SideCorner\n rGradientSearch = combineRegExp(['(?:(', rLineCapture, ')', rComma, ')?(', rColorStopList, ')'], searchFlags);\n const // Capture 1:\"line\", 2:\"angle\" (optional), 3:\"side corner\" (optional) and 4:\"stop list\".\n rColorStopSearch = combineRegExp(\n ['\\\\s*(', rColor, ')', '(?:\\\\s+', '(', rValue, '))?', '(?:', rComma, '\\\\s*)?'],\n searchFlags,\n ); // Capture 1:\"color\" and 2:\"position\" (optional).\n\n return {\n gradientSearch: rGradientSearch,\n colorStopSearch: rColorStopSearch,\n };\n};\n\n/**\n * Actually parse the input gradient parameters string into an object for reusability.\n *\n *\n * @note Really this only supports the standard syntax not historical versions, see MDN for details\n * https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient\n *\n * @param regExpLib\n * @param {string} input\n * @returns {object|undefined}\n */\nconst parseGradient = (regExpLib: RegExpLib, input: string) => {\n let result: ParseGradientResult;\n let matchColorStop: any;\n let stopResult: ColorStop;\n\n // reset search position, because we reuse regex.\n regExpLib.gradientSearch.lastIndex = 0;\n\n const matchGradient = regExpLib.gradientSearch.exec(input);\n if (!isNull(matchGradient)) {\n result = {\n original: matchGradient[0],\n colorStopList: [],\n };\n\n // Line (Angle or Side-Corner).\n if (matchGradient[1]) {\n // eslint-disable-next-line prefer-destructuring\n result.line = matchGradient[1];\n }\n // Angle or undefined if side-corner.\n if (matchGradient[2]) {\n // eslint-disable-next-line prefer-destructuring\n result.angle = matchGradient[2];\n }\n // Side-corner or undefined if angle.\n if (matchGradient[3]) {\n // eslint-disable-next-line prefer-destructuring\n result.sideCorner = matchGradient[3];\n }\n\n // reset search position, because we reuse regex.\n regExpLib.colorStopSearch.lastIndex = 0;\n\n // Loop though all the color-stops.\n matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);\n while (!isNull(matchColorStop)) {\n stopResult = {\n color: matchColorStop[1],\n };\n\n // Position (optional).\n if (matchColorStop[2]) {\n // eslint-disable-next-line prefer-destructuring\n stopResult.position = matchColorStop[2];\n }\n result.colorStopList.push(stopResult);\n\n // Continue searching from previous position.\n matchColorStop = regExpLib.colorStopSearch.exec(matchGradient[4]);\n }\n }\n\n // Can be undefined if match not found.\n return result;\n};\n\nexport interface GradientColorPoint {\n id?: string;\n color?: string;\n left?: number;\n}\n\nexport interface GradientColors {\n points: GradientColorPoint[];\n degree: number;\n}\n\nconst REGEXP_LIB = generateRegExp();\nconst REG_GRADIENT = /.*gradient\\s*\\(((?:\\([^)]*\\)|[^)(]*)*)\\)/gim;\n\n/**\n * 验证是否是渐变字符串\n * @param input\n * @returns\n */\nexport const isGradientColor = (input: string): null | RegExpExecArray => {\n REG_GRADIENT.lastIndex = 0;\n return REG_GRADIENT.exec(input);\n};\n\n// 边界字符串和角度关系\nconst sideCornerDegreeMap = {\n top: 0,\n right: 90,\n bottom: 180,\n left: 270,\n 'top left': 315,\n 'left top': 315,\n 'top right': 45,\n 'right top': 45,\n 'bottom left': 225,\n 'left bottom': 225,\n 'bottom right': 135,\n 'right bottom': 135,\n};\n\n/**\n * 解析渐变字符串为 GradientColors 对象\n * @param input\n * @returns\n */\nexport const parseGradientString = (input: string): GradientColors | false => {\n const match = isGradientColor(input);\n if (!match) return false;\n\n const gradientColors: GradientColors = {\n points: [],\n degree: 0,\n };\n\n const result: ParseGradientResult = parseGradient(REGEXP_LIB, match[1]);\n if (result.original.trim() !== match[1].trim()) return false;\n\n const points: GradientColorPoint[] = result.colorStopList.map(\n ({ color, position }, index, array) => {\n const point = Object.create(null);\n point.color = tinyColor(color).toRgbString();\n\n let left = parseFloat(position);\n if (Number.isNaN(left)) {\n left = (index / (array.length - 1)) * 100;\n }\n\n point.left = left;\n return point;\n }\n );\n gradientColors.points = points;\n\n let degree = parseInt(result.angle, 10);\n if (Number.isNaN(degree)) {\n /* 如果角度不存在，使用 CSS 渐变的默认逻辑（180 deg）\n https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_images/Using_CSS_gradients */\n degree = sideCornerDegreeMap[result.sideCorner as keyof typeof sideCornerDegreeMap] || 180;\n }\n gradientColors.degree = degree;\n\n return gradientColors;\n};\n\nexport default parseGradientString;\n"],"names":["combineRegExp","regexpList","flags","source","i","length","isString","RegExp","generateRegExp","searchFlags","rAngle","rSideCornerCapture","rComma","rColorHex","rDigits3","rDigits4","rValue","rKeyword","rColor","rColorStop","rColorStopList","rLineCapture","rGradientSearch","rColorStopSearch","gradientSearch","colorStopSearch","parseGradient","regExpLib","input","result","matchColorStop","stopResult","lastIndex","matchGradient","exec","isNull","original","colorStopList","line","angle","sideCorner","color","position","push","REGEXP_LIB","REG_GRADIENT","isGradientColor","sideCornerDegreeMap","top","right","bottom","left","parseGradientString","match","gradientColors","points","degree","trim","map","_ref","index","array","point","Object","create","tinyColor","toRgbString","parseFloat","Number","isNaN","parseInt"],"mappings":"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"}