Merge pull request #30 from sebmarkbage/update

Add some higher order shapes and bump versions

Author: zpao

package.json

@@ -1,7 +1,7 @@
 {
  "name": "react-art",
  "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
- "version": "0.12.0-alpha",
+ "version": "0.12.0",
  "keywords": [
  "react",
  "art",
@@ -21,11 +21,12 @@
  "art": "~0.9.0"
  },
  "peerDependencies": {
- "react": "^0.11.1"
+ "react": "^0.12.0"
  },
  "devDependencies": {
  "jest": "~0.1.37",
- "react-tools": "^0.10.0"
+ "react": "^0.12.0",
+ "react-tools": "^0.12.0"
  },
  "engines": {
  "node": ">=0.10.0"

shapes/circle.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+module.exports = require('../src/Circle.art');

shapes/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var Circle = require('../src/Circle.art');
+var Rectangle = require('../src/Rectangle.art');
+var Wedge = require('../src/Wedge.art');
+
+module.exports = {
+ Circle: Circle,
+ Rectangle: Rectangle,
+ Wedge: Wedge
+};

shapes/rectangle.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+module.exports = require('../src/Rectangle.art');

shapes/wedge.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+module.exports = require('../src/Wedge.art');

src/Circle.art.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Circle.art
+ * @typechecks
+ *
+ * Example usage:
+ * <Circle
+ * radius={10}
+ * stroke="green"
+ * strokeWidth={3}
+ * fill="blue"
+ * />
+ *
+ */
+
+var React = require('React');
+var ReactART = require('ReactART');
+
+var Props = React.PropTypes;
+var Shape = ReactART.Shape;
+var Path = ReactART.Path;
+
+/**
+ * Circle is a React component for drawing circles. Like other ReactART
+ * components, it must be used in a <Surface>.
+ */
+var Circle = React.createClass({
+
+ propTypes: {
+ radius: Props.number.isRequired
+ },
+
+ render: function() {
+ var radius = this.props.radius;
+
+ var path = Path().moveTo(0, -radius)
+ .arc(0, radius * 2, radius)
+ .arc(0, radius * -2, radius)
+ .close();
+ return <Shape {...this.props} d={path} />;
+ }
+
+});
+
+module.exports = Circle;

src/Rectangle.art.js

@@ -0,0 +1,108 @@
+/**
+ * Copyright 2013-2014 Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule Rectangle.art
+ * @typechecks
+ *
+ * Example usage:
+ * <Rectangle
+ * width={50}
+ * height={50}
+ * stroke="green"
+ * fill="blue"
+ * />
+ *
+ * Additional optional properties:
+ * (Number) radius
+ * (Number) radiusTopLeft
+ * (Number) radiusTopRight
+ * (Number) radiusBottomLeft
+ * (Number) radiusBottomRight
+ *
+ */
+
+var React = require('React');
+var ReactART = require('ReactART');
+
+var Props = React.PropTypes;
+var Shape = ReactART.Shape;
+var Path = ReactART.Path;
+
+/**
+ * Rectangle is a React component for drawing rectangles. Like other ReactART
+ * components, it must be used in a <Surface>.
+ */
+var Rectangle = React.createClass({
+
+ propTypes: {
+ width: Props.number.isRequired,
+ height: Props.number.isRequired,
+ radius: Props.number,
+ radiusTopLeft: Props.number,
+ radiusTopRight: Props.number,
+ radiusBottomRight: Props.number,
+ radiusBottomLeft: Props.number
+ },
+
+ render: function() {
+ var width = this.props.width;
+ var height = this.props.height;
+ var radius = this.props.radius ? this.props.radius : 0;
+
+ // if unspecified, radius(Top|Bottom)(Left|Right) defaults to the radius
+ // property
+ var tl = this.props.radiusTopLeft ? this.props.radiusTopLeft : radius;
+ var tr = this.props.radiusTopRight ? this.props.radiusTopRight : radius;
+ var br = this.props.radiusBottomRight ?
+ this.props.radiusBottomRight : radius;
+ var bl = this.props.radiusBottomLeft ? this.props.radiusBottomLeft : radius;
+
+ var path = Path();
+
+ // for negative width/height, offset the rectangle in the negative x/y
+ // direction. for negative radius, just default to 0.
+ if (width < 0) {
+ path.move(width, 0);
+ width = -width;
+ }
+ if (height < 0) {
+ path.move(0, height);
+ height = -height;
+ }
+ if (tl < 0) { tl = 0; }
+ if (tr < 0) { tr = 0; }
+ if (br < 0) { br = 0; }
+ if (bl < 0) { bl = 0; }
+
+ // disable border radius if it doesn't fit within the specified
+ // width/height
+ if (tl + tr > width) { tl = 0; tr = 0; }
+ if (bl + br > width) { bl = 0; br = 0; }
+ if (tl + bl > height) { tl = 0; bl = 0; }
+ if (tr + br > height) { tr = 0; br = 0; }
+
+ path.move(0, tl);
+
+ if (tl > 0) { path.arc(tl, -tl); }
+ path.line(width - (tr + tl), 0);
+
+ if (tr > 0) { path.arc(tr, tr); }
+ path.line(0, height - (tr + br));
+
+ if (br > 0) { path.arc(-br, br); }
+ path.line(- width + (br + bl), 0);
+
+ if (bl > 0) { path.arc(-bl, -bl); }
+ path.line(0, - height + (bl + tl));
+
+ return <Shape {...this.props} d={path} />;
+ }
+
+});
+
+module.exports = Rectangle;