Pull in react-art/lib/{Circle,Rectangle,Wedge}.art (#10629)
* Import react-art/lib/{Circle,Rectangle,Wedge}.art Copied from react-art@0.15.1 built files. * Changes to built files to make ART shapes work Test Plan: Opened the fixture. React logo shows up with its normal dot, now rendered by a `<Circle />`.
Sophie Alpert committed
Sep 6, 2017 at 15:10 UTC
7ff922cf2a0be52941e5b033470d72c5ff81102e
6 files changed
+388
-4
.eslintignore
+1
@@ -1,6 +1,7 @@
1
# We can probably lint these later but not important at this point
2
src/renderers/art
3
src/__mocks__/vendor
4
+packages/react-art/lib
5
# But not in docs/_js/examples/*
6
docs/_js/*.js
7
docs/js/
fixtures/art/VectorWidget.js
+4
-3
@@ -8,6 +8,7 @@
8
*/
9
'use strict';
10
11
+var Circle = require('react-art/lib/Circle.art');
12
var React = require('react');
13
var ReactART = require('react-art');
14
var Group = ReactART.Group;
@@ -93,7 +94,9 @@ class VectorWidget extends React.Component {
94
<Shape fill="#A6BD8A" d={GREEN_DOT_PATH} />
95
<Group x={55} y={29}>
96
<Group rotation={rotation} originX={84} originY={89}>
96
- <Shape fill="#FFFFFF" d={CENTER_DOT_PATH} />
97
+ <Group x={84} y={89}>
98
+ <Circle fill="#FFFFFF" radius={16} />
99
+ </Group>
100
<Group>
101
<Shape d={RING_ONE_PATH} stroke="#FFFFFF" strokeWidth={8} />
102
<Shape
@@ -129,8 +132,6 @@ var YELLOW_DOT_PATH =
132
'M31.5,17 C35.0898511,17 38,14.0898511 38,10.5 C38,6.91014895 35.0898511,4 31.5,4 C27.9101489,4 25,6.91014895 25,10.5 C25,14.0898511 27.9101489,17 31.5,17 Z M31.5,17';
133
var GREEN_DOT_PATH =
134
'M50.5,17 C54.0898511,17 57,14.0898511 57,10.5 C57,6.91014895 54.0898511,4 50.5,4 C46.9101489,4 44,6.91014895 44,10.5 C44,14.0898511 46.9101489,17 50.5,17 Z M50.5,17';
132
-var CENTER_DOT_PATH =
133
- 'M84,105 C92.8365564,105 100,97.8365564 100,89 C100,80.1634436 92.8365564,73 84,73 C75.1634436,73 68,80.1634436 68,89 C68,97.8365564 75.1634436,105 84,105 Z M84,105';
135
var RING_ONE_PATH =
136
'M84,121 C130.391921,121 168,106.673113 168,89 C168,71.3268871 130.391921,57 84,57 C37.6080787,57 0,71.3268871 0,89 C0,106.673113 37.6080787,121 84,121 Z M84,121';
137
var RING_TWO_PATH =
packages/react-art/lib/Circle.art.js
new
+54
@@ -0,0 +1,54 @@
1
+'use strict';
2
+
3
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
4
+
5
+/**
6
+ * Copyright (c) 2013-present Facebook, Inc.
7
+ * All rights reserved.
8
+ *
9
+ * This source code is licensed under the BSD-style license found in the
10
+ * LICENSE file in the root directory of this source tree. An additional grant
11
+ * of patent rights can be found in the PATENTS file in the same directory.
12
+ *
13
+ * @providesModule Circle.art
14
+ * @typechecks
15
+ *
16
+ * Example usage:
17
+ * <Circle
18
+ * radius={10}
19
+ * stroke="green"
20
+ * strokeWidth={3}
21
+ * fill="blue"
22
+ * />
23
+ *
24
+ */
25
+
26
+var PropTypes = require('prop-types');
27
+var React = require('react');
28
+var ReactART = require('..');
29
+
30
+var createReactClass = require('create-react-class');
31
+
32
+var Path = ReactART.Path;
33
+var Shape = ReactART.Shape;
34
+
35
+/**
36
+ * Circle is a React component for drawing circles. Like other ReactART
37
+ * components, it must be used in a <Surface>.
38
+ */
39
+var Circle = createReactClass({
40
+ displayName: 'Circle',
41
+
42
+ propTypes: {
43
+ radius: PropTypes.number.isRequired
44
+ },
45
+
46
+ render: function render() {
47
+ var radius = this.props.radius;
48
+
49
+ var path = Path().moveTo(0, -radius).arc(0, radius * 2, radius).arc(0, radius * -2, radius).close();
50
+ return React.createElement(Shape, _extends({}, this.props, { d: path }));
51
+ }
52
+});
53
+
54
+module.exports = Circle;
packages/react-art/lib/Rectangle.art.js
new
+138
@@ -0,0 +1,138 @@
1
+'use strict';
2
+
3
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
4
+
5
+/**
6
+ * Copyright (c) 2013-present Facebook, Inc.
7
+ * All rights reserved.
8
+ *
9
+ * This source code is licensed under the BSD-style license found in the
10
+ * LICENSE file in the root directory of this source tree. An additional grant
11
+ * of patent rights can be found in the PATENTS file in the same directory.
12
+ *
13
+ * @providesModule Rectangle.art
14
+ * @typechecks
15
+ *
16
+ * Example usage:
17
+ * <Rectangle
18
+ * width={50}
19
+ * height={50}
20
+ * stroke="green"
21
+ * fill="blue"
22
+ * />
23
+ *
24
+ * Additional optional properties:
25
+ * (Number) radius
26
+ * (Number) radiusTopLeft
27
+ * (Number) radiusTopRight
28
+ * (Number) radiusBottomLeft
29
+ * (Number) radiusBottomRight
30
+ *
31
+ */
32
+
33
+var PropTypes = require('prop-types');
34
+var React = require('react');
35
+var ReactART = require('..');
36
+
37
+var createReactClass = require('create-react-class');
38
+
39
+var Shape = ReactART.Shape;
40
+var Path = ReactART.Path;
41
+
42
+/**
43
+ * Rectangle is a React component for drawing rectangles. Like other ReactART
44
+ * components, it must be used in a <Surface>.
45
+ */
46
+var Rectangle = createReactClass({
47
+ displayName: 'Rectangle',
48
+
49
+ propTypes: {
50
+ width: PropTypes.number.isRequired,
51
+ height: PropTypes.number.isRequired,
52
+ radius: PropTypes.number,
53
+ radiusTopLeft: PropTypes.number,
54
+ radiusTopRight: PropTypes.number,
55
+ radiusBottomRight: PropTypes.number,
56
+ radiusBottomLeft: PropTypes.number
57
+ },
58
+
59
+ render: function render() {
60
+ var width = this.props.width;
61
+ var height = this.props.height;
62
+ var radius = this.props.radius ? this.props.radius : 0;
63
+
64
+ // if unspecified, radius(Top|Bottom)(Left|Right) defaults to the radius
65
+ // property
66
+ var tl = this.props.radiusTopLeft ? this.props.radiusTopLeft : radius;
67
+ var tr = this.props.radiusTopRight ? this.props.radiusTopRight : radius;
68
+ var br = this.props.radiusBottomRight ? this.props.radiusBottomRight : radius;
69
+ var bl = this.props.radiusBottomLeft ? this.props.radiusBottomLeft : radius;
70
+
71
+ var path = Path();
72
+
73
+ // for negative width/height, offset the rectangle in the negative x/y
74
+ // direction. for negative radius, just default to 0.
75
+ if (width < 0) {
76
+ path.move(width, 0);
77
+ width = -width;
78
+ }
79
+ if (height < 0) {
80
+ path.move(0, height);
81
+ height = -height;
82
+ }
83
+ if (tl < 0) {
84
+ tl = 0;
85
+ }
86
+ if (tr < 0) {
87
+ tr = 0;
88
+ }
89
+ if (br < 0) {
90
+ br = 0;
91
+ }
92
+ if (bl < 0) {
93
+ bl = 0;
94
+ }
95
+
96
+ // disable border radius if it doesn't fit within the specified
97
+ // width/height
98
+ if (tl + tr > width) {
99
+ tl = 0;tr = 0;
100
+ }
101
+ if (bl + br > width) {
102
+ bl = 0;br = 0;
103
+ }
104
+ if (tl + bl > height) {
105
+ tl = 0;bl = 0;
106
+ }
107
+ if (tr + br > height) {
108
+ tr = 0;br = 0;
109
+ }
110
+
111
+ path.move(0, tl);
112
+
113
+ if (tl > 0) {
114
+ path.arc(tl, -tl);
115
+ }
116
+ path.line(width - (tr + tl), 0);
117
+
118
+ if (tr > 0) {
119
+ path.arc(tr, tr);
120
+ }
121
+ path.line(0, height - (tr + br));
122
+
123
+ if (br > 0) {
124
+ path.arc(-br, br);
125
+ }
126
+ path.line(-width + (br + bl), 0);
127
+
128
+ if (bl > 0) {
129
+ path.arc(-bl, -bl);
130
+ }
131
+ path.line(0, -height + (bl + tl));
132
+
133
+ return React.createElement(Shape, _extends({}, this.props, { d: path }));
134
+ }
135
+
136
+});
137
+
138
+module.exports = Rectangle;
packages/react-art/lib/Wedge.art.js
new
+188
@@ -0,0 +1,188 @@
1
+'use strict';
2
+
3
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
4
+
5
+/**
6
+ * Copyright (c) 2013-present Facebook, Inc.
7
+ * All rights reserved.
8
+ *
9
+ * This source code is licensed under the BSD-style license found in the
10
+ * LICENSE file in the root directory of this source tree. An additional grant
11
+ * of patent rights can be found in the PATENTS file in the same directory.
12
+ *
13
+ * @providesModule Wedge.art
14
+ * @typechecks
15
+ *
16
+ * Example usage:
17
+ * <Wedge
18
+ * outerRadius={50}
19
+ * startAngle={0}
20
+ * endAngle={360}
21
+ * fill="blue"
22
+ * />
23
+ *
24
+ * Additional optional property:
25
+ * (Int) innerRadius
26
+ *
27
+ */
28
+
29
+var PropTypes = require('prop-types');
30
+var React = require('react');
31
+var ReactART = require('..');
32
+
33
+var createReactClass = require('create-react-class');
34
+
35
+var Shape = ReactART.Shape;
36
+var Path = ReactART.Path;
37
+
38
+/**
39
+ * Wedge is a React component for drawing circles, wedges and arcs. Like other
40
+ * ReactART components, it must be used in a <Surface>.
41
+ */
42
+var Wedge = createReactClass({
43
+ displayName: 'Wedge',
44
+
45
+
46
+ propTypes: {
47
+ outerRadius: PropTypes.number.isRequired,
48
+ startAngle: PropTypes.number.isRequired,
49
+ endAngle: PropTypes.number.isRequired,
50
+ innerRadius: PropTypes.number
51
+ },
52
+
53
+ circleRadians: Math.PI * 2,
54
+
55
+ radiansPerDegree: Math.PI / 180,
56
+
57
+ /**
58
+ * _degreesToRadians(degrees)
59
+ *
60
+ * Helper function to convert degrees to radians
61
+ *
62
+ * @param {number} degrees
63
+ * @return {number}
64
+ */
65
+ _degreesToRadians: function _degreesToRadians(degrees) {
66
+ if (degrees !== 0 && degrees % 360 === 0) {
67
+ // 360, 720, etc.
68
+ return this.circleRadians;
69
+ } else {
70
+ return degrees * this.radiansPerDegree % this.circleRadians;
71
+ }
72
+ },
73
+
74
+ /**
75
+ * _createCirclePath(or, ir)
76
+ *
77
+ * Creates the ReactART Path for a complete circle.
78
+ *
79
+ * @param {number} or The outer radius of the circle
80
+ * @param {number} ir The inner radius, greater than zero for a ring
81
+ * @return {object}
82
+ */
83
+ _createCirclePath: function _createCirclePath(or, ir) {
84
+ var path = Path();
85
+
86
+ path.move(0, or).arc(or * 2, 0, or).arc(-or * 2, 0, or);
87
+
88
+ if (ir) {
89
+ path.move(or - ir, 0).counterArc(ir * 2, 0, ir).counterArc(-ir * 2, 0, ir);
90
+ }
91
+
92
+ path.close();
93
+
94
+ return path;
95
+ },
96
+
97
+ /**
98
+ * _createArcPath(sa, ea, ca, or, ir)
99
+ *
100
+ * Creates the ReactART Path for an arc or wedge.
101
+ *
102
+ * @param {number} startAngle The starting degrees relative to 12 o'clock
103
+ * @param {number} endAngle The ending degrees relative to 12 o'clock
104
+ * @param {number} or The outer radius in pixels
105
+ * @param {number} ir The inner radius in pixels, greater than zero for an arc
106
+ * @return {object}
107
+ */
108
+ _createArcPath: function _createArcPath(startAngle, endAngle, or, ir) {
109
+ var path = Path();
110
+
111
+ // angles in radians
112
+ var sa = this._degreesToRadians(startAngle);
113
+ var ea = this._degreesToRadians(endAngle);
114
+
115
+ // central arc angle in radians
116
+ var ca = sa > ea ? this.circleRadians - sa + ea : ea - sa;
117
+
118
+ // cached sine and cosine values
119
+ var ss = Math.sin(sa);
120
+ var es = Math.sin(ea);
121
+ var sc = Math.cos(sa);
122
+ var ec = Math.cos(ea);
123
+
124
+ // cached differences
125
+ var ds = es - ss;
126
+ var dc = ec - sc;
127
+ var dr = ir - or;
128
+
129
+ // if the angle is over pi radians (180 degrees)
130
+ // we will need to let the drawing method know.
131
+ var large = ca > Math.PI;
132
+
133
+ // TODO (sema) Please improve theses comments to make the math
134
+ // more understandable.
135
+ //
136
+ // Formula for a point on a circle at a specific angle with a center
137
+ // at (0, 0):
138
+ // x = radius * Math.sin(radians)
139
+ // y = radius * Math.cos(radians)
140
+ //
141
+ // For our starting point, we offset the formula using the outer
142
+ // radius because our origin is at (top, left).
143
+ // In typical web layout fashion, we are drawing in quadrant IV
144
+ // (a.k.a. Southeast) where x is positive and y is negative.
145
+ //
146
+ // The arguments for path.arc and path.counterArc used below are:
147
+ // (endX, endY, radiusX, radiusY, largeAngle)
148
+
149
+ path.move(or + or * ss, or - or * sc) // move to starting point
150
+ .arc(or * ds, or * -dc, or, or, large) // outer arc
151
+ .line(dr * es, dr * -ec); // width of arc or wedge
152
+
153
+ if (ir) {
154
+ path.counterArc(ir * -ds, ir * dc, ir, ir, large); // inner arc
155
+ }
156
+
157
+ return path;
158
+ },
159
+
160
+ render: function render() {
161
+ // angles are provided in degrees
162
+ var startAngle = this.props.startAngle;
163
+ var endAngle = this.props.endAngle;
164
+ if (startAngle - endAngle === 0) {
165
+ return;
166
+ }
167
+
168
+ // radii are provided in pixels
169
+ var innerRadius = this.props.innerRadius || 0;
170
+ var outerRadius = this.props.outerRadius;
171
+
172
+ // sorted radii
173
+ var ir = Math.min(innerRadius, outerRadius);
174
+ var or = Math.max(innerRadius, outerRadius);
175
+
176
+ var path;
177
+ if (endAngle >= startAngle + 360) {
178
+ path = this._createCirclePath(or, ir);
179
+ } else {
180
+ path = this._createArcPath(startAngle, endAngle, or, ir);
181
+ }
182
+
183
+ return React.createElement(Shape, _extends({}, this.props, { d: path }));
184
+ }
185
+
186
+});
187
+
188
+module.exports = Wedge;
packages/react-art/package.json
+3
-1
@@ -18,9 +18,11 @@
18
},
19
"homepage": "https://facebook.github.io/react/",
20
"dependencies": {
21
+ "create-react-class": "^15.6.0",
22
"fbjs": "^0.8.9",
23
"loose-envify": "^1.1.0",
23
- "object-assign": "^4.1.0"
24
+ "object-assign": "^4.1.0",
25
+ "prop-types": "^15.5.6"
26
},
27
"peerDependencies": {
28
"react": "^16.0.0-beta.5"