'use strict';

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

var _objectDestructuringEmpty2 = require('babel-runtime/helpers/objectDestructuringEmpty');

var _objectDestructuringEmpty3 = _interopRequireDefault(_objectDestructuringEmpty2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _linkTypes = require('../components/tiles/linkTypes');

var _linkTypes2 = _interopRequireDefault(_linkTypes);

var _show = require('../components/show');

var _show2 = _interopRequireDefault(_show);

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

var _jsxFileName = '/Users/hshoff/code/vx/packages/vx-demo/pages/linkTypes.js?entry';

exports.default = function (_ref) {
  (0, _objectDestructuringEmpty3.default)(_ref);

  return _react2.default.createElement(_show2.default, {
    events: true,
    title: 'Link Types',
    component: _linkTypes2.default,
    margin: {
      top: 40,
      left: 40,
      right: 40,
      bottom: 40
    },
    __source: {
      fileName: _jsxFileName,
      lineNumber: 7
    }
  }, 'import React from \'react\';\nimport { Group } from \'@vx/group\';\nimport { Tree } from \'@vx/hierarchy\';\nimport { LinearGradient } from \'@vx/gradient\';\nimport { hierarchy } from \'d3-hierarchy\';\nimport { pointRadial } from \'d3-shape\';\n\nimport {\n  LinkHorizontal, LinkVertical, LinkRadial,\n  LinkHorizontalStep, LinkVerticalStep, LinkRadialStep,\n  LinkHorizontalCurve, LinkVerticalCurve, LinkRadialCurve,\n  LinkHorizontalLine, LinkVerticalLine, LinkRadialLine\n} from \'@vx/shape\';\n\nconst data = {\n  name: \'T\',\n  children: [\n    {\n      name: \'A\',\n      children: [\n        { name: \'A1\' },\n        { name: \'A2\' },\n        { name: \'A3\' },\n        {\n          name: \'C\',\n          children: [\n            {\n              name: \'C1\',\n            },\n            {\n              name: \'D\',\n              children: [\n                {\n                  name: \'D1\',\n                },\n                {\n                  name: \'D2\',\n                },\n                {\n                  name: \'D3\',\n                },\n              ],\n            },\n          ],\n        },\n      ],\n    },\n    { name: \'Z\' },\n    {\n      name: \'B\',\n      children: [{ name: \'B1\' }, { name: \'B2\' }, { name: \'B3\' }],\n    },\n  ],\n};\n\nexport default class extends React.Component {\n  state = {\n    layout: \'cartesian\',\n    orientation: \'horizontal\',\n    linkType: \'diagonal\',\n    stepPercent: 0.5\n  };\n\n  render() {\n    const {\n      // data,\n      width,\n      height,\n      events = false,\n      margin = {\n        top: 30,\n        left: 30,\n        right: 30,\n        bottom: 30\n      }\n    } = this.props;\n    const { layout, orientation, linkType, stepPercent } = this.state;\n\n    if (width < 10) return null;\n\n    const innerWidth = width - margin.left - margin.right;\n    const innerHeight = height - margin.top - margin.bottom;\n\n    let origin;\n    let sizeWidth;\n    let sizeHeight;\n\n    if (layout === \'polar\') {\n      origin = {\n        x: innerWidth / 2,\n        y: innerHeight / 2\n      }\n      sizeWidth = 2 * Math.PI\n      sizeHeight = Math.min(innerWidth, innerHeight) / 2\n    } else {\n      origin = { x: 0, y: 0 };\n      if (orientation === \'vertical\') {\n        sizeWidth = innerWidth;\n        sizeHeight = innerHeight;\n      } else {\n        sizeWidth = innerHeight;\n        sizeHeight = innerWidth;\n      }\n    }\n\n    return (\n      <div>\n        <div>\n          <label>layout:</label>\n          <select onChange={e => this.setState({ layout: e.target.value })} value={layout}>\n            <option value="cartesian">cartesian</option>\n            <option value="polar">polar</option>\n          </select>\n\n          <label>orientation:</label>\n          <select onChange={e => this.setState({ orientation: e.target.value })} value={orientation} disabled={layout === \'polar\'}>\n            <option value="vertical">vertical</option>\n            <option value="horizontal">horizontal</option>\n          </select>\n\n          <label>link:</label>\n          <select onChange={e => this.setState({ linkType: e.target.value })} value={linkType}>\n            <option value="diagonal">diagonal</option>\n            <option value="step">step</option>\n            <option value="curve">curve</option>\n            <option value="line">line</option>\n          </select>\n\n          <label>step:</label>\n          <input type="range" min={0} max={1} step={.1} onChange={e => this.setState({ stepPercent: e.target.value })} value={stepPercent} disabled={linkType !== \'step\' || layout === \'polar\'} />\n        </div>\n\n        <svg width={width} height={height}>\n          <LinearGradient id="lg" from="#fd9b93" to="#fe6e9e" />\n          <rect width={width} height={height} rx={14} fill="#272b4d" />\n          <Tree\n            top={margin.top}\n            left={margin.left}\n            root={hierarchy(data, d => (d.isExpanded ? d.children : null))}\n            size={[\n              sizeWidth,\n              sizeHeight\n            ]}\n            separation={(a, b) => (a.parent == b.parent ? 1 : .5) / a.depth}\n          >\n            {({ data }) => (\n              <Group\n                top={origin.y}\n                left={origin.x}\n              >\n                {data.links().map((link, i) => {\n\n                  let LinkComponent;\n\n                  if (layout === \'polar\') {\n                    if (linkType === \'step\') {\n                      LinkComponent = LinkRadialStep;\n                    } else if (linkType === \'curve\') {\n                      LinkComponent = LinkRadialCurve\n                    } else if (linkType === \'line\') {\n                      LinkComponent = LinkRadialLine\n                    } else {\n                      LinkComponent = LinkRadial\n                    }\n                  } else {\n                    if (orientation === \'vertical\') {\n                      if (linkType === \'step\') {\n                        LinkComponent = LinkVerticalStep;\n                      } else if (linkType === \'curve\') {\n                        LinkComponent = LinkVerticalCurve\n                      } else if (linkType === \'line\') {\n                        LinkComponent = LinkVerticalLine\n                      } else {\n                        LinkComponent = LinkVertical;\n                      }\n                    } else {\n                      if (linkType === \'step\') {\n                        LinkComponent = LinkHorizontalStep;\n                      } else if (linkType === \'curve\') {\n                        LinkComponent = LinkHorizontalCurve\n                      } else if (linkType === \'line\') {\n                        LinkComponent = LinkHorizontalLine\n                      } else {\n                        LinkComponent = LinkHorizontal;\n                      }\n                    }\n                  }\n\n                  return (\n                    <LinkComponent\n                      data={link}\n                      percent={stepPercent}\n                      stroke="#374469"\n                      strokeWidth="1"\n                      fill="none"\n                      key={i}\n                    />\n                  )\n                })}\n\n                {data.descendants().map((node, key) => {\n                  const width = 40;\n                  const height = 20;\n\n                  let top;\n                  let left;\n                  if (layout === \'polar\') {\n                    const [radialX, radialY] = pointRadial(node.x, node.y);\n                    top = radialY;\n                    left = radialX;\n                  } else {\n                    if (orientation === \'vertical\') {\n                      top = node.y;\n                      left = node.x;\n                    } else {\n                      top = node.x;\n                      left = node.y;\n                    }\n                  }\n\n                  return (\n                    <Group top={top} left={left} key={key}>\n                      {node.depth === 0 && (\n                        <circle\n                          r={12}\n                          fill="url(\'#lg\')"\n                          onClick={() => {\n                            node.data.isExpanded = !node.data.isExpanded;\n                            console.log(node);\n                            this.forceUpdate();\n                          }}\n                        />\n                      )}\n                      {node.depth !== 0 && (\n                        <rect\n                          height={height}\n                          width={width}\n                          y={-height / 2}\n                          x={-width / 2}\n                          fill={\'#272b4d\'}\n                          stroke={node.data.children ? \'#03c0dc\' : \'#26deb0\'}\n                          strokeWidth={1}\n                          strokeDasharray={!node.data.children ? \'2,2\' : \'0\'}\n                          strokeOpacity={!node.data.children ? 0.6 : 1}\n                          rx={!node.data.children ? 10 : 0}\n                          onClick={() => {\n                            node.data.isExpanded = !node.data.isExpanded;\n                            console.log(node);\n                            this.forceUpdate();\n                          }}\n                        />\n                      )}\n                      <text\n                        dy={\'.33em\'}\n                        fontSize={9}\n                        fontFamily="Arial"\n                        textAnchor={\'middle\'}\n                        style={{ pointerEvents: \'none\' }}\n                        fill={\n                          node.depth === 0 ? (\n                            \'#71248e\'\n                          ) : node.children ? (\n                            \'white\'\n                          ) : (\n                            \'#26deb0\'\n                          )\n                        }\n                      >\n                        {node.data.name}\n                      </text>\n                    </Group>\n                  );\n                })}\n              </Group>\n            )}\n          </Tree>\n        </svg>\n      </div>\n    );\n  }\n}');
};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL2xpbmtUeXBlcy5qcyJdLCJuYW1lcyI6WyJSZWFjdCIsIkxpbmtUeXBlcyIsIlNob3ciLCJ0b3AiLCJsZWZ0IiwicmlnaHQiLCJib3R0b20iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7QUFBQSxBQUFPOzs7O0FBQ1AsQUFBTyxBQUFlOzs7O0FBQ3RCLEFBQU8sQUFBVSxBQUVqQjs7Ozs7Ozs7a0JBQWUsZ0JBQVE7MENBQ3JCOzt5QkFDRSxBQUFDO1lBQUQsQUFFRTtXQUZGLEFBRVEsQUFDTjtBQUhGLEFBR2EsQUFDWDs7V0FBUSxBQUNELEFBQ0w7WUFGTSxBQUVBLEFBQ047YUFITSxBQUdDLEFBQ1A7Y0FSSixBQUlVLEFBSUU7QUFKRixBQUNOOztnQkFMSjtrQkFBQTtBQUFBO0FBQ0UsR0FERixFQURGLEFBQ0UsQUFzU0g7QUF4U0QiLCJmaWxlIjoibGlua1R5cGVzLmpzP2VudHJ5Iiwic291cmNlUm9vdCI6Ii9Vc2Vycy9oc2hvZmYvY29kZS92eC9wYWNrYWdlcy92eC1kZW1vIn0=