diff --git a/Example/examples/Definations.js b/Example/examples/Definations.js index 18dfea41..f984a941 100644 --- a/Example/examples/Definations.js +++ b/Example/examples/Definations.js @@ -7,7 +7,9 @@ import Svg, { G, Path, Use, - Rect + Rect, + Circle, + ClipPath } from 'react-native-svg'; class DefsExample extends Component{ @@ -19,12 +21,16 @@ class DefsExample extends Component{ width="100" > - + + + + - - + + + ; } } @@ -34,11 +40,11 @@ const icon = - + - + ; diff --git a/elements/Circle.js b/elements/Circle.js index d8fd363e..01764692 100644 --- a/elements/Circle.js +++ b/elements/Circle.js @@ -7,15 +7,16 @@ import {circleProps, pathProps, fillProps, strokeProps, numberProp} from '../lib class Circle extends Shape { static displayName = 'Circle'; + static propTypes = { ...pathProps, ...circleProps }; - static contextTypes = { - ...fillProps, - ...strokeProps, - ...circleProps + static defaultProps = { + cx: 0, + cy: 0, + r: 0 }; setNativeProps = (...args) => { diff --git a/elements/ClipPath.js b/elements/ClipPath.js index 02d8f20d..8b1728ba 100644 --- a/elements/ClipPath.js +++ b/elements/ClipPath.js @@ -1,5 +1,4 @@ import React, {Component, PropTypes} from 'react'; -import {set, remove} from '../lib/extract/extractClipping'; import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; import {ClipPathAttributes} from '../lib/attributes'; @@ -9,26 +8,9 @@ class ClipPath extends Component{ id: PropTypes.string.isRequired }; - constructor() { - super(...arguments); - this.id = this.props.id + ':' + this.props.svgId; - } - - componentWillReceiveProps = nextProps => { - let id = nextProps.id + ':' + nextProps.svgId; - if (id !== this.id) { - remove(this.id); - } - }; - - componentWillUnmount = () => { - remove(this.id); - }; - render() { - set(this.id, this.id); return {this.props.children}; } } diff --git a/elements/Ellipse.js b/elements/Ellipse.js index 7beece7f..760a06e2 100644 --- a/elements/Ellipse.js +++ b/elements/Ellipse.js @@ -7,15 +7,17 @@ import {EllipseAttributes} from '../lib/attributes'; class Ellipse extends Shape{ static displayName = 'Ellipse'; + static propTypes = { ...pathProps, ...ellipseProps }; - static contextTypes = { - ...fillProps, - ...strokeProps, - ...ellipseProps + static defaultProps = { + cx: 0, + cy: 0, + rx: 0, + ry: 0 }; setNativeProps = (...args) => { diff --git a/elements/G.js b/elements/G.js index 94d34dbe..7ebed32a 100644 --- a/elements/G.js +++ b/elements/G.js @@ -1,31 +1,14 @@ import React, {Component, PropTypes} from 'react'; import _ from 'lodash'; import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; -import {numberProp, contextProps} from '../lib/props'; +import {transformProps} from '../lib/props'; import {GroupAttributes} from '../lib/attributes'; import extractProps from '../lib/extract/extractProps'; class G extends Component{ static displayName = 'G'; - static contextTypes = { - ...contextProps - }; - - static childContextTypes = { - ...contextProps - }; - - getChildContext = () => { - let context = _.reduce(contextProps, (props, value, key) => { - if (!_.isNil(this.props[key])) { - props[key] = this.props[key]; - } - return props; - }, {}); - - return _.defaults({}, this.context, context); - }; + static propTypes = transformProps; setNativeProps = (...args) => { this.root.setNativeProps(...args); diff --git a/elements/Image.js b/elements/Image.js index 33b00e1e..a61db7d5 100644 --- a/elements/Image.js +++ b/elements/Image.js @@ -11,14 +11,21 @@ class Image extends Shape { static propTypes = { x: numberProp, y: numberProp, - width: numberProp, - height: numberProp, + width: numberProp.isRequired, + height: numberProp.isRequired, href: PropTypes.number.isRequired, ...responderProps, ...touchableProps //preserveAspectRatio: PropTypes.string }; + static defaultProps = { + x: 0, + y: 0, + width: 0, + height: 0 + }; + setNativeProps = (...args) => { this.root.setNativeProps(...args); }; diff --git a/elements/Line.js b/elements/Line.js index 19a2dafc..be96a4a5 100644 --- a/elements/Line.js +++ b/elements/Line.js @@ -7,15 +7,17 @@ import {lineProps, pathProps, fillProps, strokeProps, numberProp} from '../lib/p class Line extends Shape { static displayName = 'Line'; + static propTypes = { ...pathProps, ...lineProps }; - static contextTypes = { - ...fillProps, - ...strokeProps, - ...lineProps + static defaultProps = { + x1: 0, + y1: 0, + x2: 0, + y2: 0 }; setNativeProps = (...args) => { diff --git a/elements/Path.js b/elements/Path.js index a78f9fe4..de3d74c0 100644 --- a/elements/Path.js +++ b/elements/Path.js @@ -10,23 +10,10 @@ class Path extends Shape { static displayName = 'Path'; static propTypes = { - d: PropTypes.string, + d: PropTypes.string.isRequired, ...pathProps }; - static contextTypes = { - ...pathProps - }; - - - _dimensions = null; - - componentWillReceiveProps = nextProps => { - if (nextProps.d !== this.props.d) { - this._dimensions = null; - } - }; - setNativeProps = (...args) => { this.root.setNativeProps(...args); }; diff --git a/elements/Polygon.js b/elements/Polygon.js index c5608ec2..fa85df0a 100644 --- a/elements/Polygon.js +++ b/elements/Polygon.js @@ -1,12 +1,17 @@ import React, {Component, PropTypes} from 'react'; import Path from './Path'; import {pathProps} from '../lib/props'; +import _ from 'lodash'; class Polygon extends Component{ static displayName = 'Polygon'; static propTypes = { ...pathProps, - points: PropTypes.oneOfType([PropTypes.string, PropTypes.array]) + points: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired + }; + + static defaultProps = { + points: '' }; setNativeProps = (...args) => { @@ -14,10 +19,15 @@ class Polygon extends Component{ }; render() { + let points = this.props.points; + if (_.isArray(points)) { + points = points.join(','); + } + return this.root = ele} {...this.props} - d={`M${this.props.points.trim().replace(/\s+/g, 'L')}z`} + d={`M${points.trim().replace(/\s+/g, 'L')}z`} />; } } diff --git a/elements/Polyline.js b/elements/Polyline.js index b8afb1db..d3d6e4fd 100644 --- a/elements/Polyline.js +++ b/elements/Polyline.js @@ -1,12 +1,17 @@ import React, {Component, PropTypes} from 'react'; import Path from './Path'; import {pathProps} from '../lib/props'; +import _ from 'lodash'; class Polyline extends Component{ static displayName = 'Polyline'; static propTypes = { ...pathProps, - points: PropTypes.oneOfType([PropTypes.string, PropTypes.array]) + points: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired + }; + + static defaultProps = { + points: '' }; setNativeProps = (...args) => { @@ -14,10 +19,15 @@ class Polyline extends Component{ }; render() { + let points = this.props.points; + if (_.isArray(points)) { + points = points.join(','); + } + return this.root = ele} {...this.props} - d={`M${this.props.points.trim().replace(/\s+/g, 'L')}`} + d={`M${points.trim().replace(/\s+/g, 'L')}`} />; } } diff --git a/elements/Rect.js b/elements/Rect.js index 11879a61..179bd971 100644 --- a/elements/Rect.js +++ b/elements/Rect.js @@ -8,15 +8,19 @@ import Shape from './Shape'; class Rect extends Shape { static displayName = 'Rect'; + static propTypes = { ...pathProps, ...rectProps }; - static contextTypes = { - ...fillProps, - ...strokeProps, - ...rectProps + static defaultProps = { + x: 0, + y: 0, + width: 0, + height: 0, + rx: 0, + ry: 0 }; setNativeProps = (...args) => { @@ -37,8 +41,8 @@ class Rect extends Shape { y={props.y.toString()} width={props.width.toString()} height={props.height.toString()} - rx={props.rx ? props.rx.toString() : '0'} - ry={props.ry ? props.ry.toString() : '0'} + rx={props.rx.toString()} + ry={props.ry.toString()} />; } } diff --git a/elements/Svg.js b/elements/Svg.js index 9cac9307..db22ca09 100644 --- a/elements/Svg.js +++ b/elements/Svg.js @@ -30,15 +30,6 @@ class Svg extends Component{ id++; this.id = id; } - - getChildren = () => { - return Children.map(this.props.children, child => { - return cloneElement(child, { - svgId: this.id - }); - }); - }; - measureInWindow = (...args) => { this.root.measureInWindow(...args); }; @@ -67,9 +58,7 @@ class Svg extends Component{ preserveAspectRatio={props.preserveAspectRatio} width={props.width} height={props.height} - > - {this.getChildren()} - : this.getChildren(); + >{props.children} : props.children; return ( { diff --git a/elements/Use.js b/elements/Use.js index 7e86a4dd..12e1a2c2 100644 --- a/elements/Use.js +++ b/elements/Use.js @@ -1,10 +1,11 @@ import {PropTypes} from 'react'; import {pathProps} from '../lib/props'; -import {UseAttributes} from '../lib/attributes'; +import {UseAttributes, RenderableOnlyAttributes} from '../lib/attributes'; import Shape from './Shape'; import React from 'react'; import patternReg from '../lib/extract/patternReg'; import createReactNativeComponentClass from 'react/lib/createReactNativeComponentClass'; +import _ from 'lodash'; class Defs extends Shape { static displayName = 'Use'; @@ -32,14 +33,35 @@ class Defs extends Shape { console.warn('Invalid `href` prop for `Use` element, expected a href like `"url(#id)"`, but got: "' + props.href + '"'); } + let mergeList = []; + + let extractedProps = this.extractProps(props, { + stroke: true, + fill: true, + responder: true, + transform: true + }); + + Object.keys(RenderableOnlyAttributes).forEach(name => { + + if (!_.isNil(props[name])) { + // clipPath prop may provide `clipPathRef` as native prop + if (name === 'clipPath') { + if (extractedProps[name]) { + mergeList.push(name); + } else if (extractedProps.clipPathRef) { + mergeList.push('clipPathRef'); + } + } else { + mergeList.push(name); + } + } + }); + return this.root = ele} - {...this.extractProps(props, { - stroke: true, - fill: true, - responder: true, - transform: true - })} + {...extractedProps} + mergeList={mergeList} href={href} >{props.children}; } diff --git a/ios/Elements/RNSVGClipPath.h b/ios/Elements/RNSVGClipPath.h index d99db001..bed8b4a2 100644 --- a/ios/Elements/RNSVGClipPath.h +++ b/ios/Elements/RNSVGClipPath.h @@ -14,6 +14,4 @@ @interface RNSVGClipPath : RNSVGGroup -- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event; - @end diff --git a/ios/Elements/RNSVGClipPath.m b/ios/Elements/RNSVGClipPath.m index a1d0764b..922f5e6a 100644 --- a/ios/Elements/RNSVGClipPath.m +++ b/ios/Elements/RNSVGClipPath.m @@ -10,16 +10,16 @@ @implementation RNSVGClipPath -- (void)saveDefination:(CGContextRef)context -{ - [[self getSvgView] defineClipPath:[self getPath:context] clipPathRef:self.name]; -} - - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event { return nil; } +- (void)saveDefination:(CGContextRef)context +{ + [[self getSvgView] defineClipPath:self clipPathRef:self.name]; +} + - (void)removeDefination { if (self.name) { diff --git a/ios/Elements/RNSVGGroup.m b/ios/Elements/RNSVGGroup.m index 7abb2c76..dc6c7e7b 100644 --- a/ios/Elements/RNSVGGroup.m +++ b/ios/Elements/RNSVGGroup.m @@ -64,10 +64,17 @@ [super willRemoveSubview:subview]; } -- (void)mergeProperties:(__kindof RNSVGNode *)target +- (void)mergeProperties:(__kindof RNSVGNode *)target mergeList:(NSArray *)mergeList { for (RNSVGNode *node in self.subviews) { - [node mergeProperties:target]; + [node mergeProperties:target mergeList:mergeList]; + } +} + +- (void)resetProperties +{ + for (RNSVGNode *node in self.subviews) { + [node resetProperties]; } } diff --git a/ios/Elements/RNSVGSvgView.h b/ios/Elements/RNSVGSvgView.h index 3caccff6..6a563925 100644 --- a/ios/Elements/RNSVGSvgView.h +++ b/ios/Elements/RNSVGSvgView.h @@ -19,13 +19,13 @@ /** * define content as clipPath template. */ -- (void)defineClipPath:(CGPathRef)clipPath clipPathRef:(NSString *)clipPathRef; +- (void)defineClipPath:(__kindof RNSVGNode *)clipPath clipPathRef:(NSString *)clipPathRef; - (void)removeClipPath:(NSString *)clipPathRef; -- (CGPathRef)getDefinedClipPath:(NSString *)clipPathRef; +- (RNSVGNode *)getDefinedClipPath:(NSString *)clipPathRef; -- (void)defineTemplate:(RNSVGNode *)template templateRef:(NSString *)templateRef; +- (void)defineTemplate:(__kindof RNSVGNode *)template templateRef:(NSString *)templateRef; - (void)removeTemplate:(NSString *)tempalteRef; diff --git a/ios/Elements/RNSVGSvgView.m b/ios/Elements/RNSVGSvgView.m index bb63d89d..cb88aaaa 100644 --- a/ios/Elements/RNSVGSvgView.m +++ b/ios/Elements/RNSVGSvgView.m @@ -13,7 +13,7 @@ @implementation RNSVGSvgView { - NSMutableDictionary *clipPaths; + NSMutableDictionary *clipPaths; NSMutableDictionary *templates; } @@ -64,12 +64,12 @@ return self.responsible ? [super hitTest:point withEvent:event] : nil; } -- (void)defineClipPath:(CGPathRef)clipPath clipPathRef:(NSString *)clipPathRef +- (void)defineClipPath:(__kindof RNSVGNode *)clipPath clipPathRef:(NSString *)clipPathRef { if (!clipPaths) { clipPaths = [[NSMutableDictionary alloc] init]; } - [clipPaths setValue:[NSValue valueWithPointer:clipPath] forKey:clipPathRef]; + [clipPaths setObject:clipPath forKey:clipPathRef]; } - (void)removeClipPath:(NSString *)clipPathRef @@ -79,9 +79,9 @@ } } -- (CGPathRef)getDefinedClipPath:(NSString *)clipPathRef +- (RNSVGNode *)getDefinedClipPath:(NSString *)clipPathRef { - return clipPaths ? [[clipPaths valueForKey:clipPathRef] pointerValue] : nil; + return clipPaths ? [clipPaths objectForKey:clipPathRef] : nil; } - (void)defineTemplate:(RNSVGNode *)template templateRef:(NSString *)templateRef diff --git a/ios/Elements/RNSVGUse.h b/ios/Elements/RNSVGUse.h index 54a4578f..746d916b 100644 --- a/ios/Elements/RNSVGUse.h +++ b/ios/Elements/RNSVGUse.h @@ -15,5 +15,7 @@ @interface RNSVGUse : RNSVGRenderable @property (nonatomic, strong) NSString *href; +@property (nonatomic, copy) NSArray *mergeList; + @end diff --git a/ios/Elements/RNSVGUse.m b/ios/Elements/RNSVGUse.m index c5528677..efe98bcc 100644 --- a/ios/Elements/RNSVGUse.m +++ b/ios/Elements/RNSVGUse.m @@ -10,12 +10,22 @@ @implementation RNSVGUse +- (void)setMergeList:(NSArray *)mergeList +{ + if (mergeList == _mergeList) { + return; + } + _mergeList = mergeList; + [self invalidate]; +} + - (void)renderLayerTo:(CGContextRef)context { RNSVGNode* template = [[self getSvgView] getDefinedTemplate:self.href]; if (template) { - [template mergeProperties:self]; + [template mergeProperties:self mergeList:self.mergeList]; [template renderTo:context]; + [template resetProperties]; } else if (self.href) { // TODO: calling yellow box here RCTLogWarn(@"`Use` element expected a pre-defined svg template as `href` prop, template named: %@ is not defined.", self.href); diff --git a/ios/RNSVGNode.h b/ios/RNSVGNode.h index 57004656..8b89adf2 100644 --- a/ios/RNSVGNode.h +++ b/ios/RNSVGNode.h @@ -36,16 +36,13 @@ */ - (void)renderLayerTo:(CGContextRef)context; +- (void)renderClip:(CGContextRef)context; + /** * clip node by clipPath or clipPathRef. */ - (void)clip:(CGContextRef)context; -/** - * get clip path for current node. - */ -- (CGPathRef)getClipPath; - /** * getPath will return the path inside node as a ClipPath. */ @@ -70,8 +67,13 @@ - (void)removeDefination; /** - * merge owned properties into target element`s properties + * Just for template node to merge target node`s properties into owned properties */ -- (void)mergeProperties:(__kindof RNSVGNode *)target; +- (void)mergeProperties:(__kindof RNSVGNode *)target mergeList:(NSArray *)mergeList; + +/** + * Just for template node to reset all owned properties once after rendered. + */ +- (void)resetProperties; @end diff --git a/ios/RNSVGNode.m b/ios/RNSVGNode.m index e83f7ab4..7ac503db 100644 --- a/ios/RNSVGNode.m +++ b/ios/RNSVGNode.m @@ -11,6 +11,9 @@ #import "RNSVGClipPath.h" @implementation RNSVGNode +{ + CGFloat originOpacity; +} - (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex { @@ -66,7 +69,7 @@ - (void)renderTo:(CGContextRef)context { float opacity = self.opacity; - + BOOL transparent = opacity < 1; // This needs to be painted on a layer before being composited. @@ -76,13 +79,22 @@ if (transparent) { CGContextBeginTransparencyLayer(context, NULL); } + [self renderClip:context]; [self renderLayerTo:context]; if (transparent) { CGContextEndTransparencyLayer(context); } + CGContextRestoreGState(context); } +- (void)renderClip:(CGContextRef)context +{ + if (self.clipPathRef) { + self.clipPath = [[[self getSvgView] getDefinedClipPath:self.clipPathRef] getPath:context]; + } +} + - (void)setClipPath:(CGPathRef)clipPath { if (_clipPath == clipPath) { @@ -99,25 +111,12 @@ return CGPathCreateMutable(); } -- (CGPathRef)getClipPath -{ - CGPathRef clipPath = nil; - - if (self.clipPath) { - clipPath = self.clipPath; - } else if (self.clipPathRef) { - clipPath = [[self getSvgView] getDefinedClipPath:self.clipPathRef]; - } - - return clipPath; -} - - (void)clip:(CGContextRef)context { - CGPathRef clipPath = [self getClipPath]; + CGPathRef clipPath = self.clipPath; if (clipPath) { - CGContextAddPath(context, [self getClipPath]); + CGContextAddPath(context, clipPath); if (self.clipRule == kRNSVGCGFCRuleEvenodd) { CGContextEOClip(context); } else { @@ -182,12 +181,17 @@ } } - -- (void)mergeProperties:(__kindof RNSVGNode *)target +- (void)mergeProperties:(__kindof RNSVGNode *)target mergeList:(NSArray *)mergeList { + originOpacity = self.opacity; self.opacity = target.opacity * self.opacity; } +- (void)resetProperties +{ + self.opacity = originOpacity; +} + - (void)dealloc { CGPathRelease(_clipPath); diff --git a/ios/RNSVGRenderable.m b/ios/RNSVGRenderable.m index ac9abb6e..e8314a2c 100644 --- a/ios/RNSVGRenderable.m +++ b/ios/RNSVGRenderable.m @@ -9,6 +9,10 @@ #import "RNSVGRenderable.h" @implementation RNSVGRenderable +{ + NSMutableDictionary *originProperties; + NSArray *changedList; +} - (id)init { @@ -93,6 +97,7 @@ CGContextSaveGState(context); CGContextConcatCTM(context, self.transform); CGContextSetAlpha(context, self.opacity); + [self renderClip:context]; [self renderLayerTo:context]; CGContextRestoreGState(context); } @@ -100,7 +105,7 @@ // hitTest delagate - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event { - CGPathRef clipPath = [self getClipPath]; + CGPathRef clipPath = self.clipPath; if (self.nodeArea && CGPathContainsPoint(self.nodeArea, nil, point, NO)) { if (!clipPath) { return self; @@ -112,38 +117,33 @@ } } -- (void)mergeProperties:(__kindof RNSVGNode *)target +- (void)mergeProperties:(__kindof RNSVGNode *)target mergeList:(NSArray *)mergeList { - RNSVGRenderable* renderableTarget = target; - if (renderableTarget.fill) { - self.fill = renderableTarget.fill; + if (mergeList.count == 0) { + return; } - if (renderableTarget.fillRule) { - self.fillRule = renderableTarget.fillRule; + + originProperties = [[NSMutableDictionary alloc] init]; + + changedList = mergeList; + for (NSString *key in mergeList) { + [originProperties setValue:[self valueForKey:key] forKey:key]; + [self setValue:[target valueForKey:key] forKey:key]; } - if (renderableTarget.stroke) { - self.stroke = renderableTarget.stroke; + + [super mergeProperties:target mergeList:mergeList]; +} + +- (void)resetProperties +{ + if (changedList) { + for (NSString *key in changedList) { + [self setValue:[originProperties valueForKey:key] forKey:key]; + } } - if (renderableTarget.strokeWidth) { - self.strokeWidth = renderableTarget.strokeWidth; - } - if (renderableTarget.strokeLinecap) { - self.strokeLinecap = renderableTarget.strokeLinecap; - } - if (renderableTarget.strokeLinejoin) { - self.strokeLinejoin = renderableTarget.strokeLinejoin; - } - if (renderableTarget.strokeMiterlimit) { - self.strokeMiterlimit = renderableTarget.strokeMiterlimit; - } - if (renderableTarget.strokeDasharray.count != 0) { - self.strokeDasharray = renderableTarget.strokeDasharray; - } - if (renderableTarget.strokeDashoffset) { - self.strokeDashoffset = renderableTarget.strokeDashoffset; - } - [super mergeProperties:target]; + [super resetProperties]; + changedList = nil; } - (void)renderLayerTo:(CGContextRef)context diff --git a/ios/ViewManagers/RNSVGUseManager.m b/ios/ViewManagers/RNSVGUseManager.m index 92b2d6a0..640e1b99 100644 --- a/ios/ViewManagers/RNSVGUseManager.m +++ b/ios/ViewManagers/RNSVGUseManager.m @@ -20,5 +20,5 @@ RCT_EXPORT_MODULE() RCT_EXPORT_VIEW_PROPERTY(href, NSString) - +RCT_EXPORT_VIEW_PROPERTY(mergeList, NSArray) @end diff --git a/lib/attributes.js b/lib/attributes.js index 5970b5f8..9ec5c24c 100644 --- a/lib/attributes.js +++ b/lib/attributes.js @@ -42,6 +42,7 @@ function fontAndLinesDiffer(a, b) { } const NodeAttributes = { + name: true, transform: { diff: arrayDiffer }, @@ -50,7 +51,7 @@ const NodeAttributes = { responsible: true }; -const RenderableAttributes = merge(NodeAttributes, { +const RenderableOnlyAttributes = { fill: { diff: arrayDiffer }, @@ -70,26 +71,31 @@ const RenderableAttributes = merge(NodeAttributes, { }, strokeDashoffset: true, strokeMiterlimit: true -}); +}; -const GroupAttributes = merge(NodeAttributes, { +const RenderableAttributes = merge({}, NodeAttributes, RenderableOnlyAttributes); + +const GroupAttributes = merge({ clipPath: { diff: arrayDiffer }, clipRule: true -}); +}, NodeAttributes); -const UseAttributes = merge(RenderableAttributes, { +const UseAttributes = merge({ + mergeList: { + diff: arrayDiffer + }, href: true -}); +}, RenderableAttributes); -const PathAttributes = merge(RenderableAttributes, { +const PathAttributes = merge({ d: { diff: arrayDiffer } -}); +}, RenderableAttributes); -const TextAttributes = merge(RenderableAttributes, { +const TextAttributes = merge({ alignment: true, frame: { diff: fontAndLinesDiffer @@ -97,48 +103,48 @@ const TextAttributes = merge(RenderableAttributes, { path: { diff: arrayDiffer } -}); +}, RenderableAttributes); -const ClipPathAttributes = merge(RenderableAttributes, { +const ClipPathAttributes = { name: true -}); +}; -const CircleAttributes = merge(RenderableAttributes, { +const CircleAttributes = merge({ cx: true, cy: true, r: true -}); +}, RenderableAttributes); -const EllipseAttributes = merge(RenderableAttributes, { +const EllipseAttributes = merge({ cx: true, cy: true, rx: true, ry: true -}); +}, RenderableAttributes); -const ImageAttributes = merge(RenderableAttributes, { +const ImageAttributes = merge({ x: true, y: true, width: true, height: true, src: true -}); +}, RenderableAttributes); -const LineAttributes = merge(RenderableAttributes, { +const LineAttributes = merge({ x1: true, y1: true, x2: true, y2: true -}); +}, RenderableAttributes); -const RectAttributes = merge(RenderableAttributes, { +const RectAttributes = merge({ x: true, y: true, width: true, height: true, rx: true, ry: true -}); +}, RenderableAttributes); export { @@ -151,5 +157,6 @@ export { ImageAttributes, LineAttributes, RectAttributes, - UseAttributes + UseAttributes, + RenderableOnlyAttributes }; diff --git a/lib/extract/extractClipping.js b/lib/extract/extractClipping.js index 6e9ae6de..7f22ea38 100644 --- a/lib/extract/extractClipping.js +++ b/lib/extract/extractClipping.js @@ -1,21 +1,11 @@ import SerializablePath from 'react-native/Libraries/ART/ARTSerializablePath'; import clipReg from './patternReg'; -let clipPatterns = {}; const clipRules = { evenodd: 0, nonzero: 1 }; -function set(id, pattern) { - clipPatterns[id] = pattern; -} - -function remove(id) { - delete clipPatterns[id]; -} - - export default function (props) { let {clipPath, clipRule} = props; let clippingProps = {}; @@ -26,22 +16,11 @@ export default function (props) { let matched = clipPath.match(clipReg); if (matched) { - let patternName = `${matched[1]}:${props.svgId}`; - let pattern = clipPatterns[patternName]; - if (pattern) { - clippingProps.clipPathRef = pattern; - } else { - clippingProps = null; - // TODO: warn - } + clippingProps.clipPathRef = matched[1]; } else { clippingProps.clipPath = new SerializablePath(clipPath).toJSON(); } } + return clippingProps; } - -export { - set, - remove -}; diff --git a/lib/extract/extractFill.js b/lib/extract/extractFill.js index 1e3ecac2..bbf28d9f 100644 --- a/lib/extract/extractFill.js +++ b/lib/extract/extractFill.js @@ -14,7 +14,7 @@ function fillFilter(props) { if (fill === 'none') { return null; } else if (fill) { - return patterns(fill, fillOpacity, props.svgId); + return patterns(fill, fillOpacity); } else if (props.fill === undefined) { return rgba('#000', isNaN(fillOpacity) ? 1 : fillOpacity).rgbaString(); } else { diff --git a/lib/extract/extractStroke.js b/lib/extract/extractStroke.js index c4a874ac..4bd19b67 100644 --- a/lib/extract/extractStroke.js +++ b/lib/extract/extractStroke.js @@ -39,7 +39,7 @@ function strokeFilter(props) { // TODO: propTypes check return { - stroke: patterns(stroke, +props.strokeOpacity, props.svgId), + stroke: patterns(stroke, +props.strokeOpacity), strokeLinecap: caps[props.strokeLinecap] || 0, strokeLinejoin: joins[props.strokeLinejoin] || 0, strokeDasharray: strokeDasharray || null, diff --git a/lib/props.js b/lib/props.js index 370f7829..deb6dd01 100644 --- a/lib/props.js +++ b/lib/props.js @@ -86,44 +86,34 @@ const pathProps = { }; const circleProps = { - cx: numberProp, - cy: numberProp, - r: numberProp + cx: numberProp.isRequired, + cy: numberProp.isRequired, + r: numberProp.isRequired }; const ellipseProps = { - cx: numberProp, - cy: numberProp, - rx: numberProp, - ry: numberProp + cx: numberProp.isRequired, + cy: numberProp.isRequired, + rx: numberProp.isRequired, + ry: numberProp.isRequired }; const lineProps = { - x1: numberProp, - x2: numberProp, - y1: numberProp, - y2: numberProp + x1: numberProp.isRequired, + x2: numberProp.isRequired, + y1: numberProp.isRequired, + y2: numberProp.isRequired }; const rectProps = { - x: numberProp, - y: numberProp, - width: numberProp, - height: numberProp, + x: numberProp.isRequired, + y: numberProp.isRequired, + width: numberProp.isRequired, + height: numberProp.isRequired, rx: numberProp, ry: numberProp }; -const contextProps = { - ...circleProps, - ...ellipseProps, - ...lineProps, - ...rectProps, - ...fillProps, - ...strokeProps, - ...textProps -}; - export { numberProp, fillProps, @@ -135,7 +125,6 @@ export { ellipseProps, lineProps, rectProps, - contextProps, pathProps, responderProps, responderPropsKeys,