Skip to content

Commit 1ea1d30

Browse files
yuanyanyuanyan
committed
chore: fix color parse
Former-commit-id: bab0de7a47515d45608980ccb920f83f51514202 [formerly 291b9d39cfc13eaa97d7d1837659595e5b22b261] Former-commit-id: 53785901e1973480d86c7605f2f64d82ecf0094c
1 parent 1201893 commit 1ea1d30

File tree

13 files changed

+517
-739
lines changed

13 files changed

+517
-739
lines changed

‎kraken/lib/src/css/backgroud.dart‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -560,7 +560,7 @@ mixin CSSBackgroundMixin {
560560
Color getBackgroundColor(CSSStyleDeclaration style) {
561561
Color backgroundColor = CSSColor.transparent;
562562
if (background.containsKey(BACKGROUND_COLOR)) {
563-
backgroundColor = CSSColor.generate(background[BACKGROUND_COLOR]);
563+
backgroundColor = CSSColor.parseColor(background[BACKGROUND_COLOR]);
564564
}
565565
return backgroundColor;
566566
}
@@ -607,11 +607,11 @@ mixin CSSBackgroundMixin {
607607
} else if (CSSAngle.isAngle(strings[i])) {
608608
stop = CSSAngle(strings[i]).angleValue / (math.pi * 2);
609609
}
610-
colorGradients.add(CSSColorStop(CSSColor.generate(strings[0]), stop));
610+
colorGradients.add(CSSColorStop(CSSColor.parseColor(strings[0]), stop));
611611
}
612612
} catch (e) {}
613613
} else {
614-
colorGradients.add(CSSColorStop(CSSColor.generate(strings[0]), stop));
614+
colorGradients.add(CSSColorStop(CSSColor.parseColor(strings[0]), stop));
615615
}
616616
}
617617
return colorGradients;

‎kraken/lib/src/css/box.dart‎

Lines changed: 50 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import 'package:flutter/rendering.dart';
99
import 'package:kraken/foundation.dart';
1010
import 'package:kraken/rendering.dart';
1111
import 'package:kraken/css.dart';
12+
import 'package:kraken/src/css/style_property.dart';
1213

1314
// CSS Box Model: https://drafts.csswg.org/css-box-4/
1415
// CSS Backgrounds and Borders: https://drafts.csswg.org/css-backgrounds/
@@ -201,68 +202,56 @@ mixin CSSDecoratedBoxMixin on CSSBackgroundMixin {
201202
}
202203

203204
/// Tip: inset not supported.
204-
static RegExp commaRegExp = RegExp(r',');
205205
List<BoxShadow> getBoxShadow(CSSStyleDeclaration style) {
206206
List<BoxShadow> boxShadow = [];
207-
if (style.contains('boxShadow')) {
208-
String processedValue = CSSColor.preprocessCSSPropertyWithRGBAColor(style['boxShadow']);
209-
List<String> rawShadows = processedValue.split(commaRegExp);
210-
for (String rawShadow in rawShadows) {
211-
List<String> shadowDefinitions = rawShadow.trim().split(_splitRegExp);
212-
if (shadowDefinitions.length > 2) {
213-
double offsetX = CSSLength.toDisplayPortValue(shadowDefinitions[0]) ?? 0;
214-
double offsetY = CSSLength.toDisplayPortValue(shadowDefinitions[1]) ?? 0;
215-
double blurRadius =
216-
shadowDefinitions.length > 3 ? CSSLength.toDisplayPortValue(shadowDefinitions[2]) ?? 0 : 0.0;
217-
double spreadRadius =
218-
shadowDefinitions.length > 4 ? CSSLength.toDisplayPortValue(shadowDefinitions[3]) ?? 0 : 0.0;
219-
220-
Color color = CSSColor.generate(shadowDefinitions.last);
221-
if (color != null) {
222-
boxShadow.add(BoxShadow(
223-
offset: Offset(offsetX, offsetY),
224-
blurRadius: blurRadius,
225-
spreadRadius: spreadRadius,
226-
color: color,
227-
));
228-
}
207+
if (style.contains(BOX_SHADOW)) {
208+
var shadows = CSSStyleProperty.getShadowValues(style[BOX_SHADOW]);
209+
shadows.forEach((shadowDefinitions) {
210+
// Specifies the color of the shadow. If the color is absent, it defaults to currentColor.
211+
Color color = CSSColor.parseColor(shadowDefinitions[0] ?? style[COLOR]);
212+
double offsetX = CSSLength.toDisplayPortValue(shadowDefinitions[1]) ?? 0;
213+
double offsetY = CSSLength.toDisplayPortValue(shadowDefinitions[2]) ?? 0;
214+
double blurRadius = CSSLength.toDisplayPortValue(shadowDefinitions[3]) ?? 0;
215+
double spreadRadius = CSSLength.toDisplayPortValue(shadowDefinitions[4]) ?? 0;
216+
217+
if (color != null) {
218+
boxShadow.add(BoxShadow(
219+
offset: Offset(offsetX, offsetY),
220+
blurRadius: blurRadius,
221+
spreadRadius: spreadRadius,
222+
color: color,
223+
));
229224
}
230-
}
225+
});
231226

232227
// Tips only debug.
233228
if (!PRODUCTION && boxShadow.isEmpty) {
234-
print('[Warning] Wrong style format with boxShadow: ${style['boxShadow']}');
229+
print('[Warning] Wrong style format with boxShadow: ${style[BOX_SHADOW]}');
235230
print(' Correct syntax: inset? && <length>{2,4} && <color>?');
236231
}
237232
}
233+
238234
return boxShadow;
239235
}
240236

241237
double getBorderRadius(CSSStyleDeclaration style, String side) {
242238
if (style.contains(side)) {
243239
return CSSLength.toDisplayPortValue(style[side]) ?? 0;
244-
} else if (style.contains('borderRadius')) {
245-
return CSSLength.toDisplayPortValue(style['borderRadius']) ?? 0;
240+
} else if (style.contains(BORDER_RADIUS)) {
241+
return CSSLength.toDisplayPortValue(style[BORDER_RADIUS]) ?? 0;
246242
}
247243
return 0.0;
248244
}
249245

250-
static RegExp _splitRegExp = RegExp(r' ');
251-
252-
static List<String> getShorttedProperties(String input) {
253-
assert(input != null);
254-
return input.trim().split(_splitRegExp);
255-
}
256-
257246
// border default width 3.0
258247
static double defaultBorderLineWidth = 3.0;
259248
static BorderStyle defaultBorderStyle = BorderStyle.none;
260-
static Color defaultBorderColor = CSSColor.black;
249+
static Color defaultBorderColor = CSSColor.initial;
261250

262251
static BorderStyle getBorderStyle(String input) {
263252
BorderStyle borderStyle;
264253
switch (input) {
265-
case 'solid':
254+
case SOLID:
266255
borderStyle = BorderStyle.solid;
267256
break;
268257
default:
@@ -272,15 +261,12 @@ mixin CSSDecoratedBoxMixin on CSSBackgroundMixin {
272261
return borderStyle;
273262
}
274263

275-
// TODO: Shortted order in web not keep in same order
276-
static Map _getShorttedInfoFromString(String input) {
277-
List<String> splittedBorder = getShorttedProperties(input);
278-
279-
double width = splittedBorder.length > 0 ? CSSLength.toDisplayPortValue(splittedBorder[0]) : null;
280-
281-
BorderStyle style = splittedBorder.length > 1 ? getBorderStyle(splittedBorder[1]) : null;
264+
static Map _getShorthandInfo(String input) {
265+
List<String> properties = CSSStyleProperty.getBorderValues(input);
282266

283-
Color color = splittedBorder.length > 2 ? CSSColor.generate(splittedBorder[2]) : null;
267+
double width = CSSLength.toDisplayPortValue(properties[0]) ?? defaultBorderLineWidth;
268+
BorderStyle style = getBorderStyle(properties[1]);
269+
Color color = CSSColor.parseColor(properties[2]) ?? defaultBorderColor;
284270

285271
return {'Color': color, 'Style': style, 'Width': width};
286272
}
@@ -294,27 +280,27 @@ mixin CSSDecoratedBoxMixin on CSSBackgroundMixin {
294280
final String widthName = 'Width';
295281
final String styleName = 'Style';
296282
final String colorName = 'Color';
297-
Map borderShorttedInfo;
298-
Map borderSideShorttedInfo;
299-
if (style.contains(borderName)) {
300-
borderShorttedInfo = _getShorttedInfoFromString(style[borderName]);
283+
Map borderShorthandInfo;
284+
Map borderSideShorthandInfo;
285+
if (style.contains(BORDER)) {
286+
borderShorthandInfo = _getShorthandInfo(style[BORDER]);
301287
}
302288

303289
if (style.contains(borderSideName)) {
304-
borderSideShorttedInfo = _getShorttedInfoFromString(style[borderSideName]);
290+
borderSideShorthandInfo = _getShorthandInfo(style[borderSideName]);
305291
}
306292

307293
// Set border style
308294
final String borderSideStyleName = borderSideName + styleName; // eg. borderLeftStyle/borderRightStyle
309295
final String borderStyleName = borderName + styleName; // borderStyle
310296
if (style.contains(borderSideStyleName)) {
311297
borderSide.borderStyle = getBorderStyle(style[borderSideStyleName]);
312-
} else if (borderSideShorttedInfo != null && borderSideShorttedInfo[styleName] != null) {
313-
borderSide.borderStyle = borderSideShorttedInfo[styleName];
298+
} else if (borderSideShorthandInfo != null && borderSideShorthandInfo[styleName] != null) {
299+
borderSide.borderStyle = borderSideShorthandInfo[styleName];
314300
} else if (style.contains(borderStyleName)) {
315301
borderSide.borderStyle = getBorderStyle(style[borderStyleName]);
316-
} else if (borderShorttedInfo != null && borderShorttedInfo[styleName] != null) {
317-
borderSide.borderStyle = borderShorttedInfo[styleName];
302+
} else if (borderShorthandInfo != null && borderShorthandInfo[styleName] != null) {
303+
borderSide.borderStyle = borderShorthandInfo[styleName];
318304
}
319305

320306
// border width should be zero when style is none
@@ -326,14 +312,14 @@ mixin CSSDecoratedBoxMixin on CSSBackgroundMixin {
326312
final String borderWidthName = borderName + widthName; // borderWidth
327313
if (style.contains(borderSideWidthName) && (style[borderSideWidthName] as String).isNotEmpty) {
328314
borderSide.borderWidth = CSSLength.toDisplayPortValue(style[borderSideWidthName]) ?? 0;
329-
} else if (borderSideShorttedInfo != null && borderSideShorttedInfo[widthName] != null) {
315+
} else if (borderSideShorthandInfo != null && borderSideShorthandInfo[widthName] != null) {
330316
// eg. borderLeft: 'solid 1px black'
331-
borderSide.borderWidth = borderSideShorttedInfo[widthName];
317+
borderSide.borderWidth = borderSideShorthandInfo[widthName];
332318
} else if (style.contains(borderWidthName)) {
333319
borderSide.borderWidth = CSSLength.toDisplayPortValue(style[borderWidthName]) ?? 0;
334-
} else if (borderShorttedInfo != null && borderShorttedInfo[widthName] != null) {
320+
} else if (borderShorthandInfo != null && borderShorthandInfo[widthName] != null) {
335321
// eg. border: 'solid 2px red'
336-
borderSide.borderWidth = borderShorttedInfo[widthName];
322+
borderSide.borderWidth = borderShorthandInfo[widthName];
337323
}
338324
}
339325

@@ -342,20 +328,17 @@ mixin CSSDecoratedBoxMixin on CSSBackgroundMixin {
342328
final String borderSideColorName = borderSideName + colorName; // eg. borderLeftColor/borderRightColor
343329
final String borderColorName = borderName + colorName; // borderColor
344330
if (style.contains(borderSideColorName)) {
345-
borderColor = CSSColor.generate(style[borderSideColorName]);
346-
} else if (borderSideShorttedInfo != null && borderSideShorttedInfo[colorName] != null) {
347-
borderColor = borderSideShorttedInfo[colorName];
331+
borderColor = CSSColor.parseColor(style[borderSideColorName]);
332+
} else if (borderSideShorthandInfo != null && borderSideShorthandInfo[colorName] != null) {
333+
borderColor = borderSideShorthandInfo[colorName];
348334
} else if (style.contains(borderColorName)) {
349-
borderColor = CSSColor.generate(style[borderColorName]);
350-
} else if (borderShorttedInfo != null && borderShorttedInfo[colorName] != null) {
351-
borderColor = borderShorttedInfo[colorName];
335+
borderColor = CSSColor.parseColor(style[borderColorName]);
336+
} else if (borderShorthandInfo != null && borderShorthandInfo[colorName] != null) {
337+
borderColor = borderShorthandInfo[colorName];
352338
}
353339

354340
if (borderColor != null) {
355-
borderSide.color = borderSide.color.withAlpha(borderColor.alpha);
356-
borderSide.color = borderSide.color.withRed(borderColor.red);
357-
borderSide.color = borderSide.color.withGreen(borderColor.green);
358-
borderSide.color = borderSide.color.withBlue(borderColor.blue);
341+
borderSide.color = borderColor;
359342
}
360343

361344
return borderSide;

‎kraken/lib/src/css/properties.dart‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const String BORDER = 'border';
2828
const String BORDER_WIDTH = 'borderWidth';
2929
const String BORDER_STYLE = 'borderStyle';
3030
const String BORDER_COLOR = 'borderColor';
31+
const String BORDER_RADIUS = 'borderRadius';
3132

3233
const String FONT = 'font';
3334
const String FONT_STYLE = 'fontStyle';
@@ -63,8 +64,13 @@ const String TEXT_DECORATION = 'textDecoration';
6364
const String TEXT_DECORATION_LINE = 'textDecorationLine';
6465
const String TEXT_DECORATION_COLOR = 'textDecorationColor';
6566
const String TEXT_DECORATION_STYLE = 'textDecorationStyle';
67+
const String TEXT_SHADOW = 'textShadow';
6668
const String LETTER_SPACING = 'letterSpacing';
6769
const String WORD_SPACING = 'wordSpacing';
6870

71+
const String BOX_SHADOW = 'boxShadow';
72+
6973
// values
7074
const String NORMAL = 'normal';
75+
const String SOLID = 'solid';
76+
const String NONE = 'none';

‎kraken/lib/src/css/style_property.dart‎

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11

22
import 'package:kraken/css.dart';
33

4-
final RegExp _splitRegExp = RegExp(r'\s+');
4+
final RegExp _spaceRegExp = RegExp(r'\s+(?![^(]*\))');
5+
final RegExp _commaRegExp = RegExp(r',(?![^\(]*\))');
56

67
class CSSStyleProperty {
78

@@ -51,9 +52,62 @@ class CSSStyleProperty {
5152
if (style.containsKey(MARGIN_BOTTOM)) style.remove(MARGIN_BOTTOM);
5253
}
5354

55+
static List<List<String>> getShadowValues(String property) {
56+
assert(property != null);
57+
return property.split(_commaRegExp).map((String shadow) {
58+
List<String> parts = shadow.trim().split(_spaceRegExp);
59+
60+
String inset;
61+
String color;
62+
63+
List<String> lengthValues = [];
64+
65+
for (String part in parts) {
66+
67+
if (part == 'inset') {
68+
inset = part;
69+
} else if (CSSLength.isLength(part)) {
70+
lengthValues.add(part);
71+
} else {
72+
color = part;
73+
}
74+
}
75+
76+
return [
77+
color,
78+
lengthValues[0], // offsetX
79+
lengthValues[1], // offsetY
80+
lengthValues[2], // blurRadius
81+
lengthValues[3], // spreadRadius
82+
inset
83+
];
84+
});
85+
}
86+
87+
static List<String> getBorderValues(String shorthandProperty) {
88+
assert(shorthandProperty != null);
89+
var properties = shorthandProperty.trim().split(_spaceRegExp);
90+
91+
String width;
92+
String style;
93+
String color;
94+
95+
properties.forEach((String property) {
96+
if (width == null && CSSLength.isLength(property)) {
97+
width = property;
98+
} else if (style == null && (property == SOLID || property == NONE)) {
99+
style = property;
100+
} else {
101+
color = property;
102+
}
103+
});
104+
105+
return [width, style, color];
106+
}
107+
54108
static List<String> getInsetValues(String shorthandProperty) {
55109
assert(shorthandProperty != null);
56-
var properties = shorthandProperty.trim().split(_splitRegExp);
110+
var properties = shorthandProperty.trim().split(_spaceRegExp);
57111

58112
String topValue;
59113
String rightValue;
@@ -83,7 +137,7 @@ class CSSStyleProperty {
83137
// https://drafts.csswg.org/css-values-4/#typedef-position
84138
static List<String> getPositionValues(String shorthandProperty) {
85139
assert(shorthandProperty != null);
86-
var properties = shorthandProperty.trim().split(_splitRegExp);
140+
var properties = shorthandProperty.trim().split(_spaceRegExp);
87141

88142
String x;
89143
String y;
@@ -105,4 +159,5 @@ class CSSStyleProperty {
105159
property == FONT ||
106160
property == ANIMATION;
107161
}
108-
}
162+
}
163+

0 commit comments

Comments
 (0)