analytics/webcontent/bi/js/gemini/dashboard/layout/authoring/interaction/LayoutGuidelines.js

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2018
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['jquery', 'underscore', '../../../../lib/@waca/core-client/js/core-client/ui/core/Class'], function ($, _, Class) {

	var Guidlines = Class.extend({
		THRESHOLD: 5,
		/**
   * Find widgets and create guidelines for them, to align with top,middle,bottom,left,center,right.
   * @param nPage {domNode} Container of the widgets to create guidelines for.
   * @param dragObject {object} A drag object used by move and resize. Essentially, we only needs the IDs of the widgets being resized/moved, so they are excluded from the guidelines
   */
		setup: function setup(nPage, dragObject, snapGuidelines) {
			this._aGuidelines = [];
			this.snapGuidelines = snapGuidelines;

			this.domNode = nPage;
			var $page = $(this.domNode);

			_.each($page.children('.widget,.pagegroup,.pagetemplateDropZone'), function (n) {
				if (dragObject && dragObject.dragBox && dragObject.dragBox.ids.indexOf(n.id) > -1) {
					return;
				}
				var $n = $(n),
				    rect = $n.position();

				var leftOffset = 0,
				    topOffset = 0,
				    height,
				    width;
				var isDropZone = $n.is('.pagetemplateDropZone');
				height = $n.outerHeight();
				width = $n.outerWidth();

				var left = Math.round(rect.left + nPage.scrollLeft + leftOffset),
				    right = Math.round(left + width);
				var top = Math.round(rect.top + nPage.scrollTop + topOffset),
				    bottom = Math.round(top + height);

				this._addGuideline('x', left, top, bottom, isDropZone ? 'left' : null);
				this._addGuideline('x', right, top, bottom, isDropZone ? 'right' : null);
				this._addGuideline('x', (left + right) / 2, top, bottom);

				this._addGuideline('y', top, left, right, isDropZone ? 'top' : null);
				this._addGuideline('y', bottom, left, right, isDropZone ? 'bottom' : null);
				this._addGuideline('y', (top + bottom) / 2, left, right);
			}.bind(this));

			this._addGuideline('x', nPage.scrollWidth / 2);
			this._addGuideline('y', nPage.scrollHeight / 2);
		},

		/**
   * Create a guideline object. Adds it to the internal array. A guideline object the position (x/y) and the dom node to represent it (axis_x/axis_y).
   * @param {string} sAxis Can be 'x' or 'y'. Sets the orientation of the guideline.
   * @param {int} iPos The x or y coordinates where to create a guideline.
   * @param {int} topOrLeft (Optional) Top or Left position of the marker, depending if sAxis is x or y.
   * @param {int} bottomOrRight (Optional) Bottom or Right position of the marker, depending if sAxis is x or y.
   * @param {string} restrictedTo Can be 'top', 'bottom', 'left' or 'right'. It specifies if the guideline must only be used with a specific edge
   */
		_addGuideline: function _addGuideline(sAxis, iPos, topOrLeft, bottomOrRight, restrictedTo) {
			var $page = $(this.domNode),
			    h = this.domNode.scrollHeight - 10 + 'px',
			    w = this.domNode.scrollWidth - 10 + 'px';

			var cssPosition = sAxis === 'x' ? { left: iPos + 'px', height: h } : { top: iPos + 'px', width: w };

			var $marker1 = $('<div class="guidelineMarker1">');
			var $marker2 = $('<div class="guidelineMarker2">');
			if (topOrLeft !== undefined) {
				$marker1.css(sAxis === 'x' ? 'top' : 'left', topOrLeft - 5 + 'px');
			}
			if (bottomOrRight !== undefined) {
				var css = {
					bottom: 'auto',
					right: 'auto'
				};
				css[sAxis === 'x' ? 'top' : 'left'] = bottomOrRight - 5 + 'px';
				$marker2.css(css);
			}

			var nAxis = $('<div class="guideline guideline' + sAxis + '">').css(cssPosition).append($marker1).append($marker2);
			var g = {};
			if (restrictedTo) {
				g.restricted = restrictedTo;
			}

			g[sAxis] = iPos;
			g['axis_' + sAxis] = nAxis;

			this._aGuidelines.push(g);
			$page.append(nAxis);
		},

		calculateSnapPoint: function calculateSnapPoint(dragEdge, axis) {
			var guidelineDistance = null;
			var guideLine = {};

			if (this._aGuidelines && this.snapGuidelines) {
				this._aGuidelines.forEach(function (guideline) {

					if (!isNaN(Math.abs(dragEdge - guideline[axis])) && Math.abs(dragEdge - guideline[axis]) < this.THRESHOLD) {
						if (guidelineDistance === null || guidelineDistance > Math.abs(dragEdge - guideline[axis])) {
							guidelineDistance = dragEdge - guideline[axis];
							guideLine = guideline;
						}
					} else if (guideline[axis]) {
						if (Math.abs(dragEdge - guideline[axis]) < this.THRESHOLD) {
							guidelineDistance = dragEdge - guideline[axis];
							guideLine = guideline;
						}
					}
				}.bind(this));
			}

			var showGuideline = function showGuideline() {
				guideLine['axis_' + axis].show();
			};

			return { 'distance': guidelineDistance, 'show': showGuideline };
		},

		/**
   * Returns current guidelines. If undefined, an empty array.
   * @returns {Array}
   */
		getAll: function getAll() {
			return this._aGuidelines || [];
		},

		clear: function clear() {
			$(this.domNode).children('.guideline').remove();
			this._aGuidelines = null;
			this.domNode = null;
		}

	});
	return Guidlines;
});
//# sourceMappingURL=LayoutGuidelines.js.map