Implement strokeDasharray correctly.

Support units and percentages with whitespace separated and/or (possibly white-space surrounded) comma separated length lists.
This commit is contained in:
Mikael Sand
2017-08-04 00:26:00 +03:00
parent b38ae08e9c
commit 786b5f2375
6 changed files with 51 additions and 65 deletions
+14 -14
View File
@@ -1,8 +1,7 @@
import extractBrush from './extractBrush';
import extractOpacity from './extractOpacity';
import {strokeProps} from '../props';
const separator = /\s*,\s*/;
import extractLengthList from "./extractLengthList";
const caps = {
butt: 0,
@@ -26,21 +25,22 @@ export default function(props, styleProperties) {
});
const {stroke} = props;
let strokeWidth = props.strokeWidth;
let strokeDasharray = props.strokeDasharray;
let {
strokeWidth,
strokeDasharray
} = props;
if (!strokeDasharray || strokeDasharray === 'none') {
strokeDasharray = null;
} else if (typeof strokeDasharray === 'string') {
strokeDasharray = strokeDasharray.split(separator).map(dash => +dash);
}
// <dasharray> It's a list of comma and/or white space separated <length>s
// and <percentage>s that specify the lengths of alternating dashes and gaps.
// If an odd number of values is provided, then the list of values is repeated
// to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.
if (strokeDasharray && (strokeDasharray.length % 2) === 1) {
strokeDasharray.concat(strokeDasharray);
} else {
// <dasharray> It's a list of comma and/or white space separated <length>s
// and <percentage>s that specify the lengths of alternating dashes and gaps.
// If an odd number of values is provided, then the list of values is repeated
// to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.
strokeDasharray = extractLengthList(strokeDasharray);
if (strokeDasharray && (strokeDasharray.length % 2) === 1) {
strokeDasharray.concat(strokeDasharray);
}
}
if (!strokeWidth || typeof strokeWidth !== 'string') {