add clipping js code

elements/ClipPath.js

@@ -0,0 +1,22 @@
+import React, {
+    Component,
+    PropTypes,
+    Children
+} from 'react-native';
+import {NativeGroup} from './G';
+
+class ClipPath extends Component{
+    static displayName = 'ClipPath';
+    static propTypes = {
+        id: PropTypes.string.isRequired
+    };
+
+    render() {
+        // TODO: 合并children路径
+        // TODO: clip-rule
+        return <NativeGroup />;
+    }
+}
+
+export default ClipPath;
+

elements/G.js

@@ -19,7 +19,13 @@ const transformProps = {
     originX: null,
     originY: null
 };
-import extractProps from '../lib/extractProps';
+
+const clipProps = {
+    clipPath: null,
+    clipRule: null
+};
+
+import extractProps from '../lib/extract/extractProps';
 
 class G extends Component{
     static displayName = 'G';
@@ -28,6 +34,7 @@ class G extends Component{
         return Children.map(this.props.children, child => cloneElement(child, {
             ...this.props,
             ...transformProps,
+            ...clipProps,
             ...child.props,
             id: null
         }));
@@ -54,6 +61,7 @@ class G extends Component{
         }
     }
 }
+
 var NativeGroup = createReactNativeComponentClass({
     validAttributes: GroupAttributes,
     uiViewClassName: 'RNSVGGroup'

elements/Gradient.js

@@ -4,7 +4,7 @@ import React, {
     Children
 } from 'react-native';
 import {NativeGroup} from './G';
-import {set, remove} from '../lib/extractFill';
+import {set, remove} from '../lib/extract/extractFill';
 import percentFactory from '../lib/percentFactory';
 import percentToFloat from '../lib/percentToFloat';
 import Stop from './Stop';

elements/LinearGradient.js

@@ -7,7 +7,7 @@ import React, {
 import stopsOpacity from '../lib/stopsOpacity';
 import numberProp from '../lib/numberProp';
 import Gradient from './Gradient';
-import {LINEAR_GRADIENT} from '../lib/extractBrush';
+import {LINEAR_GRADIENT} from '../lib/extract/extractBrush';
 import {insertColorStopsIntoArray} from '../lib/insertProcessor';
 
 function LinearGradientGenerator(stops, x1, y1, x2, y2) {
@@ -73,4 +73,4 @@ class LinearGradient extends Gradient{
 }
 
 export default LinearGradient;
-
+export {LinearGradientGenerator};

elements/Path.js

@@ -8,7 +8,7 @@ import React, {
 import Defs from './Defs';
 import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/createReactNativeComponentClass';
 import calculateBoundingBox from '../lib/calculateBoundingBox';
-import extractProps from '../lib/extractProps';
+import extractProps from '../lib/extract/extractProps';
 import SerializablePath from 'react-native/Libraries/ART/ARTSerializablePath';
 import {PathAttributes} from '../lib/attributes';
 

elements/RadialGradient.js

@@ -6,7 +6,7 @@ import React, {
 import stopsOpacity from '../lib/stopsOpacity';
 import numberProp from '../lib/numberProp';
 import Gradient from './Gradient';
-import {RADIAL_GRADIENT} from '../lib/extractBrush';
+import {RADIAL_GRADIENT} from '../lib/extract/extractBrush';
 import {insertDoubleColorStopsIntoArray} from '../lib/insertProcessor';
 
 
@@ -84,4 +84,4 @@ class RadialGradient extends Gradient{
 }
 
 export default RadialGradient;
-
+export {RadialGradientGenerator};

elements/Svg.js

@@ -6,7 +6,7 @@ import React, {
     View,
     requireNativeComponent
 } from 'react-native';
-import extractViewbox from '../lib/extractViewbox';
+import extractViewbox from '../lib/extract/extractViewbox';
 import ViewBox from './ViewBox';
 import _ from 'lodash';
 

elements/Symbol.js

@@ -5,7 +5,7 @@ import React, {
 
 import ViewBox from './ViewBox';
 import Defs from './Defs';
-import extractViewbox from '../lib/extractViewbox';
+import extractViewbox from '../lib/extract/extractViewbox';
 class SymbolElement extends Component{
     static displayName = 'Symbol';
     static propType = {

elements/Text.js

@@ -3,8 +3,8 @@ import React, {
 } from 'react-native';
 import Defs from './Defs';
 import createReactNativeComponentClass from 'react-native/Libraries/ReactNative/createReactNativeComponentClass';
-import extractProps from '../lib/extractProps';
-import extractText from '../lib/extractText';
+import extractProps from '../lib/extract/extractProps';
+import extractText from '../lib/extract/extractText';
 import {TextAttributes} from '../lib/attributes';
 import numberProp from '../lib/numberProp';
 

elements/ViewBox.js

@@ -4,7 +4,7 @@ import React, {
 } from 'react-native';
 
 import G from './G';
-import extractViewbox from '../lib/extractViewbox';
+import extractViewbox from '../lib/extract/extractViewbox';
 class ViewBox extends Component{
     static displayName = 'ViewBox';
     static propType = {

lib/attributes.js

@@ -42,13 +42,14 @@ var NodeAttributes = {
     transform: {
         diff: arrayDiffer
     },
-    opacity: true
+    opacity: true,
+    clipPath: {
+        diff: arrayDiffer
+    },
+    clipRule: true
 };
 
 var GroupAttributes = Object.assign({
-    clipping: {
-        diff: arrayDiffer
-    }
 }, NodeAttributes);
 
 var RenderableAttributes = Object.assign({

lib/extract/extractClipping.js

@@ -0,0 +1,18 @@
+import SerializablePath from 'react-native/Libraries/ART/ARTSerializablePath';
+
+const clipRules = {
+    evenodd: 0,
+    nonzero: 1
+};
+
+export default function (props) {
+    let {clipPath, clipRule} = props;
+    let clippingProps = {};
+
+    if (clipPath) {
+        clippingProps.clipPath = new SerializablePath(clipPath).toJSON();
+        clippingProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
+    }
+
+    return clippingProps;
+}

lib/extract/extractFill.js

@@ -1,19 +1,13 @@
-import rgba from './rgba';
+import rgba from '../rgba';
+import {LinearGradientGenerator} from '../../elements/LinearGradient';
+import {RadialGradientGenerator} from '../../elements/RadialGradient';
 import extractBrush from './extractBrush';
-import {
-    ART
-} from 'react-native';
-
-let {
-    LinearGradient,
-    RadialGradient
-    } = ART;
 
 let fillPatterns = {};
 let fillReg = /^url\(#(\w+?)\)$/;
 
 function isGradient(obj) {
-    return obj instanceof LinearGradient || obj instanceof RadialGradient;
+    return obj instanceof LinearGradientGenerator || obj instanceof RadialGradientGenerator;
 }
 
 function set(id, pattern) {

lib/extract/extractProps.js

@@ -1,6 +1,8 @@
 import extractFill from './extractFill';
 import extractStroke from './extractStroke';
 import extractTransform from './extractTransform';
+import extractClipping from './extractClipping';
+import _ from 'lodash';
 
 export default function(props, options = {stroke: true, join: true, transform: true, fill: true}) {
     if (props.visible === false) {
@@ -12,12 +14,16 @@ export default function(props, options = {stroke: true, join: true, transform: t
         opacity: +props.opacity || 1
     };
 
+    if (props.clipPath) {
+        _.assign(extractedProps, extractClipping(props));
+    }
+
     if (options.stroke) {
-        Object.assign(extractedProps, extractStroke(props));
+        _.assign(extractedProps, extractStroke(props));
     }
 
     if (options.fill) {
-        Object.assign(extractedProps, extractFill.call(this, props));
+        _.assign(extractedProps, extractFill.call(this, props));
     }
 
     if (options.transform) {

lib/extract/extractStroke.js

@@ -1,4 +1,4 @@
-import rgba from './rgba';
+import rgba from '../rgba';
 import extractBrush from './extractBrush';
 let separator = /\s*,\s*/;