analytics/webcontent/bi/js/dashboard-analytics/visualizations/interactions/lassoSelect/LassoSelectView.js

/**
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: BI
 *
 * Copyright IBM Corp. 2017
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */

/**
 	* @file Lasso selection view
 	*/

'use strict';

define(['../../../lib/@waca/core-client/js/core-client/ui/View', 'jquery', '../../../lib/@waca/core-client/js/core-client/utils/BrowserUtils', '../../../lib/@waca/dashboard-common/dist/utils/EventChainLocal'], function (BaseView, $, BrowserUtils, EventChainLocal) {

	var keyCodes = {
		LEFT_CLICK: 1,
		ESCAPE: 27
	};

	var POINTER_EVENTS = {
		DOWN: 'mousedown touchstart',
		MOVE: 'mousemove touchmove',
		UP: 'mouseup touchend',
		LEAVE: 'mouseleave'
	};

	var LassoSelectView = BaseView.extend({

		id: 'lw-lasso-select',

		/**
   * @param {options} set of initial properties
   *
   */
		init: function init($target, cordinateResolver, isDragging) {
			BaseView.inherited('init', this, arguments);
			this.$el.prependTo(document.body);
			this.$target = $target;
			this.targetNode = this.$target.get(0);
			this.$body = $(document.body);
			this.cordinateResolver = cordinateResolver;
			this._isDragging = isDragging;

			this.handlers = {
				mousemove: this._getPipedHandler(this._handleMouseMove),
				mouseup: this._getPipedHandler(this._handleMouseUp),
				mousedown: this._getPipedHandler(this._handleMouseDown),
				keyup: this._getPipedHandler(this._handleKeyup),
				mouseleave: this._getPipedHandler(this._handleMouseLeave)
			};

			if (!this._isIE()) {
				this._configCursor();
			}

			this.$el.on(POINTER_EVENTS.MOVE, this.handlers.mousemove);
			this.$body.keyup(this.handlers.keyup);
			this.$target.on(POINTER_EVENTS.LEAVE, this.handlers.mouseleave).on(POINTER_EVENTS.MOVE, this.handlers.mousemove).on(POINTER_EVENTS.DOWN, this.handlers.mousedown);
		},

		/**
   * Mouse move event handler
   * @param {Object} event Jquery event object
   */
		_handleMouseMove: function _handleMouseMove(event) {

			this._updateCursor(event);

			var left = Math.min(event.pageX, this.left);
			var top = Math.min(event.pageY, this.top);
			var width = Math.abs(event.pageX - this.left);
			var height = Math.abs(event.pageY - this.top);

			var cssUpdate = {
				left: left,
				top: top,
				width: width,
				height: height
			};

			if (this._isDragging(event)) {
				this.$el.css(cssUpdate);
				if (this._isLassoWithinTarget()) {
					this.trigger('lassoSelect:cordsChange', { event: event, cords: this._getCords() });
				}
			}
		},

		/**
   * Handle key up event
   * @param {Object} event Jquery event object
   */
		_handleKeyup: function _handleKeyup(e) {
			if (e.keyCode === keyCodes.ESCAPE) {
				this.trigger('lassoSelect:cancel', {});
			}
		},

		/**
   * Mouse up event handler
   * @param {Object} event Jquery event object
   */
		_handleMouseUp: function _handleMouseUp(event) {

			if (this._isLassoWithinTarget()) {
				this.trigger('lassoSelect:done', { event: event, cords: this._getCords() });
			}
			var cssUpdate = {
				left: 0,
				top: 0,
				width: 0,
				height: 0
			};

			this.$el.css(cssUpdate);
			this.$body.off(POINTER_EVENTS.UP, this.handlers.mouseup);
		},

		/**
   * Mouse down event handler
   * @param {Object} event Jquery event object
   */
		_handleMouseDown: function _handleMouseDown(event) {
			if (event.type === 'touchstart' || event.which === keyCodes.LEFT_CLICK) {

				this.left = event.pageX;
				this.top = event.pageY;
				this.$body.on(POINTER_EVENTS.UP, this.handlers.mouseup);
			}
		},

		_handleMouseLeave: function _handleMouseLeave(event) {
			this._updateCursor(event, false);
		},

		remove: function remove() {
			this.$el.off(POINTER_EVENTS.MOVE, this.handlers.mousemove);

			this.$body.off(POINTER_EVENTS.UP, this.handlers.mouseup).off('keyup', this.handlers.keyup);

			this.$target.off(POINTER_EVENTS.DOWN, this.handlers.mousedown).off(POINTER_EVENTS.LEAVE, this.handlers.mouseleave).off(POINTER_EVENTS.MOVE, this.handlers.mousemove);

			if (this._initCursor) {
				this.targetNode.style.cursor = this._initCursor.target;
			}

			this.handlers = null;
			if (this.$cursor) {
				this.$cursor.remove();
				this.$cursor = null;
			}
			BaseView.inherited('remove', this, arguments);
		},

		/**
   * Returns the co-ordinate of the polygon (square) forming the lasso selection
   */
		_getCords: function _getCords() {
			var rect = this.el.getBoundingClientRect();
			var cords = [{ x: rect.left, y: rect.top }, // left top
			{ x: rect.right, y: rect.top }, // right top
			{ x: rect.right, y: rect.bottom }, // right bottom
			{ x: rect.left, y: rect.bottom // left bottom
			}];
			return cords;
		},

		/**
   * Returns true if the event lasso area is within the target region
   */
		_isLassoWithinTarget: function _isLassoWithinTarget() {
			var targetRectCord = this.$target.get(0).getBoundingClientRect();
			var lassoRectCord = this.el.getBoundingClientRect();

			return lassoRectCord.top >= targetRectCord.top && lassoRectCord.left >= targetRectCord.left && lassoRectCord.right <= targetRectCord.right && lassoRectCord.bottom <= targetRectCord.bottom;
		},

		/**
  *
  * Pass handler through a pipe
  *	@param handler - input handler function
  * @return Handler function which executes logic before calling the input handler.
  */
		_getPipedHandler: function _getPipedHandler(handler) {

			var func = function func(event) {

				if (this._isTouch(event)) {
					event.preventDefault();
					this.cordinateResolver(event);
				}
				// Lasso interaction don't deselect the widget
				var eventChainLocal = new EventChainLocal(event);
				eventChainLocal.setProperty('preventWidgetDeselect', true);

				handler.bind(this)(event);
			};

			return func.bind(this);
		},

		_isTouch: function _isTouch(event) {
			return event.type && (event.type === 'touchstart' || event.type === 'touchmove' || event.type === 'touchend');
		},

		_updateCursor: function _updateCursor(event, show) {

			if (!this._isIE()) {
				return;
			}

			var OFFSET = {
				LEFT: 10,
				TOP: 12
			};

			if (show === false) {
				if (this.$cursor) {
					this.$cursor.hide();
				}
				return;
			}

			if (this.$cursor && !this.$cursor.is(':visible')) {
				this.$cursor.show();
			} else if (!this.$cursor) {
				this.$cursor = $('<div class="lassoIconBox">');
				this.$cursor.prependTo(document.body);
			}
			this.$cursor.css({ left: event.pageX + OFFSET.LEFT, top: event.pageY + OFFSET.TOP });
		},

		_isIE: function _isIE() {
			return BrowserUtils.isIE();
		},

		_configCursor: function _configCursor() {
			var curVal = 'url(dashboard-analytics/images/pointer-marquee_32.svg), auto';
			this._initCursor = {};
			this._initCursor.target = this.targetNode.style.cursor;
			this.targetNode.style.cursor = curVal;
		},

		getCoordinates: function getCoordinates() {
			return this._getCords();
		}
	});

	return LassoSelectView;
});
//# sourceMappingURL=LassoSelectView.js.map