patternplate-client/application/components/pattern/block.js

Universal javascript client application for patternplate

'use strict';

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

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 _class, _class2, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _autobindDecorator = require('autobind-decorator');

var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);

var _querystring = require('querystring');

var _querystring2 = _interopRequireDefault(_querystring);

var _connection = require('./connection');

var _connection2 = _interopRequireDefault(_connection);

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

var Block = (0, _autobindDecorator2.default)(_class = (_temp = _class2 = function (_Component) {
	(0, _inherits3.default)(Block, _Component);

	function Block() {
		(0, _classCallCheck3.default)(this, Block);
		return (0, _possibleConstructorReturn3.default)(this, (Block.__proto__ || (0, _getPrototypeOf2.default)(Block)).apply(this, arguments));
	}

	(0, _createClass3.default)(Block, [{
		key: 'handleClick',
		value: function handleClick(e) {
			e.preventDefault();
			this.props.onClick(this.props);
		}
	}, {
		key: 'render',
		value: function render() {
			var props = this.props;
			var location = props.location,
			    base = props.base;

			var className = 'pattern-dependencies__' + props.type;
			var orientation = props.x < 50 ? 1 : 0;

			var onMouseEnter = function onMouseEnter() {
				return props.onMouseEnter(props.blockId);
			};
			var onMouseLeave = function onMouseLeave() {
				return props.onMouseLeave(props.blockId);
			};

			var block = {
				x: props.x + props.width * orientation,
				y: props.y + props.height / 2
			};

			var target = props.connect;

			var from = orientation === 1 ? block : target;
			var to = orientation === 1 ? target : block;

			var textX = props.type === 'root' ? 50 : props.x + props.width / 2;
			var textY = props.y + props.height / 2;

			var href = [base + 'pattern/' + props.id, _querystring2.default.stringify(location.query)].join('?');

			return _react2.default.createElement(
				'g',
				{ className: 'block-group', onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
				_react2.default.createElement(
					'a',
					{ xlinkHref: href, className: className },
					_react2.default.createElement('rect', {
						className: className,
						x: props.x,
						y: props.y,
						width: props.width,
						height: props.height,
						onClick: this.handleClick
					})
				),
				props.connect && _react2.default.createElement(_connection2.default, {
					labels: [props.id, props.localName],
					from: from,
					to: to,
					n: target.n || 20
				}),
				props.name && _react2.default.createElement(
					'a',
					{ xlinkHref: href },
					_react2.default.createElement(
						'text',
						{
							x: textX,
							y: textY,
							width: props.width,
							height: props.height,
							className: 'block-name'
						},
						props.name
					)
				)
			);
		}
	}]);
	return Block;
}(_react.Component), _class2.defaultProps = {
	type: 'block',
	width: 8,
	height: 8,
	onClick: function onClick() {},
	onMouseEnter: function onMouseEnter() {},
	onMouseLeave: function onMouseLeave() {}
}, _temp)) || _class;

exports.default = Block;
module.exports = exports['default'];
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NvdXJjZS9hcHBsaWNhdGlvbi9jb21wb25lbnRzL3BhdHRlcm4vYmxvY2suanMiXSwibmFtZXMiOlsiQmxvY2siLCJlIiwicHJldmVudERlZmF1bHQiLCJwcm9wcyIsIm9uQ2xpY2siLCJsb2NhdGlvbiIsImJhc2UiLCJjbGFzc05hbWUiLCJ0eXBlIiwib3JpZW50YXRpb24iLCJ4Iiwib25Nb3VzZUVudGVyIiwiYmxvY2tJZCIsIm9uTW91c2VMZWF2ZSIsImJsb2NrIiwid2lkdGgiLCJ5IiwiaGVpZ2h0IiwidGFyZ2V0IiwiY29ubmVjdCIsImZyb20iLCJ0byIsInRleHRYIiwidGV4dFkiLCJocmVmIiwiaWQiLCJzdHJpbmdpZnkiLCJxdWVyeSIsImpvaW4iLCJoYW5kbGVDbGljayIsImxvY2FsTmFtZSIsIm4iLCJuYW1lIiwiZGVmYXVsdFByb3BzIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBOzs7O0FBQ0E7Ozs7QUFDQTs7OztBQUNBOzs7Ozs7SUFHcUJBLEs7Ozs7Ozs7Ozs7OEJBK0JSQyxDLEVBQUc7QUFDZEEsS0FBRUMsY0FBRjtBQUNBLFFBQUtDLEtBQUwsQ0FBV0MsT0FBWCxDQUFtQixLQUFLRCxLQUF4QjtBQUNBOzs7MkJBRVE7QUFBQSxPQUNEQSxLQURDLEdBQ1EsSUFEUixDQUNEQSxLQURDO0FBQUEsT0FFREUsUUFGQyxHQUVpQkYsS0FGakIsQ0FFREUsUUFGQztBQUFBLE9BRVNDLElBRlQsR0FFaUJILEtBRmpCLENBRVNHLElBRlQ7O0FBR1IsT0FBTUMsdUNBQXFDSixNQUFNSyxJQUFqRDtBQUNBLE9BQU1DLGNBQWNOLE1BQU1PLENBQU4sR0FBVSxFQUFWLEdBQWUsQ0FBZixHQUFtQixDQUF2Qzs7QUFFQSxPQUFNQyxlQUFlLFNBQWZBLFlBQWU7QUFBQSxXQUFNUixNQUFNUSxZQUFOLENBQW1CUixNQUFNUyxPQUF6QixDQUFOO0FBQUEsSUFBckI7QUFDQSxPQUFNQyxlQUFlLFNBQWZBLFlBQWU7QUFBQSxXQUFNVixNQUFNVSxZQUFOLENBQW1CVixNQUFNUyxPQUF6QixDQUFOO0FBQUEsSUFBckI7O0FBRUEsT0FBTUUsUUFBUTtBQUNiSixPQUFHUCxNQUFNTyxDQUFOLEdBQVVQLE1BQU1ZLEtBQU4sR0FBY04sV0FEZDtBQUViTyxPQUFHYixNQUFNYSxDQUFOLEdBQVdiLE1BQU1jLE1BQU4sR0FBZTtBQUZoQixJQUFkOztBQUtBLE9BQU1DLFNBQVNmLE1BQU1nQixPQUFyQjs7QUFFQSxPQUFNQyxPQUFPWCxnQkFBZ0IsQ0FBaEIsR0FBb0JLLEtBQXBCLEdBQTRCSSxNQUF6QztBQUNBLE9BQU1HLEtBQUtaLGdCQUFnQixDQUFoQixHQUFvQlMsTUFBcEIsR0FBNkJKLEtBQXhDOztBQUVBLE9BQU1RLFFBQVFuQixNQUFNSyxJQUFOLEtBQWUsTUFBZixHQUF3QixFQUF4QixHQUE2QkwsTUFBTU8sQ0FBTixHQUFVUCxNQUFNWSxLQUFOLEdBQWMsQ0FBbkU7QUFDQSxPQUFNUSxRQUFRcEIsTUFBTWEsQ0FBTixHQUFVYixNQUFNYyxNQUFOLEdBQWUsQ0FBdkM7O0FBRUEsT0FBTU8sT0FBTyxDQUNUbEIsSUFEUyxnQkFDTUgsTUFBTXNCLEVBRFosRUFFWixzQkFBWUMsU0FBWixDQUFzQnJCLFNBQVNzQixLQUEvQixDQUZZLEVBR1hDLElBSFcsQ0FHTixHQUhNLENBQWI7O0FBS0EsVUFDQztBQUFBO0FBQUEsTUFBRyxXQUFVLGFBQWIsRUFBMkIsY0FBY2pCLFlBQXpDLEVBQXVELGNBQWNFLFlBQXJFO0FBQ0M7QUFBQTtBQUFBLE9BQUcsV0FBV1csSUFBZCxFQUFvQixXQUFXakIsU0FBL0I7QUFDQztBQUNDLGlCQUFXQSxTQURaO0FBRUMsU0FBR0osTUFBTU8sQ0FGVjtBQUdDLFNBQUdQLE1BQU1hLENBSFY7QUFJQyxhQUFPYixNQUFNWSxLQUpkO0FBS0MsY0FBUVosTUFBTWMsTUFMZjtBQU1DLGVBQVMsS0FBS1k7QUFOZjtBQURELEtBREQ7QUFZRTFCLFVBQU1nQixPQUFOLElBQ0M7QUFDQyxhQUFRLENBQUNoQixNQUFNc0IsRUFBUCxFQUFXdEIsTUFBTTJCLFNBQWpCLENBRFQ7QUFFQyxXQUFNVixJQUZQO0FBR0MsU0FBSUMsRUFITDtBQUlDLFFBQUdILE9BQU9hLENBQVAsSUFBWTtBQUpoQixNQWJIO0FBcUJFNUIsVUFBTTZCLElBQU4sSUFDQztBQUFBO0FBQUEsT0FBRyxXQUFXUixJQUFkO0FBQ0M7QUFBQTtBQUFBO0FBQ0MsVUFBR0YsS0FESjtBQUVDLFVBQUdDLEtBRko7QUFHQyxjQUFPcEIsTUFBTVksS0FIZDtBQUlDLGVBQVFaLE1BQU1jLE1BSmY7QUFLQyxrQkFBVTtBQUxYO0FBT0VkLFlBQU02QjtBQVBSO0FBREQ7QUF0QkgsSUFERDtBQXFDQTs7OzZCQTlFTUMsWSxHQUFlO0FBQ3JCekIsT0FBTSxPQURlO0FBRXJCTyxRQUFPLENBRmM7QUFHckJFLFNBQVEsQ0FIYTtBQUlyQmIsVUFBUyxtQkFBTSxDQUFFLENBSkk7QUFLckJPLGVBQWMsd0JBQU0sQ0FBRSxDQUxEO0FBTXJCRSxlQUFjLHdCQUFNLENBQUU7QUFORCxDOztrQkF0QkZiLEsiLCJmaWxlIjoiYmxvY2suanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHtQcm9wVHlwZXMgYXMgdCwgQ29tcG9uZW50fSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgYXV0b2JpbmQgZnJvbSAnYXV0b2JpbmQtZGVjb3JhdG9yJztcbmltcG9ydCBxdWVyeXN0cmluZyBmcm9tICdxdWVyeXN0cmluZyc7XG5pbXBvcnQgQ29ubmVjdGlvbiBmcm9tICcuL2Nvbm5lY3Rpb24nO1xuXG5AYXV0b2JpbmRcbmV4cG9ydCBkZWZhdWx0IGNsYXNzIEJsb2NrIGV4dGVuZHMgQ29tcG9uZW50IHtcblx0c3RhdGljIHByb3BUeXBlcyA9IHtcblx0XHRiYXNlOiB0LnN0cmluZy5pc1JlcXVpcmVkLFxuXHRcdG5hbWU6IHQuc3RyaW5nLmlzUmVxdWlyZWQsXG5cdFx0aWQ6IHQuc3RyaW5nLmlzUmVxdWlyZWQsXG5cdFx0dHlwZTogdC5zdHJpbmcuaXNSZXF1aXJlZCxcblx0XHR4OiB0Lm9uZU9mVHlwZShbdC5zdHJpbmcsIHQubnVtYmVyXSkuaXNSZXF1aXJlZCxcblx0XHR5OiB0Lm9uZU9mVHlwZShbdC5zdHJpbmcsIHQubnVtYmVyXSkuaXNSZXF1aXJlZCxcblx0XHR3aWR0aDogdC5udW1iZXIuaXNSZXF1aXJlZCxcblx0XHRoZWlnaHQ6IHQubnVtYmVyLmlzUmVxdWlyZWQsXG5cdFx0Y29ubmVjdDogdC5zaGFwZSh7XG5cdFx0XHR4OiB0Lm9uZU9mVHlwZShbdC5zdHJpbmcsIHQubnVtYmVyXSkuaXNSZXF1aXJlZCxcblx0XHRcdHk6IHQub25lT2ZUeXBlKFt0LnN0cmluZywgdC5udW1iZXJdKS5pc1JlcXVpcmVkLFxuXHRcdFx0bjogdC5udW1iZXJcblx0XHR9KSxcblx0XHRvbkNsaWNrOiB0LmZ1bmMuaXNSZXF1aXJlZCxcblx0XHRsb2NhdGlvbjogdC5zaGFwZSh7XG5cdFx0XHRwYXRobmFtZTogdC5zdHJpbmcsXG5cdFx0XHRxdWVyeTogdC5hbnlcblx0XHR9KS5pc1JlcXVpcmVkXG5cdH07XG5cblx0c3RhdGljIGRlZmF1bHRQcm9wcyA9IHtcblx0XHR0eXBlOiAnYmxvY2snLFxuXHRcdHdpZHRoOiA4LFxuXHRcdGhlaWdodDogOCxcblx0XHRvbkNsaWNrOiAoKSA9PiB7fSxcblx0XHRvbk1vdXNlRW50ZXI6ICgpID0+IHt9LFxuXHRcdG9uTW91c2VMZWF2ZTogKCkgPT4ge31cblx0fTtcblxuXHRoYW5kbGVDbGljayhlKSB7XG5cdFx0ZS5wcmV2ZW50RGVmYXVsdCgpO1xuXHRcdHRoaXMucHJvcHMub25DbGljayh0aGlzLnByb3BzKTtcblx0fVxuXG5cdHJlbmRlcigpIHtcblx0XHRjb25zdCB7cHJvcHN9ID0gdGhpcztcblx0XHRjb25zdCB7bG9jYXRpb24sIGJhc2V9ID0gcHJvcHM7XG5cdFx0Y29uc3QgY2xhc3NOYW1lID0gYHBhdHRlcm4tZGVwZW5kZW5jaWVzX18ke3Byb3BzLnR5cGV9YDtcblx0XHRjb25zdCBvcmllbnRhdGlvbiA9IHByb3BzLnggPCA1MCA/IDEgOiAwO1xuXG5cdFx0Y29uc3Qgb25Nb3VzZUVudGVyID0gKCkgPT4gcHJvcHMub25Nb3VzZUVudGVyKHByb3BzLmJsb2NrSWQpO1xuXHRcdGNvbnN0IG9uTW91c2VMZWF2ZSA9ICgpID0+IHByb3BzLm9uTW91c2VMZWF2ZShwcm9wcy5ibG9ja0lkKTtcblxuXHRcdGNvbnN0IGJsb2NrID0ge1xuXHRcdFx0eDogcHJvcHMueCArIHByb3BzLndpZHRoICogb3JpZW50YXRpb24sXG5cdFx0XHR5OiBwcm9wcy55ICsgKHByb3BzLmhlaWdodCAvIDIpXG5cdFx0fTtcblxuXHRcdGNvbnN0IHRhcmdldCA9IHByb3BzLmNvbm5lY3Q7XG5cblx0XHRjb25zdCBmcm9tID0gb3JpZW50YXRpb24gPT09IDEgPyBibG9jayA6IHRhcmdldDtcblx0XHRjb25zdCB0byA9IG9yaWVudGF0aW9uID09PSAxID8gdGFyZ2V0IDogYmxvY2s7XG5cblx0XHRjb25zdCB0ZXh0WCA9IHByb3BzLnR5cGUgPT09ICdyb290JyA/IDUwIDogcHJvcHMueCArIHByb3BzLndpZHRoIC8gMjtcblx0XHRjb25zdCB0ZXh0WSA9IHByb3BzLnkgKyBwcm9wcy5oZWlnaHQgLyAyO1xuXG5cdFx0Y29uc3QgaHJlZiA9IFtcblx0XHRcdGAke2Jhc2V9cGF0dGVybi8ke3Byb3BzLmlkfWAsXG5cdFx0XHRxdWVyeXN0cmluZy5zdHJpbmdpZnkobG9jYXRpb24ucXVlcnkpXG5cdFx0XS5qb2luKCc/Jyk7XG5cblx0XHRyZXR1cm4gKFxuXHRcdFx0PGcgY2xhc3NOYW1lPVwiYmxvY2stZ3JvdXBcIiBvbk1vdXNlRW50ZXI9e29uTW91c2VFbnRlcn0gb25Nb3VzZUxlYXZlPXtvbk1vdXNlTGVhdmV9PlxuXHRcdFx0XHQ8YSB4bGlua0hyZWY9e2hyZWZ9IGNsYXNzTmFtZT17Y2xhc3NOYW1lfT5cblx0XHRcdFx0XHQ8cmVjdFxuXHRcdFx0XHRcdFx0Y2xhc3NOYW1lPXtjbGFzc05hbWV9XG5cdFx0XHRcdFx0XHR4PXtwcm9wcy54fVxuXHRcdFx0XHRcdFx0eT17cHJvcHMueX1cblx0XHRcdFx0XHRcdHdpZHRoPXtwcm9wcy53aWR0aH1cblx0XHRcdFx0XHRcdGhlaWdodD17cHJvcHMuaGVpZ2h0fVxuXHRcdFx0XHRcdFx0b25DbGljaz17dGhpcy5oYW5kbGVDbGlja31cblx0XHRcdFx0XHRcdC8+XG5cdFx0XHRcdDwvYT5cblx0XHRcdFx0e1xuXHRcdFx0XHRcdHByb3BzLmNvbm5lY3QgJiZcblx0XHRcdFx0XHRcdDxDb25uZWN0aW9uXG5cdFx0XHRcdFx0XHRcdGxhYmVscz17W3Byb3BzLmlkLCBwcm9wcy5sb2NhbE5hbWVdfVxuXHRcdFx0XHRcdFx0XHRmcm9tPXtmcm9tfVxuXHRcdFx0XHRcdFx0XHR0bz17dG99XG5cdFx0XHRcdFx0XHRcdG49e3RhcmdldC5uIHx8IDIwfVxuXHRcdFx0XHRcdFx0XHQvPlxuXHRcdFx0XHR9XG5cdFx0XHRcdHtcblx0XHRcdFx0XHRwcm9wcy5uYW1lICYmXG5cdFx0XHRcdFx0XHQ8YSB4bGlua0hyZWY9e2hyZWZ9PlxuXHRcdFx0XHRcdFx0XHQ8dGV4dFxuXHRcdFx0XHRcdFx0XHRcdHg9e3RleHRYfVxuXHRcdFx0XHRcdFx0XHRcdHk9e3RleHRZfVxuXHRcdFx0XHRcdFx0XHRcdHdpZHRoPXtwcm9wcy53aWR0aH1cblx0XHRcdFx0XHRcdFx0XHRoZWlnaHQ9e3Byb3BzLmhlaWdodH1cblx0XHRcdFx0XHRcdFx0XHRjbGFzc05hbWU9XCJibG9jay1uYW1lXCJcblx0XHRcdFx0XHRcdFx0XHQ+XG5cdFx0XHRcdFx0XHRcdFx0e3Byb3BzLm5hbWV9XG5cdFx0XHRcdFx0XHRcdDwvdGV4dD5cblx0XHRcdFx0XHRcdDwvYT5cblx0XHRcdFx0fVxuXHRcdFx0PC9nPlxuXHRcdCk7XG5cdH1cbn1cbiJdfQ==