finish gradients refactor

lib/extract/extractBrush.js

@@ -1,23 +1,22 @@
 import Color from 'color';
-const SOLID_COLOR = 0;
-const LINEAR_GRADIENT = 1;
-const RADIAL_GRADIENT = 2;
-const PATTERN = 3;
+import _ from 'lodash';
+import patternReg from './patternReg';
 
 export default function (colorOrBrush) {
-    if (!colorOrBrush) {
+    if (colorOrBrush === 'none') {
         return null;
-    }
-    if (colorOrBrush._brush) {
-        return colorOrBrush._brush;
+    } else if (_.isNil(colorOrBrush)) {
+        colorOrBrush = '#000';
     }
 
-    let c = new Color(colorOrBrush).rgbaArray();
-    return [SOLID_COLOR, c[0] / 255, c[1] / 255, c[2] / 255, c[3]];
+    let matched = colorOrBrush.match(patternReg);
+
+    // brush
+    if (matched) {
+        return [1, matched[1]];
+        //todo:
+    } else { // solid color
+        let c = new Color(colorOrBrush).rgbaArray();
+        return [0, c[0] / 255, c[1] / 255, c[2] / 255, c[3]];
+    }
 }
-
-export {
-    LINEAR_GRADIENT,
-    RADIAL_GRADIENT,
-    PATTERN
-};

lib/extract/extractFill.js

@@ -1,33 +1,15 @@
-import rgba from '../rgba';
 import extractBrush from './extractBrush';
-import patterns from './patterns';
+import extractOpacity from './extractOpacity';
 
 const fillRules = {
     evenodd: 0,
     nonzero: 1
 };
 
-function fillFilter(props) {
-    let {fill} = props;
-    let fillOpacity = +props.fillOpacity;
-
-    if (fill === 'none') {
-        return null;
-    } else if (fill) {
-        return patterns(fill, fillOpacity);
-    } else if (props.fill === undefined) {
-        return rgba('#000', isNaN(fillOpacity) ? 1 : fillOpacity).rgbaString();
-    } else {
-        return null;
-    }
-}
-
 export default function(props) {
-    let fill = extractBrush(fillFilter(props), props);
-    let fillRule = fillRules[props.fillRule] === 0 ? 0 : 1;
-
     return {
-        fill,
-        fillRule
+        fill: extractBrush(props.fill),
+        fillOpacity: extractOpacity(props.fillOpacity),
+        fillRule: fillRules[props.fillRule] === 0 ? 0 : 1
     };
 }

lib/extract/extractOpacity.js

@@ -0,0 +1,6 @@
+import _ from 'lodash';
+
+export default function (opacity) {
+    let value = +opacity;
+    return (_.isNil(opacity) || isNaN(value)) ? 1 : value;
+}

lib/extract/extractStroke.js

@@ -1,6 +1,5 @@
 import extractBrush from './extractBrush';
-import patterns from './patterns';
-
+import extractOpacity from './extractOpacity';
 let separator = /\s*,\s*/;
 
 const caps = {
@@ -15,7 +14,7 @@ const joins = {
     round: 1
 };
 
-function strokeFilter(props) {
+export default function(props) {
     let strokeWidth = +props.strokeWidth;
     let {stroke} = props;
     if (!strokeWidth && !stroke) {
@@ -37,9 +36,9 @@ function strokeFilter(props) {
         stroke = '#000';
     }
 
-    // TODO: propTypes check
     return {
-        stroke: patterns(stroke, +props.strokeOpacity),
+        stroke: extractBrush(stroke),
+        strokeOpacity: extractOpacity(props.strokeOpacity),
         strokeLinecap: caps[props.strokeLinecap] || 0,
         strokeLinejoin: joins[props.strokeLinejoin] || 0,
         strokeDasharray: strokeDasharray || null,
@@ -48,12 +47,3 @@ function strokeFilter(props) {
         strokeMiterlimit: props.strokeMiterlimit || 4
     };
 }
-
-export default function(props) {
-    let strokeProps = strokeFilter(props);
-
-    return strokeProps ? {
-        ...strokeProps,
-        stroke: extractBrush(strokeProps.stroke, props)
-    } : null;
-}

lib/extract/patterns.js

@@ -1,45 +0,0 @@
-import rgba from '../rgba';
-let patterns = {};
-import patternReg from './patternReg';
-
-import {LinearGradientGenerator} from '../../elements/LinearGradient';
-import {RadialGradientGenerator} from '../../elements/RadialGradient';
-
-
-function isGradient(obj) {
-    return obj instanceof LinearGradientGenerator || obj instanceof RadialGradientGenerator;
-}
-
-function set(id, pattern) {
-    patterns[id] = pattern;
-}
-
-function remove(id) {
-    delete patterns[id];
-}
-
-export {
-    set,
-    remove
-};
-
-export default function(patternSting, opacity, svgId) {
-    if (isGradient(patternSting)) {
-        return patternSting;
-    }
-
-    // 尝试匹配 "url(#pattern)"
-    let matched = patternSting.match(patternReg);
-
-    if (matched) {
-        let patternName = `${matched[1]}:${svgId}`;
-        let pattern = patterns[patternName];
-
-        if (pattern) {
-            return pattern(opacity);
-        }
-        return null;
-    }
-
-    return rgba(patternSting, opacity).rgbaString();
-}