ucsc-xena-client/dist/views/DragSelect.js

UCSC Xena Client. Functional genomics visualizations.

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var React = require('react');
//var ReactDOM = require('react-dom');
var Rx = require('../rx');
var _ = require('../underscore_ext');

var styles = {
	wrapper: {
		position: 'relative'
	},
	overlay: {
		backgroundColor: 'rgba(128, 128, 128, 0.3)',
		position: 'absolute',
		pointerEvents: 'none'
	}
};

var min = function min(x, y) {
	return x < y ? x : y;
};
var flop = function flop(x, y) {
	return x < y ? { start: x, end: y } : { start: y, end: x };
};

var clip = function clip(min, max, x) {
	return x < min ? min : x > max ? max : x;
};

function targetXPos(target, ev, width) {
	var bb = target.getBoundingClientRect();
	return clip(0, width - 1, ev.clientX - bb.left);
}

// Browsers give us coordinates that aren't always within the element. We
// would expect coords [0, width - 1] to indicate which pixel the mouse is over,
// but sometimes get coords outside that range.
//
// We clip start and end to [0, width - 1].

var DragSelect = function (_React$Component) {
	_inherits(DragSelect, _React$Component);

	function DragSelect() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, DragSelect);

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

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DragSelect.__proto__ || Object.getPrototypeOf(DragSelect)).call.apply(_ref, [this].concat(args))), _this), _this.state = { dragging: false }, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(DragSelect, [{
		key: 'componentWillMount',
		value: function componentWillMount() {
			var _this2 = this;

			var mousedown = new Rx.Subject();
			var mousedrag = mousedown.flatMap(function (down) {
				var target = down.currentTarget,
				    bb = target.getBoundingClientRect(),
				    start = targetXPos(target, down, bb.width),
				    selection;

				return Rx.Observable.fromEvent(window, 'mousemove').map(function (mm) {
					var end = targetXPos(target, mm, bb.width);

					selection = flop(start, end);
					return _extends({ dragging: true }, selection);
				}).takeUntil(Rx.Observable.fromEvent(window, 'mouseup')).concat(Rx.Observable.defer(function () {
					return Rx.Observable.of({ selection: selection });
				}));
			});
			this.subscription = mousedrag.subscribe(function (ev) {
				if (ev.selection) {
					_this2.props.onSelect && _this2.props.onSelect(ev.selection);
					_this2.setState({ dragging: false });
				} else {
					_this2.setState(ev);
				}
			});
			this.dragStart = function (ev) {
				return _this2.props.enabled && mousedown.next(ev);
			};
		}
	}, {
		key: 'componentWillUnmount',
		value: function componentWillUnmount() {
			this.subscription.unsubscribe();
		}
	}, {
		key: 'render',
		value: function render() {
			var dragging = this.state.dragging,
			    containerProps = _.omit(this.props, 'onSelect', 'enabled'),
			    ostyle = dragging ? {
				display: 'block',
				top: 0,
				left: min(this.state.start, this.state.end),
				width: Math.abs(this.state.end - this.state.start),
				height: '100%'
			} : { display: 'none' };

			return React.createElement(
				'div',
				_extends({}, containerProps, { style: styles.wrapper, onMouseDown: this.dragStart }),
				this.props.children,
				React.createElement('div', { style: _.merge(styles.overlay, ostyle) })
			);
		}
	}]);

	return DragSelect;
}(React.Component);

DragSelect.defaultProps = { enabled: true };


module.exports = DragSelect;