'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _group = require('@vx/group');

var _hierarchy = require('@vx/hierarchy');

var _gradient = require('@vx/gradient');

var _d3Hierarchy = require('d3-hierarchy');

var _d3Shape = require('d3-shape');

var _shape = require('@vx/shape');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/components/tiles/linkTypes.js';


var data = {
  name: 'T',
  children: [{
    name: 'A',
    children: [{ name: 'A1' }, { name: 'A2' }, { name: 'A3' }, {
      name: 'C',
      children: [{
        name: 'C1'
      }, {
        name: 'D',
        children: [{
          name: 'D1'
        }, {
          name: 'D2'
        }, {
          name: 'D3'
        }]
      }]
    }]
  }, { name: 'Z' }, {
    name: 'B',
    children: [{ name: 'B1' }, { name: 'B2' }, { name: 'B3' }]
  }]
};

var _class = function (_React$Component) {
  (0, _inherits3.default)(_class, _React$Component);

  function _class() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, _class);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = _class.__proto__ || (0, _getPrototypeOf2.default)(_class)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      layout: 'cartesian',
      orientation: 'horizontal',
      linkType: 'diagonal',
      stepPercent: 0.5
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(_class, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          width = _props.width,
          height = _props.height,
          _props$events = _props.events,
          events = _props$events === undefined ? false : _props$events,
          _props$margin = _props.margin,
          margin = _props$margin === undefined ? {
        top: 30,
        left: 30,
        right: 30,
        bottom: 30
      } : _props$margin;
      var _state = this.state,
          layout = _state.layout,
          orientation = _state.orientation,
          linkType = _state.linkType,
          stepPercent = _state.stepPercent;

      if (width < 10) return null;

      var innerWidth = width - margin.left - margin.right;
      var innerHeight = height - margin.top - margin.bottom;

      var origin = void 0;
      var sizeWidth = void 0;
      var sizeHeight = void 0;

      if (layout === 'polar') {
        origin = {
          x: innerWidth / 2,
          y: innerHeight / 2
        };
        sizeWidth = 2 * Math.PI;
        sizeHeight = Math.min(innerWidth, innerHeight) / 2;
      } else {
        origin = { x: 0, y: 0 };
        if (orientation === 'vertical') {
          sizeWidth = innerWidth;
          sizeHeight = innerHeight;
        } else {
          sizeWidth = innerHeight;
          sizeHeight = innerWidth;
        }
      }

      return _react2.default.createElement('div', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 115
        }
      }, _react2.default.createElement('div', { style: { color: 'rgba(38, 150, 136, 1.000)', fontSize: 10 }, __source: {
          fileName: _jsxFileName,
          lineNumber: 116
        }
      }, _react2.default.createElement('label', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 117
        }
      }, 'layout:'), _react2.default.createElement('select', {
        onClick: function onClick(e) {
          return e.stopPropagation();
        },
        onChange: function onChange(e) {
          return _this2.setState({ layout: e.target.value });
        },
        value: layout,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 118
        }
      }, _react2.default.createElement('option', { value: 'cartesian', __source: {
          fileName: _jsxFileName,
          lineNumber: 123
        }
      }, 'cartesian'), _react2.default.createElement('option', { value: 'polar', __source: {
          fileName: _jsxFileName,
          lineNumber: 124
        }
      }, 'polar')), _react2.default.createElement('label', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 127
        }
      }, 'orientation:'), _react2.default.createElement('select', {
        onClick: function onClick(e) {
          return e.stopPropagation();
        },
        onChange: function onChange(e) {
          return _this2.setState({ orientation: e.target.value });
        },
        value: orientation,
        disabled: layout === 'polar',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 128
        }
      }, _react2.default.createElement('option', { value: 'vertical', __source: {
          fileName: _jsxFileName,
          lineNumber: 134
        }
      }, 'vertical'), _react2.default.createElement('option', { value: 'horizontal', __source: {
          fileName: _jsxFileName,
          lineNumber: 135
        }
      }, 'horizontal')), _react2.default.createElement('label', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 138
        }
      }, 'link:'), _react2.default.createElement('select', {
        onClick: function onClick(e) {
          return e.stopPropagation();
        },
        onChange: function onChange(e) {
          return _this2.setState({ linkType: e.target.value });
        },
        value: linkType,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 139
        }
      }, _react2.default.createElement('option', { value: 'diagonal', __source: {
          fileName: _jsxFileName,
          lineNumber: 144
        }
      }, 'diagonal'), _react2.default.createElement('option', { value: 'step', __source: {
          fileName: _jsxFileName,
          lineNumber: 145
        }
      }, 'step'), _react2.default.createElement('option', { value: 'curve', __source: {
          fileName: _jsxFileName,
          lineNumber: 146
        }
      }, 'curve'), _react2.default.createElement('option', { value: 'line', __source: {
          fileName: _jsxFileName,
          lineNumber: 147
        }
      }, 'line')), _react2.default.createElement('label', {
        __source: {
          fileName: _jsxFileName,
          lineNumber: 150
        }
      }, 'step:'), _react2.default.createElement('input', {
        onClick: function onClick(e) {
          return e.stopPropagation();
        },
        type: 'range',
        min: 0,
        max: 1,
        step: 0.1,
        onChange: function onChange(e) {
          return _this2.setState({ stepPercent: e.target.value });
        },
        value: stepPercent,
        disabled: linkType !== 'step' || layout === 'polar',
        __source: {
          fileName: _jsxFileName,
          lineNumber: 151
        }
      })), _react2.default.createElement('svg', { width: width, height: height, __source: {
          fileName: _jsxFileName,
          lineNumber: 163
        }
      }, _react2.default.createElement(_gradient.LinearGradient, { id: 'lg', from: '#fd9b93', to: '#fe6e9e', __source: {
          fileName: _jsxFileName,
          lineNumber: 164
        }
      }), _react2.default.createElement('rect', { width: width, height: height, rx: 14, fill: '#272b4d', __source: {
          fileName: _jsxFileName,
          lineNumber: 165
        }
      }), _react2.default.createElement(_hierarchy.Tree, {
        top: margin.top,
        left: margin.left,
        root: (0, _d3Hierarchy.hierarchy)(data, function (d) {
          return d.isExpanded ? null : d.children;
        }),
        size: [sizeWidth, sizeHeight],
        separation: function separation(a, b) {
          return (a.parent == b.parent ? 1 : 0.5) / a.depth;
        },
        __source: {
          fileName: _jsxFileName,
          lineNumber: 166
        }
      }, function (_ref2) {
        var data = _ref2.data;
        return _react2.default.createElement(_group.Group, { top: origin.y, left: origin.x, __source: {
            fileName: _jsxFileName,
            lineNumber: 174
          }
        }, data.links().map(function (link, i) {
          var LinkComponent = void 0;

          if (layout === 'polar') {
            if (linkType === 'step') {
              LinkComponent = _shape.LinkRadialStep;
            } else if (linkType === 'curve') {
              LinkComponent = _shape.LinkRadialCurve;
            } else if (linkType === 'line') {
              LinkComponent = _shape.LinkRadialLine;
            } else {
              LinkComponent = _shape.LinkRadial;
            }
          } else {
            if (orientation === 'vertical') {
              if (linkType === 'step') {
                LinkComponent = _shape.LinkVerticalStep;
              } else if (linkType === 'curve') {
                LinkComponent = _shape.LinkVerticalCurve;
              } else if (linkType === 'line') {
                LinkComponent = _shape.LinkVerticalLine;
              } else {
                LinkComponent = _shape.LinkVertical;
              }
            } else {
              if (linkType === 'step') {
                LinkComponent = _shape.LinkHorizontalStep;
              } else if (linkType === 'curve') {
                LinkComponent = _shape.LinkHorizontalCurve;
              } else if (linkType === 'line') {
                LinkComponent = _shape.LinkHorizontalLine;
              } else {
                LinkComponent = _shape.LinkHorizontal;
              }
            }
          }

          return _react2.default.createElement(LinkComponent, {
            data: link,
            percent: +stepPercent,
            stroke: '#374469',
            strokeWidth: '1',
            fill: 'none',
            key: i,
            onClick: function onClick(data) {
              return function (event) {
                console.log(data);
              };
            },
            __source: {
              fileName: _jsxFileName,
              lineNumber: 213
            }
          });
        }), data.descendants().map(function (node, key) {
          var width = 40;
          var height = 20;

          var top = void 0;
          var left = void 0;
          if (layout === 'polar') {
            var _pointRadial = (0, _d3Shape.pointRadial)(node.x, node.y),
                _pointRadial2 = (0, _slicedToArray3.default)(_pointRadial, 2),
                radialX = _pointRadial2[0],
                radialY = _pointRadial2[1];

            top = radialY;
            left = radialX;
          } else {
            if (orientation === 'vertical') {
              top = node.y;
              left = node.x;
            } else {
              top = node.x;
              left = node.y;
            }
          }

          return _react2.default.createElement(_group.Group, { top: top, left: left, key: key, __source: {
              fileName: _jsxFileName,
              lineNumber: 248
            }
          }, node.depth === 0 && _react2.default.createElement('circle', {
            r: 12,
            fill: 'url(\'#lg\')',
            onClick: function onClick() {
              node.data.isExpanded = !node.data.isExpanded;
              console.log(node);
              _this2.forceUpdate();
            },
            __source: {
              fileName: _jsxFileName,
              lineNumber: 250
            }
          }), node.depth !== 0 && _react2.default.createElement('rect', {
            height: height,
            width: width,
            y: -height / 2,
            x: -width / 2,
            fill: '#272b4d',
            stroke: node.data.children ? '#03c0dc' : '#26deb0',
            strokeWidth: 1,
            strokeDasharray: !node.data.children ? '2,2' : '0',
            strokeOpacity: !node.data.children ? 0.6 : 1,
            rx: !node.data.children ? 10 : 0,
            onClick: function onClick() {
              node.data.isExpanded = !node.data.isExpanded;
              console.log(node);
              _this2.forceUpdate();
            },
            __source: {
              fileName: _jsxFileName,
              lineNumber: 261
            }
          }), _react2.default.createElement('text', {
            dy: '.33em',
            fontSize: 9,
            fontFamily: 'Arial',
            textAnchor: 'middle',
            style: { pointerEvents: 'none' },
            fill: node.depth === 0 ? '#71248e' : node.children ? 'white' : '#26deb0',
            __source: {
              fileName: _jsxFileName,
              lineNumber: 279
            }
          }, node.data.name));
        }));
      })));
    }
  }]);

  return _class;
}(_react2.default.Component);

exports.default = _class;
//# sourceMappingURL=data:application/json;charset=utf-8;base64, 