zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-06 07:06: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 charset = utf-8
end_of_line = lf end_of_line = lf
indent_style = space indent_style = space
indent_size = 4 indent_size = 2
trim_trailing_whitespace = true trim_trailing_whitespace = true
insert_final_newline = true insert_final_newline = true

2
.prettierrc
View File

@@ -1,4 +1,4 @@
{ {
"trailingComma": "all", "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"; import Shape from "./Shape";
export default class Circle extends Shape { export default class Circle extends Shape {
static displayName = "Circle"; static displayName = "Circle";
static defaultProps = { static defaultProps = {
cx: 0, cx: 0,
cy: 0, cy: 0,
r: 0, r: 0,
}; };
render() { render() {
const { props } = this; const { props } = this;
const { cx, cy, r } = props; const { cx, cy, r } = props;
return ( return (
<RNSVGCircle <RNSVGCircle
ref={this.refMethod} ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)} {...extractProps(propsAndStyles(props), this)}
cx={cx} cx={cx}
cy={cy} cy={cy}
r={r} r={r}
/> />
); );
} }
} }
const RNSVGCircle = requireNativeComponent("RNSVGCircle"); const RNSVGCircle = requireNativeComponent("RNSVGCircle");

26
elements/ClipPath.js
View File

@@ -4,20 +4,20 @@ import extractClipPath from "../lib/extract/extractClipPath";
import Shape from "./Shape"; import Shape from "./Shape";
export default class ClipPath extends Shape { export default class ClipPath extends Shape {
static displayName = "ClipPath"; static displayName = "ClipPath";
render() { render() {
const { id, children } = this.props; const { id, children } = this.props;
return ( return (
<RNSVGClipPath <RNSVGClipPath
ref={this.refMethod} ref={this.refMethod}
name={id} name={id}
{...extractClipPath(this.props)} {...extractClipPath(this.props)}
> >
{children} {children}
</RNSVGClipPath> </RNSVGClipPath>
); );
} }
} }
const RNSVGClipPath = requireNativeComponent("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"; import { requireNativeComponent } from "react-native";
export default class Defs extends Component { export default class Defs extends Component {
static displayName = "Defs"; static displayName = "Defs";
render() { render() {
return <RNSVGDefs>{this.props.children}</RNSVGDefs>; return <RNSVGDefs>{this.props.children}</RNSVGDefs>;
} }
} }
const RNSVGDefs = requireNativeComponent("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"; import Shape from "./Shape";
export default class Ellipse extends Shape { export default class Ellipse extends Shape {
static displayName = "Ellipse"; static displayName = "Ellipse";
static defaultProps = { static defaultProps = {
cx: 0, cx: 0,
cy: 0, cy: 0,
rx: 0, rx: 0,
ry: 0, ry: 0,
}; };
render() { render() {
const { props } = this; const { props } = this;
const { cx, cy, rx, ry } = props; const { cx, cy, rx, ry } = props;
return ( return (
<RNSVGEllipse <RNSVGEllipse
ref={this.refMethod} ref={this.refMethod}
{...extractProps(propsAndStyles(props), this)} {...extractProps(propsAndStyles(props), this)}
cx={cx} cx={cx}
cy={cy} cy={cy}
rx={rx} rx={rx}
ry={ry} ry={ry}
/> />
); );
} }
} }
const RNSVGEllipse = requireNativeComponent("RNSVGEllipse"); const RNSVGEllipse = requireNativeComponent("RNSVGEllipse");

42
elements/G.js
View File

@@ -6,29 +6,29 @@ import extractTransform from "../lib/extract/extractTransform";
import Shape from "./Shape"; import Shape from "./Shape";
export default class G extends Shape { export default class G extends Shape {
static displayName = "G"; static displayName = "G";
setNativeProps = props => { setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props); const matrix = !props.matrix && extractTransform(props);
if (matrix) { if (matrix) {
props.matrix = 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>
);
} }
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"); const RNSVGGroup = requireNativeComponent("RNSVGGroup");

71
elements/Image.js
View File

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

42
elements/LinearGradient.js
View File

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

81
elements/Mask.js
View File

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

88
elements/Pattern.js
View File

@@ -6,52 +6,52 @@ import units from "../lib/units";
import Shape from "./Shape"; import Shape from "./Shape";
export default class Pattern extends Shape { export default class Pattern extends Shape {
static displayName = "Pattern"; static displayName = "Pattern";
static defaultProps = { static defaultProps = {
x: "0%", x: "0%",
y: "0%", y: "0%",
width: "100%", width: "100%",
height: "100%", height: "100%",
}; };
render() { render() {
const { props } = this; const { props } = this;
const { const {
patternTransform, patternTransform,
transform, transform,
id, id,
x, x,
y, y,
width, width,
height, height,
patternUnits, patternUnits,
patternContentUnits, patternContentUnits,
children, children,
viewBox, viewBox,
preserveAspectRatio, preserveAspectRatio,
} = props; } = props;
const matrix = extractTransform(patternTransform || transform || props); const matrix = extractTransform(patternTransform || transform || props);
return ( return (
<RNSVGPattern <RNSVGPattern
ref={this.refMethod} ref={this.refMethod}
name={id} name={id}
x={x} x={x}
y={y} y={y}
width={width} width={width}
height={height} height={height}
matrix={matrix} matrix={matrix}
patternTransform={matrix} patternTransform={matrix}
patternUnits={units[patternUnits] || 0} patternUnits={units[patternUnits] || 0}
patternContentUnits={ patternContentUnits={
patternContentUnits ? units[patternContentUnits] : 1 patternContentUnits ? units[patternContentUnits] : 1
} }
{...extractViewBox({ viewBox, preserveAspectRatio })} {...extractViewBox({ viewBox, preserveAspectRatio })}
> >
{children} {children}
</RNSVGPattern> </RNSVGPattern>
); );
} }
} }
const RNSVGPattern = requireNativeComponent("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"; import extractPolyPoints from "../lib/extract/extractPolyPoints";
export default class Polygon extends Shape { export default class Polygon extends Shape {
static displayName = "Polygon"; static displayName = "Polygon";
static defaultProps = { static defaultProps = {
points: "", points: "",
}; };
setNativeProps = props => { setNativeProps = props => {
const { points } = props; const { points } = props;
if (points) { if (points) {
props.d = `M${extractPolyPoints(points)}z`; 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}
/>
);
} }
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"; import extractPolyPoints from "../lib/extract/extractPolyPoints";
export default class Polyline extends Shape { export default class Polyline extends Shape {
static displayName = "Polyline"; static displayName = "Polyline";
static defaultProps = { static defaultProps = {
points: "", points: "",
}; };
setNativeProps = props => { setNativeProps = props => {
const { points } = props; const { points } = props;
if (points) { if (points) {
props.d = `M${extractPolyPoints(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}
/>
);
} }
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"; import Shape from "./Shape";
export default class RadialGradient extends Shape { export default class RadialGradient extends Shape {
static displayName = "RadialGradient"; static displayName = "RadialGradient";
static defaultProps = { static defaultProps = {
fx: "50%", fx: "50%",
fy: "50%", fy: "50%",
cx: "50%", cx: "50%",
cy: "50%", cy: "50%",
r: "50%", r: "50%",
}; };
render() { render() {
const { props } = this; const { props } = this;
const { fx, fy, rx, ry, r, cx, cy } = props; const { fx, fy, rx, ry, r, cx, cy } = props;
return ( return (
<RNSVGRadialGradient <RNSVGRadialGradient
ref={this.refMethod} ref={this.refMethod}
fx={fx} fx={fx}
fy={fy} fy={fy}
rx={rx || r} rx={rx || r}
ry={ry || r} ry={ry || r}
cx={cx} cx={cx}
cy={cy} cy={cy}
{...extractGradient(props, this)} {...extractGradient(props, this)}
/> />
); );
} }
} }
const RNSVGRadialGradient = requireNativeComponent("RNSVGRadialGradient"); 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"; import Shape from "./Shape";
export default class Rect extends Shape { export default class Rect extends Shape {
static displayName = "Rect"; static displayName = "Rect";
static defaultProps = { static defaultProps = {
x: 0, x: 0,
y: 0, y: 0,
width: 0, width: 0,
height: 0, height: 0,
rx: 0, rx: 0,
ry: 0, ry: 0,
}; };
render() { render() {
const { props } = this; const { props } = this;
const { x, y, width, height, rx, ry } = props; const { x, y, width, height, rx, ry } = props;
return ( return (
<RNSVGRect <RNSVGRect
ref={this.refMethod} ref={this.refMethod}
{...extractProps( {...extractProps(
{ {
...propsAndStyles(props), ...propsAndStyles(props),
x: null, x: null,
y: null, y: null,
}, },
this, this,
)} )}
x={x} x={x}
y={y} y={y}
width={width} width={width}
height={height} height={height}
rx={rx} rx={rx}
ry={ry} ry={ry}
/> />
); );
} }
} }
const RNSVGRect = requireNativeComponent("RNSVGRect"); 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; const numTouchKeys = touchKeys.length;
export default class Shape extends Component { export default class Shape extends Component {
constructor() { constructor() {
super(...arguments); super(...arguments);
for (let i = 0; i < numTouchKeys; i++) { for (let i = 0; i < numTouchKeys; i++) {
const key = touchKeys[i]; const key = touchKeys[i];
const val = touchVals[i]; const val = touchVals[i];
if (typeof val === "function") { if (typeof val === "function") {
this[key] = val.bind(this); this[key] = val.bind(this);
} else { } else {
this[key] = val; this[key] = val;
} }
}
this.state = this.touchableGetInitialState();
} }
refMethod = ref => { this.state = this.touchableGetInitialState();
this.root = ref; }
}; refMethod = ref => {
setNativeProps = props => { this.root = ref;
this.root.setNativeProps(props); };
}; setNativeProps = props => {
this.root.setNativeProps(props);
};
} }

28
elements/Stop.js
View File

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

220
elements/Svg.js
View File

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

20
elements/Symbol.js
View File

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

60
elements/TSpan.js
View File

@@ -7,38 +7,38 @@ import { pickNotNil } from "../lib/util";
import Shape from "./Shape"; import Shape from "./Shape";
export default class TSpan extends Shape { export default class TSpan extends Shape {
static displayName = "TSpan"; static displayName = "TSpan";
setNativeProps = props => { setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props); const matrix = !props.matrix && extractTransform(props);
if (matrix) { if (matrix) {
props.matrix = 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)}
/>
);
} }
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); setTSpan(TSpan);

60
elements/Text.js
View File

@@ -8,38 +8,38 @@ import Shape from "./Shape";
import "./TSpan"; import "./TSpan";
export default class Text extends Shape { export default class Text extends Shape {
static displayName = "Text"; static displayName = "Text";
setNativeProps = props => { setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props); const matrix = !props.matrix && extractTransform(props);
if (matrix) { if (matrix) {
props.matrix = 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 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"); const RNSVGText = requireNativeComponent("RNSVGText");

118
elements/TextPath.js
View File

@@ -8,73 +8,73 @@ import Shape from "./Shape";
import TSpan from "./TSpan"; import TSpan from "./TSpan";
export default class TextPath extends Shape { export default class TextPath extends Shape {
static displayName = "TextPath"; static displayName = "TextPath";
setNativeProps = props => { setNativeProps = props => {
const matrix = !props.matrix && extractTransform(props); const matrix = !props.matrix && extractTransform(props);
if (matrix) { if (matrix) {
props.matrix = matrix; props.matrix = matrix;
} }
const text = pickNotNil(extractText(props, true)); const text = pickNotNil(extractText(props, true));
this.root.setNativeProps({ this.root.setNativeProps({
...props, ...props,
...text, ...text,
}); });
}; };
render() { render() {
const { const {
children, children,
xlinkHref, xlinkHref,
href = xlinkHref, href = xlinkHref,
startOffset, 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, method,
spacing, spacing,
side, side,
alignmentBaseline, alignmentBaseline,
midLine, 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"); const RNSVGTextPath = requireNativeComponent("RNSVGTextPath");

87
elements/Use.js
View File

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

298
lib/Matrix2D.js
View File

@@ -25,163 +25,163 @@ const DEG_TO_RAD = Math.PI / 180;
* @constructor * @constructor
**/ **/
export default class Matrix2D { export default class Matrix2D {
constructor() { constructor() {
this.reset(); this.reset();
// public properties: // public properties:
/** /**
* Position (0, 0) in a 3x3 affine transformation matrix. * Position (0, 0) in a 3x3 affine transformation matrix.
* @property a * @property a
* @type Number * @type Number
**/ **/
/** /**
* Position (0, 1) in a 3x3 affine transformation matrix. * Position (0, 1) in a 3x3 affine transformation matrix.
* @property b * @property b
* @type Number * @type Number
**/ **/
/** /**
* Position (1, 0) in a 3x3 affine transformation matrix. * Position (1, 0) in a 3x3 affine transformation matrix.
* @property c * @property c
* @type Number * @type Number
**/ **/
/** /**
* Position (1, 1) in a 3x3 affine transformation matrix. * Position (1, 1) in a 3x3 affine transformation matrix.
* @property d * @property d
* @type Number * @type Number
**/ **/
/** /**
* Position (2, 0) in a 3x3 affine transformation matrix. * Position (2, 0) in a 3x3 affine transformation matrix.
* @property tx * @property tx
* @type Number * @type Number
**/ **/
/** /**
* Position (2, 1) in a 3x3 affine transformation matrix. * Position (2, 1) in a 3x3 affine transformation matrix.
* @property ty * @property ty
* @type Number * @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;
} }
/** const a = cos * scaleX;
* Reset current matrix to an identity matrix. const b = sin * scaleX;
* @method reset const c = -sin * scaleY;
* @return {Matrix2D} This matrix. Useful for chaining method calls. const d = cos * scaleY;
**/
reset = function() {
this.a = this.d = 1;
this.b = this.c = this.tx = this.ty = 0;
this.hasInitialState = true;
return this;
};
/** if (skewX || skewY) {
* Returns an array with current matrix values. const b1 = Math.tan(skewY * DEG_TO_RAD);
* @method toArray const c1 = Math.tan(skewX * DEG_TO_RAD);
* @return {Array} an array with current matrix values. this.append(a + c1 * b, b1 * a + b, c + c1 * d, b1 * c + d, x, y);
**/ } else {
toArray = function() { this.append(a, b, c, d, x, y);
return [this.a, this.b, this.c, this.d, this.tx, this.ty]; }
};
/** if (regX || regY) {
* Appends the specified matrix properties to this matrix. All parameters are required. // append the registration offset:
* This is the equivalent of multiplying `(this matrix) * (specified matrix)`. this.tx -= regX * this.a + regY * this.c;
* @method append this.ty -= regX * this.b + regY * this.d;
* @param {Number} a }
* @param {Number} b return this;
* @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;
};
} }

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

50
lib/extract/extractBrush.js
View File

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

26
lib/extract/extractFill.js
View File

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

24
lib/extract/extractLengthList.js
View File

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

4
lib/extract/extractOpacity.js
View File

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

10
lib/extract/extractPolyPoints.js
View File

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

76
lib/extract/extractProps.js
View File

@@ -7,49 +7,49 @@ import extractOpacity from "./extractOpacity";
import { idPattern } from "../util"; import { idPattern } from "../util";
export function propsAndStyles(props) { export function propsAndStyles(props) {
const style = props.style; const style = props.style;
return { return {
...(style && style.length ? Object.assign({}, ...style) : style), ...(style && style.length ? Object.assign({}, ...style) : style),
...props, ...props,
}; };
} }
export default function extractProps(props, ref) { export default function extractProps(props, ref) {
const { opacity, onLayout, id, clipPath, mask } = props; const { opacity, onLayout, id, clipPath, mask } = props;
const styleProperties = []; const styleProperties = [];
const extractedProps = { const extractedProps = {
onLayout, onLayout,
propList: styleProperties, propList: styleProperties,
opacity: extractOpacity(opacity), opacity: extractOpacity(opacity),
matrix: extractTransform(props), matrix: extractTransform(props),
...props2transform(props), ...props2transform(props),
...extractResponder(props, ref), ...extractResponder(props, ref),
...extractFill(props, styleProperties), ...extractFill(props, styleProperties),
...extractStroke(props, styleProperties), ...extractStroke(props, styleProperties),
}; };
if (id) { if (id) {
extractedProps.name = 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) { return extractedProps;
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;
} }

85
lib/extract/extractResponder.js
View File

@@ -4,61 +4,60 @@ const responderProps = Object.keys(PanResponder.create({}).panHandlers);
const numResponderProps = responderProps.length; const numResponderProps = responderProps.length;
const touchableProps = [ const touchableProps = [
"disabled", "disabled",
"onPress", "onPress",
"onPressIn", "onPressIn",
"onPressOut", "onPressOut",
"onLongPress", "onLongPress",
"delayPressIn", "delayPressIn",
"delayPressOut", "delayPressOut",
"delayLongPress", "delayLongPress",
]; ];
const numTouchableProps = touchableProps.length; const numTouchableProps = touchableProps.length;
function hasTouchableProperty(props) { function hasTouchableProperty(props) {
for (let i = 0; i < numTouchableProps; i++) { for (let i = 0; i < numTouchableProps; i++) {
if (props.hasOwnProperty(touchableProps[i])) { if (props.hasOwnProperty(touchableProps[i])) {
return true; return true;
}
} }
return false; }
return false;
} }
export default function extractResponder(props, ref) { export default function extractResponder(props, ref) {
const extractedProps = {}; const extractedProps = {};
let responsible = false; let responsible = false;
for (let i = 0; i < numResponderProps; i++) { for (let i = 0; i < numResponderProps; i++) {
const key = responderProps[i]; const key = responderProps[i];
const value = props[key]; const value = props[key];
if (value) { if (value) {
responsible = true; responsible = true;
extractedProps[key] = value; extractedProps[key] = value;
}
} }
}
const pointerEvents = props.pointerEvents; const pointerEvents = props.pointerEvents;
if (pointerEvents) { if (pointerEvents) {
extractedProps.pointerEvents = pointerEvents; extractedProps.pointerEvents = pointerEvents;
} }
if (hasTouchableProperty(props)) { if (hasTouchableProperty(props)) {
responsible = true; responsible = true;
Object.assign(extractedProps, { Object.assign(extractedProps, {
onStartShouldSetResponder: onStartShouldSetResponder: ref.touchableHandleStartShouldSetResponder,
ref.touchableHandleStartShouldSetResponder, onResponderTerminationRequest:
onResponderTerminationRequest: ref.touchableHandleResponderTerminationRequest,
ref.touchableHandleResponderTerminationRequest, onResponderGrant: ref.touchableHandleResponderGrant,
onResponderGrant: ref.touchableHandleResponderGrant, onResponderMove: ref.touchableHandleResponderMove,
onResponderMove: ref.touchableHandleResponderMove, onResponderRelease: ref.touchableHandleResponderRelease,
onResponderRelease: ref.touchableHandleResponderRelease, onResponderTerminate: ref.touchableHandleResponderTerminate,
onResponderTerminate: ref.touchableHandleResponderTerminate, });
}); }
}
if (responsible) { if (responsible) {
extractedProps.responsible = true; 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"; import extractLengthList from "./extractLengthList";
const caps = { const caps = {
butt: 0, butt: 0,
square: 2, square: 2,
round: 1, round: 1,
}; };
const joins = { const joins = {
miter: 0, miter: 0,
bevel: 2, bevel: 2,
round: 1, round: 1,
}; };
const strokeProps = [ const strokeProps = [
"stroke", "stroke",
"strokeWidth", "strokeWidth",
"strokeOpacity", "strokeOpacity",
"strokeDasharray", "strokeDasharray",
"strokeDashoffset", "strokeDashoffset",
"strokeLinecap", "strokeLinecap",
"strokeLinejoin", "strokeLinejoin",
"strokeMiterlimit", "strokeMiterlimit",
]; ];
const numStrokeProps = strokeProps.length; const numStrokeProps = strokeProps.length;
export default function extractStroke(props, styleProperties) { export default function extractStroke(props, styleProperties) {
for (let i = 0; i < numStrokeProps; i++) { for (let i = 0; i < numStrokeProps; i++) {
const name = strokeProps[i]; const name = strokeProps[i];
if (props.hasOwnProperty(name)) { if (props.hasOwnProperty(name)) {
styleProperties.push(name); styleProperties.push(name);
}
} }
}
const { stroke, strokeWidth = 1, strokeDasharray } = props; const { stroke, strokeWidth = 1, strokeDasharray } = props;
const strokeDash = const strokeDash =
!strokeDasharray || strokeDasharray === "none" !strokeDasharray || strokeDasharray === "none"
? null ? null
: extractLengthList(strokeDasharray); : extractLengthList(strokeDasharray);
return { return {
stroke: extractBrush(stroke), stroke: extractBrush(stroke),
strokeOpacity: extractOpacity(props.strokeOpacity), strokeOpacity: extractOpacity(props.strokeOpacity),
strokeLinecap: caps[props.strokeLinecap] || 0, strokeLinecap: caps[props.strokeLinecap] || 0,
strokeLinejoin: joins[props.strokeLinejoin] || 0, strokeLinejoin: joins[props.strokeLinejoin] || 0,
strokeDasharray: strokeDasharray:
strokeDash && strokeDash.length % 2 === 1 strokeDash && strokeDash.length % 2 === 1
? strokeDash.concat(strokeDash) ? strokeDash.concat(strokeDash)
: strokeDash, : strokeDash,
strokeWidth, strokeWidth,
strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null, strokeDashoffset: strokeDasharray ? +props.strokeDashoffset || 0 : null,
strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4, strokeMiterlimit: parseFloat(props.strokeMiterlimit) || 4,
}; };
} }

200
lib/extract/extractText.js
View File

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

152
lib/extract/extractTransform.js
View File

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

76
lib/extract/extractViewBox.js
View File

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

4
lib/units.js
View File

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

18
lib/util.js
View File

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