Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pull in react-art/lib/{Circle,Rectangle,Wedge}.art #10629

Merged
merged 2 commits into from
Sep 6, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# We can probably lint these later but not important at this point
src/renderers/art
src/__mocks__/vendor
packages/react-art/lib
# But not in docs/_js/examples/*
docs/_js/*.js
docs/js/
Expand Down
7 changes: 4 additions & 3 deletions fixtures/art/VectorWidget.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
*/
'use strict';

var Circle = require('react-art/lib/Circle.art');
var React = require('react');
var ReactART = require('react-art');
var Group = ReactART.Group;
Expand Down Expand Up @@ -93,7 +94,9 @@ class VectorWidget extends React.Component {
<Shape fill="#A6BD8A" d={GREEN_DOT_PATH} />
<Group x={55} y={29}>
<Group rotation={rotation} originX={84} originY={89}>
<Shape fill="#FFFFFF" d={CENTER_DOT_PATH} />
<Group x={84} y={89}>
<Circle fill="#FFFFFF" radius={16} />
</Group>
<Group>
<Shape d={RING_ONE_PATH} stroke="#FFFFFF" strokeWidth={8} />
<Shape
Expand Down Expand Up @@ -129,8 +132,6 @@ var YELLOW_DOT_PATH =
'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';
var GREEN_DOT_PATH =
'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';
var CENTER_DOT_PATH =
'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';
var RING_ONE_PATH =
'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';
var RING_TWO_PATH =
Expand Down
54 changes: 54 additions & 0 deletions packages/react-art/lib/Circle.art.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
'use strict';

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; };

/**
* Copyright (c) 2013-present 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 PropTypes = require('prop-types');
var React = require('react');
var ReactART = require('..');

var createReactClass = require('create-react-class');

var Path = ReactART.Path;
var Shape = ReactART.Shape;

/**
* Circle is a React component for drawing circles. Like other ReactART
* components, it must be used in a <Surface>.
*/
var Circle = createReactClass({
displayName: 'Circle',

propTypes: {
radius: PropTypes.number.isRequired
},

render: function render() {
var radius = this.props.radius;

var path = Path().moveTo(0, -radius).arc(0, radius * 2, radius).arc(0, radius * -2, radius).close();
return React.createElement(Shape, _extends({}, this.props, { d: path }));
}
});

module.exports = Circle;
138 changes: 138 additions & 0 deletions packages/react-art/lib/Rectangle.art.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
'use strict';

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; };

/**
* Copyright (c) 2013-present 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 PropTypes = require('prop-types');
var React = require('react');
var ReactART = require('..');

var createReactClass = require('create-react-class');

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 = createReactClass({
displayName: 'Rectangle',

propTypes: {
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
radius: PropTypes.number,
radiusTopLeft: PropTypes.number,
radiusTopRight: PropTypes.number,
radiusBottomRight: PropTypes.number,
radiusBottomLeft: PropTypes.number
},

render: function render() {
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 React.createElement(Shape, _extends({}, this.props, { d: path }));
}

});

module.exports = Rectangle;
Loading