zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-05 22:56:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Shrink indent_size / tabWidth

Browse Source
This commit is contained in:
Mikael Sand
2019-01-29 03:03:05 +02:00
parent 546f22587f
commit 76bc07fce9
42 changed files with 1369 additions and 1389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.editorconfig
View File

@@ -8,6 +8,6 @@ root = true
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 4
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true

2
.prettierrc
View File

@@ -1,4 +1,4 @@
{
"trailingComma": "all",
"tabWidth": 4
"tabWidth": 2
}

38
elements/Circle.js
View File

@@ -4,27 +4,27 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps";
import Shape from "./Shape";
export default class Circle extends Shape {
static displayName = "Circle";
static displayName = "Circle";
static defaultProps = {
cx: 0,
cy: 0,
r: 0,
};
static defaultProps = {
cx: 0,
cy: 0,
r: 0,
};
render() {
const { props } = this;
const { cx, cy, r } = props;
return (
<RNSVGCircle
ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)}
cx={cx}
cy={cy}
r={r}
/>
);
}
render() {
const { props } = this;
const { cx, cy, r } = props;
return (
<RNSVGCircle
ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)}
cx={cx}
cy={cy}
r={r}
/>
);
}
}
const RNSVGCircle = requireNativeComponent("RNSVGCircle");

26
elements/ClipPath.js
View File

@@ -4,20 +4,20 @@ import extractClipPath from "../lib/extract/extractClipPath";
import Shape from "./Shape";
export default class ClipPath extends Shape {
static displayName = "ClipPath";
static displayName = "ClipPath";
render() {
const { id, children } = this.props;
return (
<RNSVGClipPath
ref={this.refMethod}
name={id}
{...extractClipPath(this.props)}
>
{children}
</RNSVGClipPath>
);
}
render() {
const { id, children } = this.props;
return (
<RNSVGClipPath
ref={this.refMethod}
name={id}
{...extractClipPath(this.props)}
>
{children}
</RNSVGClipPath>
);
}
}
const RNSVGClipPath = requireNativeComponent("RNSVGClipPath");

8
elements/Defs.js
View File

@@ -2,11 +2,11 @@ import React, { Component } from "react";
import { requireNativeComponent } from "react-native";
export default class Defs extends Component {
static displayName = "Defs";
static displayName = "Defs";
render() {
return <RNSVGDefs>{this.props.children}</RNSVGDefs>;
}
render() {
return <RNSVGDefs>{this.props.children}</RNSVGDefs>;
}
}
const RNSVGDefs = requireNativeComponent("RNSVGDefs");

42
elements/Ellipse.js
View File

@@ -4,29 +4,29 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps";
import Shape from "./Shape";
export default class Ellipse extends Shape {
static displayName = "Ellipse";
static displayName = "Ellipse";
static defaultProps = {
cx: 0,
cy: 0,
rx: 0,
ry: 0,
};
static defaultProps = {
cx: 0,
cy: 0,
rx: 0,
ry: 0,
};
render() {
const { props } = this;
const { cx, cy, rx, ry } = props;
return (
<RNSVGEllipse
ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)}
cx={cx}
cy={cy}
rx={rx}
ry={ry}
/>
);
}
render() {
const { props } = this;
const { cx, cy, rx, ry } = props;
return (
<RNSVGEllipse
ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)}
cx={cx}
cy={cy}
rx={rx}
ry={ry}
/>
);
}
}
const RNSVGEllipse = requireNativeComponent("RNSVGEllipse");

42
elements/G.js
View File

@@ -6,29 +6,29 @@ import extractTransform from "../lib/extract/extractTransform";
import Shape from "./Shape";
export default class G extends Shape {
static displayName = "G";
static displayName = "G";
setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
this.root.setNativeProps(props);
};
render() {
const { props } = this;
const prop = propsAndStyles(props);
return (
<RNSVGGroup
ref={this.refMethod}
{...extractProps(prop, this)}
font={extractFont(prop)}
>
{props.children}
</RNSVGGroup>
);
setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
this.root.setNativeProps(props);
};
render() {
const { props } = this;
const prop = propsAndStyles(props);
return (
<RNSVGGroup
ref={this.refMethod}
{...extractProps(prop, this)}
font={extractFont(prop)}
>
{props.children}
</RNSVGGroup>
);
}
}
const RNSVGGroup = requireNativeComponent("RNSVGGroup");

71
elements/Image.js
View File

@@ -7,45 +7,42 @@ import Shape from "./Shape";
const spacesRegExp = /\s+/;
export default class SvgImage extends Shape {
static displayName = "Image";
static displayName = "Image";
static defaultProps = {
x: 0,
y: 0,
width: 0,
height: 0,
preserveAspectRatio: "xMidYMid meet",
};
static defaultProps = {
x: 0,
y: 0,
width: 0,
height: 0,
preserveAspectRatio: "xMidYMid meet",
};
render() {
const { props } = this;
const {
preserveAspectRatio,
x,
y,
width,
height,
xlinkHref,
href = xlinkHref,
} = props;
const modes = preserveAspectRatio.trim().split(spacesRegExp);
return (
<RNSVGImage
ref={this.refMethod}
{...extractProps(
{ ...propsAndStyles(props), x: null, y: null },
this,
)}
x={x}
y={y}
width={width}
height={height}
meetOrSlice={meetOrSliceTypes[modes[1]] || 0}
align={alignEnum[modes[0]] || "xMidYMid"}
src={Image.resolveAssetSource(href)}
/>
);
}
render() {
const { props } = this;
const {
preserveAspectRatio,
x,
y,
width,
height,
xlinkHref,
href = xlinkHref,
} = props;
const modes = preserveAspectRatio.trim().split(spacesRegExp);
return (
<RNSVGImage
ref={this.refMethod}
{...extractProps({ ...propsAndStyles(props), x: null, y: null }, this)}
x={x}
y={y}
width={width}
height={height}
meetOrSlice={meetOrSliceTypes[modes[1]] || 0}
align={alignEnum[modes[0]] || "xMidYMid"}
src={Image.resolveAssetSource(href)}
/>
);
}
}
const RNSVGImage = requireNativeComponent("RNSVGImage");

42
elements/Line.js
View File

@@ -4,29 +4,29 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps";
import Shape from "./Shape";
export default class Line extends Shape {
static displayName = "Line";
static displayName = "Line";
static defaultProps = {
x1: 0,
y1: 0,
x2: 0,
y2: 0,
};
static defaultProps = {
x1: 0,
y1: 0,
x2: 0,
y2: 0,
};
render() {
const { props } = this;
const { x1, y1, x2, y2 } = props;
return (
<RNSVGLine
ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)}
x1={x1}
y1={y1}
x2={x2}
y2={y2}
/>
);
}
render() {
const { props } = this;
const { x1, y1, x2, y2 } = props;
return (
<RNSVGLine
ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)}
x1={x1}
y1={y1}
x2={x2}
y2={y2}
/>
);
}
}
const RNSVGLine = requireNativeComponent("RNSVGLine");

42
elements/LinearGradient.js
View File

@@ -4,29 +4,29 @@ import extractGradient from "../lib/extract/extractGradient";
import Shape from "./Shape";
export default class LinearGradient extends Shape {
static displayName = "LinearGradient";
static displayName = "LinearGradient";
static defaultProps = {
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
};
static defaultProps = {
x1: "0%",
y1: "0%",
x2: "100%",
y2: "0%",
};
render() {
const { props } = this;
const { x1, y1, x2, y2 } = props;
return (
<RNSVGLinearGradient
ref={this.refMethod}
x1={x1}
y1={y1}
x2={x2}
y2={y2}
{...extractGradient(props, this)}
/>
);
}
render() {
const { props } = this;
const { x1, y1, x2, y2 } = props;
return (
<RNSVGLinearGradient
ref={this.refMethod}
x1={x1}
y1={y1}
x2={x2}
y2={y2}
{...extractGradient(props, this)}
/>
);
}
}
const RNSVGLinearGradient = requireNativeComponent("RNSVGLinearGradient");

81
elements/Mask.js
View File

@@ -6,51 +6,46 @@ import units from "../lib/units";
import Shape from "./Shape";
export default class Mask extends Shape {
static displayName = "Mask";
static displayName = "Mask";
static defaultProps = {
x: "0%",
y: "0%",
width: "100%",
height: "100%",
};
static defaultProps = {
x: "0%",
y: "0%",
width: "100%",
height: "100%",
};
render() {
const { props } = this;
const {
maskTransform,
transform,
x,
y,
width,
height,
maskUnits,
maskContentUnits,
children,
} = props;
return (
<RNSVGMask
ref={this.refMethod}
{...extractProps(
{ ...propsAndStyles(props), x: null, y: null },
this,
)}
x={x}
y={y}
width={width}
height={height}
maskTransform={extractTransform(
maskTransform || transform || props,
)}
maskUnits={maskUnits !== undefined ? units[maskUnits] : 0}
maskContentUnits={
maskContentUnits !== undefined ? units[maskContentUnits] : 1
}
>
{children}
</RNSVGMask>
);
}
render() {
const { props } = this;
const {
maskTransform,
transform,
x,
y,
width,
height,
maskUnits,
maskContentUnits,
children,
} = props;
return (
<RNSVGMask
ref={this.refMethod}
{...extractProps({ ...propsAndStyles(props), x: null, y: null }, this)}
x={x}
y={y}
width={width}
height={height}
maskTransform={extractTransform(maskTransform || transform || props)}
maskUnits={maskUnits !== undefined ? units[maskUnits] : 0}
maskContentUnits={
maskContentUnits !== undefined ? units[maskContentUnits] : 1
}
>
{children}
</RNSVGMask>
);
}
}
const RNSVGMask = requireNativeComponent("RNSVGMask");

22
elements/Path.js
View File

@@ -4,18 +4,18 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps";
import Shape from "./Shape";
export default class Path extends Shape {
static displayName = "Path";
static displayName = "Path";
render() {
const { props } = this;
return (
<RNSVGPath
ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)}
d={props.d}
/>
);
}
render() {
const { props } = this;
return (
<RNSVGPath
ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)}
d={props.d}
/>
);
}
}
const RNSVGPath = requireNativeComponent("RNSVGPath");

88
elements/Pattern.js
View File

@@ -6,52 +6,52 @@ import units from "../lib/units";
import Shape from "./Shape";
export default class Pattern extends Shape {
static displayName = "Pattern";
static displayName = "Pattern";
static defaultProps = {
x: "0%",
y: "0%",
width: "100%",
height: "100%",
};
static defaultProps = {
x: "0%",
y: "0%",
width: "100%",
height: "100%",
};
render() {
const { props } = this;
const {
patternTransform,
transform,
id,
x,
y,
width,
height,
patternUnits,
patternContentUnits,
children,
viewBox,
preserveAspectRatio,
} = props;
const matrix = extractTransform(patternTransform || transform || props);
return (
<RNSVGPattern
ref={this.refMethod}
name={id}
x={x}
y={y}
width={width}
height={height}
matrix={matrix}
patternTransform={matrix}
patternUnits={units[patternUnits] || 0}
patternContentUnits={
patternContentUnits ? units[patternContentUnits] : 1
}
{...extractViewBox({ viewBox, preserveAspectRatio })}
>
{children}
</RNSVGPattern>
);
}
render() {
const { props } = this;
const {
patternTransform,
transform,
id,
x,
y,
width,
height,
patternUnits,
patternContentUnits,
children,
viewBox,
preserveAspectRatio,
} = props;
const matrix = extractTransform(patternTransform || transform || props);
return (
<RNSVGPattern
ref={this.refMethod}
name={id}
x={x}
y={y}
width={width}
height={height}
matrix={matrix}
patternTransform={matrix}
patternUnits={units[patternUnits] || 0}
patternContentUnits={
patternContentUnits ? units[patternContentUnits] : 1
}
{...extractViewBox({ viewBox, preserveAspectRatio })}
>
{children}
</RNSVGPattern>
);
}
}
const RNSVGPattern = requireNativeComponent("RNSVGPattern");

44
elements/Polygon.js
View File

@@ -4,29 +4,29 @@ import Shape from "./Shape";
import extractPolyPoints from "../lib/extract/extractPolyPoints";
export default class Polygon extends Shape {
static displayName = "Polygon";
static displayName = "Polygon";
static defaultProps = {
points: "",
};
static defaultProps = {
points: "",
};
setNativeProps = props => {
const { points } = props;
if (points) {
props.d = `M${extractPolyPoints(points)}z`;
}
this.root.setNativeProps(props);
};
render() {
const { props } = this;
const { points } = props;
return (
<Path
ref={this.refMethod}
d={`M${extractPolyPoints(points)}z`}
{...props}
/>
);
setNativeProps = props => {
const { points } = props;
if (points) {
props.d = `M${extractPolyPoints(points)}z`;
}
this.root.setNativeProps(props);
};
render() {
const { props } = this;
const { points } = props;
return (
<Path
ref={this.refMethod}
d={`M${extractPolyPoints(points)}z`}
{...props}
/>
);
}
}

44
elements/Polyline.js
View File

@@ -4,29 +4,29 @@ import Shape from "./Shape";
import extractPolyPoints from "../lib/extract/extractPolyPoints";
export default class Polyline extends Shape {
static displayName = "Polyline";
static displayName = "Polyline";
static defaultProps = {
points: "",
};
static defaultProps = {
points: "",
};
setNativeProps = props => {
const { points } = props;
if (points) {
props.d = `M${extractPolyPoints(points)}`;
}
this.root.setNativeProps(props);
};
render() {
const { props } = this;
const { points } = props;
return (
<Path
ref={this.refMethod}
d={`M${extractPolyPoints(points)}`}
{...props}
/>
);
setNativeProps = props => {
const { points } = props;
if (points) {
props.d = `M${extractPolyPoints(points)}`;
}
this.root.setNativeProps(props);
};
render() {
const { props } = this;
const { points } = props;
return (
<Path
ref={this.refMethod}
d={`M${extractPolyPoints(points)}`}
{...props}
/>
);
}
}

48
elements/RadialGradient.js
View File

@@ -4,32 +4,32 @@ import extractGradient from "../lib/extract/extractGradient";
import Shape from "./Shape";
export default class RadialGradient extends Shape {
static displayName = "RadialGradient";
static displayName = "RadialGradient";
static defaultProps = {
fx: "50%",
fy: "50%",
cx: "50%",
cy: "50%",
r: "50%",
};
static defaultProps = {
fx: "50%",
fy: "50%",
cx: "50%",
cy: "50%",
r: "50%",
};
render() {
const { props } = this;
const { fx, fy, rx, ry, r, cx, cy } = props;
return (
<RNSVGRadialGradient
ref={this.refMethod}
fx={fx}
fy={fy}
rx={rx || r}
ry={ry || r}
cx={cx}
cy={cy}
{...extractGradient(props, this)}
/>
);
}
render() {
const { props } = this;
const { fx, fy, rx, ry, r, cx, cy } = props;
return (
<RNSVGRadialGradient
ref={this.refMethod}
fx={fx}
fy={fy}
rx={rx || r}
ry={ry || r}
cx={cx}
cy={cy}
{...extractGradient(props, this)}
/>
);
}
}
const RNSVGRadialGradient = requireNativeComponent("RNSVGRadialGradient");

64
elements/Rect.js
View File

@@ -4,40 +4,40 @@ import extractProps, { propsAndStyles } from "../lib/extract/extractProps";
import Shape from "./Shape";
export default class Rect extends Shape {
static displayName = "Rect";
static displayName = "Rect";
static defaultProps = {
x: 0,
y: 0,
width: 0,
height: 0,
rx: 0,
ry: 0,
};
static defaultProps = {
x: 0,
y: 0,
width: 0,
height: 0,
rx: 0,
ry: 0,
};
render() {
const { props } = this;
const { x, y, width, height, rx, ry } = props;
return (
<RNSVGRect
ref={this.refMethod}
{...extractProps(
{
...propsAndStyles(props),
x: null,
y: null,
},
this,
)}
x={x}
y={y}
width={width}
height={height}
rx={rx}
ry={ry}
/>
);
}
render() {
const { props } = this;
const { x, y, width, height, rx, ry } = props;
return (
<RNSVGRect
ref={this.refMethod}
{...extractProps(
{
...propsAndStyles(props),
x: null,
y: null,
},
this,
)}
x={x}
y={y}
width={width}
height={height}
rx={rx}
ry={ry}
/>
);
}
}
const RNSVGRect = requireNativeComponent("RNSVGRect");

36
elements/Shape.js
View File

@@ -6,23 +6,23 @@ const touchVals = touchKeys.map(key => SvgTouchableMixin[key]);
const numTouchKeys = touchKeys.length;
export default class Shape extends Component {
constructor() {
super(...arguments);
for (let i = 0; i < numTouchKeys; i++) {
const key = touchKeys[i];
const val = touchVals[i];
if (typeof val === "function") {
this[key] = val.bind(this);
} else {
this[key] = val;
}
}
this.state = this.touchableGetInitialState();
constructor() {
super(...arguments);
for (let i = 0; i < numTouchKeys; i++) {
const key = touchKeys[i];
const val = touchVals[i];
if (typeof val === "function") {
this[key] = val.bind(this);
} else {
this[key] = val;
}
}
refMethod = ref => {
this.root = ref;
};
setNativeProps = props => {
this.root.setNativeProps(props);
};
this.state = this.touchableGetInitialState();
}
refMethod = ref => {
this.root = ref;
};
setNativeProps = props => {
this.root.setNativeProps(props);
};
}

28
elements/Stop.js
View File

@@ -1,20 +1,20 @@
import { Component } from "react";
export default class Stop extends Component {
static displayName = "Stop";
static displayName = "Stop";
static defaultProps = {
stopColor: "#000",
stopOpacity: 1,
};
setNativeProps = () => {
const { parent } = this.props;
if (parent) {
parent.forceUpdate();
}
};
render() {
return null;
static defaultProps = {
stopColor: "#000",
stopOpacity: 1,
};
setNativeProps = () => {
const { parent } = this.props;
if (parent) {
parent.forceUpdate();
}
};
render() {
return null;
}
}

220
elements/Svg.js
View File

@@ -1,9 +1,9 @@
import React from "react";
import {
requireNativeComponent,
StyleSheet,
findNodeHandle,
NativeModules,
requireNativeComponent,
StyleSheet,
findNodeHandle,
NativeModules,
} from "react-native";
import extractResponder from "../lib/extract/extractResponder";
import extractViewBox from "../lib/extract/extractViewBox";
@@ -13,67 +13,118 @@ import G from "./G";
const RNSVGSvgViewManager = NativeModules.RNSVGSvgViewManager;
const styles = StyleSheet.create({
svg: {
backgroundColor: "transparent",
borderWidth: 0,
},
svg: {
backgroundColor: "transparent",
borderWidth: 0,
},
});
export default class Svg extends Shape {
static displayName = "Svg";
static displayName = "Svg";
static defaultProps = {
preserveAspectRatio: "xMidYMid meet",
static defaultProps = {
preserveAspectRatio: "xMidYMid meet",
};
measureInWindow = (...args) => {
this.root.measureInWindow(...args);
};
measure = (...args) => {
this.root.measure(...args);
};
measureLayout = (...args) => {
this.root.measureLayout(...args);
};
setNativeProps = props => {
const { width, height } = props;
if (width) {
props.bbWidth = width;
}
if (height) {
props.bbHeight = height;
}
this.root.setNativeProps(props);
};
toDataURL = callback => {
callback &&
RNSVGSvgViewManager.toDataURL(findNodeHandle(this.root), callback);
};
render() {
const {
opacity,
viewBox,
preserveAspectRatio,
style,
children,
onLayout,
...props
} = this.props;
const stylesAndProps = {
...(style && style.length ? Object.assign({}, ...style) : style),
...props,
};
const {
color,
width,
height,
measureInWindow = (...args) => {
this.root.measureInWindow(...args);
};
// Inherited G properties
font,
transform,
fill,
fillOpacity,
fillRule,
stroke,
strokeWidth,
strokeOpacity,
strokeDasharray,
strokeDashoffset,
strokeLinecap,
strokeLinejoin,
strokeMiterlimit,
} = stylesAndProps;
measure = (...args) => {
this.root.measure(...args);
};
const w = parseInt(width, 10);
const h = parseInt(height, 10);
const doNotParseWidth = isNaN(w) || width[width.length - 1] === "%";
const doNotParseHeight = isNaN(h) || height[height.length - 1] === "%";
const dimensions =
width && height
? {
width: doNotParseWidth ? width : w,
height: doNotParseHeight ? height : h,
flex: 0,
}
: null;
measureLayout = (...args) => {
this.root.measureLayout(...args);
};
setNativeProps = props => {
const { width, height } = props;
if (width) {
props.bbWidth = width;
const o = +opacity;
const opacityStyle = !isNaN(o)
? {
opacity: o,
}
if (height) {
props.bbHeight = height;
}
this.root.setNativeProps(props);
};
: null;
toDataURL = callback => {
callback &&
RNSVGSvgViewManager.toDataURL(findNodeHandle(this.root), callback);
};
render() {
const {
opacity,
viewBox,
preserveAspectRatio,
style,
return (
<NativeSvgView
{...props}
bbWidth={width}
bbHeight={height}
tintColor={color}
onLayout={onLayout}
ref={this.refMethod}
style={[styles.svg, style, opacityStyle, dimensions]}
{...extractResponder(props, this)}
{...extractViewBox({ viewBox, preserveAspectRatio })}
>
<G
{...{
children,
onLayout,
...props
} = this.props;
const stylesAndProps = {
...(style && style.length ? Object.assign({}, ...style) : style),
...props,
};
const {
color,
width,
height,
// Inherited G properties
style,
font,
transform,
fill,
@@ -87,62 +138,11 @@ export default class Svg extends Shape {
strokeLinecap,
strokeLinejoin,
strokeMiterlimit,
} = stylesAndProps;
const w = parseInt(width, 10);
const h = parseInt(height, 10);
const doNotParseWidth = isNaN(w) || width[width.length - 1] === "%";
const doNotParseHeight = isNaN(h) || height[height.length - 1] === "%";
const dimensions =
width && height
? {
width: doNotParseWidth ? width : w,
height: doNotParseHeight ? height : h,
flex: 0,
}
: null;
const o = +opacity;
const opacityStyle = !isNaN(o)
? {
opacity: o,
}
: null;
return (
<NativeSvgView
{...props}
bbWidth={width}
bbHeight={height}
tintColor={color}
onLayout={onLayout}
ref={this.refMethod}
style={[styles.svg, style, opacityStyle, dimensions]}
{...extractResponder(props, this)}
{...extractViewBox({ viewBox, preserveAspectRatio })}
>
<G
{...{
children,
style,
font,
transform,
fill,
fillOpacity,
fillRule,
stroke,
strokeWidth,
strokeOpacity,
strokeDasharray,
strokeDashoffset,
strokeLinecap,
strokeLinejoin,
strokeMiterlimit,
}}
/>
</NativeSvgView>
);
}
}}
/>
</NativeSvgView>
);
}
}
const NativeSvgView = requireNativeComponent("RNSVGSvgView");

20
elements/Symbol.js
View File

@@ -4,17 +4,17 @@ import extractViewBox from "../lib/extract/extractViewBox";
import Shape from "./Shape";
export default class Symbol extends Shape {
static displayName = "Symbol";
static displayName = "Symbol";
render() {
const { props } = this;
const { id, children } = props;
return (
<RNSVGSymbol name={id} {...extractViewBox(props)}>
{children}
</RNSVGSymbol>
);
}
render() {
const { props } = this;
const { id, children } = props;
return (
<RNSVGSymbol name={id} {...extractViewBox(props)}>
{children}
</RNSVGSymbol>
);
}
}
const RNSVGSymbol = requireNativeComponent("RNSVGSymbol");

60
elements/TSpan.js
View File

@@ -7,38 +7,38 @@ import { pickNotNil } from "../lib/util";
import Shape from "./Shape";
export default class TSpan extends Shape {
static displayName = "TSpan";
static displayName = "TSpan";
setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
const text = pickNotNil(extractText(props, false));
this.root.setNativeProps({
...props,
...text,
});
};
render() {
const props = this.props;
const prop = propsAndStyles(props);
return (
<RNSVGTSpan
ref={this.refMethod}
{...extractProps(
{
...prop,
x: null,
y: null,
},
this,
)}
{...extractText(prop, false)}
/>
);
setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
const text = pickNotNil(extractText(props, false));
this.root.setNativeProps({
...props,
...text,
});
};
render() {
const props = this.props;
const prop = propsAndStyles(props);
return (
<RNSVGTSpan
ref={this.refMethod}
{...extractProps(
{
...prop,
x: null,
y: null,
},
this,
)}
{...extractText(prop, false)}
/>
);
}
}
setTSpan(TSpan);

60
elements/Text.js
View File

@@ -8,38 +8,38 @@ import Shape from "./Shape";
import "./TSpan";
export default class Text extends Shape {
static displayName = "Text";
static displayName = "Text";
setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
const text = pickNotNil(extractText(props, true));
this.root.setNativeProps({
...props,
...text,
});
};
render() {
const props = this.props;
const prop = propsAndStyles(props);
return (
<RNSVGText
ref={this.refMethod}
{...extractProps(
{
...prop,
x: null,
y: null,
},
this,
)}
{...extractText(prop, true)}
/>
);
setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
const text = pickNotNil(extractText(props, true));
this.root.setNativeProps({
...props,
...text,
});
};
render() {
const props = this.props;
const prop = propsAndStyles(props);
return (
<RNSVGText
ref={this.refMethod}
{...extractProps(
{
...prop,
x: null,
y: null,
},
this,
)}
{...extractText(prop, true)}
/>
);
}
}
const RNSVGText = requireNativeComponent("RNSVGText");

118
elements/TextPath.js
View File

@@ -8,73 +8,73 @@ import Shape from "./Shape";
import TSpan from "./TSpan";
export default class TextPath extends Shape {
static displayName = "TextPath";
static displayName = "TextPath";
setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
const text = pickNotNil(extractText(props, true));
this.root.setNativeProps({
...props,
...text,
});
};
setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props);
if (matrix) {
props.matrix = matrix;
}
const text = pickNotNil(extractText(props, true));
this.root.setNativeProps({
...props,
...text,
});
};
render() {
const {
children,
xlinkHref,
href = xlinkHref,
startOffset,
render() {
const {
children,
xlinkHref,
href = xlinkHref,
startOffset,
method,
spacing,
side,
alignmentBaseline,
midLine,
...props
} = this.props;
const matched = href && href.match(idPattern);
const match = matched && matched[1];
if (match) {
return (
<RNSVGTextPath
ref={this.refMethod}
{...extractProps(
{
...propsAndStyles(props),
x: null,
y: null,
},
this,
)}
{...extractText(
{
children,
},
true,
)}
{...{
href: match,
startOffset: startOffset || 0,
method,
spacing,
side,
alignmentBaseline,
midLine,
...props
} = this.props;
const matched = href && href.match(idPattern);
const match = matched && matched[1];
if (match) {
return (
<RNSVGTextPath
ref={this.refMethod}
{...extractProps(
{
...propsAndStyles(props),
x: null,
y: null,
},
this,
)}
{...extractText(
{
children,
},
true,
)}
{...{
href: match,
startOffset: startOffset || 0,
method,
spacing,
side,
alignmentBaseline,
midLine,
}}
/>
);
}
console.warn(
'Invalid `href` prop for `TextPath` element, expected a href like `"#id"`, but got: "' +
href +
'"',
);
return <TSpan ref={this.refMethod}>{children}</TSpan>;
}}
/>
);
}
console.warn(
'Invalid `href` prop for `TextPath` element, expected a href like `"#id"`, but got: "' +
href +
'"',
);
return <TSpan ref={this.refMethod}>{children}</TSpan>;
}
}
const RNSVGTextPath = requireNativeComponent("RNSVGTextPath");

87
elements/Use.js
View File

@@ -5,56 +5,53 @@ import { idPattern } from "../lib/util";
import Shape from "./Shape";
export default class Use extends Shape {
static displayName = "Use";
static displayName = "Use";
static defaultProps = {
x: 0,
y: 0,
width: 0,
height: 0,
};
static defaultProps = {
x: 0,
y: 0,
width: 0,
height: 0,
};
render() {
const { props } = this;
const {
children,
x,
y,
width,
height,
xlinkHref,
href = xlinkHref,
} = props;
render() {
const { props } = this;
const {
children,
x,
y,
width,
height,
xlinkHref,
href = xlinkHref,
} = props;
// match "url(#pattern)"
const matched = href.match(idPattern);
const match = matched && matched[1];
// match "url(#pattern)"
const matched = href.match(idPattern);
const match = matched && matched[1];
if (!match) {
console.warn(
'Invalid `href` prop for `Use` element, expected a href like `"#id"`, but got: "' +
href +
'"',
);
}
return (
<RNSVGUse
ref={this.refMethod}
{...extractProps(
{ ...propsAndStyles(props), x: null, y: null },
this,
)}
href={match}
x={x}
y={y}
width={width}
height={height}
>
{children}
</RNSVGUse>
);
if (!match) {
console.warn(
'Invalid `href` prop for `Use` element, expected a href like `"#id"`, but got: "' +
href +
'"',
);
}
return (
<RNSVGUse
ref={this.refMethod}
{...extractProps({ ...propsAndStyles(props), x: null, y: null }, this)}
href={match}
x={x}
y={y}
width={width}
height={height}
>
{children}
</RNSVGUse>
);
}
}
const RNSVGUse = requireNativeComponent("RNSVGUse");

298
lib/Matrix2D.js
View File

@@ -25,163 +25,163 @@ const DEG_TO_RAD = Math.PI / 180;
* @constructor
**/
export default class Matrix2D {
constructor() {
this.reset();
constructor() {
this.reset();
// public properties:
/**
* Position (0, 0) in a 3x3 affine transformation matrix.
* @property a
* @type Number
**/
// public properties:
/**
* Position (0, 0) in a 3x3 affine transformation matrix.
* @property a
* @type Number
**/
/**
* Position (0, 1) in a 3x3 affine transformation matrix.
* @property b
* @type Number
**/
/**
* Position (0, 1) in a 3x3 affine transformation matrix.
* @property b
* @type Number
**/
/**
* Position (1, 0) in a 3x3 affine transformation matrix.
* @property c
* @type Number
**/
/**
* Position (1, 0) in a 3x3 affine transformation matrix.
* @property c
* @type Number
**/
/**
* Position (1, 1) in a 3x3 affine transformation matrix.
* @property d
* @type Number
**/
/**
* Position (1, 1) in a 3x3 affine transformation matrix.
* @property d
* @type Number
**/
/**
* Position (2, 0) in a 3x3 affine transformation matrix.
* @property tx
* @type Number
**/
/**
* Position (2, 0) in a 3x3 affine transformation matrix.
* @property tx
* @type Number
**/
/**
* Position (2, 1) in a 3x3 affine transformation matrix.
* @property ty
* @type Number
**/
/**
* Position (2, 1) in a 3x3 affine transformation matrix.
* @property ty
* @type Number
**/
}
/**
* Reset current matrix to an identity matrix.
* @method reset
* @return {Matrix2D} This matrix. Useful for chaining method calls.
**/
reset = function() {
this.a = this.d = 1;
this.b = this.c = this.tx = this.ty = 0;
this.hasInitialState = true;
return this;
};
/**
* Returns an array with current matrix values.
* @method toArray
* @return {Array} an array with current matrix values.
**/
toArray = function() {
return [this.a, this.b, this.c, this.d, this.tx, this.ty];
};
/**
* Appends the specified matrix properties to this matrix. All parameters are required.
* This is the equivalent of multiplying `(this matrix) * (specified matrix)`.
* @method append
* @param {Number} a
* @param {Number} b
* @param {Number} c
* @param {Number} d
* @param {Number} tx
* @param {Number} ty
* @return {Matrix2D} This matrix. Useful for chaining method calls.
**/
append = function(a, b, c, d, tx, ty) {
if (this.hasInitialState) {
this.hasInitialState = false;
this.a = a;
this.b = b;
this.c = c;
this.d = d;
this.tx = tx;
this.ty = ty;
return this;
}
const a1 = this.a;
const b1 = this.b;
const c1 = this.c;
const d1 = this.d;
if (a !== 1 || b !== 0 || c !== 0 || d !== 1) {
this.a = a1 * a + c1 * b;
this.b = b1 * a + d1 * b;
this.c = a1 * c + c1 * d;
this.d = b1 * c + d1 * d;
}
this.tx = a1 * tx + c1 * ty + this.tx;
this.ty = b1 * tx + d1 * ty + this.ty;
return this;
};
/**
* Generates matrix properties from the specified display object transform properties, and appends them to this matrix.
* For example, you can use this to generate a matrix representing the transformations of a display object:
*
* var mtx = new createjs.Matrix2D();
* mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation);
* @method appendTransform
* @param {Number} x
* @param {Number} y
* @param {Number} scaleX
* @param {Number} scaleY
* @param {Number} rotation
* @param {Number} skewX
* @param {Number} skewY
* @param {Number} regX Optional.
* @param {Number} regY Optional.
* @return {Matrix2D} This matrix. Useful for chaining method calls.
**/
appendTransform = function(
x,
y,
scaleX,
scaleY,
rotation,
skewX,
skewY,
regX,
regY,
) {
let cos, sin;
if (rotation % 360) {
const r = rotation * DEG_TO_RAD;
cos = Math.cos(r);
sin = Math.sin(r);
} else {
cos = 1;
sin = 0;
}
/**
* Reset current matrix to an identity matrix.
* @method reset
* @return {Matrix2D} This matrix. Useful for chaining method calls.
**/
reset = function() {
this.a = this.d = 1;
this.b = this.c = this.tx = this.ty = 0;
this.hasInitialState = true;
return this;
};
const a = cos * scaleX;
const b = sin * scaleX;
const c = -sin * scaleY;
const d = cos * scaleY;
/**
* Returns an array with current matrix values.
* @method toArray
* @return {Array} an array with current matrix values.
**/
toArray = function() {
return [this.a, this.b, this.c, this.d, this.tx, this.ty];
};
if (skewX || skewY) {
const b1 = Math.tan(skewY * DEG_TO_RAD);
const c1 = Math.tan(skewX * DEG_TO_RAD);
this.append(a + c1 * b, b1 * a + b, c + c1 * d, b1 * c + d, x, y);
} else {
this.append(a, b, c, d, x, y);
}
/**
* Appends the specified matrix properties to this matrix. All parameters are required.
* This is the equivalent of multiplying `(this matrix) * (specified matrix)`.
* @method append
* @param {Number} a
* @param {Number} b
* @param {Number} c
* @param {Number} d
* @param {Number} tx
* @param {Number} ty
* @return {Matrix2D} This matrix. Useful for chaining method calls.
**/
append = function(a, b, c, d, tx, ty) {
if (this.hasInitialState) {
this.hasInitialState = false;
this.a = a;
this.b = b;
this.c = c;
this.d = d;
this.tx = tx;
this.ty = ty;
return this;
}
const a1 = this.a;
const b1 = this.b;
const c1 = this.c;
const d1 = this.d;
if (a !== 1 || b !== 0 || c !== 0 || d !== 1) {
this.a = a1 * a + c1 * b;
this.b = b1 * a + d1 * b;
this.c = a1 * c + c1 * d;
this.d = b1 * c + d1 * d;
}
this.tx = a1 * tx + c1 * ty + this.tx;
this.ty = b1 * tx + d1 * ty + this.ty;
return this;
};
/**
* Generates matrix properties from the specified display object transform properties, and appends them to this matrix.
* For example, you can use this to generate a matrix representing the transformations of a display object:
*
* var mtx = new createjs.Matrix2D();
* mtx.appendTransform(o.x, o.y, o.scaleX, o.scaleY, o.rotation);
* @method appendTransform
* @param {Number} x
* @param {Number} y
* @param {Number} scaleX
* @param {Number} scaleY
* @param {Number} rotation
* @param {Number} skewX
* @param {Number} skewY
* @param {Number} regX Optional.
* @param {Number} regY Optional.
* @return {Matrix2D} This matrix. Useful for chaining method calls.
**/
appendTransform = function(
x,
y,
scaleX,
scaleY,
rotation,
skewX,
skewY,
regX,
regY,
) {
let cos, sin;
if (rotation % 360) {
const r = rotation * DEG_TO_RAD;
cos = Math.cos(r);
sin = Math.sin(r);
} else {
cos = 1;
sin = 0;
}
const a = cos * scaleX;
const b = sin * scaleX;
const c = -sin * scaleY;
const d = cos * scaleY;
if (skewX || skewY) {
const b1 = Math.tan(skewY * DEG_TO_RAD);
const c1 = Math.tan(skewX * DEG_TO_RAD);
this.append(a + c1 * b, b1 * a + b, c + c1 * d, b1 * c + d, x, y);
} else {
this.append(a, b, c, d, x, y);
}
if (regX || regY) {
// append the registration offset:
this.tx -= regX * this.a + regY * this.c;
this.ty -= regX * this.b + regY * this.d;
}
return this;
};
if (regX || regY) {
// append the registration offset:
this.tx -= regX * this.a + regY * this.c;
this.ty -= regX * this.b + regY * this.d;
}
return this;
};
}

162
lib/SvgTouchableMixin.js
View File

@@ -2,103 +2,97 @@ import { Touchable } from "react-native";
const PRESS_RETENTION_OFFSET = { top: 20, left: 20, right: 20, bottom: 30 };
export default {
...Touchable.Mixin,
...Touchable.Mixin,
touchableHandleStartShouldSetResponder: function(e) {
if (this.props.onStartShouldSetResponder) {
return this.props.onStartShouldSetResponder(e);
} else {
return Touchable.Mixin.touchableHandleStartShouldSetResponder.call(
this,
e,
);
}
},
touchableHandleStartShouldSetResponder: function(e) {
if (this.props.onStartShouldSetResponder) {
return this.props.onStartShouldSetResponder(e);
} else {
return Touchable.Mixin.touchableHandleStartShouldSetResponder.call(
this,
e,
);
}
},
touchableHandleResponderTerminationRequest: function(e) {
if (this.props.onResponderTerminationRequest) {
return this.props.onResponderTerminationRequest(e);
} else {
return Touchable.Mixin.touchableHandleResponderTerminationRequest.call(
this,
e,
);
}
},
touchableHandleResponderTerminationRequest: function(e) {
if (this.props.onResponderTerminationRequest) {
return this.props.onResponderTerminationRequest(e);
} else {
return Touchable.Mixin.touchableHandleResponderTerminationRequest.call(
this,
e,
);
}
},
touchableHandleResponderGrant: function(e) {
if (this.props.onResponderGrant) {
return this.props.onResponderGrant(e);
} else {
return Touchable.Mixin.touchableHandleResponderGrant.call(this, e);
}
},
touchableHandleResponderGrant: function(e) {
if (this.props.onResponderGrant) {
return this.props.onResponderGrant(e);
} else {
return Touchable.Mixin.touchableHandleResponderGrant.call(this, e);
}
},
touchableHandleResponderMove: function(e) {
if (this.props.onResponderMove) {
return this.props.onResponderMove(e);
} else {
return Touchable.Mixin.touchableHandleResponderMove.call(this, e);
}
},
touchableHandleResponderMove: function(e) {
if (this.props.onResponderMove) {
return this.props.onResponderMove(e);
} else {
return Touchable.Mixin.touchableHandleResponderMove.call(this, e);
}
},
touchableHandleResponderRelease: function(e) {
if (this.props.onResponderRelease) {
return this.props.onResponderRelease(e);
} else {
return Touchable.Mixin.touchableHandleResponderRelease.call(
this,
e,
);
}
},
touchableHandleResponderRelease: function(e) {
if (this.props.onResponderRelease) {
return this.props.onResponderRelease(e);
} else {
return Touchable.Mixin.touchableHandleResponderRelease.call(this, e);
}
},
touchableHandleResponderTerminate: function(e) {
if (this.props.onResponderTerminate) {
return this.props.onResponderTerminate(e);
} else {
return Touchable.Mixin.touchableHandleResponderTerminate.call(
this,
e,
);
}
},
touchableHandleResponderTerminate: function(e) {
if (this.props.onResponderTerminate) {
return this.props.onResponderTerminate(e);
} else {
return Touchable.Mixin.touchableHandleResponderTerminate.call(this, e);
}
},
touchableHandlePress: function(e) {
this.props.onPress && this.props.onPress(e);
},
touchableHandlePress: function(e) {
this.props.onPress && this.props.onPress(e);
},
touchableHandleActivePressIn: function(e) {
this.props.onPressIn && this.props.onPressIn(e);
},
touchableHandleActivePressIn: function(e) {
this.props.onPressIn && this.props.onPressIn(e);
},
touchableHandleActivePressOut: function(e) {
this.props.onPressOut && this.props.onPressOut(e);
},
touchableHandleActivePressOut: function(e) {
this.props.onPressOut && this.props.onPressOut(e);
},
touchableHandleLongPress: function(e) {
this.props.onLongPress && this.props.onLongPress(e);
},
touchableHandleLongPress: function(e) {
this.props.onLongPress && this.props.onLongPress(e);
},
touchableGetPressRectOffset: function() {
return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;
},
touchableGetPressRectOffset: function() {
return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;
},
touchableGetHitSlop: function() {
return this.props.hitSlop;
},
touchableGetHitSlop: function() {
return this.props.hitSlop;
},
touchableGetHighlightDelayMS: function() {
return this.props.delayPressIn || 0;
},
touchableGetHighlightDelayMS: function() {
return this.props.delayPressIn || 0;
},
touchableGetLongPressDelayMS: function() {
return this.props.delayLongPress === 0
? 0
: this.props.delayLongPress || 500;
},
touchableGetLongPressDelayMS: function() {
return this.props.delayLongPress === 0
? 0
: this.props.delayLongPress || 500;
},
touchableGetPressOutDelayMS: function() {
return this.props.delayPressOut || 0;
},
touchableGetPressOutDelayMS: function() {
return this.props.delayPressOut || 0;
},
};

50
lib/extract/extractBrush.js
View File

@@ -3,31 +3,31 @@ import Color from "color";
const urlIdPattern = /^url\(#(.+?)\)$/;
export default function extractBrush(colorOrBrush) {
if (colorOrBrush === "none" || !colorOrBrush) {
return null;
}
if (colorOrBrush === "none" || !colorOrBrush) {
return null;
}
if (colorOrBrush === "currentColor") {
return [2];
}
try {
const matched = colorOrBrush.match(urlIdPattern);
// brush
if (matched) {
return [1, matched[1]];
} else {
// solid color
const color = Color(colorOrBrush)
.rgb()
.array();
const r = color[0] / 255;
const g = color[1] / 255;
const b = color[2] / 255;
const a = color[3];
return [0, r, g, b, a === undefined ? 1 : a];
}
} catch (err) {
console.warn(`"${colorOrBrush}" is not a valid color or brush`);
return null;
if (colorOrBrush === "currentColor") {
return [2];
}
try {
const matched = colorOrBrush.match(urlIdPattern);
// brush
if (matched) {
return [1, matched[1]];
} else {
// solid color
const color = Color(colorOrBrush)
.rgb()
.array();
const r = color[0] / 255;
const g = color[1] / 255;
const b = color[2] / 255;
const a = color[3];
return [0, r, g, b, a === undefined ? 1 : a];
}
} catch (err) {
console.warn(`"${colorOrBrush}" is not a valid color or brush`);
return null;
}
}

42
lib/extract/extractClipPath.js
View File

@@ -1,31 +1,31 @@
import { idPattern } from "../util";
const clipRules = {
evenodd: 0,
nonzero: 1,
evenodd: 0,
nonzero: 1,
};
export default function extractClipPath(props) {
const { clipPath, clipRule } = props;
const clipPathProps = {};
const { clipPath, clipRule } = props;
const clipPathProps = {};
if (clipRule) {
clipPathProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
if (clipRule) {
clipPathProps.clipRule = clipRules[clipRule] === 0 ? 0 : 1;
}
if (clipPath) {
const matched = clipPath.match(idPattern);
if (matched) {
clipPathProps.clipPath = matched[1];
} else {
console.warn(
'Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' +
clipPath +
'"',
);
}
}
if (clipPath) {
const matched = clipPath.match(idPattern);
if (matched) {
clipPathProps.clipPath = matched[1];
} else {
console.warn(
'Invalid `clipPath` prop, expected a clipPath like `"#id"`, but got: "' +
clipPath +
'"',
);
}
}
return clipPathProps;
return clipPathProps;
}

26
lib/extract/extractFill.js
View File

@@ -2,25 +2,25 @@ import extractBrush from "./extractBrush";
import extractOpacity from "./extractOpacity";
const fillRules = {
evenodd: 0,
nonzero: 1,
evenodd: 0,
nonzero: 1,
};
const fillProps = ["fill", "fillOpacity", "fillRule"];
const numFillProps = fillProps.length;
export default function extractFill(props, styleProperties) {
for (let i = 0; i < numFillProps; i++) {
const name = fillProps[i];
if (props.hasOwnProperty(name)) {
styleProperties.push(name);
}
for (let i = 0; i < numFillProps; i++) {
const name = fillProps[i];
if (props.hasOwnProperty(name)) {
styleProperties.push(name);
}
}
return {
// default fill is black
fill: extractBrush(props.fill || "#000"),
fillOpacity: extractOpacity(props.fillOpacity),
fillRule: fillRules[props.fillRule] === 0 ? 0 : 1,
};
return {
// default fill is black
fill: extractBrush(props.fill || "#000"),
fillOpacity: extractOpacity(props.fillOpacity),
fillRule: fillRules[props.fillRule] === 0 ? 0 : 1,
};
}

122
lib/extract/extractGradient.js
View File

@@ -8,76 +8,74 @@ import units from "../units";
const percentReg = /^([+\-]?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)(%?)$/;
function percentToFloat(percent) {
if (typeof percent === "number") {
return percent;
}
if (
typeof percent === "object" &&
typeof percent.__getAnimatedValue === "function"
) {
return percent.__getAnimatedValue();
}
const matched = percent.match(percentReg);
if (!matched) {
console.warn(
`"${percent}" is not a valid number or percentage string.`,
);
return 0;
}
if (typeof percent === "number") {
return percent;
}
if (
typeof percent === "object" &&
typeof percent.__getAnimatedValue === "function"
) {
return percent.__getAnimatedValue();
}
const matched = percent.match(percentReg);
if (!matched) {
console.warn(`"${percent}" is not a valid number or percentage string.`);
return 0;
}
return matched[2] ? matched[1] / 100 : +matched[1];
return matched[2] ? matched[1] / 100 : +matched[1];
}
const offsetComparator = (object, other) => object[0] - other[0];
export default function extractGradient(props, parent) {
const { id, children, gradientTransform, transform, gradientUnits } = props;
if (!id) {
return null;
}
const { id, children, gradientTransform, transform, gradientUnits } = props;
if (!id) {
return null;
}
const stops = [];
const childArray = Children.map(children, child =>
React.cloneElement(child, {
parent,
}),
);
const l = childArray.length;
for (let i = 0; i < l; i++) {
const {
props: { offset, stopColor, stopOpacity },
} = childArray[i];
const offsetNumber = percentToFloat(offset);
if (stopColor && !isNaN(offsetNumber)) {
const color = Color(stopColor)
.alpha(extractOpacity(stopOpacity))
.rgb()
.array();
const r = color[0] / 255;
const g = color[1] / 255;
const b = color[2] / 255;
const a = color[3];
stops.push([offsetNumber, r, g, b, a === undefined ? 1 : a]);
}
const stops = [];
const childArray = Children.map(children, child =>
React.cloneElement(child, {
parent,
}),
);
const l = childArray.length;
for (let i = 0; i < l; i++) {
const {
props: { offset, stopColor, stopOpacity },
} = childArray[i];
const offsetNumber = percentToFloat(offset);
if (stopColor && !isNaN(offsetNumber)) {
const color = Color(stopColor)
.alpha(extractOpacity(stopOpacity))
.rgb()
.array();
const r = color[0] / 255;
const g = color[1] / 255;
const b = color[2] / 255;
const a = color[3];
stops.push([offsetNumber, r, g, b, a === undefined ? 1 : a]);
}
stops.sort(offsetComparator);
}
stops.sort(offsetComparator);
const colors = [];
const offsets = [];
const k = stops.length;
for (let j = 0; j < k; j++) {
const s = stops[j];
offsets.push(s[0]);
colors.push(s[1], s[2], s[3], s[4]);
}
const colors = [];
const offsets = [];
const k = stops.length;
for (let j = 0; j < k; j++) {
const s = stops[j];
offsets.push(s[0]);
colors.push(s[1], s[2], s[3], s[4]);
}
return {
name: id,
children: childArray,
gradient: colors.concat(offsets),
gradientUnits: units[gradientUnits] || 0,
gradientTransform: extractTransform(
gradientTransform || transform || props,
),
};
return {
name: id,
children: childArray,
gradient: colors.concat(offsets),
gradientUnits: units[gradientUnits] || 0,
gradientTransform: extractTransform(
gradientTransform || transform || props,
),
};
}

24
lib/extract/extractLengthList.js
View File

@@ -2,16 +2,16 @@ const spaceReg = /\s+/;
const commaReg = /,/g;
export default function extractLengthList(lengthList) {
if (Array.isArray(lengthList)) {
return lengthList;
} else if (typeof lengthList === "number") {
return [lengthList];
} else if (typeof lengthList === "string") {
return lengthList
.trim()
.replace(commaReg, " ")
.split(spaceReg);
} else {
return [];
}
if (Array.isArray(lengthList)) {
return lengthList;
} else if (typeof lengthList === "number") {
return [lengthList];
} else if (typeof lengthList === "string") {
return lengthList
.trim()
.replace(commaReg, " ")
.split(spaceReg);
} else {
return [];
}
}

4
lib/extract/extractOpacity.js
View File

@@ -1,4 +1,4 @@
export default function extractOpacity(opacity) {
const value = +opacity;
return typeof value !== "number" || isNaN(value) ? 1 : value;
const value = +opacity;
return typeof value !== "number" || isNaN(value) ? 1 : value;
}

10
lib/extract/extractPolyPoints.js
View File

@@ -1,7 +1,7 @@
export default function extractPolyPoints(points) {
const polyPoints = Array.isArray(points) ? points.join(",") : points;
return polyPoints
.replace(/[^e]-/, " -")
.split(/(?:\s+|\s*,\s*)/g)
.join(" ");
const polyPoints = Array.isArray(points) ? points.join(",") : points;
return polyPoints
.replace(/[^e]-/, " -")
.split(/(?:\s+|\s*,\s*)/g)
.join(" ");
}

76
lib/extract/extractProps.js
View File

@@ -7,49 +7,49 @@ import extractOpacity from "./extractOpacity";
import { idPattern } from "../util";
export function propsAndStyles(props) {
const style = props.style;
return {
...(style && style.length ? Object.assign({}, ...style) : style),
...props,
};
const style = props.style;
return {
...(style && style.length ? Object.assign({}, ...style) : style),
...props,
};
}
export default function extractProps(props, ref) {
const { opacity, onLayout, id, clipPath, mask } = props;
const styleProperties = [];
const { opacity, onLayout, id, clipPath, mask } = props;
const styleProperties = [];
const extractedProps = {
onLayout,
propList: styleProperties,
opacity: extractOpacity(opacity),
matrix: extractTransform(props),
...props2transform(props),
...extractResponder(props, ref),
...extractFill(props, styleProperties),
...extractStroke(props, styleProperties),
};
const extractedProps = {
onLayout,
propList: styleProperties,
opacity: extractOpacity(opacity),
matrix: extractTransform(props),
...props2transform(props),
...extractResponder(props, ref),
...extractFill(props, styleProperties),
...extractStroke(props, styleProperties),
};
if (id) {
extractedProps.name = id;
if (id) {
extractedProps.name = id;
}
if (clipPath) {
Object.assign(extractedProps, extractClipPath(props));
}
if (mask) {
const matched = mask.match(idPattern);
if (matched) {
extractedProps.mask = matched[1];
} else {
console.warn(
'Invalid `mask` prop, expected a mask like `"#id"`, but got: "' +
mask +
'"',
);
}
}
if (clipPath) {
Object.assign(extractedProps, extractClipPath(props));
}
if (mask) {
const matched = mask.match(idPattern);
if (matched) {
extractedProps.mask = matched[1];
} else {
console.warn(
'Invalid `mask` prop, expected a mask like `"#id"`, but got: "' +
mask +
'"',
);
}
}
return extractedProps;
return extractedProps;
}

85
lib/extract/extractResponder.js
View File

@@ -4,61 +4,60 @@ const responderProps = Object.keys(PanResponder.create({}).panHandlers);
const numResponderProps = responderProps.length;
const touchableProps = [
"disabled",
"onPress",
"onPressIn",
"onPressOut",
"onLongPress",
"delayPressIn",
"delayPressOut",
"delayLongPress",
"disabled",
"onPress",
"onPressIn",
"onPressOut",
"onLongPress",
"delayPressIn",
"delayPressOut",
"delayLongPress",
];
const numTouchableProps = touchableProps.length;
function hasTouchableProperty(props) {
for (let i = 0; i < numTouchableProps; i++) {
if (props.hasOwnProperty(touchableProps[i])) {
return true;
}
for (let i = 0; i < numTouchableProps; i++) {
if (props.hasOwnProperty(touchableProps[i])) {
return true;
}
return false;
}
return false;
}
export default function extractResponder(props, ref) {
const extractedProps = {};
const extractedProps = {};
let responsible = false;
for (let i = 0; i < numResponderProps; i++) {
const key = responderProps[i];
const value = props[key];
if (value) {
responsible = true;
extractedProps[key] = value;
}
let responsible = false;
for (let i = 0; i < numResponderProps; i++) {
const key = responderProps[i];
const value = props[key];
if (value) {
responsible = true;
extractedProps[key] = value;
}
}
const pointerEvents = props.pointerEvents;
if (pointerEvents) {
extractedProps.pointerEvents = pointerEvents;
}
const pointerEvents = props.pointerEvents;
if (pointerEvents) {
extractedProps.pointerEvents = pointerEvents;
}
if (hasTouchableProperty(props)) {
responsible = true;
Object.assign(extractedProps, {
onStartShouldSetResponder:
ref.touchableHandleStartShouldSetResponder,
onResponderTerminationRequest:
ref.touchableHandleResponderTerminationRequest,
onResponderGrant: ref.touchableHandleResponderGrant,
onResponderMove: ref.touchableHandleResponderMove,
onResponderRelease: ref.touchableHandleResponderRelease,
onResponderTerminate: ref.touchableHandleResponderTerminate,
});
}
if (hasTouchableProperty(props)) {
responsible = true;
Object.assign(extractedProps, {
onStartShouldSetResponder: ref.touchableHandleStartShouldSetResponder,
onResponderTerminationRequest:
ref.touchableHandleResponderTerminationRequest,
onResponderGrant: ref.touchableHandleResponderGrant,
onResponderMove: ref.touchableHandleResponderMove,
onResponderRelease: ref.touchableHandleResponderRelease,
onResponderTerminate: ref.touchableHandleResponderTerminate,
});
}
if (responsible) {
extractedProps.responsible = true;
}
if (responsible) {
extractedProps.responsible = true;
}
return extractedProps;
return extractedProps;
}

74
lib/extract/extractStroke.js
View File

@@ -3,54 +3,54 @@ import extractOpacity from "./extractOpacity";
import extractLengthList from "./extractLengthList";
const caps = {
butt: 0,
square: 2,
round: 1,
butt: 0,
square: 2,
round: 1,
};
const joins = {
miter: 0,
bevel: 2,
round: 1,
miter: 0,
bevel: 2,
round: 1,
};
const strokeProps = [
"stroke",
"strokeWidth",
"strokeOpacity",
"strokeDasharray",
"strokeDashoffset",
"strokeLinecap",
"strokeLinejoin",
"strokeMiterlimit",
"stroke",
"strokeWidth",
"strokeOpacity",
"strokeDasharray",
"strokeDashoffset",
"strokeLinecap",
"strokeLinejoin",
"strokeMiterlimit",
];
const numStrokeProps = strokeProps.length;
export default function extractStroke(props, styleProperties) {
for (let i = 0; i < numStrokeProps; i++) {
const name = strokeProps[i];
if (props.hasOwnProperty(name)) {
styleProperties.push(name);
}
for (let i = 0; i < numStrokeProps; i++) {
const name = strokeProps[i];
if (props.hasOwnProperty(name)) {
styleProperties.push(name);
}
}
const { stroke, strokeWidth = 1, strokeDasharray } = props;
const strokeDash =
!strokeDasharray || strokeDasharray === "none"
? null
: extractLengthList(strokeDasharray);
const { stroke, strokeWidth = 1, strokeDasharray } = props;
const strokeDash =
!strokeDasharray || strokeDasharray === "none"
? null
: extractLengthList(strokeDasharray);
return {
stroke: extractBrush(stroke),
strokeOpacity: extractOpacity(props.strokeOpacity),
strokeLinecap: caps[props.strokeLinecap] || 0,
strokeLinejoin: joins[props.strokeLinejoin] || 0,
strokeDasharray:
strokeDash && strokeDash.length % 2 === 1
? strokeDash.concat(strokeDash)
: strokeDash,
strokeWidth,
strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null,
strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4,
};
return {
stroke: extractBrush(stroke),
strokeOpacity: extractOpacity(props.strokeOpacity),
strokeLinecap: caps[props.strokeLinecap] || 0,
strokeLinejoin: joins[props.strokeLinejoin] || 0,
strokeDasharray:
strokeDash && strokeDash.length % 2 === 1
? strokeDash.concat(strokeDash)
: strokeDash,
strokeWidth,
strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null,
strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4,
};
}

200
lib/extract/extractText.js
View File

@@ -10,127 +10,127 @@ const commaReg = /\s*,\s*/g;
const cachedFontObjectsFromString = {};
function extractSingleFontFamily(fontFamilyString) {
// SVG on the web allows for multiple font-families to be specified.
// For compatibility, we extract the first font-family, hoping
// we'll get a match.
return fontFamilyString
? fontFamilyString
.split(commaReg)[0]
.replace(fontFamilyPrefix, "")
.replace(fontFamilySuffix, "")
: null;
// SVG on the web allows for multiple font-families to be specified.
// For compatibility, we extract the first font-family, hoping
// we'll get a match.
return fontFamilyString
? fontFamilyString
.split(commaReg)[0]
.replace(fontFamilyPrefix, "")
.replace(fontFamilySuffix, "")
: null;
}
function parseFontString(font) {
if (cachedFontObjectsFromString.hasOwnProperty(font)) {
return cachedFontObjectsFromString[font];
}
const match = fontRegExp.exec(font);
if (!match) {
cachedFontObjectsFromString[font] = null;
return null;
}
const isBold = /bold/.exec(match[1]);
const isItalic = /italic/.exec(match[1]);
cachedFontObjectsFromString[font] = {
fontSize: match[2] || "12",
fontWeight: isBold ? "bold" : "normal",
fontStyle: isItalic ? "italic" : "normal",
fontFamily: extractSingleFontFamily(match[3]),
};
if (cachedFontObjectsFromString.hasOwnProperty(font)) {
return cachedFontObjectsFromString[font];
}
const match = fontRegExp.exec(font);
if (!match) {
cachedFontObjectsFromString[font] = null;
return null;
}
const isBold = /bold/.exec(match[1]);
const isItalic = /italic/.exec(match[1]);
cachedFontObjectsFromString[font] = {
fontSize: match[2] || "12",
fontWeight: isBold ? "bold" : "normal",
fontStyle: isItalic ? "italic" : "normal",
fontFamily: extractSingleFontFamily(match[3]),
};
return cachedFontObjectsFromString[font];
}
export function extractFont(props) {
const {
fontData,
fontStyle,
fontVariant,
fontWeight,
fontStretch,
fontSize,
fontFamily,
textAnchor,
textDecoration,
letterSpacing,
wordSpacing,
kerning,
fontVariantLigatures,
fontFeatureSettings,
font,
} = props;
const {
fontData,
fontStyle,
fontVariant,
fontWeight,
fontStretch,
fontSize,
fontFamily,
textAnchor,
textDecoration,
letterSpacing,
wordSpacing,
kerning,
fontVariantLigatures,
fontFeatureSettings,
font,
} = props;
const ownedFont = pickNotNil({
fontData,
fontStyle,
fontVariant,
fontWeight,
fontStretch,
fontSize,
fontFamily: extractSingleFontFamily(fontFamily),
textAnchor,
textDecoration,
letterSpacing,
wordSpacing,
kerning,
fontVariantLigatures,
fontFeatureSettings,
});
const ownedFont = pickNotNil({
fontData,
fontStyle,
fontVariant,
fontWeight,
fontStretch,
fontSize,
fontFamily: extractSingleFontFamily(fontFamily),
textAnchor,
textDecoration,
letterSpacing,
wordSpacing,
kerning,
fontVariantLigatures,
fontFeatureSettings,
});
const baseFont = typeof font === "string" ? parseFontString(font) : font;
const baseFont = typeof font === "string" ? parseFontString(font) : font;
return { ...baseFont, ...ownedFont };
return { ...baseFont, ...ownedFont };
}
let TSpan;
export function setTSpan(TSpanImplementation) {
TSpan = TSpanImplementation;
TSpan = TSpanImplementation;
}
function getChild(child) {
if (typeof child === "string" || typeof child === "number") {
return <TSpan>{String(child)}</TSpan>;
} else {
return child;
}
if (typeof child === "string" || typeof child === "number") {
return <TSpan>{String(child)}</TSpan>;
} else {
return child;
}
}
export default function extractText(props, container) {
const {
x,
y,
dx,
dy,
rotate,
children,
baselineShift,
verticalAlign,
alignmentBaseline,
} = props;
const {
x,
y,
dx,
dy,
rotate,
children,
baselineShift,
verticalAlign,
alignmentBaseline,
} = props;
const textChildren =
typeof children === "string" || typeof children === "number" ? (
container ? (
<TSpan>{String(children)}</TSpan>
) : null
) : Children.count(children) > 1 || Array.isArray(children) ? (
Children.map(children, getChild)
) : (
children
);
const textChildren =
typeof children === "string" || typeof children === "number" ? (
container ? (
<TSpan>{String(children)}</TSpan>
) : null
) : Children.count(children) > 1 || Array.isArray(children) ? (
Children.map(children, getChild)
) : (
children
);
return {
content: textChildren === null ? String(children) : null,
children: textChildren,
baselineShift,
verticalAlign,
alignmentBaseline,
font: extractFont(props),
x: extractLengthList(x),
y: extractLengthList(y),
dx: extractLengthList(dx),
dy: extractLengthList(dy),
rotate: extractLengthList(rotate),
};
return {
content: textChildren === null ? String(children) : null,
children: textChildren,
baselineShift,
verticalAlign,
alignmentBaseline,
font: extractFont(props),
x: extractLengthList(x),
y: extractLengthList(y),
dx: extractLengthList(dx),
dy: extractLengthList(dy),
rotate: extractLengthList(rotate),
};
}

152
lib/extract/extractTransform.js
View File

@@ -4,100 +4,100 @@ import transformParser from "./transform";
const pooledMatrix = new Matrix2D();
function transformToMatrix(props, transform) {
pooledMatrix.reset();
appendTransform(props);
pooledMatrix.reset();
appendTransform(props);
if (transform) {
appendTransform(transform);
}
if (transform) {
appendTransform(transform);
}
return pooledMatrix.toArray();
return pooledMatrix.toArray();
}
function appendTransform(transform) {
if (transform) {
if (typeof transform === "string") {
try {
const t = transformParser.parse(transform);
pooledMatrix.append(t[0], t[3], t[1], t[4], t[2], t[5]);
} catch (e) {
console.error(e);
}
} else {
pooledMatrix.appendTransform(
transform.x + transform.originX,
transform.y + transform.originY,
transform.scaleX,
transform.scaleY,
transform.rotation,
transform.skewX,
transform.skewY,
transform.originX,
transform.originY,
);
}
if (transform) {
if (typeof transform === "string") {
try {
const t = transformParser.parse(transform);
pooledMatrix.append(t[0], t[3], t[1], t[4], t[2], t[5]);
} catch (e) {
console.error(e);
}
} else {
pooledMatrix.appendTransform(
transform.x + transform.originX,
transform.y + transform.originY,
transform.scaleX,
transform.scaleY,
transform.rotation,
transform.skewX,
transform.skewY,
transform.originX,
transform.originY,
);
}
}
}
function universal2axis(universal, axisX, axisY, defaultValue) {
let x;
let y;
if (typeof universal === "string") {
const coords = universal.split(/\s*,\s*/);
if (coords.length === 2) {
x = +coords[0];
y = +coords[1];
} else if (coords.length === 1) {
x = y = +coords[0];
}
} else if (typeof universal === "number") {
x = y = universal;
let x;
let y;
if (typeof universal === "string") {
const coords = universal.split(/\s*,\s*/);
if (coords.length === 2) {
x = +coords[0];
y = +coords[1];
} else if (coords.length === 1) {
x = y = +coords[0];
}
} else if (typeof universal === "number") {
x = y = universal;
}
axisX = +axisX;
if (!isNaN(axisX)) {
x = axisX;
}
axisX = +axisX;
if (!isNaN(axisX)) {
x = axisX;
}
axisY = +axisY;
if (!isNaN(axisY)) {
y = axisY;
}
axisY = +axisY;
if (!isNaN(axisY)) {
y = axisY;
}
return [x || defaultValue || 0, y || defaultValue || 0];
return [x || defaultValue || 0, y || defaultValue || 0];
}
export function props2transform(props) {
if (props && typeof props === "string") {
return props;
}
const origin = universal2axis(props.origin, props.originX, props.originY);
const scale = universal2axis(props.scale, props.scaleX, props.scaleY, 1);
const skew = universal2axis(props.skew, props.skewX, props.skewY);
const translate = universal2axis(
props.translate,
// eslint-disable-next-line eqeqeq
props.translateX == null ? props.x || 0 : props.translateX,
// eslint-disable-next-line eqeqeq
props.translateY == null ? props.y || 0 : props.translateY,
);
if (props && typeof props === "string") {
return props;
}
const origin = universal2axis(props.origin, props.originX, props.originY);
const scale = universal2axis(props.scale, props.scaleX, props.scaleY, 1);
const skew = universal2axis(props.skew, props.skewX, props.skewY);
const translate = universal2axis(
props.translate,
// eslint-disable-next-line eqeqeq
props.translateX == null ? props.x || 0 : props.translateX,
// eslint-disable-next-line eqeqeq
props.translateY == null ? props.y || 0 : props.translateY,
);
return {
rotation: +props.rotation || 0,
scaleX: scale[0],
scaleY: scale[1],
originX: origin[0],
originY: origin[1],
skewX: skew[0],
skewY: skew[1],
x: translate[0],
y: translate[1],
};
return {
rotation: +props.rotation || 0,
scaleX: scale[0],
scaleY: scale[1],
originX: origin[0],
originY: origin[1],
skewX: skew[0],
skewY: skew[1],
x: translate[0],
y: translate[1],
};
}
export default function extractTransform(props) {
return transformToMatrix(
props2transform(props),
props.transform ? props2transform(props.transform) : null,
);
return transformToMatrix(
props2transform(props),
props.transform ? props2transform(props.transform) : null,
);
}

76
lib/extract/extractViewBox.js
View File

@@ -1,54 +1,54 @@
export const meetOrSliceTypes = {
meet: 0,
slice: 1,
none: 2,
meet: 0,
slice: 1,
none: 2,
};
export const alignEnum = [
"xMinYMin",
"xMidYMin",
"xMaxYMin",
"xMinYMid",
"xMidYMid",
"xMaxYMid",
"xMinYMax",
"xMidYMax",
"xMaxYMax",
"none",
"xMinYMin",
"xMidYMin",
"xMaxYMin",
"xMinYMid",
"xMidYMid",
"xMaxYMid",
"xMinYMax",
"xMidYMax",
"xMaxYMax",
"none",
].reduce((prev, name) => {
prev[name] = name;
return prev;
prev[name] = name;
return prev;
}, {});
const spacesRegExp = /\s+/;
export default function extractViewBox(props) {
const { viewBox, preserveAspectRatio } = props;
const { viewBox, preserveAspectRatio } = props;
if (!viewBox) {
return null;
}
if (!viewBox) {
return null;
}
const params = viewBox
.trim()
.split(spacesRegExp)
.map(Number);
const params = viewBox
.trim()
.split(spacesRegExp)
.map(Number);
if (params.length !== 4 || params.some(isNaN)) {
console.warn("Invalid `viewBox` prop:" + viewBox);
return null;
}
if (params.length !== 4 || params.some(isNaN)) {
console.warn("Invalid `viewBox` prop:" + viewBox);
return null;
}
const modes = preserveAspectRatio
? preserveAspectRatio.trim().split(spacesRegExp)
: [];
const modes = preserveAspectRatio
? preserveAspectRatio.trim().split(spacesRegExp)
: [];
return {
minX: params[0],
minY: params[1],
vbWidth: params[2],
vbHeight: params[3],
align: alignEnum[modes[0]] || "xMidYMid",
meetOrSlice: meetOrSliceTypes[modes[1]] || 0,
};
return {
minX: params[0],
minY: params[1],
vbWidth: params[2],
vbHeight: params[3],
align: alignEnum[modes[0]] || "xMidYMid",
meetOrSlice: meetOrSliceTypes[modes[1]] || 0,
};
}

4
lib/units.js
View File

@@ -1,4 +1,4 @@
export default {
objectBoundingBox: 0,
userSpaceOnUse: 1,
objectBoundingBox: 0,
userSpaceOnUse: 1,
};

18
lib/util.js
View File

@@ -1,14 +1,14 @@
export function pickNotNil(object) {
const result = {};
for (const key in object) {
if (object.hasOwnProperty(key)) {
const value = object[key];
if (value !== undefined && value !== null) {
result[key] = value;
}
}
const result = {};
for (const key in object) {
if (object.hasOwnProperty(key)) {
const value = object[key];
if (value !== undefined && value !== null) {
result[key] = value;
}
}
return result;
}
return result;
}
export const idPattern = /#([^)]+)\)?$/;