react-art/lib/Rectangle.art.js

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).

/**
 * 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({displayName: "Rectangle",

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

});

module.exports = Rectangle;