javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 02:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(css): text-stroke support (#10399)

Browse Source 
closes https://github.com/NativeScript/NativeScript/issues/3597
closes https://github.com/NativeScript/NativeScript/issues/3972
This commit is contained in:
Nathan Walker
2023-10-09 12:00:21 -07:00
committed by GitHub
parent 93e24783a1
commit d6478237ec
18 changed files with 230 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
packages/core/ui/styling/css-shadow.ts
View File

@ -26,15 +26,11 @@ const LENGTH_RE = /^-?[0-9]+[a-zA-Z%]*?$/;
*/
const isLength = (v) => v === '0' || LENGTH_RE.test(v);
/**
* Parse a string into ShadowCSSValues
* Supports any valid css box/text shadow combination.
*
* inspired by https://github.com/jxnblk/css-box-shadow/blob/master/index.js (MIT License)
*
* @param value
*/
export function parseCSSShadow(value: string): ShadowCSSValues {
export function parseCSSShorthand(value: string): {
values: Array<CoreTypes.LengthType>;
color: string;
inset: boolean;
} {
const parts = value.trim().split(PARTS_RE);
const inset = parts.includes('inset');
const first = parts[0];
@ -44,15 +40,15 @@ export function parseCSSShadow(value: string): ShadowCSSValues {
return null;
}
let colorRaw = 'black';
let color = 'black';
if (first && !isLength(first) && first !== 'inset') {
colorRaw = first;
color = first;
} else if (last && !isLength(last)) {
colorRaw = last;
color = last;
}
const nums = parts
const values = parts
.filter((n) => n !== 'inset')
.filter((n) => n !== colorRaw)
.filter((n) => n !== color)
.map((val) => {
try {
return Length.parse(val);
@ -60,51 +56,30 @@ export function parseCSSShadow(value: string): ShadowCSSValues {
return CoreTypes.zeroLength;
}
});
const [offsetX, offsetY, blurRadius, spreadRadius] = nums;
return {
inset,
color,
values,
};
}
/**
* Parse a string into ShadowCSSValues
* Supports any valid css box/text shadow combination.
*
* inspired by https://github.com/jxnblk/css-box-shadow/blob/master/index.js (MIT License)
*
* @param value
*/
export function parseCSSShadow(value: string): ShadowCSSValues {
const data = parseCSSShorthand(value);
const [offsetX, offsetY, blurRadius, spreadRadius] = data.values;
return {
inset: data.inset,
offsetX: offsetX,
offsetY: offsetY,
blurRadius: blurRadius,
spreadRadius: spreadRadius,
color: new Color(colorRaw),
color: new Color(data.color),
};
}
// if (value.indexOf('rgb') > -1) {
// arr = value.split(' ');
// colorRaw = arr.pop();
// } else {
// arr = value.split(/[ ,]+/);
// colorRaw = arr.pop();
// }
// let offsetX: number;
// let offsetY: number;
// let blurRadius: number; // not currently in use
// let spreadRadius: number; // maybe rename this to just radius
// let color: Color = new Color(colorRaw);
// if (arr.length === 2) {
// offsetX = parseFloat(arr[0]);
// offsetY = parseFloat(arr[1]);
// } else if (arr.length === 3) {
// offsetX = parseFloat(arr[0]);
// offsetY = parseFloat(arr[1]);
// blurRadius = parseFloat(arr[2]);
// } else if (arr.length === 4) {
// offsetX = parseFloat(arr[0]);
// offsetY = parseFloat(arr[1]);
// blurRadius = parseFloat(arr[2]);
// spreadRadius = parseFloat(arr[3]);
// } else {
// throw new Error('Expected 3, 4 or 5 parameters. Actual: ' + value);
// }
// return {
// offsetX: offsetX,
// offsetY: offsetY,
// blurRadius: blurRadius,
// spreadRadius: spreadRadius,
// color: color,
// };