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

'use strict';

/**
 * Licensed Materials - Property of IBM
 * IBM Cognos Products: BI Cloud (C) Copyright IBM Corp. 2018, 2020
 * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 */
define(['./BasePropertyAction', 'jquery', 'underscore', '../../../../lib/@waca/dashboard-common/dist/ui/interaction/Utils', '../../../../app/nls/StringResources'], function (BaseClass, $, _, utils, stringResources) {

	var Align = null;
	Align = BaseClass.extend({
		init: function init(controller) {
			this.controller = controller;
			Align.inherited('init', this, arguments);
			this.selectedNodes = [];
		},

		/**
   * Called by the interaction manager when there is a new selection
   *
   * @param nodes
   */
		newSelection: function newSelection(nodes) {
			this.selectedNodes = nodes;
		},

		getProperties: function getProperties() {
			var icons = this.dashboardApi.getFeature('Icons');
			var isReadOnly = this.selectedNodes.length <= 1;
			return [{
				'type': 'IconPicker',
				'label': stringResources.get('toolbarActionAlign'),
				'name': 'alignWidget',
				'id': 'alignWidget',
				'tabName': stringResources.get('tabName_general'),
				'sectionName': stringResources.get('sectionName_layout'),
				'sectionOpened': true,
				'readOnly': isReadOnly,
				'items': [{
					'name': 'left',
					'label': stringResources.get('alignWidgetLeft'),
					'value': icons.getIcon('align-left').id
				}, {
					'name': 'center',
					'label': stringResources.get('alignWidgetCenter'),
					'value': icons.getIcon('align-horizontally').id
				}, {
					'name': 'right',
					'label': stringResources.get('alignWidgetRight'),
					'value': icons.getIcon('align-right').id
				}, {
					'name': 'top',
					'label': stringResources.get('alignWidgetTop'),
					'value': icons.getIcon('align-top').id
				}, {
					'name': 'middle',
					'label': stringResources.get('alignWidgetMiddle'),
					'value': icons.getIcon('align-vertically').id
				}, {
					'name': 'bottom',
					'label': stringResources.get('alignWidgetBottom'),
					'value': icons.getIcon('align-bottom').id
				}],
				onChange: this.onAlignIconClick.bind(this),
				order: 10
			}];
		},

		onAlignIconClick: function onAlignIconClick(propertyId, selection) {
			if (selection && selection.length && selection[0].name && this.selectedNodes.length > 1) {
				var position = selection[0].name;
				this.applyAlignment(position);
			}
		},

		getWidgetBoxes: function getWidgetBoxes(node) {
			var widgetPos = utils.position(node);
			var widgetSize = utils.widgetSize(node);
			var result = {
				boundingBox: $(node).position(),
				widgetBox: {
					top: widgetPos.top,
					left: widgetPos.left,
					width: widgetSize.width,
					height: widgetSize.height
				}
			};
			var boundingRect = node.getBoundingClientRect();
			result.boundingBox.width = boundingRect.width;
			result.boundingBox.height = boundingRect.height;
			return result;
		},

		applyAlignment: function applyAlignment(position) {
			var alignmentFns = {
				left: this.getLeftAlignmentStyle,
				center: this.getCenterAlignmentStyle,
				right: this.getRightAlignmentStyle,
				top: this.getTopAlignmentStyle,
				middle: this.getMiddleAlignmentStyle,
				bottom: this.getBottomAlignmentStyle
			};
			var widgetBoxes = [];
			var widgetBox = this.getWidgetBoxes(this.selectedNodes[0]);
			widgetBoxes.push(widgetBox);
			var bounds = {
				top: widgetBox.boundingBox.top,
				left: widgetBox.boundingBox.left,
				bottom: widgetBox.boundingBox.top + widgetBox.boundingBox.height,
				right: widgetBox.boundingBox.left + widgetBox.boundingBox.width
			};
			for (var i = 1; i < this.selectedNodes.length; i++) {
				var _widgetBox = this.getWidgetBoxes(this.selectedNodes[i]);
				widgetBoxes.push(_widgetBox);
				bounds.top = Math.min(bounds.top, _widgetBox.boundingBox.top);
				bounds.left = Math.min(bounds.left, _widgetBox.boundingBox.left);
				bounds.bottom = Math.max(bounds.bottom, _widgetBox.boundingBox.top + _widgetBox.boundingBox.height);
				bounds.right = Math.max(bounds.right, _widgetBox.boundingBox.left + _widgetBox.boundingBox.width);
			}
			var modelInfoArray = [];
			for (var _i = 0; _i < this.selectedNodes.length; _i++) {
				var updatedStyle = alignmentFns[position](bounds, widgetBoxes[_i], this.selectedNodes[_i]);
				if (updatedStyle) {
					modelInfoArray.push({
						style: updatedStyle,
						id: this.selectedNodes[_i]._layout.model.id
					});
				}
			}
			if (modelInfoArray.length) {
				this.updateModel(modelInfoArray);
				this.refreshProperties();
			}
		},

		getLeftAlignmentStyle: function getLeftAlignmentStyle(bounds, widgetBox, node) {
			var leftPos = bounds.left;
			if (Math.round(widgetBox.boundingBox.left) !== Math.round(widgetBox.widgetBox.left)) {
				var offset = widgetBox.boundingBox.left - widgetBox.widgetBox.left;
				leftPos = leftPos - offset;
			}
			//Sanity check the position against the minimum
			leftPos = Math.max(leftPos, node._layout.parentLayout.getMinimumLeft());
			return {
				left: leftPos + 'px'
			};
		},

		getCenterAlignmentStyle: function getCenterAlignmentStyle(bounds, widgetBox, node) {
			var centerLine = bounds.left + (bounds.right - bounds.left) / 2;
			var leftPos = centerLine - widgetBox.widgetBox.width / 2;
			if (Math.round(widgetBox.boundingBox.left) !== Math.round(widgetBox.widgetBox.left)) {
				var offset = widgetBox.boundingBox.left + widgetBox.boundingBox.width / 2 - (widgetBox.widgetBox.left + widgetBox.widgetBox.width / 2);
				leftPos = leftPos - offset;
			}
			//Sanity check the position against the minimum
			leftPos = Math.max(leftPos, node._layout.parentLayout.getMinimumLeft());
			return {
				left: leftPos + 'px'
			};
		},

		getRightAlignmentStyle: function getRightAlignmentStyle(bounds, widgetBox, node) {
			var leftPos = bounds.right - widgetBox.widgetBox.width;
			if (Math.round(widgetBox.boundingBox.width) !== Math.round(widgetBox.widgetBox.width)) {
				var offset = widgetBox.boundingBox.left + widgetBox.boundingBox.width - (widgetBox.widgetBox.left + widgetBox.widgetBox.width);
				leftPos = leftPos - offset;
			}
			//Sanity check the position against the minimum
			leftPos = Math.max(leftPos, node._layout.parentLayout.getMinimumLeft());
			return {
				left: leftPos + 'px'
			};
		},

		getTopAlignmentStyle: function getTopAlignmentStyle(bounds, widgetBox, node) {
			var topPos = bounds.top;
			if (Math.round(widgetBox.boundingBox.top) !== Math.round(widgetBox.widgetBox.top)) {
				var offset = widgetBox.boundingBox.top - widgetBox.widgetBox.top;
				topPos = topPos - offset;
			}
			//Sanity check the position against the minimum
			topPos = Math.max(topPos, node._layout.parentLayout.getMinimumTop());
			return {
				top: topPos + 'px'
			};
		},

		getMiddleAlignmentStyle: function getMiddleAlignmentStyle(bounds, widgetBox, node) {
			var middleLine = bounds.top + (bounds.bottom - bounds.top) / 2;
			var topPos = middleLine - widgetBox.widgetBox.height / 2;
			if (Math.round(widgetBox.boundingBox.top) !== Math.round(widgetBox.widgetBox.top)) {
				var offset = widgetBox.boundingBox.top + widgetBox.boundingBox.height / 2 - (widgetBox.widgetBox.top + widgetBox.widgetBox.height / 2);
				topPos = topPos - offset;
			}
			//Sanity check the position against the minimum
			topPos = Math.max(topPos, node._layout.parentLayout.getMinimumTop());
			return {
				top: topPos + 'px'
			};
		},

		getBottomAlignmentStyle: function getBottomAlignmentStyle(bounds, widgetBox, node) {
			var topPos = bounds.bottom - widgetBox.widgetBox.height;
			if (Math.round(widgetBox.boundingBox.height) !== Math.round(widgetBox.widgetBox.height)) {
				var offset = widgetBox.boundingBox.top + widgetBox.boundingBox.height - (widgetBox.widgetBox.top + widgetBox.widgetBox.height);
				topPos = topPos - offset;
			}
			//Sanity check the position against the minimum
			topPos = Math.max(topPos, node._layout.parentLayout.getMinimumTop());
			return {
				top: topPos + 'px'
			};
		}
	});

	return Align;
});
//# sourceMappingURL=AlignAction.js.map